/* ==================================================================
 * DashOs — Website (rebuild) · Dash Finance
 * Identidade oficial DashOs: azul #1f8fff (principal) + verde #22c55e
 * (dinheiro/lucro/positivo/CTA/accento). Minimalismo Apple: respiro,
 * poucos elementos, muito refinamento. Reutiliza tokens/glass/wave.
 * ================================================================== */
:root{
  --bg:#05080f; --bg2:#0a1120; --card:#0d1628; --card2:#101c34; --line:#182541; --line2:#233355;
  --ink:#eef3fb; --ink2:#c0cbdd; --mut:#8493ac; --mut2:#5d6a84;
  --acc:#1f8fff; --acc2:#0f6fe0; --cy:#2ad0e0;
  --grn:#22c55e; --grn2:#16a34a; --amb:#f5a524; --red:#f0616d;
  --r:16px; --r2:22px; --sh:0 30px 80px -30px rgba(0,0,0,.7);
  --maxw:1200px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,"SF Pro Display","Segoe UI",Inter,Roboto,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:.005em}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1100px 560px at 82% -8%,rgba(31,143,255,.14),transparent 60%),
  radial-gradient(820px 520px at 6% 4%,rgba(34,197,94,.09),transparent 58%)}
#wave{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.62}
/* Véu cinematográfico: profundidade + brilho azul/verde, sem poluir a leitura. */
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(1200px 640px at 80% -4%,rgba(31,143,255,.16),transparent 60%),
  radial-gradient(1000px 620px at 4% 30%,rgba(34,197,94,.11),transparent 58%),
  radial-gradient(900px 900px at 50% 120%,rgba(34,197,94,.08),transparent 60%),
  linear-gradient(180deg,rgba(5,8,15,.28),transparent 18%,transparent 82%,rgba(5,8,15,.55))}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.035em}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.grad-g{background:linear-gradient(100deg,var(--acc),var(--grn));-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-999px;top:0;background:var(--grn);color:#04140a;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px;top:12px}
.up{color:#4ade80}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--ink);
  border-radius:12px;padding:11px 18px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;letter-spacing:0;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),border-color .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:14px 24px;font-size:15.5px;border-radius:14px}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line2)} .btn-ghost:hover{border-color:#31456f;background:rgba(255,255,255,.05)}
.btn-cta{background:linear-gradient(100deg,var(--grn),var(--grn2));border:0;color:#03140a;font-weight:700;position:relative;overflow:hidden;
  box-shadow:0 14px 34px -14px rgba(34,197,94,.7)}
.btn-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn-cta:hover::after{transform:translateX(130%)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px color-mix(in srgb,var(--grn) 60%,transparent)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:rgba(5,8,15,.55);border-bottom:1px solid transparent;transition:.3s}
.nav.scrolled{border-color:var(--line);background:rgba(5,8,15,.82)}
.nav-in{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{border-radius:9px;filter:drop-shadow(0 2px 7px rgba(31,143,255,.3))}
.brand-txt{font-weight:650;font-size:20px;letter-spacing:-.02em;font-family:"SF Pro Display",Inter,system-ui,sans-serif}
.brand-txt b{font-weight:750;background:linear-gradient(96deg,var(--acc),var(--grn));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:4px;margin-left:6px}
.nav-links a{color:var(--ink2);font-size:14px;padding:8px 13px;border-radius:9px;transition:.16s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav .btn-cta{margin-left:auto}
.nav-burger{display:none;margin-left:auto;flex-direction:column;gap:5px;background:transparent;border:0;padding:8px;cursor:pointer}
.nav-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px}
.mobile{display:none;flex-direction:column;gap:2px;padding:12px 24px 20px;border-bottom:1px solid var(--line);background:rgba(7,11,20,.97)}
.mobile a{padding:12px 6px;color:var(--ink2);border-bottom:1px solid rgba(255,255,255,.04)}
.mobile .btn{margin-top:12px}

/* ---------- Seções (respiro Apple) ---------- */
.sec{padding:130px 0;position:relative}
.sec-head{max-width:760px;margin:0 auto 56px;text-align:center}
.tag,.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cy)}
.tag{border:1px solid color-mix(in srgb,var(--grn) 30%,var(--line2));background:color-mix(in srgb,var(--grn) 7%,transparent);color:#7ee2a6;padding:6px 13px;border-radius:999px}
.sec-head h2{font-size:clamp(30px,4.4vw,50px);margin:18px 0 14px;letter-spacing:-.04em}
.sec-head p{color:var(--ink2);font-size:18px;max-width:600px;margin:0 auto}

/* ---------- Hero ---------- */
.hero{padding:96px 0 40px;text-align:center}
.hero-in{max-width:1000px;margin:0 auto}
.eyebrow{justify-content:center;margin-bottom:22px;color:#7ee2a6}
.hero h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:-.04em;line-height:1.05;text-wrap:balance}
.hero .lead{color:var(--ink2);font-size:clamp(17px,1.7vw,21px);margin:26px auto 34px;max-width:620px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .hero-actions.center{justify-content:center}
.hero-stage{margin-top:70px;padding:0 24px;position:relative}
.shot-hero{max-width:1080px;margin:0 auto;position:relative}
.stage-glow{position:absolute;inset:-6% 4% -18% 4%;z-index:-1;border-radius:50px;
  background:radial-gradient(60% 60% at 50% 12%,rgba(31,143,255,.32),transparent 70%),radial-gradient(50% 50% at 70% 40%,rgba(34,197,94,.18),transparent 70%);filter:blur(30px)}

/* ---------- Janela de produto (glass, mesma linguagem) ---------- */
.win{position:relative;background:linear-gradient(180deg,var(--card),#0a1322);border:1px solid var(--line2);border-radius:var(--r2);
  box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}
/* Wave dentro do painel de demonstração — vivo, discreto, atrás do conteúdo */
.win-fx{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6}
.win-fx::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 82% 6%,rgba(31,143,255,.16),transparent 60%),radial-gradient(60% 80% at 10% 90%,rgba(34,197,94,.12),transparent 62%)}
.win-bar,.win-body{position:relative;z-index:1}
.win-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.win-bar em{margin-left:10px;font-style:normal;font-size:12px;color:var(--mut)}
.dm{width:11px;height:11px;border-radius:50%} .dm.r{background:#ff5f57}.dm.y{background:#febc2e}.dm.g{background:#28c840}
.win-body{padding:18px;display:grid;gap:15px}

/* dashboard hero mock */
.d-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.d-head h4{font-size:16px} .d-sub{font-size:12px;color:var(--mut)}
.d-pill{font-size:12px;font-weight:600;color:#7ee2a6;border:1px solid color-mix(in srgb,var(--grn) 32%,var(--line2));background:color-mix(in srgb,var(--grn) 8%,transparent);padding:5px 11px;border-radius:999px}
.d-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kx{position:relative;background:linear-gradient(180deg,var(--card2),#0b1730);border:1px solid var(--line);border-radius:13px;padding:13px 14px;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.kx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--acc),var(--cy))}
.kx.pos::before{background:linear-gradient(180deg,var(--grn),var(--grn2))} .kx.pos{border-color:color-mix(in srgb,var(--grn) 26%,var(--line))}
.kx.warn::before{background:var(--amb)} .kx.warn{border-color:color-mix(in srgb,var(--amb) 26%,var(--line))}
.kx.info::before{background:linear-gradient(180deg,var(--acc),var(--cy))}
.kx-ic{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 24%,transparent),transparent);color:var(--cy)}
.kx.pos .kx-ic{color:#5ee08c;background:linear-gradient(145deg,color-mix(in srgb,var(--grn) 26%,transparent),transparent)}
.kx.warn .kx-ic{color:var(--amb)} .kx-ic svg{width:15px;height:15px}
.kx-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.kx-v,.kx b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kx-d{font-size:11px;color:var(--mut2)} .kx-d.up{color:#4ade80}
.kx.sm b{font-size:15px} .kx.sm .kx-k{font-size:9.5px}
.d-main{display:grid;grid-template-columns:1.7fr 1fr;gap:14px}
.d-chart{background:rgba(255,255,255,.015);border:1px solid var(--line);border-radius:14px;padding:14px}
.d-chart-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink2);margin-bottom:8px}
.d-legend{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mut)} .d-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin:0 4px} .lg-b{background:var(--acc)} .lg-g{background:var(--grn)}
.area{width:100%;height:auto;display:block}
.d-bars{display:flex;align-items:flex-end;gap:8px;height:54px;margin-top:10px}
.d-bars.tall{height:120px} .d-bars i{flex:1;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 40%,transparent));border-radius:5px 5px 3px 3px;opacity:.85}
.d-bars i.g{background:linear-gradient(180deg,var(--grn),color-mix(in srgb,var(--grn) 40%,transparent))}
.d-side{display:grid;gap:10px;align-content:start}
.ds-card{background:rgba(255,255,255,.015);border:1px solid var(--line);border-radius:12px;padding:12px} .ds-card.lg{padding:16px}
.ds-k{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.ds-bar{height:8px;border-radius:6px;background:#0c1832;margin:9px 0 7px;overflow:hidden}
.ds-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--grn),var(--cy))} .ds-bar i.b{background:linear-gradient(90deg,var(--acc),var(--cy))}
.ds-v{font-size:11.5px;color:var(--ink2)}
.ds-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);padding:4px 0}
.ds-row .ds-n{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mut2)} .dot.g{background:var(--grn)} .dot.b{background:var(--acc)}

/* mk tables / kpis (módulos) */
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px} .mk-kpis.four{grid-template-columns:repeat(4,1fr)}
.mk-table{width:100%;border-collapse:collapse;font-size:13px}
.mk-table th{text-align:left;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);padding:9px 10px;border-bottom:1px solid var(--line2)}
.mk-table td{padding:11px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums} .mk-table tr:last-child td{border-bottom:0}
.chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.chip.ok{background:#0f2a1e;color:#65e6a6;border-color:#1c5138}
.chip.warn{background:#2c2410;color:#f6c356;border-color:#5a4a1c}
.chip.bad{background:#2c1620;color:#ff9ea6;border-color:#5a2733}
.rep-row{display:flex;justify-content:space-between;padding:11px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;font-size:14px}
.rep-row.total{border-bottom:0;border-top:1px solid var(--line2);font-weight:800;font-size:16px;margin-top:2px}

/* ---------- Importação (transformação) ---------- */
.import .sec-head h2{font-size:clamp(28px,4vw,46px)}
.transform{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;max-width:960px;margin:0 auto}
.tr-card{margin:0;background:linear-gradient(180deg,var(--card),#0a1322);border:1px solid var(--line2);border-radius:var(--r2);padding:22px;position:relative;box-shadow:var(--sh)}
.tr-card.win-lite{border-color:color-mix(in srgb,var(--grn) 32%,var(--line2));box-shadow:var(--sh),0 0 40px -18px rgba(34,197,94,.5)}
.tr-cap{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:12px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 22%,transparent),transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.tr-cap svg{width:24px;height:24px;color:var(--cy)}
.tr-cap.gray{background:linear-gradient(145deg,rgba(255,255,255,.08),transparent)} .tr-cap.gray svg{color:var(--mut)}
.tr-cap.grn{background:linear-gradient(145deg,color-mix(in srgb,var(--grn) 26%,transparent),transparent)} .tr-cap.grn svg{color:#5ee08c}
.tr-card figcaption{display:flex;flex-direction:column} .tr-card figcaption b{font-size:15px} .tr-card figcaption span{font-size:12px;color:var(--mut)}
.tr-mini{margin-top:14px}
.tr-mini.xls{display:grid;gap:4px} .xr{display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .xr i{height:14px;border-radius:3px;background:rgba(255,255,255,.05)} .xr.h i{background:rgba(255,255,255,.1)}
.tr-mini.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px} .tr-mini.kpis .kx.sm{padding:9px 10px} .tr-mini .spark{grid-column:1/-1;width:100%;height:auto}
.tr-arrow{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mut)}
.tr-arrow span{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(31,143,255,.2),rgba(34,197,94,.12));border:1px solid var(--line2);box-shadow:0 0 30px -10px rgba(34,197,94,.6)}
.tr-arrow span img{width:30px;height:30px;border-radius:8px}
.tr-arrow small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Showcase de módulos (Apple-style, alternado) ---------- */
.show{padding:80px 0}
.show-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.show-in.reverse{direction:rtl} .show-in.reverse>*{direction:ltr}
.show-copy{max-width:420px}
.mod-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 26%,transparent),color-mix(in srgb,var(--acc) 4%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px color-mix(in srgb,var(--acc) 16%,transparent),0 10px 22px -12px color-mix(in srgb,var(--acc) 60%,transparent)}
.mod-ic svg{width:27px;height:27px;color:var(--cy);filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--acc) 45%,transparent))}
.mod-ic.grn{--acc:var(--grn)} .mod-ic.grn svg{color:#5ee08c} .mod-ic.blu{--acc:#1f8fff}
.show-copy h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em}
.show-copy p{color:var(--ink2);font-size:17px;margin:14px 0 18px}
.benefit{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 28%,var(--line2));background:color-mix(in srgb,var(--acc) 8%,transparent);padding:6px 13px;border-radius:999px}
.benefit.grn{color:#5ee08c;border-color:color-mix(in srgb,var(--grn) 30%,var(--line2));background:color-mix(in srgb,var(--grn) 8%,transparent)}
.show-shot{margin:0;transition:transform .5s var(--ease)}
.show-shot:hover{transform:translateY(-4px)}

/* ---------- Comparação ---------- */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch;max-width:900px;margin:0 auto}
.vs-col{background:linear-gradient(180deg,var(--card),#0a1322);border:1px solid var(--line2);border-radius:var(--r2);padding:28px 26px}
.vs-col h4{font-size:19px;margin-bottom:16px;letter-spacing:-.02em}
.vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vs-col li{position:relative;padding-left:28px;color:var(--ink2);font-size:15px}
.vs-col.old{opacity:.72} .vs-col.old h4{color:var(--mut)}
.vs-col.old li::before{content:"×";position:absolute;left:0;top:-1px;color:var(--red);font-weight:800}
.vs-col.new{border-color:color-mix(in srgb,var(--grn) 34%,var(--line2));box-shadow:0 0 50px -20px rgba(34,197,94,.5)}
.vs-col.new h4{color:#7ee2a6}
.vs-col.new li::before{content:"";position:absolute;left:1px;top:6px;width:14px;height:8px;border-left:2px solid var(--grn);border-bottom:2px solid var(--grn);transform:rotate(-45deg)}
.vs-mid{align-self:center;font-weight:800;color:var(--mut2);font-size:13px;letter-spacing:.1em}

/* ---------- CTA ---------- */
.cta{padding:150px 0;text-align:center;position:relative}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 50% 40%,rgba(34,197,94,.12),transparent 70%)}
.cta-in{max-width:720px;margin:0 auto}
.cta h2{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.04em}
.cta p{color:var(--ink2);font-size:19px;margin:16px 0 32px}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:56px 0 28px;background:linear-gradient(180deg,transparent,rgba(13,22,40,.4))}
.foot-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:26px}
.foot-brand p{color:var(--mut);font-size:14px;margin-top:12px;max-width:280px}
.foot-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut2);margin-bottom:12px}
.foot-col a{display:block;color:var(--ink2);font-size:14px;padding:5px 0;transition:.16s} .foot-col a:hover{color:#5ee08c}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--mut2);font-size:12.5px}

/* ---------- Problema ---------- */
.soft{color:var(--mut)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;max-width:1000px;margin:0 auto}
.pcell{background:linear-gradient(180deg,var(--card),#0a1322);padding:26px 24px;transition:background .2s var(--ease)}
.pcell:hover{background:linear-gradient(180deg,#0f1c34,#0a1322)}
.pcell b{display:block;font-size:16px;margin-bottom:6px}
.pcell span{color:var(--ink2);font-size:14px}

/* ---------- Processo (6 passos) ---------- */
.steps{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{position:relative;background:linear-gradient(180deg,var(--card),#0a1322);border:1px solid var(--line2);border-radius:var(--r2);padding:24px}
.step-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;font-weight:800;font-size:15px;color:#03140a;
  background:linear-gradient(135deg,var(--grn),var(--grn2));box-shadow:0 8px 18px -8px rgba(34,197,94,.6);margin-bottom:14px}
.step b{display:block;font-size:16px;margin-bottom:5px}
.step span{color:var(--ink2);font-size:14px}
.proc-note{text-align:center;max-width:640px;margin:28px auto 0;color:var(--mut);font-size:14px}
.flowline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:40px;color:var(--mut);font-size:13px}
.flowline span{padding:8px 15px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.02)}
.flowline span.hl{color:#7ee2a6;border-color:color-mix(in srgb,var(--grn) 34%,var(--line2));background:color-mix(in srgb,var(--grn) 8%,transparent)}
.flowline i{width:26px;height:1px;background:linear-gradient(90deg,var(--acc),var(--grn));position:relative}
.flowline i::after{content:"";position:absolute;right:-1px;top:-2px;width:5px;height:5px;border-top:1px solid var(--grn);border-right:1px solid var(--grn);transform:rotate(45deg)}

/* ---------- Comparativo (tabela) ---------- */
.ctable{max-width:820px;margin:0 auto;border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;background:linear-gradient(180deg,var(--card),#0a1322)}
.ct-head,.ct-row{display:grid;grid-template-columns:1.6fr .8fr .8fr;align-items:center;gap:12px;padding:14px 22px}
.ct-head{border-bottom:1px solid var(--line2);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.ct-head .ct-b{color:#7ee2a6;font-weight:700} .ct-head .ct-a,.ct-head .ct-b{text-align:center}
.ct-row{border-top:1px solid var(--line);font-size:14.5px}
.ct-row>span:first-child{color:var(--ink2)}
.ct-row .no,.ct-row .yes{text-align:center;font-weight:600}
.ct-row .no{color:var(--mut2);font-size:13px}
.ct-row .yes{color:#5ee08c;font-size:16px}
.ct-row:nth-child(even){background:rgba(255,255,255,.012)}

/* ---------- Preço ---------- */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:840px;margin:0 auto;align-items:stretch}
.plans.single{grid-template-columns:1fr;max-width:460px}
.pro-note{max-width:600px;margin:26px auto 0;text-align:center;color:var(--mut);font-size:14.5px;line-height:1.6}
.pro-note b{color:var(--ink2);font-weight:600}
.plan{display:flex;flex-direction:column;position:relative;background:linear-gradient(180deg,var(--card),#0a1322);border:1px solid var(--line2);border-radius:var(--r2);padding:30px 28px;box-shadow:var(--sh)}
.plan.featured{border-color:color-mix(in srgb,var(--grn) 40%,var(--line2));box-shadow:var(--sh),0 0 60px -24px rgba(34,197,94,.55)}
.plan-badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#03140a;background:linear-gradient(96deg,var(--grn),var(--cy));padding:5px 12px;border-radius:999px;margin-bottom:16px}
.plan-badge.soft{color:var(--ink2);background:rgba(255,255,255,.06)}
.plan h3{font-size:20px}
.plan-price{margin:14px 0 20px;display:flex;align-items:baseline;gap:10px}
.plan-price b{font-size:40px;letter-spacing:-.03em} .plan-price span{color:var(--mut);font-size:14px}
.plan ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px;flex:1}
.plan li{position:relative;padding-left:26px;color:var(--ink2);font-size:14.5px}
.plan li::before{content:"";position:absolute;left:1px;top:6px;width:13px;height:8px;border-left:2px solid var(--grn);border-bottom:2px solid var(--grn);transform:rotate(-45deg)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq details{background:linear-gradient(180deg,var(--card),#0a1322);border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq .chev{width:10px;height:10px;border-right:2px solid var(--grn);border-bottom:2px solid var(--grn);transform:rotate(45deg);transition:transform .22s var(--ease);flex:none}
.faq details[open] .chev{transform:rotate(-135deg)}
.faq p{padding:0 22px 20px;color:var(--ink2);font-size:14.5px}

/* ---------- Reveal ---------- */
.reveal,.reveal-group>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in,.reveal-group.in>*{opacity:1;transform:none}
.reveal-group.in>*{transition-delay:calc(var(--i,0)*90ms)}

/* ---------- Extras (hero risk, labels, cta sub, btn sm) ---------- */
.hero-risk{margin-top:16px;color:var(--mut);font-size:13.5px}
.mod-lbl{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7ee2a6;margin-bottom:12px}
.cta-sub{color:var(--ink2);font-size:18px;margin:14px 0 30px}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}

/* ---------- Demonstração interativa ---------- */
.demo-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start}
.demo-steps{display:flex;flex-direction:column;gap:16vh;padding:12vh 0}
.demo-step{opacity:.4;transition:opacity .4s var(--ease),transform .4s var(--ease);outline:none}
.demo-step.is-active{opacity:1}
.demo-step:focus-visible{outline:2px solid color-mix(in srgb,var(--acc) 60%,transparent);outline-offset:8px;border-radius:12px}
.demo-kicker{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cy);margin-bottom:10px}
.demo-step.is-active .demo-kicker{color:#7ee2a6}
.demo-step h3{font-size:clamp(22px,2.5vw,30px);letter-spacing:-.03em}
.demo-step p{color:var(--ink2);font-size:16.5px;margin-top:10px;max-width:420px}
.demo-mobile-visual{display:none;margin-top:18px}
.demo-stage{position:sticky;top:96px;align-self:start}
.demo-stage-win{min-height:340px}
.demo-win .win-body{min-height:300px}
.demo-progress{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.demo-dots{display:flex;gap:8px}
.demo-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--line2);transition:background .2s,transform .2s}
.demo-dot.on{background:linear-gradient(96deg,var(--acc),var(--grn))}
.demo-dot:hover{transform:scale(1.25)}
.demo-dot:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px color-mix(in srgb,var(--acc) 60%,transparent)}
.demo-nav{width:32px;height:32px;border-radius:9px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--ink2);font-size:16px;cursor:pointer;transition:.16s}
.demo-nav:hover{border-color:#31456f;color:#fff}
.demo-xls td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.demo-actions{display:flex;justify-content:flex-end;margin-top:14px} .demo-actions.between{justify-content:space-between;align-items:center}
.imp{display:grid;gap:14px}
.imp-file{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015)}
.imp-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:color-mix(in srgb,var(--grn) 20%,transparent);color:#7ee2a6;font-size:11px;font-weight:800}
.imp-file b{display:block;font-size:14px} .imp-file small{color:var(--mut);font-size:12px}
.imp-bar{height:8px;border-radius:6px;background:#0c1832;overflow:hidden}
.imp-bar .demo-prog{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--acc),var(--grn));animation:demoprog 2s var(--ease) forwards}
@keyframes demoprog{to{width:100%}}
.imp-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:i}
.imp-steps li{color:var(--mut);font-size:13.5px;padding-left:24px;position:relative;opacity:.5;animation:impstep .5s var(--ease) forwards}
.imp-steps li::before{content:"";position:absolute;left:2px;top:5px;width:12px;height:7px;border-left:2px solid var(--grn);border-bottom:2px solid var(--grn);transform:rotate(-45deg);opacity:.5}
.imp-steps li[data-s="0"]{animation-delay:.2s} .imp-steps li[data-s="1"]{animation-delay:.9s} .imp-steps li[data-s="2"]{animation-delay:1.5s}
@keyframes impstep{to{opacity:1;color:var(--ink2)}}
.proc{display:grid;gap:12px}
.proc-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015)}
.proc-t{font-weight:600;min-width:96px} .proc-arrow{color:var(--mut2)}
.proc-ok{margin-top:4px;color:#7ee2a6;font-weight:600;font-size:14px}
.demo-final{text-align:center;padding:18px 8px;display:grid;gap:14px;place-items:center}
.demo-final-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;color:#03140a;background:linear-gradient(135deg,var(--grn),var(--grn2));box-shadow:0 12px 28px -12px rgba(34,197,94,.7)}
.demo-final p{color:var(--ink2)} .demo-final-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.proj{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .proj span{flex:1;min-width:90px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px;color:var(--mut)} .proj b{display:block;font-size:15px;margin-top:3px}
.rep-check{color:#7ee2a6;font-weight:600;font-size:13.5px}
.ds-bar .demo-meta{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--grn),var(--cy))}

/* ---------- DashPro (discreto) + segurança do plano ---------- */
.plan-safe{margin-top:12px;text-align:center;color:var(--mut);font-size:12.5px}
.pro{max-width:600px;margin:26px auto 0;border:1px solid var(--line2);border-radius:var(--r2);padding:22px 24px;background:linear-gradient(180deg,rgba(13,22,40,.6),transparent)}
.pro-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pro-head h3{font-size:18px} .pro-price{font-size:22px;font-weight:800} .pro-price small{font-size:13px;color:var(--mut);font-weight:600}
.pro-lead{color:var(--ink2);font-size:14.5px;margin:6px 0 14px}
.pro-list{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pro-list li{position:relative;padding-left:22px;color:var(--ink2);font-size:13.5px}
.pro-list li::before{content:"";position:absolute;left:1px;top:6px;width:11px;height:7px;border-left:2px solid var(--cy);border-bottom:2px solid var(--cy);transform:rotate(-45deg)}
.pro-foot{color:var(--mut);font-size:12.5px}

/* ---------- Comparativo (células descritivas) ---------- */
.ct-row .ca,.ct-row .cb{font-size:13.5px}
.ct-row .ca{color:var(--mut);text-align:center}
.ct-row .cb{color:#bfe9cf;text-align:center;font-weight:600}

/* ---------- Modal de interesse ---------- */
.modal-ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(4,7,13,.72);backdrop-filter:blur(6px)}
.modal-ov[hidden]{display:none}
.modal-card{position:relative;width:min(420px,100%);background:linear-gradient(180deg,var(--card),#0a1322);border:1px solid var(--line2);border-radius:var(--r2);padding:28px 26px;box-shadow:var(--sh)}
.modal-x{position:absolute;top:12px;right:14px;background:transparent;border:0;color:var(--mut);font-size:22px;cursor:pointer;line-height:1}
.modal-card h3{font-size:20px} .modal-sub{color:var(--ink2);font-size:14px;margin:8px 0 16px}
.modal-form{display:grid;gap:12px} .modal-form label{display:grid;gap:6px;font-size:13px;color:var(--mut)}
.modal-form input{background:var(--bg2);border:1px solid var(--line2);border-radius:11px;padding:11px 13px;color:var(--ink);font:inherit}
.modal-form input:focus{outline:0;border-color:var(--grn);box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.modal-note{color:var(--mut2);font-size:12px;text-align:center;margin-top:4px}
.modal-err{color:#ff9b9b;text-align:center;font-size:13px;margin-top:4px}

/* ---------- Páginas legais ---------- */
.legal{padding:120px 0 80px} .legal h1{font-size:clamp(28px,4vw,40px);margin-bottom:10px}
.legal h2{font-size:18px;margin:26px 0 8px} .legal p{color:var(--ink2);margin-bottom:10px;max-width:70ch}
.legal-draft{color:var(--amb);font-size:13.5px} .legal-upd{color:var(--mut2);font-size:12.5px;margin-top:26px}

/* ---------- Responsivo ---------- */
@media(max-width:920px){
  .sec{padding:96px 0} .show{padding:56px 0}
  .show-in{grid-template-columns:1fr;gap:28px} .show-in.reverse{direction:ltr}
  .show-copy{max-width:none} .d-main{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .transform{grid-template-columns:1fr;gap:16px;max-width:420px} .tr-arrow{flex-direction:row;justify-content:center}
  .tr-arrow span{transform:rotate(90deg)} .tr-arrow span img{transform:rotate(-90deg)}
  .pgrid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}
  .demo-wrap{grid-template-columns:1fr;gap:0}
  .demo-steps{gap:0;padding:0}
  .demo-step{opacity:1;padding:42px 0;border-top:1px solid var(--line)}
  .demo-step:first-child{border-top:0}
  .demo-stage{display:none}
  .demo-mobile-visual{display:block}
  .pro-list{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav-links{display:none} .nav .btn-cta{display:none} .nav-burger{display:flex} .nav.open .mobile{display:flex}
  .d-kpis{grid-template-columns:1fr 1fr} .mk-kpis,.mk-kpis.four{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr}
  .hero-stage{padding:0 6px}
  .pgrid{grid-template-columns:1fr} .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .ct-head,.ct-row{grid-template-columns:1.4fr .7fr .7fr;padding:12px 14px;font-size:13px}
  .flowline{font-size:12px} .flowline i{width:16px}
}

/* ---------- Movimento reduzido ---------- */
@media(prefers-reduced-motion:reduce){
  #wave{display:none}
  .reveal,.reveal-group>*{opacity:1;transform:none;transition:none}
  .btn-cta::after{display:none} .btn,.show-shot,.card{transition:none}
}