/* ================= TOKENS (Figma LP - Hub) ================= */
  :root{
    --bg:#04081F;
    --bg-2:#050923;
    --card:#0A0F26;
    --card-2:#0D1330;
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.05);

    --blue:#3972FD;
    --teal:#5BC0BE;
    --slate:#3A506B;
    --purple:#A364FF;
    --purple-soft:#C8ADFF;
    --green:#34D399;
    --orange:#FA9800;
    --orange-soft:#FFBC7C;
    --pink:#F472B6;

    --white:#F9F9F9;
    --muted:#7E84A6;
    --muted-2:#868C94;

    --chat-bg:#1F2128;
    --chat-line:#31363F;

    --hub-gradient:linear-gradient(92deg,var(--blue),var(--purple),var(--orange),var(--green),var(--teal));
    --maxw:1180px;
    /* tipografia: a família do site vive no token; o wordmark "Marvee" do nav é logo e fica na Maven Pro 700 */
    --font:'Manrope',sans-serif;
    --font-logo:'Maven Pro',sans-serif;
    /* curva macia padrão (mesma do mockup de /ads): entra rápido e assenta devagar */
    --ease-soft:cubic-bezier(.22,1,.36,1);

    /* ---- tom claro (casa única) ----
       Nasceu no .win-light da janela de produto e foi promovido a token
       global: a janela clara e as seções claras (.sec-light) bebem daqui.
       Mudar um valor aqui muda os dois; catálogo em marca/design-system. */
    --light-bg:#FBFCFF;
    --light-chrome:#F1F4FB;
    --light-card:#fff;
    --light-tx:#141B33;
    --light-tx2:#454D6B;
    --light-mut:#78809C;
    --light-line:rgba(16,24,40,.08);
    --light-line2:rgba(16,24,40,.12);
    --light-soft:rgba(16,24,40,.02);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font);font-weight:400;
    background:var(--bg);
    color:var(--white);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  /* luzes globais de fundo — página fluida, sem quebras de seção */
  .bg-lights{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .bg-lights span{
    position:absolute;width:1100px;height:860px;
    background:radial-gradient(closest-side, var(--c, rgba(57,114,253,.06)), transparent 72%);
    animation:bgFloat 24s ease-in-out infinite alternate;
  }
  .bg-lights span:nth-child(2n){animation-duration:30s;animation-delay:-8s}
  .bg-lights span:nth-child(3n){animation-duration:36s;animation-delay:-16s}
  @keyframes bgFloat{to{transform:translate3d(70px,50px,0)}}
  section, nav, footer{position:relative;z-index:1}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3,h4{font-family:var(--font);font-weight:600;line-height:1.08;letter-spacing:-.03em;color:var(--white)}
  a{color:inherit;text-decoration:none}

  /* ===== Badge eyebrow (glow azul/roxo suave) ===== */
  /* rótulo de seção em texto puro (padrão das páginas novas; ex-pílula) */
  .badge-pill{
    display:inline-flex;align-items:center;gap:9px;
    padding:0;border-radius:0;background:none;border:0;box-shadow:none;
    font-family:var(--font);font-size:12.5px;font-weight:600;
    color:var(--app,var(--teal));letter-spacing:.08em;text-transform:uppercase;
  }
  .badge-pill svg{width:18px;height:10px;flex:none}

  /* ===== Botões ===== */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--font);font-weight:500;
    font-size:15.5px;line-height:1.2;
    padding:13px 26px;border-radius:64px;cursor:pointer;
    color:#fff;position:relative;isolation:isolate;
    min-height:46px;letter-spacing:-.005em;
    transition:transform .25s ease, box-shadow .25s ease;
    border:none;background:transparent;
  }
  /* primário: traçado gradiente animado (todas as cores do Hub) */
  .btn-grad{
    background:
      linear-gradient(var(--bg),var(--bg)) padding-box,
      linear-gradient(92deg,#3972FD,#A364FF,#FA9800,#34D399,#5BC0BE,#3972FD) border-box;
    border:1.7px solid transparent;
    background-size:100% 100%, 300% 100%;
    animation:gradSlide 5s linear infinite;
    box-shadow:0 0 26px -10px rgba(123,92,255,.35);
  }
  @keyframes gradSlide{
    0%{background-position:0 0, 0% 50%}
    100%{background-position:0 0, 300% 50%}
  }
  .btn-grad::before{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
    background:linear-gradient(92deg,#3972FD,#A364FF,#FA9800,#34D399,#5BC0BE,#3972FD);
    background-size:300% 100%;
    animation:gradSlide 5s linear infinite;
    opacity:0;transition:opacity .25s ease;
  }
  .btn-grad:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(123,92,255,.5)}
  .btn-grad:hover::before{opacity:1}

  /* ---- .is-shine: a CTA principal do Hub, com o arco de luz correndo ----
     Referencia trazida pela autora em 31/08 (ShinyButton). A adaptacao pedida
     por ela: em vez de UMA cor de destaque fixa, o arco usa as cores do Hub, e
     elas entram UMA DE CADA VEZ, em vez de aparecerem todas ao mesmo tempo no
     tracado (que e o que o .btn-grad ja faz com o linear-gradient correndo).

     Mesmo vocabulario do anel do card em destaque (--pc-ring-angle, mais
     abaixo): @property para o angulo poder animar, conic-gradient em border-box
     para virar tracado. A diferenca e que aqui o conico nao carrega as seis
     cores de uma vez: carrega UM arco de luz, com --sh-hl no corpo e branco no
     nucleo, e quem troca de cor e o proprio arco, num ciclo mais lento.

     Duas voltas do arco por troca de cor: o angulo fecha em 3s e a cor em 15s,
     entao cada cor pega uma volta inteira e a leitura nao vira pisca-pisca.

     Variante OPT-IN: o .btn-grad puro aparece 164 vezes em 40 paginas. */
  @property --sh-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
  @property --sh-arc{syntax:"<percentage>";inherits:false;initial-value:12%}
  @property --sh-hl{syntax:"<color>";inherits:false;initial-value:#3972FD}
  @keyframes shAngle{to{--sh-angle:360deg}}
  @keyframes shCores{
    0%{--sh-hl:#3972FD}
    20%{--sh-hl:#A364FF}
    40%{--sh-hl:#FA9800}
    60%{--sh-hl:#34D399}
    80%{--sh-hl:#5BC0BE}
    100%{--sh-hl:#3972FD}
  }
  .btn-grad.is-shine{
    background:
      linear-gradient(var(--bg),var(--bg)) padding-box,
      conic-gradient(from var(--sh-angle),
        transparent,
        var(--sh-hl) var(--sh-arc),
        #fff calc(var(--sh-arc) * 2),
        var(--sh-hl) calc(var(--sh-arc) * 3),
        transparent calc(var(--sh-arc) * 4)
      ) border-box;
    background-size:100% 100%;
    border:1.7px solid transparent;
    /* o arco cobre so um trecho do contorno, entao sem este trilho interno o
       botao fica sem borda no resto da volta e deixa de ler como botao */
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 26px -12px var(--sh-hl);
    animation:shAngle 3s linear infinite, shCores 15s linear infinite;
    /* o arco alarga no hover, e a curva longa e a do original */
    transition:transform .25s ease, box-shadow .25s ease,
               --sh-arc 800ms cubic-bezier(.25,1,.5,1);
  }
  /* o ::before do .btn-grad e o preenchimento cheio, que aqui nao entra: com o
     gradiente cobrindo o corpo o texto branco cai a 1,92 de contraste, longe
     dos 4,5 de AA. No lugar dele vai a textura de pontos do original, recortada
     pela mesma volta do arco, entao ela acende so onde a luz esta passando. */
  .btn-grad.is-shine::before{
    --p:2px;
    content:"";position:absolute;inset:3px;border-radius:inherit;z-index:-1;
    background:radial-gradient(circle at var(--p) var(--p), #fff calc(var(--p) / 4), transparent 0);
    background-size:calc(var(--p) * 2) calc(var(--p) * 2);
    background-repeat:space;
    -webkit-mask-image:conic-gradient(from calc(var(--sh-angle) + 45deg), #000, transparent 10% 90%, #000);
    mask-image:conic-gradient(from calc(var(--sh-angle) + 45deg), #000, transparent 10% 90%, #000);
    opacity:.34;
    transition:opacity .25s ease;
  }
  .btn-grad.is-shine:hover{
    --sh-arc:24%;
    transform:translateY(-2px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 14px 40px -14px var(--sh-hl);
  }
  .btn-grad.is-shine:hover::before{opacity:.5}
  /* o .btn-grad nunca teve bloco de movimento reduzido. A variante entra ja com
     ele, no proprio escopo, para as outras 39 paginas seguirem intocadas: o
     arco para numa posicao legivel e o hover vira so a elevacao. */
  @media(prefers-reduced-motion:reduce){
    .btn-grad.is-shine,
    .btn-grad.is-shine::before{animation:none}
    .btn-grad.is-shine{transition:transform .25s ease, box-shadow .25s ease}
    .btn-grad.is-shine:hover{transform:none}
  }
  /* primário preenchido (planos): roxo sólido. Serve o caso em que o traçado
     gradiente já existe no contexto (o card em destaque tem a borda animada) e
     um segundo gradiente dentro do mesmo card ficaria repetitivo. */
  .btn-fill{
    background:var(--purple);
    border:1px solid rgba(255,255,255,.18);
    font-weight:600;
    box-shadow:0 4px 16px rgba(163,100,255,.25);
    transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  }
  .btn-fill:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--purple) 86%,#fff);box-shadow:0 8px 26px rgba(163,100,255,.42)}
  /* Receita reutilizável promovida do CTA primário definido em src/content/ads.html. */
  .btn-blue-3d{
    color:#fff;font-weight:600;
    background:linear-gradient(180deg,#4a7dff,#3567f0);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 26px -4px rgba(57,114,253,.6),0 12px 32px -10px rgba(57,114,253,.55);
    transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
  }
  .btn-blue-3d:hover{
    transform:translateY(-2px);filter:brightness(1.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 34px -2px rgba(57,114,253,.7),0 16px 38px -10px rgba(57,114,253,.6);
  }
  .btn-blue-3d:active{
    transform:translateY(1px);filter:brightness(.98);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 18px -4px rgba(57,114,253,.55),0 6px 16px -8px rgba(57,114,253,.45);
  }
  /* secundário: slate → hover branco.
     O .nav-help (ícone da Central de Ajuda no nav) entra aqui de propósito: ele
     é o par visual da CTA secundária do nav, então divide a mesma borda, o mesmo
     fundo e o mesmo hover em vez de repetir os valores. Não recebe a classe
     .btn porque o nav-menu.js elege a CTA do drawer pelo primeiro a.btn fora do
     .nav-links, e um ícone sem texto viraria um botão vazio no mobile. */
  /* ---- os secundarios de contorno, em vidro ----
     Referencia trazida pela autora em 31/08 (LiquidButton), promovida a TODOS
     os botoes deste estilo por ordem dela.

     Duas partes do original nao vieram, por medicao: o
     backdrop-filter:url(#container-glass) com feTurbulence e feDisplacementMap
     NAO renderiza (o CSS.supports responde true, mas isso e so parsing: num
     fundo listrado de teste o resultado saiu identico ao controle, enquanto o
     blur borrou as listras), e o proprio blur nao entrega nada onde atras do
     botao so existe cor solida. O vidro vem entao das PISTAS OPTICAS, que sao
     as inset shadows do original (variante dark) atenuadas: na intensidade
     cheia o botao lia como peca solida clara, nao como vidro.

     O vidro vive num ::after, e nao no proprio botao, por uma razao medida:
     controlar a intensidade por alpha (rgba com calc no canal) NAO funciona,
     o Chrome nao reavalia o calc dentro do alpha, e o fundo ficava presente
     mesmo com a variavel em zero enquanto as sombras zeravam. Com o pseudo, a
     intensidade e opacity, que responde sempre.

     --gl e essa intensidade. Ela existe por causa da /hub: la o nav vira tom
     claro (--navl indo a 1) e os realces brancos ficariam sujos sobre o quase
     branco, entao o vidro se apaga junto. Nenhum .btn-slate do repo vive
     dentro de secao clara: conferido arquivo a arquivo. */
  @property --gl{syntax:'<number>';initial-value:1;inherits:true}
  .btn-slate,.nav-help{
    --gl:1;
    border:1px solid transparent;
    background:transparent;
    opacity:1;
    position:relative;
    transition:transform .25s ease;
  }
  .btn-slate::after,.nav-help::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:rgba(255,255,255,.038);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:
      inset 2px 2px .5px -2.5px rgba(255,255,255,.10),
      inset -2px -2px .5px -2.5px rgba(255,255,255,.55),
      inset 1px 1px 1px -.5px rgba(255,255,255,.34),
      inset -1px -1px 1px -.5px rgba(255,255,255,.34),
      inset 0 0 6px 5px rgba(255,255,255,.05),
      inset 0 0 2px 2px rgba(255,255,255,.04),
      0 8px 22px -12px rgba(0,0,0,.55);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    opacity:var(--gl);
    transition:opacity .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  }
  /* no hover o vidro so ganha luz: as mesmas pistas, mais fortes. A borda nao
     vai ao branco de .5 de antes porque agora quem desenha o contorno e o
     realce interno, e as duas coisas juntas engrossariam a peca. */
  .btn-slate:hover,.nav-help:hover{transform:translateY(-2px)}
  .btn-slate:hover::after,.nav-help:hover::after{
    background:rgba(255,255,255,.075);
    border-color:rgba(255,255,255,.19);
    box-shadow:
      inset 2px 2px .5px -2.5px rgba(255,255,255,.16),
      inset -2px -2px .5px -2.5px rgba(255,255,255,.75),
      inset 1px 1px 1px -.5px rgba(255,255,255,.46),
      inset -1px -1px 1px -.5px rgba(255,255,255,.46),
      inset 0 0 7px 5px rgba(255,255,255,.08),
      inset 0 0 2px 2px rgba(255,255,255,.06),
      0 12px 28px -12px rgba(0,0,0,.6);
  }
  @media(prefers-reduced-motion:reduce){
    .btn-slate,.nav-help{transition:none}
    .btn-slate::after,.nav-help::after{transition:none}
    .btn-slate:hover,.nav-help:hover{transform:none}
  }
  .btn-sm{font-size:13.5px;padding:9px 18px;min-height:38px;border-radius:48px}
  .btn-arrow{transition:transform .2s ease}
  .btn:hover .btn-arrow{transform:translateX(4px)}

  /* ================= NAV ================= */
  nav{
    position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
    background:rgba(4,8,31,.8);border-bottom:1px solid var(--line-2);
  }
  .nav-in{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1280px;margin:0 auto}
  .logo{display:flex;align-items:center;justify-content:center;gap:9px}
  nav .logo{min-height:38px}
  .logo svg{width:38px;height:auto}
  nav .logo svg{width:42px}
  .logo .wordmark{font-family:var(--font-logo);font-size:21px;font-weight:700;letter-spacing:-.02em;color:#fff}
  .logo .hub{font-weight:400;color:var(--muted)}
  .nav-links{display:flex;gap:38px;font-size:15px;font-weight:500}
  .nav-links a{opacity:.75;transition:opacity .15s}
  .nav-links a:hover{opacity:1}
  @media(max-width:900px){.nav-links{display:none}}
  .foot-links{display:flex;gap:22px;flex-wrap:wrap}
  .foot-links a{font-size:14px;color:var(--muted);transition:color .25s var(--ease-soft)}
  .foot-links a:hover{color:var(--white)}
  /* No toque estes eram os únicos alvos abaixo do confortável: 21px de
     altura, a altura da própria linha de texto. O respiro vertical leva o
     alvo a 43px sem mexer no desenho, e some no ponteiro, onde 21px basta. */
  @media(max-width:880px){
    .foot-links a{display:inline-block;padding-block:11px}
  }
  /* sem caixa: só o símbolo e o texto (pedido da usuária; o print dela era
     este logo do rodapé, não o lockup da hero, que nunca teve caixa) */
  footer .logo{min-height:38px}

  /* ================= MEGA-MENU (casa canônica) =================
     Quatro categorias no desktop: Produtos e Soluções abrem painéis, Preços é
     link direto, Recursos abre lista. O markup vive no <nav> de cada página
     (o repo duplica o nav por arquivo); o estilo e o comportamento vivem numa
     casa só: aqui e no nav-menu.js. No mobile o .nav-links some (regra acima)
     e o nav-menu.js remonta as categorias como acordeões no drawer. */
  .mm-item{display:flex;align-items:center}
  /* os itens sem submenu (Planos, Dúvidas) recebem o mesmo tratamento de
     altura e alinhamento dos que têm caret, senão ficam tortos na linha */
  .nav-links > .mm-link{
    display:inline-flex;align-items:center;
    padding:6px 0;line-height:1.2;
  }
  .mm-trigger{
    display:inline-flex;align-items:center;gap:6px;
    background:none;border:0;cursor:pointer;padding:6px 2px;
    font-family:var(--font);font-size:15px;font-weight:500;color:#fff;
    opacity:.75;transition:opacity .15s;
  }
  .mm-trigger:hover,.mm-trigger[aria-expanded="true"]{opacity:1}
  .mm-caret{width:15px;height:15px;transition:transform .25s var(--ease-soft,ease)}
  .mm-trigger[aria-expanded="true"] .mm-caret{transform:rotate(180deg)}
  .mm-link{opacity:.75;transition:opacity .15s}
  .mm-link:hover{opacity:1}
  .mm-panel{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
    z-index:60;padding:18px;border-radius:18px;
    max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:rgba(200,173,255,.55) rgba(255,255,255,.04);
    background:rgba(10,14,33,.97);border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
    opacity:0;transition:opacity .28s var(--ease-soft,ease), transform .28s var(--ease-soft,ease);
    pointer-events:none;
  }
  .mm-panel::-webkit-scrollbar{width:10px}
  .mm-panel::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
  .mm-panel::-webkit-scrollbar-thumb{
    background:rgba(200,173,255,.55);background-clip:padding-box;
    border:3px solid transparent;border-radius:999px;
  }
  .mm-panel::-webkit-scrollbar-thumb:hover{background-color:rgba(200,173,255,.72)}
  .mm-panel.open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  .mm-panel[hidden]{display:none}
  /* Produtos: painel largo com cabeçalho e grade.
     O cabeçalho (.mm-head) saiu do markup das 27 páginas do Hub: lá o painel
     abre direto na caixa do Marvin mais as colunas de apps. Estas regras ficam
     porque continuam servindo as 12 páginas de fora do Hub, que ainda rodam o
     menu antigo e usam a mesma classe. Não são órfãs, e apagá-las quebraria
     essas 12. */
  .mm-wide{width:min(920px,calc(100vw - 40px))}
  .mm-head{
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    padding:4px 10px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mm-head-tx b{display:block;font-family:var(--font);font-size:17px;font-weight:600;color:#fff}
  .mm-head-tx span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
  .mm-head-cta{display:flex;gap:10px;flex:none}
  .mm-grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2px 10px;padding:12px 0;
  }
  .mm-app{
    display:flex;align-items:flex-start;gap:11px;
    padding:9px 10px;border-radius:12px;
    scroll-margin-block:12px;
    opacity:1 !important;
    transition:background .18s;
  }
  .mm-app:hover{background:rgba(255,255,255,.05)}
  .mm-ic{
    width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;
    border-radius:9px;background:rgba(255,255,255,.05);
  }
  /* a lição do repo: altura fixa, largura livre (o Marvin é deitado) */
  .mm-ic img{height:17px;width:auto;display:block;aspect-ratio:1272/912  /* aspect-ratio reserva a largura antes de a imagem chegar. Sem ela a largura fica em auto e o menu escorrega de lado no primeiro carregamento, em 36 páginas. Resolver aqui evita editar as 36. */}
  .mm-tx{min-width:0}
  .mm-tx b{display:block;font-family:var(--font);font-size:13.5px;font-weight:600;color:#fff;line-height:1.3}
  /* selo "Em breve" de app ainda não lançado (Agenda, Helpdesk, Fiscal): pill
     fantasma derivada do .pc-tag.ghost dos planos, menor que o nome e em cor
     sólida. Uma regra só, duas casas: .mm-soon no megamenu (vive dentro do <b>
     do .mm-tx de propósito: é assim que a gaveta mobile, que serializa o
     innerHTML do <b> no nav-menu.js, a carrega junto) e .soon-tag na grade de
     apps da home (irmã do h3 dentro do .app-top). */
  .mm-soon,.soon-tag{
    display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-left:6px;
    font-family:var(--font);font-size:8.5px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;line-height:1;
    color:#AEB6D6;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.16);border-radius:99px;
    padding:3px 7px;white-space:nowrap;transform:translateY(-1px);
  }
  /* cadeado da pill: mesma cor sólida do texto, menor que ele; a margem vertical
     negativa impede o svg de 9px de esticar a pill (quem dita a altura é o texto) */
  .mm-soon svg,.soon-tag svg{flex:none;display:block;width:9px;height:9px;margin:-1px 0}
  .mm-tx small{
    display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:1px;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  /* Produtos: os apps agrupados por área. O rótulo do grupo é o mesmo .mm-lbl
     do menu Soluções, de propósito: o drawer mobile (nav-menu.js) varre
     ".mm-panel .mm-lbl, .mm-panel a" na ordem do DOM, então ele monta os
     mesmos grupos no mobile sozinho, sem uma linha de JS. A cor da área vem
     inline em --area-c, lida dos cards da home, e pinta só o rótulo e o
     ponto: os ícones dos apps mantêm as cores originais deles. */
  /* O Marvin nao e o decimo sexto app, e a IA que atravessa os outros quinze.
     Por isso ele nao tem area e por isso o box precisa ler como outra
     natureza, nao como um item da lista com o fundo mais claro: ganha uma luz
     vindo de tras do logo, uma borda que nenhum outro item tem, respiro maior
     e um separador que fecha o bloco antes dos grupos comecarem.
     O azul e o #7AA0FF, mais claro que o #3972FD do site. A escolha e
     deliberada: o #3972FD e a cor da area Receita, cujo rotulo cai logo
     abaixo deste box, e nesse tom exato o Marvin passava a ler como cabecalho
     do grupo azul, que e o oposto do motivo dele estar fora dos grupos. */
  .mm-feat{
    grid-column:1/-1;position:relative;align-items:center;gap:14px;
    margin-bottom:18px;padding:13px 14px;border-radius:14px;
    background:
      radial-gradient(120% 180% at 6% 0%, rgba(122,160,255,.12), transparent 58%),
      rgba(255,255,255,.045);
    border:1px solid rgba(122,160,255,.30);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px -20px rgba(122,160,255,.38);
  }
  .mm-feat::after{
    content:"";position:absolute;left:10px;right:10px;bottom:-9px;height:1px;
    background:rgba(255,255,255,.08);
  }
  .mm-feat:hover{
    background:
      radial-gradient(120% 180% at 6% 0%, rgba(122,160,255,.18), transparent 58%),
      rgba(255,255,255,.065);
    border-color:rgba(122,160,255,.44);
  }
  /* o logo e oficial e colorido: ganha presenca por tamanho e moldura, nunca
     por recoloracao */
  .mm-feat .mm-ic{
    width:38px;height:38px;border-radius:11px;
    background:rgba(122,160,255,.13);border:1px solid rgba(122,160,255,.26);
  }
  .mm-feat .mm-ic img{height:21px}
  .mm-feat .mm-tx b{font-size:15px}
  .mm-feat .mm-tx small{font-size:12px;color:#B9C2D8;-webkit-line-clamp:2}
  .mm-gcol{display:flex;flex-direction:column;gap:16px;min-width:0}
  .mm-group{min-width:0}
  .mm-group .mm-lbl{
    display:flex;align-items:center;gap:7px;
    margin:0 0 5px;padding-left:10px;color:var(--area-c);
  }
  .mm-group .mm-lbl::before{
    content:"";flex:none;width:6px;height:6px;border-radius:999px;
    background:var(--area-c);
  }
  /* Soluções: três colunas */
  .mm-cols{display:flex;gap:34px;padding:20px 24px}
  .mm-col{min-width:150px}
  .mm-lbl{
    margin:0 0 9px;font-family:var(--font);
    font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);
  }
  .mm-col a{
    display:block;padding:7px 0;font-size:14px;color:#dfe3f2;
    opacity:1 !important;transition:color .15s;
  }
  .mm-col a:hover{color:#fff}
  /* Recursos: lista simples */
  .mm-list{min-width:220px;padding:12px}
  .mm-list a{
    display:block;padding:10px 12px;border-radius:10px;
    font-size:14px;color:#dfe3f2;opacity:1 !important;transition:background .18s;
  }
  .mm-list a:hover{background:rgba(255,255,255,.05)}
  @media(prefers-reduced-motion:reduce){
    .mm-panel{transition:none}
    .mm-caret{transition:none}
  }

  /* drawer mobile: grupos em acordeão (montados pelo nav-menu.js) */
  .nd-group-head{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:48px;background:none;border:0;cursor:pointer;padding:12px 6px;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-family:var(--font);font-size:16.5px;font-weight:500;color:#dfe3f2;
  }
  .nd-group-head svg{width:16px;height:16px;transition:transform .25s var(--ease-soft,ease)}
  .nd-group-head[aria-expanded="true"] svg{transform:rotate(180deg)}
  .nd-sub{display:none;flex-direction:column;padding:4px 0 8px}
  .nd-sub.open{display:flex}
  .nd-sub a{
    display:flex;align-items:center;min-height:44px;
    font-size:14.5px !important;padding:10px 6px 10px 18px !important;
    border-bottom:0 !important;color:#AEB6D6 !important;
  }
  .nd-sub a:hover{color:#fff !important}
  /* ícone do app na gaveta: a pastilha do .mm-ic do dropdown em versão menor,
     serializada pelo nav-menu.js a partir do próprio markup do painel */
  .nd-sub a .nd-ic{
    flex:none;display:grid;place-items:center;width:26px;height:26px;
    margin-right:10px;border-radius:8px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  }
  .nd-sub a .nd-ic img{height:13px;width:auto;display:block}
  .nd-sub .nd-lbl{
    padding:12px 6px 4px 18px;font-size:10.5px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  }
  @media(prefers-reduced-motion:reduce){.nd-group-head svg{transition:none}}

  /* ===== Menu mobile (hamburger + drawer) ===== */
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 11px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);cursor:pointer;transition:background .2s,border-color .2s}
  .nav-burger:hover{background:rgba(255,255,255,.08)}
  .nav-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .28s var(--ease,ease),opacity .2s}
  .nav-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-burger.on span:nth-child(2){opacity:0}
  .nav-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* ===== Canto direito do nav: ícone da Central de Ajuda + CTA =====
     Sem wrapper de propósito. A CTA precisa continuar FILHA DIRETA do .nav-in,
     porque tanto o site.css (esconder no mobile, virada do nav claro) quanto as
     páginas do Hub (o acabamento azul exclusivo da /crm) a estilizam por
     seletor de filho direto `.nav-in > a.btn`. Dentro de um wrapper esses
     seletores param de casar e a CTA perde o acabamento, sem erro nenhum.
     O encaixe então vem de margem automática: com auto no .nav-links e no
     .nav-help, a folga da barra se divide em dois vãos iguais (logo | vão |
     categorias | vão | ícone+CTA), o que reproduz exatamente o space-between
     de antes e ainda mantém o par colado no fim. O :has() limita a mudança às
     páginas que têm o ícone; as outras 19 seguem no space-between puro. */
  .nav-in:has(.nav-help) .nav-links{margin-left:auto}
  /* Círculo dimensionado pela CTA que fica ao lado, não pelo burger: 38px é o
     min-height do .btn-sm, então o ícone tem a altura exata dela e as duas peças
     alinham topo e base. Borda, fundo, opacidade e hover vêm compartilhados lá
     do .btn-slate; aqui só entram forma, posição e transição. */
  .nav-help{
    display:flex;align-items:center;justify-content:center;flex:none;
    width:38px;height:38px;border-radius:999px;color:#fff;
    margin-left:auto;margin-right:10px;
    transition:transform .25s ease,border-color .25s ease,background-color .25s ease;
  }
  .nav-help svg{width:18px;height:18px}
  /* o ícone NÃO se esconde no mobile: a CTA sai, ele fica ao lado do burger,
     que é onde o acesso ao suporte mais importa */
  @media(max-width:900px){.nav-in>a.btn{display:none}.nav-burger{display:flex}}
  .nav-drawer{position:fixed;inset:0;z-index:3000}
  .nav-drawer[hidden]{display:none}
  .nd-backdrop{position:absolute;inset:0;background:rgba(4,6,15,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .28s ease}
  .nav-drawer.open .nd-backdrop{opacity:1}
  .nd-back{position:absolute;top:20px;left:20px;z-index:1;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#dfe3f2;cursor:pointer;transition:background .2s,color .2s}
  .nd-back:hover{background:rgba(255,255,255,.1);color:#fff}
  .nd-back svg{width:20px;height:20px}
  .nd-panel{position:absolute;top:0;right:0;height:100%;width:min(340px,88vw);display:flex;flex-direction:column;gap:2px;padding:76px 20px 24px;
    background:linear-gradient(180deg,rgba(16,18,38,.98),rgba(8,10,24,.99));border-left:1px solid rgba(255,255,255,.1);box-shadow:-30px 0 80px -30px rgba(0,0,0,.8);
    transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
  .nav-drawer.open .nd-panel{transform:none}
  .nd-panel a:not(.nd-cta){display:flex;align-items:center;min-height:48px;font-family:var(--font);font-size:16.5px;font-weight:500;color:#dfe3f2;padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;transition:color .15s}
  .nd-panel a:not(.nd-cta):active,.nd-panel a:not(.nd-cta):hover{color:#fff}
  .nd-cta{margin-top:18px;text-align:center;justify-content:center;width:100%}
  @media(prefers-reduced-motion:reduce){.nd-backdrop,.nd-panel,.nav-burger span{transition:none}}

  /* ================= HERO ================= */
  .hero{position:relative;padding:64px 0 0;overflow:hidden;text-align:center}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(900px 420px at 42% -8%, rgba(57,114,253,.14), transparent 60%),
      radial-gradient(800px 420px at 62% 0%, rgba(163,100,255,.1), transparent 60%),
      /* leve glow azul atrás do mockup */
      radial-gradient(820px 420px at 50% 76%, rgba(57,114,253,.12), transparent 64%);
  }
  .hero-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}
  .hero h1{
    font-size:clamp(36px,4.3vw,60px);font-weight:600;margin:40px auto 0;
    letter-spacing:-.032em;line-height:1.14;color:var(--white);max-width:1020px;
  }
  /* Lockup de assinatura acima do h1: ícone do Marvin + "Marvee Hub".
     Reto (sem rotação), discreto, e o texto em cor sólida (lei da marca). */
  .hero h1 .hero-lockup{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:fit-content;margin:0 auto 23px;
    font-family:var(--font);font-size:15px;font-weight:600;
    letter-spacing:0;line-height:1.1;color:var(--white);
  }
  /* o Marvin é deitado (1272x912). Ancorar pela altura alinha ele com o texto
     ao lado e preserva a proporção nativa: nunca travar as duas dimensões. */
  .hero h1 .hero-lockup img{height:23px;width:auto;display:block;flex:none}
  .hero h1 .hl-tx{color:var(--white)}
  .hero .sub{
    font-size:clamp(18px,2vw,28px);color:var(--white);margin:38px auto 0;max-width:940px;
    line-height:1.4;letter-spacing:-.03em;font-weight:400;
  }
  .hero .sub b{font-weight:600}
  .hero-cta{display:flex;gap:14px;margin-top:52px;justify-content:center;flex-wrap:nowrap}
  .trust{display:flex;align-items:center;gap:14px;margin-top:56px;font-size:17px;color:var(--muted);justify-content:center;flex-wrap:wrap;letter-spacing:-.03em}
  .trust .av{display:flex}
  .trust .av img{width:40px;height:40px;border-radius:50%;border:2px solid var(--bg);margin-left:-13px;object-fit:cover}
  .trust .av img:first-child{margin-left:0}
  .trust .t-short{display:none}

  /* Composição do hero: a tela do Hub, viva (mockup, não é imagem)
     Camadas de profundidade, da mais funda para a mais próxima:
       0. .hero-light .haze  (luz de fundo, respirando)
       1. .mock-floor        (sombra projetada do mockup inclinado)
       2. .mock-frame        (a janela, com rotateX/rotateY)
     O parallax do mouse escreve --mx/--my em .hero-stage (site.js). */
  /* 56px era a distância até o chat, que abria o palco. Agora quem abre é a
     janela do mockup, que tem peso visual maior e pede mais ar. */
  .hero-stage{position:relative;z-index:1;margin-top:78px;--mx:0;--my:0}
  /* luz azul contornando a tela */
  .hero-light{
    /* a luz envolvia chat mais mockup; agora acompanha só a janela */
    position:absolute;left:50%;top:-44px;
    width:min(1240px,108vw);height:calc(100% + 64px);
    pointer-events:none;z-index:0;
    transform:translateX(-50%) translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px), 0);
    transition:transform 1.1s var(--ease-soft);
  }
  .hero-light .haze{
    position:absolute;inset:0;
    background:
      radial-gradient(56% 62% at 50% 44%, rgba(57,114,253,.22), transparent 72%),
      radial-gradient(34% 40% at 62% 30%, rgba(163,100,255,.13), transparent 74%);
    filter:blur(14px);
    animation:hazeBreathe 14s var(--ease-soft) infinite;
    will-change:opacity, transform;
  }
  @keyframes hazeBreathe{
    0%,100%{opacity:.74;transform:scale(.985)}
    50%{opacity:1;transform:scale(1.025)}
  }
  /* ===== .hero-chat: componente, não mais parte do hero =====
     Ele saiu da home, mas continua vivo e documentado na vitrine do design
     system (/componentes, src/content/componentes.html:199), que renderiza o
     markup e roda o typeLoop do site.js. Por isso a aparência fica aqui.
     O que saiu foram as calibragens que só existiam para ele sobrepor o topo
     do mockup: o margin-bottom de -96px, o deslocamento de parallax e o
     z-index de camada. A vitrine já declarava o próprio margin e box-shadow. */
  .hero-chat{
    position:relative;max-width:959px;margin:0 auto;
    background:var(--chat-bg);border:1.5px solid var(--chat-line);
    border-radius:22px;padding:26px 28px 20px;text-align:left;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.85), 0 0 90px -14px rgba(57,114,253,.5);
    transition:box-shadow .6s var(--ease-soft), border-color .45s var(--ease-soft);
  }
  /* traçado gradiente animado no hover (borda, nunca texto): mesma receita do .btn-grad */
  .hero-chat::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
    background:linear-gradient(92deg,#3972FD,#A364FF,#FA9800,#34D399,#5BC0BE,#3972FD);
    background-size:300% 100%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    opacity:0;transition:opacity .45s var(--ease-soft);
  }
  .hero-chat:hover,.hero-chat:focus-within{
    border-color:transparent;
    box-shadow:0 46px 100px -20px rgba(0,0,0,.88), 0 0 120px -12px rgba(57,114,253,.6);
  }
  .hero-chat:hover::before,.hero-chat:focus-within::before{
    opacity:1;animation:gradSlide 4.5s linear infinite;
  }
  .hero-chat .q{font-family:var(--font);font-size:21px;color:var(--muted-2);min-height:28px;letter-spacing:-.01em}
  .hero-chat .q .cursor{display:inline-block;width:2px;height:1.1em;background:var(--muted-2);vertical-align:text-bottom;animation:cursorBlink 1.15s var(--ease-soft) infinite}
  @keyframes cursorBlink{0%,42%{opacity:1}58%,100%{opacity:.06}}
  .hero-chat .row{display:flex;align-items:center;justify-content:space-between;margin-top:22px}
  .hero-chat .icons{display:flex;gap:16px}
  .hero-chat .right{display:flex;align-items:center;gap:14px}
  .hero-chat .hint{font-family:var(--font);font-size:14px;color:var(--muted-2)}
  .hero-chat .send{
    width:36px;height:36px;border-radius:7px;background:#fff;border:none;cursor:pointer;
    display:grid;place-items:center;color:#04081F;transition:transform .3s var(--ease-soft);
  }
  .hero-chat .send:hover{transform:scale(1.06)}
  .hero-chat .send svg{width:18px;height:18px}

  /* ===== Mockup vivo da tela do Hub ===== */
  .hero-mock{
    position:relative;z-index:1;max-width:1060px;margin:0 auto;
    perspective:1050px;perspective-origin:50% 4%;
  }
  /* sombra do conjunto: o topo inclina pra trás, então ela sobe e alarga */
  .mock-floor{
    position:absolute;left:50%;top:-64px;z-index:0;pointer-events:none;
    width:101%;height:188px;
    transform:translateX(-50%) translate3d(calc(var(--mx) * 14px), 0, 0);
    background:radial-gradient(64% 100% at 50% 100%, rgba(1,2,8,.96), rgba(1,2,8,0) 78%);
    filter:blur(29px);
    transition:transform 1.1s var(--ease-soft);
  }
  .mock-frame{
    position:relative;z-index:1;
    height:clamp(420px,37vw,478px);
    border-radius:11px 11px 0 0;overflow:hidden;
    border:.6px solid #5C5D5E;border-bottom:none;
    background:var(--bg-2);
    font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    transform-origin:50% 0;
    transform:
      rotateX(calc(10.5deg + var(--my) * -3.2deg))
      rotateY(calc(var(--mx) * 5.4deg))
      translateZ(0);
    transition:transform .85s var(--ease-soft);
    box-shadow:
      0 -30px 70px -30px rgba(0,0,0,.9),
      0 46px 90px -28px rgba(0,0,0,.92),
      0 16px 38px -16px rgba(0,0,0,.72),
      0 0 120px -20px rgba(57,114,253,.42),
      inset 0 1px 0 rgba(255,255,255,.07);
    will-change:transform;
  }
  /* a base da janela se dissolve no fundo da página */
  .mock-frame::after{
    content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
    background:linear-gradient(180deg,rgba(4,8,31,0) 81%,rgba(4,8,31,.58) 94%,var(--bg) 100%);
  }
  .mock-toolbar{
    display:flex;align-items:center;gap:14px;height:44px;padding:0 18px;
    background:rgba(35,37,38,.85);backdrop-filter:blur(12px);
    box-shadow:0 .5px 0 0 #585858;position:relative;z-index:2;
  }
  .mock-dots{display:flex;gap:8px}
  .mock-dots span{width:12px;height:12px;border-radius:50%}
  .mock-dots span:nth-child(1){background:#FF5F57}
  .mock-dots span:nth-child(2){background:#FEBC2E}
  .mock-dots span:nth-child(3){background:#28C840}
  .mock-tab{
    flex:1;max-width:460px;height:28px;border-radius:6px;background:rgba(255,255,255,.14);
    display:flex;align-items:center;gap:7px;padding:0 10px;
    font-family:var(--font);font-size:12.5px;color:#fff;margin-left:14px;
  }
  .mock-tab svg{width:13px;height:13px;flex:none}

  /* .shell > .app do protótipo. Duas telas empilhadas: a home e o Marvin.
     A troca lê como navegação de rota, com direção lateral e assentamento. */
  .mock-app{
    position:relative;height:calc(100% - 44px);text-align:left;overflow:hidden;
    background:
      radial-gradient(620px 300px at 12% 118%, rgba(91,192,190,.13), transparent 66%),
      radial-gradient(660px 320px at 88% 120%, rgba(163,100,255,.13), transparent 66%),
      var(--bg);
  }
  .mock-screen{
    position:absolute;inset:0;display:flex;flex-direction:column;
    transition:opacity .34s ease, transform .62s var(--ease-soft);
  }
  /* home: sai para a esquerda, no sentido de avançar na navegação */
  .mock-screen.is-home{opacity:1;transform:none}
  .mock-frame[data-scene="marvin"] .mock-screen.is-home,
  .mock-frame[data-scene="ask"] .mock-screen.is-home,
  .mock-frame[data-scene="think"] .mock-screen.is-home,
  .mock-frame[data-scene="answer"] .mock-screen.is-home{opacity:0;transform:translate3d(-4.5%,0,0) scale(.985)}
  /* Marvin: entra pela direita e fica pelas cenas de conversa */
  .mock-screen.is-marvin{opacity:0;transform:translate3d(7%,0,0) scale(.992);pointer-events:none}
  .mock-frame[data-scene="marvin"] .mock-screen.is-marvin,
  .mock-frame[data-scene="ask"] .mock-screen.is-marvin,
  .mock-frame[data-scene="think"] .mock-screen.is-marvin,
  .mock-frame[data-scene="answer"] .mock-screen.is-marvin{opacity:1;transform:none}

  /* ===== Marvin que pisca =====
     O corpo é o /site/marvin-logo.png que a página já carrega. A máscara abre
     uma janela no olho esquerdo (o miolo do PNG é transparente, então o buraco
     não aparece) e o SVG inline redesenha esse olho com os dois estados e os
     keyframes do marvin-wink.svg do protótipo. Custo: zero asset novo. */
  .mv-wink{position:relative;display:block;width:100%}
  .mv-wink img{
    width:100%;height:auto;display:block;
    -webkit-mask-image:
      linear-gradient(to right,#000 0 29.2%,transparent 29.2% 44.6%,#000 44.6% 100%),
      linear-gradient(to bottom,#000 0 26.8%,transparent 26.8% 58.3%,#000 58.3% 100%);
    mask-image:
      linear-gradient(to right,#000 0 29.2%,transparent 29.2% 44.6%,#000 44.6% 100%),
      linear-gradient(to bottom,#000 0 26.8%,transparent 26.8% 58.3%,#000 58.3% 100%);
    -webkit-mask-composite:source-over;
    mask-composite:add;
  }
  .mv-wink svg{position:absolute;inset:0;width:100%;height:100%}
  .mv-eye-open{
    fill:#fff;transform-box:fill-box;transform-origin:center;
    animation:marvinWinkOpen 4.5s ease-in-out infinite;
  }
  .mv-eye-shut{
    fill:none;stroke:#fff;stroke-width:38;stroke-linecap:round;
    opacity:0;animation:marvinWinkShut 4.5s ease-in-out infinite;
  }
  @keyframes marvinWinkOpen{
    0%{transform:scaleY(1);opacity:1}
    5%,7%{transform:scaleY(.1);opacity:0}
    12%,100%{transform:scaleY(1);opacity:1}
  }
  @keyframes marvinWinkShut{
    0%,3%{opacity:0}
    5%,7%{opacity:1}
    10%,100%{opacity:0}
  }

  /* topbar */
  .mock-top{
    height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;border-bottom:1px solid var(--line-2);
  }
  .mock-ws{display:flex;align-items:center;gap:8px}
  .mock-ws-tx{line-height:1.1}
  .mock-ws-tx b{display:block;font-size:12.5px;font-weight:700;color:var(--white)}
  .mock-ws-tx small{display:block;font-size:9.5px;color:var(--muted)}
  .mock-ws-av{
    width:24px;height:24px;border-radius:7px;background:#fff;
    display:grid;place-items:center;flex:none;
  }
  .mock-ws-av svg{width:14px;height:auto}
  .mock-chev{width:13px;height:13px;color:var(--muted);flex:none}
  .mock-top-r{display:flex;align-items:center;gap:12px}
  .mock-ic{position:relative;display:grid;place-items:center;color:var(--muted);border-radius:7px}
  .mock-ic svg{width:17px;height:17px}
  /* o waffle acende enquanto o painel está aberto */
  .mock-ic.is-waffle{transition:color .4s var(--ease-soft), background .4s var(--ease-soft);padding:4px;margin:-4px}
  .mock-frame[data-scene="waffle"] .mock-ic.is-waffle,
  .mock-frame[data-scene="pick"] .mock-ic.is-waffle{color:var(--white);background:rgba(255,255,255,.1)}
  .mock-badge{
    position:absolute;top:-5px;right:-6px;min-width:14px;height:14px;padding:0 4px;border-radius:8px;
    background:#E5484D;color:#fff;font-size:9px;font-weight:700;font-style:normal;
    display:grid;place-items:center;
  }
  .mock-av{
    width:24px;height:24px;border-radius:50%;flex:none;
    background:linear-gradient(140deg,#6FA8FF,#3972FD);
    border:1px solid rgba(255,255,255,.15);
    display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;
  }

  /* ===== corpo da home ===== */
  .mock-body{position:relative;flex:1;min-height:0;overflow:hidden}
  .mock-ask{max-width:700px;margin:0 auto;padding:30px 28px 0;text-align:center}
  .mock-ask .mv-wink{width:54px;margin:0 auto}
  .mock-greet{
    margin:14px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--white);
  }
  .mock-composer{
    margin-top:18px;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:15px;
    padding:13px 14px 9px;
  }
  .mock-composer-tx{display:block;font-size:12.5px;color:var(--muted);min-height:30px}
  .mock-composer-bar{display:flex;align-items:center;gap:4px;margin-top:4px}
  .mock-mini{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
  .mock-mini svg{width:14px;height:14px}
  .mock-send{
    margin-left:auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
    background:var(--card-2);color:var(--muted);
  }
  .mock-send svg{width:15px;height:15px}

  .mock-tools{
    list-style:none;margin:26px 0 0;padding:0;
    display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  }
  .mock-tools li{
    --c:126,132,166;display:flex;flex-direction:column;align-items:center;gap:7px;width:58px;
  }
  .mock-tool-ic{
    width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
    background:
      radial-gradient(125% 120% at 50% -12%, rgba(var(--c),.36), rgba(var(--c),.06) 52%, rgba(255,255,255,0) 100%),
      linear-gradient(180deg,#12162f,#090c1e);
    border:1px solid rgba(var(--c),.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 20px -7px rgba(var(--c),.22);
  }
  /* a lição da rodada 3: altura fixa, largura livre */
  .mock-tool-ic img{height:24px;width:auto;display:block}
  .mock-tool-ic svg{width:18px;height:18px;color:var(--muted)}
  .mock-tool-nm{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.2}

  /* ===== painel de apps (waffle) ===== */
  /* Abre logo abaixo da topbar, como no protótipo: 46px de topbar mais 6px de
     respiro. Os 54px de antes eram para escapar da faixa que o .hero-chat
     cobria; sem o chat, o painel volta a ancorar no botão que o abre. */
  .mock-waffle{
    position:absolute;top:52px;right:14px;z-index:6;width:270px;
    padding:9px;border-radius:16px;
    background:rgba(16,20,42,.94);border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 26px 60px -18px rgba(0,0,0,.75);
    opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;
    transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
    pointer-events:none;
  }
  .mock-frame[data-scene="waffle"] .mock-waffle,
  .mock-frame[data-scene="pick"] .mock-waffle{opacity:1;transform:none}
  .mw-fav{
    padding:9px;border-radius:12px;
    background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  }
  .mw-head{
    display:flex;align-items:center;justify-content:space-between;
    font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin-bottom:9px;
  }
  .mw-head svg{width:12px;height:12px}
  .mw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 4px}
  .mw-more{margin-top:9px;padding:0 9px}
  .mw-grid li{--c:126,132,166;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
  .mw-ic{
    width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
    background:
      radial-gradient(125% 120% at 50% -12%, rgba(var(--c),.34), rgba(var(--c),.06) 52%, rgba(255,255,255,0) 100%),
      linear-gradient(180deg,#12162f,#090c1e);
    border:1px solid rgba(var(--c),.22);
    transition:transform .45s var(--ease-soft), border-color .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
  }
  .mw-ic img{height:17px;width:auto;display:block}
  .mw-nm{
    font-size:8.5px;line-height:1.2;color:var(--muted);text-align:center;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /* o Marvin acende antes da tela trocar: é ele que estamos abrindo */
  .mock-frame[data-scene="pick"] .mw-marvin .mw-ic{
    transform:translateY(-3px) scale(1.06);
    border-color:rgba(var(--c),.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 26px -6px rgba(var(--c),.55);
  }
  .mock-frame[data-scene="pick"] .mw-marvin .mw-nm{color:var(--white)}
  .mw-all{
    display:block;text-align:center;margin-top:9px;padding:6px 0;
    font-size:10.5px;font-weight:600;color:#7FA6FF;
  }

  /* ===== tela do Marvin ===== */
  .mock-mv{display:flex;flex:1;min-height:0}
  /* a lateral aqui é histórico de conversas, não rail de apps */
  .mock-side{
    flex:0 0 176px;padding:14px 12px;
    border-right:1px solid var(--line-2);background:var(--bg-2);
    display:flex;flex-direction:column;min-height:0;
  }
  .ms-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .ms-nav li,.ms-act{
    display:flex;align-items:center;gap:9px;
    padding:7px 9px;border-radius:9px;
    font-size:11.5px;color:#C6CBDE;
  }
  .ms-nav svg,.ms-act svg{width:14px;height:14px;flex:none;color:var(--muted)}
  .ms-sep{height:1px;background:var(--line-2);margin:10px 4px}
  .ms-act.is-primary{
    border:1px solid rgba(255,255,255,.16);border-radius:999px;
    background:rgba(255,255,255,.05);color:var(--white);font-weight:600;
  }
  .ms-act + .ms-act{margin-top:3px}
  .ms-group{
    margin:14px 0 5px;padding:0 9px;
    font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--muted);
  }
  .ms-convs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;min-height:0}
  .ms-convs li{
    padding:6px 9px;border-radius:8px;font-size:11px;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* o estado inicial e a conversa ocupam o mesmo espaço e fazem cross-fade:
     na tela do Marvin a conversa SUBSTITUI o centro, não empurra como na home */
  .mock-mv-main{position:relative;flex:1;min-width:0;overflow:hidden}
  .mv-hello,.mv-conv{
    position:absolute;inset:0;
    transition:opacity .45s var(--ease-soft);
  }
  .mv-hello{padding:26px 24px 0;text-align:center;opacity:1}
  .mv-conv{display:flex;flex-direction:column;opacity:0;pointer-events:none}
  .mock-frame[data-scene="ask"] .mv-hello,
  .mock-frame[data-scene="think"] .mv-hello,
  .mock-frame[data-scene="answer"] .mv-hello{opacity:0}
  .mock-frame[data-scene="ask"] .mv-conv,
  .mock-frame[data-scene="think"] .mv-conv,
  .mock-frame[data-scene="answer"] .mv-conv{opacity:1}
  .mock-mv-main .mv-wink{width:50px;margin:0 auto}
  .mv-chips{
    list-style:none;margin:16px 0 0;padding:0;
    display:flex;justify-content:center;flex-wrap:wrap;gap:7px;
  }
  .mv-chips li{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 11px;border-radius:999px;
    border:1px solid var(--line);background:rgba(255,255,255,.03);
    font-size:10.5px;color:#C6CBDE;white-space:nowrap;
  }
  .mv-chips svg{width:12px;height:12px;flex:none;color:var(--muted)}
  .mock-mv-main .mock-composer{margin-top:14px;max-width:520px;margin-inline:auto}

  /* ===== conversa aberta (cenas ask / think / answer) =====
     A thread e as bolhas reaproveitam o vocabulário escrito na rodada 2
     (commit 6e48fc2). O que é novo veio da tela de conversa do protótipo:
     header com progresso, chip de ferramentas, bloco de destaque, os quatro
     cartões de métrica, as sugestões de follow-up e o composer em barra.
     Aqui a resposta não tem avatar do Marvin: a tela de conversa não usa. */
  .mv-conv-top{
    flex:none;display:flex;align-items:center;justify-content:space-between;
    padding:10px 20px;font-size:11px;color:var(--muted);
  }
  .mvc-tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mvc-pct{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:#C6CBDE;flex:none}
  .mvc-ring{
    width:10px;height:10px;border-radius:50%;font-style:normal;
    border:2px solid rgba(255,255,255,.18);border-top-color:var(--blue);
  }
  .mock-thread{
    list-style:none;margin:0;padding:0 20px;
    flex:1;min-height:0;
    display:flex;flex-direction:column;gap:7px;
  }
  .mv-day{
    align-self:center;flex:none;
    font-size:9px;font-weight:600;color:var(--muted);
    background:rgba(255,255,255,.04);border:1px solid var(--line-2);
    padding:2px 9px;border-radius:999px;margin-bottom:3px;
  }
  /* coluna, para a bolha e o horário empilharem. O alinhamento lateral que
     antes vinha de justify-content passa a vir de align-items: mesmo
     resultado nas duas telas do hero, e agora cabe o .mv-meta embaixo. */
  .mock-msg{display:flex;flex-direction:column;align-items:flex-start}
  .mock-msg.is-me{align-items:flex-end}
  /* horário da mensagem, como o .meta do protótipo */
  .mv-meta{margin-top:4px;font-size:9px;line-height:1;color:var(--muted);opacity:.8}
  .mock-msg-body{
    margin:0;max-width:78%;
    background:rgba(255,255,255,.05);border:1px solid var(--line);
    padding:8px 12px;border-radius:4px 13px 13px 13px;
    font-size:11.5px;line-height:1.5;color:#D7DBEA;
  }
  /* a bolha do usuário é escura e sólida, como na tela de conversa */
  .mock-msg.is-me .mock-msg-body{background:#232B4D;border:0;color:#fff;border-radius:12px}
  /* as bolhas entram conforme a cena avança. O display:none é escopado ao
     .mock-frame porque as mesmas classes são reusadas fora dele (no mockup do
     .moat), onde não há cena controlando o que aparece. */
  .mock-frame .mock-msg.is-me,
  .mock-frame .mock-msg.is-typing,
  .mock-frame .mock-msg.is-answer{display:none}
  .mock-frame[data-scene="ask"] .mock-msg.is-me,
  .mock-frame[data-scene="think"] .mock-msg.is-me,
  .mock-frame[data-scene="answer"] .mock-msg.is-me{display:flex;animation:mockMsgIn .5s var(--ease-soft) both}
  .mock-frame[data-scene="think"] .mock-msg.is-typing{display:flex;animation:mockMsgIn .5s var(--ease-soft) both}
  .mock-frame[data-scene="answer"] .mock-msg.is-answer{display:flex;animation:mockMsgIn .6s var(--ease-soft) both}
  @keyframes mockMsgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  .mock-dots3{display:inline-flex;gap:4px;align-items:center;height:1.2em}
  .mock-dots3 i{
    width:5px;height:5px;border-radius:50%;background:var(--muted);
    animation:mockThink 1.35s var(--ease-soft) infinite;
  }
  .mock-dots3 i:nth-child(2){animation-delay:.18s}
  .mock-dots3 i:nth-child(3){animation-delay:.36s}
  @keyframes mockThink{0%,100%{opacity:.28;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

  .mv-ans{min-width:0;width:100%}
  .mv-tools{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 10px;border-radius:999px;margin-bottom:7px;
    border:1px solid var(--line);background:rgba(255,255,255,.03);
    color:var(--muted);font-size:10px;font-weight:500;
  }
  .mv-tools svg{width:11px;height:11px;color:var(--purple)}
  .mv-tools .mv-tools-chev{color:var(--muted)}
  .mv-highlight{
    margin:0;padding:9px 12px;border-radius:12px;
    font-size:11px;line-height:1.55;color:#D7DBEA;
    background:rgba(250,152,0,.08);border:1px solid rgba(250,152,0,.16);
  }
  .mv-highlight b{color:var(--white);font-weight:700}
  .mv-stats{
    list-style:none;margin:9px 0 0;padding:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;
  }
  .mv-stats li{
    --c:126,132,166;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:7px 10px;border-radius:11px;min-width:0;
    background:radial-gradient(130% 110% at 50% -20%, rgba(var(--c),.13), transparent 62%), rgba(255,255,255,.03);
    border:1px solid rgba(var(--c),.2);
  }
  .mvs-l{
    display:block;font-size:7.5px;font-weight:700;letter-spacing:.42px;text-transform:uppercase;
    color:var(--muted);line-height:1.25;
  }
  .mvs-v{display:block;font-size:16px;font-weight:800;line-height:1.1;flex:none}
  .mvs-v.is-orange{color:var(--orange)}
  .mvs-v.is-red{color:#F87171}
  .mvs-v.is-green{color:var(--green)}
  .mv-sugs{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
  .mv-sugs li{
    padding:5px 11px;border-radius:999px;font-size:10px;font-weight:600;
    border:1px solid var(--line);color:var(--white);
  }
  .mv-sugs li.is-primary{background:rgba(57,114,253,.16);border-color:rgba(57,114,253,.3)}
  /* composer desce e vira barra no rodapé */
  .mv-bar{
    flex:none;display:flex;align-items:center;gap:9px;
    margin:10px 20px 14px;padding:8px 12px;
    background:var(--card);border:1px solid var(--line);border-radius:999px;
    color:var(--muted);
  }
  .mv-bar > svg{width:14px;height:14px;flex:none}
  .mv-bar-tx{flex:1;min-width:0;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mv-bar-send{
    width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:var(--card-2);
  }
  .mv-bar-send svg{width:13px;height:13px}
  /* O vidro vive no card externo. Aqui sobra só um reflexo técnico e estático,
     sem uma segunda camada de blur ou varredura concorrendo com a superfície. */

  /* Mockup dentro do .mp-viz: a conversa do Marvin, montada com o vocabulário
     .mock-* do hero. Entra devagar e escalonada, sem cor pulsando. */
  /* .is-conv: o mockup é uma conversa, e conversa tem altura própria. Ela muda
     com a largura (as bolhas e as métricas quebram em mais linhas), então
     altura fixa aqui corta conteúdo em vez de sobrar espaço. Quem consome o
     padrão com um mockup ilustrativo continua na altura fixa do .mp-viz. */
  /* 2 colunas: com 4 métricas vira 2x2, com 3 vira 2+1. Em 3 colunas os
     rótulos quebravam na largura estreita do mockup. */
  /* a bolha da pergunta de volta vive dentro da resposta, acima do destaque */
  /* o valor herda a cor da própria métrica, como no protótipo */
  @keyframes mvMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* ================= GLOW CARDS (borda que segue o mouse) ================= */
  .glow-card{position:relative}
  .glow-card::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    border:1.6px solid transparent;
    background:linear-gradient(calc(var(--start,0) * 1deg),
      #3972FD, #A364FF, #FA9800, #34D399, #5BC0BE) border-box;
    -webkit-mask:
      linear-gradient(#0000,#0000),
      conic-gradient(from calc((var(--start,0) - 60) * 1deg),
        #0000 0deg, #fff 60deg, #fff 100deg, #0000 160deg);
    -webkit-mask-clip:padding-box, border-box;
    -webkit-mask-composite:source-in;
    mask:
      linear-gradient(#0000,#0000) padding-box,
      conic-gradient(from calc((var(--start,0) - 60) * 1deg),
        #0000 0deg, #fff 60deg, #fff 100deg, #0000 160deg) border-box;
    mask-composite:intersect;
    opacity:var(--active,0);
    transition:opacity .45s ease;
  }

  /* ================= SEÇÕES ================= */
  section{position:relative}
  .pad{padding:88px 0}
  .center{text-align:center}
  .h2{font-size:clamp(30px,3.4vw,46px);margin-top:24px;font-weight:600;letter-spacing:-.03em;line-height:1.18;color:#E8ECF8}
  /* os 24px acima eram o respiro até o rótulo de seção. Onde o h2 abre o bloco
     sozinho, sem rótulo, eles sobram e soltam o título do topo. */
  .h2.h2-top{margin-top:0}
  .lede{font-size:clamp(16px,1.6vw,21px);max-width:880px;margin:20px auto 0;color:var(--muted);line-height:1.65;letter-spacing:-.02em}


  /* stats — azul e roxo */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
  /* os 56px acima separam os números da lede. No #problema não há mais título
     nem lede (só os números), e eles viravam espaço morto somado ao padding
     da seção. */
  #problema .stats{margin-top:0}
  .stat{text-align:center;position:relative}
  /* traço vertical azul esmaecido entre os números (desktop) */
  .stat + .stat::before{
    content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
    width:2px;height:58px;border-radius:2px;background:rgba(57,114,253,.28);
  }
  .stat .n{
    font-family:var(--font);font-size:clamp(56px,6.4vw,84px);font-weight:700;line-height:1;
    letter-spacing:-.035em;font-variant-numeric:proportional-nums;color:#fff;
    text-shadow:0 0 56px rgba(123,92,255,.3);
  }
  /* O tabular-nums existe por causa do count-up: sem ele o número muda de
     largura a cada quadro e treme. Só que ele dá a todo dígito a mesma caixa, e
     na Manrope o "1", que é estreito, fica boiando (o "1" do 100% afastado do
     zero). Por isso a largura fixa vale só ENQUANTO conta: o site.js põe
     .is-counting no primeiro quadro e tira no último. O estado final, que é o
     que fica na tela, é proporcional, e não depende do JS ter rodado. */
  .stat .n.is-counting{font-variant-numeric:tabular-nums}
  .stat .l{font-size:14.5px;color:var(--muted);margin-top:14px;font-weight:500;max-width:220px;margin-left:auto;margin-right:auto;line-height:1.45}

  /* pain cards */
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:56px}
  .pain{
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:18px;
    padding:24px 20px;text-align:left;transition:transform .25s;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .pain:hover{transform:translateY(-4px)}
  .pain .ic{
    width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;
    background:rgba(57,114,253,.06);border:1px solid var(--line-2);
    margin-bottom:24px;color:#5E72A8;
    transition:color .3s ease, background .3s ease;
  }
  .pain:hover .ic{color:var(--pain-c,var(--blue));background:rgba(57,114,253,.1)}
  .pain h3{font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:-.02em;line-height:1.3}
  .pain p{font-size:13.5px;color:var(--muted);line-height:1.55}

  /* ================= A VIRADA ================= */
  /* A frase-guia é um kicker do título, não um segundo título: menor,
     colada no h2, com as linhas seguindo o fluxo MDC -> Brain -> Marvin. */
  .virada-tag{
    margin-top:22px;font-family:var(--font);font-size:clamp(18px,2vw,26px);
    color:var(--white);font-weight:500;letter-spacing:-.02em;
    display:flex;align-items:center;justify-content:center;gap:16px;
  }
  .virada-tag b{font-weight:700}
  .vt-item{white-space:nowrap}
  /* linha animada conectando MDC → Brain → Marvin (fluxo de dados) */
  .vt-line{position:relative;flex:0 0 auto;width:clamp(30px,4vw,56px);height:2px;border-radius:2px;overflow:hidden;
    background:color-mix(in srgb, var(--purple) 24%, transparent)}
  .vt-line i{position:absolute;inset:0;border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--blue), var(--purple), transparent);
    transform:translateX(-100%);animation:vtFlow 2.8s ease-in-out infinite}
  .vt-line:nth-of-type(4) i{animation-delay:1.4s}
  @keyframes vtFlow{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
  @keyframes vtFlowV{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

  /* Hub radial (referência Scalemont): nós HTML posicionados por porcentagem
     sobre um container de proporção fixa, fios SVG por baixo (o container
     segura o aspect-ratio, o preserveAspectRatio "none" só veste o SVG).
     A entrada é regida pelo site.js: .vh-go dispara uma vez (desenha fios e
     revela nós de dentro pra fora, por anel r0/r1/r2) e .is-in liga/desliga
     os pulsos conforme a seção está na tela. */
  .virada-stage{
    position:relative;margin:52px auto 0;width:min(1140px,100%);aspect-ratio:1200/680;
    perspective:1600px;perspective-origin:50% 48%;transform-style:preserve-3d
  }
    /* brilho amplo e discreto atrás do centro */
  .virada-stage::after{
    content:"";position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;
    transform:translate(-50%,-50%);pointer-events:none;
    background:radial-gradient(circle,rgba(57,114,253,.12) 0%,rgba(57,114,253,.04) 42%,transparent 68%);
  }
  .vh-wires{
    position:absolute;inset:0;width:100%;height:100%;overflow:visible;
    transform-style:preserve-3d
  }
  .vh-wires-v{display:none}
  /* fios: cinza muito fraco no repouso; a entrada os desenha do centro pro
     nó (dashoffset 1 -> 0 com pathLength=1), anel por anel */
  .vh-wire{
    fill:none;stroke:rgba(148,163,199,.17);stroke-width:1.3;stroke-linecap:round;
    stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset .9s var(--ease-soft);
    transition-delay:calc(.15s + var(--ring)*.38s);
  }
  /* dois anéis: r0 são os eixos retos (a cruz entra primeiro), r1 os diagonais */
  .vh-wire.r0{--ring:0}.vh-wire.r1{--ring:1}
  .vh-go .vh-wire{stroke-dashoffset:0}
  /* Um pulso difuso por fio. pathLength=100 normaliza todos os paths. O
     período é 22 + 100 = 122; offset 22 nasce no nó e 122 chega ao centro. */
  .vh-pulse{
    fill:none;stroke:rgba(190,214,255,.36);stroke-width:1.35;stroke-linecap:round;
    stroke-dasharray:22 100;stroke-dashoffset:22;opacity:0;
    filter:
      drop-shadow(0 0 7px rgba(185,211,255,.3))
      drop-shadow(0 0 18px rgba(132,177,248,.16))
      drop-shadow(0 0 34px rgba(90,140,235,.07));
  }
  /* Acoplamento obrigatório: vhPulse chega em 72% de 8.8s, exatamente onde
     vhCoreArrival atinge o pico. Se viagem, ciclo ou chegada mudarem, os dois
     keyframes e as duas durações precisam mudar juntos. */
  .vh-go .vh-pulse{opacity:1;animation:vhPulse 8.8s cubic-bezier(.45,.05,.55,.95) infinite}
  .virada-stage:not(.is-in) .vh-pulse{animation-play-state:paused}
  @keyframes vhPulse{
    0%{stroke-dashoffset:22;opacity:1}
    72%{stroke-dashoffset:122;opacity:1}
    78%,100%{stroke-dashoffset:122;opacity:0}
  }
  /* Nós de vidro: contorno neutro quase invisível e bloom individual
     alimentado por --nc, sem uma borda saturada fechando todo o box. */
  .vh-node{
    position:absolute;z-index:2;left:var(--x);top:var(--y);
    width:74px;height:74px;border-radius:20px;
    display:grid;place-items:center;
    background:
      linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.012) 42%,rgba(5,9,24,.24)),
      rgba(10,14,31,.62);
    border:1px solid rgba(225,234,255,.11);
    -webkit-backdrop-filter:blur(12px) saturate(1.15);
    backdrop-filter:blur(12px) saturate(1.15);
    box-shadow:
      0 15px 34px -18px rgba(0,0,0,.78),
      0 0 22px -10px color-mix(in srgb,var(--nc) 62%,transparent),
      inset 1px 1px 0 rgba(255,255,255,.1),
      inset -1px -1px 0 color-mix(in srgb,var(--nc) 10%,transparent);
    opacity:0;transform:translate(-50%,-50%) translateZ(var(--node-z)) scale(.86);
    transition:opacity .55s var(--ease-soft),transform .55s var(--ease-soft);
    transition-delay:calc(.3s + var(--ring)*.38s);
  }
  .vh-node::before{
    content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 32%);
    opacity:.72
  }
  .vh-node.r0{--ring:0;--node-z:2px}.vh-node.r1{--ring:1;--node-z:-2px}
  .vh-go .vh-node{opacity:1;transform:translate(-50%,-50%) translateZ(var(--node-z)) scale(1)}
  .vh-node img{position:relative;z-index:1;width:37px;height:37px;object-fit:contain}
  /* O chip central fica no plano mais próximo e concentra o reflexo na
     aresta superior esquerda, como uma peça de vidro iluminada. */
  .vh-core{
    position:absolute;z-index:3;left:50%;top:50%;
    width:88px;height:88px;border-radius:24px;display:grid;place-items:center;
    transform:translate(-50%,-50%) translateZ(12px);
    background:
      linear-gradient(140deg,rgba(255,255,255,.15),transparent 28%,rgba(57,114,253,.07) 72%),
      rgba(10,15,36,.82);
    border:1px solid rgba(190,211,255,.24);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
    backdrop-filter:blur(16px) saturate(1.2);
    box-shadow:
      0 18px 38px -18px rgba(0,0,0,.85),
      0 0 0 1px rgba(57,114,253,.08),
      0 0 34px -8px rgba(57,114,253,.42),
      inset 1px 1px 0 rgba(255,255,255,.22),
      inset -1px -1px 0 rgba(57,114,253,.16);
  }
  .vh-go .vh-core{animation:vhCoreArrival 8.8s ease-in-out infinite}
  .virada-stage:not(.is-in) .vh-core{animation-play-state:paused}
  @keyframes vhCoreArrival{
    0%,68%,82%,100%{
      transform:translate(-50%,-50%) translateZ(12px) scale(1);
      box-shadow:
        0 18px 38px -18px rgba(0,0,0,.85),
        0 0 0 1px rgba(57,114,253,.08),
        0 0 34px -8px rgba(57,114,253,.42),
        inset 1px 1px 0 rgba(255,255,255,.22),
        inset -1px -1px 0 rgba(57,114,253,.16);
    }
    72%{
      transform:translate(-50%,-50%) translateZ(18px) scale(1.055);
      box-shadow:
        0 20px 42px -18px rgba(0,0,0,.86),
        0 0 0 1px rgba(190,214,255,.18),
        0 0 46px -6px rgba(57,114,253,.5),
        inset 1px 1px 0 rgba(255,255,255,.28),
        inset -1px -1px 0 rgba(57,114,253,.2);
    }
  }
  .vh-core img{width:44px;height:auto}

  @media(max-width:748px){
    .virada-tag{font-size:16px;margin-top:18px;flex-direction:column;gap:8px}
    .vt-line{width:2px;height:22px}
    .vt-line i{background:linear-gradient(180deg, transparent, var(--blue), var(--purple), transparent);animation-name:vtFlowV}
  }

  /* ================= TRÊS CAMADAS ================= */
  /* ================= TRÊS CAMADAS =================
     Faixas alternadas em vez de três colunas iguais. A coluna de 1/3 era o que
     apertava tudo: a ilustração ganha quase 40% mais largura assim, e o
     zigue-zague dá a sequência que o lede anuncia (primeiro, depois, então).
     Nenhuma faixa tem card: o que separa uma da outra é o espaço, e cada
     ilustração se distingue pelo próprio desenho. */
  .layers{--lz-cycle:8.4s;margin-top:64px;display:flex;flex-direction:column;gap:clamp(56px,6vw,88px)}
  .layer{
    display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(32px,5vw,72px);align-items:center;text-align:left;
  }
  /* a alternância de lado é só ordem visual: o DOM segue lendo texto, ilustração */
  .layer.is-flip .layer-txt{order:2}
  .layer.is-flip .layer-viz{order:1}
  .layer-n{
    display:block;margin-bottom:14px;
    font-family:var(--font);font-size:13px;font-weight:700;
    letter-spacing:.14em;color:var(--muted);
  }
  .layer-txt h3{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#fff}
  .layer-txt .d{margin-top:14px;font-size:15px;line-height:1.7;color:var(--muted);max-width:46ch}
  .layer-viz{position:relative;min-width:0;display:flex;align-items:center;justify-content:center}

  /* ---- 01 · a órbita do MDC ----
     O Hub no centro e o que fica fora em volta, com o fio acendendo do nó até
     o centro, um de cada vez. Sem janela, sem barra de título, sem status: a
     ideia é uma só, conectar. */
  .lz-orbit{position:relative;width:min(400px,100%);aspect-ratio:360/280}
  .lz-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .lz-wire{
    fill:none;stroke:rgba(163,100,255,.45);stroke-width:1.4;stroke-linecap:round;
    stroke-dasharray:141;stroke-dashoffset:141;
    animation:lzWire var(--lz-cycle) var(--ease-soft) infinite;
  }
  .lz-wire.w1{animation-delay:0s}
  .lz-wire.w2{animation-delay:.5s}
  .lz-wire.w3{animation-delay:1s}
  .lz-wire.w4{animation-delay:1.5s}
  @keyframes lzWire{
    0%{stroke-dashoffset:141;opacity:.2}
    12%{opacity:1}
    30%,74%{stroke-dashoffset:0;opacity:1}
    94%,100%{stroke-dashoffset:0;opacity:.32}
  }
  .lz-core{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
    width:74px;height:74px;border-radius:24px;display:grid;place-items:center;
    background:linear-gradient(160deg,rgba(57,114,253,.28),rgba(163,100,255,.16));
    box-shadow:0 0 0 1px rgba(163,100,255,.28), 0 18px 44px -14px rgba(57,114,253,.6);
    animation:lzCore var(--lz-cycle) var(--ease-soft) infinite;
  }
  .lz-core svg{width:34px;height:auto}
  @keyframes lzCore{0%,100%{transform:translate(-50%,-50%) scale(1)}46%{transform:translate(-50%,-50%) scale(1.05)}}
  .lz-node{
    position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
    padding:7px 13px;border-radius:999px;
    font-family:var(--font);font-size:12px;color:#C6CBDE;
    background:rgba(255,255,255,.04);
    animation:lzNode var(--lz-cycle) var(--ease-soft) infinite;
  }
  .lz-node i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
  .lz-node.n1{left:20.5%;top:17%;transform:translate(-50%,-50%);animation-delay:0s}
  .lz-node.n2{left:79.5%;top:17%;transform:translate(-50%,-50%);animation-delay:.5s}
  .lz-node.n3{left:20.5%;top:83%;transform:translate(-50%,-50%);animation-delay:1s}
  .lz-node.n4{left:79.5%;top:83%;transform:translate(-50%,-50%);animation-delay:1.5s}
  @keyframes lzNode{0%,16%{opacity:.42}34%,74%{opacity:1}94%,100%{opacity:.42}}

  /* ---- 02 · o grafo do Brain ----
     O canvas já existia. O que saiu foi a moldura em volta e a legenda de
     contagem de nós: o desenho conta a ideia sozinho. */
  .lz-net{position:relative;width:100%;height:clamp(260px,23vw,320px)}
  .brain-net{position:relative;z-index:1;width:100%;height:100%;display:block}

  /* ---- 03 · a execução do Marvin ----
     A ideia é a ação, não a conversa: a pergunta entra e os passos se cumprem
     um a um. A conversa em si é a seção seguinte, e repeti-la aqui seria dizer
     duas vezes a mesma coisa. */
  .lz-run{width:min(430px,100%);display:flex;flex-direction:column;gap:14px}
  .lz-ask{
    align-self:flex-end;margin:0;max-width:88%;
    padding:10px 15px;border-radius:14px 14px 4px 14px;
    background:#232B4D;color:#fff;font-size:13px;line-height:1.45;
  }
  .lz-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
  .lz-steps li{
    display:flex;align-items:center;gap:11px;
    font-size:13px;color:#C6CBDE;
    opacity:.25;animation:lzStep var(--lz-cycle) var(--ease-soft) infinite;
    animation-delay:calc(var(--i) * .72s);
  }
  @keyframes lzStep{0%,10%{opacity:.25}22%,80%{opacity:1}94%,100%{opacity:.25}}
  .lz-tick{
    width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
    color:var(--green);background:rgba(52,211,153,.14);
  }
  .lz-tick svg{width:11px;height:11px}
  .lz-done{
    display:flex;align-items:center;gap:10px;margin:2px 0 0;
    font-size:13px;color:#fff;
    opacity:0;animation:lzDone var(--lz-cycle) var(--ease-soft) infinite;animation-delay:2.16s;
  }
  @keyframes lzDone{0%,8%{opacity:0;transform:translateY(6px)}20%,80%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
  .lz-marvin{width:24px;flex:none}
  .lz-marvin img{width:100%;height:auto;display:block}

  @media(max-width:900px){
    .layers{gap:clamp(42px,7vw,60px)}
    .layer{grid-template-columns:minmax(0,1fr);gap:26px;text-align:center}
    .layer.is-flip .layer-txt,.layer.is-flip .layer-viz{order:0}
    .layer-txt .d{margin-inline:auto}
    .lz-run{margin-inline:auto}
    .lz-net{height:clamp(240px,52vw,300px)}
  }
  @media(prefers-reduced-motion:reduce){
    .lz-wire{stroke-dashoffset:0;opacity:1;animation:none}
    .lz-core,.lz-node,.lz-steps li{animation:none;opacity:1}
    .lz-done{animation:none;opacity:1;transform:none}
  }

  /* ================= APPS ================= */
  /* desktop: grid multi-linha; vira carrossel (peek + snap) só ≤900px */
  .hscroll{padding:8px 0 14px;margin-top:56px}
  .htrack{display:grid;gap:16px;padding:4px}
  #appsScroll .htrack{grid-template-columns:repeat(4,1fr);align-items:stretch}
  #whyScroll .htrack{grid-template-columns:repeat(3,1fr)}
  .htrack > *{scroll-snap-align:start}
  /* dots de paginação (carrosséis mobile) */
  .cdots{display:none;justify-content:center;align-items:center;gap:9px;margin-top:20px}
  .cdots button{
    position:relative;
    width:9px;height:9px;border-radius:99px;border:none;padding:0;cursor:pointer;
    background:rgba(255,255,255,.25);transition:width .3s ease, background .3s ease;
  }
  /* Área de toque invisível sobre o ponto. O desenho continua com 9px, mas o dedo
     acerta num alvo de 44px de altura: antes o botão inteiro media 9x9 e acertar
     era quase sorte. A largura fica em 24px para os alvos não se sobreporem nos
     carrosséis com muitos itens (o de apps tem 25). */
  .cdots button::after{
    content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:24px;height:44px;
  }
  /* Os 25 pontos dos apps ocupam slots estáveis, mas o desenho preserva os 9px
     dos outros carrosséis. Em 390px a sequência cabe inteira; em telas menores
     o slot acompanha a largura disponível sem reduzir o ponto. Como os cards
     filtrados e seus dots usam display:none, os conjuntos menores continuam
     compactos e centralizados. */
  #appsDots{
    --apps-dot-slot:min(14px,calc((100vw - 36px)/25));
    gap:0;flex-wrap:nowrap;
  }
  #appsDots button{
    flex:0 0 var(--apps-dot-slot);width:var(--apps-dot-slot);
    background:none;box-shadow:none;transition:none;
  }
  #appsDots button::before{
    content:"";position:absolute;top:50%;left:50%;
    width:9px;height:9px;border-radius:99px;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.25);
    transition:width .3s ease,background .3s ease,box-shadow .3s ease;
  }
  #appsDots button::after{width:var(--apps-dot-slot)}
  #appsDots button.on{width:var(--apps-dot-slot);background:none;box-shadow:none}
  #appsDots button.on::before{
    width:min(18px,calc(var(--apps-dot-slot) + 4px));
    background:linear-gradient(90deg,var(--blue),var(--purple));
    box-shadow:0 0 12px rgba(123,92,255,.5);
  }
  .cdots button.on{
    width:26px;
    background:linear-gradient(90deg,var(--blue),var(--purple));
    box-shadow:0 0 12px rgba(123,92,255,.5);
  }
  .app{
    position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    padding:24px 22px;transition:transform .25s;display:flex;flex-direction:column;gap:11px;text-align:left;overflow:hidden;
  }
  .app:hover{transform:translateY(-5px)}
  .app .ic{
    width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;
    background:rgba(57,114,253,.06);
    border:1px solid var(--line);color:#5E72A8;
    transition:color .3s ease, background .3s ease;
  }
  .app:hover .ic{
    color:var(--app-c);
    background:linear-gradient(135deg,var(--app-bg1,rgba(57,114,253,.18)),rgba(255,255,255,.03));
  }
  .app .ic img{width:25px;height:25px;object-fit:contain}
  .app h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
  /* anatomia da referência: ícone e título na mesma linha, divisória,
     dois bullets com marcador, divisória e a chamada no pé */
  .app-top{display:flex;align-items:center;gap:12px;min-width:0}
  .app-top .ic{margin-bottom:0}
  .app-top h3{min-width:0}
  /* No card a pill é irmã do título e segue o centro do flex. A versão do menu
     continua com sua margem e seu ajuste de baseline próprios. */
  .app-top .soon-tag{flex:none;margin-left:0;transform:none}
  .app-bul{
    flex:1;margin-top:14px;padding:14px 0 12px;list-style:none;
    display:flex;flex-direction:column;gap:10px;
    border-top:1px dashed var(--line);
  }
  .app-bul li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#AEB6D6;line-height:1.5}
  .app-bul svg{width:13px;height:13px;color:var(--app-c,var(--blue));flex:none;margin-top:3px}
  .app .cta{border-top:1px dashed var(--line);padding-top:12px;width:100%}
  .app .cta{
    display:inline-flex;align-items:center;gap:5px;margin-top:6px;
    font-family:var(--font);font-weight:600;font-size:12.5px;color:#5E72A8;
    transition:color .3s ease;
  }
  .app:hover .cta{color:var(--app-c,var(--blue))}
  .app .cta .arr{transition:transform .2s ease}
  .app:hover .cta .arr{transform:translateX(4px)}
  .app-fin{--app-c:var(--teal);--app-bg1:rgba(91,192,190,.16)}
  .app-crm{--app-c:var(--blue);--app-bg1:rgba(57,114,253,.18)}
  .app-cs{--app-c:var(--purple);--app-bg1:rgba(163,100,255,.18)}
  .app-tar{--app-c:var(--orange);--app-bg1:rgba(250,152,0,.15)}
  .app-gen{--app-c:var(--green);--app-bg1:rgba(52,211,153,.15)}
  .app-reu{--app-c:#C084FC;--app-bg1:rgba(192,132,252,.15)}
  .app-wpp{--app-c:#4ADE80;--app-bg1:rgba(74,222,128,.15)}
  .app-ref{--app-c:var(--pink);--app-bg1:rgba(244,114,182,.15)}
  /* selo ligado ao resto por uma linha fina, no padrão da referência */
  .apps-selo{display:flex;align-items:center;gap:14px;margin-bottom:22px}
  .as-tag{
    display:inline-flex;align-items:center;gap:7px;flex:none;
    padding:7px 14px;border-radius:999px;
    font-family:var(--font);font-size:12.5px;font-weight:600;
    color:var(--purple-soft);
    background:rgba(163,100,255,.1);border:1px solid rgba(163,100,255,.26);
  }
  /* .is-blue: o selo desta dobra passa a ser o azul do site, na mesma receita
     de opacidade do roxo (fundo .1, borda .26). A classe existe porque a dobra
     inteira se repete na /hub-trial, com o mesmo id #apps e as mesmas classes:
     sem a marca no elemento, a troca de cor iria junto para uma página que
     ninguém pediu para mudar. */
  .as-tag.is-blue{
    color:var(--white);
    background:rgba(57,114,253,.1);border-color:rgba(57,114,253,.26);
  }
  /* 31/08, ordem da autora: a palavra e o corpo do simbolo em BRANCO, com o
     detalhe (a asa superior direita) em teal. O simbolo continua sendo o
     oficial, so recolorido em cor solida: os fills do <defs> viraram
     --mk-body e --mk-detail, com as cores oficiais como padrao, entao os
     outros cinco usos do simbolo na pagina nao mudaram nada.
     O filter que tingia a marca inteira de azul sai aqui, senao ele cobriria
     as duas cores; a opacidade tambem volta a 1, porque o branco a .58 leria
     como cinza. */
  .as-tag.is-blue .section-brand-mark{
    filter:none;opacity:1;
    --mk-body:#fff;
    --mk-detail:var(--teal);
  }
  .as-tag svg{width:14px;height:14px}
  .as-rule{flex:1;height:1px;background:var(--line)}
  /* os bullets vieram dos quatro desejos do conhecimento do Hub: falam do
     que o negócio ganha, não do que a ferramenta faz */
  .apps-bul{margin-top:24px;display:flex;flex-direction:column;gap:12px;padding:0;list-style:none}
  .apps-bul li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:#C4CBE4}
  .apps-bul svg{width:15px;height:15px;color:var(--blue);flex:none;margin-top:4px}
  .apps-fim{margin-top:28px;padding-top:24px;border-top:1px solid var(--line-2)}
  .apps-note{text-align:center;margin-top:44px;font-size:15px;color:var(--muted)}
  .apps-note b{color:rgba(255,255,255,.9)}

  /* ===== .split: texto que acompanha a rolagem + grid de cards ao lado =====
     Mobile/tablet: empilhado e centralizado (o carrossel de .hscroll continua
     valendo). Desktop (>900px): 2 colunas, com a coluna de texto sticky. */
  /* minmax(0,...) é obrigatório: o .htrack do carrossel usa width:max-content e,
     sem isso, a coluna do grid estica pra caber o track inteiro (overflow na página) */
  .split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,58px);align-items:start;text-align:center}
  .split-main{min-width:0}

  /* ===== Filtro por área da grade de apps =====
     Abre a coluna direita, na mesma linha do título da esquerda, e os cards
     começam abaixo dele. No desktop ele gruda no topo enquanto a seção rola
     (regra no media query de 901px) e solta sozinho no fim dela, porque o
     sticky se prende ao container, que é a coluna da grade. */
  .app-filter{
    display:flex;flex-wrap:wrap;gap:8px;
    margin:0 0 18px;padding:2px 0;
  }
  /* Vidro no mesmo vocabulário dos cards (blur com saturação e um degradê
     de superfície), e cada chip carrega a cor da sua área em --af-c: no
     estado ativo a cor entra no fundo, na borda e no brilho. */
  .af-btn{
    display:inline-flex;align-items:center;gap:7px;position:relative;
    padding:8px 15px;border-radius:999px;cursor:pointer;
    font-family:var(--font);font-size:13px;font-weight:500;
    color:#9aa0bd;
    background:
      linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 46%,rgba(5,9,24,.2)),
      rgba(10,14,31,.5);
    border:1px solid rgba(225,234,255,.1);
    -webkit-backdrop-filter:blur(12px) saturate(1.15);
    backdrop-filter:blur(12px) saturate(1.15);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:color .3s var(--ease-soft),background .3s var(--ease-soft),
               border-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft);
  }
  .af-btn[data-area="todos"]{--af-c:200,208,232}
  .af-btn[data-area="receita"]{--af-c:57,114,253}
  .af-btn[data-area="operacao"]{--af-c:250,152,0}
  .af-btn[data-area="tecnologia"]{--af-c:163,100,255}
  .af-btn[data-area="pessoas"]{--af-c:250,61,133}
  /* Backoffice usa o teal do próprio ícone. A lei do repo proíbe teal em
     link e botão de ação; este é um filtro de exibição, e o tratamento é o
     mesmo dos outros chips, sem virar chamada. */
  .af-btn[data-area="backoffice"]{--af-c:0,183,180}
  .af-btn:hover{color:#d9dcef;border-color:rgba(var(--af-c),.34)}
  .af-btn:focus-visible{outline:2px solid rgb(var(--af-c));outline-offset:2px}
  /* o estado ativo não é só cor: muda fundo, borda, brilho e peso do rótulo */
  .af-btn.is-on{
    color:#fff;font-weight:600;
    background:
      linear-gradient(145deg,rgba(var(--af-c),.24),rgba(var(--af-c),.08) 52%,rgba(5,9,24,.18)),
      rgba(10,14,31,.5);
    border-color:rgba(var(--af-c),.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px -14px rgba(var(--af-c),.8);
  }
  .af-n{
    font-size:11px;font-weight:600;line-height:1;
    padding:3px 6px;border-radius:999px;
    background:rgba(255,255,255,.07);color:inherit;
  }
  .af-btn.is-on .af-n{background:rgba(255,255,255,.16)}
  .af-btn[data-area="todos"].is-on{color:#fff}
  /* o resultado do filtro é anunciado, não só mostrado */
  .af-status{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .app.is-off{display:none}
  .split-aside .lede{margin-left:auto;margin-right:auto}
  @media(min-width:901px){
    .split{grid-template-columns:minmax(370px,.82fr) minmax(0,1.18fr);text-align:left}
    .split-aside{position:sticky;top:96px}
    /* o filtro gruda no mesmo topo da coluna de texto: os dois ficam na mesma
       linha enquanto a seção rola. Como ele vive dentro da coluna da grade,
       solta sozinho quando a seção acaba. O fundo com blur existe para os
       cards passarem por baixo sem atravessar o filtro. */
    #apps .app-filter{
      position:sticky;top:75px;z-index:3;
      /* o topo gruda logo abaixo do nav (75px) e os 21px de padding devolvem os
         botões à linha do h2, que gruda em 96px. As margens negativas fazem o
         fundo sangrar para fora da coluna, senão os cards apareceriam pelos
         cantos ao passar. */
      margin:-21px -14px 18px;padding:21px 14px 12px;
      background:rgba(4,8,31,.975);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    }
    .split-aside .h2{margin-top:20px}
    /* .h2-top vem antes desta regra na folha e perderia o desempate */
    .split-aside .h2.h2-top{margin-top:0}
    .split-aside .lede{margin:18px 0 0;max-width:none;text-align:left}
    .split-aside .apps-note{margin:20px 0 0;text-align:left;font-size:13.5px;line-height:1.55;letter-spacing:-.012em}
    .split-aside .btn{margin-top:26px}
    .split-main{min-width:0}
    .split-main .hscroll{margin-top:0}
    #appsScroll .htrack{grid-template-columns:repeat(2,1fr)}
  }
  @media(min-width:1000px){
    #apps .split-aside .apps-note{font-size:14px}
  }
  @media(min-width:1240px){
    #apps .split{grid-template-columns:minmax(370px,.72fr) minmax(0,1.28fr);gap:36px}
    #apps .split-aside .h2{font-size:42px}
    #apps .app-filter{flex-wrap:nowrap;gap:6px}
    #apps .af-btn{gap:6px;padding:8px 12px;font-size:12.5px}
    #apps .af-n{padding:3px 5px}
  }

  /* ================= CASOS DE USO — grid desktop / carrossel mobile ================= */
  /* carrossel: rola na horizontal com snap e mostra a própria barra, que é
     estilizada (a nativa crua não combina com o resto da página) */
  .cases-scroll{
    margin-top:48px;padding:18px 4px 16px;
    display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:rgba(163,100,255,.5) rgba(255,255,255,.06);
  }
  /* a barra nativa fica escondida: quem indica a posição são os pontos
     (.cdots) abaixo do carrossel */
  .cases-scroll{scrollbar-width:none}
  .cases-scroll::-webkit-scrollbar{display:none}
  .case-track{display:flex;gap:18px;padding:4px}
  /* nesta seção os pontos indicam a posição também no desktop (substituíram
     a barra de rolagem própria) */
  #casos .cdots{display:flex;margin-top:26px}
  .cases-scroll .case-card{flex:0 0 clamp(268px,24vw,320px)}
  .case-card{
    scroll-snap-align:start;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:20px;padding:24px;
    display:flex;flex-direction:column;gap:12px;min-height:286px;text-align:left;
    transition:transform .25s;
  }
  .case-card:hover{transform:translateY(-4px)}
  .cc-top{display:flex;align-items:center;justify-content:space-between}
  /* chip escuro: a seção dos casos é escura, e a regra é que a variante do
     ícone acompanha o fundo do chip, que por sua vez acompanha a seção.
     Mesmo vidro do .app .ic dos cards escuros, para não inventar um
     segundo vocabulário; daí os ícones aqui serem os icons/<app>.svg */
  .cc-ic{
    width:40px;height:40px;border-radius:12px;flex:none;
    background:rgba(57,114,253,.06);border:1px solid var(--line);
    display:grid;place-items:center;color:#5E72A8;transition:color .3s ease;
  }
  .cc-ic img{width:22px;height:22px;object-fit:contain}
  /* cluster: três chips levemente sobrepostos, para os casos que combinam
     mais de uma ferramenta */
  .cc-ic-g{width:auto;height:auto;background:none;border:0;box-shadow:none;display:flex}
  .ccg-i{
    width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
    background:rgba(57,114,253,.06);border:1px solid var(--line);
  }
  .ccg-i + .ccg-i{margin-left:-12px}
  .ccg-i:nth-child(2){z-index:1}
  .ccg-i:nth-child(3){z-index:2}
  .ccg-i img{width:22px;height:22px;object-fit:contain}
  .case-card:hover .cc-ic{color:var(--blue)}
  .cc-ic svg{width:20px;height:20px}
  .cc-cat{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .case-card h3{font-size:18.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
  .case-card p{font-size:14px;color:var(--muted);line-height:1.6;flex:1}
  /* horas economizadas (count-up one-shot) + % de impacto pequena ao lado */
  .cc-hours{margin-top:4px;padding-top:16px;border-top:1px solid var(--line-2)}
  .cc-hours .hrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .cc-hours .hh{
    font-family:var(--font);font-size:36px;font-weight:700;line-height:1;color:#fff;
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;
    text-shadow:0 0 36px rgba(123,92,255,.35);
  }
  .cc-hours .hpct{
    font-family:var(--font);font-size:10px;font-weight:700;white-space:nowrap;
    color:var(--purple-soft);background:rgba(163,100,255,.1);
    border:1px solid rgba(163,100,255,.3);padding:3px 9px;border-radius:99px;
  }
  .cc-hours .hlbl{
    font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);margin-top:6px;
  }
  .cases-foot{text-align:center;margin-top:26px;font-size:13px;color:var(--muted)}

  /* ================= LEAD AO LUCRO — jornada conectada ================= */
  .journey{
    display:flex;justify-content:center;align-items:flex-start;
    gap:0;margin-top:64px;position:relative;flex-wrap:nowrap;overflow-x:auto;
    padding:10px 4px 4px;scrollbar-width:none;
  }
  .journey::-webkit-scrollbar{display:none}
  .j-step{--jc:var(--blue);display:flex;flex-direction:column;align-items:center;gap:13px;flex:0 0 auto;width:138px;position:relative}
  .j-step .box{
    width:92px;height:92px;border-radius:22px;
    background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    border:1px solid var(--line);display:grid;place-items:center;
    transition:border-color .72s var(--ease-soft),background .72s var(--ease-soft),opacity .72s var(--ease-soft);
    opacity:.4;
  }
  .j-step .box svg{
    width:40px;height:40px;
    color:color-mix(in srgb,var(--jc) 32%,#91A0C1);
    transition:filter .72s var(--ease-soft),color .72s var(--ease-soft);
    filter:grayscale(.72) brightness(.58);
  }
  .j-step h4{font-size:16px;font-weight:600;opacity:.4;transition:opacity .72s var(--ease-soft)}
  .j-step small{font-size:13px;color:var(--muted);text-align:center;line-height:1.4;margin-top:-6px;opacity:.4;transition:opacity .72s var(--ease-soft)}
  .j-step.lit .box{
    opacity:1;
    border-color:rgba(145,160,193,.28);
    background:linear-gradient(160deg,color-mix(in srgb,var(--jc) 5%,rgba(255,255,255,.045)),rgba(255,255,255,.012));
    animation:jSettle .72s var(--ease-soft);
  }
  @keyframes jSettle{from{transform:translateY(3px) scale(.985)}to{transform:none}}
  .j-step.lit .box svg{filter:none}
  .j-step.lit h4,.j-step.lit small{opacity:1}
  /* conector */
  .j-link{
    flex:0 0 52px;height:2px;margin-top:45px;position:relative;
    background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;
  }
  .j-link i{
    position:absolute;inset:0;border-radius:3px;
    background:linear-gradient(90deg,rgba(101,121,164,.28),rgba(139,157,196,.72),rgba(101,121,164,.28));
    transform:scaleX(0);transform-origin:left;
    transition:transform .78s var(--ease-soft);
  }
  .j-link.lit i{transform:scaleX(1)}
  .j-link::after{
    content:"";position:absolute;top:50%;left:0;width:6px;height:6px;border-radius:50%;
    background:#D8E0F2;box-shadow:0 0 10px rgba(116,145,208,.7);
    transform:translate(-10px,-50%);opacity:0;
  }
  .j-link.pulse::after{animation:linkPulse .78s var(--ease-soft) forwards}
  @keyframes linkPulse{0%{opacity:.72;transform:translate(0,-50%)}100%{opacity:0;transform:translate(52px,-50%)}}
  @keyframes linkPulseV{0%{opacity:.72;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,44px)}}

  .qgrid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
    max-width:1180px;margin:64px auto 0;text-align:left;
  }
  .q-item{
    display:flex;flex-direction:column;gap:12px;align-items:flex-start;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:18px;padding:22px 18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .25s ease;
  }
  .q-item:hover{transform:translateY(-4px)}
  .q-item .qic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(57,114,253,.06);border:1px solid var(--line-2);color:#5E72A8;transition:color .3s ease}
  .q-item:hover .qic{color:var(--blue)}
  .q-item .qic svg{width:19px;height:19px}
  .q-item p{font-size:13.5px;color:var(--muted);line-height:1.55;letter-spacing:-.01em}
  .q-item p b{color:rgba(255,255,255,.85);font-weight:600}
  .journey-note{margin-top:64px;font-size:clamp(15px,1.6vw,19px);color:var(--muted);max-width:780px;margin-left:auto;margin-right:auto;line-height:1.6}

  /* ================= POR QUE MARVEE ================= */
  /* cabeça empilhada e centralizada, igual às outras seções (era 2 colunas) */
  .why-head{text-align:center}
  .why-head .h2{margin-top:24px}
  /* .h2-top vem antes desta regra na folha e perderia o desempate */
  .why-head .h2.h2-top{margin-top:0}
  .why-head .lede{margin:20px auto 0;text-align:center}
  .why-card{
    --wc:var(--teal);
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    padding:28px 24px;text-align:left;transition:transform .25s;
  }
  .why-card:hover{transform:translateY(-4px)}
  .why-card .ic{
    width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
    background:rgba(57,114,253,.06);
    border:1px solid var(--line-2);
    color:#5E72A8;margin-bottom:32px;
    transition:color .3s ease, background .3s ease, border-color .3s ease;
  }
  .why-card:hover .ic{
    color:var(--wc);
    background:color-mix(in srgb, var(--wc) 12%, transparent);
    border-color:color-mix(in srgb, var(--wc) 25%, transparent);
  }
  .why-card .ic svg{width:20px;height:20px}
  .why-card h3{font-size:17px;font-weight:600;margin-bottom:10px;letter-spacing:-.02em}
  .why-card p{font-size:14px;color:var(--muted);line-height:1.6}

  /* ================= PRICING ================= */
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px;margin:56px auto 0;align-items:stretch}
  /* Grade de tres planos da home. */
  #preco .wrap{max-width:1328px}
  .price-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1120px}
  .price-grid.three .price-card:not(.featured){opacity:1}
  @media(max-width:1160px){.price-grid.three{grid-template-columns:1fr 1fr;max-width:760px}}
  /* com 3 cards a grade de 2 colunas deixaria o Arquiteto orfao a esquerda:
     ele desce centralizado, na largura de uma coluna (o carrossel <=600 nao
     passa por aqui) */
  @media(max-width:1160px) and (min-width:601px){
    #preco .price-grid.three .price-card.featured{grid-column:1/-1;justify-self:center;width:calc(50% - 12px)}
  }
  /* os clones do carrossel (priceCarousel) só existem no mobile; trava de segurança:
     nunca renderizam fora do ≤600px, mesmo que o teardown do JS falhe (senão voltariam
     a duplicar os cards no grid do desktop) */
  .price-grid.three .price-card[data-clone]{display:none}
  /* ≤600px: os 3 planos viram carrossel infinito (priceCarousel no site.js clona os conjuntos e monta os dots) */
  @media(max-width:600px){
    .price-scroll{
      overflow-x:auto;scroll-snap-type:x mandatory;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;
      padding:4px 8vw;
      /* Sangra até as bordas da tela. O .wrap tem 18px de padding lateral, e
         antes disso os 18px de cada borda não pertenciam ao carrossel: o dedo
         encostava ali e nada acontecia, o que dava a sensação de que o canto
         esquerdo "não entende" o arraste. */
      width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
      /* o arraste horizontal não encadeia para o gesto de "voltar" do navegador */
      overscroll-behavior-x:contain;
    }
    .price-scroll::-webkit-scrollbar{display:none}
    .price-scroll.drag{cursor:grabbing}
    #preco .price-grid.three{
      display:flex;width:max-content;max-width:none;
      margin:24px 0 0;gap:clamp(12px,3.5vw,16px);padding:0;align-items:flex-start;
    }
    #preco .price-grid.three .price-card{flex:0 0 84vw;max-width:320px;height:auto;scroll-snap-align:center}
    #preco .price-grid.three .price-card[data-clone]{display:flex}
    .cdots-price{display:flex}
    /* Cinto de segurança: a seção que vende não pode depender de JS para existir.
       Se o reveal não rodar (script antigo em cache, erro, observer inativo), os
       planos aparecem do mesmo jeito. */
    .price-scroll.reveal,.price-grid.reveal{opacity:1;transform:none}
  }
  .price-card{
    position:relative;border-radius:18px;padding:26px 26px 24px;text-align:left;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    border:1px solid var(--line);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
    display:flex;flex-direction:column;transition:transform .25s;
  }
  .price-card:hover{transform:translateY(-4px)}
  .price-card:not(.featured){opacity:.8}
  .price-card:not(.featured):hover{opacity:1}
  .pc-tag{
    align-self:flex-start;
    font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    padding:5px 12px;border-radius:99px;background:linear-gradient(92deg,var(--blue),var(--purple));color:#fff;white-space:nowrap;
    margin-bottom:16px;
  }
  .pc-tag.ghost{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted-2)}
  .pc-price{display:flex;align-items:baseline;justify-content:flex-start;gap:5px;flex-wrap:wrap}
  .pc-cur{font-family:var(--font);font-size:16px;font-weight:600;color:rgba(255,255,255,.8)}
  .pc-val{font-family:var(--font);font-size:38px;font-weight:700;line-height:1;color:#fff;letter-spacing:-.03em}
  .pc-old{font-family:var(--font);font-size:15px;color:var(--muted);text-decoration:line-through;font-weight:500;margin-right:6px}
  .pc-per{font-family:var(--font);font-size:13.5px;color:var(--muted);font-weight:500}
  .pc-name{font-family:var(--font);font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:6px}
  .pc-desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:18px}
  .ph-flag{font-size:9.5px !important;
    display:inline-block;font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--orange);border:1px solid rgba(250,152,0,.4);background:rgba(250,152,0,.07);
    padding:3px 9px;border-radius:6px;margin-top:14px;
  }
  .pc-list{margin:20px 0 0;display:grid;gap:13px;flex:1;text-align:left}
  .pc-list li{display:flex;gap:11px;align-items:flex-start;list-style:none;font-size:14px;color:var(--muted);line-height:1.5;text-wrap:pretty}
  .pc-list .ck{
    flex:none;width:19px;height:19px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.16);
    display:grid;place-items:center;font-size:10px;font-weight:800;margin-top:1px;
    color:#5E72A8;transition:color .3s ease, border-color .3s ease;
  }
  .price-card:hover .ck{color:var(--purple);border-color:rgba(163,100,255,.4)}
  .price-card .btn{margin-top:24px;width:100%;font-size:15px;padding:13px}
  .pc-foot{font-size:11.5px;color:var(--muted);margin-top:12px;text-align:left}

  /* ============ PLANOS (cards individuais, capacidade em tokens de IA) ============ */
  .ps-intro{max-width:660px;margin:18px auto 0}
  .ps-intro p{font-size:14.5px;color:var(--muted);line-height:1.6;text-wrap:balance}
  .ps-intro .ps-same{margin-top:14px;font-size:13px;color:var(--muted)}
  .ps-note{max-width:560px;margin:26px auto 0;text-align:center;font-size:12.5px;color:var(--muted);opacity:.8;line-height:1.55}
  @media(min-width:1200px){
    #preco .ps-intro{max-width:960px}
    #preco .ps-intro .ps-same{white-space:nowrap}
  }

  .pc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;margin-bottom:6px}
  .pc-head .pc-name{margin-bottom:0}
  .pc-head .pc-tag{margin:0;flex:none}

  /* Camadas glass e luzes internas dos planos da home. */
  #preco .price-grid.three .price-card{
    --pc-glow-a:rgba(255,255,255,.045);
    --pc-glow-b:rgba(148,160,187,.025);
    border:1px solid rgba(255,255,255,.11);border-radius:28px;
    padding:30px 26px 26px;overflow:visible;
    background:
      radial-gradient(170px 150px at 5% 0%,var(--pc-glow-a),transparent 72%),
      radial-gradient(190px 170px at 100% 100%,var(--pc-glow-b),transparent 74%),
      rgba(8,12,35,.78);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 72px -38px rgba(0,0,0,.85);
    transition:transform .25s,border-color .35s ease,box-shadow .35s ease;
  }
  #preco .price-grid.three .price-card.featured{
    --pc-glow-a:rgba(57,114,253,.26);
    --pc-glow-b:rgba(74,125,255,.15);
    border-color:rgba(83,125,255,.28);
    backdrop-filter:blur(18px) saturate(125%);
    -webkit-backdrop-filter:blur(18px) saturate(125%);
    box-shadow:inset 0 1px 0 rgba(137,168,255,.09),0 30px 72px -38px rgba(57,114,253,.3);
  }
  #preco .price-grid.three .price-card:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 34px 82px -38px rgba(0,0,0,.9);
  }
  @property --pc-ring-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
  }
  @keyframes pcRingTravel{to{--pc-ring-angle:360deg}}
  /* No 20x o campo conico gira dentro do anel e faz as cores percorrerem
     todo o contorno, sem mover a geometria do card. */
  #preco .price-grid.three .price-card.featured::after{
    content:"";position:absolute;inset:-2px;border-radius:30px;padding:2px;
    pointer-events:none;z-index:2;
    background:conic-gradient(from var(--pc-ring-angle),#3972FD,#A364FF,#FA9800,#34D399,#5BC0BE,#3972FD) border-box;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:pcRingTravel 4.8s linear infinite paused;
    opacity:0;transition:opacity .3s ease;
  }
  #preco .price-grid.three .price-card.featured.is-20x::after{opacity:1;animation-play-state:running}
  #preco .price-grid.three .pc-top{
    min-height:48px;display:flex;align-items:center;justify-content:space-between;
    margin-bottom:20px;
  }
  #preco .price-grid.three .pc-icon{
    width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 26px -16px rgba(0,0,0,.7);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  #preco .price-grid.three .pc-icon{color:#B6C0D4}
  #preco .price-grid.three .price-card.featured .pc-icon{
    color:#7AA0FF;background:rgba(57,114,253,.1);border-color:rgba(112,151,255,.25);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px -16px rgba(57,114,253,.75);
  }
  #preco .price-grid.three .pc-icon svg{width:23px;height:23px;display:block}
  /* selo na mesma linha da pastilha do icone */
  #preco .price-grid.three .price-card .pc-tag{
    position:static;align-self:center;transform:none;
    margin:0;padding:7px 13px;
    color:#08112B;background:#F6F8FC;border:1px solid rgba(255,255,255,.72);
    box-shadow:0 10px 24px -16px rgba(0,0,0,.75);
  }
  #preco .price-grid.three .pc-name{font-size:20px}
  #preco .price-grid.three .pc-desc{margin-bottom:0;min-height:44px;color:#B7C1D6}
  #preco .price-grid.three .pc-price-row{
    display:flex;align-items:flex-end;justify-content:space-between;gap:6px;
    margin-top:28px;
  }
  #preco .price-grid.three .pc-price{flex:none;flex-wrap:nowrap;gap:4px}
  #preco .price-grid.three .pc-cur{font-size:18px;font-weight:700}
  #preco .price-grid.three .pc-val{font-size:50px}
  #preco .price-grid.three .pc-tokens{
    min-height:23px;display:flex;align-items:center;gap:7px;
    margin:20px 0 0;font-size:11.5px;line-height:1.4;color:#AEB8CD;
    white-space:nowrap;
  }
  #preco .price-grid.three .pc-tokens svg{width:14px;height:14px;color:#8996B2}
  #preco .price-grid.three .pc-tokens b{display:inline-grid;color:#EEF2FA;font-weight:700;white-space:nowrap}
  #preco .price-grid.three .price-card.featured .pc-tokens svg{color:#7AA0FF}
  #preco .price-grid.three .pc-capacity{
    min-height:40px;display:flex;align-items:center;flex-wrap:wrap;
    gap:8px 10px;margin-top:16px;
  }
  #preco .price-grid.three .pc-capacity .pc-tokens{margin:0}
  /* quatro faixas: 1 rotulo de heranca, 2 lista de bullets, 3 respiro elastico
     que absorve a sobra (por isso listas de tamanhos diferentes mantem os tres
     CTAs na mesma base) e 4 o CTA. A faixa 3 e vazia de proposito. (A faixa
     extra da R16 existia so para o bloco de vidro do 20x; com ele dissolvido na
     lista, ela sairia sempre em zero.) */
  #preco .price-grid.three .pc-panel{
    display:grid;grid-template-rows:auto auto minmax(27px,1fr) auto;flex:1;
    margin-top:28px;padding:22px;border-radius:22px;
    background:rgba(3,7,27,.66);border:1px solid rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 36px -28px rgba(0,0,0,.8);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  /* rotulo de heranca da escada de valor: linha propria acima da lista, sem
     check, so anuncia que o plano carrega tudo do anterior */
  #preco .price-grid.three .pc-inherit{
    grid-row:1;margin:0 0 15px;text-align:left;
    font-family:var(--font);font-size:10px;font-weight:700;line-height:1.4;
    letter-spacing:.075em;text-transform:uppercase;white-space:nowrap;color:#AEB8CD;
    display:flex;align-items:center;gap:6px;
    padding-bottom:12px;border-bottom:1px solid rgba(174,184,205,.2);
  }
  #preco .price-grid.three .price-card.featured .pc-inherit{
    color:#B9C9E8;border-bottom-color:rgba(122,160,255,.3);
  }
  /* estrela como acento do rotulo: mesmo path do .pc-icon do Arquiteto e do
     .tools-chip, na cor do proprio microtitulo e nunca maior que ele */
  #preco .price-grid.three .pc-inherit .pci-star{
    flex:none;width:11px;height:11px;color:currentColor;
  }
  #preco .price-grid.three .pc-inherit .pci-star svg{display:block;width:11px;height:11px}
  #preco .price-grid.three .pc-list{
    grid-row:2;margin:0;padding:0;border:0;flex:initial;gap:13px;
  }
  #preco .price-grid.three .pc-list li{color:#C5CEE0;font-size:13.5px}
  #preco .price-grid.three .pc-list .ck{
    width:17px;height:17px;margin-top:2px;color:#AEB8CC;
    background:none;border:0;border-radius:0;
  }
  #preco .price-grid.three .pc-list .ck svg{display:block;width:17px;height:17px}
  #preco .price-grid.three .price-card:hover .ck{color:#D9E0EE}
  #preco .price-grid.three .price-card.featured .ck{
    color:#7AA0FF;background:none;border:0;
    transition:color .35s ease;
  }
  #preco .price-grid.three .price-card.featured:hover .ck{color:#A9C0FF}
  /* ---- o item em destaque da lista do Arquiteto ----
     31/08: os dois exclusivos do 20x voltaram a ser itens comuns (o risco, o
     icone de mais e a nota de leitor de tela sairam), e no lugar deles a lista
     ganhou um ultimo item com peso visual proprio, valido nos dois estados.
     O destaque e so cor e sombra: o texto fica em BRANCO SOLIDO e o brilho vem
     do check, nunca de gradiente no texto. Nenhuma propriedade aqui mexe em
     caixa (nada de height, padding, margin nem display), entao o card continua
     com a mesma altura de antes e igual nos dois estados. */
  /* o item de credito e EXCLUSIVO do 20x: no 5x a lista fica exatamente como
     era antes desta rodada, sem ele. Por isso ele entra e sai do fluxo, em vez
     de ficar riscado como os exclusivos da R17: a autora pediu o 5x intocado.
     O custo esta medido no commit: a altura do card no 20x. */
  /* o par que decide a visibilidade NAO depende de #preco nem de
     .price-grid.three: basta o card e o proprio item. Assim o comportamento
     acompanha o cartao para onde ele for (o carrossel do mobile ja o repete
     tres vezes), em vez de depender da arvore em volta. */
  /* o item RESERVA a altura dele no 5x, em vez de sair do fluxo: com display
     none o cartao encolhia 33,2px ao voltar do 20x e a dobra inteira pulava,
     porque o grid iguala os tres cartoes pelo mais alto. Com visibility a
     caixa fica de pe e so o conteudo some, entao a altura e a mesma nos dois
     estados. O visibility tambem tira o item do leitor de tela, que e o certo:
     no 5x ele nao vale. */
  .pc-list li.pcl-so20{visibility:hidden}
  .price-card.is-20x .pc-list li.pcl-so20{
    visibility:visible;
    color:var(--white);font-weight:600;
  }
  #preco .price-grid.three .price-card.is-20x .pc-list li.pcl-so20 .ck{
    color:#7AA0FF;
    filter:drop-shadow(0 0 6px rgba(122,160,255,.65));
  }
  #preco .price-grid.three .price-card.featured.is-20x:hover .pc-list li.pcl-so20 .ck{color:#A9C0FF}
  #preco .price-grid.three .price-card .pc-panel .btn{
    grid-row:4;width:100%;margin-top:auto;padding:13px 10px;font-size:13.5px;white-space:nowrap;
  }
  /* dentro do card o fundo ja e mais claro que a pagina, entao o vidro entra
     um ponto mais forte para nao sumir; as pistas sao as mesmas da regra base */
  #preco .price-grid.three .price-card .pc-panel .btn-slate{
    background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);
  }
  #preco .price-grid.three .price-card .pc-panel .btn-slate:hover{
    background:rgba(255,255,255,.095);border-color:rgba(255,255,255,.28);
  }

  #preco .price-grid.three .price-card.featured .btn-blue-3d{
    overflow:hidden;border:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 32px -10px rgba(57,114,253,.55);
  }
  #preco .price-grid.three .price-card.featured .btn-blue-3d:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 38px -10px rgba(57,114,253,.6);
  }
  #preco .price-grid.three .price-card.featured .btn-blue-3d:active{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px -8px rgba(57,114,253,.45);
  }
  #preco .price-grid.three .price-card.featured .btn-blue-3d span{
    text-shadow:0 1px 2px rgba(0,0,10,.35);
  }
  /* No 20x o CTA vira roxo e azul, a mesma familia do chip 20x do alternador
     logo acima (.pcs-opt.on). O mesmo angulo de 135deg do chip mantem a luz
     vindo de cima e a esquerda, entao o botao ganha presenca por profundidade
     e nao por saturacao. O glow acompanha o roxo. */
  #preco .price-grid.three .price-card.featured.is-20x .btn-blue-3d{
    background:linear-gradient(135deg,#8250D0,#3567F0);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 26px -4px rgba(131,80,208,.58),0 12px 32px -10px rgba(131,80,208,.6);
  }
  #preco .price-grid.three .price-card.featured.is-20x .btn-blue-3d:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 34px -2px rgba(131,80,208,.66),0 16px 38px -10px rgba(131,80,208,.66);
  }
  #preco .price-grid.three .price-card.featured.is-20x .btn-blue-3d:active{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 18px -4px rgba(131,80,208,.5),0 6px 16px -8px rgba(131,80,208,.5);
  }
  @media(prefers-reduced-motion:reduce){
    #preco .price-grid.three .price-card.featured::after{animation:none}
  }

  /* ---- alternador de créditos do Arquiteto (.pc-switch) ----
     Pill glass segmentada, estado na classe is-20x do card (planCredits no
     site.js sincroniza originais e clones do carrossel). O segmento ativo
     diferencia os estados sem alterar o tema azul do card. Padrão documentado em marca/design-system. */
  #preco .pc-switch{
    display:flex;gap:4px;width:fit-content;max-width:100%;
    margin:0;padding:4px;border-radius:999px;
    background:rgba(3,7,27,.66);border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .pcs-opt{
    font-family:var(--font);font-size:12.5px;font-weight:700;letter-spacing:.02em;
    color:var(--muted);padding:6px 15px;border-radius:999px;
    background:none;border:1px solid transparent;cursor:pointer;
    transition:color .2s ease,background .2s ease,box-shadow .2s ease;
  }
  .pcs-opt:hover{color:#fff}
  .pcs-opt:focus-visible{outline:2px solid #7AA0FF;outline-offset:2px}
  .pcs-opt.on{
    color:#fff;
    background:linear-gradient(180deg,#4a7dff,#3567f0);
    border-color:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -8px rgba(57,114,253,.7);
  }
  #preco .price-card.featured.is-20x .pcs-opt.on{
    background:linear-gradient(135deg,#8250D0,#3567F0);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -8px rgba(131,80,208,.72);
  }
  #preco .price-grid.three .pc-capacity + .pc-price-row{margin-top:2px}
  /* troca de valores sem pulo de layout: os dois estados ficam empilhados na
     mesma célula de grid e o maior define o tamanho */
  .pc-swap{display:inline-grid}
  .pc-swap .sw{grid-area:1/1;transition:opacity .22s ease,transform .22s ease}
  .pc-swap .sw-20{opacity:0;transform:translateY(6px);pointer-events:none}
  .price-card.is-20x .pc-swap .sw-5{opacity:0;transform:translateY(-6px);pointer-events:none}
  .price-card.is-20x .pc-swap .sw-20{opacity:1;transform:none;pointer-events:auto}
  /* Tablet: mantem a grade aprovada, mas aproxima seu ritmo do mobile antes
     de chegar aos valores amplos do desktop. */
  @media(min-width:601px) and (max-width:1160px){
    #preco .price-grid.three{margin-top:clamp(40px,5vw,48px)}
    #preco .price-grid.three .price-card{padding:26px 22px 24px}
    #preco .price-grid.three .pc-top{min-height:44px;margin-bottom:16px}
    #preco .price-grid.three .pc-icon{width:44px;height:44px}
    #preco .price-grid.three .pc-icon svg{width:21px;height:21px}
    #preco .price-grid.three .pc-panel{margin-top:24px;padding:20px}
    #preco .price-grid.three .pc-list{gap:12px}
  }
  /* ≤600px: mesma seção, ritmo vertical mais denso (nada some, tudo aproxima) */
  @media(max-width:600px){
    #preco .price-grid.three .price-card{
      padding:clamp(18px,4.8vw,20px) clamp(16px,4.6vw,18px) 18px;
    }
    #preco .price-grid.three .pc-top{min-height:40px;margin-bottom:clamp(10px,3vw,12px)}
    #preco .price-grid.three .pc-icon{width:40px;height:40px}
    #preco .price-grid.three .pc-icon svg{width:20px;height:20px}
    #preco .price-grid.three .pc-name{font-size:clamp(18px,5vw,20px)}
    #preco .price-grid.three .pc-desc{min-height:0;font-size:13px;line-height:1.48}
    #preco .price-grid.three .pc-capacity{min-height:0;margin-top:clamp(10px,3vw,12px)}
    #preco .price-grid.three .price-card.featured .pc-capacity .pc-tokens{flex-basis:100%}
    #preco .price-grid.three .pc-capacity + .pc-price-row{margin-top:8px}
    #preco .price-grid.three .pc-val{font-size:clamp(38px,10vw,40px)}
    /* as mesmas quatro faixas do desktop, so que com o respiro mais curto */
    #preco .price-grid.three .pc-panel{
      margin-top:clamp(14px,4vw,16px);padding:clamp(14px,4vw,16px);
      grid-template-rows:auto auto minmax(12px,1fr) auto;
    }
    #preco .price-grid.three .pc-inherit{margin-bottom:11px;padding-bottom:9px}
    #preco .price-grid.three .pc-list{gap:clamp(9px,2.8vw,10px)}
    #preco .price-grid.three .pc-list li{gap:10px;font-size:13px;line-height:1.45}
    #preco .price-grid.three .price-card .pc-panel .btn{padding:12px 10px;font-size:13px}
  }
  @media(min-width:1200px){
    #preco .ps-note{max-width:1120px;white-space:nowrap}
  }
  @media(prefers-reduced-motion:reduce){
    #preco .price-grid.three .price-card.featured,
    #preco .price-grid.three .price-card.featured .pc-icon,
    #preco .price-grid.three .price-card.featured .ck,
    #preco .price-grid.three .price-card.featured .pcs-opt{transition:none}
  }

  /* ================= FAQ ================= */
  .faq{max-width:960px;margin:56px auto 0;border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;
    padding:34px 4px;font-family:var(--font);font-weight:400;font-size:clamp(18px,2vw,23px);
    color:var(--white);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
    letter-spacing:-.02em;
  }
  .faq-q .pm{
    flex:none;font-size:26px;font-weight:300;line-height:1;color:#5E72A8;
    transition:transform .25s, color .3s ease;
  }
  .faq-item:hover .pm,.faq-item.open .pm{color:var(--purple)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted);font-size:16px}
  .faq-a p{padding:0 4px 30px;line-height:1.6;max-width:820px}
  .faq-item.open .faq-a{max-height:280px}
  .faq-item.open .pm{transform:rotate(45deg)}

  /* ================= FINAL ================= */
  .final{text-align:center;padding:120px 0 0;position:relative;overflow:hidden}
  .final::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(700px 420px at 44% 60%,rgba(57,114,253,.12),transparent 60%),
               radial-gradient(600px 380px at 60% 50%,rgba(163,100,255,.1),transparent 60%);
  }
  .final h2{font-size:clamp(34px,4.4vw,56px);max-width:1000px;margin:0 auto;font-weight:600;letter-spacing:-.03em;line-height:1.15;position:relative}
  .final .btn{margin-top:44px;position:relative}

  .final-content{position:relative;z-index:2}
  /* ---- orbitas: os 14 apps do Hub emergindo em volta do Marvin ----
     Geometria de horizonte, nao de diagrama centrado. Cada anel tem
     bottom:0 e translate(-50%,50%): o +50% vertical sobe o circuloate o
     centro dele pousar na linha de base, entao so a metade de cima aparece e
     o overflow:hidden corta o resto. Os aneis sao MAIORES que a area visivel
     e saem pelas laterais de proposito.
     Cada icone e um braco ancorado no centro do circulo (transform-origin
     bottom) com a pastilha montada em cima da linha do anel. A pastilha
     contra-gira na duracao do proprio anel, e o animation-delay negativo
     coloca essa contra-rotacao na fase do angulo de partida do braco: e o
     que mantem o icone reto o ciclo inteiro sem precisar de um elemento
     extra so para desfazer o angulo. Delay aqui e seguro porque nao existe
     storyboard nenhum a dessincronizar, e uma rotacao continua.
     Por que dois icones nunca se cruzam: a distancia entre raios vizinhos e
     sempre maior que o diametro da pastilha, entao aneis diferentes nao se
     tocam em angulo nenhum, e dentro do mesmo anel o passo angular e fixo. */
  .orbits{
    --orb-ic:24px;--orb-pad:12px;
    --d1:440px;--d2:600px;--d3:720px;--globe-d:360px;
    position:relative;z-index:2;
    width:100%;height:390px;margin-top:12px;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  }
  /* o globo fica ATRAS dos aneis e dos icones. Ele ocupa so a metade de cima
     da esfera: o canvas tem meia altura e o script desenha o centro na base
     dele, entao nao existe pixel alocado para a metade invisivel. */
  .orb-globe{
    position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    z-index:0;pointer-events:none;
    width:var(--globe-d);height:calc(var(--globe-d)/2);
  }
  .orb-ring{
    position:absolute;bottom:0;left:50%;border-radius:50%;z-index:1;
    border:1px solid rgba(255,255,255,.08);
  }
  .orb-1{width:var(--d1);height:var(--d1);animation:orbRingCW 30s linear infinite}
  .orb-2{width:var(--d2);height:var(--d2);animation:orbRingCCW 40s linear infinite}
  .orb-3{width:var(--d3);height:var(--d3);animation:orbRingCW 50s linear infinite}
  @keyframes orbRingCW{from{transform:translate(-50%,50%) rotate(0deg)}to{transform:translate(-50%,50%) rotate(360deg)}}
  @keyframes orbRingCCW{from{transform:translate(-50%,50%) rotate(0deg)}to{transform:translate(-50%,50%) rotate(-360deg)}}
  /* o braco vai do centro do circulo ate a borda de cima */
  .orb-arm{
    position:absolute;top:0;left:50%;height:50%;width:0;
    transform-origin:bottom;
  }
  .orb-ic{
    position:absolute;top:0;left:50%;
    display:grid;place-items:center;
    padding:var(--orb-pad);border-radius:50%;
    background:var(--bg);border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
  }
  .orb-1 .orb-ic{animation:orbIcCCW 30s linear infinite}
  .orb-2 .orb-ic{animation:orbIcCW 40s linear infinite}
  .orb-3 .orb-ic{animation:orbIcCCW 50s linear infinite}
  /* a pastilha nasce centrada na linha do anel e contra-gira a partir dali */
  @keyframes orbIcCW{from{transform:translate(-50%,-50%) rotate(var(--counter-offset,0deg))}to{transform:translate(-50%,-50%) rotate(calc(var(--counter-offset,0deg) + 360deg))}}
  @keyframes orbIcCCW{from{transform:translate(-50%,-50%) rotate(var(--counter-offset,0deg))}to{transform:translate(-50%,-50%) rotate(calc(var(--counter-offset,0deg) - 360deg))}}
  .orb-ic img{width:var(--orb-ic);height:var(--orb-ic);object-fit:contain;display:block}
  .orb-1 .orb-arm:nth-child(1){--counter-offset:0deg;transform:translateX(-50%) rotate(0deg)}
  .orb-1 .orb-arm:nth-child(2){--counter-offset:-28.8deg;transform:translateX(-50%) rotate(72deg)}
  .orb-1 .orb-arm:nth-child(3){--counter-offset:-57.6deg;transform:translateX(-50%) rotate(144deg)}
  .orb-1 .orb-arm:nth-child(4){--counter-offset:-86.4deg;transform:translateX(-50%) rotate(216deg)}
  .orb-1 .orb-arm:nth-child(5){--counter-offset:-115.2deg;transform:translateX(-50%) rotate(288deg)}
  .orb-2 .orb-arm:nth-child(1){--counter-offset:-230.4deg;transform:translateX(-50%) rotate(36deg)}
  .orb-2 .orb-arm:nth-child(2){--counter-offset:-259.2deg;transform:translateX(-50%) rotate(108deg)}
  .orb-2 .orb-arm:nth-child(3){--counter-offset:-288deg;transform:translateX(-50%) rotate(180deg)}
  .orb-2 .orb-arm:nth-child(4){--counter-offset:-316.8deg;transform:translateX(-50%) rotate(252deg)}
  .orb-2 .orb-arm:nth-child(5){--counter-offset:-345.6deg;transform:translateX(-50%) rotate(324deg)}
  .orb-3 .orb-arm:nth-child(1){--counter-offset:-7.2deg;transform:translateX(-50%) rotate(18deg)}
  .orb-3 .orb-arm:nth-child(2){--counter-offset:-36deg;transform:translateX(-50%) rotate(90deg)}
  .orb-3 .orb-arm:nth-child(3){--counter-offset:-64.8deg;transform:translateX(-50%) rotate(162deg)}
  .orb-3 .orb-arm:nth-child(4){--counter-offset:-93.6deg;transform:translateX(-50%) rotate(234deg)}
  .orb-3 .orb-arm:nth-child(5){--counter-offset:-122.4deg;transform:translateX(-50%) rotate(306deg)}
  .orb-1 .orb-arm:nth-child(1) .orb-ic{animation-delay:0.0s}
  .orb-1 .orb-arm:nth-child(2) .orb-ic{animation-delay:-3.6s}
  .orb-1 .orb-arm:nth-child(3) .orb-ic{animation-delay:-7.2s}
  .orb-1 .orb-arm:nth-child(4) .orb-ic{animation-delay:-10.8s}
  .orb-1 .orb-arm:nth-child(5) .orb-ic{animation-delay:-14.4s}
  .orb-2 .orb-arm:nth-child(1) .orb-ic{animation-delay:-21.6s}
  .orb-2 .orb-arm:nth-child(2) .orb-ic{animation-delay:-16.8s}
  .orb-2 .orb-arm:nth-child(3) .orb-ic{animation-delay:-12.0s}
  .orb-2 .orb-arm:nth-child(4) .orb-ic{animation-delay:-7.2s}
  .orb-2 .orb-arm:nth-child(5) .orb-ic{animation-delay:-2.4s}
  .orb-3 .orb-arm:nth-child(1) .orb-ic{animation-delay:-1.5s}
  .orb-3 .orb-arm:nth-child(2) .orb-ic{animation-delay:-7.5s}
  .orb-3 .orb-arm:nth-child(3) .orb-ic{animation-delay:-13.5s}
  .orb-3 .orb-arm:nth-child(4) .orb-ic{animation-delay:-19.5s}
  .orb-3 .orb-arm:nth-child(5) .orb-ic{animation-delay:-25.5s}
  @media(min-width:768px){
    .orbits{--orb-ic:32px;--orb-pad:16px;--d1:720px;--d2:880px;--d3:1060px;--globe-d:600px;height:570px;margin-top:24px}
  }
  @media(prefers-reduced-motion:reduce){
    .orb-ring,.orb-ic{animation:none}
    .orb-1{transform:translate(-50%,50%)}
    .orb-2{transform:translate(-50%,50%)}
    .orb-3{transform:translate(-50%,50%)}
    .orb-ic{transform:translate(-50%,-50%)}
  }
  .f-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.3;animation:starTw 3s ease-in-out infinite;pointer-events:none}
  @keyframes starTw{0%,100%{opacity:.1}50%{opacity:.75}}
  /* arco/horizonte com brilho (modelo sparkles) */
  .final-arc{
    position:relative;height:300px;margin-top:-10px;pointer-events:none;
    -webkit-mask-image:radial-gradient(58% 60% at 50% 40%, #000 35%, transparent 80%);
            mask-image:radial-gradient(58% 60% at 50% 40%, #000 35%, transparent 80%);
  }
  .final-arc .aglow{
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 105%, rgba(131,80,232,.55), transparent 68%);
    opacity:.5;
  }
  .final-arc .planet{
    position:absolute;left:-50%;top:52%;width:200%;aspect-ratio:1/0.7;
    border-radius:100%;
    border-top:1px solid rgba(255,255,255,.25);
    background:var(--bg);
    box-shadow:0 -30px 80px -20px rgba(131,80,232,.25);
  }

  footer{border-top:1px solid rgba(122,160,255,.48);background:#020A2A;padding:38px 0;color:var(--muted);font-size:14px}
  .foot-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:32px;row-gap:14px}
  .foot-links{justify-content:center;gap:28px}
  footer .foot-links{position:static;z-index:auto;background:transparent;border:0;backdrop-filter:none}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  /* no hero a entrada é mais longa e mais macia (o escalonamento vem do site.js) */
  .hero .reveal{
    transform:translateY(30px) scale(.988);
    transition:opacity 1.05s var(--ease-soft), transform 1.05s var(--ease-soft), filter .9s var(--ease-soft);
    filter:blur(4px);
  }
  .hero .reveal.in{transform:none;filter:none}

  /* quebras de linha responsivas: .br-m só no mobile, .br-d só no desktop */
  .br-m{display:none}

  /* animações pausadas fora da viewport */
  section:not(.in-view) *{animation-play-state:paused !important}

  /* palavra destacada com cor ciclando (cores do Hub) */
  .hl-anim{animation:hlFade 18s ease-in-out infinite}
  @keyframes hlFade{
    0%,100%{color:inherit}
    8%{color:#3972FD}
    18%{color:inherit}
    28%{color:#A364FF}
    38%{color:inherit}
    48%{color:#FA9800}
    58%{color:inherit}
    68%{color:#34D399}
    78%{color:inherit}
    88%{color:#5BC0BE}
  }

  /* glass (fusionai) */
  .pain,.app,.why-card,.layer-card,.price-card,.case-card{
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border-color:rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -36px rgba(0,0,0,.7);
  }
  .pain:hover,.app:hover,.why-card:hover,.layer-card:hover,.price-card:hover,.case-card:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -36px rgba(0,0,0,.7),
               0 0 38px -12px rgba(123,92,255,.3);
  }
  /* Na home, apps continuam sendo links com borda no hover e diferenciais
     viram itens abertos. Os casos recebem vidro próprio logo abaixo. */
  #apps .app,#whyScroll .why-card{
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  }
  #apps .app{
    background:rgba(255,255,255,.012);border-color:var(--line-2);
    transition:transform .3s var(--ease-soft),border-color .3s var(--ease-soft);
  }
  #apps .app .ic{
    background:rgba(57,114,253,.045);border:0;
  }
  #apps .app:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--app-c) 40%,var(--line-2));
    box-shadow:none;
  }
  #whyScroll .why-card:hover{box-shadow:none;transform:none}
  #whyScroll .why-card::after{display:none}
  #casos .case-card{
    background:
      linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 44%,rgba(9,12,29,.28)),
      rgba(13,16,35,.46);
    border-color:rgba(231,237,255,.1);
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.075),
      0 18px 44px -32px rgba(0,0,0,.78),
      0 0 30px -20px rgba(123,92,255,.22);
  }
  #casos .case-card:hover{
    transform:translateY(-4px);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.09),
      0 24px 52px -30px rgba(0,0,0,.82),
      0 0 34px -18px rgba(123,92,255,.3);
  }
  #whyScroll .why-card{
    background:none;border:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0;
    padding:26px 16px 30px;transition:none;
  }
  #whyScroll .why-card .ic{
    width:32px;height:32px;border-radius:0;background:none;border:0;
    margin-bottom:24px;transition:color .3s ease;
  }
  #whyScroll .why-card:hover .ic{
    color:var(--wc);background:none;border-color:transparent;
  }

  /* acessibilidade */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:2px solid rgba(255,255,255,.85);outline-offset:3px;border-radius:10px;
  }
  ::selection{background:rgba(163,100,255,.4);color:#fff}
  @media (prefers-reduced-motion: reduce){
    #apps .app:hover{transform:none}
    *, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* ================= RESPONSIVE ================= */
  @media(max-width:1100px) and (min-width:901px){
    .case-track{grid-template-columns:repeat(3,1fr)}
    #whyScroll .htrack{grid-template-columns:repeat(2,1fr)}
  }
  /* carrosséis: comportamento exclusivo de mobile/tablet */
  @media(max-width:900px){
    .hero-stage{padding-inline:24px}
    .hscroll,.cases-scroll{
      overflow-x:auto;scroll-snap-type:x mandatory;
      cursor:grab;scrollbar-width:none;user-select:none;-webkit-overflow-scrolling:touch;
      /* mesma correção do carrossel de planos: a faixa sangra até as bordas da
         tela, senão os 18px de padding do .wrap ficam mortos ao toque, e o
         arraste não encadeia no gesto de "voltar" do navegador */
      width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
      padding-left:18px;padding-right:18px;
      /* o snap ignora o padding do container: sem isto o primeiro card encosta
         na borda e sai do alinhamento com o título da seção */
      scroll-padding-left:18px;scroll-padding-right:18px;
      overscroll-behavior-x:contain;
    }
    .hscroll::-webkit-scrollbar,.cases-scroll::-webkit-scrollbar{display:none}
    .hscroll.drag,.cases-scroll.drag{cursor:grabbing}
    .htrack,.case-track{display:flex;width:max-content}
    .htrack .app{flex:0 0 272px}
    .htrack .why-card{flex:0 0 332px}
    .case-card{flex:0 0 300px}
    .cdots:not(.cdots-price){display:flex}
  }
  @media(max-width:1000px){
    .price-grid{grid-template-columns:1fr;gap:36px}
    .why-head{grid-template-columns:1fr}
    .qgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  }
  @media(max-width:880px){
    .grid4{grid-template-columns:repeat(2,1fr)}
    .stats{grid-template-columns:1fr;gap:38px}
    .pad{padding:80px 0}
    .vh-node{width:54px;height:54px;border-radius:15px}
    .vh-node img{width:27px;height:27px}
    .vh-core{width:72px;height:72px;border-radius:19px}
    .vh-core img{width:38px}
    .journey{justify-content:flex-start}
  }
  /* entre 641 e 760 o palco encolhe além da conta pros nós de 54px
     (precisa vir depois do bloco de 880 pra vencer a cascata) */
  @media(max-width:760px){
    .vh-node{width:44px;height:44px;border-radius:12px}
    .vh-node img{width:22px;height:22px}
  }

  /* ================= MOBILE ================= */
  @media(max-width:640px){
    .pad{padding:60px 0}
    .wrap{padding:0 18px}
    .final{padding-top:72px}
    .orbits{--orb-ic:26px;--orb-pad:14px;--d1:360px;--d2:500px;--d3:640px;height:360px}
    .hero{padding-top:36px}
    /* problema: número centralizado em cima, texto menor abaixo */
    .stat{display:block;text-align:center}
    .stat .n{font-size:54px}
    .stat .l{margin:10px auto 0;max-width:260px;font-size:13.5px;line-height:1.5}
    .hero h1{font-size:clamp(30px,8vw,38px);margin-top:30px;text-wrap:balance}
    .hero .sub{font-size:16px;margin-top:24px}
    .hero-cta{margin-top:34px;gap:10px;justify-content:center}
    .hero-cta .btn{font-size:13.5px;padding:13px 15px;white-space:nowrap}
    .trust{font-size:11.5px;margin-top:30px;gap:10px;flex-wrap:nowrap;white-space:nowrap;justify-content:center}
    .trust .av img{width:30px;height:30px;margin-left:-11px}
    .trust .t-long{display:none}
    .trust .t-short{display:inline}
    /* O mockup continua leve no mobile. Uma escala externa preserva a tela do
       produto sem comprimir ou reorganizar nenhum componente interno. */
    .hero-mock{
      display:block;width:760px;max-width:none;height:302px;
      left:50%;margin-left:-380px;
      transform:scale(.72);transform-origin:50% 0;
    }
    .hero-stage{margin-top:62px;padding:0 0 20px}
    .hero-light{top:-26px;height:calc(100% + 46px)}
    .badge-pill{font-size:11.5px;text-align:center}
    .h2{font-size:26px;text-wrap:balance}
    .br-m{display:inline}
    .br-d{display:none}
    .lede{font-size:15px}
    #apps .split-aside > .btn{display:none}
    #apps .split-aside .apps-note{margin-top:12px}
    #apps .app-filter{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px
    }
    #apps .af-btn{
      display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
      min-width:0;min-height:44px;gap:4px;padding:7px 8px;
      font-size:11.5px;line-height:1.15;text-align:center
    }
    #apps .af-n{padding:2px 4px;font-size:9.5px}
    .stats{gap:0;margin-top:36px}
    /* traço azul esmaecido separando cada número (somente mobile) */
    .stat{padding:28px 0}
    .stat + .stat{position:relative}
    .stat + .stat::before{
      content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
      width:72px;height:2px;border-radius:2px;background:rgba(57,114,253,.35);
    }
    .grid4{grid-template-columns:1fr;gap:12px}
    .pain .ic{margin-bottom:20px}
    /* o traçado horizontal não cabe: troca pro vertical (5 em cima, 4 de
       cada lado, 5 embaixo, Marvin no meio) usando as posições --mx/--my */
    .virada-stage{margin-top:36px;width:min(360px,100%);aspect-ratio:360/560}
    .vh-wires-h{display:none}
    .vh-wires-v{display:block}
    .vh-node{left:var(--mx);top:var(--my);width:44px;height:44px;border-radius:12px}
    .vh-node img{width:22px;height:22px}
    .vh-core{width:64px;height:64px;border-radius:17px}
    .vh-core img{width:34px}
    .layer-card .stage{height:210px}
    .layer-card h3{font-size:21px}
    .htrack .app{flex:0 0 74vw}
    .htrack .why-card{flex:0 0 80vw}
    .case-card{flex:0 0 80vw}
    .qgrid{grid-template-columns:1fr;gap:12px}
    .q-item{padding:26px 24px;gap:16px}
    .q-item p{font-size:15px}
    /* jornada vertical no mobile: ícone grande centralizado, texto abaixo */
    .journey{flex-direction:column;align-items:center;justify-content:flex-start;overflow:visible;margin-top:48px;padding:0;gap:0}
    .j-step{display:flex;flex-direction:column;align-items:center;width:min(100%,300px);text-align:center;gap:14px}
    .j-step .box{width:104px;height:104px;border-radius:24px}
    .j-step .box svg{width:48px;height:48px}
    .j-step h4{font-size:20px;font-weight:600;margin-top:2px}
    .j-step small{font-size:15px;line-height:1.5;text-align:center;margin-top:0}
    .j-step small br{display:block}
    .j-link{flex:0 0 52px;width:2px;height:52px;margin:14px 0}
    .j-link i{background:linear-gradient(180deg,rgba(101,121,164,.28),rgba(139,157,196,.72),rgba(101,121,164,.28));transform:scaleY(0);transform-origin:top}
    .j-link.lit i{transform:scaleY(1)}
    .j-link::after{top:0;left:50%;transform:translate(-50%,-8px)}
    .j-link.pulse::after{animation:linkPulseV .78s var(--ease-soft) forwards}
    .faq-q{font-size:16.5px;padding:24px 4px}
    /* três linhas no mobile: o corpo cabe com a quebra depois de "Termine"
       (medido em 375px: 322px de 339 disponíveis a 24px) */
    .final h2{font-size:clamp(20px,6.4vw,24px)}
    /* rodapé empilhado e centralizado; a assinatura fica numa linha só */
    .foot-in{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:18px}
    .foot-links{width:100%;justify-content:space-between;gap:8px;flex-wrap:nowrap}
    .foot-links a{white-space:nowrap;font-size:12px}
    .foot-in>div{white-space:nowrap;font-size:clamp(10px,3.15vw,14px);letter-spacing:-.01em}
    .final-arc{height:220px}
  }

  @media(max-width:600px){
    .hero-mock{height:286px;transform:scale(.68)}
  }
  @media(max-width:560px){
    .hero-mock{height:260px;transform:scale(.62)}
  }
  @media(max-width:520px){
    .hero-mock{height:246px;transform:scale(.585)}
  }
  @media(max-width:480px){
    .hero-mock{height:218px;transform:scale(.52)}
  }
  @media(max-width:440px){
    .hero-mock{height:202px;transform:scale(.48)}
  }
  @media(max-width:400px){
    .hero-mock{height:193px;transform:scale(.46)}
  }
  @media(max-width:380px){
    .hero-mock{height:179px;transform:scale(.425)}
  }
  @media(max-width:360px){
    .hero-mock{height:172px;transform:scale(.41)}
  }
  @media(max-width:340px){
    .hero-mock{height:156px;transform:scale(.37)}
    .foot-links{gap:4px}
    .foot-links a{font-size:10px}
  }

/* ===================== PÁGINAS DE APP (landing por produto) ===================== */
.app-hero{position:relative;padding:88px 0 56px;text-align:center;overflow:hidden}
.app-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(820px 380px at 50% -12%, color-mix(in srgb, var(--app,#3972FD) 20%, transparent), transparent 62%);}
.app-hero .wrap{position:relative;z-index:1}
.app-ic{width:104px;height:104px;border-radius:28px;display:grid;place-items:center;margin:0 auto 28px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--app,#3972FD) 16%, #0A0F26), #0A0F26);
  border:1px solid color-mix(in srgb, var(--app,#3972FD) 38%, var(--line));
  box-shadow:0 24px 64px -18px color-mix(in srgb, var(--app,#3972FD) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.06);}
.app-ic img{width:64px;height:64px;object-fit:contain}

/* ===== Hero coverflow: ícone do app atual no centro + vizinhos esmaecidos =====
   Renderizado por assets/app-switcher.js a partir de SITE_APPS. */
.app-hero-stage{
  position:relative;margin:0 auto 28px;max-width:560px;height:172px;
  display:flex;align-items:center;justify-content:center;user-select:none;-webkit-tap-highlight-color:transparent;
}
.hs-track{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hs-item{
  position:absolute;display:grid;place-items:center;transition:all .55s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(160deg, color-mix(in srgb, var(--app,#3972FD) 14%, #0A0F26), #0A0F26);
  border:1px solid color-mix(in srgb, var(--app,#3972FD) 30%, var(--line));
  text-decoration:none;will-change:transform,opacity;
}
.hs-item img{width:60%;height:60%;object-fit:contain;pointer-events:none}
/* posição central — destaque */
.hs-item.is-active{
  width:120px;height:120px;border-radius:30px;opacity:1;transform:translateX(0) scale(1);
  z-index:5;cursor:default;
  border-color:color-mix(in srgb, var(--app,#3972FD) 55%, transparent);
  box-shadow:0 26px 64px -20px color-mix(in srgb, var(--app,#3972FD) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
/* posições vizinhas (clique muda de página) */
.hs-item.is-prev,.hs-item.is-next{
  width:78px;height:78px;border-radius:22px;opacity:.55;z-index:3;cursor:pointer;
  filter:saturate(.6);
}
.hs-item.is-prev{transform:translateX(-118px) scale(1)}
.hs-item.is-next{transform:translateX( 118px) scale(1)}
.hs-item.is-prev2,.hs-item.is-next2{
  width:60px;height:60px;border-radius:18px;opacity:.28;z-index:2;cursor:pointer;
  filter:saturate(.4) blur(.2px);
}
.hs-item.is-prev2{transform:translateX(-208px) scale(1)}
.hs-item.is-next2{transform:translateX( 208px) scale(1)}
.hs-item.is-prev:hover,.hs-item.is-next:hover{opacity:.85;filter:none}
.hs-item.is-prev2:hover,.hs-item.is-next2:hover{opacity:.55;filter:saturate(.7)}
/* setas */
.hs-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(10,15,38,.7);backdrop-filter:blur(8px);
  color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.72;transition:.18s;
}
.hs-arrow:hover{opacity:1;border-color:color-mix(in srgb, var(--app,#3972FD) 60%, transparent)}
.hs-arrow svg{width:18px;height:18px}
.hs-arrow.hs-prev{left:8px}
.hs-arrow.hs-next{right:8px}
@media(max-width:640px){
  .app-hero-stage{height:148px;max-width:none}
  .hs-item.is-active{width:104px;height:104px;border-radius:26px}
  .hs-item.is-prev,.hs-item.is-next{width:64px;height:64px;border-radius:18px}
  .hs-item.is-prev{transform:translateX(-92px)}
  .hs-item.is-next{transform:translateX( 92px)}
  .hs-item.is-prev2,.hs-item.is-next2{width:48px;height:48px;border-radius:14px}
  .hs-item.is-prev2{transform:translateX(-160px)}
  .hs-item.is-next2{transform:translateX( 160px)}
  .hs-arrow{width:34px;height:34px}
  .hs-arrow.hs-prev{left:2px}
  .hs-arrow.hs-next{right:2px}
}
.app-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 17px;border-radius:64px;font-size:13px;font-weight:500;color:#fff;
  background:color-mix(in srgb, var(--app,#3972FD) 12%, transparent);border:1px solid color-mix(in srgb, var(--app,#3972FD) 38%, transparent)}
.app-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--app,#3972FD)}
.app-hero h1{font-size:clamp(34px,4.3vw,54px);font-weight:600;letter-spacing:-.035em;margin:32px auto 0;max-width:24ch;line-height:1.12;color:#fff;text-wrap:balance}
.app-hero .app-sub{font-size:clamp(16px,1.7vw,20px);color:var(--muted);max-width:680px;margin:28px auto 0;line-height:1.55;letter-spacing:-.02em;text-wrap:pretty}
.app-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:nowrap;margin-top:36px}
@media(max-width:640px){.app-hero-cta{gap:10px}.app-hero-cta .btn{font-size:13.5px;padding:13px 15px;white-space:nowrap}}

.app-pain:hover .ic{color:var(--app,#3972FD);background:color-mix(in srgb, var(--app,#3972FD) 12%, transparent)}

.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:52px;text-align:left}
@media(max-width:900px){.cases-grid{grid-template-columns:1fr}}
.usecase{position:relative;border-radius:20px;padding:30px 28px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.usecase .num{font-family:var(--font);font-size:13px;font-weight:700;color:var(--app,#3972FD);letter-spacing:.06em;text-transform:uppercase}
.usecase h3{font-size:21px;font-weight:600;letter-spacing:-.025em;margin:10px 0 12px;line-height:1.22;color:#fff}
.usecase p{font-size:14.5px;color:var(--muted);line-height:1.62}
.usecase .marvin-says{margin-top:18px;display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb, var(--app,#3972FD) 8%, rgba(255,255,255,.02));border:1px solid color-mix(in srgb, var(--app,#3972FD) 22%, var(--line-2))}
.usecase .marvin-says img{width:22px;height:22px;flex:none;margin-top:1px}
.usecase .marvin-says span{font-size:13.5px;color:#D7DCEC;line-height:1.5}
.usecase .marvin-says b{color:#fff;font-weight:600}

/* faixa de ícones de apps na navbar — escondida: o switcher agora vive no hero (coverflow) */
.app-switch{display:none !important}

.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}
@media(max-width:820px){.apps-grid{grid-template-columns:1fr}}
.appcard{display:flex;gap:14px;align-items:center;border-radius:16px;padding:18px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line-2);transition:transform .25s}
.appcard:hover{transform:translateY(-3px)}
.appcard img{width:40px;height:40px;object-fit:contain;flex:none}
.appcard-name{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-.02em}
.appcard-tag{font-size:12.5px;color:var(--muted);line-height:1.42;margin-top:3px}

/* ===================== Acessibilidade ===================== */
/* Skip link — vira visível ao focar pelo teclado */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:10px 16px;border-radius:0 0 12px 0;
  background:var(--blue);color:#fff;font-weight:600;font-size:14px;text-decoration:none}
.skip-link:focus{left:0;outline:2px solid #fff;outline-offset:2px}

/* Focus ring visível em todos os interativos (substitui o outline padrão fininho) */
a:focus-visible,button:focus-visible,
.btn:focus-visible,.appsw:focus-visible,
.hs-arrow:focus-visible,.hs-item:focus-visible,
.appcard:focus-visible,.faq-q:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--purple-soft);
  outline-offset:3px;
  border-radius:8px;
}
/* Remove o outline default (substituído pelo focus-visible acima) sem prejudicar mouse */
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* Touch targets ≥ 44px nas setas do coverflow — área clicável invisível via padding */
.hs-arrow{padding:3px}
@media(max-width:640px){.hs-arrow{padding:5px}}

/* Respeita prefers-reduced-motion — desliga animações decorativas */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* Mantém visível o estado final dos elementos animados */
  .reveal{opacity:1 !important;transform:none !important}
  .hero .reveal{filter:none !important}
  .vt-line i{transform:translateX(0) !important;opacity:.6}
  /* A Virada: entrada e pulso congelam, e tudo fica visível desde o
     início (nós e fios nunca presos em opacity 0) */
  .vh-node{opacity:1 !important;transform:translate(-50%,-50%) !important;transition:none !important}
  .vh-wire{stroke-dashoffset:0 !important;transition:none !important}
  .vh-pulse{animation:none !important;opacity:.2 !important;stroke-dashoffset:0 !important}
  .vh-core{animation:none !important}
  /* Hero: sem 3D, sem parallax, sem loop. O mockup congela na cena de resposta,
     que é a que carrega a informação (pergunta + resposta + card). */
  .hero-mock{perspective:none}
  .mock-frame{transform:none !important;transition:none !important}
  .mock-floor{transform:translateX(-50%) !important;opacity:.6}
  .hero-light{transform:none !important}
  /* congela na conversa respondida, a cena que mais carrega informação */
  .mock-screen.is-home{display:none}
  .mock-screen.is-marvin{opacity:1 !important;transform:none !important}
  .mock-waffle{display:none}
  .mv-hello{display:none}
  .mv-conv{opacity:1 !important}
  .mock-msg.is-me,.mock-msg.is-answer{display:flex !important;animation:none !important}
  .mock-msg.is-typing{display:none !important}
  .mv-eye-open{animation:none !important;transform:none !important;opacity:1 !important}
  .mv-eye-shut{animation:none !important;opacity:0 !important}
}

/* ===================== Ajustes de boxes/pílulas apertadas (páginas de app) ===================== */
/* Pílula "junto de você em todos os apps" e similares — texto pode quebrar em 2 linhas no mobile */
.moat-same{
  display:inline-block !important;
  font-size:13.5px !important;line-height:1.55 !important;
  padding:14px 22px !important;border-radius:20px !important;
  max-width:520px;text-align:left;white-space:normal;
}
.moat-same > span:first-child{
  display:inline-block;vertical-align:1px;margin-right:8px;
}
/* Nós do fluxo MDC → Marvin → apps */
.moat-node{
  font-size:13.5px !important;padding:11px 16px !important;gap:10px;
}
/* Exemplo de funcionalidade (caixa tracejada) */
.feat-eg{font-size:12.5px !important;line-height:1.55 !important}

/* ===================== Mockups (.bwin / .mock) — não comprimir no mobile ===================== */
@media(max-width:640px){
  /* Containers viram scrollers horizontais, com largura natural do mockup preservada */
  .bwin,.mock{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .bwin .bwin-app{min-width:760px}     /* janela cheia: layout desktop garantido */
  .mock .mock-body{min-width:560px}    /* mockups menores */
}

/* ===================== Mobile: títulos e textos sempre centralizados ===================== */
@media(max-width:640px){
  /* Cobre seções cujo container não é .wrap.center (ex.: "Por que Marvee", FAQ) */
  section .h2,
  section .lede,
  section .sub{
    text-align:center;
  }
  /* .why-head era 2 colunas com alinhamento à esquerda — forçar centralização */
  .why-head{text-align:center}
  .why-head .lede{margin-left:auto;margin-right:auto;text-align:center}
}

/* ===================== Aurora canvas no hero das páginas de apps ===================== */
.app-hero{position:relative;isolation:isolate}
canvas.aurora-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:.55;filter:blur(40px) saturate(1.15);
  mix-blend-mode:screen;
}
/* Overlay escuro suave por cima do canvas — preserva contraste do texto e botões */
.app-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(680px 360px at 50% 64%, transparent 0%, color-mix(in srgb, var(--bg) 50%, transparent) 60%, color-mix(in srgb, var(--bg) 85%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, transparent 38%, transparent 62%, color-mix(in srgb, var(--bg) 60%, transparent) 100%);
}
/* Conteúdo do hero acima do canvas + overlay */
.app-hero > .wrap{position:relative;z-index:2}
/* Mantém o radial blue/purple original do hero, agora um pouco mais sutil */
.app-hero::before{z-index:0;opacity:.5}
@media (prefers-reduced-motion: reduce){
  canvas.aurora-canvas{opacity:.35}
}

  /* ================= NAV: resto vivo do menu antigo =================
     O dropdown antigo (.nav-item/.nav-trigger/.nav-drop/.nav-toggle) saiu com o
     mega-menu: zero ocorrência no fonte e no dist. O que fica é a regra que as
     LPs de evento (imersão, palestra, agenda) consomem: o wrapper .nav-cta some
     no mobile e a CTA reaparece dentro do drawer, montada pelo nav-menu.js. */
  @media(max-width:900px){
    .nav-cta{display:none}
  }

/* ===================== JANELA DE PRODUTO: TEMA CLARO/ESCURO =====================
   Casa canônica do mockup de janela usado nas LPs de app (a seção "Veja em ação").
   Qualquer janela (.bwin, .mv-win, .mock) consome as variáveis --w-*; a janela nasce
   com .win-dark ou .win-light e o controle .win-theme troca a classe (site.js).
   Paleta escura: protótipo da plataforma (prototipos/hub). Catálogo: marca/design-system. */
.win-dark{
  --w-bg:#04081F; --w-chrome:#050923;
  --w-line:rgba(255,255,255,.06); --w-line2:rgba(255,255,255,.1);
  --w-tx:#F9F9F9; --w-tx2:#AEB6D6; --w-mut:#7E84A6;
  --w-hover:rgba(255,255,255,.05); --w-active:rgba(255,255,255,.09);
  --w-card:rgba(15,17,38,.6); --w-soft:rgba(255,255,255,.03);
  --w-glass:rgba(255,255,255,.05);
  --w-ok:#16b981; --w-ok-bg:rgba(22,185,129,.14); --w-warn:#F0A83C; --w-bad:#E9614B;
  --w-edge:rgba(255,255,255,.1);
  /* texto sobre um destaque na cor da área (item ativo, menção, chip) */
  --w-accent-tx:color-mix(in srgb,var(--app,#3972FD) 72%,#fff);
  --w-accent-bg:color-mix(in srgb,var(--app,#3972FD) 16%,transparent);
  /* rail lateral de espaços: escuro nos dois temas, por desenho */
  --w-rail:#0B1020; --w-rail-tx:#98A0BF; --w-rail-soft:#161C33;
  /* superfície um passo acima do fundo (coluna de kanban, track de barra, célula) */
  --w-soft2:rgba(255,255,255,.045);
  /* chips de estado (pendente, vencido, confirmado) */
  --w-chip-ok:rgba(22,185,129,.16);  --w-chip-ok-tx:#5FE0AE;
  --w-chip-warn:rgba(240,168,60,.16); --w-chip-warn-tx:#F0BE72;
  --w-chip-bad:rgba(233,97,75,.16);   --w-chip-bad-tx:#F09B8B;
  --w-chip-info:rgba(57,114,253,.18); --w-chip-info-tx:#9DBDFF;
}
.win-light{
  /* núcleo de superfície/texto/linha vem dos tokens globais --light-* (a
     casa única do tom claro); os valores computados são os mesmos de antes */
  --w-bg:var(--light-bg); --w-chrome:var(--light-chrome);
  --w-line:var(--light-line); --w-line2:var(--light-line2);
  --w-tx:var(--light-tx); --w-tx2:var(--light-tx2); --w-mut:var(--light-mut);
  --w-hover:rgba(16,24,40,.04); --w-active:color-mix(in srgb,var(--app,#3972FD) 10%,transparent);
  --w-card:var(--light-card); --w-soft:var(--light-soft);
  --w-glass:rgba(255,255,255,.85);
  --w-ok:#12a06f; --w-ok-bg:#e9f9ef; --w-warn:#B4710D; --w-bad:#D63B22;
  --w-edge:rgba(0,0,0,.4);
  --w-accent-tx:color-mix(in srgb,var(--app,#3972FD) 62%,#000);
  --w-accent-bg:color-mix(in srgb,var(--app,#3972FD) 13%,#fff);
  --w-rail:#2A2521; --w-rail-tx:#B9B0A5; --w-rail-soft:#3A342E;
  --w-soft2:#F4F6FB;
  --w-chip-ok:#E9F9EF;  --w-chip-ok-tx:#0D6F6A;
  --w-chip-warn:#FDF3E6; --w-chip-warn-tx:#B5740F;
  --w-chip-bad:#FDECEA;  --w-chip-bad-tx:#D63B22;
  --w-chip-info:#E8F0FE; --w-chip-info-tx:#2B62D6;
}
/* a troca de tema é uma transição, não um corte */
.win-dark,.win-light{transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}

/* o controle (pílula com Escuro / Claro).
   A margem de baixo dá o respiro entre a pílula e a janela: a janela (.bwin)
   nasce com margin-top zero, então sem isto a pílula encosta nela. É menor que
   os 56px de .grid4/.moat de propósito: a pílula pertence à janela que vem
   logo abaixo, não é um bloco separado dela. */
.win-theme{
  display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;margin-top:18px;margin-bottom:32px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
/* exceção: no MDC a pílula vive dentro da coluna esquerda (.via-left), lado a
   lado com a janela em vez de acima dela. Ali o respiro de baixo não se aplica. */
.via-left .win-theme{margin-bottom:0}
.win-theme button{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border:0;cursor:pointer;
  background:none;color:var(--muted);font-family:var(--font);font-size:12px;font-weight:600;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.win-theme button svg{width:13px;height:13px}
.win-theme button.on{background:color-mix(in srgb,var(--app,var(--teal)) 22%,transparent);color:#fff}
.win-theme button:not(.on):hover{color:#fff}
@media(prefers-reduced-motion:reduce){
  .win-dark,.win-light,.win-theme button{transition:none}
}

/* ============== SEÇÃO EM ILHA (.sec-grow + .sec-light / .sec-blue) ==============
   Tratamento de seção em tom próprio: uma ilha na página escura, com nome
   genérico de propósito (qualquer seção pode usar). A estrutura (raio que
   abre, sombra, altura herdada, centragem) é uma só e vale para as duas
   pinturas; o que muda é a tinta:

     .sec-light  ilha clara. As cores vêm dos tokens globais --light-* (a
                 mesma casa do .win-light); texto, borda e sombra são
                 recalculados aqui, nunca herdados do tema escuro.
     .sec-blue   ilha no azul da própria página: a navy da base com um toque
                 do --blue, um degrau acima do fundo. Como não vira o tom, os
                 componentes do tema escuro (jornada, .journey-note, botões)
                 entram sem nenhum override de contexto. É a variante para
                 separar uma dobra sem quebrar a página em duas.

   Só a ilha CLARA puxa o menu para o claro: quem decide isso é o
   secLightScroll do site.js, que conta apenas as .sec-grow com uma .sec-light
   dentro. Uma ilha azul cresce igual e deixa o topo no escuro, que é o certo.
   O wrapper .sec-grow faz a caixa nascer com margem e crescer até sangrar
   a tela quando centralizada na viewport (scroll-driven quando o navegador
   suporta; senão o site.js escreve --secg no scroll). O recuo lateral é
   padding multiplicado pelo progresso, então nada nunca passa de 100% de
   largura: overflow horizontal é impossível por construção.
   Catálogo: marca/design-system. */
@property --secg{syntax:'<number>';initial-value:1;inherits:true}
/* estrutura: comum às duas pinturas */
.sec-light,.sec-blue{
  border-radius:calc(34px * var(--secg));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55);
  /* a caixa acompanha a altura reservada pela seção: no pico ela cobre a
     viewport inteira, então não sobra faixa escura em cima nem embaixo */
  min-height:inherit;display:flex;flex-direction:column;justify-content:center;
}
/* tinta clara */
.sec-light{background:var(--light-bg);color:var(--light-tx)}
.sec-light .h2{color:var(--light-tx)}
.sec-light .lede{color:var(--light-tx2)}
/* tinta azul: é o AZUL DA PÁGINA, não um azul de destaque. A caixa é a navy da
   base (--bg) com um toque do --blue, então ela se levanta um degrau do fundo
   e o raio mais a sombra fazem o resto da separação. Não entra hex novo: mudou
   o --bg ou o --blue, muda a ilha junto.
   Por ficar na mesma família de tom da página, esta variante NÃO reescreve
   .h2, .lede nem cor de texto: tudo herda o tema escuro e segue legível. É a
   diferença em relação à .sec-light, que inverte o tom e por isso recalcula. */
.sec-blue{background:color-mix(in srgb,var(--blue) 10%,var(--bg))}
.sec-grow{padding-inline:calc(max(24px,(100% - 1240px)/2) * var(--secg));min-height:inherit}
/* A altura é fixa (não animada) de propósito: animar min-height mudaria o
   fluxo durante o scroll e realimentaria a própria animação. Reservando
   mais que uma tela desde o início, o pico cobre a viewport só com o
   crescimento lateral, que é puro padding. */
.sec-tall{min-height:132svh}
@supports (animation-timeline: view()){
  .sec-grow{
    animation:secGrow linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
}
/* A janela de pico e a altura reservada são um par: com H = 1,32 vezes a
   viewport, a caixa só cobre a tela enquanto o centro dela está a menos de
   (H-V)/2 do centro da viewport, o que dá 43,1% a 56,9% do progresso. A
   janela de 44% a 56% cabe aí com folga; alargá-la exige subir o .sec-tall
   junto, senão volta a aparecer faixa escura nas bordas. */
@keyframes secGrow{0%{--secg:1}44%{--secg:0}56%{--secg:0}100%{--secg:1}}

/* ---- menu claro durante uma seção clara ----
   Quem escreve --navl é o navClaro do site.js: ele mede TODAS as .sec-grow e
   fica com o maior progresso, o que faz o menu acompanhar qualquer número de
   seções claras. Foi por isso que a view-timeline nomeada saiu daqui: com
   duas seções declarando o mesmo nome, a timeline vira ambígua e não aplica.
   O escopo continua duplo: a classe .nav-adaptive existe só no index.html (o
   <nav> vive em 35 páginas) e --navl nasce em 0, então sem a classe ou sem o
   JS o menu fica no escuro padrão. */
@property --navl{syntax:'<number>';initial-value:0;inherits:true}
nav.nav-adaptive{
  background:color-mix(in srgb, rgba(251,252,255,.88) calc(var(--navl) * 100%), rgba(4,8,31,.8));
  border-bottom-color:color-mix(in srgb, var(--light-line2) calc(var(--navl) * 100%), var(--line-2));
}
/* o símbolo NÃO muda: é o oficial, em cor sólida, e legível nos dois tons */
nav.nav-adaptive .nav-links,
nav.nav-adaptive .mm-trigger,
nav.nav-adaptive .mm-link{color:color-mix(in srgb, var(--light-tx) calc(var(--navl) * 100%), var(--white))}
nav.nav-adaptive .nav-burger span{background:color-mix(in srgb, var(--light-tx) calc(var(--navl) * 100%), #fff)}
/* a CTA continua sendo a mesma peça; no claro ganha um fundo sólido escuro
   para seguir legível (o traçado gradiente sumiria no branco) */
nav.nav-adaptive .nav-in > a.btn{
  color:color-mix(in srgb, #fff calc(var(--navl) * 100%), var(--white));
  /* no escuro o fundo e o do vidro (a regra base do .btn-slate); no claro vira
     o solido escuro que a CTA precisa para seguir legivel. Antes o lado escuro
     era transparent, e isso apagava o vidro justamente aqui. */
  background:color-mix(in srgb, var(--light-tx) calc(var(--navl) * 100%), transparent);
  border-radius:999px;
}
/* o ícone da Central de Ajuda acompanha a virada: traço e borda escurecem no
   claro, senão o glyph branco desaparece no fundo quase branco */
nav.nav-adaptive .nav-help{
  color:color-mix(in srgb, var(--light-tx) calc(var(--navl) * 100%), #fff);
}
/* o vidro se apaga na mesma medida em que o nav clareia: os realces sao
   brancos e ficariam sujos sobre o quase branco da secao clara. A opacidade e
   escrita AQUI, direto no pseudo, e nao por uma variavel intermediaria: o
   var() dentro de opacity nao acompanhou a mudanca de --navl nos testes. */
nav.nav-adaptive .nav-help::after,
nav.nav-adaptive .nav-in > a.btn-slate::after{
  opacity:calc(1 - var(--navl));
}

/* ===================== TRÊS CAMADAS: acordeão + mockups =====================
   O acordeão comanda o mockup: um tópico aberto por vez, timer de 9s troca
   sozinho (barra .ca-prog mostra o progresso; a duração da transition tem
   que casar com o HOLD do comoTabs no site.js) e o clique do usuário
   desliga o rodízio. */
#como{padding:70px 0}
.como-box{padding:clamp(48px,6vw,84px) 0}
.como-grid{
  margin-top:56px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,72px);align-items:center;text-align:left;
}
/* .is-viz-first: a demonstração vai para a esquerda e os tópicos para a
   direita, com a coluna maior acompanhando o vídeo. A troca é só visual, por
   order: na marcação o texto continua vindo antes, que é a ordem de leitura e
   de tabulação (o tópico explica, o vídeo ilustra).

   Por que a classe existe em vez de a regra valer para toda .como-grid: esta
   dobra é byte a byte a mesma na /hub-trial, com o mesmo id #como e as mesmas
   classes, então nem o seletor de id nem o de classe isolam a home. A marca no
   elemento é o que impede a inversão de vazar para uma página que ninguém
   pediu para mudar. */
/* O mockup tem proporção travada (1200/784), então só ganha altura ganhando
   largura, e o desequilíbrio que se via era de altura: 374,6px dele contra
   437px da coluna de texto ao lado. Os 62px de diferença saem por duas
   frações e um gap mais curto, sem tirar o grid do .wrap: alargar a dobra
   desalinharia esta seção de todas as outras da página, e a régua vale mais
   que os 24px que sobrariam.
   O piso da coluna de texto não é gosto: "Você pergunta. O Marvin age." é
   nowrap acima de 901px e pede 338,9px na fonte de 25px. Ela fica com 378px,
   acima desse piso, e os três títulos seguem em 2, 2 e 1 linha. O parágrafo
   do tópico aberto tem max-width de 48ch (cerca de 384px), então aqui ele
   passa a ser a coluna que o limita e ganha uma linha: é essa linha que leva
   a coluna de texto de 437px para 463px, e o mockup a acompanha. */
.como-grid.is-viz-first{
  grid-template-columns:minmax(0,1.30fr) minmax(0,.70fr);
  column-gap:clamp(28px,3.6vw,52px);
}
.como-grid.is-viz-first > .como-acc{order:2}
.como-grid.is-viz-first > .como-viz{order:1}
.como-acc{display:flex;flex-direction:column}
/* o divisor é horizontal, sob cada tópico: separa um do outro e é a mesma
   linha em que a barra do timer corre */
.ca-item{position:relative;border-bottom:1px solid var(--light-line2)}
.ca-prog{
  position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;border-radius:2px;
}
.ca-prog.run{transform:scaleX(1);transition:transform 9s linear}
.ca-h{margin:0}
/* o número saiu da linha do título e virou rótulo acima: assim título e
   parágrafo alinham na mesma margem, sem o degrau que a indentação criava */
.ca-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;padding:20px 0 16px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font);font-size:clamp(19px,1.75vw,25px);font-weight:600;
  letter-spacing:-.01em;color:var(--light-mut);transition:color .3s var(--ease-soft);
}
.ca-t{line-height:1.28;display:block}
/* o terceiro título é curto e a usuária pediu ele em uma linha só */
@media(min-width:901px){.ca-t1{white-space:nowrap}}
.ca-head:hover{color:var(--light-tx2)}
.ca-item.is-open .ca-head{color:var(--light-tx)}
.ca-head:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.ca-n{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--light-mut)}
.ca-body{overflow:hidden;max-height:0;opacity:0;visibility:hidden;
  transition:max-height .5s var(--ease-soft),opacity .4s var(--ease-soft),visibility .5s}
.ca-item.is-open .ca-body{max-height:240px;opacity:1;visibility:visible}
.ca-body p{font-size:15.5px;line-height:1.7;color:var(--light-tx2);max-width:48ch;padding-bottom:18px}
.como-viz{position:relative;min-width:0}
.cv-pane{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease-soft),visibility .45s}
.cv-pane.is-on{position:relative;opacity:1;visibility:visible}
.cv-card{
  border-radius:24px;overflow:hidden;background:var(--light-chrome);
  border:1px solid var(--light-line);
  box-shadow:0 24px 60px -24px rgba(16,24,40,.28);
}
/* a proporção acompanha a tela real do produto (1440x940), que é o que as
   composições enquadram: com 4/3 sobrava faixa vazia em cima e embaixo.
   Os três vídeos compartilham a mesma proporção porque desenham a mesma
   tela; se algum passar a ter outra, isto vira regra por vídeo. */
.cv-card video{display:block;width:100%;height:auto;aspect-ratio:1200/784}

/* No mobile a coluna do mockup deixa de existir: o site.js move cada painel
   para dentro do corpo do seu tópico, então o acordeão passa a abrir texto e
   tela juntos, em vez de mandar a demonstração para o pé da seção. */
@media(max-width:880px){
  .como-grid{grid-template-columns:1fr;gap:0;margin-top:40px}
  /* uma coluna só: a ordem volta a ser a da marcação, texto primeiro */
  .como-grid.is-viz-first{grid-template-columns:1fr}
  .como-grid.is-viz-first > .como-acc,
  .como-grid.is-viz-first > .como-viz{order:0}
  .ca-head{font-size:18px;padding:13px 0}
  .ca-body p{font-size:14.5px;padding-bottom:14px}
  #como{padding:40px 0}
  /* o contêiner fica vazio depois da mudança e não pode somar espaço */
  .como-viz{display:none}
  /* dentro do acordeão quem esconde é o próprio corpo fechado, então o
     painel não precisa mais se tirar do fluxo */
  .ca-body .cv-pane{position:relative;opacity:1;visibility:visible;transition:none}
  .ca-body .cv-card{margin-bottom:20px;border-radius:16px}
  /* o corpo agora carrega uma tela inteira: o teto de 240px cortaria o
     vídeo. A folga é generosa de propósito, porque max-height animado só
     precisa ser maior que o conteúdo, não exato. */
  .ca-item.is-open .ca-body{max-height:760px}
  /* sem rodízio, a barra que corria com o timer não tem o que contar: ela
     passa a marcar, cheia e parada, qual tópico está aberto */
  .ca-item.is-open .ca-prog{transform:scaleX(1);transition:none}
}

@media (prefers-reduced-motion: reduce){
  .sec-grow{animation:none !important;--secg:1}
  /* sem expansão, a seção não precisa reservar a tela inteira, e o menu
     fica no escuro padrão */
  .sec-tall{min-height:0}
  nav.nav-adaptive{--navl:0}
  .ca-prog{display:none}
  .ca-body{max-height:none !important;opacity:1 !important;visibility:visible !important}
  .cv-pane{transition:none}
}


/* ===================== MARVIN: manchete + carrossel =====================
   Manchete grande à esquerda e apoio em coluna estreita à direita; no topo,
   o símbolo e a CTA ligados por uma linha fina. Abaixo, um carrossel em que
   o card ativo fica em destaque e os vizinhos recuam e esmaecem. O estado
   ativo é uma classe (.is-on) que o marvinCarrossel do site.js move; o CSS
   só desenha os dois estados. */
.mh-top{display:flex;align-items:center;gap:20px}
.mh-ic{
  width:56px;height:56px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:var(--card-2);border:1px solid var(--line);
}
.mh-ic img{width:30px;height:30px}
.section-brand-mark{
  display:block;opacity:.58;
  filter:brightness(0) saturate(100%) invert(27%) sepia(76%) saturate(1515%) hue-rotate(204deg) brightness(82%) contrast(96%);
}
.mh-ic .section-brand-mark{width:30px;height:auto}
.as-tag .section-brand-mark{width:18px;height:auto}
/* Variação da placa que traz a assinatura da Marvee no lugar do ícone do app.
   R16-b: era o logotipo horizontal inteiro (símbolo + a palavra "Marvee") e
   passou a ser o SÍMBOLO SOZINHO, esmaecido. O selo é assinatura discreta de
   dobra: marca que a dobra é da Marvee sem competir com a headline ao lado.
   Quatro coisas que o CSS precisa absorver:
   1. Sem o wordmark, a proporção volta a caber na placa quadrada de 56px do
      .mh-ic base, então esta variação não mexe mais em largura nem em padding.
      É o que devolve o .mh-rule ao ponto onde ele começa nas placas comuns da
      página (o mesmo x da placa do .why-box, medido).
   2. O símbolo entra por <img> e fica FORA do .section-brand-mark, que tinge
      de azul. Símbolo oficial não se recolore: o único tratamento aqui é a
      opacidade, e ela é a mesma faixa que o .section-brand-mark já pratica
      (.58) para marca recessiva. O <img> também é o que impede o <style>
      interno do arquivo (classes .cls-1 e .cls-2, id Camada_1) de vazar para
      os outros SVGs da página, que é o acidente clássico deste repo.
   3. A medida de 30px de largura é a mesma do .mh-ic .section-brand-mark, para
      as duas assinaturas ocuparem a placa igual.
   4. O arquivo é duotone, teal e branco, feito para fundo escuro: esta
      variação só serve em seção escura. As duas da home estão sobre o
      #04081F do body; a placa do .why-box, que é a de fundo claro, segue com
      o ícone do app e não entra aqui. */
.mh-ic.is-logo img{width:30px;height:auto;opacity:.55}
.mh-rule{flex:1;height:1px;background:var(--line)}
.mh-cta{flex:none}
/* variação sem chamada: o ícone e a linha ficam, e a linha se estende até a
   borda direita para o topo não ficar com um vazio à direita */
.mh-top.is-bare .mh-rule{flex:1}
.mh-head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,72px);align-items:start;margin-top:34px;text-align:left;
}
.mh-head .h2{margin:0;text-align:left}
.mh-sub{font-size:15px;line-height:1.7;color:var(--muted);max-width:44ch;margin-top:6px}
/* R16: só na dobra do Marvin, onde o apoio é o mais longo da página e quebrava
   em 4 linhas. Quem prendia o texto não era a coluna e sim a medida de 44ch:
   a coluna oferecia 471px e o max-width cortava em 331px. As colunas passam a
   1,05/0,95 (o título perde 53px e continua em 2 linhas em 1440 e em 1280) e a
   medida sobe para 70ch, que aqui nunca chega a prender: quem governa a
   largura volta a ser a coluna. Escopado acima de 900px porque abaixo disso o
   .mh-head já vira uma coluna só e a medida curta é a que serve. */
@media(min-width:901px){
  #marvin .mh-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  #marvin .mh-sub{max-width:70ch}
}


/* ---- os dois cards ----
   Título curto e uma ou duas linhas de apoio no topo; abaixo, um fragmento
   da interface que sangra para fora do card, sugerindo que há mais além do
   quadro. O brilho fino no topo veio da lapidação do card anterior. */
/* R16: o cabeçalho estava colado nos cards. Os 48px não são valor novo: são
   os mesmos que a página já pratica entre um .mh-head e o conteúdo da dobra
   (o .cases-scroll de #casos, que usa o mesmo cabeçalho). */
.mcards{
  margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,28px);text-align:left;
}
.mcard{
  position:relative;overflow:hidden;border-radius:24px;
  padding:clamp(21px,2vw,27px) clamp(26px,2.4vw,34px) 0;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line-2);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.mcard::before{
  content:"";position:absolute;z-index:0;left:5%;right:28%;top:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(230,238,255,.52),rgba(163,100,255,.24),transparent);
}
.mcard > *{position:relative;z-index:1}
.mcard .app-sources{display:flex;align-items:center;width:fit-content;margin-bottom:14px}
.mcard .app-source{
  display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:rgba(4,8,31,.64);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 7px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
}
.mcard .app-source + .app-source{margin-left:-7px}
.mcard .app-source img{display:block;width:17px;height:17px;object-fit:contain}
.mcard-t{
  font-family:var(--font);font-size:clamp(19px,1.6vw,22px);font-weight:600;
  color:#fff;line-height:1.28;letter-spacing:-.02em;
}
.mcard-d{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:42ch}

/* o fragmento: encostado na base e sangrando pela direita */
/* R5: a dobra estava alta demais para o que mostra. A altura caiu por
   espaçamento, nunca por conteúdo: respiro entre cabeçalho e cards, padding do
   cartão e este recorte. As peças da cena continuam todas dentro do quadro
   (conferido peça a peça: a última, o campo de entrada, encosta na base com
   folga). */
/* R16: o apoio do card estava colado no topo do fragmento. O respiro de 16px
   é o dobro do que separa o título do apoio (8px), a mesma proporção que a
   dobra usa entre cabeçalho e cards: o par título+apoio continua lendo como
   um bloco só e o chat passa a começar depois dele, não dentro dele. */
.mcard-frag{position:relative;margin-top:16px;margin-right:-34px;height:458px;overflow:hidden}

/* ---- moldura de produto em volta da conversa ----
   Cabecalho em cima e campo de entrada embaixo: e o que faz o fragmento
   parecer um chat de verdade em vez de um pedaco solto. O campo ancora no
   RECORTE e nao no .mfr-chat, porque o chat e 80px mais alto que o recorte
   (o sangramento) e a base dele cai fora da area visivel. */
.mfr-head{
  display:flex;align-items:center;gap:9px;flex:none;
  margin:0 -16px 10px;padding:0 16px 9px;
  border-bottom:1px solid rgba(174,182,214,.12);
}
.mfr-av{
  display:grid;place-items:center;width:27px;height:27px;flex:none;
  border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid rgba(174,182,214,.14);
}
/* logo oficial e colorido: nunca tingido, nunca com filtro */
.mfr-av img{height:16px;width:auto;display:block}
.mfr-who{min-width:0;line-height:1.25}
.mfr-who b{display:block;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--white)}
.mfr-who small{display:block;font-size:10px;color:var(--mfr-text-muted)}
.mfr-input{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;gap:8px;
  margin:0 16px 12px 18px;padding:8px 8px 8px 13px;border-radius:999px;
  background:rgba(3,7,27,.72);border:1px solid rgba(174,182,214,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mfr-ph{flex:1;min-width:0;font-size:11.5px;color:var(--mfr-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* o envio é circular e cheio, no azul do site: ação de UI nunca é teal */
.mfr-send{
  display:grid;place-items:center;width:27px;height:27px;flex:none;
  border-radius:999px;color:#fff;
  background:linear-gradient(180deg,#4a7dff,#3567f0);
  box-shadow:0 4px 12px -4px rgba(57,114,253,.7),inset 0 1px 0 rgba(255,255,255,.22);
}
.mfr-send svg{width:13px;height:13px;display:block}

/* ---- a conversa do Marvin dentro do fragmento ----
   O vocabulário de classes é o mesmo da tela real do Marvin (.msg,
   .bubble, .meta, .tools-chip, .highlight, .stats, .sug), por isso TODA
   regra daqui pra baixo fica escopada em .mfr-chat: solto, um seletor como
   .bubble ou .stat colidiria com o site inteiro. Nunca escreva uma dessas
   classes sem o pai. Escalas são menores que as do produto porque aqui é um
   fragmento reduzido, não a tela em tamanho real. */
.mfr-chat{
  --mfr-text:#E2E8F5;--mfr-text-soft:#C3CCDE;--mfr-text-muted:#929DB5;
  position:relative;height:calc(100% + 80px);border-radius:16px 0 0 0;
  border:2px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.17);border-bottom:0;
  background:var(--bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:8px 16px 14px;display:flex;flex-direction:column;
}
/* R16: respiro constante entre mensagens. Antes eram dois valores (8px na do
   Marvin e 12px na do usuário) e a diferença só não aparecia porque a do
   Marvin é sempre a última da cena. Um valor só, e a regra da direita fica
   com o que de fato é dela: o alinhamento. */
.mfr-chat .msg{display:flex;flex-direction:column;margin-bottom:12px}
.mfr-chat .msg.user{align-items:flex-end}
.mfr-chat .meta{font-size:10.5px;color:var(--mfr-text-muted);padding:4px 4px 0}
/* A bolha nunca ocupa a coluna inteira: o teto de 80% deixa sempre uma faixa
   de respiro do lado oposto, que é o que dá a leitura de conversa. E o canto
   de cima do lado de quem fala fica reto, apontando para o interlocutor: o
   usuário quebra o canto superior direito, o Marvin o superior esquerdo. */
.mfr-chat .bubble{
  width:fit-content;max-width:80%;padding:8px 12px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--mfr-text);
}
.mfr-chat .msg.user .bubble{background:#232B4D;border:0;color:#fff;border-radius:16px 4px 16px 16px}
.mfr-chat .msg.marvin .bubble{border-radius:4px 16px 16px 16px}
/* o chip de ferramentas, aqui sempre no estado expandido (chevron pra baixo) */
.mfr-chat .tools-chip{
  display:flex;align-items:center;gap:7px;width:fit-content;
  padding:5px 11px;border-radius:999px;margin-bottom:6px;
  border:1px solid rgba(174,182,214,.15);background:rgba(146,157,181,.06);
  font-size:11.5px;font-weight:500;color:var(--mfr-text-soft);
}
.mfr-chat .tools-chip svg{width:13px;height:13px;color:var(--purple)}
.mfr-chat .tools-chip .chev{color:var(--mfr-text-muted);transform:rotate(90deg)}
/* as chamadas de ferramenta: nome, hora relativa, check e a linha da busca */
.mfr-chat .tool-calls{
  display:flex;flex-direction:column;gap:5px;margin:0 0 9px 6px;
  padding-left:11px;border-left:1px solid var(--line-2);
}
.mfr-chat .tool-call{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;column-gap:8px;
  padding:7px 10px;border-radius:11px;
  background:rgba(132,145,177,.055);border:1px solid rgba(174,182,214,.12);
}
.mfr-chat .tc-ic{
  display:grid;place-items:center;width:21px;height:21px;border-radius:7px;
  background:rgba(163,100,255,.12);color:var(--purple-soft);
}
.mfr-chat .tc-ic svg{width:12px;height:12px}
.mfr-chat .tc-nm{font-size:11.5px;color:var(--mfr-text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mfr-chat .tc-when{font-size:10.5px;color:var(--mfr-text-muted)}
.mfr-chat .tc-ok{display:grid;place-items:center;color:var(--green)}
.mfr-chat .tc-ok svg{width:12px;height:12px}
.mfr-chat .highlight{
  padding:11px 13px;border-radius:13px;margin-bottom:11px;
  background:rgba(132,145,177,.07);border:1px solid rgba(174,182,214,.14);
  font-size:12.5px;line-height:1.55;color:var(--mfr-text-soft);
}
.mfr-chat .bubble + .highlight{margin-top:10px}
.mfr-chat .highlight.is-alert{background:rgba(250,152,0,.08);border-color:rgba(250,152,0,.18)}
.mfr-chat .highlight b{color:#fff;font-weight:700}
/* atenção: .stats e .stat já existem no site (os números da seção #problema,
   por volta da linha 933, com variantes em media query e um divisor via
   .stat + .stat::before). Como o nome é o mesmo, aquelas regras alcançam o
   que está aqui dentro, então este bloco também as neutraliza. */
.mfr-chat .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 9px}
.mfr-chat .stats.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mfr-chat .stat{
  --c:126,132,166;display:block;text-align:left;padding:5px 11px 9px;border-radius:12px;
  background:radial-gradient(130% 110% at 50% -20%, rgba(var(--c),.14), transparent 62%), rgba(255,255,255,.03);
  border:1px solid rgba(var(--c),.2);
}
.mfr-chat .stat + .stat::before{content:none}
.mfr-chat .st-l{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2px;color:var(--mfr-text-muted)}
.mfr-chat .st-v{display:block;margin-top:2px;font-size:17px;font-weight:800;color:var(--white)}
.mfr-chat .st-v.blue{color:#6FA8FF}
.mfr-chat .st-v.purple{color:var(--purple-soft)}
.mfr-chat .st-v.green{color:var(--green)}
.mfr-chat .st-v.orange{color:var(--orange)}
.mfr-chat .st-v.red{color:#F87171}
.mfr-chat .suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.mfr-chat .sug{
  padding:6px 13px;border-radius:999px;border:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:var(--white);
}
.mfr-chat .sug.primary{background:rgba(57,114,253,.16);border-color:rgba(57,114,253,.3)}
.mfr-chat .pill-alert{
  align-self:flex-start;padding:4px 10px;border-radius:999px;margin-bottom:10px;
  background:rgba(250,152,0,.14);border:1px solid rgba(250,152,0,.3);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--orange-soft);
}
.mfr-chat.is-proactive{padding-top:8px}
.mfr-chat.is-proactive .pill-alert{margin-bottom:14px}
.mfr-chat.is-proactive .bubble + .highlight{margin-top:14px}
.mfr-chat.is-proactive .highlight{margin-bottom:14px}
.mfr-chat.is-proactive .suggestions{margin-top:5px}
.mfr-chat.is-proactive .meta{padding-top:8px}

/* ---- a cena animada ----
   Cada fragmento é uma demonstração em loop de 12s: os elementos entram na
   ordem do caso de uso, a cena segura pronta por vários segundos e o .scene
   faz o fade de saída antes de recomeçar. Mecânica: todas as animações têm
   os MESMOS 12s de duração e cada elemento marca sua entrada em
   porcentagens do ciclo (nunca use animation-delay aqui: com loop infinito
   o delay desloca a fase do elemento para sempre e o fade de saída
   dessincroniza). O site.js pausa tudo fora da viewport via
   section:not(.in-view) *{animation-play-state:paused}. Performance: só
   transform e opacity, com uma exceção pontual de box-shadow no glow do
   alerta. */
.mfr-chat .scene{
  position:relative;display:flex;flex-direction:column;flex:1;
  animation:mfrScene 12s linear infinite;
}
/* texto fantasma: barras que representam prosa sem pedir leitura */
.mfr-chat .gline{display:block;height:9px;border-radius:5px;background:rgba(146,157,181,.13)}
.mfr-chat .w-64{width:64%}
.mfr-chat .w-92{width:92%}
.mfr-chat .ghost-answer{display:flex;flex-direction:column;gap:7px;margin:2px 2px 0}
/* o popover de números: flutua SOBRE a conversa. A flutuação é lateral (recua
   à esquerda, sangra à direita) mais a sombra; verticalmente ele NÃO sobe sobre
   o bloco anterior, senão come a prosa fantasma, que vem logo acima dele no
   DOM. O respiro de 11px é o mesmo que separa os blocos desta cena. */
.mfr-chat .stats-float{
  position:relative;z-index:2;margin:11px -6px 0 12px;
  padding:9px;border-radius:16px;
  background:linear-gradient(180deg,#0C1230,#080D26);
  border:1px solid rgba(174,182,214,.17);
  box-shadow:0 26px 48px -12px rgba(0,0,0,.68),0 6px 18px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin:72% 0;
}
.mfr-chat .stats-float .stats{margin:0}
/* count-up: cada valor é uma coluna que rola em steps() até o número final */
.mfr-chat .st-v{height:22px;line-height:22px;overflow:hidden}
.mfr-chat .st-roll{display:block}
.mfr-chat .st-roll span{display:block;height:22px}
/* cursor fantasma e toast da cena proativa */
.mfr-chat .suggestions{position:relative}
.mfr-chat .cursor-ghost{
  position:absolute;left:84px;top:7px;width:17px;height:17px;z-index:4;
  color:#fff;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
.mfr-chat .cursor-ghost svg{display:block;width:100%;height:100%}
.mfr-chat .msg.is-first{position:relative}
/* o toast fecha a cena logo abaixo da mensagem, alinhado à direita e reto.
   Ancora no fim do .msg (top:100%) em vez de um bottom negativo, para o
   respiro ser o mesmo 14px que separa os blocos da cena proativa. */
.mfr-chat .toast{
  position:absolute;right:0;top:100%;margin-top:14px;z-index:3;
  display:flex;align-items:center;gap:8px;width:max-content;
  padding:9px 13px;border-radius:12px;
  background:linear-gradient(180deg,#0C1433,#091026);
  border:1px solid rgba(52,211,153,.28);
  box-shadow:0 22px 44px -10px rgba(0,0,0,.72),0 5px 14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
  font-size:11.5px;color:var(--mfr-text-soft);
}
.mfr-chat .toast b{color:#fff;font-weight:700}
.mfr-chat .toast-ic{
  display:grid;place-items:center;width:20px;height:20px;border-radius:999px;
  background:rgba(52,211,153,.16);color:var(--green);
}
.mfr-chat .toast-ic svg{width:11px;height:11px}

/* ---- o digitando ----
   O slot tem altura zero, entao o indicador aparece exatamente onde a
   proxima mensagem vai nascer sem reservar espaco nenhum no layout: quando
   ele some, nada se move. A entrada e a saida dele estao presas ao ciclo de
   12s, como todo o resto da cena. Os tres pontos sao a UNICA coisa aqui com
   animation-delay, e podem: eles tem ciclo proprio de 1,25s e nenhuma fase no
   storyboard, entao um deslocamento entre eles nao dessincroniza a cena. */
.mfr-chat .mfr-tslot{position:relative;display:block;height:0}
.mfr-chat .mfr-typing{
  position:absolute;left:0;top:0;
  display:flex;align-items:center;gap:4px;width:fit-content;
  padding:8px 11px;border-radius:4px 16px 16px 16px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.mfr-chat .mfr-typing i{
  width:5px;height:5px;border-radius:999px;background:var(--mfr-text-muted);
  animation:mfrDot 1.25s ease-in-out infinite;
}
/* R16: o atraso passou de .18/.36 para .2/.4 de um ciclo de 1,25s. Com o
   atraso curto os três pontos subiam quase juntos e o pulso lia como
   piscada; com um sexto do ciclo entre eles a onda fica visível. */
.mfr-chat .mfr-typing i:nth-child(2){animation-delay:.2s}
.mfr-chat .mfr-typing i:nth-child(3){animation-delay:.4s}
@keyframes mfrDot{
  0%,62%,100%{opacity:.32;transform:translateY(0) scale(.92)}
  28%{opacity:1;transform:translateY(-3.5px) scale(1)}
}

/* cena 1: perguntar e receber dados */
.mfr-chat .scene-ask .mfr-typing{animation:mfrTypeAsk 12s infinite}
.mfr-chat .scene-ask .msg.user{animation:mfrQ 12s infinite}
.mfr-chat .scene-ask .tools-chip{animation:mfrChip 12s infinite}
.mfr-chat .scene-ask .tool-call{animation:mfrToolIn 12s infinite}
.mfr-chat .scene-ask .ghost-answer{animation:mfrGhost 12s infinite}
.mfr-chat .scene-ask .highlight{animation:mfrHlIn 12s infinite}
.mfr-chat .scene-ask .stats-float{animation:mfrPop 12s infinite}
.mfr-chat .scene-ask .stat:nth-child(1){animation:mfrStA 12s infinite}
.mfr-chat .scene-ask .stat:nth-child(2){animation:mfrStB 12s infinite}
.mfr-chat .scene-ask .stat:nth-child(3){animation:mfrStC 12s infinite}
.mfr-chat .scene-ask .st-roll{animation:mfrRollAsk 12s infinite}

/* cena 2: o Marvin chega antes e a ação é acionada */
.mfr-chat .scene-alert .pill-alert{position:relative;animation:mfrPill 12s infinite}
.mfr-chat .scene-alert .pill-alert::after{
  content:"";position:absolute;inset:-1px;border-radius:999px;pointer-events:none;
  border:1px solid rgba(250,152,0,.55);
  animation:mfrPing 12s infinite;
}
.mfr-chat .scene-alert .mfr-typing{animation:mfrTypeAlert 12s infinite}
.mfr-chat .scene-alert .bubble{animation:mfrBub 12s infinite}
.mfr-chat .scene-alert .highlight{animation:mfrHlGlow 12s infinite}
.mfr-chat .scene-alert .stat:nth-child(1){animation:mfrStD 12s infinite}
.mfr-chat .scene-alert .stat:nth-child(2){animation:mfrStE 12s infinite}
.mfr-chat .scene-alert .st-roll{animation:mfrRollAlert 12s infinite}
.mfr-chat .scene-alert .suggestions,
.mfr-chat .scene-alert .meta{animation:mfrSug 12s infinite}
.mfr-chat .scene-alert .sug.primary{animation:mfrPress 12s infinite}
.mfr-chat .scene-alert .cursor-ghost{animation:mfrCur 12s infinite}
.mfr-chat .scene-alert .toast{animation:mfrToast 12s infinite}
.mfr-chat .scene-alert .toast-ic path{stroke-dasharray:20;animation:mfrCheck 12s infinite}

/* storyboard da cena 1 (% de 12s): pergunta 2-6, chip 9-12 com pulso até
   15, ferramenta 12-16, insight 18-23, prosa fantasma 24-29, popover 28-33
   por cima dela, números em cascata 30-40 rolando até 41, cena pronta até
   93, fade 93-98 */
@keyframes mfrScene{0%{opacity:0}2%,93%{opacity:1}98%,100%{opacity:0}}
/* R16: a mensagem entra subindo, em 0,3s (2,5% dos 12s do ciclo). Antes eram
   0,48s e vinha na diagonal, da direita; a subida curta é o gesto que um chat
   de verdade faz quando a mensagem é enviada. */
@keyframes mfrQ{0%,2%{opacity:0;transform:translateY(9px)}4.5%,100%{opacity:1;transform:none}}
@keyframes mfrTypeAsk{0%,5.5%{opacity:0;transform:translateY(6px)}6.5%,9.5%{opacity:1;transform:none}10.5%,100%{opacity:0;transform:none}}
@keyframes mfrChip{0%,9%{opacity:0;transform:translateY(8px) scale(.96)}11%{opacity:1;transform:none}12.5%{transform:scale(1.05)}15%,100%{opacity:1;transform:none}}
@keyframes mfrToolIn{0%,12%{opacity:0;transform:translateY(9px)}16%,100%{opacity:1;transform:none}}
@keyframes mfrGhost{0%,24%{opacity:0;transform:translateY(8px)}29%,100%{opacity:1;transform:none}}
@keyframes mfrHlIn{0%,18%{opacity:0;transform:translateY(12px)}23%,100%{opacity:1;transform:none}}
@keyframes mfrPop{0%,28%{opacity:0;transform:translateY(16px) scale(.93)}33%,100%{opacity:1;transform:none}}
@keyframes mfrStA{0%,30%{opacity:0;transform:translateY(7px)}34%,100%{opacity:1;transform:none}}
@keyframes mfrStB{0%,33%{opacity:0;transform:translateY(7px)}37%,100%{opacity:1;transform:none}}
@keyframes mfrStC{0%,36%{opacity:0;transform:translateY(7px)}40%,100%{opacity:1;transform:none}}
@keyframes mfrRollAsk{0%,33%{transform:translateY(0);animation-timing-function:steps(3,end)}41%,100%{transform:translateY(-66px)}}

/* storyboard da cena 2: alerta 2-5.5 com onda até 11, bolha 7.5-12, insight
   13-18 com glow respirando até 62, números 18-25 rolando até 32, botões
   28-32, cursor 34-55, toast 50-55 com o check desenhado 53-59, cena pronta
   até 93, fade 93-98 */
@keyframes mfrPill{0%,2%{opacity:0;transform:scale(.5)}4%{opacity:1;transform:scale(1.08)}5.5%,100%{opacity:1;transform:scale(1)}}
@keyframes mfrPing{0%,4.5%{opacity:.7;transform:scale(1)}11%,100%{opacity:0;transform:scale(2.1)}}
@keyframes mfrTypeAlert{0%,5.5%{opacity:0;transform:translateY(6px)}6.5%,9.5%{opacity:1;transform:none}10.5%,100%{opacity:0;transform:none}}
/* a resposta nasce onde o digitando estava, então ela só começa a subir
   quando ele começa a sair (9,5%): os dois se cruzam em vez de conviver */
@keyframes mfrBub{0%,9.5%{opacity:0;transform:translateY(9px)}12%,100%{opacity:1;transform:none}}
@keyframes mfrHlGlow{
  0%,13%{opacity:0;transform:translateY(12px);box-shadow:0 0 0 rgba(250,152,0,0)}
  18%{opacity:1;transform:none;box-shadow:0 0 0 rgba(250,152,0,0)}
  27%{box-shadow:0 0 26px rgba(250,152,0,.15)}
  37%{box-shadow:0 0 8px rgba(250,152,0,.04)}
  47%{box-shadow:0 0 24px rgba(250,152,0,.13)}
  62%,100%{opacity:1;transform:none;box-shadow:0 0 10px rgba(250,152,0,.07)}
}
@keyframes mfrStD{0%,18%{opacity:0;transform:translateY(7px)}22%,100%{opacity:1;transform:none}}
@keyframes mfrStE{0%,21%{opacity:0;transform:translateY(7px)}25%,100%{opacity:1;transform:none}}
@keyframes mfrRollAlert{0%,24%{transform:translateY(0);animation-timing-function:steps(3,end)}32%,100%{transform:translateY(-66px)}}
@keyframes mfrSug{0%,28%{opacity:0;transform:translateY(8px)}32%,100%{opacity:1;transform:none}}
@keyframes mfrCur{
  0%,34%{opacity:0;transform:translate(88px,54px)}
  37%{opacity:1;transform:translate(66px,42px)}
  45%{opacity:1;transform:translate(0,0)}
  47%{transform:translate(0,0) scale(.84)}
  49%{opacity:1;transform:translate(0,0) scale(1)}
  52%{opacity:1}
  56%,100%{opacity:0;transform:translate(12px,16px)}
}
@keyframes mfrPress{
  0%,46.5%{transform:none;background:rgba(57,114,253,.16)}
  48%{transform:scale(.94);background:rgba(57,114,253,.36)}
  51%,100%{transform:none;background:rgba(57,114,253,.16)}
}
@keyframes mfrToast{0%,50%{opacity:0;transform:translateY(14px) scale(.95)}55%,100%{opacity:1;transform:none}}
@keyframes mfrCheck{0%,53%{stroke-dashoffset:20}59%,100%{stroke-dashoffset:0}}

/* painel e conteúdo continuam além do recorte e são cortados no mesmo plano;
   alturas por faixa medidas de 320 a 1600px, com folga suficiente para o
   último elemento de cada cena caber inteiro inclusive durante a entrada,
   quando ele ainda está 14px abaixo da posição de repouso */
@media(max-width:1100px){
  .mcard-frag{height:clamp(457px,calc(564px - 9.75vw),476px)}
  .mfr-chat .stats-float{margin-top:11px}
  .mfr-chat .suggestions{margin-top:0}
}
@media(max-width:900px){
  .mcards{grid-template-columns:1fr}
  /* o piso subiu de 382 para 400px quando o toast desceu para o respiro de
     14px: no piso antigo ele era cortado no recorte por volta de 880px */
  .mcard-frag{height:clamp(457px,calc(499.5px - 5.59vw),476px)}
  /* no recorte estreito a prosa fantasma não cabe: sai, e o popover volta
     a invadir só o highlight */
  .mfr-chat .ghost-answer{display:none}
  .mfr-chat .stats-float{margin-top:-8px}
}
@media(max-width:600px){
  .mcard{padding:15px 20px 0}
  .mcard .app-sources{margin-bottom:9px}
  .mcard-d{margin-top:7px;line-height:1.5}
  .mcard-frag{margin-top:9px}
  .mfr-head{margin-bottom:7px;padding-bottom:7px}
  .mfr-input{margin-bottom:8px;padding-block:6px}
  /* o fragmento conserva toda a cena, mas ocupa menos altura visual no mobile.
     A largura compensada mantem a conversa legivel depois da escala. */
  .mcard-frag{
    height:455px;
    transform:scale(.71);
    transform-origin:top left;
    width:141%;
    margin-bottom:-132px;
  }
  .mfr-chat .bubble{font-size:14px;line-height:1.45}
  .mfr-who b{font-size:14px}
  .mfr-who small{font-size:11.5px}
  .mfr-ph{font-size:13.5px}
}

/* em 384px e abaixo a bolha e as sugestões da cena proativa quebram mais uma
   linha cada e a conversa cresce cerca de 58px. O ponto de quebra foi medido:
   em 385px a bolha ainda cabe na linha, em 384px não. A caixa acompanha, senão o
   toast, que agora fecha a cena descolado, cai fora do recorte.
   Este bloco vem DEPOIS do de 600px de propósito: as duas faixas definem a
   mesma altura com a mesma especificidade, então quem estivesse por último
   venceria. Antes ele vinha primeiro e a altura de 500px nunca valia. */
@media(max-width:384px){
  .mcard-frag{height:500px}
  .mfr-chat .toast{right:-15px}
}

/* sem movimento: nada anima e as duas cenas ficam paradas no estado final
   completo (números já rolados, toast à vista, cursor escondido) */
@media (prefers-reduced-motion: reduce){
  .mfr-chat .scene,
  .mfr-chat .scene *,
  .mfr-chat .scene *::after{animation:none !important;opacity:1;transform:none}
  .mfr-chat .st-roll{transform:translateY(-66px) !important}
  .mfr-chat .cursor-ghost{display:none}
  .mfr-chat .scene-alert .pill-alert::after{content:none}
}

/* ===================== POR QUE MARVEE: grid de módulos =====================
   Sem card flutuante: as células são divididas por bordas finas, o que dá
   leitura de tabela/módulo. No hover, um gradiente sobe (linha de cima) ou
   desce (linha de baixo) a partir da borda, o título desliza e a barra
   vertical à esquerda dele cresce e assume a cor da célula. */
.why-box{padding:clamp(48px,6vw,84px) 0}
/* na caixa clara o cabeçalho é de duas colunas: título à esquerda, apoio à
   direita, como no resto da página (o padrão centrado do .why-head é das
   LPs que o reusam) */
/* o topo (ícone, linha, botão) é o mesmo padrão da seção do Marvin; aqui
   só as cores mudam para o contexto claro */
.why-box .mh-top .mh-ic{background:var(--light-card);border-color:var(--light-line2)}
.why-box .mh-top .mh-rule{background:var(--light-line2)}
.why-box .mh-top .mh-cta{color:var(--light-tx);border-color:rgba(16,24,40,.3)}
.why-box .mh-top .mh-cta:hover{border-color:var(--light-tx)}
.why-box .why-head{margin-top:34px}
.why-box .why-head{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,64px);align-items:end;text-align:left;
}
.why-box .why-head .h2{
  text-align:left;color:var(--light-tx);
  font-size:clamp(30px,3vw,42px);text-wrap:balance;
}
.why-box .why-head .lede{margin:0;text-align:left;color:var(--light-tx2);max-width:46ch}
.wgrid{
  margin-top:52px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
/* só divisores internos, nunca moldura externa: borda à direita em todas as
   células menos a última de cada linha, e embaixo só nas da primeira linha */
.wcell{
  position:relative;overflow:hidden;text-align:left;
  padding:clamp(26px,2.6vw,38px);
}
.wcell:not(:nth-child(3n)){border-right:1px solid var(--light-line2)}
.wcell:nth-child(-n+3){border-bottom:1px solid var(--light-line2)}
/* o gradiente do hover: entra pela borda de baixo na primeira linha e pela
   de cima na segunda, então ele sempre "sobe do divisor" */
.wcell::before{
  content:"";position:absolute;left:0;right:0;height:70%;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--wc) 12%,transparent),transparent);
  opacity:0;transition:opacity .3s var(--ease-soft);
}
.wcell:nth-child(-n+3)::before{bottom:0}
.wcell:nth-child(n+4)::before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--wc) 12%,transparent),transparent)}
.wcell:hover::before{opacity:1}
.wcell-ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--wc) 10%,transparent);color:var(--wc);
  position:relative;z-index:1;
}
.wcell-ic svg{width:22px;height:22px}
.wcell-ic img{width:24px;height:24px;object-fit:contain}
.wcell-t{
  position:relative;z-index:1;margin-top:20px;padding-left:14px;
  font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--light-tx);
  transition:transform .28s var(--ease-soft);
}
/* a barra vertical que cresce na borda esquerda do título */
.wcell-t::before{
  content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;
  transform:translateY(-50%);background:var(--light-line2);
  transition:height .28s var(--ease-soft),background .28s var(--ease-soft);
}
.wcell:hover .wcell-t{transform:translateX(6px)}
.wcell:hover .wcell-t::before{height:78%;background:var(--wc)}
.wcell-d{
  position:relative;z-index:1;margin-top:10px;padding-left:14px;
  font-size:14.5px;line-height:1.65;color:var(--light-tx2);
}

@media(max-width:900px){
  .mh-head{grid-template-columns:1fr;gap:18px}
  /* o topo (ícone, linha, botão) é o mesmo padrão da seção do Marvin; aqui
   só as cores mudam para o contexto claro */
.why-box .mh-top .mh-ic{background:var(--light-card);border-color:var(--light-line2)}
.why-box .mh-top .mh-rule{background:var(--light-line2)}
.why-box .mh-top .mh-cta{color:var(--light-tx);border-color:rgba(16,24,40,.3)}
.why-box .mh-top .mh-cta:hover{border-color:var(--light-tx)}
.why-box .why-head{margin-top:34px}
.why-box .why-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 2 colunas: divisor à direita só na coluna da esquerda, embaixo em todas
     menos a última linha; o gradiente sobe na 1a linha e desce nas demais */
  .wcell:not(:nth-child(3n)){border-right:0}
  .wcell:nth-child(odd){border-right:1px solid var(--light-line2)}
  .wcell:nth-child(-n+3){border-bottom:0}
  .wcell:nth-child(-n+4){border-bottom:1px solid var(--light-line2)}
  .wcell:nth-child(n+3)::before{top:0;bottom:auto;background:linear-gradient(to bottom,color-mix(in srgb,var(--wc) 12%,transparent),transparent)}
  .wcell:nth-child(-n+2)::before{top:auto;bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--wc) 12%,transparent),transparent)}
}
/* No desktop o wrapper é neutro: quem faz a grade é o .wgrid, e os pontos
   nem aparecem. Toda a virada para pista de scroll mora no mobile. */
/* dupla classe de propósito: a regra genérica que liga os pontos em ≤900px
   tem a mesma força, e é entre 641 e 900px que a grade ainda é grade */
.cdots.wgrid-dots{display:none}
@media(max-width:640px){
  /* Seis células empilhadas faziam desta a seção mais longa da página, com
     quase o dobro de qualquer outra. Viram uma pista horizontal com encaixe:
     a altura passa a ser a de uma célula, e a próxima aparecendo na borda
     conta que dá para arrastar. É o mesmo recurso que o carrossel de casos e
     o de apps já usam, com os mesmos pontos embaixo. */
  .wgrid-scroll{
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .wgrid-scroll::-webkit-scrollbar{display:none}
  .wgrid{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
  }
  .wcell{
    scroll-snap-align:start;
    border-right:1px solid var(--light-line2);
    border-bottom:0 !important;
  }
  .wcell:last-child{border-right:0}
  /* o realce de hover não faz sentido no toque: a célula em foco é a que
     está encaixada, e o gradiente sobe da base em todas */
  .wcell::before{top:auto;bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--wc) 12%,transparent),transparent)}
  .cdots.wgrid-dots{display:flex;margin-top:22px}
  /* os pontos vivem sobre a ilha clara: o cinza translúcido do tema escuro
     sumiria ali. O ativo mantém o gradiente, que já é escuro o bastante. */
  .wgrid-dots button{background:rgba(16,24,40,.2)}
}

/* ---- quebra de títulos no mobile ----
   Coluna estreita é onde a última linha sobra com uma palavra só: medi em
   320 e 390px e caíam assim "Você pergunta. Ele responde com dados.",
   "Ou ele chega antes de você perguntar.", "Comece sem um big bang" e o
   título do bloco final. O balance reparte as linhas em larguras próximas
   e resolve os quatro sem tocar em corpo, peso ou entrelinha. Fica só no
   mobile porque no desktop as quebras já foram escolhidas à mão, algumas
   com <br>, e o balance passaria por cima delas.
   O .sub entrou depois, pelo mesmo motivo: em 375px o subtítulo do hero do
   Hub deixava "lugar." sozinho numa linha de 11%. Nenhum .sub do repo usa
   <br class="br-m">, então aqui não há quebra manual visível pra atropelar. */
@media(max-width:880px){
  h1,h2,h3,.h2,.ca-t,.wcell-t,.sub{text-wrap:balance}
}

@media (prefers-reduced-motion: reduce){
  .cases-scroll{scroll-behavior:auto}
  .wcell::before,.wcell-t,.wcell-t::before{transition:none}
}

/* ===== Marvin: a cor do app, não a da área =====
   O Marvin vive na área Tecnologia, junto de MDC, Brain, Automações e Flows,
   que são roxos. A cor própria dele, porém, é azul: está assim na fonte de
   verdade dos apps (public/site/apps.js), e é o azul que o ícone oficial usa.
   O card dele na grade da home nasceu com o roxo da área escrito no atributo
   style, o que deixava os checks e a CTA "Conhecer" roxos.

   A correção vem pelo CSS porque a marcação da página não muda nesta frente; o
   !important existe só por causa disso, o valor que ele sobrescreve é inline no
   próprio card. Se algum dia a cor sair do style para o CSS, esta regra perde a
   razão de ser e o !important cai junto. */
#apps .app[href="/marvin"]{
  --app-c:#3972FD!important;
  --app-bg1:rgba(57,114,253,.18)!important;
}

/* ===== #casos: sem o contorno, com profundidade nos ícones =====
   (a) O cartão de caso deixa de acender o contorno do .glow-card, aquele arco
   de gradiente que corria a borda atrás do mouse. É decisão da autora para
   ESTE cartão, então a regra é escopada: o .glow-card continua igual nas
   outras 7 páginas que o usam.

   (b) Os boxes de ícone passam a ser vidro de verdade. O A/B confirmou que o
   filtro enxerga os irmãos dentro da raiz de backdrop do cartão, mas a linha
   dupla e a superfície uniforme abafavam essa separação. Cada chip combina
   blur local, luz difusa e sombra de contato sem depender do fundo da página.

   O escopo é #casos .case-card.glow-card, não só #casos: 27 páginas do Hub têm
   uma seção com esse id, e outras duas usam .cc-ic dentro dela (a /lp-hub, com
   os mesmos cartões porém sem o contorno, e a /whatsapp). O par com .glow-card
   é o que existe apenas nesta página. */
#casos .case-card.glow-card::after{content:none}
#casos .case-card.glow-card .cc-ic,
#casos .case-card.glow-card .ccg-i{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
  backdrop-filter:blur(11px) saturate(135%);
  -webkit-backdrop-filter:blur(11px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
/* o cluster não tem superfície própria: quem faz vidro são os chips */
#casos .case-card.glow-card .cc-ic.cc-ic-g{
  --cc-glass-fill:
    radial-gradient(110% 90% at 18% 0%,rgba(155,180,255,.14),transparent 58%),
    linear-gradient(145deg,rgba(255,255,255,.1),rgba(24,34,70,.18) 52%,rgba(9,13,30,.3));
  --cc-glass-line:rgba(205,220,255,.16);
  --cc-glass-shine:linear-gradient(135deg,rgba(255,255,255,.1),transparent 38%,transparent 72%,rgba(57,114,253,.06));
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
}
#casos .case-card.glow-card .cc-ic-g .ccg-i{
  position:relative;overflow:hidden;
  background:var(--cc-glass-fill);border-color:var(--cc-glass-line);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  box-shadow:0 8px 18px -12px rgba(0,0,0,.84);
}
/* A sombra nasce apenas onde uma placa cobre a anterior: ela amortece a
   borda e o trecho final do icone de baixo sem engrossar o contorno. */
#casos .case-card.glow-card .cc-ic-g .ccg-i + .ccg-i{
  box-shadow:
    -7px 0 12px -7px rgba(0,0,0,.92),
    0 8px 18px -12px rgba(0,0,0,.84);
}
#casos .case-card.glow-card .cc-ic-g .ccg-i:nth-child(1){z-index:0}
#casos .case-card.glow-card .cc-ic-g .ccg-i:nth-child(2){z-index:1}
#casos .case-card.glow-card .cc-ic-g .ccg-i:nth-child(3){z-index:2}
#casos .case-card.glow-card .cc-ic-g .ccg-i::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--cc-glass-shine);
}
#casos .case-card.glow-card .cc-ic-g .ccg-i img{position:relative;z-index:1}

/* ===== #casos: a borda direita deixa de cortar o cartão em bisel =====
   Diagnóstico antes de mexer: o carrossel JÁ é infinito e continua funcionando
   (três conjuntos, clone/original/clone, e o site.js reposiciona no equivalente
   do meio ao passar do fim; conferido rolando até a ponta e vendo voltar sem
   salto). O que incomodava era outra coisa: o último cartão visível encostava
   na borda do container e era serrado por ela, sem nenhum sinal de que a lista
   continua.

   A máscara resolve isso onde o problema está, só na direita: a esquerda segue
   alinhada à margem do texto, como a autora pediu, e o cartão que entra pela
   direita desvanece em vez de ser cortado a faca. Nada de rolagem automática,
   que ela não pediu.

   O :has é o que isola a home: a /lp-hub tem o mesmo carrossel, com o mesmo id
   e as mesmas classes, mas os cartões dela não têm o .glow-card. */
#casos .cases-scroll:has(.case-card.glow-card){
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 96px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 96px),transparent 100%);
}
@media(max-width:640px){
  #casos .cases-scroll:has(.case-card.glow-card){
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 52px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 52px),transparent 100%);
  }
}

/* ============== MENU DO HUB: painel horizontal (.mm-h) ==============
   O dropdown "Apps inclusos" tinha 25 apps empilhados em três colunas e ocupava
   812px de altura, 90% de uma viewport de 900, sobrando 520px de largura sem
   uso. Aqui ele vira o que a autora pediu: o Marvin numa caixa maior à
   esquerda, azul e com vidro de verdade, e as áreas ao lado, neutras,
   distribuídas na horizontal.

   Duas decisões que vieram da medição, não do gosto:
   1. São QUATRO colunas de área, não cinco. Backoffice (3 apps) e Pessoas (2)
      dividem a última. Com cinco, "Análise de Fluxo de Caixa" e "Departamento
      Pessoal" truncavam e sobrava vazio ao lado de Operação, que tem 8.
   2. O item perde a descrição e fica de uma linha. Era ela que fazia a altura
      (53px por item viravam 31), e é o mesmo enxugamento que no mobile ganha
      sozinho, onde a distribuição horizontal não ajuda (as colunas viram uma).

   TUDO escopado em .mm-h. As classes mm-* servem 13 páginas fora do Hub, que
   seguem com o menu antigo: nenhuma regra existente delas foi tocada.

   A marcação mantém de propósito os três ganchos que o nav-menu.js lê para
   montar a gaveta mobile (.mm-lbl, .mm-tx b e .mm-ic img), então a gaveta
   continua com ícone, rótulo de área e a tag "Em breve" sem uma linha de JS
   nova, e as 13 páginas de fora não correm risco. */
.mm-h{
  width:min(1196px,calc(100vw - 40px));
  /* margem interna maior que a do .mm-panel global (18px), que serve as 13
     páginas de fora e não se toca. O lateral cresce menos que o vertical de
     propósito: cada 8px aqui saem da largura útil das quatro colunas, e
     "Análise de Fluxo de Caixa" e "Departamento Pessoal" já vivem no limite
     da coluna. */
  padding:24px 22px 22px;
  /* o painel antigo tinha 3% de transparencia e ninguem via: ele era estreito e
     denso. Nesta largura, com as colunas mais arejadas, o texto grande da pagina
     atravessava o vidro e competia com o nome dos apps. O fundo fica praticamente
     solido; o blur continua, para a borda ainda ler como vidro. */
  background:rgba(9,13,30,.995);
}
.mm-h .mm-grid{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:20px;padding:14px 0 8px;align-items:stretch;
}
.mm-h .mm-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px;align-items:start}
.mm-h .mm-gcol{display:flex;flex-direction:column;gap:24px;min-width:0}

/* A caixa do Marvin continua como banner, mas volta a pertencer ao painel:
   o vidro e pintado em azul-marinho, com luz difusa no canto e filete interno. */
.mm-h .mm-feat{
  grid-column:auto;align-items:flex-start;flex-direction:column;
  justify-content:center;margin:0;padding:20px 18px 18px;border-radius:16px;gap:0;
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(122,160,255,.2),transparent 62%),
    linear-gradient(158deg,rgba(57,114,253,.22),rgba(57,114,253,.06) 60%,rgba(23,37,82,.18));
  border:1px solid rgba(122,160,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 32px -24px rgba(0,0,0,.68);
}
/* O filho continua no markup das 27 páginas, mas fica inerte por CSS. */
.mm-h .mm-feat .mf-bokeh{display:none}
.mm-h .mm-feat::after{content:none}
.mm-h .mm-feat:hover{
  border-color:rgba(122,160,255,.5);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(122,160,255,.26),transparent 62%),
    linear-gradient(158deg,rgba(57,114,253,.28),rgba(57,114,253,.08) 60%,rgba(23,37,82,.22));
}
.mm-h .mm-feat .mm-ic{width:52px;height:52px;border-radius:15px;margin-bottom:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(122,160,255,.3)}
.mm-h .mm-feat .mm-ic img{height:29px}
/* o nome deixa de ser o título e vira rótulo de identidade: o <b> continua
   sendo só "Marvin" porque é dele que o nav-menu.js tira a entrada do Marvin
   na gaveta mobile (.mm-tx b). Trocar o conteúdo dele por uma frase colocaria
   a frase inteira na gaveta, no lugar do nome. */
.mm-h .mm-feat .mm-tx b{
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;
}
/* o título carrega o peso, em cor sólida (gradiente nunca em texto) */
.mm-h .mm-feat .mf-h{
  display:block;margin-top:12px;
  font-family:var(--font);font-size:20px;font-weight:700;
  line-height:1.2;letter-spacing:-.02em;color:#fff;
}
.mm-h .mm-feat .mm-tx small{
  display:block;margin-top:11px;font-size:12.5px;line-height:1.55;color:#fff;
  -webkit-line-clamp:4;
}
/* botão de contorno, e não link com seta. Continua sendo <span>: o card
   inteiro é o <a>, e um <a> dentro de outro é marcação inválida. */
.mm-h .mm-feat-go{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:18px;padding:9px 15px;border-radius:999px;
  border:1px solid rgba(220,232,255,.68);background:rgba(9,13,30,.1);
  font-size:12.5px;line-height:1.2;font-weight:600;color:#F4F7FF;
  transition:background .25s var(--ease-soft),border-color .25s var(--ease-soft),color .25s var(--ease-soft);
}
.mm-h .mm-feat:hover .mm-feat-go{
  background:rgba(255,255,255,.1);border-color:rgba(174,201,255,.75);color:#fff;
}

/* os apps: uma linha, ícone sem moldura, nome que não trunca nas quatro colunas */
.mm-h .mm-cols .mm-app{align-items:center;gap:9px;padding:6px 9px;border-radius:9px}
.mm-h .mm-cols .mm-ic{width:19px;height:19px;border-radius:0;background:none;border:0;flex:none}
.mm-h .mm-cols .mm-ic img{width:19px;height:19px}
.mm-h .mm-cols .mm-tx b{
  font-size:13px;font-weight:500;color:#DDE3F5;line-height:1.28;
  /* nome longo quebra em duas linhas em vez de virar reticencia: o item cresce
     alguns pixels e o nome continua inteiro, que e o que importa num menu */
  white-space:normal;overflow-wrap:anywhere;
}
.mm-h .mm-cols .mm-app:hover .mm-tx b{color:#fff}
/* O respiro entre os apps é GAP, não padding: o item media 31px de altura com
   passo de 31px, ou seja, ZERO de espaço vazio entre um pill e o seguinte, e
   engordar o padding só aumentaria a mancha do hover sem separar nada. O grupo
   vira coluna flex e o vazio aparece de verdade. O rótulo da área ganha os
   3px de margem POR CIMA do gap, então ele respira mais que os itens (12px
   contra 9px), que é a hierarquia que se espera de um rótulo de seção. */
.mm-h .mm-cols .mm-group{display:flex;flex-direction:column;gap:9px}
/* No painel horizontal, a cor da area acende cheia na origem e se dissolve
   ate a borda direita da coluna. Rotulo e feixe partem dos mesmos 9px que
   posicionam a borda esquerda do icone; largura, espessura e distancia ficam
   identicas em duas, tres ou quatro colunas. As regras globais de .mm-group
   ficam intactas porque atendem as 12 paginas de fora. */
.mm-h .mm-cols .mm-lbl{
  flex-direction:column;align-items:flex-start;gap:6px;
  margin-bottom:3px;padding-left:9px;color:var(--muted);
}
.mm-h .mm-cols .mm-lbl::before{
  width:100%;height:1px;border-radius:0;
  background:linear-gradient(90deg,var(--area-c) 0 12%,transparent 100%);
}

/* O respiro encolhe conforme as áreas empilham. Não é economia de gosto: em
   quatro colunas o painel gasta o respiro numa linha só de área, em três ou
   duas ele paga o mesmo respiro DUAS vezes, e o painel já é alto aqui. Com os
   9px de 1440 valendo também em 901, o painel batia no teto de max-height e
   voltava a rolar, que é justamente o que esta frente veio desfazer. */
@media(max-width:1180px){
  .mm-h .mm-grid{grid-template-columns:212px minmax(0,1fr);gap:16px}
  .mm-h .mm-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .mm-h .mm-cols .mm-group{gap:7px}
  .mm-h .mm-gcol{gap:18px}
}
@media(max-width:980px){
  .mm-h{padding:18px}
  .mm-h .mm-grid{grid-template-columns:1fr;gap:12px}
  .mm-h .mm-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
  .mm-h .mm-cols .mm-group{gap:3px}
  .mm-h .mm-gcol{gap:14px}
  .mm-h .mm-feat{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
  .mm-h .mm-feat .mm-ic{margin-bottom:0;width:38px;height:38px;border-radius:13px}
  .mm-h .mm-feat .mm-ic img{height:25px}
  .mm-h .mm-feat .mm-tx b{font-size:10px;line-height:1;letter-spacing:.12em}
  /* aqui a caixa é uma linha: o título corre na largura toda e as quebras
     cravadas do desktop sairiam no meio de qualquer lugar */
  .mm-h .mm-feat .mf-h{margin-top:6px;font-size:16px}
  .mm-h .mm-feat .mf-br{display:none}
  .mm-h .mm-feat .mm-tx small{margin-top:6px;font-size:12px;line-height:1.5;-webkit-line-clamp:2}
  .mm-h .mm-feat-go{display:none}
}

/* A headline da /dp com a Manrope: 24ch dava 3 linhas onde a Maven Pro dava 2
   (121px viravam 181px). Foi o único defeito que a varredura das 27 páginas
   achou. A copy não muda; muda a largura em que ela pode correr: 25ch já
   devolve as 2 linhas e 26ch deixa folga para não voltar às 3 num arredondamento.

   Escopado pelo data-app do <html>, que o Base.astro já escreve por página: a
   regra .app-hero h1 é global e serve as outras LPs de app, que continuam em
   24ch. Foi a lição das dobras clonadas: seletor de id ou de classe não isola
   uma página quando o layout se repete. */
html[data-app="dp"] .app-hero h1{max-width:26ch}

/* Operador: acesso adicional com hierarquia própria. */
#preco .price-grid.three .pc-additional{
  background:linear-gradient(160deg,rgba(24,33,54,.48),rgba(8,12,28,.3));border:1px dashed #3E4862;
  box-shadow:none;backdrop-filter:none;text-align:center;
  justify-content:flex-start;align-self:stretch;padding:28px 26px 20px;
}
#preco .price-grid.three .pc-additional:hover{transform:none;box-shadow:none;border-color:#596780}
#preco .pc-additional-label{align-self:center;padding:6px 13px;border:1px solid #354159;border-radius:100px;background:rgba(148,163,184,.06);font-size:14px;line-height:1.5;font-weight:500;color:#C2CCE0}
#preco .pc-additional-gate{margin:0;padding:32px 0 28px}
#preco .pc-lock-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 22px;border:1px solid #46536C;border-radius:22px;color:#B8C7E0;background:linear-gradient(145deg,rgba(155,177,216,.12),rgba(148,163,184,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.12)}
#preco .pc-lock-icon svg{width:28px;height:28px}
#preco .pc-additional-title{font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.03em;margin:0 0 14px;color:#E2E8F4}
#preco .pc-lock-note{max-width:26ch;margin:0 auto;font-size:16px;line-height:1.65;color:#AAB7CE;text-wrap:pretty}
#preco .pc-lock-note strong{color:#E2E8F4;font-weight:600}
#preco .pc-additional-cost{padding:20px 12px;border:1px solid #293249;border-radius:16px;background:rgba(4,8,23,.35)}
#preco .pc-additional-price{display:flex;align-items:baseline;justify-content:center;gap:6px;font-size:16px;color:#C5CEE0}
#preco .pc-additional-price strong{font-size:42px;font-weight:600;letter-spacing:-.04em;line-height:1.2;color:#E2E8F4}
#preco .pc-additional-price span{font-size:14px}
#preco .pc-additional-price .pc-additional-cents{font-size:28px}
#preco .pc-additional-price .pc-additional-currency{font-size:16px}
#preco .pc-additional-cost p{font-size:14px;color:#AAB7CE;margin:3px 0 0}
#preco .pc-additional-details{margin-top:24px;text-align:left;font-size:14px;color:#C5CEE0}
#preco .pc-additional-benefits-title{margin:0;font-size:14px;font-weight:600;line-height:1.5;color:#E2E8F4}
#preco .pc-additional-details ul{padding:0 0 0 18px;margin:18px 0 0;line-height:1.6}
#preco .pc-additional-details li+li{margin-top:8px}
#preco .price-grid.three .pc-additional .pc-additional-cta{
  width:calc(100% - 46px);align-self:center;margin-top:auto;margin-bottom:28px;
  flex-shrink:0;padding:13px 10px;font-size:13.5px;white-space:nowrap;
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);
}
#preco .price-grid.three .pc-additional .pc-additional-cta:hover{background:rgba(255,255,255,.095);border-color:rgba(255,255,255,.28)}
#preco .pc-additional-details{padding-bottom:28px}
@media(max-width:1160px) and (min-width:601px){
  #preco .price-grid.three .pc-additional{padding:28px 22px 20px}
  #preco .price-grid.three .pc-additional .pc-additional-cta{width:calc(100% - 42px);margin-bottom:25px}
}
@media(max-width:600px){
  #preco .price-grid.three .pc-additional{padding:clamp(18px,4.8vw,20px) clamp(16px,4.6vw,18px) 18px}
  #preco .price-grid.three .pc-additional .pc-additional-cta{width:calc(100% - 2 * clamp(14px,4vw,16px) - 2px);padding:12px 10px;font-size:13px;margin-bottom:calc(clamp(14px,4vw,16px) + 1px)}
  #preco .pc-additional-gate{padding:28px 0 24px}
  #preco .pc-lock-icon{width:60px;height:60px;margin-bottom:20px}
  #preco .pc-lock-note{font-size:15px}
}