/* Kontrib · landing page (era a do ZEDAS). Composição e ritmo inspirados na Flowra; identidade do ZEDAS (logo, azul #0369A1,
   Outfit + Inter). Superfícies chapadas, sem degradês de cor. Dados das prévias: ilustrativos. */
:root{
  --bg:#10253D; --bg-2:#0E0E10; --card:#10253D; --card-2:#17171A; --ui:#1B1B1F; --ui-2:#222227;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --fg:#F4F4F5; --fg-2:#CFCFD4; --fg-3:#9C9CA5; --fg-4:#8E8E97; --err:#FF9B92;
  --brand:#0369A1; --brand-hi:#0284C7; --sky:#7DD3FC; --sky-2:#38BDF8; --sky-soft:rgba(125,211,252,.12); --sky-line:rgba(125,211,252,.35);
  --ok:#4ADE80; --ok-bg:rgba(74,222,128,.12); --warn:#FBBF24; --warn-bg:rgba(251,191,36,.12); --bad:#F87171; --bad-bg:rgba(248,113,113,.12);
  --display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:20px; --r-sm:14px; --wrap:1160px; --hdr:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:8px}
::selection{background:var(--sky);color:#06131C}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
section[id],footer[id]{scroll-margin-top:calc(var(--hdr) + 16px)}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;color:var(--fg);text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(32px,3.8vw,48px);line-height:1.06;letter-spacing:-.03em}
h3{font-size:20px;line-height:1.25;letter-spacing:-.015em}
p{margin:0}
.lead{font-size:clamp(16px,1.35vw,18.5px);color:var(--fg-3);line-height:1.55}
.muted{color:var(--fg-3)}
.tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font-size:13px;color:var(--fg-2);white-space:nowrap}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--sky)}
.sec{padding:clamp(88px,11vw,148px) 0 0}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin:0 auto clamp(40px,5vw,64px);max-width:720px}
.sec-head .lead{max-width:560px}
.note{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-4)}
.note::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--fg-4)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;font-weight:500;font-size:15px;white-space:nowrap;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s var(--ease),color .2s}
.btn .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-hi)}
.btn.ghost{background:var(--card-2);border-color:var(--line-2);color:var(--fg)}
.btn.ghost:hover{border-color:var(--line-3);background:var(--ui)}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.link{color:var(--sky);text-decoration:underline;text-decoration-color:var(--sky-line);text-underline-offset:3px;transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--sky)}

/* ---------- cabeçalho ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(16,37,61,.82);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom-color:var(--line)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:inline-flex;align-items:center;color:var(--fg)}
.logo svg{width:112px;height:18px}
.nav{display:flex;gap:4px;margin:0 auto}
.nav a{padding:8px 13px;border-radius:999px;font-size:14px;color:var(--fg-3);transition:color .2s,background .2s}
.nav a:hover{color:var(--fg);background:var(--card-2)}
.hdr-cta{display:flex;align-items:center;gap:8px}
.hdr-cta .enter{font-size:14px;color:var(--fg-2);padding:8px 12px;border-radius:999px;transition:color .2s}
.hdr-cta .enter:hover{color:var(--fg)}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:var(--card-2);align-items:center;justify-content:center;margin-left:auto}
.menu-btn span{position:relative;width:16px;height:1.5px;background:var(--fg);transition:background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--fg);transition:transform .25s var(--ease)}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
.mnav{position:fixed;inset:var(--hdr) 0 auto;z-index:49;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 20px 22px;display:flex;flex-direction:column;gap:2px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .22s,transform .22s var(--ease),visibility 0s linear .22s}
.mnav.open{opacity:1;transform:none;visibility:visible;transition:opacity .22s,transform .22s var(--ease),visibility 0s}
.mnav a{padding:14px 4px;font-size:17px;border-bottom:1px solid var(--line);color:var(--fg-2)}
.mnav .btn{margin-top:16px;width:100%}

/* ---------- entradas ---------- */
.rv{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.rv.in{opacity:1;transform:none;filter:none}

/* ---------- 1 hero ---------- */
.hero{padding:calc(var(--hdr) + clamp(56px,8vw,104px)) 0 0;text-align:center}
.hero .wrap{display:flex;flex-direction:column;align-items:center}
.hero h1{margin-top:22px;max-width:15ch}
.hero h1 .w{display:inline-block}
.hero .lead{margin-top:20px;max-width:34ch}
.hero-ctas{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap;justify-content:center}

/* ---------- interface (painel do produto) ---------- */
.frame{background:var(--bg-2);border:1px solid var(--line-2);border-radius:24px;padding:10px;text-align:left}
.app{display:grid;grid-template-columns:188px minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:13px;color:var(--fg-2)}
.app-side{border-right:1px solid var(--line);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.app-side .lg{display:flex;align-items:center;gap:8px;padding:2px 8px 16px;color:var(--fg)}
.app-side .lg svg{width:74px;height:12px}
.app-side .it{display:flex;align-items:center;gap:9px;height:32px;padding:0 9px;border-radius:8px;color:var(--fg-3);font-size:12.5px}
.app-side .it .ico{width:15px;height:15px}
.app-side .it.on{background:var(--ui);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.app-side .it b{margin-left:auto;font-weight:600;font-size:10.5px;background:var(--fg);color:var(--bg);border-radius:5px;padding:1px 6px}
.app-side .cap{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-4);padding:14px 9px 6px}
.app-main{padding:18px 20px 16px;min-width:0}
.app-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.app-top .t{font-family:var(--display);font-size:20px;color:var(--fg);letter-spacing:-.02em;margin-right:auto}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;font-size:12px;color:var(--fg-2);background:var(--ui);white-space:nowrap}
.pill .ico{width:14px;height:14px}
.pill.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.emit{margin-top:16px;display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.emit .lb{font-size:12px;color:var(--fg-3);white-space:nowrap}
.emit .lb b{color:var(--fg);font-weight:500}
.bar{display:block;position:relative;flex:1;height:6px;border-radius:6px;background:var(--ui-2);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--sky);border-radius:6px;transition:width 1.6s var(--ease)}
.emit .ct{font-family:var(--display);font-size:15px;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums}
.kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.kp div{padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);min-width:0}
.kp small{display:block;font-size:11px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp b{display:block;margin-top:4px;font-family:var(--display);font-weight:500;font-size:22px;color:var(--fg);letter-spacing:-.02em;white-space:nowrap}
.kp b em{font-style:normal;font-size:12px;color:var(--fg-4);margin-right:3px}
.kp .ok{color:var(--ok)}.kp .bad{color:var(--bad)}
.tb{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tr{display:grid;grid-template-columns:minmax(0,2.2fr) 1fr .9fr 1.1fr 1.1fr;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;white-space:nowrap}
.tr:first-child{border-top:0}
.tr.th{font-size:11px;color:var(--fg-4);background:var(--bg-2);padding-top:9px;padding-bottom:9px}
.tr .c{display:flex;align-items:center;gap:9px;min-width:0;color:var(--fg)}
.tr .c span{overflow:hidden;text-overflow:ellipsis}
.av{width:24px;height:24px;border-radius:50%;background:var(--ui-2);display:grid;place-items:center;font-size:9.5px;font-weight:600;color:var(--fg-2);flex:none}
.num{font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;justify-self:start}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.info{background:var(--sky-soft);color:var(--sky)}
.chip.mut{background:var(--ui-2);color:var(--fg-3)}
.hero-shot .tr{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(1.1s + var(--i,0) * 70ms)}
.ready .hero-shot .tr{opacity:1;transform:none}

/* ---------- 2 faixa ---------- */
.band{padding:clamp(64px,8vw,96px) 0 0}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.grp{display:flex;gap:12px;padding-right:12px}
.mi{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:15px;color:var(--fg-2);white-space:nowrap}
.mi .ic{width:28px;height:28px;border-radius:50%;background:var(--ui);display:grid;place-items:center;color:var(--sky)}
.mi .ic .ico{width:15px;height:15px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- cartões (base) ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.vis{position:relative;height:250px;border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.card .tx{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px}
.card .tx p{font-size:15px;color:var(--fg-3)}

/* ---------- 3 benefícios ---------- */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mini{position:absolute;left:50%;top:50%;width:min(280px,84%);transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:8px}
.mrow{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--card-2);font-size:12.5px;color:var(--fg-2);white-space:nowrap}
.mrow .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mrow .ico{width:15px;height:15px;color:var(--fg-3)}
.mbtn{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 6px 0 14px;border-radius:11px;background:var(--ui);border:1px solid var(--line-2);font-size:12.5px;color:var(--fg)}
.mbtn span.go{height:30px;padding:0 12px;border-radius:8px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;font-size:12px;font-weight:500}
.cnt{font-family:var(--display);font-variant-numeric:tabular-nums}
/* lote: as guias entram uma a uma e o contador sobe */
@property --n{syntax:"<integer>";inherits:false;initial-value:67}
.lote .cnt::after{counter-reset:n var(--n);content:counter(n)}
.play .lote .cnt{animation:count 6s var(--ease) infinite}
@keyframes count{0%{--n:0}38%{--n:67}100%{--n:67}}
.lote .mrow{opacity:1}
.play .lote .mrow{animation:drop 6s var(--ease) infinite;animation-delay:calc(var(--i) * .35s)}
@keyframes drop{0%,6%{opacity:0;transform:translateY(-8px)}16%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.play .lote .go{animation:press 6s ease infinite}
@keyframes press{0%,2%{transform:none}5%{transform:scale(.94)}9%,100%{transform:none}}
/* envio: a guia segue para os dois canais e o status muda */
.send{position:absolute;inset:0;display:grid;grid-template-columns:104px minmax(24px,1fr) 148px;align-items:center;padding:0 20px}
.doc{width:104px;aspect-ratio:3/4;border:1px solid var(--line-2);border-radius:10px;background:var(--card-2);padding:11px;display:flex;flex-direction:column;gap:6px}
.doc .h{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--fg-2);font-weight:500}
.doc .m{font-size:9.5px;color:var(--fg-4);margin:-3px 0 2px}
.doc .h b{font-weight:600;color:var(--bad);font-size:9.5px;letter-spacing:.04em}
.doc i{display:block;height:5px;border-radius:3px;background:var(--ui-2)}
.doc .v{margin-top:auto;font-family:var(--display);font-size:15px;color:var(--fg)}
.doc .v small{display:block;font-family:var(--body);font-size:9.5px;color:var(--fg-4)}
.wire{position:relative;height:100%}
.wire span{position:absolute;left:0;right:0;height:1px;background:var(--line-2)}
.wire span:nth-child(1){top:38%}.wire span:nth-child(2){top:62%}
.wire span::after{content:"";position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;background:var(--sky);opacity:0}
.play .wire span::after{animation:travel 3.2s var(--ease) infinite}
.play .wire span:nth-child(2)::after{animation-delay:.35s}
@keyframes travel{0%{left:0;opacity:0}12%{opacity:1}60%{left:calc(100% - 6px);opacity:1}70%,100%{left:calc(100% - 6px);opacity:0}}
.chs{display:flex;flex-direction:column;gap:14px}
.chn{display:flex;align-items:center;gap:9px;height:50px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);color:var(--fg);width:148px}
.chn .ic{width:28px;height:28px;border-radius:8px;background:var(--ui);display:grid;place-items:center;color:var(--sky);flex:none}
.chn .ic .ico{width:14px;height:14px}
.chn .tt{display:flex;flex-direction:column;gap:1px;min-width:0}
.chn .tt b{font-weight:500;font-size:12.5px;line-height:1.2}
.chn .st{position:relative;height:14px;font-size:10.5px;line-height:14px}
.chn .st span{position:absolute;left:0;top:0;white-space:nowrap}
.chn .st .a{color:var(--fg-4)}
.chn .st .b{color:var(--ok);opacity:0}
.play .chn .st .a{animation:swapA 3.2s infinite}
.play .chn .st .b{animation:swapB 3.2s infinite}
.play .chn:nth-child(2) .st .a,.play .chn:nth-child(2) .st .b{animation-delay:.35s}
@keyframes swapA{0%,62%{opacity:1}68%,94%{opacity:0}100%{opacity:1}}
@keyframes swapB{0%,62%{opacity:0}68%,94%{opacity:1}100%{opacity:0}}
/* pagamentos: as situações viram "Pago" em sequência */
.pay .mrow .st{position:relative;width:74px;height:22px;flex:none}
.pay .mrow .st .chip{position:absolute;right:0;top:0}
.pay .mrow .st .b{opacity:0}
.play .pay .mrow .st .a{animation:payA 7s infinite;animation-delay:calc(var(--i) * .9s)}
.play .pay .mrow .st .b{animation:payB 7s infinite;animation-delay:calc(var(--i) * .9s)}
@keyframes payA{0%,18%{opacity:1}24%,88%{opacity:0}94%,100%{opacity:1}}
@keyframes payB{0%,18%{opacity:0}24%,88%{opacity:1}94%,100%{opacity:0}}
.pay .sum{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 0;font-size:12px;color:var(--fg-3)}
.pay .sum b{font-family:var(--display);font-weight:500;color:var(--fg);font-size:15px}

/* ---------- 4 o que o ZEDAS resolve ---------- */
.solve{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.solve-h{position:sticky;top:calc(var(--hdr) + 48px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.solve-h .lead{max-width:30ch}
.rail{position:relative;padding-left:44px;display:flex;flex-direction:column;gap:64px}
.rail::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.rail .fill{position:absolute;left:11px;top:6px;width:1px;height:var(--rail,0px);background:var(--sky);transition:height .12s linear}
.step-n{position:absolute;left:-44px;top:0;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;background:var(--card-2);color:var(--fg-3);border:1px solid var(--line-2);transition:background .3s,color .3s,border-color .3s}
.ritem{position:relative;display:flex;flex-direction:column;gap:10px}
.ritem.on .step-n{background:var(--sky);color:#06131C;border-color:var(--sky)}
.ritem p{color:var(--fg-3);max-width:46ch}
.dia{margin-top:12px;height:236px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);position:relative;overflow:hidden}
.dia-a{display:grid;grid-template-columns:1fr 40px 1.1fr;align-items:center;height:100%;padding:0 22px;gap:4px}
.scatter{position:relative;height:150px}
.scatter span{position:absolute;font-size:11px;font-variant-numeric:tabular-nums;color:var(--fg-3);background:var(--card-2);border:1px solid var(--line);border-radius:7px;padding:5px 8px;white-space:nowrap}
.arrow{color:var(--fg-4);display:grid;place-items:center}
.org{display:flex;flex-direction:column;gap:6px}
.org .hd{display:flex;justify-content:space-between;font-size:11px;color:var(--fg-3);padding:0 2px 2px}
.org .hd b{color:var(--fg);font-weight:500}
.org .r{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--card-2);font-size:11.5px;color:var(--fg-2);white-space:nowrap}
.org .r .grow{flex:1;overflow:hidden;text-overflow:ellipsis}
.dia-b{position:absolute;inset:0}
.dia-b svg{position:absolute;inset:0;width:100%;height:100%}
.dia-b .ln{stroke:var(--line-2);stroke-width:1;fill:none}
.dia-b .pl{stroke:var(--sky);stroke-width:1.5;fill:none;stroke-dasharray:6 400;stroke-linecap:round}
.play .dia-b .pl{animation:pulse 3.4s linear infinite}
.dia-b .pl:nth-of-type(2n){animation-delay:.6s}.dia-b .pl:nth-of-type(3n){animation-delay:1.2s}
@keyframes pulse{from{stroke-dashoffset:0}to{stroke-dashoffset:-406}}
.hub{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:18px;background:var(--fg);color:var(--bg);display:grid;place-items:center}
.hub svg{position:static;width:30px;height:25px}
.node{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--card-2);border:1px solid var(--line-2);display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--fg-2)}
.dia-c{display:flex;flex-direction:column;justify-content:center;gap:18px;height:100%;padding:0 24px}
.seg{display:flex;gap:3px;height:12px}
.seg i{display:block;height:100%;border-radius:4px}
.buckets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bk{border:1px solid var(--line);border-radius:12px;background:var(--card-2);padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.bk small{font-size:11px;color:var(--fg-3);display:flex;align-items:center;gap:6px}
.bk small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.bk b{font-family:var(--display);font-weight:500;font-size:24px;color:var(--fg);line-height:1}
.bk span{font-size:11px;color:var(--fg-2);border:1px solid var(--line-2);border-radius:7px;padding:3px 8px;align-self:flex-start;white-space:nowrap}

/* ---------- 5 recursos ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:16px}
.bento .card{display:flex;flex-direction:column}
.b-main{grid-column:1 / span 2;grid-row:1 / span 2}
.b-main .vis{flex:1;min-height:420px;height:auto}
.bento .vis{height:220px}
.bento .tx{padding:20px 22px 22px}
.bento .tx p{font-size:14.5px}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--sky-line);color:var(--sky);font-size:11px;font-weight:500;align-self:flex-start}
.ctrl{position:absolute;inset:22px;display:flex;flex-direction:column;gap:12px}
.ctrl-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--fg-3)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs span{height:30px;padding:0 11px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-3);transition:background .25s,color .25s}
.tabs span em{font-style:normal;color:var(--fg-4);font-size:11px}
.tabs span.on{background:var(--ui-2);color:var(--fg)}
.ctrl .tb{margin-top:0;background:var(--card);min-height:0;flex:0 1 auto}
.ctrl .tr{grid-template-columns:minmax(0,2fr) .9fr 1.1fr 1fr}
.act{justify-self:end;height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--line-2);font-size:11px;color:var(--fg-2);display:inline-flex;align-items:center;transition:background .25s,color .25s,border-color .25s}
.ctrl .tr.hl .act{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ctrl .tr{transition:background .3s}
.ctrl .tr.hl{background:var(--card-2)}
.b-main:hover .ctrl .tr.hl{background:var(--ui)}
.pend{position:absolute;inset:22px 20px auto;display:flex;flex-direction:column;gap:8px}
.pend .mrow{transition:transform .35s var(--ease),border-color .35s,background .35s}
.pend .mrow b{font-family:var(--display);font-weight:500;color:var(--fg);font-size:14px;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
/* A seta escondida não ocupa o espaço do vão (09/11/2026, Manoel: o número da 1ª linha ficava fora do alinhamento dos outros). */
.pend .mrow .go{width:0;margin-left:-10px;overflow:hidden;color:var(--sky);transition:width .35s var(--ease),margin-left .35s var(--ease)}
.card:hover .pend .mrow:first-child,.card:focus-within .pend .mrow:first-child{transform:translateX(6px);border-color:var(--sky-line);background:var(--ui)}
.card:hover .pend .mrow:first-child .go,.card:focus-within .pend .mrow:first-child .go{width:15px;margin-left:0}
.teto{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 24px}
.teto .hd{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--fg-2)}
.teto .hd b{font-family:var(--display);font-weight:500;font-size:28px;color:var(--fg);letter-spacing:-.02em}
.teto .bar{flex:none;height:10px}
.panelette .bar{flex:none}
.teto .bar i{background:var(--warn);width:var(--p);transition:width .6s var(--ease)}
.teto .mk{position:relative;height:16px;font-size:10.5px;color:var(--fg-4)}
.teto .mk span{position:absolute;right:0}
.teto .al{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--warn);opacity:.0;transform:translateY(4px);transition:opacity .35s,transform .35s var(--ease)}
.card:hover .teto .bar i{--p:97%!important}
.card:hover .teto .al,.card:focus-within .teto .al{opacity:1;transform:none}
.decl{position:absolute;left:50%;top:26px;width:150px;margin-left:-75px;aspect-ratio:3/4;border:1px solid var(--line-2);border-radius:10px;background:var(--card-2);padding:14px;display:flex;flex-direction:column;gap:7px;transition:transform .4s var(--ease)}
.decl .h{font-size:10.5px;color:var(--fg-2);font-weight:500}
.decl i{display:block;height:5px;border-radius:3px;background:var(--ui-2)}
.decl .sig{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:10px;color:var(--fg-3);border-top:1px dashed var(--line-2);padding-top:8px}
.stamp{position:absolute;right:-30px;bottom:34px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:var(--ok-bg);border:1px solid rgba(255,255,255,.3);color:var(--ok);font-size:11px;font-weight:500;white-space:nowrap;transform:rotate(-6deg) scale(.92);opacity:.0;transition:opacity .35s,transform .4s var(--ease)}
.card:hover .decl,.card:focus-within .decl{transform:translateY(-6px)}
.card:hover .stamp,.card:focus-within .stamp{opacity:1;transform:rotate(-6deg) scale(1)}
.chart{position:absolute;inset:24px 24px 18px;display:flex;flex-direction:column}
.chart .hd{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--fg-3)}
.chart .hd b{font-family:var(--display);font-weight:500;font-size:26px;color:var(--fg)}
.cols{flex:1;display:flex;align-items:flex-end;gap:7px;padding-top:14px}
.cols i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--ui-2);transition:background .3s}
.cols i.hi{background:var(--fg)}
.card:hover .cols i.hi{background:var(--sky)}
.card:hover .cols i:nth-child(9){background:var(--line-3)}
.fat{position:absolute;inset:22px 20px auto;display:flex;flex-direction:column;gap:10px}
.fat .hd{font-size:12px;color:var(--fg-3)}
.fat .hd b{display:block;font-family:var(--display);font-weight:500;font-size:26px;color:var(--fg);margin-top:2px}
.pays{display:flex;gap:6px}
.pays span{height:24px;padding:0 9px;border-radius:7px;border:1px solid var(--line-2);font-size:11px;color:var(--fg-2);display:inline-flex;align-items:center}
.fat .mrow .st{position:relative;width:76px;height:22px}
.fat .mrow .st .chip{position:absolute;right:0;top:0}
.fat .mrow .st .b{opacity:0;transition:opacity .3s}
.fat .mrow .st .a{transition:opacity .3s}
.card:hover .fat .mrow .st .a{opacity:0}
.card:hover .fat .mrow .st .b{opacity:1}

/* ---------- 6 como funciona (sticky) ---------- */
.how{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:start}
.steps{display:flex;flex-direction:column}
.step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 0;opacity:.32;transition:opacity .35s var(--ease)}
.step:first-child{min-height:56vh}
.step.on{opacity:1}
.step .n{font-family:var(--display);font-size:13px;color:var(--fg-3);display:flex;align-items:center;gap:10px}
.step .n::after{content:"";height:1px;width:40px;background:var(--line-2);transition:width .4s var(--ease),background .4s}
.step.on .n{color:var(--sky)}
.step.on .n::after{width:64px;background:var(--sky)}
.step h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em;line-height:1.1}
.step p{color:var(--fg-3);max-width:34ch}
.step .m-prev{display:none}
.stage{position:sticky;top:max(calc(var(--hdr) + 28px),calc(50vh - 210px + var(--hdr) / 2));align-self:start}
.screen{position:relative;aspect-ratio:1.36/1;border:1px solid var(--line-2);border-radius:24px;background:var(--bg-2);padding:10px}
.pv{position:absolute;inset:10px;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:20px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(12px);transition:opacity .38s var(--ease),transform .38s var(--ease);pointer-events:none;overflow:hidden}
.pv.on{opacity:1;transform:none;pointer-events:auto}
.pv .top{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fg-3)}
.pv .top .t{font-family:var(--display);font-size:18px;color:var(--fg);margin-right:auto;letter-spacing:-.015em}
.sheet{border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12px}
.sheet .sr2{display:grid;grid-template-columns:32px 1.25fr 1.6fr 1.1fr;border-top:1px solid var(--line)}
.sheet .sr2:first-child{border-top:0;background:var(--bg-2);color:var(--fg-4);font-size:11px}
.sheet .sr2 span{padding:9px 10px;border-left:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg-2)}
.sheet .sr2 span:first-child{border-left:0;color:var(--fg-4);text-align:center}
.okline{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--ok-bg);color:var(--ok);font-size:13px}
.okline .ico{width:16px;height:16px}
.okline b{color:var(--fg);font-weight:500}
.lot{display:flex;flex-direction:column;gap:7px}
.lot .mrow .ico{color:var(--bad)}
.lot .mrow .v{color:var(--fg);font-variant-numeric:tabular-nums}

/* ---------- 7 canais ---------- */
.net{position:relative;height:420px;max-width:980px;margin:0 auto}
.net svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.net .ln{stroke:var(--line-2);stroke-width:1;fill:none}
/* fluxo: a planilha e a Receita entram no ZEDAS, o centro reage e a guia sai por e-mail e WhatsApp.
   Os caminhos usam pathLength=100, então o pulso tem o mesmo tamanho e ritmo em todas as linhas. */
.net .ln.flow{stroke:var(--line-3);stroke-dasharray:1.2 2.6;stroke-linecap:round;opacity:.0}
.net.play .ln.flow{opacity:.55;animation:march 2.4s linear infinite}
.net.play .ln.flow.rev{animation-direction:reverse}
@keyframes march{to{stroke-dashoffset:-7.6}}
.net .pl{stroke:var(--sky);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:16 300;stroke-dashoffset:16;opacity:0}
.net.play .pl.in{animation:flowIn 4.2s cubic-bezier(.45,0,.25,1) infinite}
.net.play .pl.out{animation:flowOut 4.2s cubic-bezier(.45,0,.25,1) infinite}
.net.play .pl.i2{animation-delay:.22s}
@keyframes flowIn{0%{stroke-dashoffset:16;opacity:1}36%{stroke-dashoffset:-100;opacity:1}37%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes flowOut{0%,46%{stroke-dashoffset:16;opacity:0}47%{opacity:1}82%{stroke-dashoffset:-100;opacity:1}83%,100%{stroke-dashoffset:-100;opacity:0}}
.core::after{content:"";position:absolute;inset:-11px;border-radius:42px;border:1.5px solid var(--sky);opacity:0;pointer-events:none}
.net.play .core{animation:coreRing 4.2s ease-out infinite}
.net.play .core::after{animation:coreRipple 4.2s ease-out infinite}
@keyframes coreRing{0%,33%{box-shadow:0 0 0 10px var(--bg),0 0 0 11px var(--line-2)}40%{box-shadow:0 0 0 10px var(--bg),0 0 0 12px var(--sky)}62%,100%{box-shadow:0 0 0 10px var(--bg),0 0 0 11px var(--line-2)}}
@keyframes coreRipple{0%,36%{opacity:0;transform:scale(1)}40%{opacity:.7;transform:scale(1)}64%,100%{opacity:0;transform:scale(1.28)}}
.net.play .e1,.net.play .e2{animation:nodeIn 4.2s ease infinite}
.net.play .e3,.net.play .e4{animation:nodeOut 4.2s ease infinite}
.net.play .e2,.net.play .e4{animation-delay:.22s}
@keyframes nodeIn{0%,4%{border-color:var(--sky-line)}16%,100%{border-color:var(--line-2)}}
@keyframes nodeOut{0%,76%{border-color:var(--line-2)}82%,88%{border-color:var(--sky-line)}100%{border-color:var(--line-2)}}
.net.play .e1 .ic,.net.play .e2 .ic{animation:icIn 4.2s ease infinite}
.net.play .e3 .ic,.net.play .e4 .ic{animation:icOut 4.2s ease infinite}
.net.play .e2 .ic,.net.play .e4 .ic{animation-delay:.22s}
@keyframes icIn{0%,4%{background:var(--sky-soft)}16%,100%{background:var(--ui)}}
@keyframes icOut{0%,76%{background:var(--ui)}82%,88%{background:var(--sky-soft)}100%{background:var(--ui)}}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:32px;background:var(--fg);color:var(--bg);display:grid;place-items:center;box-shadow:0 0 0 10px var(--bg),0 0 0 11px var(--line-2)}
.core svg{width:52px;height:44px}
.end{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);white-space:nowrap}
.end .ic{width:38px;height:38px;border-radius:11px;background:var(--ui);display:grid;place-items:center;color:var(--sky)}
.end b{display:block;font-weight:500;font-size:15px}
.end small{display:block;font-size:12.5px;color:var(--fg-3)}
.e1{left:15%;top:22%}.e2{left:15%;top:78%}.e3{left:85%;top:22%}.e4{left:85%;top:78%}

/* ---------- 8 comparação ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--card);max-width:980px;margin:0 auto}
.cmp .col{padding:28px clamp(20px,3vw,36px) 18px}
.cmp .col.z{background:var(--card-2);box-shadow:inset 1px 0 0 var(--line)}
.cmp .hd{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;padding-bottom:18px}
.cmp .hd .ico{width:20px;height:20px;color:var(--fg-4)}
.cmp .hd svg.zl{width:84px;height:14px;color:var(--fg)}
.cmp ul{list-style:none;margin:0;padding:0}
.cmp li{display:flex;gap:12px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line);font-size:16px}
.cmp .m li{color:var(--fg-4)}
.cmp .m li .ico{color:var(--fg-4);margin-top:3px}
.cmp .z li{color:var(--fg)}
.cmp .z li .ico{color:var(--sky);margin-top:3px}

/* ---------- 9 para quem é ---------- */
.who .vis{height:280px}
.role{font-size:12.5px;color:var(--sky)}
.panelette{position:absolute;inset:24px 22px auto;display:flex;flex-direction:column;gap:12px}
.panelette .big{font-family:var(--display);font-size:30px;letter-spacing:-.02em;color:var(--fg);line-height:1}
.panelette small{font-size:12px;color:var(--fg-3)}
.lg2{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:11.5px;color:var(--fg-2)}
.lg2 span{display:flex;align-items:center;gap:6px}
.lg2 i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.lg2 b{margin-left:auto;font-weight:500;color:var(--fg)}
.phone{position:absolute;left:50%;top:22px;width:200px;margin-left:-100px;bottom:-30px;border:1px solid var(--line-2);border-radius:28px 28px 0 0;background:var(--card-2);padding:16px 12px}
.phone .bubble{background:var(--ui);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 11px;font-size:11.5px;color:var(--fg-2);line-height:1.45}
.phone .att{margin-top:8px;display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.phone .att .ico{color:var(--bad);width:16px;height:16px}
.phone .att b{display:block;font-size:11px;font-weight:500;color:var(--fg)}
.phone .att small{font-size:10px;color:var(--fg-4)}
.phone .meta{text-align:right;font-size:10px;color:var(--fg-4);margin-top:6px}

/* ---------- 10 planos e segurança ---------- */
.plans{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px}
.plan{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:22px;justify-content:space-between;min-height:380px}
.plan h2{font-size:clamp(30px,3.2vw,42px);max-width:16ch}
.plan .mods{display:flex;gap:8px;flex-wrap:wrap}
.plan .mods span{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);font-size:13px;color:var(--fg-2);display:inline-flex;align-items:center;gap:7px}
.plan .mods span .ico{width:14px;height:14px;color:var(--sky)}
.sec-list{padding:10px clamp(22px,3vw,34px)}
.sec-list .it{display:flex;gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.sec-list .it:first-child{border-top:0}
.sec-list .ic{width:40px;height:40px;border-radius:12px;background:var(--ui);display:grid;place-items:center;color:var(--sky);flex:none}
.sec-list b{display:block;font-weight:500;font-size:16px}
.sec-list p{font-size:14.5px;color:var(--fg-3);margin-top:3px}
.sec-list .pp{padding:18px 0 20px;border-top:1px solid var(--line);font-size:14px;color:var(--fg-3)}

/* planos: abas DAS-MEI / Gestão, cartões de preço, módulos avulsos e segurança */
.ptabs-wrap{display:flex;justify-content:center;margin:-24px 0 32px}
.ptabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:var(--card)}
.ptabs button{height:38px;padding:0 18px;border-radius:999px;font-size:14px;color:var(--fg-3);transition:background .2s,color .2s}
.ptabs button:hover{color:var(--fg)}
.ptabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.ppanel{animation:pin .4s var(--ease)}
@keyframes pin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pintro{text-align:center;font-family:var(--display);font-size:clamp(20px,2vw,24px);letter-spacing:-.015em;color:var(--fg);margin:0 auto 24px;max-width:28ch;text-wrap:balance}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pgrid.g3p{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:0 auto}
.pc{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 22px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);transition:border-color .25s,transform .25s var(--ease),opacity .8s var(--ease),filter .8s var(--ease)}
.pc:hover{border-color:var(--line-3);transform:translateY(-3px)}
.pc.top{border-color:var(--sky-line)}
.pc .nm{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:26px}
.pc h3{font-size:21px}
.pc .badge{white-space:nowrap}
.pc .cap{font-size:13.5px;color:var(--fg-3)}
.pc .pr{margin-top:6px;font-family:var(--display);font-size:42px;font-weight:500;letter-spacing:-.035em;line-height:1;color:var(--fg);white-space:nowrap}
.pc .pr small{font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:0;color:var(--fg-3);margin-left:4px}
.pc .unit{font-size:13px;color:var(--sky)}
.pc ul{list-style:none;margin:8px 0 6px;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;font-size:14px}
.pc li{display:flex;gap:10px;align-items:flex-start;color:var(--fg-2);line-height:1.4}
.pc li .ico{width:16px;height:16px;margin-top:1px;color:var(--sky)}
.pc li.add{color:var(--fg-4)}
.pc li.add .ico{color:var(--fg-4)}
.pc li em{font-style:normal;margin-left:auto;white-space:nowrap;font-size:12.5px;color:var(--fg-3);padding-left:8px}
/* O NOME DO ITEM E O PREÇO DO ADICIONAL (11/11/2026, prints do Manoel): o texto
   solto dentro do li flex virava vários itens ("Faturamento NFS-e com",
   espalhado) e o "+ R$ 69,90" saía do cartão. Agora o nome é um elemento só,
   que quebra normal, e o preço tem coluna própria à direita, inteiro. */
.pc li .ft{flex:1 1 0;min-width:0;overflow-wrap:break-word}
.pc li.add{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:10px;align-items:start}
.pc li.add em{margin-left:0;padding-left:0;text-align:right;align-self:start}
.pc .btn{margin-top:auto;width:100%}
.pfoot{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.pfoot b{display:block;font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.015em}
.pfoot span{font-size:14px;color:var(--fg-3)}
.mods-card{margin-top:14px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.mods-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.mods-h h3{font-size:20px}
.mods-h span{font-size:14px;color:var(--fg-3)}
.mods-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.md{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);min-width:0}
.md .ic{width:32px;height:32px;border-radius:10px;background:var(--ui);display:grid;place-items:center;color:var(--sky);margin-bottom:4px}
.md .ic .ico{width:16px;height:16px}
.md b{font-weight:500;font-size:15px}
.md b small{display:block;font-size:12px;font-weight:400;color:var(--fg-3);margin-top:1px}
.md .v{font-family:var(--display);font-size:24px;letter-spacing:-.02em;color:var(--fg);margin-top:auto}
.md .v small{font-family:var(--body);font-size:12.5px;color:var(--fg-3);margin-left:3px}
.md.all{border-color:var(--sky-line)}
.md .sv{position:absolute;right:12px;top:14px;height:22px;padding:0 8px;border-radius:6px;background:var(--sky-soft);color:var(--sky);font-size:11px;font-weight:500;display:inline-flex;align-items:center}
.mods-n,.pnote{margin-top:14px;font-size:13px;color:var(--fg-4);text-align:center}
/* O diferencial do pró-labore e da declaração (09/11/2026), embaixo dos benefícios. */
.dif{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3vw,40px);padding:clamp(22px,3vw,36px);border:1px solid var(--sky-line);border-radius:var(--r);background:linear-gradient(135deg,var(--sky-soft),transparent 60%),var(--card)}
.dif-tx{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dif-tx h3{font-size:clamp(21px,2.2vw,26px);font-weight:500;line-height:1.25}
.dif-tx p{font-size:15.5px;color:var(--fg-3)}
.dif-it{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.dif-it li{display:flex;gap:14px;align-items:flex-start}
.dif-it .ic{width:40px;height:40px;border-radius:12px;background:var(--ui);display:grid;place-items:center;color:var(--sky);flex:none}
.dif-it b{display:block;font-weight:500;font-size:15.5px}
.dif-it p{font-size:14px;color:var(--fg-3);margin-top:3px}
@media (max-width:900px){.dif{grid-template-columns:minmax(0,1fr)}}
/* SEGURANÇA (11/11/2026): "DAS conferido na fonte" — quatro itens, dois por linha; um por linha no celular. */
.seg-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.seg-i{display:flex;gap:16px;align-items:flex-start;padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.seg-i:first-child{border-color:var(--sky-line);background:linear-gradient(135deg,var(--sky-soft),transparent 60%),var(--card)}
.seg-i .ic{width:42px;height:42px;border-radius:12px;background:var(--ui);display:grid;place-items:center;color:var(--sky);flex:none}
.seg-i h3{font-size:17px;font-weight:500;line-height:1.3}
.seg-i p{font-size:14.5px;color:var(--fg-3);margin-top:6px}
@media (max-width:720px){.seg-g{grid-template-columns:minmax(0,1fr)}}
.secrow{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.secrow .it{display:flex;gap:14px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.secrow .ic{width:40px;height:40px;border-radius:12px;background:var(--ui);display:grid;place-items:center;color:var(--sky);flex:none}
.secrow b{display:block;font-weight:500;font-size:15.5px}
.secrow p{font-size:14px;color:var(--fg-3);margin-top:3px}
.pp2{margin-top:14px;font-size:14px;color:var(--fg-3);text-align:center}
@media (max-width:1080px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.mods-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.secrow{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .pgrid,.pgrid.g3p{grid-template-columns:minmax(0,1fr)}
  .ptabs-wrap{margin-top:-16px}
  .pfoot .btn{width:100%}
  .mods-card{padding:18px}
  .md .sv{position:static;align-self:flex-start}
}

/* ---------- 11 dúvidas ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-h{position:sticky;top:calc(var(--hdr) + 48px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.acc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.qa{border-top:1px solid var(--line)}
.qa:first-child{border-top:0}
.qa h3{font-family:var(--body);font-size:16px;font-weight:500;letter-spacing:0}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;text-align:left;border-radius:0}
.qa button:hover{background:var(--card-2)}
.qa .pm{position:relative;width:14px;height:14px;flex:none}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;background:var(--fg-3);transition:transform .3s var(--ease)}
.qa .pm::after{transform:rotate(90deg)}
.qa button[aria-expanded="true"] .pm::after{transform:rotate(0)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.ans>div{overflow:hidden}
.ans p{padding:0 24px 22px;color:var(--fg-3);max-width:60ch}
.qa.open .ans{grid-template-rows:1fr}

/* ---------- 12 CTA final ---------- */
.final{position:relative;padding:clamp(96px,12vw,160px) 0 0;text-align:center}
.final-shot{position:relative;max-width:1000px;margin:0 auto;height:260px;overflow:hidden;opacity:.55}
.final-shot .frame{position:absolute;left:0;right:0;top:0}
.final-box{position:relative;margin:-110px auto 0;max-width:760px;padding:clamp(28px,4vw,48px);border:1px solid var(--line-2);border-radius:28px;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:22px}
.final-box h2{max-width:16ch}
.mailalt{font-size:14px;color:var(--fg-3)}
.form-wrap{width:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.form-wrap>div{overflow:hidden}
.form-wrap.open{grid-template-rows:1fr}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;text-align:left;padding-top:6px}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f input,.f select,.f textarea{width:100%;min-width:0}
@media (max-width:640px){form{grid-template-columns:minmax(0,1fr)}}
.f.full{grid-column:1/-1}
.f label{font-size:13px;color:var(--fg-2)}
.f label small{color:var(--fg-4)}
.f input,.f select,.f textarea{height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);color:var(--fg);font-size:15px;outline:0;transition:border-color .2s,background .2s}
.f textarea{height:96px;padding:12px 14px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--sky)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--err)}
.f .err{font-size:12.5px;color:var(--err)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.form-foot small{font-size:12.5px;color:var(--fg-4);max-width:42ch}
.status{grid-column:1/-1;display:none;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:12px;font-size:14px}
.status.show{display:flex}
.status.info{background:var(--sky-soft);color:var(--fg)}
.status.ok{background:var(--ok-bg);color:var(--fg)}
.status.bad{background:var(--bad-bg);color:var(--fg)}
.status .ico{margin-top:2px;color:var(--sky)}

/* ---------- rodapé ---------- */
.ftr{margin-top:clamp(96px,11vw,140px);border-top:1px solid var(--line);padding:56px 0 40px}
.ftr .cols3{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.ftr .about{display:flex;flex-direction:column;gap:14px;max-width:34ch}
.ftr .about p{font-size:14px;color:var(--fg-3)}
.ftr h4{margin:0 0 14px;font-size:13px;font-weight:500;color:var(--fg)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr li a{font-size:14px;color:var(--fg-3);transition:color .2s}
.ftr li a:hover{color:var(--fg)}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--fg-4)}

/* ---------- animações da home (mesmo repertório da landing da Bird Prospect) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.hero-shot{position:relative;width:100%;max-width:1120px;margin-top:clamp(48px,6vw,72px);perspective:1600px}
.shot{transform-origin:50% 0;will-change:transform}
.shot-note{display:flex;justify-content:flex-end;margin-top:10px}
.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block}
@keyframes navIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes char{from{opacity:0;transform:translateY(.45em) rotate(4deg);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes slideL{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes shotIn{from{opacity:0;transform:translateY(60px) scale(.96);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ping{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
@keyframes glow{0%,100%{box-shadow:inset 0 0 0 1px var(--line-2)}50%{box-shadow:inset 0 0 0 1px var(--sky-line),0 0 18px 0 rgba(255,255,255,.12)}}
@media (prefers-reduced-motion:no-preference){
  .js .hdr{animation:navIn .7s var(--ease) both}
  .js .split .c{opacity:0}
  .js .split.in .c{animation:char .7s var(--ease) both;animation-delay:calc(var(--d) * 1s)}
  .js .hero [data-reveal]{opacity:0}
  .js .hero [data-reveal].in{animation:rise .8s var(--ease) both}
  .js .hero .tag[data-reveal].in{animation:slideL .9s cubic-bezier(.16,1,.3,1) both}
  .js .hero-shot .shot{opacity:0}
  .js .hero-shot.in .shot{animation:shotIn 1.2s var(--ease) both .55s}
  .js .hero-shot.in .app-top .pill.solid{animation:ping 2.4s ease-in-out 3s infinite}
  .js .hero-shot.in .app-side .it.on{animation:glow 3s ease-in-out 2s infinite}
  .js .sec .tag.rv{transform:translateX(-48px);transition-duration:.9s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
  .js .sec .tag.rv.in{transform:none}
}
.chip{font-style:normal}
/* botões: o texto rola para cima e volta por baixo; a seta sai pela direita e outra entra pela esquerda */
.btn .lbl{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em}
.btn .lbl .t{display:block;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.btn .lbl .t::after{content:attr(data-t);display:block}
.btn:hover .lbl .t,.btn:focus-visible .lbl .t{transform:translateY(-50%)}
.btn .arr{position:relative;display:inline-grid;overflow:hidden;width:16px;height:16px}
.btn .arr svg{grid-area:1/1;width:16px;height:16px;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.btn .arr svg+svg{transform:translateX(-140%)}
.btn:hover .arr svg:first-child,.btn:focus-visible .arr svg:first-child{transform:translateX(140%)}
.btn:hover .arr svg+svg,.btn:focus-visible .arr svg+svg{transform:none}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .hdr-cta{margin-left:auto}
  .menu-btn{display:inline-flex;margin-left:0}
  .app{grid-template-columns:minmax(0,1fr)}
  .app-side{display:none}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-main{grid-column:1 / -1;grid-row:auto}
  .b-main .vis{min-height:430px}
  .e1,.e2{left:16%}.e3,.e4{left:84%}
}
@media (max-width:900px){
  :root{--hdr:62px}
  .hdr-cta .enter{display:none}
  .g3{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}
  .solve,.faq,.plans{grid-template-columns:minmax(0,1fr)}
  .solve-h,.faq-h{position:static}
  .how{grid-template-columns:minmax(0,1fr)}
  .stage{display:none}
  .step{min-height:0;opacity:1;padding:0 0 56px;gap:12px}
  .step:first-child{min-height:0}
  .step .n::after{width:40px;background:var(--line-2)}
  .step .m-prev{display:block;margin-top:14px}
  .step .m-prev .screen{aspect-ratio:auto;height:auto}
  .step .m-prev .pv{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
  .net{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:150px}
  .net svg.lines{display:none}
  .core{top:60px;width:96px;height:96px;border-radius:26px}
  .core svg{width:42px;height:36px}
  .end{position:relative;left:auto!important;top:auto!important;transform:none;flex-direction:column;align-items:flex-start;white-space:normal;padding:16px}
  .end::before{content:"";position:absolute;right:14px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--sky);opacity:.85}
  .play .end::before{animation:blink 2.4s ease-in-out infinite}
  .end:nth-child(3)::before{animation-delay:.6s}.end:nth-child(4)::before{animation-delay:1.2s}.end:nth-child(5)::before{animation-delay:1.8s}
  .cmp{grid-template-columns:minmax(0,1fr)}
  .cmp .col.z{box-shadow:inset 0 1px 0 var(--line)}
  .ftr .cols3{grid-template-columns:1fr 1fr}
  .ftr .about{grid-column:1/-1}
}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .hdr-cta{display:none}
  .menu-btn{margin-left:auto}
  .kp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tr{grid-template-columns:minmax(0,1.6fr) 1fr}
  .tr>:nth-child(2),.tr>:nth-child(3),.tr>:nth-child(4){display:none}
  .ctrl .tr{grid-template-columns:minmax(0,1.6fr) auto auto}
  .ctrl .tr>:nth-child(2){display:none}
  .ctrl .tr>:nth-child(3),.ctrl .tr>:nth-child(4){display:inline-flex}
  .app-main{padding:14px}
  .app-top .pill:not(.keep){display:none}
  .emit{flex-wrap:wrap;gap:8px 12px}
  .emit .bar{order:3;flex-basis:100%}
  .bento{grid-template-columns:minmax(0,1fr)}
  .b-main .vis{min-height:400px}
  .dia{height:auto;min-height:236px}
  .dia-a{grid-template-columns:1fr;gap:12px;padding:18px}
  .dia-a .arrow{transform:rotate(90deg);height:24px}
  .scatter{height:120px}
  .buckets{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .bk{padding:10px 8px}
  .bk b{font-size:20px}
  .bk span{font-size:10.5px;padding:3px 6px}
  .rail{padding-left:40px;gap:56px}
  form{grid-template-columns:1fr}
  .final-shot{height:200px}
  .final-box{margin-top:-90px;border-radius:22px}
  .hero-ctas .btn{flex:1 1 100%}
  .net{gap:10px;padding-top:140px}
  .end{padding:14px;gap:10px}
  .end b{font-size:14px}.end small{font-size:12px}
  .sheet .sr2{grid-template-columns:28px 1.3fr 1fr}
  .sheet .sr2>:nth-child(3){display:none}
}
/* telas de toque: o essencial que aparece no hover fica visível */
@media (hover:none){
  .teto .al,.stamp{opacity:1;transform:none}
  .stamp{transform:rotate(-6deg)}
  .pend .mrow:first-child{border-color:var(--sky-line)}
}
/* movimento reduzido: sem loops, sem rolagem suave, trocas instantâneas */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
  .rv,[data-reveal],.split .c,.hero-shot .shot,.hero-shot .tr{opacity:1!important;transform:none!important;filter:none!important}
  .track{width:auto;flex-wrap:wrap;justify-content:center}
  .track .grp[aria-hidden="true"]{display:none}
  .grp{flex-wrap:wrap;justify-content:center;padding:0}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ===================== Monocromático + liquid glass =====================
   Mesma paleta do sistema (preto, grafite e branco; status em tons de cinza), superfícies de vidro translúcido
   com desfoque e brilho na borda, títulos em degradê, grade e fachos de luz no fundo, botão branco metálico. */
:root{
  --brand:#FFFFFF; --brand-hi:#F4F4F5;
  --sky:#E4E4E7; --sky-2:#FFFFFF; --sky-soft:rgba(255,255,255,.08); --sky-line:rgba(255,255,255,.26);
  --ok:#FFFFFF; --ok-bg:rgba(255,255,255,.12); --warn:#A1A1AA; --warn-bg:rgba(255,255,255,.07); --bad:#6E6E77; --bad-bg:rgba(255,255,255,.04);
  --metal:linear-gradient(180deg,#FFFFFF 0%,#EDEDF0 42%,#C8C8CE 100%);
  --metal-hi:linear-gradient(180deg,#FFFFFF 0%,#F6F6F8 42%,#D8D8DD 100%);
  --glass-bg:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.018) 52%,rgba(255,255,255,.035) 100%),rgba(16,37,61,.55);
  --glass-line:rgba(255,255,255,.09);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -36px rgba(0,0,0,.9);
  --hdr:84px;
}
body{background:radial-gradient(1400px 700px at 50% -8%,rgba(255,255,255,.06),transparent 62%),var(--bg)}
::selection{background:#FFFFFF;color:#10253D}
:focus-visible{outline-color:#FFFFFF}

/* vidro */
.card,.acc,.cmp,.pfoot,.mods-card,.secrow .it,.dia,.screen,.net .end,.final-box,.frame,.mi,.tag,.ptabs{
  background:var(--glass-bg);border-color:var(--glass-line);box-shadow:var(--glass-shadow)}
.final-box,.ptabs,.tag,.frame{-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35)}
.vis{background:rgba(0,0,0,.28)}
.cmp .col.z{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.card:hover{border-color:rgba(255,255,255,.14)}
/* linha de luz no topo do vidro, como nas referências */
.frame,.final-box,.mods-card{position:relative}
.frame::before,.final-box::before,.pc::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);pointer-events:none}

/* botões: principal branco metálico, secundário de vidro */
.btn.primary{background:var(--metal);color:#10253D;border-color:transparent;box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(0,0,0,.18),0 10px 28px -12px rgba(255,255,255,.45)}
.btn.primary:hover{background:var(--metal-hi)}
.btn.ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.btn.ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.btn .chev{width:15px;height:15px;opacity:.8}
.mbtn span.go{background:var(--metal);color:#10253D;box-shadow:inset 0 1px 0 #FFFFFF}
.ritem.on .step-n{color:#10253D}

/* status em tons de cinza, como no sistema */
.chip.ok{background:#FFFFFF;color:#0C0C0D}
.chip.warn{background:#2A2A2E;color:#E4E4E7}
.chip.bad{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.chip.info{background:rgba(255,255,255,.1);color:#FFFFFF}
.chip.mut{background:rgba(255,255,255,.06);color:var(--fg-3)}
.stamp{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#FFFFFF}

/* cabeçalho: pílula de vidro flutuante */
.hdr{inset:14px 0 auto;margin:0 auto;width:min(calc(100% - 32px),1000px);height:58px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(16,37,61,.5);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 40px -24px rgba(0,0,0,.9)}
.hdr.scrolled{background:rgba(16,37,61,.72);border-color:rgba(255,255,255,.12);border-bottom-color:rgba(255,255,255,.12)}
.hdr .wrap{max-width:none;padding:0 8px 0 22px;gap:18px}
.nav a{font-size:13.5px}
.mnav{inset:calc(var(--hdr) - 6px) 16px auto;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:rgba(16,37,61,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.mnav a:last-of-type{border-bottom:0}

/* títulos: degradê de cinza para branco (as letras recebem a cor pela posição) */
.hero h1,.sec-head h2,.solve-h h2,.faq-h h2,.final-box h2{color:#D4D4D8}

/* ---------- hero no formato da CoreFi: grade, luz no canto, pílula, título em degradê ---------- */
.hero{position:relative;overflow:hidden;padding-top:calc(var(--hdr) + clamp(64px,8vw,104px))}
.hero .wrap{position:relative;z-index:1}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:72px 72px;background-position:center -1px;-webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 32%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 72% 58% at 50% 32%,#000 25%,transparent 78%)}
.hero-bg .lt{position:absolute;top:-22%;right:-12%;width:min(900px,70vw);height:min(760px,90vh);background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,.04) 55%,transparent);filter:blur(10px)}
.hero-bg .beam{position:absolute;top:-30%;width:26%;height:110%;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 70%);filter:blur(30px);transform-origin:top center}
.hero-bg .beam.l{left:6%;transform:rotate(18deg)}
.hero-bg .beam.r{right:6%;transform:rotate(-18deg)}
.hero-bg .stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 82% 14%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 68% 40%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 28% 48%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 90% 58%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 6% 66%,rgba(255,255,255,.3),transparent);opacity:.7}
.hero .tag{gap:10px;padding:0 12px 0 5px;height:32px}
.hero .tag i{display:none}
.hero .tag em{font-style:normal;height:22px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:11.5px;color:#FFFFFF;display:inline-flex;align-items:center}
.hero .tag .ico{width:14px;height:14px;opacity:.7}
.hero h1{max-width:17ch}
.hero-shot .frame{border-radius:22px;padding:8px;border-color:rgba(255,255,255,.12)}
/* degradê por cima da metade de baixo do painel: a tela some no fundo, como na referência */
.hero-shot::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-2px;height:64%;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(16,37,61,0) 0%,rgba(16,37,61,.55) 34%,rgba(16,37,61,.9) 62%,var(--bg) 84%)}
.shot-note{position:relative;z-index:5;margin-top:-34px;padding-right:4px}
@media (max-width:860px){.hero-shot::after{height:58%}}

/* ---------- planos no estilo das referências ---------- */
#planos{position:relative;overflow:hidden;padding-bottom:12px}
#planos::before,#planos::after{content:"";position:absolute;top:-6%;width:30%;height:70%;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 72%);filter:blur(34px);pointer-events:none;z-index:0}
#planos::before{left:4%;transform:rotate(22deg);transform-origin:top center}
#planos::after{right:4%;transform:rotate(-22deg);transform-origin:top center}
#planos .wrap{position:relative;z-index:1}
.ptabs{padding:5px}
.ptabs button{height:36px;padding:0 18px;color:var(--fg-2)}
.ptabs button[aria-selected="true"]{background:var(--metal);color:#10253D;box-shadow:inset 0 1px 0 #FFFFFF}
.pc{position:relative;gap:14px;padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(165deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 46%,rgba(255,255,255,.03) 100%),rgba(16,16,18,.6);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 80px -40px rgba(0,0,0,.9)}
.pc.top{border-color:rgba(255,255,255,.18);background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.2),rgba(255,255,255,.04) 55%,transparent 75%),linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(22,22,24,.7)}
.pc:hover{border-color:rgba(255,255,255,.2)}
.pc .nm{justify-content:flex-start;gap:12px;min-height:0}
.pc .pi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--metal);color:#10253D;box-shadow:inset 0 1px 0 #FFFFFF,0 6px 16px -8px rgba(255,255,255,.4)}
.pc .pi .ico{width:17px;height:17px;stroke-width:1.8}
.pc h3{font-size:20px}
.pc .pr{margin-top:4px;font-size:44px;background:linear-gradient(180deg,#FFFFFF 0%,#BDBDC4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc .pr small{-webkit-text-fill-color:var(--fg-3);color:var(--fg-3)}
.pc .cap{font-size:13.5px;color:var(--fg-3);margin:-4px 0 4px}
.pc .btn{margin-top:0}
.pc .feat{margin-top:4px;flex:1;display:flex;flex-direction:column;padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(0,0,0,.22)}
.pc .feat .fh{font-size:12px;color:var(--fg-4);margin-bottom:12px}
.pc .feat ul{margin:0;padding:0;border:0;gap:11px}
.pc li .ico{color:#FFFFFF}
.pc li.add .ico{color:var(--fg-4)}
.pc .pr,.pc .cap,.pc h3{position:relative}
.md.all{border-color:rgba(255,255,255,.22);background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.14),transparent 60%),var(--card)}
.md .ic{background:var(--metal);color:#10253D}
.md .sv{background:rgba(255,255,255,.12);color:#FFFFFF}
.secrow .ic,.end .ic,.mi .ic,.chn .ic,.sec-list .ic{background:rgba(255,255,255,.08);color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

/* CTA final com luz atrás do vidro */
.final{position:relative}
.final::before{content:"";position:absolute;left:50%;top:38%;width:min(900px,90vw);height:520px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);filter:blur(20px);pointer-events:none}

@media (max-width:900px){
  :root{--hdr:74px}
  .hdr{inset:10px 0 auto;width:calc(100% - 24px);height:54px}
  .hdr .wrap{padding:0 6px 0 18px}
  .hero-bg .beam{width:40%}
}
@media (max-width:640px){
  .pc .pr{font-size:40px}
  #planos::before,#planos::after{width:46%}
}

/* ---------- Guias DAS: mini tutorial em loop (filtra, cobra, envia em massa, acompanha) ---------- */
.ctrl{transition:opacity .45s var(--ease)}
.ctrl.fade{opacity:0}
.tut-bar{display:flex;align-items:center;gap:10px;height:34px;padding:0 6px 0 6px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));font-size:12.5px;color:var(--fg);flex:none}
.tut-n{height:24px;min-width:36px;padding:0 8px;border-radius:999px;background:var(--metal);color:#10253D;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.tut-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s,transform .3s var(--ease)}
.tut-t.swap{opacity:0;transform:translateY(5px)}
.tut-p{display:flex;gap:4px;padding-right:8px}
.tut-p i{position:relative;width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.tut-p i::after{content:"";position:absolute;inset:0;background:#FFFFFF;transform:scaleX(var(--k,0));transform-origin:left;transition:transform var(--t,0s) linear}
.ctrl .tb[data-f="all"] .tr.x{display:none}
.ctrl .tb[data-f="bad"] .tr:not(.th):not([data-s="bad"]){display:none}
.ctrl .tb[data-f="bad"] .tr[data-s="bad"]{animation:rowIn .45s var(--ease) both;animation-delay:calc(var(--rd,0) * 70ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ctrl .tabs span{position:relative}
.ctrl .act,.ctrl .pill.solid,.ctrl .tabs span{transition:background .25s,color .25s,border-color .25s,transform .14s}
.ctrl .press{transform:scale(.92)}
.ctrl .act.busy{background:transparent!important;color:var(--fg-3)!important;border-color:var(--line-2)!important}
.ctrl .act.done{background:rgba(255,255,255,.08)!important;color:var(--fg)!important;border-color:rgba(255,255,255,.14)!important}
.ctrl .act.done::before{content:"";width:6px;height:6px;border-radius:50%;background:#FFFFFF;margin-right:6px}
.ctrl .chip.flip{animation:chipFlip .5s var(--ease) both}
@keyframes chipFlip{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:none}}
.ctrl em.bump{animation:chipFlip .45s var(--ease) both;display:inline-block;color:var(--fg)}
.tut-toast{position:absolute;left:50%;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 24px);height:38px;padding:0 14px 0 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(28,28,31,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);font-size:12.5px;color:var(--fg);white-space:nowrap;opacity:0;transform:translate(-50%,10px) scale(.97);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.tut-toast span{overflow:hidden;text-overflow:ellipsis}
.tut-toast .ico{width:18px;height:18px;flex:none;color:#FFFFFF}
.tut-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.tut-cur{position:absolute;left:0;top:0;z-index:4;width:22px;height:22px;opacity:0;pointer-events:none;transform:translate(var(--x,0px),var(--y,0px));transition:transform .85s cubic-bezier(.65,0,.25,1),opacity .3s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.tut-cur.on{opacity:1}
.tut-cur svg{width:22px;height:22px;fill:#FFFFFF;stroke:#10253D;stroke-width:1.3;stroke-linejoin:round}
.tut-cur::after{content:"";position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);opacity:0}
.tut-cur.click::after{animation:tap .5s ease-out}
@keyframes tap{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
.b-main .vis{min-height:540px}
/* câmera: a interface fica num palco que aproxima e acompanha o cursor, como uma gravação de tela com zoom */
.tut-cam{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(16,37,61,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tut-stage{position:relative;width:100%;height:100%;padding:14px;display:flex;flex-direction:column;gap:12px;transform-origin:0 0;transition:transform 1s cubic-bezier(.65,0,.25,1)}
.tut-stage .ctrl-foot{margin-top:auto}
@media (max-width:1080px){.b-main .vis{min-height:560px}}
@media (max-width:900px){.b-main .vis{min-height:600px}.tut-p i{width:16px}}
@media (max-width:480px){.ctrl .av{display:none}.ctrl .tr{gap:8px;padding-left:12px;padding-right:10px}}
@media (prefers-reduced-motion:reduce){.tut-cur,.tut-toast,.tut-p{display:none}.tut-stage{transform:none!important}}

/* ---------- hero: traçado de luz branca no topo do painel e cantos menores (referência CoreFi) ---------- */
.hero-shot .frame{border-radius:14px;padding:7px;border-color:rgba(255,255,255,.11)}
.hero-shot .app{border-radius:9px}
.hero-shot .frame::before{left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75) 24%,#FFFFFF 50%,rgba(255,255,255,.75) 76%,rgba(255,255,255,0));box-shadow:none;z-index:2}
/* ---------- botões escuros: preenchimento em gradiente e traçado mais claro em cima ---------- */
.btn.ghost,.menu-btn{border:1px solid transparent;
  background:linear-gradient(180deg,#1D3A5A 0%,#10253D 100%) padding-box,linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.14) 100%) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -14px rgba(0,0,0,.9);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.ghost:hover,.menu-btn:hover{background:linear-gradient(180deg,#22405F 0%,#132B45 100%) padding-box,linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.12) 55%,rgba(255,255,255,.18) 100%) border-box}

/* ===================== Modo claro (white mode) =====================
   Mesma linguagem do escuro invertida: fundo cinza muito claro, vidro branco, texto grafite,
   botão principal preto metálico e status em tons de cinza. Ativado pelo botão de sol/lua do cabeçalho. */
:root[data-theme="light"]{
  --bg:#F6F6F7; --bg-2:#EFEFF1; --card:#FFFFFF; --card-2:#F7F7F8; --ui:#F0F0F2; --ui-2:#E5E5E8;
  --line:rgba(16,37,61,.08); --line-2:rgba(16,37,61,.13); --line-3:rgba(16,37,61,.22);
  --fg:#10253D; --fg-2:#3A3A40; --fg-3:#5E5E67; --fg-4:#66666F; --err:#B42318;
  --brand:#10253D; --brand-hi:#18181B; --sky:#23384F; --sky-2:#10253D; --sky-soft:rgba(16,37,61,.06); --sky-line:rgba(16,37,61,.28);
  --ok:#10253D; --ok-bg:rgba(16,37,61,.08); --warn:#52525B; --warn-bg:rgba(16,37,61,.05); --bad:#71717A; --bad-bg:rgba(16,37,61,.03);
  --metal:linear-gradient(180deg,#3B3B41 0%,#1D1D20 48%,#10253D 100%);
  --metal-hi:linear-gradient(180deg,#4A4A51 0%,#1D3A5A 48%,#10253D 100%);
  --glass-bg:linear-gradient(160deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.8) 52%,rgba(255,255,255,.9) 100%),rgba(255,255,255,.55);
  --glass-line:rgba(16,37,61,.08);
  --glass-shadow:inset 0 1px 0 #FFFFFF,0 24px 48px -32px rgba(16,37,61,.25);
  color-scheme:light;
}
[data-theme="light"] body{background:radial-gradient(1400px 700px at 50% -8%,#FFFFFF,transparent 62%),var(--bg)}
[data-theme="light"] ::selection{background:#10253D;color:#FFFFFF}
[data-theme="light"] :focus-visible{outline-color:#10253D}
[data-theme="light"] .vis{background:rgba(16,37,61,.03)}
[data-theme="light"] .cmp .col.z{background:linear-gradient(160deg,rgba(16,37,61,.05),rgba(16,37,61,.015))}
[data-theme="light"] .card:hover{border-color:rgba(16,37,61,.16)}
[data-theme="light"] .btn.primary{color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.4),0 10px 24px -12px rgba(16,37,61,.45)}
[data-theme="light"] .btn.ghost,[data-theme="light"] .menu-btn,[data-theme="light"] .theme-btn{
  background:linear-gradient(180deg,#FFFFFF 0%,#EFEFF1 100%) padding-box,linear-gradient(180deg,rgba(16,37,61,.08) 0%,rgba(16,37,61,.14) 55%,rgba(16,37,61,.24) 100%) border-box;
  box-shadow:inset 0 1px 0 #FFFFFF,0 8px 20px -14px rgba(16,37,61,.35)}
[data-theme="light"] .btn.ghost:hover,[data-theme="light"] .menu-btn:hover,[data-theme="light"] .theme-btn:hover{background:linear-gradient(180deg,#FFFFFF 0%,#E7E7EA 100%) padding-box,linear-gradient(180deg,rgba(16,37,61,.14) 0%,rgba(16,37,61,.2) 55%,rgba(16,37,61,.32) 100%) border-box}
[data-theme="light"] .mbtn span.go,[data-theme="light"] .ritem.on .step-n,[data-theme="light"] .ptabs button[aria-selected="true"],[data-theme="light"] .pc .pi,[data-theme="light"] .md .ic,[data-theme="light"] .tut-n{color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
[data-theme="light"] .pc .pi{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 14px -8px rgba(16,37,61,.5)}
[data-theme="light"] .chip.ok{background:#10253D;color:#FFFFFF}
[data-theme="light"] .chip.warn{background:#E4E4E7;color:#23384F}
[data-theme="light"] .chip.bad{background:transparent;color:#10253D;box-shadow:inset 0 0 0 1px rgba(16,37,61,.55)}
[data-theme="light"] .chip.info{background:rgba(16,37,61,.07);color:#10253D}
[data-theme="light"] .chip.mut{background:rgba(16,37,61,.05);color:var(--fg-3)}
[data-theme="light"] .stamp{background:rgba(16,37,61,.06);border-color:rgba(16,37,61,.3);color:#10253D}
[data-theme="light"] .hdr{border-color:rgba(16,37,61,.08);background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 #FFFFFF,0 18px 40px -26px rgba(16,37,61,.35)}
[data-theme="light"] .hdr.scrolled{background:rgba(255,255,255,.84);border-color:rgba(16,37,61,.1)}
[data-theme="light"] .mnav{border-color:rgba(16,37,61,.08);background:rgba(255,255,255,.94)}
[data-theme="light"] .hero h1,[data-theme="light"] .sec-head h2,[data-theme="light"] .solve-h h2,[data-theme="light"] .faq-h h2,[data-theme="light"] .final-box h2{color:#3F3F46}
[data-theme="light"] .hero-bg .grid{background-image:linear-gradient(rgba(16,37,61,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(16,37,61,.06) 1px,transparent 1px)}
[data-theme="light"] .hero-bg .lt{background:radial-gradient(closest-side,#FFFFFF,rgba(255,255,255,.5) 55%,transparent)}
[data-theme="light"] .hero-bg .beam{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
[data-theme="light"] .hero-bg .stars{background-image:radial-gradient(1px 1px at 12% 22%,rgba(16,37,61,.35),transparent),radial-gradient(1px 1px at 82% 14%,rgba(16,37,61,.3),transparent),radial-gradient(1px 1px at 68% 40%,rgba(16,37,61,.25),transparent),radial-gradient(1px 1px at 28% 48%,rgba(16,37,61,.2),transparent),radial-gradient(1px 1px at 90% 58%,rgba(16,37,61,.25),transparent),radial-gradient(1px 1px at 6% 66%,rgba(16,37,61,.2),transparent);opacity:.6}
[data-theme="light"] .hero .tag em{background:rgba(16,37,61,.06);border-color:rgba(16,37,61,.12);color:#10253D}
[data-theme="light"] .hero-shot .frame{border-color:rgba(16,37,61,.1)}
[data-theme="light"] .hero-shot .frame::before{background:linear-gradient(90deg,rgba(16,37,61,0),rgba(16,37,61,.45) 24%,#10253D 50%,rgba(16,37,61,.45) 76%,rgba(16,37,61,0))}
[data-theme="light"] .hero-shot::after{background:linear-gradient(180deg,rgba(246,246,247,0) 0%,rgba(246,246,247,.55) 34%,rgba(246,246,247,.9) 62%,var(--bg) 84%)}
[data-theme="light"] #planos::before,[data-theme="light"] #planos::after{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0) 72%)}
[data-theme="light"] .pc{border-color:rgba(16,37,61,.08);background:linear-gradient(165deg,#FFFFFF 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.94) 100%);box-shadow:inset 0 1px 0 #FFFFFF,0 30px 60px -40px rgba(16,37,61,.3)}
[data-theme="light"] .pc.top{border-color:rgba(16,37,61,.18);background:radial-gradient(120% 70% at 0% 0%,rgba(16,37,61,.07),rgba(16,37,61,.015) 55%,transparent 75%),#FFFFFF}
[data-theme="light"] .pc:hover{border-color:rgba(16,37,61,.2)}
[data-theme="light"] .pc .pr{background:linear-gradient(180deg,#10253D 0%,#5A5A61 100%);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .pc .feat{border-color:rgba(16,37,61,.06);background:rgba(16,37,61,.025)}
[data-theme="light"] .pc li .ico{color:#10253D}
[data-theme="light"] .md.all{border-color:rgba(16,37,61,.18);background:radial-gradient(120% 90% at 0% 0%,rgba(16,37,61,.06),transparent 60%),var(--card)}
[data-theme="light"] .md .sv{background:rgba(16,37,61,.07);color:#10253D}
[data-theme="light"] .secrow .ic,[data-theme="light"] .end .ic,[data-theme="light"] .mi .ic,[data-theme="light"] .chn .ic,[data-theme="light"] .sec-list .ic{background:rgba(16,37,61,.05);color:#10253D;box-shadow:inset 0 1px 0 #FFFFFF}
[data-theme="light"] .final::before{background:radial-gradient(closest-side,rgba(255,255,255,.95),transparent)}
[data-theme="light"] .tut-bar{border-color:rgba(16,37,61,.08);background:linear-gradient(180deg,#FFFFFF,rgba(255,255,255,.7))}
[data-theme="light"] .tut-p i{background:rgba(16,37,61,.12)}
[data-theme="light"] .tut-p i::after{background:#10253D}
[data-theme="light"] .ctrl .act.done{background:rgba(16,37,61,.06)!important;border-color:rgba(16,37,61,.14)!important}
[data-theme="light"] .ctrl .act.done::before{background:#10253D}
[data-theme="light"] .tut-toast{border-color:rgba(16,37,61,.1);background:rgba(255,255,255,.95);box-shadow:0 18px 40px -18px rgba(16,37,61,.35),inset 0 1px 0 #FFFFFF}
[data-theme="light"] .tut-toast .ico{color:#10253D}
[data-theme="light"] .tut-cur{filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
[data-theme="light"] .tut-cur svg{fill:#10253D;stroke:#FFFFFF}
[data-theme="light"] .tut-cur::after{border-color:rgba(16,37,61,.6)}
[data-theme="light"] .tut-cam{border-color:rgba(16,37,61,.08);background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #FFFFFF}

/* botão de tema (sol/lua) no cabeçalho */
.theme-btn{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;flex:none;margin-left:-8px;color:var(--fg);border:1px solid transparent;
  background:linear-gradient(180deg,#1D3A5A 0%,#10253D 100%) padding-box,linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.14) 100%) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -14px rgba(0,0,0,.9);transition:transform .2s var(--ease)}
.theme-btn:hover{background:linear-gradient(180deg,#22405F 0%,#132B45 100%) padding-box,linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.12) 55%,rgba(255,255,255,.18) 100%) border-box}
.theme-btn:active{transform:scale(.94)}
.theme-btn .ico{grid-area:1/1;width:17px;height:17px;transition:opacity .3s,transform .45s var(--ease)}
.theme-btn .i-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
[data-theme="light"] .theme-btn .i-sun{opacity:0;transform:rotate(60deg) scale(.6)}
[data-theme="light"] .theme-btn .i-moon{opacity:1;transform:none}
@media (max-width:1080px){.hdr .menu-btn{margin-left:-10px}.theme-btn{width:42px;height:42px}}
@media (max-width:640px){.theme-btn{margin-left:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* ---------- acréscimos do ZEDAS ao arquivo do marketing (05/11/2026) ---------- */
/* As regras do lenis.css da 1.3 (public/plugins/lenis), que a 1.1.13 do protótipo não pedia. */
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
/* Sem o script (bloqueado, ou ainda não chegou depois de 4 s), nada fica escondido. */
html:not(.js) .rv{opacity:1;transform:none;filter:none}
/* O formulário de verdade: o aviso do servidor e os erros por campo. */
.final .anc{position:absolute;top:0}

/* ===================== A COR DE DESTAQUE (06/11/2026) =====================
   Pedido do Manoel: a landing passa a usar a paleta "Cool Mint" da referência do marketing
   (zedas-site.vercel.app, seletor "Cor de destaque"). O bloco abaixo é o da referência, sem o
   seletor e sem os painéis aninhados (aqui não há seção com tema próprio). A cor sai de
   config('mei.interface.paleta_do_site') no style do <html>; o valor abaixo é só a reserva.
   Contraste AA medido em 06/11/2026 (texto escuro sobre a cor ≥ 11:1; tom escuro sobre o claro ≥ 7:1). */
/* ===================== Cor de destaque var(--acc) =====================
   Preto e branco continuam a base; a cor de destaque entra só onde chama a ação ou mostra progresso:
   botão principal, status "Pago", barras, linha do passo a passo, pulsos dos canais, plano em destaque.
   No modo claro, texto e traços usam um tom escuro da cor de destaque para ter contraste no fundo claro. */
::selection,[data-theme="light"] ::selection{background:var(--acc);color:#10253D}
:focus-visible,[data-theme="light"] :focus-visible{outline-color:var(--sky)}
@keyframes ping{0%,100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.5)}50%{box-shadow:0 0 0 8px rgba(var(--acc-rgb),0)}}

/* botão principal e ações em destaque: a cor de destaque com texto preto */
.btn.primary,[data-theme="light"] .btn.primary{background:var(--acc-grad);color:var(--acc-ink);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.14),0 10px 28px -12px rgba(var(--acc-rgb),.55)}
.btn.primary:hover,[data-theme="light"] .btn.primary:hover{background:var(--acc-grad-hi)}
[data-theme="light"] .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(16,37,61,.08),0 10px 22px -12px color-mix(in srgb,var(--acc-deep) 60%,transparent)}
.mbtn span.go,.tut-n,.ptabs button[aria-selected="true"],.ritem.on .step-n,.pill.solid,.ctrl .tr.hl .act,
[data-theme="light"] .mbtn span.go,[data-theme="light"] .tut-n,[data-theme="light"] .ptabs button[aria-selected="true"],[data-theme="light"] .ritem.on .step-n,[data-theme="light"] .pill.solid,[data-theme="light"] .ctrl .tr.hl .act{
  background:var(--acc-grad);color:var(--acc-ink);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* status: "Pago" na cor de destaque; os outros seguem em cinza */
.chip.ok,[data-theme="light"] .chip.ok{background:var(--acc);color:#10253D}
.stamp{background:rgba(var(--acc-rgb),.12);border-color:rgba(var(--acc-rgb),.45);color:var(--acc)}
[data-theme="light"] .stamp{background:rgba(var(--acc-rgb),.32);border-color:color-mix(in srgb,var(--acc-deep) 45%,transparent);color:var(--acc-soft-ink)}

/* barras de progresso e marcadores */
.bar i,.cols i.hi{background:var(--acc-fill)}
.teto .bar i{background:var(--acc-fill)}
.tut-p i::after,[data-theme="light"] .tut-p i::after{background:var(--acc-fill)}
.ctrl .act.done::before,[data-theme="light"] .ctrl .act.done::before{background:var(--acc-fill)}
.tut-toast .ico,[data-theme="light"] .tut-toast .ico{color:var(--sky)}
.tut-cur::after,[data-theme="light"] .tut-cur::after{border-color:var(--sky)}

/* hero: selo DAS-MEI, ponto final do título e luz do canto com um toque da cor de destaque */
.hero .tag em,[data-theme="light"] .hero .tag em{background:var(--acc);border-color:var(--acc);color:#10253D}
.hero-bg .lt{background:radial-gradient(closest-side,rgba(var(--acc-rgb),.15),rgba(var(--acc-rgb),.035) 55%,transparent)}
[data-theme="light"] .hero-bg .lt{background:radial-gradient(closest-side,rgba(var(--acc-rgb),.32),rgba(var(--acc-rgb),.08) 55%,transparent)}
.final::before{background:radial-gradient(closest-side,rgba(var(--acc-rgb),.1),transparent)}
[data-theme="light"] .final::before{background:radial-gradient(closest-side,rgba(var(--acc-rgb),.24),transparent)}

/* planos: o cartão em destaque ganha borda e brilho na cor de destaque; os "inclui" também */
.pc.top{border-color:rgba(var(--acc-rgb),.45);background:radial-gradient(120% 70% at 0% 0%,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.03) 55%,transparent 75%),linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(22,22,24,.7)}
[data-theme="light"] .pc.top{border-color:color-mix(in srgb,var(--acc-deep) 45%,transparent);background:radial-gradient(120% 70% at 0% 0%,rgba(var(--acc-rgb),.3),rgba(var(--acc-rgb),.06) 55%,transparent 75%),#FFFFFF}
.pc.top .pi,[data-theme="light"] .pc.top .pi{background:var(--acc-grad);color:#10253D;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -8px rgba(var(--acc-rgb),.6)}
.pc li .ico,[data-theme="light"] .pc li .ico{color:var(--sky)}
.pc li.add .ico,[data-theme="light"] .pc li.add .ico{color:var(--fg-4)}
.md.all,[data-theme="light"] .md.all{border-color:var(--sky-line)}
.md.all{background:radial-gradient(120% 90% at 0% 0%,rgba(var(--acc-rgb),.12),transparent 60%),var(--card)}
[data-theme="light"] .md.all{background:radial-gradient(120% 90% at 0% 0%,rgba(var(--acc-rgb),.28),transparent 60%),var(--card)}
.md .sv,[data-theme="light"] .md .sv{background:var(--acc);color:#10253D}

/* ---------- modo claro: a cor de destaque mais clara e suave (a cor cheia brigava com o branco) ---------- */
[data-theme="light"] ::selection{background:var(--acc-soft-bg);color:#10253D}
[data-theme="light"] .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px color-mix(in srgb,var(--acc-deep) 14%,transparent),0 10px 22px -14px color-mix(in srgb,var(--acc-deep) 45%,transparent)}
[data-theme="light"] .chip.ok,[data-theme="light"] .hero .tag em,[data-theme="light"] .md .sv{background:var(--acc-soft-bg);border-color:var(--acc-soft-bg);color:var(--acc-soft-ink)}
[data-theme="light"] .pc.top .pi{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px color-mix(in srgb,var(--acc-deep) 12%,transparent),0 6px 14px -8px color-mix(in srgb,var(--acc-deep) 40%,transparent)}
[data-theme="light"] .pc.top{border-color:color-mix(in srgb,var(--acc-deep) 40%,transparent);background:radial-gradient(120% 70% at 0% 0%,rgba(var(--acc-rgb),0.266),rgba(var(--acc-rgb),0.056) 55%,transparent 75%),#FFFFFF}
[data-theme="light"] .md.all{background:radial-gradient(120% 90% at 0% 0%,rgba(var(--acc-rgb),0.238),transparent 60%),var(--card)}
[data-theme="light"] .stamp{background:color-mix(in oklab,var(--acc) 30%,#fff);border-color:color-mix(in srgb,var(--acc-deep) 40%,transparent);color:var(--acc-soft-ink)}
[data-theme="light"] .hero-bg .lt{background:radial-gradient(closest-side,rgba(var(--acc-rgb),0.315),rgba(var(--acc-rgb),0.07) 55%,transparent)}
[data-theme="light"] .final::before{background:radial-gradient(closest-side,rgba(var(--acc-rgb),0.28),transparent)}

/* ===================== Brincando com o gradiente =====================
   Luz na cor de destaque atrás do título do hero, título do hero e da chamada final em degradê diagonal que termina na cor de destaque,
   borda em degradê girando no plano em destaque e na chamada final, e brilho que corre no botão principal. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* borda em degradê que gira: plano em destaque e chamada final */
.pc.top::after,.final-box::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),rgba(var(--acc-rgb),0) 0deg,rgba(var(--acc-rgb),.95) 55deg,rgba(255,255,255,.75) 85deg,rgba(var(--acc-rgb),0) 140deg,rgba(var(--acc-rgb),0) 200deg,rgba(var(--acc-rgb),.45) 260deg,rgba(var(--acc-rgb),0) 320deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
[data-theme="light"] .pc.top::after,[data-theme="light"] .final-box::after{background:conic-gradient(from var(--ang),color-mix(in srgb,var(--acc-deep) 0%,transparent) 0deg,color-mix(in srgb,var(--acc-deep) 90%,transparent) 55deg,rgba(var(--acc-rgb),0.63) 85deg,color-mix(in srgb,var(--acc-deep) 0%,transparent) 140deg,color-mix(in srgb,var(--acc-deep) 0%,transparent) 200deg,color-mix(in srgb,var(--acc-deep) 40%,transparent) 260deg,color-mix(in srgb,var(--acc-deep) 0%,transparent) 320deg)}
@media (prefers-reduced-motion:no-preference){.pc.top::after,.final-box::after{animation:spinB 7s linear infinite}}
@keyframes spinB{to{--ang:360deg}}

/* botão principal: um brilho corre por cima ao passar o mouse */
.btn.primary{position:relative;overflow:hidden;isolation:isolate}
.btn.primary::after{content:"";position:absolute;inset:-2px;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 48%,rgba(255,255,255,.2) 56%,transparent 70%);transform:translateX(-130%)}
@media (prefers-reduced-motion:no-preference){
  .btn.primary::after{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .btn.primary:hover::after,.btn.primary:focus-visible::after{transform:translateX(130%)}
}

/* ===================== Cor de destaque escolhível =====================
   --acc e --acc-rgb definem a cor; todo o resto deriva delas (tons claros, escuros e pastel).
   O seletor de cores do cabeçalho troca essas duas variáveis. */
:root{
  --acc:#B4FEAF; --acc-rgb:180,254,175; --acc-ink:#10253D;
  --acc-hi:color-mix(in oklab,var(--acc),#fff 32%); --acc-lo:color-mix(in oklab,var(--acc),#000 12%);
  --acc-deep:color-mix(in oklab,var(--acc),#000 45%); --acc-soft-bg:color-mix(in oklab,var(--acc) 42%,#fff); --acc-soft-ink:color-mix(in oklab,var(--acc),#000 70%);
  --acc-fill:var(--acc);
  --acc-grad:linear-gradient(180deg,var(--acc-hi) 0%,var(--acc) 52%,var(--acc-lo) 100%);
  --acc-grad-hi:linear-gradient(180deg,color-mix(in oklab,var(--acc),#fff 45%) 0%,color-mix(in oklab,var(--acc),#fff 12%) 52%,color-mix(in oklab,var(--acc),#000 5%) 100%);
  --sky:var(--acc); --sky-2:var(--acc-hi); --sky-soft:rgba(var(--acc-rgb),.12); --sky-line:rgba(var(--acc-rgb),.42);
  --ok:var(--acc); --ok-bg:rgba(var(--acc-rgb),.12);
}
:root[data-theme="light"]{
  --acc-fill:color-mix(in oklab,var(--acc) 62%,#fff);
  --acc-grad:linear-gradient(180deg,color-mix(in oklab,var(--acc) 22%,#fff) 0%,color-mix(in oklab,var(--acc) 42%,#fff) 52%,color-mix(in oklab,var(--acc) 58%,#fff) 100%);
  --acc-grad-hi:linear-gradient(180deg,color-mix(in oklab,var(--acc) 15%,#fff) 0%,color-mix(in oklab,var(--acc) 33%,#fff) 52%,color-mix(in oklab,var(--acc) 50%,#fff) 100%);
  --sky:var(--acc-deep); --sky-2:color-mix(in oklab,var(--acc),#000 52%); --sky-soft:rgba(var(--acc-rgb),.26); --sky-line:color-mix(in srgb,var(--acc-deep) 45%,transparent);
  --ok:color-mix(in oklab,var(--acc),#000 58%); --ok-bg:rgba(var(--acc-rgb),.26);
}

/* ===================== Botões chapados (pedido do cliente) =====================
   A cor de destaque é sempre lisa da barra de "Emissão · início do mês": sem degradê branco,
   sem reflexo por dentro e sem o brilho que corria no hover. Botões escuros e claros também lisos. */
:root{--acc-grad:var(--acc-fill);--acc-grad-hi:color-mix(in oklab,var(--acc-fill),#fff 14%)}
:root[data-theme="light"]{--acc-grad:var(--acc-fill);--acc-grad-hi:color-mix(in oklab,var(--acc-fill),#000 7%)}
[data-theme="dark"]{--acc-grad:var(--acc);--acc-grad-hi:color-mix(in oklab,var(--acc),#fff 14%)}
.btn.primary,[data-theme="light"] .btn.primary{background:var(--acc-fill);box-shadow:none}
.btn.primary:hover,[data-theme="light"] .btn.primary:hover{background:var(--acc-grad-hi)}
.btn.primary::after{display:none}
.mbtn span.go,.tut-n,.ptabs button[aria-selected="true"],.ritem.on .step-n,.pill.solid,.ctrl .tr.hl .act,.pc.top .pi,[data-theme="light"] .mbtn span.go,[data-theme="light"] .tut-n,[data-theme="light"] .ptabs button[aria-selected="true"],[data-theme="light"] .ritem.on .step-n,[data-theme="light"] .pill.solid,[data-theme="light"] .ctrl .tr.hl .act,[data-theme="light"] .pc.top .pi{background:var(--acc-fill);box-shadow:none}
.btn.ghost,.menu-btn,.theme-btn{background:#132B45;border:1px solid rgba(255,255,255,.14);box-shadow:none}
.btn.ghost:hover,.menu-btn:hover,.theme-btn:hover{background:#232327;border-color:rgba(255,255,255,.24)}
[data-theme="light"] .btn.ghost,[data-theme="light"] .menu-btn,[data-theme="light"] .theme-btn{background:#FFFFFF;border:1px solid rgba(16,37,61,.13);box-shadow:none}
[data-theme="light"] .btn.ghost:hover,[data-theme="light"] .menu-btn:hover,[data-theme="light"] .theme-btn:hover{background:#F1F1F3;border-color:rgba(16,37,61,.22)}
/* ucs-13 (09/11/2026): a linha da faixa com duas linhas reservadas, para os botões dos planos ficarem na mesma altura */
.pc .cap{line-height:1.45;min-height:2.9em}
/* ucs-30 (09/11/2026): a luz e os feixes do fundo do herói com medidas que não dependem da altura do herói (era % dela: quando a imagem do produto chegava, eles cresciam e a página "pulava" no celular) */
.hero-bg .beam{top:-240px;height:calc(100vh + 360px)}
.hero-bg .lt{top:-180px}

/* O formulario de demonstracao (10/11/2026, teste final SIT-09): o "(opcional)" legivel e o select com a seta do desenho, nao a nativa. */
.f label small{font-size:12px;font-weight:400}
.f select{-webkit-appearance:none;appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2371717a%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}

/* O PREÇO DO PLANO DENTRO DO CARTÃO (11/11/2026): com quatro cartões lado a lado
   o "/mês" saía da borda (a 1366 e a 1440 o cartão tem uns 250 px). O tamanho
   acompanha a largura, até o de sempre; no celular, um cartão por linha, o de
   sempre do celular. */
.pgrid .pc .pr{font-size:clamp(30px,2.4vw,36px)}
@media (max-width:640px){.pgrid .pc .pr{font-size:40px}}

/* ===================== KONTRIB (12/11/2026) =====================
   A marca nova (docs/MARCA-KONTRIB.md, manual "Identidade - Kontrib.pdf"): Satoshi, o Azul Profundo
   no lugar do preto, o Verde Menta como destaque (a paleta do site, `kontrib`), a assinatura em
   Verde Kontrib (claro) ou Verde Menta (escuro) e o plano inclinado a 18 graus nos lugares de marca. */
:root{
  --display:"Satoshi","Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Satoshi","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#0A1A2B; --bg-2:#0D2033; --card:#10253D; --card-2:#132B45; --ui:#17314E; --ui-2:#1D3A5A;
  --fg:#F2F7F5; --fg-2:#D6E2DD; --fg-3:#A3B5AF; --fg-4:#9AAEA7;
  --glass-bg:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.018) 52%,rgba(255,255,255,.035) 100%),rgba(16,37,61,.55);
  --k-verde:#179868; --k-menta:#B4FEAF; --k-menta-claro:#CCEDE1; --k-azul:#10253D;
}
:root[data-theme="light"]{
  --bg:#F4F8F6; --bg-2:#EAF2EE; --card:#FFFFFF; --card-2:#F4F8F6; --ui:#ECF3F0; --ui-2:#DCE7E2;
  --line:rgba(16,37,61,.09); --line-2:rgba(16,37,61,.14); --line-3:rgba(16,37,61,.24);
  --fg:#10253D; --fg-2:#23384F; --fg-3:#3E5064; --fg-4:#4F6073;
  --glass-line:rgba(16,37,61,.09);
}
[data-theme="light"] .hero h1,[data-theme="light"] .sec-head h2,[data-theme="light"] .solve-h h2,[data-theme="light"] .faq-h h2,[data-theme="light"] .final-box h2{color:var(--fg)}
/* a assinatura: Verde Kontrib sobre o claro, Verde Menta sobre o escuro (nunca o Menta sobre o branco) */
.logo{color:var(--k-menta)}
[data-theme="light"] .logo{color:var(--k-verde)}
.logo svg{width:130px;height:18px}
.app-side .lg svg{width:86px;height:12px}
.hub svg{width:26px;height:26px}
.core svg{width:46px;height:46px}
@media (max-width:640px){.core svg{width:38px;height:38px}}
/* o plano inclinado (manual 1.10): no fundo do herói e no quadro final, discreto, subindo para a direita */
.hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(-18deg,rgba(23,152,104,.16) 0 46%,transparent calc(46% + 1px));pointer-events:none}
[data-theme="light"] .hero-bg::after{background:linear-gradient(-18deg,rgba(23,152,104,.10) 0 46%,transparent calc(46% + 1px))}
.final-box{background:linear-gradient(-18deg,rgba(23,152,104,.16) 0 18%,transparent calc(18% + 1px)),var(--glass-bg);border-radius:20px}