:root{
  --bg:#0b1220;
  --bg-soft:#0f172a;
  --glass:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --text:#e2e8f0;
  --muted:#94a3b8;
  --neon:#00e5ff;
  --neon-2:#7c3aed;
  --accent:#10b981;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:radial-gradient(1200px 600px at 10% -10%,rgba(124,58,237,.15),transparent),
             radial-gradient(1200px 600px at 90% 10%,rgba(0,229,255,.12),transparent),
             var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(11,18,32,.65),rgba(11,18,32,.35) 60%,transparent);
  border-bottom:1px solid var(--stroke);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-text{font-family:Orbitron,Inter,sans-serif;font-weight:800;letter-spacing:.02em}
.brand-text em{color:var(--neon);font-style:normal}
.nav{display:flex;align-items:center;gap:20px}
.nav a{color:var(--muted);font-weight:500}
.nav a.active{color:var(--text)}
.nav .cta{padding:.55rem .9rem;border:1px solid var(--stroke);border-radius:999px;
  background:linear-gradient(90deg,rgba(0,229,255,.2),rgba(124,58,237,.2));
  box-shadow:inset 0 0 20px rgba(124,58,237,.25)}
.btn-burger{display:none;background:transparent;border:none;color:var(--text);font-size:20px}
@media(max-width:880px){.nav{display:none}.btn-burger{display:block}}

.select-clean {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  padding: 6px 10px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}
.select-clean option {
  background: #111827;
  color: #fff;
}


/* Hero */
.hero{padding:56px 0 10px;border-bottom:1px solid var(--stroke)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}}
.hero-title{font-family:Orbitron,Inter,sans-serif;font-size:clamp(28px,5vw,48px);line-height:1.1;margin:0 0 12px}
.glow{color:var(--neon);text-shadow:0 0 18px rgba(0,229,255,.5)}
.hero-sub{color:var(--muted);margin:0 0 22px;font-size:1.05rem}
.hero-cta{display:flex;gap:12px;margin-bottom:16px}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:14px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);color:var(--text)}
.btn.primary{background:linear-gradient(90deg,rgba(0,229,255,.2),rgba(124,58,237,.2));border-color:transparent}
.btn.ghost{background:transparent}
.search-wrap{position:relative;max-width:520px}
.search{width:100%;padding:14px 42px 14px 14px;border-radius:12px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);color:var(--text)}
.kbd{position:absolute;right:8px;top:50%;translate:0 -50%;font-size:12px;color:var(--muted);
  border:1px solid var(--stroke);border-radius:8px;padding:2px 6px;background:rgba(255,255,255,.04)}

/* HUD */
.hud{padding:16px;border-radius:16px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--shadow)}
.hud-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.hud-card{padding:12px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.06)}
.hud-card span{display:block;color:var(--muted);font-size:12px}
.hud-card strong{font-size:18px}
.hud-card.ok{border-color:rgba(16,185,129,.4);box-shadow:0 0 0 1px rgba(16,185,129,.2) inset}
.hud-graph{height:140px;border-radius:12px;border:1px dashed var(--stroke);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 1px,transparent 1px,transparent 14px),
             repeating-linear-gradient(0deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 1px,transparent 1px,transparent 14px)}

/* Benefits */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px 0}
@media(max-width:980px){.benefits{grid-template-columns:repeat(2,1fr)}}
.benefit{padding:16px;border:1px solid var(--stroke);border-radius:14px;background:rgba(255,255,255,.03)}
.benefit h3{margin:0 0 6px;font-weight:700}
.benefit p{margin:0;color:var(--muted)}

/* Charts sizing fix */
.hud canvas{display:block;width:100% !important;height:auto}
#lineChart{height:320px !important}
#barChart{height:280px !important}

/* Cards */
.section-title{font-family:Orbitron,Inter,sans-serif;margin:24px 0 10px}
.cat{margin:18px 0 10px;color:var(--muted);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(124,58,237,.15)}
.icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);font-size:22px}
.icon.neon{box-shadow:0 0 22px rgba(0,229,255,.35), inset 0 0 10px rgba(0,229,255,.12)}
.card-body h4{margin:0 0 6px}
.card-body p{margin:0;color:var(--muted)}

/* CTA */
.cta{padding:34px 0}
.cta-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-radius:16px;border:1px solid var(--stroke);
  background:linear-gradient(90deg,rgba(0,229,255,.12),rgba(124,58,237,.12))}
.cta-card h3{margin:0}
.cta-card p{margin:0;color:var(--muted)}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 0}
@media(max-width:980px){.faq{grid-template-columns:1fr}}
.faq details{padding:14px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.03)}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--stroke);padding:20px 0;background:linear-gradient(180deg,rgba(124,58,237,.08),transparent)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-foot{display:flex;align-items:center;gap:8px;color:var(--muted)}
.foot-links{display:flex;gap:16px;color:var(--muted)}
.copy{color:var(--muted);font-size:.9rem}

/* Background Orbs */
.bg-orb{position:fixed;inset:0;pointer-events:none;opacity:.35;mix-blend-screen;filter:blur(40px);z-index:-1}
.orb-1{background:radial-gradient(600px 600px at -10% 10%, rgba(124,58,237,.35), transparent)}
.orb-2{background:radial-gradient(800px 800px at 110% -10%, rgba(0,229,255,.35), transparent)}

/* Animations */
.anim{opacity:0;transform:translateY(6px);transition:opacity .5s ease, transform .5s ease}
.anim.in{opacity:1;transform:none}

/* ====== MOBILE FIRST / QUEBRAS ====== */
:root{
  --container-px: 20px;
  --container-max: 1120px;
}

.container{
  width: min(100% - 2*var(--container-px), var(--container-max));
  margin-inline: auto;
}

/* Tipografia adaptativa */
.hero-title{
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1.1;
}
.section-title{
  font-size: clamp(20px, 3.8vw, 28px);
}

/* Inputs/Selects: toque confortável */
.search, .btn, .select-clean{
  min-height: 44px;
  font-size: 16px;
}

/* Navbar mobile */
.site-header .nav{
  display: flex;
  gap: 14px;
}
.btn-burger{ display: none; }

@media (max-width: 960px){
  .site-header .nav{
    position: fixed;
    inset: 64px 16px auto 16px;
    display: none;
    flex-direction: column;
    background: rgba(2,6,23,.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 14px;
    z-index: 30;
  }
  .site-header .nav.open{ display: flex; }
  .btn-burger{ display: inline-block; }
}

/* Hero: duas colunas → uma coluna */
.hero-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 960px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-cta{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 520px){
  .hero-cta{ grid-template-columns: 1fr; }
  .search-wrap{ display: flex; align-items: center; gap: 8px; }
  .search-wrap .search{ flex: 1; }
}

/* Cartões da grade */
.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 1100px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .grid{ grid-template-columns: 1fr; }
}

/* Painel/HUD: cards-métricas 4→2→1 */
.grid[style*="repeat(4"] .hud-card,
.grid[style*="repeat(4,1fr)"] .hud-card{
  /* nada — apenas seletor de compatibilidade */
}
.hud-card{ min-height: 64px; }
@media (max-width: 960px){
  /* força 2 colunas nas métricas quando vier inline com repeat(4,1fr) */
  .grid[style*="repeat(4"]{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px){
  .grid[style*="repeat(4"]{ grid-template-columns: 1fr !important; }
}

/* Seções 1fr 2fr (páginas internas) → coluna única no mobile */
@media (max-width: 1024px){
  /* qualquer grid com inline "1fr 2fr" vira 1 coluna */
  .grid[style*="1fr 2fr"]{ grid-template-columns: 1fr !important; }
}

/* Gráficos: alturas por breakpoint */
.hud canvas{ width: 100% !important; height: auto; display: block; }
#chartPMT, #chartStack, #chartLine, #lineChart, #barChart{
  height: 320px !important;
}
@media (max-width: 960px){
  #chartPMT, #chartStack, #chartLine, #lineChart, #barChart{
    height: 260px !important;
  }
}
@media (max-width: 520px){
  #chartPMT, #chartStack, #chartLine, #lineChart, #barChart{
    height: 220px !important;
  }
}

/* Tabelas: scroll horizontal e cabeçalho fixo */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}
.table{
  min-width: 640px; /* permite scroll em telas estreitas */
  border-collapse: collapse;
}
.table thead th{
  position: sticky;
  top: 0;
  background: rgba(2,6,23,.9);
  backdrop-filter: blur(6px);
  z-index: 1;
}

/* CTA final: empilhar no mobile */
.cta-card{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.cta-card .btn{ justify-self: end; }
@media (max-width: 680px){
  .cta-card{ grid-template-columns: 1fr; }
  .cta-card .btn{ justify-self: stretch; }
}

/* Selects: seta visível e toque maior */
.select-clean{
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 12px 38px 12px 12px;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* Melhorar estados de toque */
.card, .btn, .search, .select-clean{
  transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
@media (hover: hover){
  .card.calc:hover{ transform: translateY(-2px); }
}

/* Respeito ao usuário com redução de movimento */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}