:root{
  --fundo:#060913;--fundo2:#0B1230;--sup:#10193B;--sup2:#16224E;--texto:#EEF1FA;--texto2:#9DA8CC;
  --linha:#22305F;--marca:#5B8CFF;--marca2:#8F6BFF;--lua:#F4EBD0;--ok:#3FD08F;--erro:#FF6F7D;--larg:72rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.dsp{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;letter-spacing:-.03em;line-height:1.04}
h1{font-size:clamp(2.6rem,7vw,4.9rem);font-weight:800;margin:0 0 1.1rem}
h2{font-size:clamp(1.8rem,4.2vw,2.8rem);font-weight:800;margin:0 0 .6rem}
h3{font-size:1.15rem;font-weight:700;margin:0 0 .3rem;letter-spacing:-.02em}
p{margin:0 0 1rem;max-width:62ch}
a{color:var(--marca)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--marca);outline-offset:3px;border-radius:4px}
.env{width:100%;max-width:var(--larg);margin:0 auto;padding:0 1.5rem}
section{padding:5.5rem 0;position:relative}
.sub{color:var(--texto2);font-size:1.15rem;max-width:56ch;margin-bottom:2.5rem}
.grad{background:linear-gradient(92deg,#FFFFFF 0%,#C7D6FF 55%,var(--marca2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* botoes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--marca);color:#fff;text-decoration:none;font-weight:700;
  padding:.95rem 1.6rem;border-radius:12px;border:0;cursor:pointer;font-size:1.02rem;box-shadow:0 0 0 0 rgba(91,140,255,.0);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(91,140,255,.35)}
.btn.vazado{background:rgba(255,255,255,.04);color:var(--texto);box-shadow:inset 0 0 0 1px var(--linha)}
.btn.vazado:hover{box-shadow:inset 0 0 0 1px var(--marca),0 8px 30px rgba(91,140,255,.15)}
.btn.lua{background:var(--lua);color:#0B1230}

/* topo */
header{position:sticky;top:0;z-index:30;background:rgba(6,9,19,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(34,48,95,.6)}
.topo{display:flex;align-items:center;gap:1rem;height:68px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--texto)}
.logo img{height:30px;width:auto;display:block}
.logo .prod{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;padding-left:.6rem;border-left:1px solid var(--linha);color:var(--marca)}
.topo nav{margin-left:auto;display:flex;gap:1.3rem;align-items:center;font-size:.95rem}
.topo nav a{color:var(--texto2);text-decoration:none}
.topo nav a:hover{color:var(--texto)}
.topo nav .btn{padding:.6rem 1.1rem;font-size:.92rem}

/* heroi */
.heroi{padding:5rem 0 5.5rem;overflow:hidden}
#ceu{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.heroi .env{position:relative;z-index:1}
.heroi .grade{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.selo{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--texto2);border:1px solid var(--linha);border-radius:999px;padding:.4rem .9rem .4rem .5rem;margin-bottom:1.5rem;background:rgba(16,25,59,.6)}
.selo i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);display:inline-block;margin-left:.3rem}
.abertura{font-size:1.2rem;color:var(--texto2);max-width:42ch}
.acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.mini{margin-top:1.1rem;font-size:.92rem;color:var(--texto2)}

/* tela do produto (demo que digita) */
.tela{background:linear-gradient(180deg,var(--sup) 0%,var(--fundo2) 100%);border:1px solid var(--linha);border-radius:20px;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(91,140,255,.08) inset;overflow:hidden}
.tela .barra{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--linha);font-size:.85rem;color:var(--texto2)}
.tela .barra b{color:var(--texto);font-weight:600}
.tela .hora{margin-left:auto;font-variant-numeric:tabular-nums}
.demo{padding:1.2rem 1.1rem 1.4rem;min-height:19rem;display:flex;flex-direction:column;gap:.7rem}
.bolha{border-radius:14px;padding:.8rem 1rem;font-size:.97rem;line-height:1.5;max-width:88%;white-space:pre-wrap}
.bolha.eu{align-self:flex-end;background:var(--sup2);color:var(--texto)}
.bolha.ia{align-self:flex-start;background:rgba(91,140,255,.14);border:1px solid rgba(91,140,255,.3)}
.bolha.ia b{color:#fff}
.cursor::after{content:"";display:inline-block;width:2px;height:1em;background:var(--marca);margin-left:2px;vertical-align:-2px;animation:pisca 1s steps(2) infinite}
@keyframes pisca{50%{opacity:0}}
.pontos{display:inline-flex;gap:4px;align-items:center;height:1.2em}
.pontos i{width:6px;height:6px;border-radius:50%;background:var(--marca);animation:sobe 1s ease-in-out infinite}
.pontos i:nth-child(2){animation-delay:.15s}.pontos i:nth-child(3){animation-delay:.3s}
@keyframes sobe{50%{transform:translateY(-4px);opacity:.5}}
.demo-nav{display:flex;gap:.4rem;padding:0 1.1rem 1.1rem}
.demo-nav b{height:3px;flex:1;background:var(--linha);border-radius:3px;overflow:hidden;position:relative}
.demo-nav b.on::after{content:"";position:absolute;inset:0;background:var(--marca);transform-origin:left;animation:barra 9s linear forwards}
@keyframes barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* seletor */
.tipos{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.tipo{border:1px solid var(--linha);background:rgba(255,255,255,.03);color:var(--texto2);border-radius:999px;padding:.65rem 1.2rem;font-weight:600;cursor:pointer;transition:all .15s}
.tipo:hover{color:var(--texto);border-color:var(--marca)}
.tipo[aria-selected="true"]{background:var(--marca);color:#fff;border-color:var(--marca);box-shadow:0 6px 24px rgba(91,140,255,.35)}
.recursos{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.recursos li{background:var(--sup);border:1px solid var(--linha);border-radius:16px;padding:1.4rem;position:relative;overflow:hidden}
.recursos li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--marca),var(--marca2))}
.recursos p{margin:0;color:var(--texto2);font-size:.96rem}

/* questao interativa */
.prova{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.questao{background:var(--sup);border:1px solid var(--linha);border-radius:20px;padding:1.6rem;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.questao .cab{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--texto2);margin-bottom:1rem}
.questao .enun{font-size:1.02rem;margin-bottom:1.2rem;max-width:none}
.alts{display:grid;gap:.55rem}
.alt{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;align-items:start;text-align:left;width:100%;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--linha);border-radius:12px;padding:.8rem .9rem;transition:all .15s}
.alt:hover{border-color:var(--marca);background:rgba(91,140,255,.08)}
.alt .l{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--marca);font-size:1.05rem}
.alt.certa{border-color:var(--ok);background:rgba(63,208,143,.12)}
.alt.certa .l{color:var(--ok)}
.alt.errada{border-color:var(--erro);background:rgba(255,111,125,.12)}
.alt.errada .l{color:var(--erro)}
.alts.travado .alt{cursor:default}
.explica{margin-top:1.1rem;padding:1rem 1.1rem;border-radius:12px;background:rgba(91,140,255,.1);border:1px solid rgba(91,140,255,.3);font-size:.96rem;display:none}
.explica.on{display:block;animation:surge .4s ease-out}
.explica b{color:#fff}
@keyframes surge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}
.stat{border-top:1px solid var(--linha);padding-top:.8rem}
.stat b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.stat span{font-size:.9rem;color:var(--texto2)}

/* personagens */
.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.persona{text-align:left;cursor:pointer;background:var(--sup);border:1px solid var(--linha);border-radius:20px;padding:1.5rem;position:relative;overflow:hidden;transition:transform .2s,border-color .2s;min-height:15rem;display:flex;flex-direction:column}
.persona:hover{transform:translateY(-4px);border-color:var(--pc)}
.persona::before{content:"";position:absolute;right:-40%;top:-40%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--pc) 0%,transparent 65%);opacity:.35;pointer-events:none}
.persona .ini{font-family:"Bricolage Grotesque",sans-serif;font-size:3.2rem;font-weight:800;letter-spacing:-.05em;color:var(--pc);line-height:1;margin-bottom:auto}
.persona h3{font-size:1.3rem;margin-top:1.4rem}
.persona p{margin:0;color:var(--texto2);font-size:.95rem}
.persona .abrir{margin-top:1rem;font-weight:700;color:var(--pc);font-size:.92rem}
dialog{border:0;border-radius:22px;padding:0;background:var(--fundo2);color:var(--texto);width:min(30rem,calc(100% - 2rem));box-shadow:0 40px 120px rgba(0,0,0,.7);border:1px solid var(--linha)}
dialog::backdrop{background:rgba(6,9,19,.75);backdrop-filter:blur(6px)}
.dl-topo{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-bottom:1px solid var(--linha)}
.dl-topo .ini{width:2.6rem;height:2.6rem;border-radius:10px;background:var(--pc);color:#fff;display:grid;place-items:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.2rem}
.dl-topo .t{font-weight:700;line-height:1.15}.dl-topo .d{font-size:.82rem;color:var(--texto2)}
.dl-fechar{margin-left:auto;background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--texto2);padding:.3rem .5rem}
.dl-aviso{font-size:.78rem;color:var(--texto2);padding:.5rem 1.2rem;background:rgba(255,255,255,.03)}
.dl-msgs{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.65rem;min-height:14rem;max-height:60vh;overflow:auto}
.dl-msgs .bolha.ia{background:rgba(255,255,255,.05);border:1px solid var(--linha);border-left:3px solid var(--pc)}
.dl-pe{padding:.9rem 1.2rem 1.2rem;border-top:1px solid var(--linha)}

/* comparacao */
.cenas{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.cena{background:var(--sup);border:1px solid var(--linha);border-radius:18px;padding:1.4rem;display:flex;flex-direction:column;gap:.9rem}
.cena h3{font-size:1.15rem;min-height:2.6em}
.lado{border-radius:12px;padding:.9rem 1rem;font-size:.94rem}
.lado p{margin:0}
.quem{font-size:.78rem;font-weight:700;margin-bottom:.35rem;opacity:.8}
.lado.gen{background:rgba(255,255,255,.04);color:var(--texto2);border:1px dashed var(--linha)}
.lado.gx{background:rgba(91,140,255,.14);border:1px solid rgba(91,140,255,.35)}
.fecho{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;letter-spacing:-.03em;margin:2.5rem 0 0;max-width:28ch}

/* passos */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:p}
.passo{border-top:1px solid var(--linha);padding-top:1.2rem;counter-increment:p}
.passo::before{content:counter(p);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--marca);color:#fff;font-weight:800;font-family:"Bricolage Grotesque",sans-serif;margin-bottom:.8rem}
.passo p{margin:0;color:var(--texto2);font-size:.96rem}

/* planos */
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.4rem;align-items:start}
.plano{background:var(--sup);border:1px solid var(--linha);border-radius:20px;padding:1.9rem}
.plano.destaque{border-color:var(--marca);box-shadow:0 0 0 1px var(--marca),0 30px 80px rgba(91,140,255,.15)}
.plano h3{font-size:1.4rem;margin-bottom:.1rem}
.plano .publico{color:var(--texto2);font-size:.93rem;margin-bottom:1.2rem}
.preco{font-family:"Bricolage Grotesque",sans-serif;font-size:2.8rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.preco small{font-size:1rem;font-weight:500;color:var(--texto2);letter-spacing:0}
.plano ul{list-style:none;margin:1.4rem 0 1.7rem;padding:0;font-size:.96rem}
.plano li{padding-left:1.5rem;margin-bottom:.55rem;position:relative;color:var(--texto2)}
.plano li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:linear-gradient(to bottom right,transparent 44%,var(--marca) 44%,var(--marca) 56%,transparent 56%),linear-gradient(to bottom left,transparent 44%,var(--marca) 44%,var(--marca) 56%,transparent 56%)}
.plano .btn{width:100%}

/* faq */
.faq details{border-bottom:1px solid var(--linha);padding:1.1rem 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--marca);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:.8rem 0 0;color:var(--texto2)}

/* fechamento, rodape, barra fixa */
.fechamento{text-align:center;padding:6rem 0}
.fechamento h2{font-size:clamp(2rem,5vw,3.4rem)}
.fechamento p{margin:0 auto 2rem}
.fechamento .acoes{justify-content:center}
footer{padding:2.5rem 0 6rem;font-size:.9rem;color:var(--texto2);border-top:1px solid var(--linha)}
footer .env{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
footer img{height:24px;opacity:.85}
footer a{color:var(--texto2)}
.fixa{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));background:rgba(6,9,19,.9);backdrop-filter:blur(12px);border-top:1px solid var(--linha)}
.fixa .btn{width:100%}

@media(max-width:900px){
  .heroi .grade,.prova{grid-template-columns:1fr;gap:2.25rem}
  .recursos,.personas,.cenas,.passos{grid-template-columns:1fr}
  .topo nav .oculto{display:none}
  section{padding:4rem 0}
  .heroi{padding:3rem 0 4rem}
  .fixa{display:block}
  footer{padding-bottom:7rem}
  .cena h3{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .cursor::after{display:none}
}

/* exames */
.exames{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem}
.exame{background:var(--sup);border:1px solid var(--linha);border-radius:18px;padding:1.4rem;display:flex;flex-direction:column;gap:.55rem;position:relative}
.exame .nome{font-family:"Bricolage Grotesque",sans-serif;font-size:1.45rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.exame .num{font-family:"Bricolage Grotesque",sans-serif;font-size:2.1rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.exame .num small{font-size:.95rem;font-weight:500;color:var(--texto2);letter-spacing:0}
.exame p{margin:0;color:var(--texto2);font-size:.94rem}
.exame .selo2{align-self:flex-start;font-size:.76rem;font-weight:700;padding:.25rem .6rem;border-radius:999px}
.selo2.oficial{background:rgba(63,208,143,.14);color:var(--ok);border:1px solid rgba(63,208,143,.35)}
.selo2.breve{background:rgba(143,107,255,.14);color:#C3B2FF;border:1px solid rgba(143,107,255,.4)}
.exame.embreve{border-style:dashed}
.exame.embreve .num{color:var(--texto2);font-size:1.3rem}
.totais{display:flex;flex-wrap:wrap;gap:2rem;margin:0 0 2rem}
.totais div b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:2.4rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.totais div span{color:var(--texto2);font-size:.92rem}