/* AKROS — composição da referência com arte vetorial e conteúdo responsivo. */
.scene{position:relative;z-index:2}
.scene--curtain{height:280svh}  /* pista da cortina: mais rolagem = cada
     entalhe da roda move menos, e a transicao fica mais macia */
.hero{
  position:sticky;top:0;height:100svh;min-height:700px;display:flex;flex-direction:column;
  padding:var(--nav-h) var(--gutter) clamp(34px,4.3vh,58px);transform-origin:50% 42%;overflow-x:clip;
  will-change:transform,opacity;   /* promove a camada: sem isso o Chrome
     re-rasteriza o hero inteiro a cada quadro da cortina */
}
.hero__inner{position:relative;width:100%;max-width:2200px;margin:0 auto;flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:28px}

/* Assinatura grande, sobreposta à borda da rede como na referência. */
.wordmark{
  position:relative;z-index:3;align-self:start;font-family:var(--serif);font-weight:500;color:var(--ink);
  /* Bodoni Moda e variavel em opsz 6..96. O padrao 'auto' escolhe opsz 96 a
     esse corpo e os fiapos finos somem: medido, 28% das colunas da palavra
     ficavam SEM tinta. opsz 32 casa com a referencia (soma das larguras de
     glifo 411,9% da caixa-alta contra 412,4% do desenho). */
  font-optical-sizing:none;font-variation-settings:'opsz' 32;
  font-size:clamp(3.4rem,12.2vw,18rem);line-height:.88;letter-spacing:-.028em;
  display:flex;white-space:nowrap;width:max-content;max-width:100%;margin-left:-.025em;padding-top:clamp(38px,12.4vh,165px);
}
.wordmark__l{display:inline-block}
.js .wordmark__l{transform:translateY(28px);opacity:0;filter:blur(8px)}
.js .is-lit .wordmark__l{transform:none;opacity:1;filter:none;transition:transform 1.15s var(--ease),opacity .85s var(--ease),filter 1s var(--ease)}
.is-lit .wordmark__l:nth-child(2){transition-delay:.07s}
.is-lit .wordmark__l:nth-child(3){transition-delay:.14s}
.is-lit .wordmark__l:nth-child(4){transition-delay:.21s}
.is-lit .wordmark__l:nth-child(5){transition-delay:.28s}
.wordmark__sheen{display:none}

/* A rede é decorativa: permanece independente dos cliques e do conteúdo. */
.visual{position:absolute;inset:0;z-index:1;pointer-events:none}
/* ======================================================================
     M O N T A N H A   —   mexa so nestes tres numeros

   --mt-tamanho  TAMANHO.  % da largura do hero. NAO TEM TETO: pode por
                 150%, 250%, o que quiser. Cresce para os dois lados sem
                 sair do lugar, porque a arte e presa pelo CENTRO.
   --mt-x        POSICAO HORIZONTAL do centro.  maior = mais a DIREITA
   --mt-y        POSICAO VERTICAL do centro.    maior = mais para BAIXO

   Aceitam qualquer unidade: %, px, vw, vh.
   Salve o arquivo e a tela se atualiza sozinha, sem F5.
   A rede fica atras do nome e dos cartoes (z-index 1 contra 3).
   ====================================================================== */
.visual__canvas{
  --mt-tamanho: 65%;
  --mt-x:        71%;
  --mt-y:        40%;
}

/* ---- daqui para baixo e maquinaria; nao precisa mexer ---- */
.visual__canvas{
  position:absolute;
  left:var(--mt-x);top:var(--mt-y);right:auto;bottom:auto;
  width:var(--mt-tamanho);max-width:none;
  aspect-ratio:958 / 573;                 /* trava a proporcao do desenho */
  /* o translate(-50%,-50%) e o que faz o crescimento ser simetrico:
     sem ele a arte crescia so para um lado e escapava do quadro */
  transform:translate(-50%,-50%)
            translate3d(var(--art-x,0px),calc(var(--art-y,0px) + var(--art-float,0px)),0);
  animation:art-float 11s ease-in-out infinite, art-breathe 10s ease-in-out infinite;
}
@property --art-float{ syntax:'<length>'; inherits:true; initial-value:0px }
@keyframes art-float{0%,100%{--art-float:0px}50%{--art-float:-16px}}
.visual__art{width:100%;height:100%;overflow:visible}

/* ---- UM VERTICE POR VEZ ----------------------------------------------
   Pedido do dono em 15/09/2026: os vertices da cupula piscando um a um,
   como na tela de login da plataforma. Mesma receita de la'.

   Cada <g> de #mt-nos-luminosos carrega o seu indice em `--i` (0..85, no
   atributo style, dentro do index.html). O atraso NEGATIVO de --i x 0,30s
   adianta a animacao de cada no nessa fracao. 86 nos x 0,30 s = 25,8 s —
   exatamente a volta do ciclo —, entao os atrasos cobrem a volta inteira
   sem sobra nem buraco: em qualquer instante ha UM no no pico e o vizinho
   entrando enquanto ele sai. O pico ocupa ~2% do ciclo (meio segundo),
   o bastante para a passagem ser suave sem virar estroboscopio.

   A ORDEM DO ARQUIVO E' ESPACIAL e e' o que faz isto funcionar: os nos
   vem escritos seguindo o arco da cupula — (154,456) → (143,374) →
   (163,264) → (247,141) → (363,66) → (476,46) … —, de baixo a esquerda
   subindo por cima. Um atraso por indice vira, de graca, uma luz
   PERCORRENDO a cupula. Quem reordenar os <g> num "organizar o SVG" nao
   quebra nada visivel: a animacao continua rodando e vira pisca-pisca
   aleatorio, calada. A sequencia E' a ordem, nao um dado a parte.

   A opacidade animada vive no <g>, que nao tem opacity propria — so os
   filhos tem. Por isso ela multiplica com a deles em vez de apagar o
   volume de cada no. */
@keyframes mt-no-acende{
  0%    {filter:brightness(1)}
  0.6%  {filter:brightness(2.1)}
  2.2%  {filter:brightness(1)}
  100%  {filter:brightness(1)}
}
#mt-nos-luminosos > g{
  animation:mt-no-acende 25.8s linear infinite;
  animation-delay:calc(var(--i) * -.30s);
}

/* AQUI O SITE DIVERGE DO LOGIN, DE PROPOSITO. La' o no descansa em 40% de
   opacidade e sobe a 100%: funciona porque a montanha e' ARTE DE FUNDO atras
   do formulario, ja' rebaixada a .46 por uma animacao da pagina. Aqui a
   cupula E' o heroi — os 86 pontos acesos sao metade do brilho da abertura —,
   e copiar aquele piso apagava a peca inteira entre uma piscada e outra. A
   foto reprovou o que a receita aprovava. Entao o repouso fica CHEIO e quem
   pulsa e' o brilho: mesmo percurso, mesmo ciclo, mesma ordem, sem custo. */
.visual__halo{position:absolute;top:0;right:0;width:66%;height:80%;background:radial-gradient(ellipse at 55% 48%,rgba(185,234,253,.15),transparent 65%)}
@keyframes art-breathe{0%,100%{opacity:.88}50%{opacity:1}}
.hero__lower{display:grid;grid-template-columns:minmax(0,35%) minmax(0,1fr);gap:clamp(24px,2.1vw,44px);align-items:end}
.copy{position:relative;z-index:3;padding-bottom:clamp(30px,4.9vh,62px)}
.copy__title{font-size:clamp(28px,2.35vw,46px);font-weight:400;line-height:1.13;letter-spacing:-.04em;text-transform:uppercase;color:var(--ink);margin-bottom:24px}
.copy__title em{font-style:normal}
.copy__sub{max-width:29em;margin:0 0 clamp(25px,4.2vh,42px) 0;font-size:clamp(15px,1.05vw,18px);line-height:1.45;letter-spacing:-.015em;color:var(--body)}
.actions{display:flex;gap:10px;margin-left:0}
.btn{
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;
  min-height:54px;padding:16px 20px;border:1px solid transparent;border-radius:calc(100px * var(--r));
  font-size:clamp(11px,.91vw,18px);font-weight:500;letter-spacing:-.02em;text-transform:uppercase;
  transition:background .3s,box-shadow .3s,border-color .3s,transform .3s;
}
.btn svg{flex:none;transition:transform .3s}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{color:white;background:linear-gradient(105deg,var(--accent-lo),var(--accent-hi));box-shadow:0 8px 24px -12px rgba(0,98,199,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.btn--primary:hover{background:linear-gradient(105deg,#0763CA,#008CC9);box-shadow:0 10px 28px -10px rgba(0,81,180,.5)}
.btn--ghost{color:var(--ink);background:rgba(239,248,255,.17);border-color:rgba(255,255,255,.65)}
.btn--ghost:hover{background:rgba(255,255,255,.4);border-color:white}
.copy__note{display:flex;align-items:center;gap:7px;margin:16px 0 0;font-size:clamp(10px,.75vw,12px);line-height:1.4;color:var(--muted)}
.copy__note svg{flex:none;width:13px;height:13px}
.pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* Cartões laterais de vidro e cartão central com recorte orgânico. */
.showcase{position:relative;z-index:3;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.users{display:inline-flex;align-items:center;gap:9px;border-radius:calc(100px * var(--r));padding:0 14px 0 0;min-height:36px;background:var(--glass-2);border:1px solid var(--edge);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.users__stack{display:flex;flex:none;margin:-7px 0 -7px -2px}
.users__stack > span{width:38px;height:38px;border-radius:50%;border:2px solid #E4EDF2;margin-left:-10px;overflow:hidden;background:#859BAD;transition:transform .3s var(--ease)}
.users__stack > span:first-child{margin-left:0}
.users__stack svg{width:100%;height:100%}
.users:hover .users__stack > span{transform:translateY(-3px)}
.users__label{font-size:12.5px;color:var(--muted);white-space:nowrap}
.users__n{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cards{display:grid;grid-template-columns:1.32fr 1fr 1.32fr;gap:clamp(14px,1.15vw,22px);align-items:end;width:100%;max-width:clamp(720px,53vw,920px)}
.card{
  position:relative;isolation:isolate;min-width:0;min-height:142px;padding:14px 16px;border-radius:calc(26px * var(--r));
  display:grid;grid-template-columns:minmax(60px,.7fr) minmax(0,1.3fr);grid-auto-rows:min-content;column-gap:14px;row-gap:6px;align-content:center;
  border:1px solid var(--edge);background:linear-gradient(130deg,rgba(255,255,255,.34),rgba(255,255,255,.15));
  box-shadow:var(--sh-card),inset 0 1px 0 rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
/* Flutuacao. O cartao e vidro com backdrop-filter: o fundo visto atraves
   dele e o mesmo esteja onde estiver, entao a moldura nao denuncia o
   movimento — so o texto, que tem borda dura. Por isso o curso e maior e
   vem acompanhado de SOMBRA, que e o que faz um objeto ler como suspenso.
   O curso vai no `translate` e nao no `transform` para nao brigar com o
   transform do hover nem com a transicao dele. */
.card{animation:flutua-card 8.5s ease-in-out infinite}
.card:nth-child(2){animation-delay:-2.8s}
.card:nth-child(3){animation-delay:-5.6s}
@keyframes flutua-card{
  0%,100%{ translate:0 0;
    box-shadow:0 14px 30px -20px rgba(12,34,58,.40),0 2px 8px -2px rgba(12,34,58,.13),
               inset 0 1px 0 rgba(255,255,255,.5) }
  50%    { translate:0 -14px;
    box-shadow:0 34px 58px -20px rgba(12,34,58,.50),0 5px 14px -3px rgba(12,34,58,.18),
               inset 0 1px 0 rgba(255,255,255,.5) }
}
.card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 70%)}
.card:hover,.card:focus-visible{transform:translateY(-11px);border-color:#fff}
.card:hover::after{opacity:1}
.card__top{display:contents}
.card__icon{grid-column:1;grid-row:1 / span 3;align-self:center;width:100%;max-width:74px;aspect-ratio:1;filter:drop-shadow(0 8px 10px rgba(11,76,132,.18))}
.card__icon img{width:100%;height:100%;object-fit:contain}
.card__title,.card__text,.card__stat{grid-column:2}
.card__title{font-size:15px;font-weight:400;line-height:1.17;letter-spacing:-.025em;color:var(--ink);padding-right:7px}
.card--glass .card__title{text-transform:uppercase;margin-top:9px}
.card__text{font-size:12.5px;line-height:1.33;letter-spacing:-.015em;color:var(--body)}
.card__go{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.55);transition:background .3s,transform .3s}
.card:hover .card__go{transform:translate(2px,-2px);background:rgba(226,240,251,.3)}
.card--glass .card__go{top:10px;right:10px;width:27px;height:27px}
.card__stat{display:flex;align-items:center;gap:8px;margin-top:-6px}
.card__stat b{font-size:20px;font-weight:400;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.card__stat span{font-size:clamp(9px,.65vw,13px);line-height:1.1;color:var(--muted)}
.card--feature{min-height:156px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:16px;padding-top:52px;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:calc(28px * var(--r))}
/* 🩸 O arredondado deste card NAO e border-radius: ele esta desenhado no
   CAMINHO do SVG embutido, entao o multiplicador --r nao o alcanca. Recorte
   com os cantos redondos, caso queira de volta:
   M38 .75H99C128 .75 129 20 137 49C143 71 154 81 178 81H222C245 81 259.25 96
   259.25 119V262C259.25 286 244 299.25 222 299.25H38C14 299.25 .75 284 .75
   262V39C.75 15 14 .75 38 .75Z                                              */
.card--feature::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x2='.85' y2='1'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='.52' stop-color='%23EDF3F7'/%3E%3Cstop offset='1' stop-color='%23B7C6D3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M.75 .75H259.25V299.25H.75Z' fill='url(%23a)' stroke='%23E6F0F6' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter:drop-shadow(0 15px 18px rgba(28,51,74,.1));
}
.card--feature::after{display:none}
.card--feature:hover,.card--feature:focus-visible{box-shadow:none}
.card--feature .card__icon{position:absolute;top:6px;left:10px;width:48px;height:auto}
.card--feature .card__go{top:32%;right:14px;width:35px;height:35px;color:var(--ink);background:rgba(255,255,255,.57)}
.card--feature .card__title{font-size:20px;line-height:1.12;color:var(--ink);letter-spacing:-.035em;padding:0}
.card--feature .card__text{color:var(--body);font-size:12.5px;line-height:1.4}

/* ---- 09/10, do dono: «deixe os cards extremamente atrativos». Os três
   cartões carregam as sete promessas da hero em título + texto + pastilhas.
   O do meio vira o cartão da MARCA (azul, texto branco); os de vidro ganham
   aro em degradê (pseudo com máscara, só a borda), halo atrás do ícone e o
   24/7 com um ponto que pulsa (só opacity). As pastilhas atravessam as duas
   colunas, por baixo do ícone, para não apertar a coluna do texto. ---- */
.card{grid-template-columns:minmax(56px,.62fr) minmax(0,1.38fr);row-gap:5px}
.card__icon{position:relative;isolation:isolate;grid-row:1 / span 2;max-width:70px}
.card--sempre .card__icon{grid-row:1 / span 3}
.card__icon::before{content:"";position:absolute;inset:-16%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(67,166,255,.42),rgba(67,166,255,0) 68%)}
.card--glass{background:linear-gradient(135deg,rgba(255,255,255,.56),rgba(255,255,255,.22) 55%,rgba(160,208,255,.26));border-color:rgba(255,255,255,.8)}
.card--glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.3) 40%,rgba(67,166,255,.95));
  -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;transition:opacity .3s;opacity:.85;
}
.card--glass:hover::before{opacity:1}
.card__title{font-weight:600;letter-spacing:-.02em}
.card--glass .card__title{font-size:13.5px;letter-spacing:.03em;margin-top:6px}
.card__text{color:var(--ink-soft)}
.card__chips{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.card__chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 7px;border-radius:999px;white-space:nowrap;
  font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;font-style:normal;color:var(--accent-ink);
  background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.95);box-shadow:0 3px 8px -4px rgba(12,34,58,.4);
}
.card__chip::before{content:"";width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,var(--accent-hi),var(--accent-lo))}
.card__stat{margin-top:-2px;gap:7px}
.card__stat::before{content:"";width:7px;height:7px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.22);animation:card-vivo 1.7s ease-in-out infinite}
.card__stat b{font-size:23px;font-weight:600;background:linear-gradient(100deg,var(--accent-lo),var(--accent-hi));-webkit-background-clip:text;background-clip:text;color:transparent}
.card__stat span{color:var(--ink-soft);font-weight:500}
@keyframes card-vivo{0%,100%{opacity:1}50%{opacity:.3}}
.card:hover .card__go{background:var(--accent);color:#fff}
/* o cartão da marca: o mesmo recorte, agora no azul do botão principal */
.card--feature::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x2='.85' y2='1'%3E%3Cstop stop-color='%235EBBFF'/%3E%3Cstop offset='.5' stop-color='%230A80E2'/%3E%3Cstop offset='1' stop-color='%230B3E8F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M.75 .75H259.25V299.25H.75Z' fill='url(%23a)' stroke='%23BFE1FF' stroke-opacity='.55' stroke-width='1.5'/%3E%3C/svg%3E");
  filter:drop-shadow(0 18px 24px rgba(10,86,200,.38));
}
.card--feature .card__title{color:#fff}
.card--feature .card__text{color:rgba(255,255,255,.88)}
.card--feature .card__go{background:rgba(255,255,255,.92);color:var(--accent-lo)}
.card--feature:hover .card__go{background:#fff;color:var(--accent-lo)}
.card--feature .card__chip{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);box-shadow:none}
.card--feature .card__chip::before{background:#7EDCFA}
.card--feature .card__icon::before{inset:-24%;background:radial-gradient(circle,rgba(255,255,255,.6),rgba(255,255,255,0) 68%)}
.card--feature .card__chips{margin-top:1px}
/* ---- 10/10, do dono: «coloque esse símbolo do lado direito do título
   (numa linha só) e padronize a altura desse card com os outros». A esfera
   sai da aba de cima e vai para depois do título, na mesma linha; sem ela a
   aba perdeu a razão de existir, então o recorte vira retângulo (o mesmo
   degradê e o mesmo fio) e a fileira estica os três cartões à mesma altura.
   A seta não cabe na linha do título (título 148 px a 20 px num cartão de
   180 px úteis em 1521×712): desce para o canto de baixo, na coluna 3, ao
   lado das pastilhas. Grade de três colunas — título | esfera | seta —; a
   esfera ocupa a 2 e a 3, então nunca falta lugar para ela. O título encolhe
   com o cartão (cqw, margem de 5 % para fonte que não seja a Segoe) entre
   15 e 20 px, para nunca quebrar linha. ---- */
.cards{align-items:stretch}
.cards .card--feature{
  display:grid;grid-template-columns:max-content minmax(0,1fr) auto;grid-auto-rows:min-content;
  align-content:center;gap:8px;min-height:142px;padding:14px 16px;container-type:inline-size;
}
.cards .card--feature .card__title{
  grid-column:1;grid-row:1;align-self:center;white-space:nowrap;
  font-size:clamp(15px,calc((100cqw - 38px) / 7.8),20px);
}
.cards .card--feature .card__title br{display:none}
.cards .card--feature .card__icon{
  position:relative;top:auto;left:auto;grid-column:2 / span 2;grid-row:1;justify-self:start;align-self:center;
  width:30px;height:30px;max-width:none;
}
.cards .card--feature .card__icon::before{inset:-30%}
.cards .card--feature .card__text{grid-column:1 / -1;grid-row:2}
.cards .card--feature .card__chips{grid-column:1 / 3;grid-row:3;margin-top:0}
.cards .card--feature .card__go{position:relative;top:auto;right:auto;grid-column:3;grid-row:3;align-self:end;width:30px;height:30px}
@media (prefers-reduced-motion:reduce){.card__stat::before{animation:none}}
.scrollcue{position:absolute;bottom:15px;left:var(--gutter);z-index:4;display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.scrollcue i{display:block;width:30px;height:1px;background:rgba(10,31,69,.35)}

@media (min-width:1181px) and (max-width:1500px){
  .actions,.copy__sub,.copy__note{margin-left:0}
  .btn{padding:15px 18px;font-size:12.5px;min-height:52px}
  .actions{gap:9px}
  .copy__title{font-size:2.35vw}
}
/* Tablet: preserva a arte e abre uma linha própria para os cartões. */
@media (max-width:1180px){
  .scene--curtain{height:auto}
  .hero{position:relative;height:auto;min-height:0;padding-bottom:42px}
  .hero__inner{display:flex;flex-direction:column;gap:0}
  .wordmark{font-size:17vw;padding-top:70px;line-height:.88;margin-bottom:190px}
  .visual__canvas{--mt-tamanho:min(62%,690px);--mt-x:71%;--mt-y:210px}
  .hero__lower{grid-template-columns:1fr;gap:38px}
  .copy{max-width:650px;padding:0}
  .copy__title{font-size:40px;margin-bottom:20px}
  .copy__sub{font-size:17px;max-width:30em;margin:0 0 26px}
  .actions,.copy__note{margin-left:0}
  .btn{font-size:13px;padding:16px 24px}
  .showcase{gap:24px}
  .users{position:absolute;right:0;top:-84px}
  .cards{grid-template-columns:1.2fr 1fr 1.2fr;gap:18px;max-width:100%}
  .card{min-height:150px}
  .cards .card--feature{min-height:150px}
  .card__title{font-size:18px}
  .card__text{font-size:14px}
  .cards .card--feature .card__title{font-size:clamp(15px,calc((100cqw - 42px) / 7.8),24px)}
  .cards .card--feature .card__icon{width:34px;height:34px}
  .card--feature .card__text{font-size:14px}
  .scrollcue{display:none}
}
@media (max-width:880px){
  .wordmark{margin-bottom:160px}
  .copy__title{font-size:36px}
  .users{position:relative;top:auto;align-self:flex-end}
  .showcase{gap:25px}
  .cards{gap:12px}
  .card{display:flex;flex-direction:column;align-items:flex-start;min-height:232px;padding:20px;gap:10px}
  .card__icon{width:68px;height:68px;align-self:flex-start}
  .card__title{margin:0!important;font-size:18px;max-width:160px}
  .card__text{font-size:14px}
  .cards .card--feature{min-height:232px;padding:20px;gap:10px 8px}
  .cards .card--feature .card__icon{width:32px;height:32px}
  .cards .card--feature .card__title{max-width:none;font-size:clamp(15px,calc((100cqw - 40px) / 7.8),23px)}
}
/* Celular: marca, montanha, proposta de valor e cartões em sequência. */
@media (max-width:600px){
  .hero{padding-top:90px;padding-bottom:32px}
  .wordmark{font-size:25vw;letter-spacing:-.045em;padding-top:16px;margin-left:-.02em;margin-bottom:250px}
  .visual__canvas{--mt-tamanho:116%;--mt-x:50%;--mt-y:255px}
  .visual__halo{top:90px;right:-15%;width:130%;height:340px}
  .hero__lower{gap:32px}
  .copy__title{font-size:clamp(25px,6.65vw,38px);letter-spacing:-.043em;margin-bottom:18px}
  .copy__sub{font-size:16px;line-height:1.45;max-width:32em;margin-bottom:23px}
  .actions{gap:9px;flex-wrap:wrap}
  .btn{font-size:11px;flex:1;padding:15px 12px;gap:6px;white-space:nowrap;min-height:50px}
  .btn svg{width:13px;height:13px}
  .copy__note{font-size:11px;margin-top:15px;align-items:flex-start}
  .showcase{gap:32px}
  .users{align-self:center;background:rgba(42,64,84,.35);gap:10px;min-height:40px}
  .users__stack > span{width:41px;height:41px}
  .users__label{font-size:12px}
  .users__n{font-size:21px}
  .cards{grid-template-columns:1fr;gap:18px}
  .card{display:grid;grid-template-columns:90px minmax(0,1fr);min-height:170px;padding:25px;border-radius:calc(28px * var(--r));gap:10px 18px}
  .card__icon{width:90px;height:90px;align-self:center}
  .card__title{max-width:none;font-size:21px;padding-right:10px}
  .card__text{font-size:15px;line-height:1.4}
  .cards .card--feature{min-height:170px;padding:25px;gap:12px 10px}
  .cards .card--feature .card__icon{width:38px;height:38px}
  .cards .card--feature .card__go{width:38px;height:38px}
  .cards .card--feature .card__title{font-size:clamp(17px,calc((100cqw - 48px) / 7.8),27px)}
  .card__title br{display:none}
  .card--feature .card__text{font-size:16px;max-width:32em}
  .card__stat b{font-size:29px}
  .card__stat span{font-size:11px}
}
@media (max-width:360px){
  .wordmark{margin-bottom:230px}
  .visual__canvas{--mt-y:205px}
  .actions{flex-direction:column}
  .btn{font-size:12px}
  .card{grid-template-columns:68px minmax(0,1fr);padding:22px;column-gap:14px}
  .card__icon{width:68px;height:68px}
  .card__title{font-size:19px}
}
@media (min-width:1181px) and (max-height:760px){
  .hero{min-height:640px;padding-bottom:30px}
  .wordmark{padding-top:6vh;font-size:14.1vw}
  .copy{padding-bottom:22px}
  .copy__title{margin-bottom:16px}
  .copy__sub{margin-bottom:24px}
  .showcase{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .scene--curtain{height:auto}
  .hero{position:relative;height:auto;min-height:100svh}
  .hero__inner{flex:auto}
  .wordmark{margin-bottom:max(10vh,36px)}
  .js .wordmark__l{opacity:1;filter:none;transform:none}
  .visual__canvas{animation:none;transform:translate(-50%,-50%)}
  /* parada no estado CHEIO, nao no meio de um ciclo */
  #mt-nos-luminosos > g{animation:none;filter:none}
  .card:hover,.card:focus-visible{transform:none}
  .card{animation:none;translate:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:1180px){
  .wordmark{margin-bottom:190px}
}
@media (prefers-reduced-motion:reduce) and (max-width:600px){
  .wordmark{margin-bottom:250px}
}
@media (prefers-reduced-motion:reduce) and (max-width:360px){
  .wordmark{margin-bottom:230px}
}