/* LunaDash — grafite Restrained (DESIGN.md). Sem gradiente de texto, sem eyebrow, elevação única. */
/* Fontes locais (servidas de /dash/comum/fontes/) — nada externo, contrato da landing. */
@font-face{font-family:"Unbounded";src:url("../comum/fontes/unbounded-var.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Manrope";src:url("../comum/fontes/manrope-var.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../comum/fontes/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../comum/fontes/satoshi-500.woff2") format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../comum/fontes/satoshi-700.woff2") format("woff2");font-weight:700 900;font-display:swap}
*{box-sizing:border-box}
:root{
  --bg:#08090D; --bg2:#0B0D12; --s1:#101218; --s2:#161922; --s3:#1C2029;
  --linha:#1E212B; --linha2:#282C38;
  --t1:#E7E9F0; --t2:#8B90A0; --t3:#7A8095;
  --roxo:#6E7BFF; --roxo-solido:#4A56DB; --roxo-dim:rgba(110,123,255,.14); --verde:#2FCB92; --erro:#F26D6D; --amb:#E0A93E;
  --disp:'Unbounded','Manrope',system-ui,sans-serif; --corpo:'Satoshi','Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
.s{margin:0;background:var(--bg);color:var(--t1);font-family:var(--corpo);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.s a{color:inherit;text-decoration:none}
::selection{background:var(--roxo);color:#fff}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.025em;line-height:1.06;text-wrap:balance;margin:0;color:var(--t1)}
.lead{color:var(--t2);font-size:17px;margin:18px 0 0}
.ac{color:var(--roxo)} .vd{color:var(--verde)}

/* fundo: quase sem glow, só uma névoa levíssima no topo */
.fundo{position:fixed;inset:0;z-index:-1;background:var(--bg)}
.fundo::before{content:"";position:absolute;inset:0;background:radial-gradient(60vw 34vw at 72% -8%,rgba(110,123,255,.09),transparent 62%)}

/* topo */
.topo{position:sticky;top:0;z-index:30;backdrop-filter:blur(16px);background:rgba(8,9,13,.72);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.02em}
.marca svg{width:30px;height:30px}
.nav{display:flex;gap:10px;align-items:center}
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border-radius:12px;font-family:var(--corpo);font-weight:600;font-size:14.5px;border:0;cursor:pointer;transition:transform .18s var(--ease),background .18s}
.btn-a{background:var(--roxo-solido);color:#fff}
.btn-a:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--roxo),0 8px 24px -8px var(--roxo)}
.btn-g{background:transparent;color:var(--t1);border:1px solid var(--linha2)}
.btn-g:hover{background:var(--s2)}

/* hero */
.hero{position:relative;padding:100px 0 90px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,62px)}
.hero .lead{max-width:44ch;font-size:19px}
.hero .cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);background:var(--s1);border:1px solid var(--linha);padding:7px 14px;border-radius:999px;margin-bottom:24px}
.tag .pt{width:7px;height:7px;border-radius:50%;background:var(--verde)}
.globo{position:relative;aspect-ratio:1;max-width:440px;justify-self:end;width:100%}
.globo canvas{width:100%;height:100%;display:block}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.globo{display:none}}

/* mockup do painel — elevação por UMA via: cartão comum = borda; mockup do herói = sombra */
.palco{margin:66px auto 0;max-width:1040px;position:relative}
.painel{background:var(--bg2);border:1px solid var(--linha);border-radius:16px;overflow:hidden}
.palco .painel{border-color:transparent;box-shadow:0 40px 90px -50px #000,0 0 0 1px rgba(255,255,255,.03)}
.pm-topo{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--linha)}
.pm-topo i{width:10px;height:10px;border-radius:50%;background:var(--linha2)}
.pm-topo span{margin-left:10px;font-size:12px;color:var(--t3)}
.pm-corpo{padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--s1);border-radius:12px;padding:14px 15px}
.kpi--lucro{background:var(--s1);box-shadow:inset 3px 0 0 var(--verde)}
.kpi .r{font-size:11px;color:var(--t2);letter-spacing:.02em}
.kpi .v{font-family:var(--disp);font-size:19px;margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .d{font-size:11px;margin-top:4px;font-variant-numeric:tabular-nums}
.up{color:var(--verde)} .down{color:var(--erro)}
.pm-graf{grid-column:1/4;background:var(--s1);border-radius:12px;padding:16px}
.pm-graf .cab{font-size:11px;color:var(--t2);margin-bottom:14px;display:flex;justify-content:space-between}
.barras{display:flex;align-items:flex-end;gap:8px;height:112px}
.barras .col{flex:1;display:flex;flex-direction:column-reverse;gap:2px;position:relative}
.barras .col i{display:block;border-radius:2px}
.barras .lucro{background:var(--verde);opacity:.9}
.barras .resto{background:var(--roxo);opacity:.32}
.pm-side{grid-column:4/5;grid-row:2;background:var(--s1);border-radius:12px;padding:16px;text-align:center}
.pm-side .cab{font-size:11px;color:var(--t2);margin-bottom:14px}
.anel{--p:46;width:104px;height:104px;border-radius:50%;margin:0 auto;background:conic-gradient(var(--roxo) calc(var(--p)*1%),var(--s3) 0);display:grid;place-items:center}
.anel::after{content:"46%";width:76px;height:76px;border-radius:50%;background:var(--s1);display:grid;place-items:center;font-family:var(--disp);font-size:16px}
@media(max-width:720px){.pm-corpo{grid-template-columns:repeat(2,1fr)}.pm-graf{grid-column:1/3}.pm-side{grid-column:1/3;grid-row:auto}}

/* dobras */
.dobra{padding:118px 0}
.par{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.par--inv .vis{order:2}
.txt h2{font-size:clamp(28px,3.6vw,40px)}
.txt .lead{max-width:42ch}
.linhas{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column}
.linhas li{padding:16px 0;border-top:1px solid var(--linha);display:flex;gap:13px;align-items:flex-start}
.linhas li:last-child{border-bottom:1px solid var(--linha)}
.linhas svg{width:19px;height:19px;color:var(--roxo);flex-shrink:0;margin-top:2px}
.linhas b{display:block;font-family:var(--corpo);font-weight:600;font-size:15px;color:var(--t1);margin-bottom:2px}
.linhas span{color:var(--t2);font-size:14px}
@media(max-width:860px){.par{grid-template-columns:1fr;gap:34px}.par--inv .vis{order:0}.dobra{padding:74px 0}}

/* funil */
.funil{padding:20px}
.fase{position:relative;min-height:48px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;color:var(--t1);font-weight:600;font-size:14px;background:var(--s2);border:1px solid var(--linha2);margin:0 auto 8px}
.fase small{color:var(--t2);font-weight:500}
.fase b{font-variant-numeric:tabular-nums}
.fase--q{border-color:var(--roxo);box-shadow:inset 0 0 0 1px var(--roxo)}
.qtag{display:block;text-align:center;font-size:12px;color:var(--amb);margin:0 0 8px}

/* preço */
.reco{padding:22px}
.reco .row{display:flex;justify-content:space-between;font-size:14px;color:var(--t2);padding:9px 0}
.reco .row b{color:var(--t1);font-variant-numeric:tabular-nums}
.reco .tot{border-top:1px solid var(--linha);margin-top:6px;padding-top:16px;display:flex;justify-content:space-between;align-items:center}
.reco .tot b{font-family:var(--disp);font-size:28px;color:var(--verde)}

/* integrações */
.grade{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:40px}
@media(max-width:860px){.grade{grid-template-columns:repeat(3,1fr)}}@media(max-width:480px){.grade{grid-template-columns:repeat(2,1fr)}}
.intg{background:var(--s1);border-radius:13px;padding:20px 12px;text-align:center;transition:background .18s}
.intg:hover{background:var(--s2)}
.intg .ic{width:40px;height:40px;margin:0 auto 10px;border-radius:10px;display:grid;place-items:center;background:var(--bg2)}
.intg .ic svg{width:24px;height:24px}
.intg .n{font-weight:600;font-size:13px}
.intg .t{font-size:11px;color:var(--t3);margin-top:4px}
.intg--soon{opacity:.5}

/* planos */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:860px){.planos{grid-template-columns:1fr;max-width:400px;margin-inline:auto}}
.plano{position:relative;background:var(--s1);border:1px solid var(--linha);border-radius:16px;padding:30px}
.plano--best{border-color:var(--roxo)}
.fita{position:absolute;top:-11px;left:26px;background:var(--roxo-solido);color:#fff;font-size:11px;font-weight:600;padding:4px 12px;border-radius:999px}
.plano h3{font-size:17px}
.plano .preco{font-family:var(--disp);font-size:36px;margin:14px 0 0;letter-spacing:-.02em}
.plano .preco span{font-size:14px;color:var(--t2);font-family:var(--corpo)}
.plano .antes{font-size:12.5px;color:var(--t3);text-decoration:line-through;margin-top:3px}
.plano ul{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--t2)}
.plano li{display:flex;gap:9px}.plano li svg{width:16px;height:16px;color:var(--verde);flex-shrink:0;margin-top:2px}

/* faq */
.faq{max-width:720px;margin:0 auto}
.faq details{border-top:1px solid var(--linha);padding:20px 2px}
.faq details:last-child{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--t3);border-bottom:2px solid var(--t3);transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{color:var(--t2);margin:14px 0 0;font-size:15px}
.fim{text-align:center;padding:120px 0}
.fim h2{font-size:clamp(30px,4.6vw,50px)}
.rodape{border-top:1px solid var(--linha);padding:36px 0;color:var(--t3);font-size:14px}

/* banda de contraste (planilha × painel) */
.banda{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.banda .wrap{padding:70px 24px}
.contraste{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
@media(max-width:760px){.contraste{grid-template-columns:1fr}}
.lado{background:var(--s1);border:1px solid var(--linha);border-radius:14px;padding:24px}
.lado--mau{opacity:.72}
.lado .cab{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.lado--bom .cab{color:var(--verde)}
.lado ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lado li{display:flex;gap:10px;font-size:14.5px;color:var(--t2)}
.lado li svg{width:17px;height:17px;flex-shrink:0;margin-top:2px}
.lado--mau li svg{color:var(--t3)} .lado--bom li svg{color:var(--verde)}
.lado--bom li{color:var(--t1)}

/* comparação de períodos (A/B) */
.ab{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
@media(max-width:640px){.ab{grid-template-columns:1fr;gap:12px}}
.ab .per{background:var(--s1);border:1px solid var(--linha);border-radius:12px;padding:18px}
.ab .per .et{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.ab .per .big{font-family:var(--disp);font-size:24px;margin-top:8px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ab .per .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--t2);margin-top:10px;font-variant-numeric:tabular-nums}
.ab .delta{text-align:center;font-family:var(--disp);font-size:15px;color:var(--verde);white-space:nowrap}
.ab .delta small{display:block;font-family:var(--corpo);font-size:11px;color:var(--t3);margin-top:3px}
@media(max-width:640px){.ab .delta{transform:rotate(90deg)}}

/* câmbio — tira de conversão */
.cambio{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.cambio .moeda{flex:1;min-width:120px;background:var(--s1);border:1px solid var(--linha);border-radius:11px;padding:14px 16px;font-variant-numeric:tabular-nums}
.cambio .moeda .c{font-size:11px;color:var(--t3);letter-spacing:.05em}
.cambio .moeda .n{font-family:var(--disp);font-size:18px;margin-top:6px}
.cambio .taxa{font-size:12px;color:var(--t2);margin-top:12px}

/* como funciona — passos numerados (sequência real) */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;counter-reset:p}
@media(max-width:760px){.passos{grid-template-columns:1fr}}
.passo{background:var(--s1);border:1px solid var(--linha);border-radius:14px;padding:26px 22px;position:relative}
.passo .num{font-family:var(--disp);font-size:15px;color:var(--roxo);width:34px;height:34px;border:1px solid var(--linha2);border-radius:9px;display:grid;place-items:center;margin-bottom:16px}
.passo h3{font-size:17px}
.passo p{color:var(--t2);font-size:14px;margin:8px 0 0}

/* funcionalidades extras — grade densa */
.extras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:40px;background:var(--linha);border:1px solid var(--linha);border-radius:14px;overflow:hidden}
@media(max-width:820px){.extras{grid-template-columns:repeat(2,1fr)}}
.extra{background:var(--s1);padding:22px 20px}
.extra svg{width:20px;height:20px;color:var(--roxo);margin-bottom:10px}
.extra b{display:block;font-family:var(--corpo);font-weight:600;font-size:14px;color:var(--t1)}
.extra span{font-size:12.5px;color:var(--t2);margin-top:3px;display:block}

/* motion — entrada única, ease-out, de estado já visível (translate leve) */
.rev{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev.on{opacity:1;transform:none}
.rev[data-d="1"]{transition-delay:.07s}.rev[data-d="2"]{transition-delay:.14s}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

@media (max-width:480px){.topo .nav{gap:8px}.topo .nav .btn{height:38px;padding:0 13px;font-size:13.5px}.topo .marca{font-size:17px}}