/* ============================================================================
   O HEROI  —  pacote "leverpro-hero" (HERO FILES.zip, 20/09/2026)
   ----------------------------------------------------------------------------
   Substituiu o heroi de duas colunas em 20/09/2026. O arquivo de origem era
   uma pagina solta e autossuficiente: `:root`, `body`, `img` e `h1` sem
   classe, e nomes de utilitario curtos (.btn, .st, .hl, .ring, .mesh) que ja
   existem nesta pagina.

   POR ISSO TODA REGRA AQUI NASCE COM `#lp-hero`. Nao e gosto de
   especificidade: e o que impede as duas direcoes de vazamento —
     · daqui para fora: nenhuma regra alcanca o resto da pagina;
     · de fora para ca: (1,1,0) ganha de qualquer `.classe` da casa.
   Os `@keyframes` tambem foram prefixados (`lph-`), porque nome de keyframe
   e global e catorze deles colidiam com os das secoes importadas.

   O DESENHO NAO FOI TOCADO. Valor nenhum mudou: mesma unidade `--u`, mesmas
   cores, mesmas curvas, mesmo corte em 760px. O que mudou foi so o endereco
   das regras. Para conferir contra a origem, o arquivo e `leverpro-hero.html`
   dentro do zip — as declaracoes estao na mesma ordem.

   O QUE SAIU da origem, e por que:
     · `*,*::before,*::after{box-sizing:inherit}` e `html,body{margin:0}` —
       a casa ja faz os dois, e `inherit` a partir de um `:root` escopado nao
       teria de quem herdar;
     · do `:root`: `box-sizing`, `padding-top/bottom` de safe-area e
       `color-scheme` — eram andaime de pagina solta e valeriam para o site
       inteiro;
     · `<header class="nav">` (no HTML) — esta pagina ja tem o
       `.site-header`, que e fixo, tem os links de verdade e o CTA do
       celular. Dois cabecalhos empilhariam. O CSS do `.nav` FICOU aqui, sem
       uso, para o dia em que a decisao virar.
   ============================================================================ */

/* ---- 1. o que a casa injeta aqui dentro, desfeito ----
   Estas seis regras NAO sao desenho novo: cada uma desfaz uma regra do site
   que alcanca o heroi e que a origem nao tinha. Sem elas o heroi renderiza
   diferente do arquivo aprovado. Cada linha diz de onde vem. */

/* body{font-variant-numeric:tabular-nums} — a origem nao tem. */
#lp-hero{font-variant-numeric:normal}
/* h1,h2,h3{text-wrap:balance} — muda onde a manchete quebra. */
#lp-hero h1{text-wrap:wrap}
/* .btn da casa: so os quatro que a origem nao redeclara. O resto (fundo,
   raio, recuo, tipo, transicao) ja e sobrescrito pela regra propria. */
#lp-hero .btn{justify-content:flex-start;min-height:0;border:0;border-radius:999px}
/* .hl e .st das secoes importadas trazem posicao e `opacity:0` junto com a
   animacao. A animacao a origem substitui; o resto ficaria. */
#lp-hero .hl{position:static;width:auto;height:auto;margin:0;border-radius:0;opacity:1;z-index:auto;pointer-events:auto}
#lp-hero .st{position:static;left:auto;top:auto;white-space:normal;opacity:1}
/* .ring e .don: a origem NAO anima nenhum dos dois — nao ha regra para eles
   no arquivo do zip, embora os `@keyframes` tenham vindo junto. Na casa eles
   giram (`.ring`) e desenham o donut (`.don`), e herdariam isso aqui. */
#lp-hero .ring,#lp-hero .don{animation:none}
/* .brand vinha do cabecalho antigo. So `flex-shrink:0` importa: ele impede a
   marca de encolher quando a barra aperta, e a origem deixa encolher. */
#lp-hero .brand{flex-shrink:1}
/* .cta das secoes importadas traz uma varredura de fundo e um `brightness(.96)`
   no hover. O botao da barra e chapado e, na origem, nao reage ao ponteiro. */
#lp-hero .nav .cta{background-size:auto;background-position:0 0;transition:none}
#lp-hero .nav .cta:hover{filter:none;background-position:0 0}

/* ---- 2. a esteira de clientes, que ficou ----
   Ela vinha DENTRO do heroi antigo e continua dentro deste, no pe da coluna.
   Nao e do pacote: o markup, o CSS (`.logos*`, na regiao da esteira do
   style.css) e o laco de rolagem sao os mesmos de antes, sem um caractere
   mudado. Daqui sai so a caixa que a posiciona. */
/* A FAIXA VOLTOU AO LUGAR em 20/09: desceu 10px numa rodada e subiu os mesmos
   10 na seguinte. Deslocamento e nao margem, para o que se mover ser a faixa e
   nada em volta mudar de lugar. */
#lp-hero .hero-logos{position:relative;top:0;width:100%;padding:0 calc(var(--u)*6) calc(var(--u)*2.2)}
/* A LINHA ACIMA DA FILA e as marcas em preto (20/09). A arte de origem das
   sete marcas e branca sobre video escuro; na folha clara ela vinha reentintada
   em cinza por `.logos img` do style.css. `brightness(0)` derruba qualquer
   tinta para preto puro SEM tocar o canal alfa — e o que faz sete logos de
   cores diferentes lerem como uma familia so, que e o efeito da referencia.
   A opacidade de repouso e o realce no ponteiro continuam sendo os do bloco
   da esteira; so o valor mudou, de 0,55 para 0,85, porque preto chapado a
   meia opacidade vira cinza de novo. */
#lp-hero .hero-logos-rot{
  /* A LINHA DESCE E COLA NA FILA (ajuste de 20/09). Eram ~85px entre o texto
     e as marcas — 21 da margem daqui mais os 40 a 64 que a `.logos-esteira`
     traz do style.css para quando ela e o primeiro elemento do bloco. Aqui
     ela nao e: tem um texto em cima, e a margem dela vira vao duplicado. O
     recuo de baixo do `.hero-logos` tambem encolheu, entao o conjunto inteiro
     assenta mais perto do pe da secao. */
  margin:calc(var(--u)*1.6) 0 calc(var(--u)*.55);
  /* 30px PARA CIMA, somando as rodadas de 20/09. O que a medida controla e
     a DISTANCIA ate a fila de marcas, nao a posicao na pagina: a faixa
     inteira tem o deslocamento dela, este e so o da linha dentro dela. Por
     deslocamento e nao por margem: margem menor levaria a fila de marcas
     junto, e o que se pediu foi mover a linha, nao o bloco. Deslocamento
     relativo nao ocupa espaco, entao nada abaixo se mexe. */
  position:relative;top:-30px;
  text-align:center;
  /* `max()` com piso de 13px: abaixo de 760px o pacote troca `--u` para
     2,2vw, e 1,12u num telefone de 375 da 9px — abaixo do piso de leitura.
     O tamanho de mesa nao muda: la 1,12u ja e 16px. */
  font:600 max(13px, calc(var(--u)*1.12))/1.3 Inter,system-ui,sans-serif;
  letter-spacing:-.01em;
  color:var(--ink);
}
#lp-hero .logos-esteira{margin-top:calc(var(--u)*.45)}
/* O AZUL-NOITE DE VOLTA, no lugar do preto (21/09, a pedido). O `brightness(0)`
   que estava aqui derrubava QUALQUER tinta para preto puro — inclusive a que os
   arquivos ja trazem, que e o rgb(74,85,120) da casa, o mesmo --grey-600 dos
   rotulos. Sem o filtro, o que aparece na tela e a tinta do arquivo: as nove
   marcas continuam lendo como uma familia so, porque todas foram reentintadas
   nela, e a fila deixa de ser um bloco preto sobre folha clara.

   A OPACIDADE CHEIA FICA. Ela veio junto com o preto e continua certa pelo
   motivo oposto: a 0,85 sobre azul-noite a marca desbota para um cinza sem
   identidade, que era exatamente o problema que o preto tentava resolver. */
/* MAIORES em 20/09: eram clamp(22,2.2vw,30) na regra da casa. A arte de
   origem e de 400x100 e aguenta a altura; o que ela ganha e presenca, que e
   o ponto de uma fila de marcas. */
#lp-hero .logos img{height:clamp(26px,2.6vw,36px)}
#lp-hero .logos-esteira[data-andando="true"] .logos img{opacity:1}
#lp-hero .logos-esteira .logos li:hover img{opacity:1}

/* ---- 3. o pacote, verbatim e escopado ---- */
#lp-hero{--ink:#0F1B3D;--ink2:#56607D;--blue:#2F6BFF;--blue-d:#1C4FE0;--line:#E1E7F5;--u:min(1vw,15px)}
#lp-hero{background:#E9EDF7;color:var(--ink);font:400 calc(var(--u)*1.05)/1.55 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
#lp-hero img{display:block;max-width:100%}
#lp-hero{min-height:calc(var(--u)*66);display:flex;flex-direction:column;position:relative;overflow:hidden;background:#E9EDF7}
#lp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 55% at 78% 40%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),radial-gradient(45% 50% at 12% 22%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),radial-gradient(40% 45% at 30% 88%,rgba(150,178,255,.35),rgba(150,178,255,0) 70%),radial-gradient(50% 55% at 88% 92%,rgba(120,150,255,.32),rgba(120,150,255,0) 70%),radial-gradient(35% 40% at 60% 8%,rgba(190,205,255,.35),rgba(190,205,255,0) 70%),linear-gradient(180deg,#F2F4FA 0%,#E9EDF7 55%,#DFE5F4 100%);z-index:0}
#lp-hero::after{content:'';position:absolute;inset:-2%;background:url(assets/textura-heroi.svg) center/cover no-repeat;opacity:.9;z-index:0;pointer-events:none}
#lp-hero>*{position:relative;z-index:1}
#lp-hero .nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u)*1.8) calc(var(--u)*6)}
#lp-hero .brand .lp-logo{height:calc(var(--u)*3.1);width:auto;display:block}
#lp-hero .nav nav{display:flex;align-items:center;gap:calc(var(--u)*2.2)}
#lp-hero .nav nav a{color:var(--ink);text-decoration:none;font-size:calc(var(--u)*1.02)}
/* (o risco entre "Clientes" e "Entrar" saiu em 21/09: separava dois
   grupos que ja se separam pela forma — um e link de texto, o outro e
   botao de contorno.) */
#lp-hero .nav .cta{padding:calc(var(--u)*.55) calc(var(--u)*1.1);border-radius:999px;background:var(--ink);color:#fff!important}
#lp-hero .wrap{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;gap:calc(var(--u)*5.5);padding:calc(var(--u)*4.5) calc(var(--u)*6) calc(var(--u)*3.5)}
#lp-hero .copy{padding-top:calc(var(--u)*5)}
#lp-hero h1{font:600 calc(var(--u)*2.85)/1.12 "Inter Tight",Inter,sans-serif;letter-spacing:-.03em;margin:0 0 calc(var(--u)*1.9)}
#lp-hero h1 em{font-style:italic;font-weight:500;color:var(--blue-d)}
/* A QUEBRA ANTES DELA E EXPLICITA, no <br> da marcacao. O `nowrap` daqui ja
   impedia a linha colorida de se partir no meio, mas nao garantia que ela
   comecasse numa linha propria: em largura sobrando, o fim da frase anterior
   subia para junto dela. */
#lp-hero h1 .multi{white-space:nowrap;font-style:italic;font-weight:700;font-size:.88em;padding-right:.08em;background:linear-gradient(90deg,#2F6BFF 0%,#5B7DFF 45%,#8B6CFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#lp-hero .prompt{position:relative;width:100%;background:#F8FAFF;border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*1.1) calc(var(--u)*.9) calc(var(--u)*.8);box-shadow:0 0 0 1px var(--line),0 1px 0 #fff inset,0 20px 48px -26px rgba(28,79,224,.45)}
#lp-hero textarea{display:block;width:100%;border:0;background:transparent;resize:none;padding:calc(var(--u)*.3) calc(var(--u)*.55);font:400 calc(var(--u)*1.3)/1.5 Inter,system-ui,sans-serif;color:var(--ink);min-height:calc(var(--u)*5.2)}
#lp-hero textarea::placeholder{color:#8C95AE}
#lp-hero textarea:focus{outline:none}
#lp-hero .prompt:focus-within{box-shadow:0 0 0 1.5px var(--blue),0 20px 48px -26px rgba(28,79,224,.55)}
#lp-hero .bar{display:flex;align-items:center;gap:calc(var(--u)*.4);margin-top:calc(var(--u)*.4)}
#lp-hero .grow{flex:1}
#lp-hero .round{width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);border:0;border-radius:999px;background:#fff;color:#5B6583;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 1px #EBEFF8}
#lp-hero .round svg,#lp-hero .send svg{width:calc(var(--u)*1.25);height:calc(var(--u)*1.25)}
#lp-hero .round:hover{color:var(--ink);box-shadow:0 0 0 1px #CBD7F5}
#lp-hero .send{width:calc(var(--u)*2.95);height:calc(var(--u)*2.95);border:0;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 16px -6px rgba(47,107,255,.7)}
#lp-hero .art{margin:0}
/* 76,5% = 90% MENOS 15%, a pedido (20/09). Encolher o SVG e nao aplicar
   `scale` na caixa e o que faz os cartoes de agente acompanharem: o script
   calcula a escala deles como `largura do svg / 1400`, entao diagrama menor
   da cartao menor e fio mais curto, tudo na mesma proporcao. E a coluna
   volta a medir o que desenha, em vez de guardar o tamanho antigo. */
#lp-hero .art > svg#lpdiag{width:76.5%;height:auto;display:block;overflow:visible;margin:0 auto}
#lp-hero button:focus-visible,#lp-hero a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#lp-hero .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:760px){
  #lp-hero{--u:2.2vw}
  #lp-hero .wrap{grid-template-columns:1fr;gap:calc(var(--u)*3)}
  #lp-hero .copy{padding-top:calc(var(--u)*2)}
  #lp-hero .nav nav a:not(.cta){display:none}
  #lp-hero .art > svg#lpdiag{width:85%}
}
#lp-hero .ptype{position:absolute;left:calc(var(--u)*.9 + var(--u)*.55);right:calc(var(--u)*.9);top:calc(var(--u)*1.1 + var(--u)*.3);font:400 calc(var(--u)*1.3)/1.5 Inter,system-ui,sans-serif;color:var(--ink);pointer-events:none;opacity:0;white-space:pre-wrap}
#lp-hero .ptype.on{opacity:1}
#lp-hero .ptype .caret{display:inline-block;width:1.5px;height:1.1em;background:var(--blue);vertical-align:-0.2em;margin-left:2px;animation:lph-caret 1.2s steps(1,end) infinite}
@keyframes lph-caret{50%{opacity:0}}
#lp-hero textarea.hide-ph::placeholder{color:transparent}
#lp-hero .tags{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*.6);margin-top:calc(var(--u)*1.8);max-width:calc(var(--u)*46)}
#lp-hero .tag{display:inline-flex;align-items:center;gap:calc(var(--u)*.45);font:500 calc(var(--u)*.98) Inter,system-ui,sans-serif;color:#0F1B3D;padding:calc(var(--u)*.55) calc(var(--u)*1.05);border-radius:999px;background:#F0F2F8;transition:background-color .3s ease,color .3s ease}
/* ---- 6. a pastilha marcada ---- (20/09)
   DOIS PROBLEMAS, um de cor e um de movimento.

   A COR era cinza (#DFE3EC sobre #F0F2F8): a marcada e a apagada eram o mesmo
   tom com dois por cento de diferenca, e nada dizia "esta e a da vez". Agora e
   uma lavagem azul, na familia do botao e do proprio diagrama, mas fraca — a
   pastilha informa, nao compete com a manchete nem com o botao.

   O MOVIMENTO era o `display:none`. Aparecer e desaparecer com display nao
   tem meio-termo: o icone entra de uma vez, a pastilha ganha a largura dele
   mais o vao num unico quadro, e as pastilhas da mesma linha saltam de lugar.
   E o pisca que se via.

   A CURA e o icone nunca sair do fluxo: ele fica sempre la, com largura zero e
   uma margem negativa que come o vao, e o que anima e a largura de volta. Tres
   propriedades na mesma curva — largura, opacidade e escala — e a pastilha
   cresce em vez de saltar. */
#lp-hero .tag .chk{
  display:block;flex:none;overflow:hidden;
  width:0;height:calc(var(--u)*1.05);
  color:var(--blue);
  opacity:0;transform:scale(.55);
  /* a margem negativa cancela o `gap` da pastilha enquanto o icone esta
     recolhido; sem ela sobraria o vao de um icone que nao esta la */
  margin-right:calc(var(--u)*-.45);
  transition:width .3s cubic-bezier(.32,0,.24,1),
             margin-right .3s cubic-bezier(.32,0,.24,1),
             transform .3s cubic-bezier(.32,0,.24,1),
             opacity .22s ease;
}
#lp-hero .tag.on{background:#E4ECFF;color:var(--blue-d)}
#lp-hero .tag.on .chk{
  width:calc(var(--u)*1.05);margin-right:0;
  opacity:1;transform:none;
}
@media (prefers-reduced-motion:reduce){
  #lp-hero .tag,#lp-hero .tag .chk{transition:none}
}
#lp-hero .actions{display:flex;align-items:center;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*2)}
#lp-hero .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:calc(var(--u)*.7);padding:calc(var(--u)*1.1) calc(var(--u)*2.1);border-radius:999px;background:linear-gradient(135deg,#3D7BFF,#2F6BFF 55%,#1C4FE0);color:#fff;text-decoration:none;font:600 calc(var(--u)*1.15) Inter,system-ui,sans-serif;box-shadow:0 14px 28px -12px rgba(47,107,255,.75),0 0 0 1px rgba(255,255,255,.25) inset;transition:transform .2s,box-shadow .2s}
/* ---- 5. o botao do heroi ---- (20/09)
   O BRILHO DEIXOU DE SER PERPETUO. No pacote ele varria o botao a cada 3,2s,
   para sempre, sem ninguem ter pedido nada: um objeto que pisca sozinho na
   dobra disputa atencao com a manchete e, passados dez segundos, vira ruido.
   Agora ele e RESPOSTA — so acontece quando o ponteiro chega.

   E a resposta e tres coisas ao mesmo tempo, que e o que separa um botao que
   reage de um botao que apenas acende: a varredura atravessa uma vez, a peca
   sobe 2px com a sombra abrindo junto (o que le como aproximacao), e a seta
   anda para a direita, que e a direcao do proprio verbo.

   POR `transform` E NAO POR `left`: o original animava `left`, que e layout e
   repinta a cada quadro. Deslocamento fica no compositor.

   E o `::after` NAO some quando o ponteiro sai — ele volta para fora do botao
   e espera. Sem isso a varredura ficaria congelada no meio na saida. */
#lp-hero .btn::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-160%) skewX(-20deg);
  pointer-events:none;
}
#lp-hero .btn:hover::after,
#lp-hero .btn:focus-visible::after{
  animation:lph-varre .9s cubic-bezier(.32,0,.24,1);
}
@keyframes lph-varre{
  from{transform:translateX(-160%) skewX(-20deg)}
  to  {transform:translateX(340%)  skewX(-20deg)}
}
#lp-hero .btn svg{transition:transform .28s cubic-bezier(.32,0,.24,1)}
#lp-hero .btn:hover svg,
#lp-hero .btn:focus-visible svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  #lp-hero .btn::after{display:none}
  #lp-hero .btn svg{transition:none}
  #lp-hero .btn:hover svg{transform:none}
}
/* O @keyframes lph-btnshine saiu junto com o brilho perpetuo. Ver a regiao 5. */
#lp-hero .btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(47,107,255,.9),0 0 0 1px rgba(255,255,255,.34) inset}
#lp-hero .btn svg{width:calc(var(--u)*1.1);height:calc(var(--u)*1.1)}
#lp-hero .link{color:var(--ink2);text-decoration:none;font-size:calc(var(--u)*1.02);border-bottom:1px solid transparent}
#lp-hero .link:hover{color:var(--ink);border-color:var(--ink)}
#lp-hero .art{position:relative;overflow:visible}
#lp-hero .mesh{background-size:180% 180%;animation:lph-meshdrift 23.04s ease-in-out infinite alternate}
@keyframes lph-meshdrift{0%{background-position:0% 0%}50%{background-position:100% 40%}100%{background-position:30% 100%}}
#lp-hero .gy,#lp-hero .gx,#lp-hero .pl,#lp-hero .pop,#lp-hero .fl,#lp-hero .sp,#lp-hero .bl,#lp-hero .dr,#lp-hero .fw,#lp-hero .sh,#lp-hero .nod,#lp-hero .st,#lp-hero .ty,#lp-hero .hl{transform-box:fill-box}
#lp-hero .gy,#lp-hero .gx,#lp-hero .pop,#lp-hero .dr,#lp-hero .st,#lp-hero .ty,#lp-hero .hl{animation-fill-mode:both!important}
#lp-hero .gy{transform-origin:50% 100%;animation:lph-growy 6.048s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes lph-growy{0%{transform:scaleY(.12)}30%,82%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
#lp-hero .gx{transform-origin:0% 50%;animation:lph-growx 6.048s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes lph-growx{0%{transform:scaleX(.05)}32%,82%{transform:scaleX(1)}100%{transform:scaleX(.05)}}
#lp-hero .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:lph-draw 6.048s ease-in-out infinite}
@keyframes lph-draw{0%{stroke-dashoffset:1;opacity:1}40%,82%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
#lp-hero .fw{animation:lph-flow 2.016s linear infinite}
@keyframes lph-flow{to{stroke-dashoffset:-14}}
#lp-hero .pl{transform-origin:50% 50%;animation:lph-pulse 3.168s ease-in-out infinite}
@keyframes lph-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.75}}
#lp-hero .pop{transform-origin:50% 50%;animation:lph-pop 6.048s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes lph-pop{0%{transform:scale(.4);opacity:0}18%,84%{transform:scale(1);opacity:1}100%{transform:scale(.4);opacity:0}}
#lp-hero .fl{animation:lph-float 7.2s ease-in-out infinite}
@keyframes lph-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#lp-hero .sp{transform-origin:50% 50%;animation:lph-spin 1.584s linear infinite}
@keyframes lph-spin{to{transform:rotate(360deg)}}
#lp-hero .bl{animation:lph-blink 1.584s steps(2,start) infinite}
@keyframes lph-blink{to{visibility:hidden}}
#lp-hero .sh{animation:lph-shimmer 3.744s ease-in-out infinite}
@keyframes lph-shimmer{0%,100%{opacity:.45}50%{opacity:1}}
#lp-hero .nod{animation:lph-nudge 2.592s ease-in-out infinite}
@keyframes lph-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes lph-donut{0%{stroke-dasharray:0 57}40%,82%{stroke-dasharray:34 57}100%{stroke-dasharray:0 57}}
@keyframes lph-stepin{0%{opacity:0;transform:translateY(6px)}8%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
#lp-hero .st{animation:lph-stepin 6.048s ease-in-out infinite}
#lp-hero .ty{stroke-dasharray:1;stroke-dashoffset:1;animation:lph-draw 6.048s linear infinite}
#lp-hero .hl{animation:lph-hl 6.048s ease-in-out infinite}
@keyframes lph-hl{0%,20%{opacity:0}30%,80%{opacity:1}90%,100%{opacity:0}}
#lp-hero .mv{transform-box:fill-box;animation:lph-mv 6.048s ease-in-out infinite}
@keyframes lph-mv{0%,15%{transform:translateY(0)}35%,55%{transform:translateY(16px)}75%,100%{transform:translateY(32px)}}
@keyframes lph-donut{0%{stroke-dasharray:0 57}40%,82%{stroke-dasharray:34 57}100%{stroke-dasharray:0 57}}
@keyframes lph-stepin{0%{opacity:0;transform:translateY(6px)}8%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
#lp-hero .actions{display:flex;align-items:center;gap:calc(var(--u)*1.4);margin-top:calc(var(--u)*1.5)}
#lp-hero .btn svg{width:calc(var(--u)*1.05);height:calc(var(--u)*1.05)}
#lp-hero .link{color:var(--ink2);text-decoration:none;font-size:calc(var(--u)*1);border-bottom:1px solid transparent}
#lp-hero .link:hover{color:var(--ink);border-color:var(--ink)}
#lp-hero .art{position:relative;overflow:visible}
/* O DIAGRAMA 50PX ABAIXO, a pedido (20/09). Por deslocamento e nao por
   margem: margem cresceria a coluna da direita e, com ela, a altura do heroi
   inteiro — e o pe do heroi e onde mora a costura com a secao de baixo, que
   nao pode se mexer. Os cartoes de agente descem junto de graca: eles nascem
   dentro do `.art` e se posicionam por medida relativa a ele.

   SO NA GRADE DE DUAS COLUNAS. O pedido foi descer o diagrama que fica A
   DIREITA do texto; abaixo de 760px o pacote empilha as duas colunas e o
   diagrama passa a ficar EMBAIXO dele, onde 50px seriam um buraco no meio da
   secao, nao um ajuste de altura. */
@media(min-width:761px){
  #lp-hero .art{translate:0 50px}
}
#lp-hero .agentcard{position:absolute;left:0;top:0;width:675px;opacity:0;transform-origin:0 0;pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
#lp-hero .agentcard.on{opacity:1}
#lp-hero .ac-mesh{border-radius:22px;background-size:180% 180%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 28px 60px -26px rgba(28,79,224,.5)}
#lp-hero .ac-mesh svg{display:block;width:100%;height:100%}
#lp-hero .ac-label{position:absolute;left:18px;top:-16px;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fff;font:600 15px Inter,system-ui,sans-serif;color:#0F1B3D;box-shadow:0 0 0 1px #E1E7F5,0 10px 24px -12px rgba(28,79,224,.45);opacity:0;transform:translateY(6px);transition:opacity .35s .25s,transform .35s .25s}
#lp-hero .ac-label i{width:9px;height:9px;border-radius:50%;background:#2F6BFF;box-shadow:0 0 0 3px rgba(47,107,255,.2)}
#lp-hero .agentcard.on .ac-label{opacity:1;transform:none}
#lp-hero .aclead{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#lp-hero .aclead path{fill:none;stroke:#2F6BFF;stroke-width:1.4;stroke-dasharray:3 4;opacity:0;transition:opacity .35s}
#lp-hero .aclead.on path{opacity:.8}

/* ---- 4. a costura com a secao de baixo ----
   A secao dos cases continua o fundo daqui: a rampa retoma no tom exato em que
   esta acaba (#DFE5F4) e as duas bolhas do pe seguem descendo. Ver a regiao 0.2
   do style.css.

   A MALHA DE LINHAS SAIU DAQUI. Ela era o `::after` do pacote, esticada em
   `cover` sobre a caixa do heroi. Na secao de baixo havia outra copia, esticada
   sobre OUTRA caixa: duas escalas diferentes, e as linhas nao se encontravam na
   emenda. Agora e uma camada so, em `.topo::after` (style.css), sobre a altura
   das duas secoes juntas — um desenho unico, sem costura para acertar.

   O `content:none` desliga a do pacote sem apagar a regra dele, que continua
   logo acima, intacta, para leitura. E o `z-index:2` poe o conteudo do heroi
   acima da camada nova, que pinta em 1: fundo (0), malha (1), conteudo (2). */
#lp-hero::after{content:none}
#lp-hero>*{z-index:2}

/* ---- 7. o menu de paineis ---- (20/09)
   A barra do pacote tinha seis links soltos. Isto e a forma dos menus do
   Pigment: o gatilho abre um painel largo, com os itens em grade e um
   destaque no pe.

   O PAINEL E `hidden`, e nao altura animada. Menu que cresce empurrando o
   conteudo faz a pessoa perder a linha que estava lendo; aqui ele aparece
   inteiro, por cima, e o unico movimento e uma entrada de 8px.

   ELE CABE DENTRO DO HEROI. `#lp-hero` tem `overflow:hidden` — o painel
   e absoluto dentro da barra e mede ~360px de altura, contra os ~950 do
   heroi, entao nao ha o que cortar. Se um painel crescer muito, e aqui que
   se descobre.

   A LARGURA e a da folha, nao a do gatilho: item de menu com nome longo
   ("Planejamento Orcamentario") em coluna estreita quebra em duas linhas e a
   grade vira escada. */
/* A BARRA SOBE ACIMA DA COLUNA DO DIAGRAMA. `#lp-hero>*` poe cabecalho e
   `.wrap` no mesmo z-index, e empate nesse caso e resolvido pela ordem no
   documento: o `.wrap` vem depois e pintava por cima. Com o painel aberto
   isso aparecia como diagrama atravessando o menu. */
#lp-hero .nav{z-index:50}
#lp-hero .mm{position:relative}
#lp-hero .mm-grupo{position:static;display:inline-flex}
#lp-hero .mm-gatilho{
  appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:calc(var(--u)*.3);
  padding:calc(var(--u)*.4) 0;
  color:var(--ink);font:inherit;font-size:calc(var(--u)*1.02);
  transition:color .18s ease;
}
#lp-hero .mm-gatilho svg{width:calc(var(--u)*1.05);height:calc(var(--u)*1.05);opacity:.55;transition:transform .22s cubic-bezier(.32,0,.24,1),opacity .18s ease}
#lp-hero .mm-gatilho:hover,
#lp-hero .mm-gatilho[aria-expanded="true"]{color:var(--blue-d)}
#lp-hero .mm-gatilho[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}
#lp-hero .mm-gatilho:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

#lp-hero .mm-painel{
  position:absolute;left:0;right:0;top:calc(100% + var(--u)*1.6);
  z-index:40;
  border-radius:calc(var(--u)*1.3);
  background:#FFFFFF;
  box-shadow:0 1px 2px rgb(16 24 40 / 6%), 0 26px 60px -24px rgb(16 24 40 / 34%);
  animation:lph-mm-entra .18s cubic-bezier(.32,0,.24,1);
}
#lp-hero .mm-painel[hidden]{display:none}
@keyframes lph-mm-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#lp-hero .mm-painel{animation:none}}
#lp-hero .mm-painel-in{padding:calc(var(--u)*2.2) calc(var(--u)*2.4) calc(var(--u)*1.8)}
#lp-hero .mm-eyebrow{
  margin:0 0 calc(var(--u)*1.4);
  font-size:calc(var(--u)*.82);font-weight:600;letter-spacing:.14em;
  color:#8C95AE;text-transform:uppercase;
}

/* ---- a grade de itens ---- */
#lp-hero .mm-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*.4)}
#lp-hero .mm-item{
  display:flex;align-items:center;gap:calc(var(--u)*.9);
  padding:calc(var(--u)*.8) calc(var(--u)*.9);
  border-radius:calc(var(--u)*.8);
  color:var(--ink);text-decoration:none;
  transition:background-color .16s ease;
}
#lp-hero .mm-item:hover{background:#F2F5FC}
#lp-hero .mm-ic{
  display:grid;place-items:center;flex:none;
  width:calc(var(--u)*2.4);aspect-ratio:1;
  border-radius:calc(var(--u)*.6);
  background:#F0F2F8;color:var(--blue-d);
}
#lp-hero .mm-ic svg{width:56%;height:56%}
#lp-hero .mm-nome{font-size:calc(var(--u)*1.04);font-weight:500}

/* ---- as duas colunas de solucoes ---- */
#lp-hero .mm-duas{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:calc(var(--u)*3)}
#lp-hero .mm-rot{
  margin:0 0 calc(var(--u)*.9);
  font-size:calc(var(--u)*.82);font-weight:600;letter-spacing:.14em;
  color:#8C95AE;text-transform:uppercase;
}
#lp-hero .mm-area{
  display:block;padding:calc(var(--u)*.7) calc(var(--u)*.9);
  border-radius:calc(var(--u)*.8);
  color:var(--ink);text-decoration:none;
  transition:background-color .16s ease;
}
#lp-hero .mm-area:hover{background:#F2F5FC}
#lp-hero .mm-area-nome{display:block;font-size:calc(var(--u)*1.04);font-weight:600}
#lp-hero .mm-area-desc{display:block;margin-top:calc(var(--u)*.15);font-size:calc(var(--u)*.92);color:var(--ink2);line-height:1.45}
#lp-hero .mm-lista{display:grid;gap:calc(var(--u)*.1)}
#lp-hero .mm-linha{
  display:block;padding:calc(var(--u)*.72) 0;
  border-bottom:1px solid #EDF0F7;
  color:var(--ink);text-decoration:none;font-size:calc(var(--u)*1.02);
  transition:color .16s ease;
}
#lp-hero .mm-linha:last-child{border-bottom:0}
#lp-hero .mm-linha:hover{color:var(--blue-d)}

/* ---- o destaque do pe ---- */
#lp-hero .mm-cta{
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*1.2);
  margin-top:calc(var(--u)*1.6);
  padding:calc(var(--u)*1) calc(var(--u)*1.4);
  border-radius:calc(var(--u)*.8);
  background:var(--ink);color:#fff!important;text-decoration:none;
  font-size:calc(var(--u)*1.02);font-weight:600;
  transition:background-color .18s ease;
}
#lp-hero .mm-cta:hover{background:var(--blue-d)}
#lp-hero .mm-cta svg{width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);flex:none}

/* ---- entrar ---- */
#lp-hero .mm-login{
  padding:calc(var(--u)*.55) calc(var(--u)*1.1);
  border-radius:999px;border:1px solid #C8D2E8;
  transition:border-color .18s ease,background-color .18s ease;
}
#lp-hero .mm-login:hover{border-color:var(--ink);background:#F4F6FC}

@media(max-width:760px){
  /* Em telefone a barra ja escondia os links: ficam a marca e o botao. Os
     gatilhos e os paineis vao junto — menu de tres paineis nao cabe em 375px,
     e a navegacao do celular e a propria pagina, que e uma coluna so. */
  #lp-hero .mm-grupo,#lp-hero .mm-login{display:none}
}

/* ---- 8. a barra que acompanha a rolagem --------------------------------
   Ver a nota do bloco em src/hero.js: o vao existe para a pagina nao saltar
   quando a barra sai do fluxo. */
#lp-hero .nav-vao{flex:none;height:0}
#lp-hero .nav{
  transition:padding-block .25s cubic-bezier(.32,0,.24,1),
             background-color .25s ease, box-shadow .25s ease;
}
#lp-hero .nav.preso{
  position:fixed;top:0;left:0;right:0;
  /* acima de tudo: a barra e a unica peca que vale em qualquer secao */
  z-index:200;
  padding-block:calc(var(--u)*1.05);
  /* O VIDRO. A cor de base e a do proprio heroi a 62%, entao no topo a barra
     parece a mesma superficie; o desfoque e a saturacao e que a separam do
     que passa por baixo. */
  /* MAIS VIDRO, MENOS TINTA (21/09): de 62% de cor para 24%. O que segura a
     leitura da barra nao e a cor, e o desfoque — 26px de raio ja transforma
     qualquer coisa que passe por baixo em mancha, e o texto escuro se sustenta
     sobre ela. A saturacao alta e o que impede a mancha de virar cinza. */
  background:rgba(233,237,247,.24);
  -webkit-backdrop-filter:saturate(200%) blur(26px);
          backdrop-filter:saturate(200%) blur(26px);
  box-shadow:0 1px 0 rgba(15,27,61,.07), 0 12px 34px -24px rgba(15,27,61,.45);
}
/* Sem `backdrop-filter` (navegador antigo), o vidro vira opaco: barra
   translucida sobre texto sem o desfoque e barra ilegivel. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #lp-hero .nav.preso{background:rgba(233,237,247,.93)}
}
@media (prefers-reduced-motion:reduce){
  #lp-hero .nav{transition:none}
}

/* ---- 9. a barra sobre os blocos escuros -------------------------------
   O VIDRO CLARO NAO SERVE EM CIMA DO PRETO. Com 24% de tinta e desfoque, a
   barra se sustenta sobre qualquer secao CLARA — e a pagina e quase toda
   clara. Mas o fecho e o rodape sao #05070E, e ali o desfoque nao tem o que
   clarear: o que passa por baixo e preto, e tinta escura sobre preto nao le.
   Aumentar a opacidade resolveria e desfaria o pedido, que foi justamente
   MAIS transparencia.

   ENTAO QUEM VIRA E A TINTA, e nao o vidro. Um observador avisa quando um
   bloco escuro cruza a faixa do topo, e a barra troca para tinta clara e um
   vidro de base escura — a mesma transparencia, a leitura invertida. E o que
   qualquer barra que atravessa secoes de luzes opostas precisa fazer.
   ------------------------------------------------------------------------ */
#lp-hero .nav.preso.sobre-escuro{
  background:rgba(8,12,22,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 12px 34px -24px rgba(0,0,0,.8);
}
#lp-hero .nav.sobre-escuro nav a,
#lp-hero .nav.sobre-escuro .mm-gatilho{color:#EAF0FF}
#lp-hero .nav.sobre-escuro .mm-gatilho:hover,
#lp-hero .nav.sobre-escuro nav a:hover{color:#FFFFFF}
#lp-hero .nav.sobre-escuro .mm-login{border-color:rgba(255,255,255,.4)}
#lp-hero .nav.sobre-escuro .mm-login:hover{border-color:#FFFFFF;background:rgba(255,255,255,.12)}
/* O botao cheio inverte: no claro ele e o unico escuro da barra, no escuro
   tem de ser o unico claro. */
#lp-hero .nav.sobre-escuro .cta{background:#FFFFFF;color:var(--ink)!important}
/* A marca e um vetor azul com gradiente proprio: sobre o preto ela some no
   tom mais escuro do degrade. `brightness` levanta os tres gradientes de uma
   vez, sem tocar no arquivo. */
#lp-hero .nav.sobre-escuro .brand .lp-logo{filter:brightness(1.9) saturate(1.1)}
#lp-hero .nav{transition:padding-block .25s cubic-bezier(.32,0,.24,1),
             background-color .25s ease, box-shadow .25s ease, color .25s ease}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #lp-hero .nav.preso.sobre-escuro{background:rgba(8,12,22,.94)}
}

/* ---- O DIAGRAMA EM CAMADA PROPRIA (21/09) ----
   MEDIDO nesta pagina, com quatro rodadas alternadas de 2s cada: o SVG do
   diagrama custa 4,45ms por quadro. Sem ele a pagina fecha o quadro em 8,3ms
   e bate o teto de 120Hz da tela; com ele, 12,8ms — 78fps aqui, e numa
   maquina tres vezes mais lenta isso sozinho estoura o orcamento de 60Hz.

   ONDE ESTA O CUSTO, tambem medido, por grupo de filtro:
     b6/b14/b30 (49 elementos, feGaussianBlur)      -5,77ms
     sombras *d/*BL (41 elementos)                   -3,18ms
     bevel3d/bevelsoft (11 elementos)                -1,65ms
     xt_* (120 elementos, so feColorMatrix)          -1,11ms
   Tirar os 221 filtros devolve 4,30ms dos 4,45ms — os filtros SAO o custo.
   Pausar o SMIL nao muda nada, e bloquear TODA escrita de atributo dentro do
   SVG tambem nao (-0,12ms): o filtro nao esta sendo invalidado pelo script.
   Ele e repintado porque a esteira de logos forca um quadro a cada 16ms e a
   regiao inteira do heroi e recomposta junto.

   REDUZIR O RAIO DO DESFOQUE NAO ADIANTA — testado em 0,75x, 0,5x, 0,35x e
   0,25x, e o resultado nao e monotono: o custo e da REGIAO do filtro (os
   `width/height` de 200% a 260%), nao da convolucao.

   O QUE FUNCIONA e isolar: em camada propria, o resultado filtrado e
   guardado e deixa de ser refeito quando o vizinho muda. Ganho medido:
   -1,13ms, o melhor de todas as tentativas isoladas.

   SO `will-change`, sem `contain:paint`. O contain prometeria que nada do SVG
   pinta fora da caixa — e os desfoques daqui tem regiao de 200% a 260%, ou
   seja, eles pintam fora de proposito. Cortar isso mudaria o desenho. */
#lp-hero #lpdiag{
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  #lp-hero #lpdiag{will-change:auto}
}