/* NexaLab · landing. Valores 1:1 com o design (Main.dc.html). */

/* Fonte de reserva com a largura e a altura da Sora em cada peso (medidas contra Arial),
   para o texto não quebrar linha diferente quando a fonte chega (CLS). */
@font-face{font-family:"Sora Fallback";font-weight:400;src:local("Arial"),local("ArialMT");size-adjust:112.56%;ascent-override:86.18%;descent-override:25.76%;line-gap-override:0%}
@font-face{font-family:"Sora Fallback";font-weight:500;src:local("Arial"),local("ArialMT");size-adjust:113.28%;ascent-override:85.63%;descent-override:25.6%;line-gap-override:0%}
@font-face{font-family:"Sora Fallback";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:106.31%;ascent-override:91.24%;descent-override:27.28%;line-gap-override:0%}
@font-face{font-family:"Sora Fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:106.96%;ascent-override:90.69%;descent-override:27.11%;line-gap-override:0%}
@font-face{font-family:"Geist Mono Fallback";src:local("Arial"),local("ArialMT");size-adjust:131.37%;ascent-override:76.51%;descent-override:22.46%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}

html{scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#ffffff}
.dark body{background:#0A0F0E}

.lp{
  --accent:#17b8aa;--ink:#0E1615;--mut:#55625F;--line:#E4E8E7;--soft:#F5F7F6;
  --bg:#ffffff;--surface:#ffffff;--raise:rgba(14,22,21,.08);--shc:14 22 21;
  --btn-bg:var(--ink);--btn-ink:#ffffff;--btn-hover:#2A3533;--ghost-hover:#EDF0EF;
  --tint:rgba(14,22,21,.05);--tint-2:rgba(14,22,21,.06);--glass:rgba(255,255,255,.72);--glass-line:rgba(14,22,21,.08);
  --win:#F4F6F5;--win-dot:#DDE2E0;--dot:#CFD6D4;--sheet-3:#EEF1F0;--sheet-2:#F6F8F7;--ln:#E9EDEC;--no:#B7C0BE;
  --okb:#E6F6EC;--oki:#1F6F45;--badb:#FDECEE;--badi:#A3283B;
  --ai:color-mix(in srgb,var(--accent) 60%,#04211f);
  --a2:color-mix(in srgb,var(--accent) 14%,#ffffff);
  --a1:color-mix(in srgb,var(--accent) 6%,#ffffff);
  --al:color-mix(in srgb,var(--accent) 62%,#ffffff);
  --sec:color-mix(in srgb,var(--accent) 20%,#060909);
  --sans:Sora,"Sora Fallback",Inter,system-ui,sans-serif;
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace;
  position:relative;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:clip
}
/* Tema escuro da página inteira: o Claro/Escuro da personalização liga .dark no <html>. */
.dark .lp{
  color-scheme:dark;
  --ink:#E9EFED;--mut:#9AA8A5;--line:#1F2A28;--soft:#0E1513;--bg:#0A0F0E;--surface:#111816;--raise:rgba(255,255,255,.08);--shc:0 0 0;
  --ai:color-mix(in srgb,var(--accent) 70%,#ffffff);
  --a2:color-mix(in srgb,var(--accent) 24%,#111816);
  --a1:color-mix(in srgb,var(--accent) 10%,#111816);
  --btn-bg:#E9EFED;--btn-ink:#0A0F0E;--btn-hover:#ffffff;--ghost-hover:#18211F;
  --tint:rgba(255,255,255,.06);--tint-2:rgba(255,255,255,.08);--glass:rgba(17,24,22,.72);--glass-line:rgba(255,255,255,.08);
  --win:#151D1B;--win-dot:#2A3533;--dot:#26302E;--sheet-3:#1A2321;--sheet-2:#161F1D;--ln:#25302E;--no:#4A5654;
  --okb:rgba(52,168,107,.16);--oki:#7fd6a6;--badb:rgba(214,80,96,.16);--badi:#f1929e
}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
:where(.lp) a{text-decoration:none;color:inherit}
:where(.lp) :where(h1,h2,h3,p){margin:0}
:where(.lp) button{font:inherit}
.lp :focus-visible{outline:2px solid var(--ai);outline-offset:3px}
.lp ::selection{background:var(--a2)}
.lp [tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1240px;margin:0 auto}

/* Textos recorrentes */
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--ai);letter-spacing:.08em;text-transform:uppercase}
.h2{margin-top:18px;font-size:clamp(36px,4.8vw,66px);line-height:1;letter-spacing:-0.048em;font-weight:600}
.sec-head{max-width:760px}
.hl{color:var(--ai)}

/* Botões */
.btn{display:inline-flex;align-items:center;border-radius:999px;font-weight:500;white-space:nowrap}
.btn-ink{background:var(--btn-bg);color:var(--btn-ink);transition:background .2s ease}
@media (hover:hover){.btn-ink:hover{background:var(--btn-hover)}}
.btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:background .2s ease}
@media (hover:hover){.btn-ghost:hover{background:var(--ghost-hover)}}
.btn-light{background:#ffffff;color:#0B1211}
@media (hover:hover){.btn-light:hover{background:#E9EEEC}}
.btn-text{color:var(--ink);transition:background .2s ease}
@media (hover:hover){.btn-text:hover{background:var(--tint)}}
.btn-44{height:44px;padding:0 18px;font-size:14px;gap:8px}
.btn-52{height:52px;padding:0 24px;font-size:16px;gap:10px}
.btn-52.btn-ghost{padding:0 22px}
.btn-54{height:54px;padding:0 26px;font-size:16px;gap:10px}

/* Header */
.nav{position:sticky;top:0;z-index:50;padding:12px 16px;pointer-events:none}
.nav-in{pointer-events:auto;margin:0 auto;display:flex;align-items:center;gap:24px;max-width:1240px;height:60px;padding:0 8px 0 16px;border-radius:999px;border:1px solid transparent;background:rgba(255,255,255,0);box-shadow:0 0 0 rgba(14,22,21,0);transition:max-width .7s cubic-bezier(.16,.8,.24,1),height .5s ease,background .4s ease,border-color .4s ease,box-shadow .4s ease}
.nav.on .nav-in{max-width:960px;height:56px;background:var(--glass);border-color:var(--glass-line);box-shadow:0 12px 40px -18px rgb(var(--shc) / .32);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand img{display:block;width:28px;height:28px;border-radius:8px}
.brand span{font-weight:600;font-size:17px;letter-spacing:-0.03em}
.navlinks{display:flex;gap:2px;margin:0 auto}
.nav-act{display:flex;gap:4px;align-items:center;margin-left:auto}
.navlink{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;font-size:14px;color:var(--mut);background:transparent;transition:color .2s ease,background .25s ease}
.navlink[aria-current="true"]{color:var(--ink);background:var(--tint-2)}
@media (hover:hover){.navlink:hover{color:var(--ink);background:var(--tint)}}

/* Hero */
.hero{position:relative;padding:64px 24px 0}
.hero-head{max-width:1240px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(46px,6.6vw,92px);line-height:.96;letter-spacing:-0.052em;font-weight:600}
.hero h1 .hl{display:block}
/* A Sora é mais larga: no celular o título acompanha a largura para "Seu laboratório," caber numa linha. */
@media (max-width:480px){.hero h1{font-size:11.4vw}}
/* Segunda linha do título: frases que se alternam no mesmo lugar (altura de uma linha, sem
   mexer no layout). A que sai sobe e some; a próxima entra de baixo. O recorte esconde a
   passagem por cima da primeira linha. */
.rot{position:relative;height:.96em;clip-path:inset(-.06em -50vw -.4em -50vw)}
.rot-w{position:absolute;left:0;right:0;top:0;white-space:nowrap;opacity:0;transform:translate3d(0,.5em,0);filter:blur(6px);transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .7s cubic-bezier(.16,.8,.24,1),filter .7s ease}
.rot-w.is-on{opacity:1;transform:none;filter:none}
.rot-w.is-out{opacity:0;transform:translate3d(0,-.5em,0);filter:blur(6px)}
.rot-w.is-reset{transition:none}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:40px}
.hero-stage{position:relative;display:flex;justify-content:center;margin:0 -24px;padding:24px 24px 120px}
.dots{position:absolute;inset:0;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 46%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 72% 62% at 50% 46%,#000 25%,transparent 75%)}
/* Brilho de fundo do hero, só na cor escolhida: uma mancha grande atrás das telas e duas
   laterais. Só gradientes radiais, sem filtro; flutuam devagar. A base esmaece para o fundo
   por uma camada estática por cima (::after), e não por mask-image: máscara sobre camadas
   animadas obriga o Chrome sem aceleração de GPU a recompor tudo a cada quadro (~30 qps). */
.glow{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(transparent,var(--bg))}
.glow span{position:absolute;border-radius:50%}
.glow span:nth-child(1){left:-5%;right:-5%;top:16%;height:76%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,var(--accent) 16%,transparent) 55%,transparent);animation:glowA 18s ease-in-out infinite alternate}
.glow span:nth-child(2){left:-14%;top:12%;width:62%;height:70%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);animation:glowB 22s ease-in-out infinite alternate}
.glow span:nth-child(3){right:-14%;top:8%;width:62%;height:70%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,transparent),transparent);animation:glowC 20s ease-in-out infinite alternate}
@keyframes glowA{to{transform:translate3d(0,-4%,0) scale(1.06)}}
@keyframes glowB{to{transform:translate3d(9%,-6%,0) scale(1.1)}}
@keyframes glowC{to{transform:translate3d(-9%,5%,0) scale(1.08)}}
.stage{position:relative;flex:none;width:1200px;height:800px}
.dev-browser{position:absolute;left:50%;top:0;width:960px;z-index:1}
/* O tablet vai até 32px mais para a esquerda só quando sobra tela ao lado do palco (a partir de ~1360px). */
.dev-tablet{position:absolute;left:clamp(-48px,calc(631px - 50vw),-16px);top:330px;width:540px;z-index:2}
.dev-phone{position:absolute;right:36px;top:222px;width:262px;z-index:3}
.f-browser{border-radius:14px;background:var(--surface);overflow:hidden;box-shadow:0 0 0 1px var(--raise),0 40px 90px -30px rgb(var(--shc) / .34)}
.f-tablet{padding:14px;border-radius:30px;background:#121918;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 1.5px var(--edge),0 0 0 3px var(--lip),0 50px 90px -30px rgba(14,22,21,.55)}
.f-phone{padding:10px;border-radius:46px;background:#121918;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1.5px var(--edge),0 0 0 3px var(--lip),0 50px 90px -26px rgba(14,22,21,.55)}
/* Molduras de celular e tablet: borda metálica (sombras --edge/--lip), botões laterais,
   câmera frontal no tablet e um reflexo leve sobre a tela. */
.phone,.tablet{position:relative;--edge:#46504f;--lip:#141b1a}
.phone::before,.phone::after,.tablet::after{content:"";position:absolute;border-radius:2px;background:linear-gradient(90deg,#5a6564,#262e2d)}
.phone::before{left:-5px;top:20%;width:3px;height:11%}
.phone::after{right:-5px;top:27%;width:3px;height:15%}
.tablet::after{top:-5px;right:14%;width:9%;height:3px;background:linear-gradient(#5a6564,#262e2d)}
.tablet::before{content:"";position:absolute;top:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#41525c,#0a0f12 70%);z-index:1}
.vp{position:relative}
.phone .vp::after,.tablet .vp::after,.tablet .fit::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%)}
.winbar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:var(--win);border-bottom:1px solid var(--line)}
.winbar span{width:11px;height:11px;border-radius:50%;background:var(--win-dot)}
.vp{overflow:hidden;background:var(--surface)}
.sc{transform-origin:0 0}
.sc-d{width:1280px;height:800px}
.sc-t{width:1024px;height:768px}
.sc-p{width:390px;height:844px}

/* Planilha. Caderno. WhatsApp. PDF solto. */
.strike{padding:184px 24px;background:var(--bg)}
.stk{max-width:1180px;margin:0 auto;text-align:center}
.stk-l{font-size:clamp(38px,6.2vw,96px);line-height:1.04;letter-spacing:-0.055em;font-weight:600}
.stk .aft{margin-top:28px;color:var(--ai)}

/* Do pedido ao laudo */
.mods{padding:128px 24px 160px;background:var(--soft);border-top:1px solid var(--line)}
/* Espaço entre texto e janela cresce com a tela (56px até 104px) sem forçar as colunas a quebrarem acima de 980px. */
.mods-grid{display:flex;flex-wrap:wrap;gap:56px clamp(56px,calc(7vw - 16px),104px);margin-top:80px;align-items:flex-start}
.steps{position:relative;flex:1 1 320px;min-width:0;padding:0 0 140px 56px}
.step{position:relative;min-height:380px;padding:8px 0 48px}
/* Linha do tempo: o fio liga os marcadores e enche na cor da marca com a rolagem. --fill (0 a 1),
   o topo e a altura vêm do site.js; o fio chega a cada marcador quando a tela da direita troca. */
.steps-track{position:absolute;left:15px;top:0;width:2px;height:0;border-radius:2px;background:var(--line)}
.steps-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(color-mix(in srgb,var(--accent) 35%,transparent),var(--accent));transform-origin:top;transform:scaleY(var(--fill,0))}
.step-node{position:absolute;left:-56px;top:2px;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mut);background:var(--soft);border:2px solid var(--line);transition:background .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease}
.step.done .step-node{border-color:var(--accent);background:var(--a2);color:var(--ink)}
.step.on .step-node{border-color:var(--ai);background:var(--ai);color:var(--bg);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent)}
/* Etapa inativa: só o título apaga (texto grande mantém contraste AA a 0,6; o texto pequeno não). */
.step h3{margin-top:18px;font-size:40px;line-height:1.04;letter-spacing:-0.045em;font-weight:600;opacity:.6;transition:opacity .45s ease}
.step.on h3{opacity:1}
.step-d{margin-top:14px;max-width:400px;font-size:17px;line-height:1.55;color:var(--mut)}
.sticky-col{flex:1.6 1 560px;min-width:0;position:sticky;top:96px;z-index:5}
.win{border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 0 0 1px var(--raise),0 40px 80px -36px rgb(var(--shc) / .34)}
.fit{position:relative;width:100%;aspect-ratio:1280/800;overflow:hidden}
.fit .sc{transform:scale(var(--sc,.56))}
.screens{background:var(--surface)}
.screen{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.screen.on{opacity:1}

/* Personalização */
.tint{transition:background-color .7s ease}
.perso{padding:144px 24px;background-color:var(--sec);color:#ffffff}
.perso .eyebrow{color:var(--al)}
.lead-d{margin-top:20px;max-width:520px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.7)}
.perso-grid{display:flex;flex-wrap:wrap;gap:48px;margin-top:64px;align-items:flex-start}
.controls{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:34px}
.fs{border:0;padding:0;margin:0;min-width:0}
.lbl{display:block;padding:0;margin-bottom:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66)}
label.lbl{margin-bottom:12px}
.swatches{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sw{width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);cursor:pointer;transition:box-shadow .2s ease}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--sec),0 0 0 5px #ffffff}
.own{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 6px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:14px;color:#ffffff;cursor:pointer}
.cpick{width:32px;height:32px;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.cpick::-webkit-color-swatch-wrapper{padding:0}
.cpick::-webkit-color-swatch{border:0;border-radius:50%}
.cpick::-moz-color-swatch{border:0;border-radius:50%}
.pal-note{margin-top:12px;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.66)}
.org{width:100%;height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#ffffff;padding:0 16px;font-family:var(--sans);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.area{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:rgba(255,255,255,.8);font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease,color .2s ease}
.area svg{opacity:.3}
.area[aria-pressed="true"]{border-color:#ffffff;background:#ffffff;color:#0B1211}
.area[aria-pressed="true"] svg{opacity:1}
.seg{display:inline-flex;margin:0;padding:4px;min-width:0;border-radius:999px;border:1px solid rgba(255,255,255,.2);gap:4px}
.seg button{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:rgba(255,255,255,.8);font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer}
.seg button[aria-pressed="true"]{background:#ffffff;color:#0B1211}
.seg-dev button{gap:8px;padding:0 16px 0 13px;transition:background .25s ease,color .25s ease}
.preview-col{flex:2.2 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.dev-row{display:flex;justify-content:flex-end}
.preview{min-height:600px;display:flex;align-items:center;justify-content:center}
.pv-pc{width:100%;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.32);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 100px -40px rgba(0,0,0,.8)}
.pv-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.pv-bar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.pv-tab{width:100%;max-width:660px;padding:14px;border-radius:32px;background:#080b0b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1.5px var(--edge),0 0 0 3px var(--lip),0 50px 100px -40px rgba(0,0,0,.85)}
.pv-tab .fit{aspect-ratio:1024/768;border-radius:18px}
.pv-phone{width:272px;padding:11px;border-radius:48px;background:#080b0b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1.5px var(--edge),0 0 0 3px var(--lip),0 50px 100px -36px rgba(0,0,0,.85)}
.pv-phone .vp{width:250px;height:541px;border-radius:38px;background:transparent}
.dev-in{animation:devIn .7s cubic-bezier(.16,.8,.24,1) both}
@keyframes devIn{from{opacity:0;transform:translate3d(0,18px,0) scale(.96)}to{opacity:1;transform:none}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:72px}
.tag{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:14px;color:rgba(255,255,255,.82)}

/* Recursos (bento) */
.feats{padding:144px 24px;background:var(--bg)}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:64px}
.bento>div{min-width:0}
@media (min-width:861px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}
}
.card{height:100%;display:flex;flex-direction:column;gap:22px;padding:26px;border-radius:22px;border:1px solid var(--line);background:var(--soft)}
.card-h{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
@media (hover:hover){.card-h:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgb(var(--shc) / .32)}}
.card h3{font-size:21px;letter-spacing:-0.025em;font-weight:600}
.card-d{margin-top:6px;font-size:15px;color:var(--mut)}
.vis{flex:1;display:flex;align-items:center;justify-content:center;min-height:240px;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.vis-a1{background:var(--a1)}
.vis-trace{padding:18px 24px}
.p16{padding:16px}
.mono{font-family:var(--mono)}
.trace{width:100%;max-width:580px;font-size:14px}
.trace-r{display:grid;grid-template-columns:96px 14px minmax(0,1fr);gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.trace-r:last-child{border-bottom:0}
.trace-r .mono{font-size:12px;color:var(--mut)}
.dot{width:8px;height:8px;border-radius:50%}
.b6{font-weight:600}
.mut{color:var(--mut)}
.qr-card{display:flex;gap:14px;align-items:center;padding:14px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--raise),0 14px 30px -18px rgb(var(--shc) / .4);transform:rotate(-3deg)}
.qr-box{position:relative;flex:none;display:block;width:78px;height:78px}
.qr-box svg{display:block;fill:var(--ink)}
.scan{position:absolute;left:-6px;right:-6px;top:0;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 12px 1px var(--accent);z-index:1;animation:scan 2.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes scan{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,76px,0)}}
.qr-info{font-size:12px;line-height:1.5}
.qr-info .mono{color:var(--mut)}
.badge{display:inline-flex;padding:2px 8px;border-radius:999px;font-weight:600;font-size:11px}
.badge-a{background:var(--a2);color:var(--ai)}
.badge-ok{background:var(--okb);color:var(--oki)}
.badge-bad{background:var(--badb);color:var(--badi)}
.sheets{position:relative;width:190px;height:170px}
.sheet{position:absolute;inset:0;border-radius:10px;border:1px solid var(--line)}
.sheet-3{background:var(--sheet-3);transform:translate(18px,-14px) rotate(6deg)}
.sheet-2{background:var(--sheet-2);transform:translate(9px,-7px) rotate(3deg)}
.sheet-1{background:var(--surface);box-shadow:0 16px 30px -20px rgb(var(--shc) / .45);padding:16px;display:flex;flex-direction:column;gap:8px}
.ln{height:6px;border-radius:3px;background:var(--ln)}
.tbl{width:100%;font-size:12px}
.tbl-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.tbl-r:last-child{border-bottom:0}
.tbl-h{padding:0 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mut)}
.cmdk{width:100%;max-width:260px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--raise),0 18px 34px -20px rgb(var(--shc) / .45);overflow:hidden;font-size:12px}
.cmdk-in{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line)}
.caret{width:1px;height:14px;margin-left:-6px;background:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--mut);padding:1px 5px;border:1px solid var(--line);border-radius:4px}
.cmdk-res{padding:6px}
.cmdk-r{display:flex;justify-content:space-between;gap:8px;padding:8px}
.cmdk-r.on{border-radius:7px;background:var(--a2)}
.vis-chart{flex-direction:column;justify-content:flex-end;align-items:stretch;gap:14px;padding:20px 22px}
.chart-h{display:flex;justify-content:space-between;align-items:baseline}
.chart{position:relative;display:flex;align-items:flex-end;gap:8px;height:140px;margin-top:18px;border-bottom:1px solid var(--line)}
.cbar{flex:1;border-radius:5px 5px 0 0;background:var(--a2)}
.trend{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trend polyline{fill:none;stroke:var(--ai);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tip{position:absolute;right:-4px;bottom:calc(92% + 14px);padding:4px 9px;border-radius:8px;background:var(--btn-bg);color:var(--btn-ink);font-family:var(--mono);font-size:11px;white-space:nowrap}
.vis-perm{justify-content:flex-start;padding:18px 20px;overflow:hidden}
.perm-r{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:6px;padding:10px 0;border-bottom:1px solid var(--line);text-align:center;align-items:center}
.perm-r>:first-child{text-align:left}
.perm-r:last-child{padding-bottom:0;border-bottom:0}
.perm-h{padding:0 0 10px;font-family:var(--mono);font-size:10px;color:var(--mut)}
.ck{color:var(--ai);font-weight:700}
.no{color:var(--no)}

/* Escaneou, registrou. */
.mob{padding:144px 24px;background:var(--soft);border-top:1px solid var(--line);overflow:hidden}
.mob-in{display:flex;flex-wrap:wrap;align-items:center;gap:64px}
.mob-txt{flex:1 1 380px;min-width:0}
.mob h2{margin-top:18px;font-size:clamp(40px,5.6vw,80px);line-height:.98;letter-spacing:-0.052em;font-weight:600}
.mob-d{margin-top:20px;max-width:420px;font-size:18px;line-height:1.55;color:var(--mut)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.mob-art{flex:1 1 420px;min-width:0;position:relative;height:680px;display:flex;justify-content:center}
.mob-phone{position:absolute;top:20px;width:300px}
.f-phone-l{padding:11px;border-radius:52px;background:#121918;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1.5px var(--edge),0 0 0 3px var(--lip),0 60px 100px -30px rgba(14,22,21,.55)}
.f-phone-l .vp{width:278px;height:602px;border-radius:42px}
.mob-a{position:absolute;left:0;top:150px;z-index:2}
.mob-b{position:absolute;right:0;top:470px;z-index:2}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px 12px 12px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--raise),0 20px 40px -22px rgb(var(--shc) / .45);font-size:14px;white-space:nowrap}
.toast-i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center}
.toast small{color:var(--mut);font-size:13px}

/* Perguntas frequentes */
.faq{padding:144px 24px;background:var(--bg)}
.faq-in{display:flex;flex-wrap:wrap;gap:48px}
.faq-head{flex:1 1 320px;min-width:0}
.faq h2{margin-top:18px;font-size:clamp(36px,4.2vw,56px);line-height:1;letter-spacing:-0.048em;font-weight:600}
.faq-list{flex:2 1 560px;min-width:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:19px;font-weight:500;letter-spacing:-0.02em;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{flex:none;transition:transform .3s ease}
.faq details[open] .pm{transform:rotate(45deg)}
.faq-a{padding:0 0 24px;max-width:600px;font-size:16px;line-height:1.6;color:var(--mut)}
.faq-price{padding:0 0 26px}
.faq-price .faq-a{padding:0}
.faq-ctas{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* Fechamento e rodapé */
.cta{padding:176px 24px;background-color:var(--sec);color:#ffffff;overflow:hidden}
.cta-in{max-width:1040px;margin:0 auto;text-align:center}
.cta-logo{display:inline-block;width:64px;height:64px;border-radius:16px}
.cta h2{margin-top:32px;font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-0.052em;font-weight:600}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:44px}
.cta-mail{margin-top:22px;font-size:15px;color:rgba(255,255,255,.7)}
.cta-mail a{color:#ffffff;text-decoration:underline;text-underline-offset:3px}
.foot{padding:56px 24px 40px;background-color:var(--sec);color:rgba(255,255,255,.66);border-top:1px solid rgba(255,255,255,.1)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px}
.foot .brand{color:#ffffff}
.foot .brand img{border-radius:7px}
.foot nav{display:flex;flex-wrap:wrap;gap:28px;font-size:14px}
.foot nav a{display:inline-flex;align-items:center;min-height:24px;color:rgba(255,255,255,.82)}
.foot-c{max-width:1240px;margin:40px auto 0;font-size:13px}

/* ---------- Botão fixo e painel "Personalize o seu NexaLab" ----------
   Reaproveitam os controles da seção Personalização (.sw, .own, .org, .area, .seg), com as cores
   trocadas para o fundo do painel, que segue o tema da página. */
.cz-fab{position:fixed;right:24px;bottom:24px;z-index:60;width:58px;height:58px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);color:var(--btn-ink);cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent),0 16px 34px -12px rgb(var(--shc) / .5);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
@media (hover:hover){.cz-fab:hover{transform:scale(1.07);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 55%,transparent),0 18px 38px -12px rgb(var(--shc) / .55)}}
.cz-fab svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.cz-fab[aria-expanded="true"] svg{transform:rotate(-40deg)}
.cz{position:fixed;inset:auto 24px 96px auto;z-index:70;margin:0;width:360px;max-width:calc(100vw - 32px);max-height:calc(100vh - 128px);overflow:auto;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);font-family:var(--sans);box-shadow:0 30px 80px -24px rgb(var(--shc) / .5);transform-origin:bottom right}
.cz[open]{display:flex;flex-direction:column;gap:22px;animation:czIn .4s cubic-bezier(.16,.8,.24,1)}
@keyframes czIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.96)}}
.cz-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cz-title{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-0.03em}
.cz-x{flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--mut);cursor:pointer;transition:background .2s ease,color .2s ease}
@media (hover:hover){.cz-x:hover{background:var(--tint);color:var(--ink)}}
.cz .lbl,.cz label.lbl{margin-bottom:10px;color:var(--mut)}
.cz .swatches{gap:10px}
.cz .sw{width:36px;height:36px;box-shadow:inset 0 0 0 1px rgb(var(--shc) / .12)}
.cz .sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.cz .own{height:36px;padding:0 12px 0 4px;border-color:var(--line);color:var(--ink);font-size:13px}
.cz .cpick{width:28px;height:28px}
.cz .pal-note{margin-top:8px;font-size:12px;color:var(--mut)}
.cz .org{height:44px;border-color:var(--line);background:var(--soft);color:var(--ink);font-size:16px}
.cz .area{height:38px;padding:0 14px 0 10px;border-color:var(--line);color:var(--ink);font-size:13px}
.cz .area[aria-pressed="true"]{border-color:var(--btn-bg);background:var(--btn-bg);color:var(--btn-ink)}
.cz .seg{border-color:var(--line)}
.cz .seg button{height:34px;padding:0 16px;color:var(--mut);font-size:13px}
.cz .seg button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-ink)}
@media (max-width:520px){
  .cz-fab{right:16px;bottom:16px;width:54px;height:54px}
  .cz{inset:auto 12px 82px 12px;width:auto;max-width:none}
}

/* ---------- Movimento ---------- */
/* .motion fica no <html> quando o visitante não pede movimento reduzido. --p (0 a 1) vem do
   site.js, por seção; sem ela, os valores padrão são o estado final de cada efeito. */
.px-head{transform:translate3d(0,calc(var(--p,0) * 160px),0);opacity:calc(1 - var(--p,0) * 1.5)}
.px-browser{transform:translate3d(-50%,calc(var(--p,0) * -110px),0) scale(calc(1 + var(--p,0) * .06))}
.px-tablet{transform:translate3d(calc(var(--p,0) * -70px),calc(var(--p,0) * -300px),0) rotate(calc(-7deg + var(--p,0) * 6deg))}
.px-phone{transform:translate3d(calc(var(--p,0) * 50px),calc(var(--p,0) * -440px),0) rotate(calc(6deg - var(--p,0) * 5deg))}
.pxm-phone{transform:translate3d(0,calc((.5 - var(--p,.5)) * 220px),0) rotate(calc((.5 - var(--p,.5)) * -6deg))}
.pxm-a{transform:translate3d(0,calc((.5 - var(--p,.5)) * 460px),0)}
.pxm-b{transform:translate3d(0,calc((.5 - var(--p,.5)) * 360px),0)}
.px-cta{transform:translate3d(0,calc((.5 - var(--p,.5)) * 140px),0)}
.motion .px-head,.motion .px-browser,.motion .px-tablet,.motion .px-phone,.motion .pxm-phone,.motion .pxm-a,.motion .pxm-b,.motion .px-cta{will-change:transform}

/* --k0 (início) e --ks (velocidade) do riscado; no celular a seção tem uma tela de altura e usa outros valores. */
.stk .sk{position:relative;display:inline-block;--k:clamp(0,calc((var(--p,1) - var(--k0,.22)) * var(--ks,18) - var(--i,0)),1);opacity:calc(1 - var(--k) * .66)}
.stk .bar{position:absolute;left:-3%;right:-3%;top:54%;height:.075em;border-radius:.04em;background:var(--accent);transform:scaleX(var(--k));transform-origin:left center}
.stk [data-i="1"]{--i:1}.stk [data-i="2"]{--i:2}.stk [data-i="3"]{--i:3}
.stk .aft{--k2:clamp(0,calc((var(--p,1) - var(--k0,.22)) * var(--ks,18) - 4),1);opacity:var(--k2);transform:translate3d(0,calc((1 - var(--k2)) * 28px),0)}

.lp [data-reveal]{transition:opacity 1s cubic-bezier(.16,.8,.24,1),transform 1s cubic-bezier(.16,.8,.24,1)}
.lp [data-d="1"]{transition-delay:90ms}.lp [data-d="2"]{transition-delay:180ms}.lp [data-d="3"]{transition-delay:270ms}
.motion [data-reveal]:not([data-in]){opacity:0;transform:translate3d(0,40px,0)}
.motion .in-up{animation:inUp 1.3s cubic-bezier(.16,.8,.24,1) both}
.motion .in-up[data-d="2"]{animation-delay:.16s}.motion .in-up[data-d="4"]{animation-delay:.32s}
@keyframes inUp{from{opacity:0;transform:translate3d(0,90px,0) scale(.97)}to{opacity:1;transform:none}}

/* Recursos: o card entra com desfoque e os elementos de dentro animam em sequência (--s). */
.lp [data-s="1"]{--s:1}.lp [data-s="2"]{--s:2}.lp [data-s="3"]{--s:3}.lp [data-s="4"]{--s:4}.lp [data-s="5"]{--s:5}.lp [data-s="6"]{--s:6}.lp [data-s="7"]{--s:7}.lp [data-s="8"]{--s:8}.lp [data-s="9"]{--s:9}
.bento [data-reveal]{transition-property:opacity,transform,filter;transition-duration:1s,1s,1s;transition-timing-function:cubic-bezier(.16,.8,.24,1),cubic-bezier(.16,.8,.24,1),ease}
.motion .bento [data-reveal]:not([data-in]){filter:blur(10px);transform:translate3d(0,48px,0) scale(.97)}
.fx-up,.fx-pop,.fx-bar,.fx-grow,.fx-fan,.fx-drop{transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform 1s cubic-bezier(.16,.8,.24,1);transition-delay:calc(var(--s,0) * 90ms + 240ms)}
.fx-pop{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.fx-bar{transform-origin:50% 100%;transition-duration:.7s,1.1s;transition-timing-function:ease,cubic-bezier(.34,1.3,.5,1)}
.fx-grow{transform-origin:0 50%}
.motion [data-reveal]:not([data-in]) .fx-up{opacity:0;transform:translate3d(0,16px,0)}
.motion [data-reveal]:not([data-in]) .fx-pop{opacity:0;transform:scale(.3)}
.motion [data-reveal]:not([data-in]) .fx-bar{transform:scaleY(0)}
.motion [data-reveal]:not([data-in]) .fx-grow{transform:scaleX(0)}
.motion [data-reveal]:not([data-in]) .fx-fan{transform:none !important}
.motion [data-reveal]:not([data-in]) .fx-drop{opacity:0;transform:translate3d(0,-48px,0) rotate(-16deg) !important}
.fx-wipe{clip-path:inset(-12px 0 -12px 0);transition:clip-path 1.8s cubic-bezier(.6,0,.2,1) 1.1s}
.motion [data-reveal]:not([data-in]) .fx-wipe{clip-path:inset(-12px 100% -12px 0)}
.fx-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:5.4em;transition:max-width 1.1s steps(8,end) .6s}
.motion [data-reveal]:not([data-in]) .fx-type{max-width:0}
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(1.5)}}

/* ---------- Telas do sistema (mockups) ----------
   Mesmo motor de tema do sistema: tudo deriva de --accent por color-mix. */
.mk{
  --m-t:#ffffff;--m-bg:color-mix(in srgb,var(--accent) 4%,#ffffff);--m-top:rgba(255,255,255,.86);
  --m-soft:color-mix(in srgb,var(--accent) 4%,#ffffff);--m-field:#ffffff;--m-ink:#10201f;--m-mut:#64736f;
  --m-l1:color-mix(in srgb,var(--accent) 15%,#ffffff);--m-b1:color-mix(in srgb,var(--accent) 6%,#ffffff);--m-b2:color-mix(in srgb,var(--accent) 14%,#ffffff);
  --m-b5:color-mix(in srgb,var(--accent) 66%,#ffffff);--m-b7:color-mix(in srgb,var(--accent) 72%,#04211f);--m-b8:color-mix(in srgb,var(--accent) 24%,#041312);
  --m-w42:color-mix(in srgb,var(--accent) 42%,#ffffff);--m-a12:color-mix(in srgb,var(--accent) 12%,transparent);--m-a18:color-mix(in srgb,var(--accent) 18%,transparent);
  --m-btn:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 72%,#04211f) 100%);
  --m-btnsh:0 10px 22px color-mix(in srgb,var(--accent) 22%,transparent);
  --m-sh:0 10px 35px rgba(18,34,49,.05);
  --m-hero:linear-gradient(145deg,#0c1825 0%,#112839 68%,color-mix(in srgb,var(--accent) 24%,#041312) 100%);
  --a-bg:var(--m-b2);--a-ink:var(--m-b7);--a-dot:var(--accent);
  --ok-bg:#e6f6ec;--ok-ink:#1f6f45;--ok-dot:#2e9a64;
  --warn-bg:#fdf2df;--warn-ink:#8a5a0c;--warn-dot:#d39a2c;
  --bad-bg:#fdecee;--bad-ink:#a3283b;--bad-dot:#d65060;
  --gray-bg:#eef2f3;--gray-ink:#56656f;--gray-dot:#9aa7a5;
  overflow:hidden;font-family:Inter,"Inter Fallback",system-ui,sans-serif;font-size:13px;line-height:1.45;letter-spacing:-0.005em;color:var(--m-ink);background:var(--m-bg);-webkit-font-smoothing:antialiased
}
.mk-desk{display:flex}
.mk-phone{position:relative;display:flex;flex-direction:column;width:390px;height:844px;font-size:14px;--m-sh:0 10px 30px rgba(18,34,49,.05);--m-btnsh:0 12px 24px color-mix(in srgb,var(--accent) 24%,transparent)}
.dark .mk{
  --m-t:#182225;--m-bg:#10181a;--m-top:rgba(24,34,37,.92);--m-soft:#1d2a2d;--m-field:#121c1e;--m-ink:#e6eeec;--m-mut:#93a4a1;
  --m-l1:color-mix(in srgb,var(--accent) 20%,#182225);--m-b1:color-mix(in srgb,var(--accent) 12%,#182225);--m-b2:color-mix(in srgb,var(--accent) 24%,#182225);
  --m-b7:color-mix(in srgb,var(--accent) 62%,#ffffff);--m-sh:0 1px 0 rgba(0,0,0,.25);
  --ok-bg:rgba(52,168,107,.16);--ok-ink:#7fd6a6;
  --warn-bg:rgba(214,150,40,.16);--warn-ink:#e7b765;
  --bad-bg:rgba(214,80,96,.16);--bad-ink:#f1929e;
  --gray-bg:rgba(255,255,255,.07);--gray-ink:#a8b6b4;--gray-dot:#8d9a98
}
.lp.off-comercial .mk [data-area="comercial"],.lp.off-laboratorio .mk [data-area="laboratorio"],
.lp.off-producao .mk [data-area="producao"],.lp.off-qualidade .mk [data-area="qualidade"]{display:none}

/* ---------- Responsivo ---------- */
@media (max-width:1240px){.stage{zoom:.84}}
@media (max-width:1040px){.stage{zoom:.68}}
/* Até 980px não há janela fixa: cada etapa mostra a própria tela embaixo do texto, ao longo do fio. */
.step-shot{display:none}
@media (max-width:980px){
  .sticky-col{display:none}
  .steps{padding-bottom:0}
  .step{min-height:0;padding-bottom:56px}
  .step-shot{display:block;margin-top:22px}
  .step-shot .win{border-radius:12px}
  .step-shot .winbar{height:24px;padding:0 10px;gap:5px}
  .step-shot .winbar span{width:7px;height:7px}
  /* Personalização empilhada: a prévia vem antes dos controles (dá para ver a tela mudar) e só
     ocupa a altura do aparelho escolhido. */
  .preview-col{order:-1}
  .preview{min-height:0}
}
/* Marca, links de seção, Entrar e Agendar demo precisam de ~928px lado a lado; abaixo disso os links saem. */
@media (max-width:959px){.navlinks{display:none}}
/* Cabeçalho no celular: respiros menores para Entrar e Agendar demo caberem ao lado da marca. */
@media (max-width:520px){
  .nav-in{gap:12px;padding:0 6px 0 12px}
  .nav-act{gap:2px}
  .nav-act .btn-44{padding:0 14px}
  .nav-act .btn-text{padding:0 12px}
}
/* Quando o nome da marca não cabe (tela estreita ou fonte do aparelho ampliada), ele quebra para
   uma segunda linha escondida e fica só o símbolo; o nome continua no link para leitores de tela. */
.nav .brand{flex:0 1 auto;min-width:28px;height:28px;flex-wrap:wrap;overflow:hidden}
.nav .brand span{line-height:28px}
/* No celular, "Planilha. Caderno…" ganha uma tela só dela, com o texto no meio; a frase acompanha
   a largura para caber em duas linhas ("Planilha. Caderno." / "WhatsApp. PDF solto."). */
@media (max-width:760px){
  .stage{zoom:.5}
  .hero-stage{padding-bottom:56px}
  .strike{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:64px 24px}
  .stk{width:100%;--k0:.4;--ks:40}
  .stk-l{font-size:8vw}
  .stk .aft{margin-top:18px}

  /* Respiros do celular: as seções usam ~88px em vez dos 144–184px do desktop. */
  .mods{padding:88px 24px 32px}
  .mods-grid{margin-top:48px}
  .perso,.feats,.mob,.faq{padding-top:88px;padding-bottom:88px}
  .cta{padding:104px 24px}
  .perso-grid{margin-top:40px;gap:36px}
  .controls{gap:28px}
  .tags{margin-top:40px}
  .bento{margin-top:40px;gap:12px}
  .mob-in{gap:40px}
  .faq-in{gap:28px}
  .step h3{font-size:34px}

  /* Seletor de aparelho na largura toda, sem ícones, para os três caberem. */
  .dev-row{display:block}
  .seg-dev{display:flex;width:100%}
  .seg-dev button{flex:1;justify-content:center;gap:0;padding:0 6px;font-size:13px}
  .seg-dev button svg{display:none}

  /* Cards de recursos mais compactos. */
  .card{padding:18px;gap:18px;border-radius:18px}
  .vis{min-height:200px;padding:14px}
  .vis-trace{padding:14px 16px}
  .vis-perm{padding:14px 12px}
  /* Rastreabilidade: a hora vai em cima do texto, em vez de ocupar uma coluna. */
  .trace{font-size:13px}
  .trace-r{grid-template-columns:14px minmax(0,1fr);grid-template-areas:". t" "d x";column-gap:8px;row-gap:2px;align-items:start;padding:10px 0}
  .trace-r>:nth-child(1){grid-area:t}
  .trace-r>:nth-child(2){grid-area:d;margin-top:7px}
  .trace-r>:nth-child(3){grid-area:x}
  /* Permissões: títulos das colunas menores para não se encostarem. */
  .perm-r{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:4px}
  .perm-h{font-size:9px;letter-spacing:-0.02em}

  /* Rodapé: links com área de toque de 44px e espaço no fim para o botão fixo não cobrir nada. */
  .foot{padding-bottom:96px}
  .foot nav{gap:0 24px}
  .foot nav a{min-height:44px}
  .cz{max-height:calc(100dvh - 110px)}
}

/* Celular deitado: só ~400px de altura, então os respiros verticais seguem os do celular em pé. */
@media (orientation:landscape) and (max-height:500px){
  .strike{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:64px;padding-bottom:64px}
  .stk{width:100%;--k0:.4;--ks:40}
  .mods{padding-top:88px;padding-bottom:32px}
  .perso,.feats,.mob,.faq{padding-top:88px;padding-bottom:88px}
  .cta{padding-top:104px;padding-bottom:104px}
}
@media (max-width:520px){.stage{zoom:.3}}

@media (prefers-reduced-motion:reduce){
  .dev-in,.scan,.caret,.pulse::after,.glow span,.cz[open]{animation:none}
  .cz-fab,.cz-fab svg,.cz-x{transition:none}
  .nav-in,.step h3,.step-node,.screen,.tint,.rot-w,.card-h,.navlink,.sw,.area,.seg-dev button,.faq .pm{transition:none}
}