:root{
    --black:#08080a;
    --black-2:#111114;
    --black-3:#19191d;
    --navy:#050521;
    --purple-1:#a14edd;
    --purple-2:#644ddf;
    --purple-grad:linear-gradient(135deg,var(--purple-1),var(--purple-2));
    --paper:#f4f3f1;
    --white:#ffffff;
    --ink:#131317;
    --muted:#63636b;
    --line:rgba(19,19,23,.1);
    --line-dark:rgba(245,245,247,.1);
    --radius:26px;
    --ease:cubic-bezier(.16,1,.3,1);
    --shadow:0 40px 80px -40px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box;}
  /* iOS/WebKit aplica estilo nativo de botão (appearance:auto) por baixo de
     QUALQUER CSS de layout, inclusive display:flex — o efeito mais traiçoeiro
     é em botão com filhos que dependem de align-items:stretch pra ter
     largura (caso do burger, 3 spans vazios): a largura de stretch não
     "gruda" no filho, ele volta a 0px e o traço some, mesmo o botão
     continuando lá, clicável. Reseta isso pra todo botão custom do site. */
  button{-webkit-appearance:none;appearance:none;}
  body{
    margin:0;font-family:'Inter',sans-serif;color:var(--ink);background:var(--black);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  /* reveal footer: content-shell slides up over a fixed, full-screen footer — scroll always ends flush with the viewport */
  .content-shell{position:relative;z-index:1;background:var(--navy);overflow:hidden;}
  footer{position:fixed;bottom:0;left:0;right:0;z-index:0;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;}
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
  ::selection{background:var(--navy);color:#fff;}
  h1,h2,h3{margin:0;font-family:'new-science',sans-serif;font-weight:500;letter-spacing:-.02em;}

  /* regra do site: nada de linha órfã (palavra sozinha na última linha).
     'balance' distribui as linhas do título de forma pareja;
     'pretty' impede que o parágrafo termine com uma palavra solta. */
  h1,h2,h3,h4,.eyebrow,.hero-title,.lang-modal-title{text-wrap:balance;}
  p,li,figcaption,blockquote,.hero-sub{text-wrap:pretty;}

  /* Rede de segurança: se o JavaScript não rodar, os blocos com .reveal
     ficariam invisíveis para sempre e a página apareceria em branco.
     Sem JS a classe no-js permanece no html e esta regra mostra tudo. */
  .no-js .reveal{opacity:1 !important;transform:none !important;}

  /* Quem pediu menos animação vê a página parada, mas completa. */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important;scroll-behavior:auto !important;
    }
    .reveal{opacity:1 !important;transform:none !important;}
  }
  .accent{color:var(--purple-1);}
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;
    font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;
  }
  .eyebrow::before{content:"";width:16px;height:1.5px;background:var(--navy);display:inline-block;}
  .eyebrow.on-dark{color:rgba(245,245,247,.5);}
  .eyebrow.on-dark::before{background:#7d94ff;}
  .eyebrow-accent::before{background:var(--purple-1);}

  .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in{transition-delay:.08s;}
  .reveal-delay-2.in{transition-delay:.16s;}
  .reveal-delay-3.in{transition-delay:.24s;}
  .reveal-delay-4.in{transition-delay:.32s;}
  .reveal-delay-5.in{transition-delay:.4s;}

  /* nav */
  .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:padding .5s var(--ease),transform .45s var(--ease);}
  .nav.nav-hidden{transform:translateY(-130%);}
  .nav .wrap{display:block;}
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
    max-width:1120px;margin:0 auto;
    /* folga maior à direita: a caixa das bandeiras tem canto reto (8px) e
       encostava na curva da pílula, que é totalmente arredondada */
    border-radius:100px;padding:8px 18px 8px 20px;
    background:transparent;border:1px solid transparent;
    /* propriedades explícitas: 'all' animava max-width/padding e desalinhava no meio da transição */
    transition:max-width .55s var(--ease),padding .55s var(--ease),
               background .55s var(--ease),border-color .55s var(--ease),
               box-shadow .55s var(--ease);
  }
  .nav.scrolled{padding:14px 0;}
  .nav.scrolled .nav-inner{
    max-width:1000px;padding:7px 18px 7px 22px;
    background:rgba(23,24,29,.72);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
    border-color:rgba(245,245,247,.1);box-shadow:0 24px 50px -24px rgba(0,0,0,.65);
  }
  .nav-logo{display:flex;align-items:center;flex-shrink:0;}
  .nav-logo-word{height:68px;width:auto;display:block;transition:height .55s var(--ease);}
  /* na pílula o logo precisa encolher, senão estica a barra e desalinha o resto */
  .nav.scrolled .nav-logo-word{height:44px;}
  .nav-links{display:flex;gap:34px;list-style:none;margin:0;padding:0;}
  .nav-links a{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;color:rgba(245,245,247,.78);position:relative;padding:4px 0;transition:color .3s;}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:#7d94ff;transition:width .3s var(--ease);}
  .nav-links a:hover{color:#fff;}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .burger{display:none;flex-direction:column;gap:5px;width:26px;cursor:pointer;background:none;border:none;padding:0;}
  /* width:100% explícito — não depender do align-items:stretch do flex pai.
     Ver nota do appearance:none logo acima do *{box-sizing...}: em iOS sem
     esse reset o stretch não valia e os traços ficavam com 0px de largura. */
  .burger span{width:100%;height:2px;background:#fff;border-radius:2px;flex-shrink:0;}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:100px;
    font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent;
    position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,background .3s,color .3s;
  }
  /* Brilho que segue o cursor.
     A posição (--gx/--gy) é escrita pelo JS com atraso — o brilho persegue o
     mouse em vez de grudar nele. O aparecer/sumir é o transition de .7s. */
  .btn{isolation:isolate;overflow:hidden;}
  .btn-primary{position:relative;}
  .btn-primary::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    opacity:0;transition:opacity .7s var(--ease);
    background:radial-gradient(circle 120px at var(--gx,50%) var(--gy,50%),
      rgba(255,255,255,.55), rgba(161,78,221,.45) 38%, transparent 70%);
  }
  .btn-primary:hover::before{opacity:1;}

  .btn-primary{background:var(--purple-grad);color:#fff;}
  .btn-primary:hover{box-shadow:0 16px 34px -14px rgba(154,78,221,.6);}
  .btn-ghost-dark{background:rgba(245,245,247,.05);color:#fff;border-color:var(--line-dark);}
  .btn-ghost-dark:hover{border-color:rgba(255,255,255,.35);background:rgba(245,245,247,.09);}
  .btn-light{background:#fff;color:var(--navy);}
  .btn-light:hover{box-shadow:0 16px 34px -14px rgba(0,0,0,.35);}
  .nav .btn{padding:11px 22px;font-size:13.5px;}
  
  /* MENU MOBILE — refeito do zero, sem margem em lado nenhum.
     Antes usava inset:0 (shorthand) + transform:translateY pra deslizar.
     Funcionava nos meus testes, mas não em todo aparelho — então saiu tudo:
     agora é top/right/bottom/left/width/height explícitos, sem shorthand,
     sem transform, sem depender de composição de GPU. Abrir/fechar é só
     opacity+visibility, o jeito mais simples e mais compatível que existe
     de cobrir a tela inteira. z-index acima de tudo, inclusive do modal de
     idioma (200) — nunca mais fica por baixo de nada. */
  .mobile-panel{
    position:fixed;
    top:0;right:0;bottom:0;left:0;
    margin:0;border:none;border-radius:0;
    width:100%;height:100%;
    z-index:205;
    background:var(--black,#08080a);
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;gap:28px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s var(--ease);
  }
  .mobile-panel.open{
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .mobile-panel a{font-family:'Space Grotesk',sans-serif;font-size:26px;color:#fff;font-weight:500;}
  .mobile-close{position:absolute;top:26px;right:28px;background:none;border:none;color:#fff;font-size:30px;cursor:pointer;}

  /* hero */
  .hero{position:relative;min-height:100vh;background:var(--black);color:#fff;display:flex;align-items:center;overflow:hidden;padding:150px 0 90px;}
  .hero-media{position:absolute;inset:0;overflow:hidden;}
  .hero-media canvas{display:block;width:100%;height:100%;}
  .hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
  @media(min-width:961px){
    .hero-bg-video{display:block;}
    .hero-media,.hero-grid-pattern{display:none;}
  }
  .hero-grid-pattern{
    position:absolute;inset:-20%;
    background-image:linear-gradient(rgba(125,148,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(125,148,255,.12) 1px,transparent 1px);
    background-size:56px 56px;
    transform:perspective(600px) rotateX(55deg);
    transform-origin:bottom;
    animation:gridmove 14s linear infinite;
    opacity:.5;
  }
  @keyframes gridmove{from{background-position:0 0;}to{background-position:0 56px;}}
  .hero .wrap{position:relative;z-index:2;max-width:100%;margin:0;padding-left:200px;padding-right:64px;}
  .hero-inner{max-width:760px;text-align:left;}
  h1.hero-title{font-size:clamp(36px,5.4vw,64px);line-height:1.08;color:#fff;}
  .hero-sub{margin-top:26px;font-size:18px;line-height:1.7;color:rgba(245,245,247,.65);max-width:600px;}
  .hero-actions{display:flex;gap:20px;margin-top:42px;flex-wrap:wrap;}
  .hero-scroll{position:absolute;bottom:36px;left:32px;display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:13px;color:rgba(245,245,247,.5);z-index:2;}
  .hero-scroll .line{width:1px;height:34px;background:rgba(255,255,255,.25);position:relative;overflow:hidden;}
  .hero-scroll .line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:#7d94ff;animation:scrollline 1.8s ease-in-out infinite;}
  @keyframes scrollline{0%{top:-100%;}50%{top:0;}100%{top:100%;}}

  .hero-float-card{
    position:absolute;display:none;align-items:center;gap:10px;padding:14px 18px;border-radius:16px;
    background:rgba(27,28,34,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(245,245,247,.14);box-shadow:0 24px 48px -24px rgba(0,0,0,.6);
    font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:500;color:#fff;z-index:2;
    animation:floatCard 7s ease-in-out infinite;will-change:transform;
  }
  .hero-float-card svg{width:16px;height:16px;color:#7d94ff;flex-shrink:0;}
  .hero-float-card.fc1{top:20%;left:4%;animation-delay:0s;}
  .hero-float-card.fc2{top:16%;right:6%;animation-delay:1.2s;}
  .hero-float-card.fc3{bottom:26%;left:8%;animation-delay:2.4s;}
  .hero-float-card.fc4{bottom:20%;right:5%;animation-delay:.6s;}
  @keyframes floatCard{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}


  /* texto que acende palavra por palavra conforme a página desce.
     A opacidade de cada palavra é escrita pelo JS a cada quadro — por isso
     não há transition aqui (ela brigaria com o controle quadro a quadro). */
  /* usado só em título e frase de impacto — em texto de corpo vira ruído */
  [data-lightup] .w{opacity:.18;}

  /* título da hero: palavras entrando em sequência */
  .hero-title .w{
    display:inline-block;opacity:0;transform:translateY(.42em);
    animation:wordIn .75s var(--ease) forwards;
    animation-delay:calc(var(--i, 0) * 55ms);
  }
  @keyframes wordIn{to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion: reduce){
    .hero-title .w{animation:none;opacity:1;transform:none;}
    [data-lightup] .w{opacity:1;}
  }

  /* marquee */
  .marquee-strip{background:var(--white);padding:22px 0;overflow:hidden;}
  .marquee-track{display:flex;gap:56px;width:max-content;animation:scroll-left 30s linear infinite;}
  /* a velocidade no hover é controlada por JS (playbackRate). Trocar
     animation-duration aqui faria a faixa saltar de posição. */
  @keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .marquee-item{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;}
  .marquee-item .dot{width:6px;height:6px;border-radius:50%;background:var(--navy);flex-shrink:0;}

  /* intro */
  .intro{padding:130px 0 100px;background:var(--paper);position:relative;}
  .intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start;}
  /* bloco de abertura do "quem somos" — centralizado, como no kononenkogroup */
  .intro-top{text-align:center;margin-bottom:90px;}
  /* centralizado: o travessão vem dos dois lados, senão o bloco fica torto */
  .eyebrow-center{justify-content:center;margin-bottom:26px;}
  .eyebrow-center::after{
    content:"";width:16px;height:1.5px;background:var(--navy);display:inline-block;
  }
  .eyebrow-center.eyebrow-accent::after{background:var(--purple-1);}
  .eyebrow-center.on-dark::after{background:#7d94ff;}
  .intro-slogan{
    font-family:'new-science',sans-serif;font-weight:500;
    font-size:clamp(38px,6.4vw,86px);
    /* entrelinha menor que 1 é o que faz a máscara abraçar o texto;
       sem isso sobra ar em cima e embaixo e o deslize perde a força */
    line-height:.78;
    letter-spacing:-.03em;color:var(--ink);
    margin:0 auto;max-width:15ch;text-wrap:balance;
  }
  /* máscara por linha: a palavra desliza de baixo e é recortada pela borda.
     Escopado em [data-linemask] para não afetar as palavras dos outros efeitos. */
  /* folga de recorte. Precisa cobrir a descida mais funda da fonte (o "g" e o
     "j" descem mais que o normal na new-science) e o acento das maiúsculas.
     .32em cobre com sobra; como a margem negativa devolve o mesmo valor,
     aumentar isso não afasta as linhas. */
  [data-linemask]{--off:.32em;}
  /* Com entrelinha menor que 1, a caixa da linha fica mais baixa que as letras
     e o recorte come acento ("é") e descida ("g", "j"). A folga interna dá
     espaço para o desenho da letra; a margem negativa de mesmo valor cancela
     o efeito no layout, então as linhas continuam coladas. */
  .ln-mask{display:block;overflow:clip;padding:var(--off) 0;margin:calc(var(--off) * -1) 0;}
  .ln{display:block;}
  /* o deslocamento inicial soma a folga: sem isso a palavra apareceria
     dentro da área de respiro antes de começar a subir */
  [data-linemask] .w{
    display:inline-block;will-change:transform;
    transform:translateY(calc(110% + var(--off)));
  }
  /* Some some ATÉ a máscara estar pronta (data-lm-ready, setado no fim de
     buildLineMask em index.html). Sem isso, no primeiro segundo — antes da
     fonte 'new-science' carregar — o navegador desenha o parágrafo cru com
     a fonte de reserva, que tem letras mais largas: "Performance é" e "o
     segredo" quebram sozinhos em linhas extras, e some quando a máscara
     remonta com a fonte certa. Preferível não mostrar nada nesse intervalo
     a mostrar a quebra errada por um instante. */
  [data-linemask]:not([data-lm-ready]){visibility:hidden;}
  .no-js [data-linemask]{visibility:visible !important;}
  /* --lm-espera: atraso antes da primeira palavra sair. Evita que o efeito
     dispare enquanto o bloco ainda está entrando na tela. */
  [data-linemask]{--lm-espera:500ms;}
  [data-linemask].is-in .w{
    transform:none;
    transition:transform .95s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--lm-espera) + var(--i,0) * 70ms);
  }
  @media (prefers-reduced-motion: reduce){
    [data-linemask] .w{transform:none !important;transition:none !important;}
  }

  .intro h2{font-size:clamp(30px,4.3vw,52px);line-height:1.14;}
  .intro-body p{font-size:16.5px;line-height:1.85;color:var(--muted);margin:0 0 18px;}
  /* frase de abertura, um degrau acima do corpo */
  .intro-body p.intro-lead{font-size:19px;line-height:1.7;color:var(--ink);margin-bottom:26px;}
  .intro-body strong{color:var(--ink);font-weight:600;}

  /* pillars — bento grid, Nuvemshop-style bold rounded cards */
  .pillars{padding:100px 0;background:var(--black);}
  /* var(--paper) aqui era o bug: --paper e --black valem o MESMO tom nos dois
     temas (a seção usa --black de fundo), então o título ficava sempre da
     cor do próprio fundo — "Soluções completas de" ilegível, só o pedaço
     roxo (.accent) sobrava. --ink é o token certo: claro no escuro, escuro
     no claro, sempre lendo contra o --black desta seção. */
  .pillars .section-head h2{color:var(--ink);}
  .section-head{max-width:660px;margin-bottom:56px;}
  .section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.14;}
  .section-head p{margin-top:18px;font-size:16.5px;line-height:1.7;color:var(--muted);}
  .section-head.on-dark h2{color:#fff;}
  .section-head.on-dark p{color:rgba(245,245,247,.55);}
  /* 9 cards iguais em 3 colunas. Com foto, cards de tamanhos diferentes
     brigariam: a imagem impõe uma proporção e o texto teria que se adaptar a
     larguras distintas. Iguais, cada um recebe o mesmo espaço e a mesma foto. */
  /* 4 cards em 2x2. Com foto, 2 colunas dão 558px por card contra 269px em
     3 colunas — o dobro de área de imagem. Em 3 colunas, 4 cards também
     quebrariam 3+1, deixando um sozinho na segunda fileira. */
  .pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .pillar{
    border:1px solid #2c2c2f;
    background:linear-gradient(160deg,var(--black-2),var(--black-3));
    border-radius:28px;padding:0;display:flex;flex-direction:column;
    position:relative;overflow:hidden;color:inherit;
    transition:transform .5s var(--ease),border-color .7s var(--ease);
  }
  .pillar::before{
    content:"";position:absolute;inset:0;z-index:0;opacity:0;
    background:linear-gradient(120deg,#0a0a14,#644ddf,#a14edd,#644ddf,#0a0a14);
    background-size:300% 300%;animation:pillarGradientMove 9s ease infinite;transition:opacity .6s ease;
  }
  .pillar::after{
    content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:overlay;transition:opacity .6s ease;
  }
  @keyframes pillarGradientMove{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
  .pillar:hover{transform:translateY(-6px);border-color:#3a3a40;}
  .pillar:hover::before{opacity:.9;}
  .pillar:hover::after{opacity:.45;}
  .pillar > *{position:relative;z-index:1;}
  /* área da foto — 4:3, no topo do card */
  .p-media{
    position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;flex-shrink:0;
    background:linear-gradient(150deg,#16161b,#101014);
    border-bottom:1px solid rgba(245,245,247,.07);
  }
  .p-media img{width:100%;height:100%;object-fit:cover;display:block;
    transform:scale(1.02);filter:saturate(.85);
    transition:transform .8s var(--ease),filter .6s var(--ease);}
  .pillar:hover .p-media img{transform:scale(1.08);filter:saturate(1);}

  /* marcação do espaço enquanto a foto não chega */
  .p-media[data-foto]::after{
    content:attr(data-foto);position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:22px;font-family:'Space Grotesk',sans-serif;font-size:12px;
    line-height:1.5;letter-spacing:.04em;color:rgba(245,245,247,.32);
    border:1px dashed rgba(245,245,247,.16);border-radius:0;
  }
  .p-media:has(img)::after{display:none;}

  .p-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;}
  /* Roxo em descanso (card escuro, contraste 3.9). No hover o card fica roxo
     e o número roxo desapareceria — contraste 1.0. Preto resolve: sobe para
     3.7 sobre o roxo escuro e 4.7 sobre o claro. */
  .p-num{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;
    letter-spacing:.14em;color:var(--purple-1);margin-bottom:10px;
    font-variant-numeric:tabular-nums;
    transition:color .5s var(--ease);}
  .pillar:hover .p-num{color:#000;}
  .pillar h3{font-size:20px;font-weight:600;letter-spacing:0;margin:0 0 10px;color:#fff;}
  .pillar p{font-size:14.5px;line-height:1.62;color:rgba(245,245,247,.55);margin:0;transition:color .4s var(--ease);}
  .pillar:hover p{color:#fff;}
  .p-more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;
    font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:rgba(245,245,247,.5);
    transition:color .35s var(--ease),gap .35s var(--ease);}
  .pillar:hover .p-more{color:#fff;gap:13px;}
  .p-more svg{width:14px;height:14px;}

  /* why us */
  .why{padding:120px 0;background:var(--black);color:#fff;position:relative;overflow:hidden;}
  .why-blob{position:absolute;width:560px;height:560px;border-radius:50%;background:var(--navy);filter:blur(140px);opacity:.4;top:-200px;right:-160px;}
  .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden;position:relative;z-index:1;}
  /* Card com imagem quadrada no lugar do ícone. A imagem estica na altura do
     card (align-self:stretch) e o aspect-ratio 1 deriva a largura daí — então
     ela é sempre quadrada, qualquer que seja a altura da fileira.
     min-height garante presença mínima: 224 - 44 de folga = imagem de 180px. */
  .why-item{display:flex;gap:22px;padding:22px;min-height:224px;align-items:stretch;
    background:var(--black-2);transition:background .4s var(--ease);position:relative;}
  .why-item:hover,.why-item.is-tocado{background:var(--black-3);}

  /* ---- linha que dá a volta na caixa ----------------------------------
     Um degradê cônico girando: a ponta é o trecho claro, e ele vai
     esmaecendo para trás, o que dá o efeito de cometa. A máscara recorta
     tudo menos a moldura de 1.5px, então só a borda fica visível.
     O trecho aceso ocupa 126° dos 360° = 35% da volta.                    */
  @property --volta{syntax:'<angle>';inherits:false;initial-value:0deg;}
  .why-item::after{
    content:"";position:absolute;inset:0;padding:1.5px;z-index:2;
    pointer-events:none;opacity:0;
    transition:opacity .45s var(--ease);
    background:conic-gradient(from var(--volta),
      transparent 0deg,
      rgba(100,77,223,0) 7deg,
      rgba(100,77,223,.45) 60deg,
      rgba(161,78,221,.8) 101deg,
      var(--purple-1) 126deg,
      transparent 127deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  .why-item:hover::after,.why-item.is-tocado::after{
    opacity:1;animation:voltaLinha 13.5s linear infinite;
  }
  @keyframes voltaLinha{ to{ --volta:360deg; } }

  /* Os cards são quadrados, mas os quatro das pontas ficam sob o canto
     arredondado da grade (que corta com overflow:hidden). Sem repetir esse
     raio aqui, a linha ia até o bico e sumia cortada em vez de acompanhar
     a curva. 1px a menos por causa da borda da grade. */
  .why-grid > .why-item:first-child::after{
    border-top-left-radius:calc(var(--radius) - 1px);}
  .why-grid > .why-item:nth-child(2)::after{
    border-top-right-radius:calc(var(--radius) - 1px);}
  .why-grid > .why-item:nth-last-child(2)::after{
    border-bottom-left-radius:calc(var(--radius) - 1px);}
  .why-grid > .why-item:last-child::after{
    border-bottom-right-radius:calc(var(--radius) - 1px);}
  @media(prefers-reduced-motion:reduce){
    .why-item:hover::after,.why-item.is-tocado::after{animation:none;}
  }

  /* texto branco e título roxo enquanto o card está aceso.
     #b76fe6 é o roxo da marca clareado: o #a14edd puro dá 3.95:1 sobre o
     fundo do card, abaixo do mínimo de 4.5 para texto deste tamanho. */
  .why-item:hover h3,.why-item.is-tocado h3{color:#b76fe6;}
  .why-item:hover p,.why-item.is-tocado p{color:#fff;}
  .why-media{
    aspect-ratio:1;align-self:stretch;flex-shrink:0;
    border-radius:16px;overflow:hidden;position:relative;
    background:linear-gradient(150deg,#16161b,#101014);
    border:1px solid rgba(245,245,247,.07);
  }
  /* A foto sai do fluxo (position:absolute) de propósito: como o card é um
     flex com flex-shrink:0 na caixa da imagem, a largura natural do arquivo
     (760px) virava a largura da caixa e estourava o card. Fora do fluxo, quem
     manda no tamanho é o aspect-ratio da caixa, como era com o marcador. */
  .why-media img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
    filter:saturate(.85);transition:transform .8s var(--ease),filter .6s var(--ease);}
  .why-item:hover .why-media img,
  .why-item.is-tocado .why-media img{transform:scale(1.08);filter:saturate(1);}
  /* marcação do espaço enquanto a foto não chega */
  .why-media[data-foto]::after{
    content:attr(data-foto);position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
    font-family:'Space Grotesk',sans-serif;font-size:11px;line-height:1.5;
    letter-spacing:.03em;color:rgba(245,245,247,.32);
    border:1px dashed rgba(245,245,247,.16);border-radius:16px;
  }
  .why-media:has(img)::after{display:none;}
  .why-body{display:flex;flex-direction:column;justify-content:center;min-width:0;}
  .why-item h3{font-size:16.5px;font-weight:600;letter-spacing:0;margin-bottom:8px;color:#fff;
    transition:color .4s var(--ease);}
  .why-item p{font-size:14px;line-height:1.6;color:rgba(245,245,247,.55);margin:0;
    transition:color .4s var(--ease);}

  /* markets */
  .markets{padding:120px 0;background:var(--white);}
  .markets-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
  .markets-body p{font-size:16.5px;line-height:1.85;color:var(--muted);margin:0 0 18px;}
  .markets-body strong{color:var(--ink);font-weight:600;}
  .license-badge{
    display:inline-flex;align-items:center;gap:10px;margin-top:8px;
    padding:12px 20px;border-radius:100px;background:var(--paper);
    border:1px solid var(--line);font-family:'Space Grotesk',sans-serif;
    font-size:13.5px;font-weight:600;color:var(--ink);
  }
  .license-badge svg{width:18px;height:18px;flex-shrink:0;color:var(--purple-1);}
  .country-grid{display:flex;flex-wrap:wrap;gap:10px;}
  .country-chip{
    padding:11px 19px;border-radius:100px;border:1px solid var(--line);font-family:'Space Grotesk',sans-serif;
    font-size:13.5px;font-weight:500;color:var(--ink);background:var(--paper);transition:.3s var(--ease);
  }
  .country-chip:hover{border-color:var(--purple-1);color:var(--purple-1);background:#fff;}


  /* mid CTA + footer */
  .mid-cta{padding:110px 0;background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden;}
  .mid-cta-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;z-index:0;}
  .mid-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 50% 0%,rgba(255,255,255,.08),transparent 70%);z-index:0;}
  .mid-cta .wrap{position:relative;z-index:1;}
  .mid-cta h2{font-size:clamp(28px,4vw,44px);line-height:1.22;max-width:780px;margin:0 auto;position:relative;z-index:1;color:#fff;}
  .mid-cta .btn{margin-top:38px;position:relative;z-index:1;}
  .mid-cta-social{display:flex;justify-content:center;gap:12px;margin-top:34px;position:relative;z-index:1;}
  .mid-cta-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;transition:.3s;}
  .mid-cta-social a:hover{background:var(--purple-grad);color:#fff;border-color:transparent;}
  .mid-cta-social svg{width:16px;height:16px;}

  /* footer — mirrors maxibestof.one/pro structure & look exactly (white card + light-gray closing band) */
  footer{background:var(--white);color:var(--ink);}
  .foot-wrap{max-width:1800px;margin:0 auto;padding:40px 40px 36px;width:100%;}
  .foot-top-row{display:flex;gap:40px;padding-bottom:40px;flex-wrap:wrap;}
  .foot-brand{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;flex:0 0 280px;}
  .foot-logo-img{height:156px;width:auto;align-self:flex-start;}
  .foot-byline{font-size:13.5px;color:var(--muted);margin:0;}
  .foot-cols{display:flex;flex:1;justify-content:space-between;gap:30px;flex-wrap:wrap;}
  .foot-col h4{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:16px;}
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
  .foot-col a{font-size:13.5px;color:var(--muted);transition:color .3s;}
  .foot-col a:hover{color:var(--ink);}
  .foot-divider{border-top:1px solid var(--line);}
  .foot-bottom-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 0;}
  .foot-legal-block{text-align:left;font-size:13px;}
  .foot-legal-block a{color:var(--ink);display:block;margin-bottom:2px;}
  .foot-legal-block a:hover{color:var(--navy-light);}
  .foot-legal-block p{margin:0;color:var(--muted);}
  .foot-utility{display:flex;align-items:center;gap:22px;}
  .foot-utility a{font-size:13px;color:var(--muted);}
  .foot-utility a:hover{color:var(--ink);}
  .foot-utility-links{display:flex;flex-direction:column;gap:2px;text-align:right;}
  /* crédito da Cinelli: o "C" herda a cor do link (currentColor), então
     acompanha o hover sem precisar de um segundo arquivo em branco */
  .foot-credito{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end;}
  /* Largura E altura explícitas de propósito: com width:auto o navegador
     pode cair na largura padrão de SVG (300px) e o ícone estoura. O viewBox
     também está recortado na tinta — no arquivo original o C ocupa só 55% da
     área declarada, então a caixa media quase o dobro do desenho. */
  .foot-credito svg{width:12px;height:9px;display:block;flex-shrink:0;
    transition:opacity .3s var(--ease);opacity:.9;}
  .foot-credito:hover svg{opacity:1;}
  .to-top{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s;color:var(--ink);flex-shrink:0;}
  .to-top:hover{background:var(--paper);}
  .to-top svg{width:14px;height:14px;}
  .slogan-band{
    position:relative;flex:1;display:flex;align-items:center;justify-content:center;
    background:var(--paper);text-align:center;padding:60px 24px;overflow:hidden;
  }
  .slogan-band .bg-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;
  }
  .slogan-band p{
    position:relative;z-index:1;font-family:'new-science',sans-serif;font-size:clamp(26px,3.6vw,40px);
    color:var(--ink);font-weight:500;margin:0;
  }
  @media(max-width:760px){
    .foot-top-row{flex-direction:column;}
    .foot-bottom-row{flex-direction:column;align-items:flex-start;}
  }


  .wa-float{
    position:fixed;bottom:28px;right:28px;z-index:90;width:58px;height:58px;border-radius:50%;
    background:var(--purple-grad);display:flex;align-items:center;justify-content:center;
    box-shadow:0 16px 32px -10px rgba(154,78,221,.55);transition:transform .3s var(--ease);
  }
  .wa-float:hover{transform:scale(1.08);}
  .wa-float svg{width:25px;height:25px;fill:#fff;}

  /* language switch — bandeira única + menu suspenso */
  .lang-switch{position:relative;}
  .lang-current{
    display:flex;align-items:center;gap:7px;padding:6px 10px 6px 7px;
    border-radius:8px;background:rgba(245,245,247,.05);
    border:1px solid var(--line-dark);cursor:pointer;
    transition:background .3s var(--ease),border-color .3s var(--ease);
  }
  .lang-current:hover{background:rgba(245,245,247,.1);border-color:rgba(245,245,247,.24);}
  .lang-switch.open .lang-current{background:rgba(245,245,247,.12);border-color:rgba(245,245,247,.3);}
  .lang-current img{width:24px;height:auto;border-radius:3px;display:block;flex-shrink:0;}
  .lang-caret{width:9px;height:9px;color:rgba(245,245,247,.6);transition:transform .3s var(--ease);flex-shrink:0;}
  .lang-switch.open .lang-caret{transform:rotate(180deg);}

  .lang-menu{
    position:absolute;top:calc(100% + 8px);right:0;min-width:172px;
    padding:6px;border-radius:16px;
    background:rgba(16,16,22,.96);backdrop-filter:blur(14px);
    border:1px solid var(--line-dark);
    box-shadow:0 20px 44px -18px rgba(0,0,0,.7);
    opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease);
    z-index:120;
  }
  .lang-switch.open .lang-menu{opacity:1;transform:none;pointer-events:auto;}
  .lang-option{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:9px 11px;border:none;border-radius:11px;background:transparent;
    font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:500;
    color:rgba(245,245,247,.8);cursor:pointer;text-align:left;
    transition:background .22s var(--ease),color .22s var(--ease);
  }
  .lang-option:hover{background:rgba(245,245,247,.08);color:#fff;}
  .lang-option.active{color:#fff;background:rgba(125,148,255,.14);}
  .lang-option img{width:22px;height:auto;border-radius:3px;display:block;flex-shrink:0;}

  /* menu do painel mobile: as 3 lado a lado, sem dropdown */
  .lang-switch-mobile{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .lang-switch-mobile .lang-flag{
    width:38px;padding:4px;border:1px solid transparent;border-radius:8px;
    background:transparent;cursor:pointer;opacity:.5;
    transition:opacity .3s var(--ease),border-color .3s var(--ease);
  }
  .lang-switch-mobile .lang-flag img{width:100%;height:auto;border-radius:3px;display:block;}
  .lang-switch-mobile .lang-flag.active{opacity:1;border-color:rgba(125,148,255,.6);}

  /* first-visit language modal */
  .lang-modal-overlay{
    position:fixed;inset:0;z-index:200;background:rgba(5,5,8,.86);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  }
  .lang-modal-overlay.is-open{opacity:1;pointer-events:auto;}
  .lang-modal{
    background:linear-gradient(160deg,var(--black-2),var(--black-3));border:1px solid var(--line-dark);
    border-radius:var(--radius);padding:44px 40px;max-width:420px;width:100%;text-align:center;
    box-shadow:var(--shadow);
  }
  .lang-modal-logo{height:34px;width:auto;margin:0 auto 24px;}
  .lang-modal-title{font-size:14.5px;line-height:1.6;color:rgba(245,245,247,.7);margin:0 0 26px;}
  .lang-modal-options{display:flex;flex-direction:column;gap:10px;}
  .lang-modal-btn{
    display:flex;align-items:center;gap:12px;justify-content:center;padding:14px 20px;border-radius:100px;
    background:rgba(245,245,247,.05);border:1px solid var(--line-dark);color:#fff;font-family:'Space Grotesk',sans-serif;
    font-size:15px;font-weight:500;cursor:pointer;transition:.3s var(--ease);
  }
  .lang-modal-btn img{width:26px;height:auto;border-radius:3px;display:block;flex-shrink:0;}
  .lang-modal-btn:hover{background:rgba(245,245,247,.1);border-color:rgba(255,255,255,.3);}

  @media(max-width:960px){
    .intro-grid,.markets-grid{grid-template-columns:1fr;gap:34px;}
    .why-grid{grid-template-columns:1fr;}
    .why-grid > .why-item::after{border-radius:0;}
    .why-grid > .why-item:first-child::after{
      border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;}
    .why-grid > .why-item:last-child::after{
      border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);}
    .foot-cols{grid-template-columns:repeat(3,1fr);gap:26px;}
    .nav-links,.nav-cta .lang-switch,.nav-cta .btn-ghost-dark,.nav-cta .btn-primary{display:none;}
    .burger{display:flex;}
  }
  @media(max-width:640px){
    /* em coluna única a imagem quadrada esticada ficaria enorme:
       vira uma faixa no topo do card */
    .why-item{flex-direction:column;min-height:0;gap:18px;}
    .why-media{aspect-ratio:16/10;align-self:auto;width:100%;}
    .wrap{padding:0 22px;}
    .hero .wrap{padding-left:22px;padding-right:22px;}
    .foot-cols{grid-template-columns:1fr 1fr;}
    h1.hero-title{font-size:34px;}
    .pillar-grid{grid-template-columns:1fr;}
    .intro-top{margin-bottom:60px;}
  }

/* ==========================================================================
   PÁGINAS DE SOLUÇÃO (solucoes/*.html)
   ========================================================================== */
.sol-page{background:var(--black);color:#fff;}

/* A home usa um rodapé FIXO no fundo da tela, com o conteúdo deslizando por
   cima dentro de .content-shell. As páginas internas não têm esse invólucro,
   então o rodapé fixo apareceria por trás de tudo. Aqui ele volta a ser um
   bloco normal, no fim da página. */
.sol-page footer{position:static;min-height:0;}
/* Sem hero de tela cheia, a barra precisa de fundo desde o começo — senão o
   conteúdo passa por baixo dela e o texto some. */
.sol-page .nav-inner{
  max-width:1000px;padding:7px 18px 7px 22px;
  background:rgba(23,24,29,.82);backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-color:rgba(245,245,247,.1);box-shadow:0 24px 50px -24px rgba(0,0,0,.65);
}
.sol-page .nav-logo-word{height:44px;}
.sol-page .slogan-band{flex:0 0 auto;padding:80px 24px;}
/* garante que nada do fundo vaze entre as seções */
.sol-page .sol-hero,
.sol-page .sol-about,
.sol-page .sol-why,
.sol-page .sol-others{position:relative;z-index:1;background:var(--black);}

/* topo da página */
.sol-hero{position:relative;padding:190px 0 90px;overflow:hidden;background:var(--black);}
.sol-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 70% 0%,rgba(161,78,221,.18),transparent 70%);}
.sol-hero .wrap{position:relative;z-index:1;}
.sol-crumb{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(245,245,247,.42);margin-bottom:26px;}
.sol-crumb a{color:rgba(245,245,247,.42);transition:color .3s;}
.sol-crumb a:hover{color:#fff;}
.sol-hero h1{font-size:clamp(38px,6vw,76px);line-height:1.04;letter-spacing:-.03em;
  color:#fff;max-width:16ch;}
.sol-hero .sol-lead{margin-top:26px;font-size:clamp(16px,1.7vw,19px);line-height:1.75;
  color:rgba(245,245,247,.62);max-width:60ch;}

/* imagem grande da solução */
.sol-media{position:relative;aspect-ratio:21/9;width:100%;overflow:hidden;
  border-radius:var(--radius);margin-top:56px;
  background:linear-gradient(150deg,#16161b,#101014);border:1px solid var(--line-dark);}
.sol-media img{width:100%;height:100%;object-fit:cover;display:block;}
.sol-media[data-foto]::after{content:attr(data-foto);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;
  font-family:'Space Grotesk',sans-serif;font-size:13px;line-height:1.6;letter-spacing:.04em;
  color:rgba(245,245,247,.34);border:1px dashed rgba(245,245,247,.16);border-radius:var(--radius);}
.sol-media:has(img)::after{display:none;}

/* bloco explicativo */
.sol-about{padding:110px 0;background:var(--black);}
.sol-about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start;}
.sol-about h2{font-size:clamp(28px,3.4vw,42px);line-height:1.16;color:#fff;}
.sol-about p{font-size:16.5px;line-height:1.85;color:rgba(245,245,247,.58);margin:0 0 18px;}

/* por que escolher — lista numerada */
.sol-why{padding:0 0 120px;background:var(--black);}
.sol-why-head{margin-bottom:54px;}
.sol-why-head h2{font-size:clamp(26px,3vw,38px);line-height:1.18;color:#fff;}
.sol-why-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.sol-why-item{border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:30px 32px;background:linear-gradient(160deg,var(--black-2),var(--black-3));
  transition:border-color .5s var(--ease),transform .5s var(--ease);}
.sol-why-item:hover{border-color:rgba(161,78,221,.42);transform:translateY(-4px);}
.sol-why-num{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;color:var(--purple-1);margin-bottom:12px;
  font-variant-numeric:tabular-nums;}
.sol-why-item h3{font-size:19px;font-weight:600;color:#fff;margin:0 0 10px;letter-spacing:0;}
.sol-why-item p{font-size:14.5px;line-height:1.65;color:rgba(245,245,247,.55);margin:0;}

/* outras soluções */
.sol-others{padding:0 0 120px;background:var(--black);}
.sol-others-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin-bottom:34px;flex-wrap:wrap;}
.sol-others-head h2{font-size:clamp(22px,2.4vw,30px);color:#fff;}
.sol-others-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.sol-other{display:flex;flex-direction:column;gap:10px;padding:22px 24px;
  border:1px solid var(--line-dark);border-radius:20px;color:#fff;
  background:linear-gradient(160deg,var(--black-2),var(--black-3));
  transition:border-color .45s var(--ease),transform .45s var(--ease);}
.sol-other:hover{border-color:rgba(161,78,221,.42);transform:translateY(-4px);}
.sol-other .n{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--purple-1);font-variant-numeric:tabular-nums;}
.sol-other .t{font-size:15.5px;font-weight:600;}

@media(max-width:960px){
  .sol-about-grid{grid-template-columns:1fr;gap:34px;}
  .sol-why-list{grid-template-columns:1fr;}
  .sol-others-grid{grid-template-columns:repeat(2,1fr);}
  .sol-hero{padding:150px 0 70px;}
}
@media(max-width:640px){
  .sol-others-grid{grid-template-columns:1fr;}
  .sol-media{aspect-ratio:4/3;}
}

/* ==========================================================================
   FAIXA DE NÚMEROS — fundo roxo com vídeo (ref.: nodenza.com "Join the
   Conversation": seção inteira em roxo profundo, vídeo cobrindo por baixo)
   ========================================================================== */
.stats{
  position:relative;overflow:hidden;padding:120px 0;
  /* degradê provisório até o vídeo roxo chegar */
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(161,78,221,.55), transparent 62%),
    radial-gradient(60% 80% at 90% 100%, rgba(100,77,223,.5), transparent 60%),
    linear-gradient(150deg,#32006f,#1d0140 55%,#12002b);
  color:#fff;
}
/* vídeo a 25% por cima do roxo: o degradê continua sendo a base da cor,
   o vídeo só adiciona movimento e textura. Ajuste fino aqui no --video-op. */
.stats{--video-op:.25;}
.stats-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:var(--video-op);}
/* véu leve: com o vídeo em 25% o fundo já está escuro, não precisa de mais */
.stats-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,0,43,.18),rgba(18,0,43,.34));}
.stats .wrap{position:relative;z-index:2;}

/* A largura vai NO h2, não na caixa. Em CSS, 'em' resolve contra a
   font-size do PRÓPRIO elemento: numa div ela vale 16px (herdado do body),
   então 23em davam 368px e o título de 52px quebrava em 6 linhas.
   No h2, 23em valem 23 × 52px = 1196px — na prática limitado pelo container,
   o que dá 2 linhas do desktop ao tablet. */
.stats-head{margin:0 auto 70px;text-align:center;}
.stats-head h2{
  font-size:clamp(30px,4.2vw,52px);line-height:1.12;color:#fff;
  max-width:23em;margin:0 auto;
}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.stat{padding-top:26px;border-top:1px solid rgba(255,255,255,.22);text-align:center;}
.stat-num{
  font-family:'new-science',sans-serif;font-weight:500;
  font-size:clamp(40px,5.2vw,68px);line-height:1;letter-spacing:-.03em;
  color:var(--purple-1);font-variant-numeric:tabular-nums;margin-bottom:16px;
  /* largura estável enquanto o número sobe, senão o texto abaixo dança */
  font-feature-settings:"tnum" 1;
}
.stat h3{font-size:17px;font-weight:600;color:#fff;margin:0 0 6px;letter-spacing:0;}
.stat p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.62);margin:0;}

@media(max-width:960px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:34px 24px;}
  .stats{padding:90px 0;}
  .stats-head{margin:0 auto 50px;}
}
@media(max-width:560px){
  .stats-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   RASTRO — caixa que persegue o cursor com atraso
   Duas camadas de propósito: a de fora carrega a POSIÇÃO (atualizada a cada
   quadro pelo JS, sem transition) e a de dentro carrega o APARECER/SUMIR
   (com transition). Numa camada só, a transição brigaria com o movimento.
   ========================================================================== */
.rastro{
  position:fixed;top:0;left:0;z-index:95;pointer-events:none;
  will-change:transform;
}
/* Vidro: o fundo escuro é só o suficiente para o texto branco ler; o resto
   da opacidade vem do desfoque, que é o que dá a sensação de vidro fosco. */
.rastro-in{
  display:flex;align-items:center;gap:11px;
  padding:9px 18px 9px 9px;border-radius:100px;
  background:linear-gradient(140deg,rgba(26,26,36,.78),rgba(8,8,14,.72));
  backdrop-filter:blur(22px) saturate(1.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(245,245,247,.2);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.65),
             inset 0 1px 0 rgba(255,255,255,.14);
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.04em;color:#fff;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  transform:translate(var(--rx,-50%),var(--ry,-50%)) scale(.82);opacity:0;
  transition:transform .38s var(--ease),opacity .38s var(--ease);
}
/* navegador sem suporte a desfoque: escurece mais, senão o texto some */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rastro-in{background:rgba(10,10,16,.94);}
}
/* variante só-ícone, usada nos botões: vira um disco */
.rastro.so-icone .rastro-in{padding:9px;gap:0;}
.rastro.so-icone .rastro-txt{display:none;}
/* A versão com texto fica abaixo do cursor, não em cima dele: 40px de folga,
   crescendo a partir da borda de cima para não invadir o ponteiro. */
.rastro:not(.so-icone) .rastro-in{--ry:40px;transform-origin:center top;}
.rastro.is-on .rastro-in{transform:translate(var(--rx,-50%),var(--ry,-50%)) scale(1);opacity:1;}
.rastro-in img{width:26px;height:26px;display:block;flex-shrink:0;}

/* o cursor comum sai de cena enquanto o rastro está no lugar dele */
/* Só o ícone: a caixa substitui o cursor, então o cursor sai de cena.
   Com texto (cards de soluções), o cursor continua aparecendo normalmente. */
[data-rastro=""], [data-rastro=""] *{cursor:none;}
@media(hover:none),(pointer:coarse){ [data-rastro=""], [data-rastro=""] *{cursor:auto;} }