/* ============================================================
       ZENTHOR — design system (dark canvas · surface ladder · one accent)
       ============================================================ */
    :root{
      --canvas:#0a0b0d;
      --surface-1:#101214;
      --surface-2:#15181b;
      --surface-3:#1a1e21;
      --hairline:#22262b;
      --hairline-strong:#2e343a;
      --ink:#f4f6f7;
      --ink-muted:#c9ced4;
      --ink-subtle:#8b929a;
      --ink-tertiary:#5e646b;
      --accent:#3ddac9;
      --accent-dim:#2ba99c;
      --accent-ink:#062521;
      --wa:#25d366;
      --danger:#e5645d;
      --warn:#e0a94f;
      --ok:#4fc06c;
      --font-sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
      --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
      --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
      --w-max:1200px;
      /* moldura da página — mesma superfície da barra de navegação */
      --secondary:#232830;
      --secondary-ink:var(--ink);
      --frame-w:12px;
      --frame-r:22px;
      /* barra recolhida (só marca + CTAs) e aberta (com os links) */
      --nav-w:420px;
      --nav-w-open:760px;
    }
    @media(max-width:640px){
      :root{--frame-w:7px;--frame-r:15px}
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
    body{
      background:var(--canvas);
      color:var(--ink-muted);
      font-family:var(--font-sans);
      font-size:16px;line-height:1.55;
      letter-spacing:-0.01em;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    ::selection{background:rgba(61,218,201,.25);color:var(--ink)}
    a{color:inherit;text-decoration:none}
    ul{list-style:none}
    svg{display:block;flex:none}
    .wrap{max-width:var(--w-max);margin:0 auto;padding:0 32px}
    @media(max-width:640px){.wrap{padding:0 20px}}

    /* ---------- type scale ---------- */
    h1,h2,h3{color:var(--ink);font-weight:600;text-wrap:balance}
    .display-xl{font-size:clamp(40px,6.4vw,76px);line-height:1.04;letter-spacing:-0.038em}
    .display-lg{font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-0.03em}
    .headline{font-size:clamp(22px,2.6vw,28px);line-height:1.2;letter-spacing:-0.02em}
    .lead{font-size:18px;line-height:1.55;color:var(--ink-subtle);letter-spacing:-0.006em}
    .mono-label{
      font-family:var(--font-mono);font-size:12px;font-weight:500;
      letter-spacing:.08em;text-transform:uppercase;color:var(--ink-tertiary);
    }
    .mono-label b{color:var(--accent);font-weight:500}
    .tnum{font-variant-numeric:tabular-nums}

    /* ---------- buttons ---------- */
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      font-size:14px;font-weight:500;letter-spacing:-0.006em;
      padding:9px 16px;border-radius:var(--r-md);
      border:1px solid transparent;cursor:pointer;
      transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
      min-height:40px;
    }
    .btn:active{transform:scale(.98)}
    .btn-accent{background:var(--accent);color:var(--accent-ink);font-weight:600}
    .btn-accent:hover{background:#5ce4d5}
    .btn-ghost{background:var(--surface-1);color:var(--ink);border-color:var(--hairline)}
    .btn-ghost:hover{background:var(--surface-2);border-color:var(--hairline-strong)}
    .btn-wa{background:transparent;color:var(--ink-muted);border-color:var(--hairline)}
    .btn-wa:hover{border-color:rgba(37,211,102,.5);color:var(--wa)}
    .btn-lg{padding:12px 22px;font-size:15px;min-height:46px}

    /* ---------- moldura da página ---------- */
    /* Um retângulo fixo, recuado por --frame-w, com sombra sólida de raio
       gigante: a sombra pinta tudo que sobra até a borda da janela. Resultado:
       cantos externos retos (limite da viewport) e cantos internos
       arredondados, sem precisar de mask nem de quatro divs.               */
    .page-frame{
      position:fixed;
      inset:var(--frame-w);
      border-radius:var(--frame-r);
      box-shadow:0 0 0 100vmax var(--secondary);
      pointer-events:none;
      z-index:95;
      transition:opacity .4s ease;
    }

    /* ---------- nav ---------- */
    /* A barra não é mais uma faixa própria: é a moldura descendo. O <nav>
       vira só o posicionador, e .nav-inner é a pílula colada no topo.      */
    .nav{
      position:fixed;top:0;left:0;right:0;z-index:100;
      padding:0 calc(var(--frame-w) + 8px);
      transition:opacity .4s ease;
    }
    /* enquanto o painel da hero ainda está se abrindo, a barra fica fora do
       caminho — feito como tela cheia até o gesto de scroll terminar.
       position:fixed tira a barra do fluxo: sem isso, mesmo invisível ela
       reserva 58px no topo e cria um vão antes do palco começar a ocupar
       a tela inteira. Estado inicial só via JS (progressive enhancement):
       sem JS, ou com motion reduzido (o JS nem roda essa parte), a barra
       segue sticky e visível normalmente.                                  */
    @media (prefers-reduced-motion:no-preference){
      /* .js fica no <html>, que é ancestral do <body> — não descendente.
         A ordem certa é html.js primeiro, depois body:has(...).
         Moldura e barra nascem juntas, só quando o painel da hero termina
         de abrir: a rolagem inicial é tela cheia, sem chrome nenhum.      */
      html.js body:has([data-scroll-expand]) .nav,
      html.js body:has([data-scroll-expand]) .page-frame{
        opacity:0;pointer-events:none;
      }
    }
    /* nav agora é fixed em todas as páginas — sem sticky, não reserva altura.
       Páginas sem o palco da hero precisam do recuo de volta.              */
    body:not(:has([data-scroll-expand])){padding-top:calc(54px + var(--frame-w))}

    /* ---------- variante sem moldura ---------- */
    /* .no-frame no <body>: some a moldura e a barra vira pílula solta,
       flutuando sobre o conteúdo. Tirar a classe traz a moldura de volta. */
    .no-frame .page-frame{display:none}
    .no-frame .nav{top:14px;padding:0 20px}
    .no-frame .nav-inner{
      height:54px;
      padding:0 14px 0 22px;
      border-radius:999px;
      border:1px solid var(--hairline);
      box-shadow:0 10px 34px rgba(0,0,0,.5);
    }
    .no-frame .nav-inner::before,
    .no-frame .nav-inner::after{display:none}
    .no-frame.no-frame:not(:has([data-scroll-expand])){padding-top:82px}
    @media(max-width:640px){
      .no-frame .nav{top:10px;padding:0 12px}
    }
    /* pílula: estreita e centrada, não a largura do conteúdo */
    .nav-inner{
      position:relative;
      width:min(var(--nav-w),100%);margin:0 auto;padding:0 22px;
      height:calc(54px + var(--frame-w));display:flex;align-items:center;gap:0;
      background:var(--secondary);
      color:var(--secondary-ink);
      border-radius:0 0 var(--frame-r) var(--frame-r);
      transition:width .55s cubic-bezier(.22,.61,.36,1);
      will-change:width;
    }
    /* só onde existe mouse de verdade: no toque a barra fica sempre recolhida,
       senão o primeiro toque viraria "abrir" em vez de clicar.             */
    @media (hover:hover){
      .nav-inner:hover,
      .nav-inner:focus-within,
      .nav-inner.is-open{width:min(var(--nav-w-open),100%)}
    }
    @media (prefers-reduced-motion:reduce){
      .nav-inner{transition:none}
    }
    /* cantos côncavos ligando a faixa do topo à pílula — a junção vira uma
       curva só, como na referência, em vez de dois retângulos encostados. */
    .nav-inner::before,
    .nav-inner::after{
      content:'';position:absolute;top:var(--frame-w);
      width:16px;height:16px;pointer-events:none;
    }
    .nav-inner::before{
      right:100%;
      background:radial-gradient(circle at 0 100%,transparent 15.5px,var(--secondary) 16px);
    }
    .nav-inner::after{
      left:100%;
      background:radial-gradient(circle at 100% 100%,transparent 15.5px,var(--secondary) 16px);
    }
    .logo{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:650;letter-spacing:-0.02em;font-size:16px}
    .logo svg{color:var(--accent)}
    .logo img{height:22px;width:auto;display:block}
    /* os links vivem dentro da parte que só existe quando a barra abre:
       largura zero + opacidade zero, sem sumir do DOM (foco de teclado
       continua alcançando e o :focus-within mantém a barra aberta).       */
    .nav-links{
      display:flex;gap:22px;font-size:13.5px;color:var(--ink-subtle);
      white-space:nowrap;overflow:hidden;
      max-width:0;opacity:0;margin-left:0;
      transition:max-width .55s cubic-bezier(.22,.61,.36,1),
                 opacity .3s ease,
                 margin-left .55s cubic-bezier(.22,.61,.36,1);
    }
    @media (hover:hover){
      .nav-inner:hover .nav-links,
      .nav-inner:focus-within .nav-links,
      .nav-inner.is-open .nav-links{max-width:520px;opacity:1;margin-left:28px}
    }
    @media (prefers-reduced-motion:reduce){
      .nav-links{transition:none}
    }
    .nav-links a{transition:color .15s ease}
    .nav-links a:hover{color:var(--ink)}
    .nav-cta{margin-left:auto;display:flex;gap:8px;padding-left:20px;flex:none}
    /* tamanho e formato fixos — não podem encolher/esticar durante a
       transição de largura da pílula, senão os botões "respiram" junto
       com a animação. border-radius bem alto: pílula dentro da pílula.   */
    .nav .btn{
      padding:7px 13px;min-height:34px;font-size:13.5px;
      border-radius:999px;flex:none;white-space:nowrap;
    }
    @media(max-width:860px){
      .nav-links{display:none}
      .nav-inner{padding:0 16px;gap:14px}
      .nav-cta .btn-ghost{display:none}
    }

    /* ---------- hero ---------- */
    /* shiny text — brilho varrendo o título principal (React Bits, em CSS puro).
       O gradiente é recortado no texto e a varredura vai de 150% a -50%.      */
    .shiny{
      --shiny-base:#b5b5b5;
      --shiny-glow:#ffffff;
      --shiny-speed:2s;
      background-image:linear-gradient(120deg,
        var(--shiny-base) 42%,
        var(--shiny-glow) 50%,
        var(--shiny-base) 58%);
      background-size:200% auto;
      background-position:150% center;
    }
    @supports ((-webkit-background-clip:text) or (background-clip:text)){
      .shiny{
        -webkit-background-clip:text;background-clip:text;
        color:transparent;
        animation:shiny-sweep var(--shiny-speed) linear infinite;
      }
    }
    @keyframes shiny-sweep{
      from{background-position:150% center}
      to{background-position:-50% center}
    }
    @media (prefers-reduced-motion:reduce){
      .shiny{animation:none;background-position:50% center}
    }

    .hero-cta{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}

    /* ---------- hero estática (landings de segmento) ----------
       Só a index usa o scroll-expand abaixo; as 5 landings de segmento
       (oficina, blindadora, revenda, locadora, autoservice) ficam com a
       hero clássica: título + subtítulo + CTA em cima, painel fixo do
       produto embaixo, sem animação de scroll.                            */
    .hero{padding:96px 0 0;position:relative;overflow:hidden}
    .hero::before{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:
        linear-gradient(var(--hairline) 1px,transparent 1px),
        linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
      background-size:72px 72px;
      opacity:.28;
      -webkit-mask-image:radial-gradient(ellipse 90% 62% at 50% 0%,#000 30%,transparent 74%);
      mask-image:radial-gradient(ellipse 90% 62% at 50% 0%,#000 30%,transparent 74%);
    }
    /* foto do segmento atrás da hero: some no fundo embaixo e nas laterais,
       com uma sombra no centro pra o título ler bem por cima              */
    .hero-photo{
      position:absolute;left:0;right:0;top:0;height:min(92vh,880px);
      pointer-events:none;
      -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 100%);
      mask-image:linear-gradient(180deg,#000 35%,transparent 100%);
    }
    .hero-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.5;filter:brightness(.8) saturate(.85)}
    .hero-photo::after{
      content:"";position:absolute;inset:0;
      background:
        radial-gradient(ellipse 50% 44% at 50% 34%,rgba(10,11,13,.86),rgba(10,11,13,.4) 72%,transparent),
        linear-gradient(90deg,var(--canvas),transparent 22%,transparent 78%,var(--canvas));
    }
    .hero::before{z-index:1}
    .hero-inner,.hero .stage{z-index:2}
    .hero-inner{position:relative;text-align:center;max-width:880px;margin:0 auto;padding:0 32px}
    .hero-sub{
      font-size:clamp(16px,2vw,19px);color:var(--ink-subtle);
      max-width:620px;margin:24px auto 0;letter-spacing:-0.008em;line-height:1.6;
    }
    .stage{position:relative;max-width:1080px;margin:72px auto 0;padding:0 32px}
    @media(max-width:640px){.stage{padding:0 12px}}
    .panel{
      background:var(--surface-1);
      border:1px solid var(--hairline);
      border-top-color:var(--hairline-strong);
      border-radius:var(--r-xl) var(--r-xl) 0 0;
      border-bottom:none;
      padding:10px 10px 0;
      box-shadow:0 -1px 0 rgba(255,255,255,.04) inset,0 40px 80px -30px rgba(0,0,0,.8);
      position:relative;
    }
    .panel::after{
      content:"";position:absolute;left:-1px;right:-1px;bottom:0;height:120px;
      background:linear-gradient(transparent,var(--canvas));pointer-events:none;
    }

    /* ---------- painel que abre com a rolagem (só a index) ----------
       O trilho dá curso ao scroll; o palco fica preso na tela e o quadro
       cresce por clip-path (o mock não reflui, só é revelado).            */
    /* nada de overflow:hidden em ancestrais: isso desativa o sticky do palco.
       Track curto — "scroll mínimo" — o bastante pra dar a sensação de
       gesto sem exigir uma rolagem longa. Isso vale pras landings de
       segmento; a index (.is-hero-main) ganha um trecho extra de "espera"
       logo abaixo, só pra ela.                                             */
    .scroll-expand{
      position:relative;
      height:170vh;
    }
    /* index: abre em 70vh e depois fica presa mais 70vh antes de soltar —
       assim o usuário não passa direto pelo painel cheio sem ver.          */
    .scroll-expand.is-hero-main{
      height:240vh; /* 100vh palco + 70vh abertura + 70vh espera */
    }
    .se-stage{
      position:sticky;top:0;height:100vh;
      overflow:hidden;
    }
    .se-frame{
      position:absolute;inset:0;
      clip-path:inset(21% 29% 21% 29% round 24px);
      will-change:clip-path;
      background:var(--canvas);
    }
    .se-media{
      position:absolute;inset:0;
      transform:scale(1.35);transform-origin:center;
      will-change:transform;
    }
    .se-media .app{
      width:100%;height:100%;min-height:0;
      border:none;border-radius:0;
    }
    /* foto da index: o canvas guarda a proporção da imagem e faz o "cover"
       na mão (cq = tamanho do .se-media), pra os pontos do HUD, em % da
       foto, ficarem colados nas partes do carro em qualquer tela.         */
    .se-media{container-type:size}
    .se-canvas{
      position:absolute;left:50%;top:50%;
      width:max(100cqw, calc(100cqh * var(--ar)));
      aspect-ratio:var(--ar);
      transform:translate(-50%,-50%);
    }
    .se-canvas .se-shot{
      position:absolute;inset:0;width:100%;height:100%;
      display:block;object-fit:cover;
    }
    /* escurece atrás dos textos (título no meio, marca e CTA embaixo) sem
       apagar o carro                                                      */
    .se-scrim{
      position:absolute;inset:0;pointer-events:none;opacity:0;
      background:
        radial-gradient(ellipse 46% 22% at 50% 44%,rgba(0,0,0,.55),transparent 75%),
        linear-gradient(180deg,rgba(0,0,0,.45),transparent 26%,transparent 52%,rgba(0,0,0,.82) 92%);
    }

    /* ---------- HUD da hero: etiquetas ligadas ao carro ----------
       Linha em cotovelo (vertical + horizontal) sai de um ponto no carro e
       termina numa etiqueta de vidro. O JS da hero escreve --a (vertical),
       --b (horizontal) e --c (etiqueta) de 0 a 1 conforme a abertura.      */
    .hud{position:absolute;inset:0;pointer-events:none}
    .hud-c{position:absolute;inset:0;--a:1;--b:1;--c:1;opacity:var(--o,1)}
    .hud-v,.hud-h{position:absolute;display:block;background:var(--accent);box-shadow:0 0 8px rgba(61,218,201,.6);opacity:var(--lo,1)}
    .hud-v{width:1px;margin-left:-.5px;transform:scaleY(var(--a))}
    .hud-h{height:1px;margin-top:-.5px;transform:scaleX(var(--b))}
    .hud-dot{
      position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
      background:var(--accent);box-shadow:0 0 0 4px rgba(61,218,201,.18),0 0 14px rgba(61,218,201,.8);
      transform:scale(calc(var(--a) * 1));
    }
    .hud-dot::after{
      content:"";position:absolute;inset:-7px;border-radius:50%;
      border:1px solid rgba(61,218,201,.7);
      animation:hud-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite;
    }
    @keyframes hud-ping{0%{transform:scale(.5);opacity:1}80%,100%{transform:scale(1.9);opacity:0}}
    .hud-tag{
      position:absolute;min-width:168px;padding:10px 13px 11px;
      background:rgba(16,18,20,.72);
      -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
      border:1px solid rgba(61,218,201,.32);border-radius:10px;
      box-shadow:0 12px 32px -12px rgba(0,0,0,.9);
      display:flex;flex-direction:column;gap:4px;white-space:nowrap;
      opacity:var(--c);
    }
    .side-l .hud-tag{transform:translate(calc(-100% - 10px),-50%) translateX(calc((1 - var(--c)) * 10px))}
    .side-r .hud-tag{transform:translate(10px,-50%) translateX(calc((var(--c) - 1) * 10px))}
    .hud-tag .hk{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-subtle)}
    .hud-tag .hv{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
    .hud-tag .hv svg{color:var(--ok)}
    .hud-tag .hv b{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent)}
    .hud-tag .hbar{display:block;height:3px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin-top:3px}
    .hud-tag .hbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-dim),var(--accent))}
    /* sem JS: o HUD aparece parado; com JS e movimento, nasce apagado e o
       scroll acende (as variáveis inline do JS vencem estes valores)      */
    @media (prefers-reduced-motion:no-preference){
      html.js .hud-c{--a:0;--b:0;--c:0}
    }
    @media (prefers-reduced-motion:reduce){.hud-dot::after{animation:none;opacity:0}}

    /* ---------- conta-giros da hero (hero.mode = 'tacho') ----------
       Sem quadro abrindo: o mostrador fica inteiro na tela desde o início
       e o scroll acelera. O JS escreve o giro (ponteiro, arco, marcas) e
       --heat (0 a 1), que esquenta o brilho atrás do mostrador.           */
    .is-tacho .se-frame{
      clip-path:none;
      background:radial-gradient(ellipse 70% 60% at 50% 44%,#0f1316,var(--canvas) 70%);
    }
    .is-tacho .se-media{transform:none}
    .is-tacho .se-scrim{display:none}
    .is-tacho .se-title{font-size:clamp(24px,2.9vw,40px);line-height:1.15}
    .tacho{
      --heat:.1;
      position:absolute;left:50%;top:44%;
      /* 88% da altura, mas nunca mais que 72% da largura nem 900px: em
         janelas de desktop quase quadradas ou monitores grandes o mostrador
         passava de 1000px e engolia a tela */
      width:min(88cqh,72cqw,900px);aspect-ratio:1;
      transform:translate(-50%,-50%);
    }
    .tacho::before{ /* brilho que esquenta com o giro */
      content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none;
      background:radial-gradient(circle,rgba(61,218,201,calc(.03 + var(--heat) * .1)),transparent 66%);
    }
    .tacho.is-red::before{
      background:radial-gradient(circle,rgba(229,100,93,.12),rgba(61,218,201,.05) 45%,transparent 68%);
    }
    .tacho svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
    .tacho .bezel{fill:none;stroke:var(--hairline-strong);stroke-width:2}
    .tacho .arc-track,.tacho .arc-zone,.tacho .arc-fill,.tacho .arc-red{fill:none;stroke-width:14}
    .tacho .arc-track{stroke:#15181c}
    .tacho .arc-zone{stroke:rgba(229,100,93,.22)}
    .tacho .arc-fill{
      stroke:var(--accent);stroke-dasharray:1;
      filter:drop-shadow(0 0 10px rgba(61,218,201,.6));
    }
    .tacho .arc-red{
      stroke:var(--danger);stroke-dasharray:1;
      filter:drop-shadow(0 0 10px rgba(229,100,93,.65));
    }
    .tacho .tk{stroke:#3a4148;stroke-width:2.5;stroke-linecap:round;transition:stroke .25s ease}
    .tacho .tk.mj{stroke-width:5}
    .tacho .tk.on{stroke:var(--ink-muted)}
    .tacho .tk.red{stroke:rgba(229,100,93,.45)}
    .tacho .tk.red.on{stroke:var(--danger)}
    .tacho .num{
      font-family:var(--font-mono);font-size:40px;font-weight:500;
      fill:var(--ink-tertiary);text-anchor:middle;dominant-baseline:central;
      transition:fill .25s ease;
    }
    .tacho .num.on{fill:var(--ink)}
    .tacho .num.red{fill:rgba(229,100,93,.55)}
    .tacho .num.red.on{fill:var(--danger)}
    .tacho-needle path{fill:var(--accent)}
    .tacho-needle{filter:drop-shadow(0 0 8px rgba(61,218,201,.9))}
    .tacho.is-red .tacho-needle path{fill:#ff7d75}
    .tacho.is-red .tacho-needle{filter:drop-shadow(0 0 10px rgba(229,100,93,.9))}
    /* LEDs de troca de marcha, no alto do mostrador */
    .tacho-shift{
      position:absolute;left:50%;top:29%;transform:translateX(-50%);
      display:flex;gap:8px;
    }
    .tacho-shift i{
      width:clamp(14px,2.4cqh,22px);height:7px;border-radius:4px;
      background:#16191c;border:1px solid var(--hairline-strong);
      transition:background .15s ease,box-shadow .15s ease,border-color .15s ease;
    }
    .tacho-shift i.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(61,218,201,.8)}
    .tacho-shift i.w.on{background:var(--warn);border-color:var(--warn);box-shadow:0 0 12px rgba(224,169,79,.8)}
    .tacho-shift i.d.on{background:var(--danger);border-color:var(--danger);box-shadow:0 0 12px rgba(229,100,93,.85)}
    /* corte de giro: todos os LEDs pulsam devagar (sem piscar rápido) */
    .tacho.is-max .tacho-shift i{animation:shift-pulse 1.1s ease-in-out infinite}
    @keyframes shift-pulse{50%{opacity:.45}}
    /* mostrador digital embaixo do título */
    .tacho-read{
      position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);
      display:flex;flex-direction:column;align-items:center;gap:4px;
      opacity:calc(1 - var(--over,0) * .6);
    }
    .tacho-read b{
      font-family:var(--font-mono);font-weight:500;letter-spacing:-0.02em;
      font-size:clamp(26px,5cqh,46px);line-height:1;color:var(--ink);
      font-variant-numeric:tabular-nums;transition:color .2s ease;
    }
    .tacho-read span{
      font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
      text-transform:uppercase;color:var(--ink-subtle);
    }
    .tacho.is-red .tacho-read b{color:#ff7d75}
    @media (prefers-reduced-motion:reduce){.tacho.is-max .tacho-shift i{animation:none}}
    /* celular e tablet em pé: o título não cabe dentro do mostrador; ele
       sobe e o mostrador fica embaixo, subindo quando a marca e o CTA
       entram (--over vem do JS da hero)                                  */
    @media(max-width:760px),(max-aspect-ratio:1/1){
      .is-tacho .se-title{top:18%;font-size:clamp(24px,7vw,32px)}
      .tacho{
        top:55%;width:min(94cqw,58cqh);
        transform:translate(-50%,calc(-50% - var(--over,0) * 12cqh)) scale(calc(1 - var(--over,0) * .18));
      }
      .tacho-read{top:52%}
      .tacho-shift{top:32%}
    }
    /* primeira frase — tamanho normal do display-xl, sempre visível,
       centrada no palco do início ao fim. Não desaparece: fica como um
       título fixo sobre o painel enquanto ele abre atrás dela.            */
    .se-title{
      position:absolute;left:0;right:0;top:44%;
      transform:translateY(-50%);
      padding:0 32px;text-align:center;
      /* frase única e longa: escala menor que o display-xl padrão pra caber
         numa linha só no desktop sem virar um paredão de texto. */
      font-size:clamp(28px,4.2vw,52px);
      pointer-events:none;
      text-shadow:0 4px 40px rgba(0,0,0,.85);
    }
    /* split-text char reveal — cada palavra fica inteira numa linha (nowrap),
       cada letra é um span próprio que sobe com fade, em cascata (React
       Bits SplitText, portado pra CSS/JS puro — sem GSAP).                 */
    .split-word{display:inline-block;white-space:nowrap}
    .split-char{
      display:inline-block;
      opacity:0;transform:translateY(40px);
      transition:opacity 1.25s cubic-bezier(.165,.84,.44,1),
                 transform 1.25s cubic-bezier(.165,.84,.44,1);
      transition-delay:var(--sc-delay,0ms);
      will-change:transform,opacity;
    }
    [data-split-text].in .split-char{opacity:1;transform:translateY(0)}
    @media (prefers-reduced-motion:reduce){
      .split-char{transition:none;opacity:1;transform:none}
    }
    /* segunda frase, apoio e botões — entram embaixo, sobre o painel já
       aberto, do jeito que era antes de virar o hero.                     */
    .se-overlay{
      position:absolute;left:0;right:0;bottom:9%;
      padding:0 32px;text-align:center;
      opacity:0;transform:translateY(18px);
      pointer-events:none;
    }
    /* index: mais perto da borda inferior, pra dar respiro em relação à
       primeira frase (que fica fixa no centro).                          */
    .is-hero-main .se-overlay{bottom:9%}
    .se-lead{text-shadow:0 4px 40px rgba(0,0,0,.85)}
    .se-lead img{height:clamp(46px,6vw,72px);width:auto;display:block;margin:0 auto}
    .se-sub{
      margin:16px auto 0;max-width:560px;
      font-size:clamp(15px,1.8vw,17px);line-height:1.6;
      color:var(--ink-muted);text-shadow:0 2px 20px rgba(0,0,0,.8);
    }
    /* index: texto de apoio quebrado manualmente em duas linhas — largura
       maior pra caber cada metade numa linha só, respeitando o \n do texto. */
    .is-hero-main .se-sub{max-width:660px;white-space:pre-line}
    .se-overlay .hero-cta{margin-top:24px}
    .se-overlay .hero-cta .btn{pointer-events:auto}
    .se-hint{
      position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
      display:flex;align-items:center;gap:8px;
      font-size:13px;color:var(--ink-subtle);
      pointer-events:none;
    }
    .se-hint svg{animation:se-bob 1.8s ease-in-out infinite}
    @keyframes se-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}


    /* faixa de números das landings de segmento, logo abaixo da hero */
    .stats-band{padding:56px 0 0}

    @media(max-width:760px){
      .scroll-expand{height:150vh}
      .scroll-expand.is-hero-main{height:195vh} /* 100vh palco + 50vh abertura + 45vh espera */
      .se-frame{clip-path:inset(24% 8% 24% 8% round 18px)}
      .se-title{top:32%}
      .se-overlay{bottom:7%}
      .is-hero-main .se-overlay{bottom:3%}
    }
    /* celular e tablet em pé: a foto não cobre a tela (cortaria o carro);
       fica larga, um pouco abaixo do título, com as bordas sumindo no
       fundo preto                                                         */
    @media(max-width:760px),(max-aspect-ratio:1/1){
      .se-canvas{width:160cqw;top:57%}
      .se-canvas .se-shot{
        -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent);
        mask-image:linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent);
      }
      /* só 2 etiquetas, sem linha: ponto no carro + etiqueta ao lado */
      .hud-c:not(.mob){display:none}
      .hud-v,.hud-h{display:none}
      .hud-tag{min-width:0;padding:7px 10px 8px;left:var(--dx)!important;top:var(--dy)!important}
      .hud-tag .hk{font-size:9px}
      .hud-tag .hv{font-size:12px}
      .side-r .hud-tag{transform:translate(-62%,calc(-100% - 16px))}
      .side-l .hud-tag{transform:translate(-14%,16px)}
    }
    /* sem palco preso: painel aberto e todo o texto visível de uma vez */
    @media (prefers-reduced-motion:reduce){
      .scroll-expand{height:auto;padding:64px 0 0}
      .se-stage{position:static;height:auto;aspect-ratio:16/10}
      .se-frame{
        clip-path:none;border-radius:var(--r-xl);overflow:hidden;
        border:1px solid var(--hairline);
      }
      .se-media{transform:none}
      .se-scrim{opacity:.5}
      .se-hint{display:none}
      .se-overlay{opacity:1;transform:none;bottom:6%}
      .se-overlay .hero-cta .btn{pointer-events:auto}
    }

    /* CTA da hero no celular: leva pro conteúdo (#conheca) em vez de abrir
       o formulário. No desktop fica o botão do formulário.                */
    .hero-go{display:none}
    .hero-go svg{animation:se-bob 1.8s ease-in-out infinite}
    #conheca{scroll-margin-top:72px}

    /* ---------- hero da index no celular ----------
       Uma tela só, sem palco preso nem gesto de scroll: o título fica por
       cima do conta-giros (que acelera sozinho, assets/zenthor.js) e logo
       abaixo vêm marca, apoio e CTA. --dial é o lado do mostrador: vaza um
       pouco nas laterais pra o anel não brigar com o título, e encolhe em
       telas baixas pra o CTA nunca sair da primeira dobra.                 */
    @media(max-width:760px){
      .scroll-expand.is-hero-main{height:auto;padding:0}
      .is-hero-main .se-stage{
        --dial:min(116vw,calc(100svh - 300px));
        position:relative;height:auto;min-height:100svh;aspect-ratio:auto;
        display:grid;grid-template-columns:100%;align-content:center;
        padding:72px 0 calc(28px + env(safe-area-inset-bottom));
        background:radial-gradient(ellipse 90% 42% at 50% 40%,#0f1316,var(--canvas) 72%);
      }
      .is-hero-main .se-frame{
        grid-area:1/1;position:relative;inset:auto;height:var(--dial);
        clip-path:none;background:none;border:0;border-radius:0;overflow:visible;
      }
      .is-hero-main .tacho{top:50%;width:var(--dial);transform:translate(-50%,-50%)}
      .is-hero-main .tacho-shift{top:22%}
      .is-hero-main .tacho-read{top:73%}
      .is-hero-main .tacho-read b{font-size:clamp(22px,6vw,30px)}
      .is-hero-main .se-title{
        grid-area:1/1;align-self:center;position:relative;z-index:2;top:auto;transform:translateY(-4%);
        padding:0 20px;font-size:clamp(25px,7vw,31px);line-height:1.14;
      }
      .is-hero-main .se-overlay{
        grid-area:2/1;position:relative;opacity:1;transform:none;pointer-events:auto;
        padding:0 22px;margin-top:-2%;
      }
      .is-hero-main .se-lead img{height:38px}
      .is-hero-main .se-sub{margin-top:10px;font-size:16px}
      .is-hero-main .se-overlay .hero-cta{margin-top:18px}
      .is-hero-main .hero-lead{display:none}
      .is-hero-main .hero-go{display:inline-flex;width:100%;max-width:340px;justify-content:center;gap:8px}
      .is-hero-main .se-hint{display:none}
      html.js body:has(.is-hero-main) .nav{opacity:1;pointer-events:auto}
    }

    /* ---------- app mock ---------- */
    .app{
      display:grid;grid-template-columns:196px 1fr;
      background:var(--canvas);
      border:1px solid var(--hairline);border-bottom:none;
      border-radius:10px 10px 0 0;
      overflow:hidden;text-align:left;
      font-size:12px;min-height:520px;
    }
    @media(max-width:760px){.app{grid-template-columns:1fr}.app-side{display:none}}
    .app-side{background:var(--surface-1);border-right:1px solid var(--hairline);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
    .app-side .brand{
      font-weight:650;color:var(--ink);font-size:13px;letter-spacing:.02em;
      padding:4px 10px 12px;display:flex;align-items:center;gap:7px;
    }
    .app-side .brand svg{color:var(--accent)}
    .side-it{
      display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:6px;
      color:var(--ink-subtle);font-weight:500;
    }
    .side-it svg{color:var(--ink-tertiary)}
    .side-it.on{background:var(--surface-3);color:var(--ink)}
    .side-it.on svg{color:var(--accent)}
    .side-sub{padding:4px 10px 4px 34px;color:var(--ink-tertiary);font-size:11.5px}
    .side-sub.on{color:var(--accent)}
    .app-main{display:flex;flex-direction:column;min-width:0}
    .app-top{
      display:flex;align-items:center;gap:12px;
      padding:10px 16px;border-bottom:1px solid var(--hairline);
      color:var(--ink-tertiary);
    }
    .app-top .co{display:flex;align-items:center;gap:8px;color:var(--ink-muted);font-weight:600;font-size:11.5px;letter-spacing:.04em}
    .app-top .co i{
      width:22px;height:22px;border-radius:6px;background:var(--surface-3);
      display:flex;align-items:center;justify-content:center;
      font-style:normal;font-size:10px;font-weight:600;color:var(--accent);
    }
    .app-top .sp{flex:1}
    .app-top .av{
      width:24px;height:24px;border-radius:50%;background:var(--surface-3);
      display:flex;align-items:center;justify-content:center;
      font-size:10px;font-weight:600;color:var(--ink-muted);
    }
    .app-body{padding:16px;display:flex;flex-direction:column;gap:12px}
    .app-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
    .app-head h3{font-size:15px;font-weight:600;letter-spacing:-0.01em}
    .app-head .ph-sub{color:var(--ink-tertiary);font-size:11.5px;margin-top:2px}
    .chipbar{display:flex;gap:6px}
    .chip{
      font-family:var(--font-mono);font-size:10.5px;color:var(--ink-subtle);
      border:1px solid var(--hairline);border-radius:6px;padding:4px 9px;background:var(--surface-1);
    }
    .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    @media(max-width:920px){.kpis{grid-template-columns:repeat(2,1fr)}}
    .kpi{
      background:var(--surface-1);border:1px solid var(--hairline);border-radius:10px;
      padding:12px 14px;
    }
    .kpi .kl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;color:var(--ink-tertiary);text-transform:uppercase}
    .kpi .kv{font-size:17px;font-weight:600;color:var(--ink);margin-top:6px;letter-spacing:-0.02em}
    .kpi .kd{font-size:10.5px;color:var(--ink-tertiary);margin-top:3px}
    .kpi .up{color:var(--ok)} .kpi .down{color:var(--danger)}
    .cols2{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
    @media(max-width:920px){.cols2{grid-template-columns:1fr}}
    .box{background:var(--surface-1);border:1px solid var(--hairline);border-radius:10px;padding:14px}
    .box .bt{
      font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
      color:var(--ink-tertiary);display:flex;justify-content:space-between;margin-bottom:12px;
    }
    .box .bt b{color:var(--accent);font-weight:500}
    .pipe{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
    .pipe .st{background:var(--canvas);border:1px solid var(--hairline);border-radius:8px;padding:10px 6px;text-align:center}
    .pipe .st.hot{border-color:rgba(61,218,201,.4)}
    .pipe .n{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
    .pipe .st.hot .n{color:var(--accent)}
    .pipe .l{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;color:var(--ink-tertiary);margin-top:4px;text-transform:uppercase}
    @media(max-width:920px){.pipe{grid-template-columns:repeat(4,1fr)}.pipe .st:nth-child(n+5){display:none}}
    .rowline{
      display:flex;align-items:center;gap:10px;padding:7px 0;
      border-top:1px solid var(--hairline);font-size:11.5px;color:var(--ink-muted);
    }
    .rowline:first-of-type{border-top:none}
    .rowline .rk{
      font-family:var(--font-mono);font-size:10px;color:var(--ink-tertiary);width:16px;
    }
    .rowline .nm{flex:1;font-weight:500}
    .rowline .hrs{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-subtle);font-variant-numeric:tabular-nums}
    .tag{
      font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;padding:2px 7px;border-radius:999px;
      border:1px solid var(--hairline);color:var(--ink-subtle);text-transform:uppercase;
    }
    .tag.acc{color:var(--accent);border-color:rgba(61,218,201,.35)}
    .tag.ok{color:var(--ok);border-color:rgba(79,192,108,.35)}
    .tag.warn{color:var(--warn);border-color:rgba(224,169,79,.35)}
    .tag.dng{color:var(--danger);border-color:rgba(229,100,93,.35)}
    .bars{display:flex;align-items:flex-end;gap:14px;height:110px;padding-top:6px}
    .bars .bc{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
    .bars .bb{width:100%;border-radius:4px 4px 0 0;background:var(--surface-3)}
    .bars .bb.acc{background:linear-gradient(180deg,var(--accent),var(--accent-dim))}
    .bars .bl{font-family:var(--font-mono);font-size:9px;color:var(--ink-tertiary);text-transform:uppercase;letter-spacing:.05em}
    .bars .bv{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-subtle);font-variant-numeric:tabular-nums}

    /* ---------- trust strip ---------- */
    .trust{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--surface-1)}
    .trust-inner{
      max-width:var(--w-max);margin:0 auto;padding:0 32px;
      display:grid;grid-template-columns:1.3fr repeat(4,1fr);
    }
    @media(max-width:960px){.trust-inner{grid-template-columns:1fr 1fr;padding:0 20px}}
    .trust-cell{padding:28px 24px;border-left:1px solid var(--hairline)}
    .trust-cell:first-child{border-left:none;padding-left:0;display:flex;align-items:center}
    @media(max-width:960px){
      .trust-cell{padding:20px 16px}
      .trust-cell:first-child{grid-column:1/-1;border-bottom:1px solid var(--hairline);padding:20px 0}
      .trust-cell:nth-child(2),.trust-cell:nth-child(4){border-left:none;padding-left:0}
    }
    .trust-cell p{font-size:14px;color:var(--ink-subtle);max-width:270px;line-height:1.5}
    .trust-cell .tn{font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
    .trust-cell .tl{font-size:12.5px;color:var(--ink-tertiary);margin-top:6px}

    /* hodômetro: um rolete por algarismo, fita 0-9 ×3 que gira até --d.
       Altura da célula = 1 linha da fita (1.3em). Sem JS ou com movimento
       reduzido, já nasce no valor final.                                  */
    .odo-w{display:inline-flex;align-items:center;gap:3px;line-height:1}
    .odo-a{font-family:var(--font-mono);font-size:20px;font-weight:500;color:var(--ink-subtle);margin:0 2px}
    .odo-d{
      --h:1.3em;
      position:relative;display:inline-block;overflow:hidden;
      width:1.02em;height:var(--h);
      font-family:var(--font-mono);font-size:21px;font-weight:500;letter-spacing:0;
      text-align:center;color:var(--ink);
      background:linear-gradient(180deg,#050607,#181b1f 48%,#181b1f 52%,#050607);
      border:1px solid var(--hairline-strong);border-radius:4px;
    }
    /* sombra de rolete: o algarismo some pra cima e pra baixo */
    .odo-d::after{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(180deg,rgba(0,0,0,.75),transparent 34%,transparent 66%,rgba(0,0,0,.75));
    }
    .odo-d.last{color:var(--accent);border-color:rgba(61,218,201,.35)}
    .odo-s{
      display:block;line-height:var(--h);
      transform:translateY(calc(var(--d) * var(--h) * -1));
    }
    @media (prefers-reduced-motion:no-preference){
      html.js .odo-s{
        transform:translateY(0);
        transition:transform calc(1.5s + var(--k) * .25s) cubic-bezier(.25,.75,.2,1) calc(var(--k) * .08s);
      }
      html.js .odo.in .odo-s{transform:translateY(calc(var(--d) * var(--h) * -1))}
    }
    .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;
    }

    /* ---------- sections ---------- */
    .section{padding:112px 0}
    .section.tight{padding-top:96px}
    .sec-head{max-width:640px;margin-bottom:56px}
    .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
    .sec-head .mono-label{display:block;margin-bottom:18px}
    .sec-head p{margin-top:18px;color:var(--ink-subtle);font-size:17px;line-height:1.6}
    .hr{border:none;border-top:1px solid var(--hairline)}

    /* ---------- modules: serpentine flow ---------- */
    .mods-flow{position:relative;max-width:960px;margin:0 auto}
    .mods-svg{
      position:absolute;inset:0;width:100%;height:100%;
      pointer-events:none;z-index:0;overflow:visible;
    }
    /* a serpentina é uma estrada: asfalto, faixa tracejada no meio e o
       rastro de luz teal por onde o carrinho já passou                    */
    .mods-svg .road{
      fill:none;stroke:#121518;stroke-width:26;stroke-linecap:round;stroke-linejoin:round;
    }
    .mods-svg .wire{
      fill:none;stroke:#3a4148;stroke-width:1.5;stroke-dasharray:10 12;
    }
    .mods-svg .wire-fill{
      fill:none;stroke:var(--accent);stroke-width:2;
      filter:drop-shadow(0 0 6px rgba(61,218,201,.55));
    }
    /* carrinho em vista de cima; aponta pra +x e o JS gira pela tangente */
    .road-car{opacity:0;transition:opacity .4s ease}
    .road-car.on{opacity:1}
    .road-car .body{fill:#e9edf0}
    .road-car .glass{fill:#0d1013}
    .road-car .lamp{fill:#eafffc}
    .road-car .tail{fill:#e5645d}
    @media(max-width:700px){
      .road-car{display:none}
      .mods-svg .road{stroke-width:18}
    }
    /* ---------- card flip ----------
       Frente mostra só ícone + título; o verso (descrição e itens) aparece
       ao passar o mouse ou focar pelo teclado.                              */
    .mod-card{
      position:relative;z-index:1;
      width:min(360px,82%);
      height:202px;
      perspective:2000px;
      outline:none;
    }
    .mod-card + .mod-card{margin-top:26px}
    .mod-card.side-r{margin-left:auto}
    .mod-card.side-l{margin-right:auto}

    .flip{
      position:relative;width:100%;height:100%;
      transform-style:preserve-3d;
      transition:transform .5s cubic-bezier(.77,0,.175,1);
    }
    .mod-card:hover .flip,
    .mod-card:focus-visible .flip{transform:rotateY(180deg)}

    .face{
      position:absolute;inset:0;overflow:hidden;
      -webkit-backface-visibility:hidden;backface-visibility:hidden;
      background:var(--surface-1);
      border:1px solid var(--hairline);
      border-radius:var(--r-lg);
      padding:20px;
      display:flex;flex-direction:column;
      transition:border-color .35s ease,background .35s ease;
    }
    .face::before{ /* tint ambiente, ancora o card no acento */
      content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(ellipse at 20% 20%, rgba(61,218,201,.07), transparent 65%);
    }
    .back{transform:rotateY(180deg)}
    .mod-card:focus-visible .face{border-color:rgba(61,218,201,.5)}

    /* frente — ícone grande à esquerda, título à direita, ambos centrados */
    .front{
      flex-direction:row;align-items:center;gap:18px;
      padding:22px 24px;
    }
    .front .mi{
      width:56px;height:56px;flex:none;
      border-radius:14px;border:1px solid var(--hairline-strong);
      display:flex;align-items:center;justify-content:center;color:var(--ink-subtle);
      background:var(--canvas);position:relative;
      transition:color .35s ease,border-color .35s ease,transform .35s ease;
    }
    .front .mi svg{width:26px;height:26px}
    .mod-card:hover .front .mi{transform:scale(1.06) rotate(-6deg)}
    .front h3{
      font-size:24px;font-weight:600;letter-spacing:-0.022em;
      line-height:1.15;position:relative;
    }
    .mod-card.lit .face{border-color:rgba(61,218,201,.35);background:var(--surface-2)}
    .mod-card.lit .mi{color:var(--accent);border-color:rgba(61,218,201,.45)}

    /* verso — título, descrição e itens */
    .back{padding:20px 22px;justify-content:center}
    .back h3{font-size:21px;font-weight:600;letter-spacing:-0.018em;position:relative}
    .back p{
      font-size:16px;color:var(--ink-muted);margin-top:8px;line-height:1.45;
      position:relative;
    }

    @media(max-width:700px){
      .mod-card{width:100%}
      .mod-card + .mod-card{margin-top:20px}
    }
    /* sem cursor ou com movimento reduzido: card aberto, sem giro */
    @media (hover:none),(prefers-reduced-motion:reduce){
      .mod-card{height:auto;perspective:none}
      .flip{transform:none!important;transition:none}
      .front{display:none}
      .back{
        position:static;transform:none;
        display:flex;gap:0;
      }
    }

    /* ---------- split sections ---------- */
    .split{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}
    .split.rev{grid-template-columns:1.1fr 1fr}
    @media(max-width:960px){
      .split,.split.rev{grid-template-columns:1fr;gap:44px}
      .split.rev .visual{order:2}
    }
    .split h2{margin-top:16px}
    .split .lead{margin-top:18px}
    .flist{margin-top:28px;display:flex;flex-direction:column}
    .flist li{
      display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--hairline);
    }
    .flist li:last-child{border-bottom:1px solid var(--hairline)}
    .flist .fi{color:var(--accent);padding-top:2px}
    .flist .ft{font-weight:600;color:var(--ink);font-size:15px;letter-spacing:-0.01em}
    .flist .fd{font-size:14px;color:var(--ink-subtle);margin-top:3px;line-height:1.55}
    .split .btn{margin-top:28px}

    .visual .frame{
      background:var(--surface-1);border:1px solid var(--hairline);
      border-top-color:var(--hairline-strong);
      border-radius:var(--r-xl);padding:10px;
      box-shadow:0 -1px 0 rgba(255,255,255,.04) inset,0 30px 60px -25px rgba(0,0,0,.75);
    }
    .visual .inframe{
      background:var(--canvas);border:1px solid var(--hairline);border-radius:10px;
      padding:16px;display:flex;flex-direction:column;gap:10px;font-size:12px;
    }

    /* lead inbox mock */
    .inbox-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
    .inbox-head .t{font-weight:600;color:var(--ink);font-size:13px;flex:1}
    .lead-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--hairline)}
    .lead-row:last-child{border-bottom:none}
    .lead-row .src{
      font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
      width:76px;color:var(--ink-tertiary);
    }
    .lead-row .who{flex:1;min-width:0}
    .lead-row .who .n{font-weight:600;color:var(--ink);font-size:13px}
    .lead-row .who .i{font-size:11.5px;color:var(--ink-subtle);margin-top:1px}

    /* whatsapp chat mock */
    .chat-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
    .chat-head .cav{
      width:32px;height:32px;border-radius:50%;background:var(--surface-3);
      display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--ink-muted);
    }
    .chat-head .cn{font-weight:600;color:var(--ink);font-size:13px}
    .chat-head .cs{font-family:var(--font-mono);font-size:10px;color:var(--ink-tertiary);margin-top:2px;display:flex;align-items:center;gap:6px}
    .chat-head .cs .dot{width:6px;height:6px;border-radius:50%;background:var(--wa)}
    .chat-head svg{color:var(--wa)}
    .msgs{display:flex;flex-direction:column;gap:8px;padding-top:6px}
    .msg{max-width:78%;padding:9px 13px;border-radius:12px;font-size:12.5px;line-height:1.5}
    .msg.in{background:var(--surface-2);color:var(--ink-muted);border-bottom-left-radius:4px;align-self:flex-start}
    .msg.out{background:#123f33;color:#d6f5e8;border-bottom-right-radius:4px;align-self:flex-end}
    .msg .att{display:flex;align-items:center;gap:10px}
    .msg .att svg{color:#8fe0bd}
    .msg .fn{font-weight:600;font-size:12px}
    .msg .fs{font-size:10.5px;opacity:.7;margin-top:1px}
    .chat-note{
      align-self:center;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
      color:var(--accent);border:1px solid rgba(61,218,201,.3);border-radius:999px;padding:4px 12px;margin-top:6px;
    }

    /* ---------- differentiators ---------- */
    .diffs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hairline)}
    @media(max-width:960px){.diffs{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.diffs{grid-template-columns:1fr}}
    .diff{padding:32px 28px 32px 0;border-bottom:1px solid var(--hairline)}
    .diff h3{font-size:16px;letter-spacing:-0.012em}
    .diff p{font-size:14px;color:var(--ink-subtle);margin-top:10px;line-height:1.6}

    /* ---------- steps ---------- */
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
    @media(max-width:860px){.steps{grid-template-columns:1fr}}
    .step{background:var(--surface-1);padding:32px 28px}
    .step .sn{
      display:flex;align-items:center;justify-content:center;
      width:32px;height:32px;border-radius:50%;
      border:1px solid rgba(61,218,201,.4);color:var(--accent);
      font-size:14px;font-weight:600;margin-bottom:22px;
      font-variant-numeric:tabular-nums;
    }
    .step h3{font-size:16px}
    .step p{font-size:14px;color:var(--ink-subtle);margin-top:10px;line-height:1.6}

    /* ---------- FAQ ---------- */
    .faq{border-top:1px solid var(--hairline)}
    .faq details{border-bottom:1px solid var(--hairline)}
    .faq summary{
      cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;
      padding:22px 4px;color:var(--ink);font-weight:500;font-size:16px;letter-spacing:-0.01em;
      transition:color .15s ease;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:hover{color:var(--accent)}
    .faq summary .plus{margin-left:auto;color:var(--ink-tertiary);transition:transform .2s ease}
    .faq details[open] .plus{transform:rotate(45deg);color:var(--accent)}
    .faq .fa{padding:0 4px 24px;color:var(--ink-subtle);font-size:15px;line-height:1.65;max-width:640px}

    /* ---------- CTA final ---------- */
    .cta-banner{
      background:var(--surface-1);border:1px solid var(--hairline);
      border-top-color:var(--hairline-strong);
      border-radius:var(--r-xl);padding:72px 48px;text-align:center;
      box-shadow:0 -1px 0 rgba(255,255,255,.04) inset;
      position:relative;overflow:hidden;
    }
    .cta-banner::before{
      content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
      background:
        linear-gradient(var(--hairline) 1px,transparent 1px),
        linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
      background-size:56px 56px;
      -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 100%,#000,transparent);
      mask-image:radial-gradient(ellipse 70% 80% at 50% 100%,#000,transparent);
    }
    .cta-banner>*{position:relative}
    .cta-banner p{color:var(--ink-subtle);max-width:520px;margin:18px auto 0;font-size:16px;line-height:1.6}
    .cta-banner .hero-cta{margin-top:32px}
    .cta-fine{font-size:13px;color:var(--ink-tertiary);margin-top:26px}
    @media(max-width:640px){.cta-banner{padding:48px 24px}}

    /* ---------- footer ---------- */
    .footer{border-top:1px solid var(--hairline);padding:64px 0 0;margin-top:112px}
    .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
    @media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
    .foot-grid p{font-size:13.5px;color:var(--ink-subtle);margin-top:14px;max-width:280px;line-height:1.6}
    .foot-col h4{
      font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
      color:var(--ink-tertiary);font-weight:500;margin-bottom:16px;
    }
    .foot-col li{margin-bottom:10px}
    .foot-col a{font-size:13.5px;color:var(--ink-subtle);transition:color .15s ease}
    .foot-col a:hover{color:var(--ink)}
    .foot-bottom{
      border-top:1px solid var(--hairline);margin-top:56px;padding:24px 0;
      display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
      font-size:12.5px;color:var(--ink-tertiary);
    }
    .foot-bottom a:hover{color:var(--ink-subtle)}

    /* ---------- mobile CTA ---------- */

    /* ---------- reveal ---------- */
    .js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
    .js .rv.in{opacity:1;transform:none}
    @media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

    /* ============================================================
       Segment pages — hero stats, feature grid, deep dive, mocks
       ============================================================ */

    /* ---------- hero stats ---------- */
    .hero-stats{
      display:flex;justify-content:center;margin:40px auto 0;flex-wrap:wrap;
      border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
      max-width:760px;
    }
    .hero-stats .hs{
      flex:1;min-width:180px;padding:22px 24px;text-align:center;
      border-left:1px solid var(--hairline);
    }
    .hero-stats .hs:first-child{border-left:none}
    .hero-stats .hv{
      font-size:28px;font-weight:600;color:var(--ink);letter-spacing:-0.03em;
      font-variant-numeric:tabular-nums;
    }
    .hero-stats .hl{font-size:13px;color:var(--ink-tertiary);margin-top:6px;line-height:1.45}
    @media(max-width:640px){
      .hero-stats .hs{min-width:100%;border-left:none;border-top:1px solid var(--hairline);padding:16px}
      .hero-stats .hs:first-child{border-top:none}
    }

    /* ---------- feature grid ---------- */
    .feats{
      display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
      background:var(--hairline);border:1px solid var(--hairline);
      border-radius:var(--r-lg);overflow:hidden;
    }
    @media(max-width:960px){.feats{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.feats{grid-template-columns:1fr}}
    .feat{background:var(--canvas);padding:28px;transition:background .18s ease}
    .feat:hover{background:var(--surface-1)}
    .feat .fic{
      width:34px;height:34px;border-radius:8px;border:1px solid var(--hairline-strong);
      display:flex;align-items:center;justify-content:center;color:var(--accent);
      margin-bottom:18px;background:var(--surface-1);
    }
    .feat h3{font-size:16px;font-weight:600;letter-spacing:-0.012em}
    .feat p{font-size:14px;color:var(--ink-subtle);margin-top:8px;line-height:1.6}

    /* ---------- mock: data table (checklist / propostas) ---------- */
    .mtable{width:100%;border-collapse:collapse;font-size:11.5px}
    .mtable th{
      font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
      color:var(--ink-tertiary);text-align:left;font-weight:500;
      padding:0 10px 10px 0;border-bottom:1px solid var(--hairline);
    }
    .mtable td{
      padding:9px 10px 9px 0;border-bottom:1px solid var(--hairline);
      color:var(--ink-muted);vertical-align:middle;
    }
    .mtable tr:last-child td{border-bottom:none}
    .mtable .pl{font-family:var(--font-mono);font-size:10.5px;color:var(--ink)}
    .mtable .cl{color:var(--ink);font-weight:500}
    .mtable .vh{color:var(--ink-tertiary);font-size:10.5px;margin-top:2px}
    .mtable .dt{font-family:var(--font-mono);font-size:10px;color:var(--ink-tertiary);white-space:nowrap}
    @media(max-width:920px){.mtable .hide-sm{display:none}}

    /* ---------- mock: service boxes ---------- */
    .boxgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
    @media(max-width:920px){.boxgrid{grid-template-columns:repeat(2,1fr)}}
    .bx{
      background:var(--canvas);border:1px solid var(--hairline);border-radius:9px;
      padding:11px 12px;min-height:78px;display:flex;flex-direction:column;gap:3px;
    }
    .bx .bn{
      font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
      color:var(--ink-tertiary);display:flex;justify-content:space-between;align-items:center;
    }
    .bx .bp{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);margin-top:3px}
    .bx .bs{font-size:10.5px;color:var(--ink-subtle);line-height:1.35}
    .bx .btm{font-family:var(--font-mono);font-size:10px;color:var(--ink-tertiary);margin-top:auto}
    .bx.exec{border-color:rgba(61,218,201,.35)}
    .bx.exec .bn{color:var(--accent)}
    .bx.atraso{border-color:rgba(229,100,93,.4)}
    .bx.atraso .bn,.bx.atraso .btm{color:var(--danger)}
    .bx.livre{border-style:dashed}
    .bx.livre .bfree{
      flex:1;display:flex;align-items:center;justify-content:center;
      font-size:10.5px;color:var(--ink-tertiary);
    }

    /* ---------- mock: fleet gantt ---------- */
    .gantt{display:flex;flex-direction:column;gap:6px}
    .gantt .grow{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center}
    .gantt .gcar .gp{font-family:var(--font-mono);font-size:10.5px;color:var(--ink)}
    .gantt .gcar .gm{font-size:10px;color:var(--ink-tertiary);margin-top:1px}
    .gantt .gtrack{
      position:relative;height:20px;border-radius:5px;
      background:var(--canvas);border:1px solid var(--hairline);overflow:hidden;
    }
    .gantt .gbar{position:absolute;top:3px;bottom:3px;border-radius:3px}
    .gantt .gbar.ativo{background:linear-gradient(90deg,var(--accent-dim),var(--accent))}
    .gantt .gbar.reservado{background:var(--surface-3);border:1px solid var(--hairline-strong)}
    .gantt .gbar.encerrado{background:var(--surface-2)}
    .glegend{
      display:flex;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline);
      font-size:10px;color:var(--ink-tertiary);flex-wrap:wrap;
    }
    .glegend span{display:flex;align-items:center;gap:6px}
    .glegend i{width:10px;height:10px;border-radius:3px;display:block}

    /* ---------- mock: donut ---------- */
    .donut-row{display:flex;align-items:center;gap:18px}
    .donut-leg{display:flex;flex-direction:column;gap:5px;flex:1}
    .donut-leg .lr{display:flex;align-items:center;gap:8px;font-size:11px}
    .donut-leg .sw{width:8px;height:8px;border-radius:2px;flex:none}
    .donut-leg .ll{flex:1;color:var(--ink-subtle)}
    .donut-leg .lv{font-family:var(--font-mono);font-size:10.5px;color:var(--ink);font-variant-numeric:tabular-nums}

    /* ---------- hub ---------- */
    .hub-wrap{max-width:var(--w-max);margin:0 auto;padding:80px 32px 96px}
    .hub-head{text-align:center;max-width:680px;margin:0 auto 64px}
    .hub-head p{color:var(--ink-subtle);font-size:17px;margin-top:18px;line-height:1.6}
    .hub-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
      background:var(--hairline);border:1px solid var(--hairline);
      border-radius:var(--r-lg);overflow:hidden;
    }
    @media(max-width:960px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.hub-grid{grid-template-columns:1fr}}
    .hub-card{
      background:var(--canvas);padding:32px 28px;display:flex;flex-direction:column;
      min-height:270px;transition:background .18s ease;
    }
    .hub-card:hover{background:var(--surface-1)}
    .hub-card .hci{
      width:34px;height:34px;border-radius:8px;border:1px solid var(--hairline-strong);
      display:flex;align-items:center;justify-content:center;color:var(--accent);
      margin-bottom:18px;background:var(--surface-1);
    }
    .hub-card h2{font-size:19px;font-weight:600;letter-spacing:-0.015em;color:var(--ink)}
    .hub-card p{font-size:14px;color:var(--ink-subtle);margin-top:10px;line-height:1.6;flex:1}
    .hub-card .hcm{
      display:flex;flex-direction:column;gap:6px;margin:20px 0;
      padding-top:16px;border-top:1px solid var(--hairline);
    }
    .hub-card .hcr{display:flex;justify-content:space-between;font-size:12px}
    .hub-card .hcr .k{color:var(--ink-tertiary)}
    .hub-card .hcr .v{color:var(--ink-muted);font-weight:500}
    .hub-card .hcl{
      display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--accent);
      transition:gap .18s ease;
    }
    .hub-card:hover .hcl{gap:12px}
    .hub-card .hc-photo{
      margin:-32px -28px 22px;height:150px;overflow:hidden;position:relative;
      border-bottom:1px solid var(--hairline);
    }
    .hub-card .hc-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.8;transition:transform .5s ease,opacity .3s ease}
    .hub-card .hc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,11,13,.7))}
    .hub-card:hover .hc-photo img{transform:scale(1.04);opacity:1}

    /* ---------- "Para quem é": cards com foto por segmento ---------- */
    .segs{padding-bottom:96px}
    .seg-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
    .seg-card{
      position:relative;display:flex;flex-direction:column;justify-content:flex-end;
      aspect-ratio:3/4.2;border-radius:var(--r-lg);overflow:hidden;
      border:1px solid var(--hairline);background:var(--surface-1);
      transition:border-color .3s ease,transform .3s ease;
      isolation:isolate;
    }
    .seg-card img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
      filter:brightness(.85) saturate(.9);
      transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s ease;
    }
    .seg-card::before{
      content:"";position:absolute;inset:0;z-index:-1;
      background:linear-gradient(180deg,rgba(10,11,13,0) 12%,rgba(10,11,13,.55) 40%,rgba(10,11,13,.92) 62%,rgba(10,11,13,.97));
    }
    .seg-card:hover,.seg-card:focus-visible{border-color:rgba(61,218,201,.5);transform:translateY(-3px)}
    .seg-card:hover img,.seg-card:focus-visible img{transform:scale(1.05);filter:none}
    .seg-body{padding:18px 16px 18px}
    .seg-ic{
      width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
      color:var(--accent);background:rgba(10,11,13,.6);border:1px solid rgba(61,218,201,.3);
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-bottom:14px;
    }
    .seg-body h3{font-size:18px;font-weight:600;letter-spacing:-0.015em;color:var(--ink)}
    .seg-body p{font-size:13.5px;line-height:1.5;color:var(--ink-muted);margin-top:6px}
    .seg-go{
      display:inline-flex;align-items:center;gap:6px;margin-top:14px;
      font-size:13px;font-weight:500;color:var(--accent);transition:gap .2s ease;
    }
    .seg-card:hover .seg-go{gap:10px}
    @media(max-width:1180px){
      .seg-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(240px,29%);
        overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;
        scrollbar-width:thin;scrollbar-color:var(--hairline-strong) transparent}
      .seg-card{scroll-snap-align:start}
    }
    @media(max-width:640px){
      .seg-rail{grid-auto-columns:78%;margin:0 -20px;padding:0 20px 8px;scroll-padding:0 20px}
    }
    /* setas do carrossel (o JS mostra só quando o trilho rola) */
    .seg-scroller{position:relative}
    .seg-arrow{
      position:absolute;top:36%;z-index:2;transform:translateY(-50%);
      width:46px;height:46px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      color:var(--accent-ink);background:var(--accent);border:0;cursor:pointer;
      box-shadow:0 0 0 6px rgba(10,11,13,.55),0 10px 28px rgba(0,0,0,.6);
      transition:background .2s ease,transform .2s ease;
    }
    .seg-arrow:hover{background:#5ce4d5}
    .seg-arrow:active{transform:translateY(-50%) scale(.94)}
    .seg-arrow[hidden]{display:none}
    .seg-arrow.prev{left:-6px}
    .seg-arrow.next{right:-6px}
    /* enquanto ninguém mexeu no carrossel, a seta da direita chama o dedo */
    .seg-scroller:not(.is-touched) .seg-arrow.next svg{animation:seg-nudge 1.4s ease-in-out infinite}
    @keyframes seg-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
    @media (prefers-reduced-motion:reduce){.seg-scroller .seg-arrow svg{animation:none!important}}
    @media(min-width:1181px){.seg-arrow{display:none!important}}
    @media(max-width:640px){.seg-arrow.prev{left:-10px}.seg-arrow.next{right:-10px}}

    /* ---------- página do segmento (segmento-*.html) ---------- */
    .seg-hero{
      position:relative;overflow:hidden;
      min-height:min(80vh,740px);padding:150px 0 80px;
      display:flex;align-items:flex-end;
    }
    .seg-hero-photo{position:absolute;inset:0;pointer-events:none}
    .seg-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.6;filter:brightness(.8) saturate(.9)}
    /* texto à esquerda sobre a parte mais escura; a foto aparece à direita */
    .seg-hero-photo::after{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(10,11,13,.96),rgba(10,11,13,.78) 42%,rgba(10,11,13,.15)),
        linear-gradient(180deg,rgba(10,11,13,.4),transparent 30%,transparent 60%,var(--canvas));
    }
    .seg-hero-inner{position:relative;width:100%}
    .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-subtle);margin-bottom:30px}
    .crumbs a{color:var(--ink-subtle);transition:color .15s ease}
    .crumbs a:hover{color:var(--ink)}
    .crumbs span{color:var(--ink-tertiary)}
    .crumbs b{color:var(--ink);font-weight:500}
    .seg-hero-ic{
      width:50px;height:50px;border-radius:13px;margin-bottom:22px;
      display:flex;align-items:center;justify-content:center;color:var(--accent);
      border:1px solid rgba(61,218,201,.35);background:rgba(10,11,13,.6);
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    }
    .seg-hero h1{max-width:12em}
    .seg-hero-lead{max-width:600px;margin-top:20px;font-size:clamp(16px,1.8vw,19px);line-height:1.6;color:var(--ink-muted)}
    .seg-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding:0;list-style:none}
    .seg-tags li{
      font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-muted);
      padding:6px 11px;border-radius:999px;border:1px solid var(--hairline-strong);
      background:rgba(16,18,20,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    }
    @media(max-width:640px){.seg-hero{padding:120px 0 56px;min-height:0}}

    /* especialidades: grade de cartões separados por hairline */
    .spec-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
      background:var(--hairline);border:1px solid var(--hairline);
      border-radius:var(--r-lg);overflow:hidden;
    }
    @media(max-width:960px){.spec-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.spec-grid{grid-template-columns:1fr}}
    .spec{background:var(--canvas);padding:28px 26px;transition:background .2s ease}
    .spec:hover{background:var(--surface-1)}
    .spec-ic{
      width:38px;height:38px;border-radius:10px;margin-bottom:18px;
      display:flex;align-items:center;justify-content:center;color:var(--accent);
      border:1px solid var(--hairline-strong);background:var(--surface-1);
    }
    .spec h3{font-size:17px;font-weight:600;letter-spacing:-0.012em;color:var(--ink)}
    .spec p{font-size:14.5px;line-height:1.6;color:var(--ink-subtle);margin-top:8px}

    /* fluxo do segmento desenhado como estrada: asfalto, faixa tracejada,
       rastro de luz que corre ao aparecer e as paradas acendendo em ordem */
    .road-wrap{position:relative;--road-y:20px}
    .road-wrap::before,.road-wrap::after,.road-trail{content:"";position:absolute;left:0;right:0;top:var(--road-y);pointer-events:none}
    .road-wrap::before{height:16px;margin-top:-8px;border-radius:8px;background:#121518}
    .road-wrap::after{left:14px;right:14px;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,#3a4148 0 10px,transparent 10px 22px)}
    .road-trail{
      z-index:1;height:2px;margin-top:-1px;right:auto;width:100%;
      background:var(--accent);box-shadow:0 0 10px rgba(61,218,201,.7);
      transform-origin:left center;transform:scaleX(0);
      transition:transform calc(var(--n) * .28s) cubic-bezier(.4,0,.2,1) .2s;
    }
    .road-wrap.in .road-trail{transform:scaleX(1)}
    .road-steps{
      position:relative;z-index:2;list-style:none;margin:0;padding:0;
      display:grid;grid-template-columns:repeat(var(--n),1fr);gap:20px;
    }
    .rs-pin{
      display:flex;align-items:center;justify-content:center;
      width:40px;height:40px;border-radius:50%;
      background:var(--canvas);border:1.5px solid var(--hairline-strong);
      font-family:var(--font-mono);font-size:12px;color:var(--ink-subtle);
      transition:border-color .3s ease,color .3s ease,box-shadow .3s ease;
      transition-delay:calc(.2s + var(--i) * (var(--n) * .28s / var(--n)));
    }
    .road-wrap.in .rs-pin{
      border-color:var(--accent);color:var(--accent);
      box-shadow:0 0 0 4px rgba(61,218,201,.12),0 0 16px rgba(61,218,201,.35);
    }
    .road-steps h3{font-size:16px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);margin-top:18px}
    .road-steps p{font-size:13.5px;line-height:1.55;color:var(--ink-subtle);margin-top:6px}
    /* estreito: a estrada vira vertical, à esquerda das paradas */
    @media(max-width:820px){
      .road-wrap::before,.road-wrap::after,.road-trail{top:0;bottom:0;left:20px;right:auto;margin:0}
      .road-wrap::before{width:16px;margin-left:-8px;height:auto}
      .road-wrap::after{width:2px;margin-left:-1px;height:auto;top:14px;bottom:14px;
        background:repeating-linear-gradient(180deg,#3a4148 0 10px,transparent 10px 22px)}
      .road-trail{width:2px;margin-left:-1px;height:auto;transform-origin:center top;transform:scaleY(0)}
      .road-wrap.in .road-trail{transform:scaleY(1)}
      .road-steps{grid-template-columns:1fr;gap:28px}
      .road-steps li{position:relative;padding-left:64px;min-height:40px}
      .rs-pin{position:absolute;left:0;top:0}
      .road-steps h3{margin-top:8px}
    }
    @media (prefers-reduced-motion:reduce){.road-trail,.rs-pin{transition:none}}

    /* outros segmentos: atalhos com foto */
    .seg-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    @media(max-width:860px){.seg-minis{grid-template-columns:repeat(2,1fr)}}
    .seg-mini{
      position:relative;isolation:isolate;overflow:hidden;
      display:flex;align-items:flex-end;gap:10px;min-height:110px;padding:16px;
      border:1px solid var(--hairline);border-radius:var(--r-lg);
      font-size:15px;font-weight:600;color:var(--ink);
      transition:border-color .25s ease;
    }
    .seg-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42;transition:opacity .3s ease,transform .6s ease}
    .seg-mini::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent,rgba(10,11,13,.85))}
    .seg-mini .sm-ic{display:flex;color:var(--accent)}
    .seg-mini > svg{margin-left:auto;color:var(--accent);transition:transform .2s ease}
    .seg-mini:hover{border-color:rgba(61,218,201,.5)}
    .seg-mini:hover img{opacity:.65;transform:scale(1.04)}
    .seg-mini:hover > svg{transform:translateX(3px)}

    /* ---------- placa Mercosul nos mocks (TESTE: CONFIG.mercosulPlates) ---------- */
    .plate{
      display:inline-flex;flex-direction:column;vertical-align:middle;
      background:#f2f4f5;border:1px solid #8d969e;border-radius:3px;overflow:hidden;
      line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.5);
    }
    .plate i{
      display:flex;align-items:center;justify-content:center;gap:3px;
      background:#1d3f9e;color:#fff;font:600 5.5px/1 var(--font-sans);
      letter-spacing:.2em;padding:1.5px 4px 1px;font-style:normal;
    }
    /* bandeirinha no canto da faixa azul */
    .plate i::after{
      content:"";width:5px;height:3.5px;flex:none;
      background:radial-gradient(circle,#ffdf00 38%,#009c3b 42%);
    }
    .plate b{
      display:block;color:#0b0c0e;font:600 10.5px/1 var(--font-mono);
      letter-spacing:.07em;padding:2.5px 5px 2.5px;text-align:center;
    }

    /* ---------- legal / privacy ---------- */
    .legal{max-width:760px;margin:0 auto;padding:80px 32px 40px}
    .legal h1{font-size:clamp(30px,4vw,44px);letter-spacing:-0.03em}
    .legal .updated{font-size:13px;color:var(--ink-tertiary);margin-top:10px}
    .legal .lbody{display:grid;gap:26px;margin-top:40px;font-size:15.5px;line-height:1.7;color:var(--ink-subtle)}
    .legal .lbody h3{font-size:17px;color:var(--ink);margin-bottom:8px;letter-spacing:-0.015em}
    .legal .lbody a{color:var(--accent)}
    .legal .lbody a:hover{text-decoration:underline}

    /* a regra base de .app-side vem depois do media query e o vencia:
       reforça a especificidade para a sidebar sumir mesmo no celular */
    @media(max-width:760px){
      .app .app-side{display:none}
    }

    /* ---------- mocks dentro da coluna estreita do deep dive ---------- */
    .inframe .boxgrid{grid-template-columns:repeat(2,1fr)}
    .inframe .gantt .grow{grid-template-columns:92px 1fr;gap:8px}
    .inframe .pipe{gap:4px}
    .inframe .pipe .st{padding:8px 3px}
    .inframe .pipe .n{font-size:14px}
    .inframe .pipe .l{font-size:7.5px}
    .inframe .donut-row{gap:14px}
    .inframe .box{padding:12px}
    .inframe .lead-row .src{width:64px}
    /* ---------- popup do formulário → WhatsApp ---------- */
    button.btn{font-family:inherit}
    html.lm-lock{overflow:hidden}
    .lead-modal{
      width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 24px);
      margin:auto;padding:0;border:0;background:transparent;color:var(--ink-muted);
      overflow:visible;color-scheme:dark;
    }
    .lead-modal::backdrop{background:rgba(5,6,8,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
    .lm-card{
      position:relative;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;
      padding:36px 32px 30px;border-radius:var(--r-xl);
      background:var(--surface-1);border:1px solid var(--hairline);
      box-shadow:0 24px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.03);
    }
    @media(max-width:480px){.lm-card{padding:30px 20px 24px}}
    @media (prefers-reduced-motion:no-preference){
      .lead-modal[open]{animation:lm-in .24s cubic-bezier(.22,.61,.36,1)}
      .lead-modal[open]::backdrop{animation:lm-fade .24s ease}
    }
    @keyframes lm-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
    @keyframes lm-fade{from{opacity:0}}
    .lm-close{
      position:absolute;top:14px;right:14px;width:34px;height:34px;
      display:grid;place-items:center;border-radius:999px;cursor:pointer;
      background:transparent;border:1px solid transparent;color:var(--ink-subtle);
      transition:background .15s ease,color .15s ease,border-color .15s ease;
    }
    .lm-close svg{transform:rotate(45deg)}
    .lm-close:hover{background:var(--surface-2);border-color:var(--hairline);color:var(--ink)}
    .lm-title{font-size:26px;line-height:1.15;letter-spacing:-0.025em;padding-right:36px}
    .lm-desc{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-subtle)}
    .lm-form{display:flex;flex-direction:column}
    .lm-form .lm-desc{margin-bottom:22px}
    .lm-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
    .lm-field > label:not(.lm-check){
      font-family:var(--font-mono);font-size:11px;font-weight:500;
      letter-spacing:.08em;text-transform:uppercase;color:var(--ink-subtle);
    }
    .lm-field input:not([type=checkbox]),.lm-field select{
      width:100%;min-height:46px;padding:11px 14px;
      font:inherit;font-size:15px;color:var(--ink);letter-spacing:-0.006em;
      background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);
      transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
      appearance:none;-webkit-appearance:none;
    }
    .lm-field input::placeholder{color:var(--ink-tertiary)}
    .lm-field input:not([type=checkbox]):hover,.lm-field select:hover{border-color:var(--hairline-strong)}
    .lm-field input:not([type=checkbox]):focus,.lm-field select:focus{
      outline:none;border-color:var(--accent);background:var(--surface-3);
      box-shadow:0 0 0 3px rgba(61,218,201,.16);
    }
    .lm-field [aria-invalid=true]{border-color:var(--danger)}
    .lm-field [aria-invalid=true]:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(229,100,93,.18)}
    .lm-select{position:relative}
    .lm-select::after{
      content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;
      border-right:1.75px solid var(--ink-subtle);border-bottom:1.75px solid var(--ink-subtle);
      transform:rotate(45deg);pointer-events:none;
    }
    .lm-select select{padding-right:40px;cursor:pointer}
    .lm-select select:has(option[value=""]:checked){color:var(--ink-tertiary)}
    .lm-select option{color:var(--ink);background:var(--surface-2)}
    .lm-err{font-size:12.5px;line-height:1.35;color:var(--danger)}
    .lm-err:empty{display:none}
    /* checkbox de autorização */
    .lm-consent{margin:4px 0 22px}
    .lm-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:13px;line-height:1.5;color:var(--ink-subtle)}
    .lm-check input{position:absolute;opacity:0;width:1px;height:1px}
    .lm-box{
      flex:none;width:18px;height:18px;margin-top:1px;display:grid;place-items:center;
      border-radius:5px;border:1px solid var(--hairline-strong);background:var(--surface-2);
      color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease;
    }
    .lm-check:hover .lm-box{border-color:var(--ink-tertiary)}
    .lm-check input:checked + .lm-box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
    .lm-check input:focus-visible + .lm-box{box-shadow:0 0 0 3px rgba(61,218,201,.25)}
    .lm-check input[aria-invalid=true] + .lm-box{border-color:var(--danger)}
    .lm-check a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px}
    .lm-check a:hover{color:var(--accent)}
    .lm-submit{width:100%;justify-content:center}
    /* estado de sucesso */
    .lm-done{display:flex;flex-direction:column;align-items:flex-start}
    .lm-form[hidden],.lm-done[hidden]{display:none}
    .lm-done-ic{
      width:44px;height:44px;display:grid;place-items:center;margin-bottom:18px;
      border-radius:999px;background:rgba(61,218,201,.12);color:var(--accent);
    }
    .lm-done .lm-desc{margin-bottom:24px}
    .lm-fine{margin-top:14px;font-size:13px;color:var(--ink-tertiary)}
    .lm-fine a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px}