/* ═══════════════════════════════════════════════════
   Lesstime — folha de estilo única
   Paleta extraída da imagem do hero (ampulheta neon).
   ═══════════════════════════════════════════════════ */

:root{
  /* fundo quase preto, levemente quente */
  --bg:        #0A0807;
  --bg-alt:    #0E0B09;
  --surface:   #15100C;
  --surface-2: #1B1510;

  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.05);

  --text:      #F3EEE9;
  --text-mid:  #B6ABA1;
  --text-dim:  #857A71;

  /* acento laranja/âmbar */
  --accent:      #FF6B1A;
  --accent-soft: #FF9247;
  --accent-deep: #D9490A;
  /* Mesmo #FF6B1A do --accent, só que em componentes, para poder pedir
     qualquer opacidade dele com rgb(var(--accent-rgb) / X). Os dois têm
     de andar juntos: mudou um, muda o outro. */
  --accent-rgb:  255 107 26;
  --accent-glow: rgb(var(--accent-rgb) / .35);

  --radius:    14px;
  --radius-lg: 20px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  200ms;

  --nav-h:   64px;
  --nav-top: 14px;                    /* a cápsula flutua abaixo do topo */
  --nav-gap: calc(var(--nav-h) + var(--nav-top));
  --pad:     clamp(20px, 5vw, 40px);
}

/* ── reset ─────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-gap) + 24px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
              "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--accent); color:#140A03;
  padding:10px 18px; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ── layout ────────────────────────────────────── */
.container{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--pad);
}
.narrow{ max-width: calc(62ch + var(--pad) * 2); }

.section{ padding: clamp(88px, 11vw, 150px) 0; }
.section--alt{ background:var(--bg-alt); }

/* em px, não em ch: o ch é medido no corpo de texto e estrangula o título */
.sec-head{ max-width:860px; margin-bottom: clamp(44px, 6vw, 72px); }
.center{ text-align:center; margin-inline:auto; }

/* ── tipografia ────────────────────────────────── */
.h2{
  font-size: clamp(30px, 4.2vw, 46px);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:600;
}
.lead{
  margin-top:18px;
  font-size: clamp(17px, 1.7vw, 19px);
  color:var(--text-mid);
  max-width:52ch;
}
.prose{
  margin-top:24px;
  color:var(--text-mid);
  font-size: clamp(17px, 1.7vw, 19px);
  max-width:62ch;
}

/* ── botões ────────────────────────────────────── */
.btn{
  --btn-py: 14px;
  --btn-px: 26px;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--btn-py) var(--btn-px);
  border:1px solid transparent;
  border-radius:10px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn--sm{ --btn-py:10px; --btn-px:18px; font-size:14px; }

.btn--primary{
  color:#180A02;
  /* Gradiente laranja→âmbar deslizando em loop de 6s. As duas pontas usam a
     mesma cor (--accent-deep) para a volta do loop não dar salto visível. */
  background-image:linear-gradient(100deg,
    var(--accent-deep) 0%,
    var(--accent)      25%,
    var(--accent-soft) 50%,
    var(--accent)      75%,
    var(--accent-deep) 100%);
  background-size:300% 100%;
  background-position:0% 50%;
  animation: btn-flow 6s linear infinite;
  /* sombra difusa: halo largo e de baixa opacidade em vez de um bloco
     deslocado logo abaixo do botão */
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
              0 10px 34px -14px rgba(255,107,26,.42),
              0 3px 16px -8px rgba(0,0,0,.5);
}
@keyframes btn-flow{
  from{ background-position:  0% 50%; }
  to  { background-position:-200% 50%; }
}
.btn--primary:hover{
  animation-duration:3.4s;            /* acelera de leve no hover */
  transform:translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset,
              0 18px 46px -16px rgba(255,107,26,.55),
              0 5px 20px -10px rgba(0,0,0,.55);
}
.btn--primary:active{ transform:translateY(0); }

/* ── preenchimento radial a partir do cursor ("origin button") ──
   O gradiente laranja→âmbar continua sendo o estado de repouso; este
   círculo claro entra por cima só no hover/foco.
   --fx/--fy = ponto onde o cursor entrou (definidos pelo JS);
   --fd      = diâmetro que cobre o canto mais distante desse ponto. */
.btn--fill{
  --fx: 50%;
  --fy: 50%;
  --fd: 320px;
}
.btn--fill::before{
  content:"";
  position:absolute; z-index:-1;
  left:var(--fx); top:var(--fy);
  width:var(--fd); height:var(--fd);
  margin-left: calc(var(--fd) / -2);
  margin-top:  calc(var(--fd) / -2);
  border-radius:50%;
  background:#FFF4E6;                 /* âmbar bem claro, quase branco */
  transform:scale(0);
  will-change:transform;
  /* volta (encolher) um pouco mais rápida que a ida */
  transition: transform 380ms cubic-bezier(.16,1,.3,1);
}
.btn--fill.is-filled::before{
  transform:scale(1);
  transition-duration:500ms;
}
/* o texto escurece junto com o preenchimento */
.btn--fill.is-filled{ color:#140800; }

/* o brilho que varre briga com o círculo branco: sobre o preenchimento
   ele não aparece e, na saída, riscaria o botão duas vezes */
.btn--fill:hover::after{ animation:none; }

.btn--fill:active{ transform:translateY(-1px) scale(.985); }

/* brilho que varre uma única vez, da esquerda pra direita */
.btn--primary::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    transparent 20%,
    rgba(255,255,255,.34) 48%,
    transparent 76%);
  transform:translateX(-115%);
}
.btn--primary:hover::after{
  animation: sweep 620ms var(--ease) forwards;
}
@keyframes sweep{
  from{ transform:translateX(-115%); }
  to  { transform:translateX(115%); }
}

/* cápsula: mesmo botão, raio total — usado nos CTAs que abrem uma seção,
   onde o retângulo de 10px competiria com o título grande logo acima */
.btn--pill{ --btn-py:13px; --btn-px:28px; border-radius:999px; }

.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:rgba(255,255,255,.18);
}
.btn--ghost:hover{
  border-color:rgba(255,146,71,.5);
  background:rgba(255,107,26,.07);
  transform:translateY(-1px);
}

/* ══════════════ NAVBAR ══════════════ */
/* a barra é só o posicionador; a cápsula envolve APENAS os links do centro.
   Logo (esquerda) e CTA (direita) ficam soltos sobre a página. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding: var(--nav-top) var(--pad) 0;
  pointer-events:none;
}
/* com a cápsula reduzida ao meio, logo e CTA perdem o fundo que os separava
   do conteúdo; este véu no topo devolve a legibilidade quando a página rola */
.nav::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height: calc(var(--nav-gap) + 46px);
  background:linear-gradient(to bottom,
    rgba(10,8,7,.97) 0%,
    rgba(10,8,7,.95) 52%,
    rgba(10,8,7,.72) 76%,
    rgba(10,8,7,0)   100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 66%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 66%, transparent 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:0;
  transition:opacity 300ms var(--ease);
}
.nav.is-scrolled::before{ opacity:1; }

.nav__inner{
  pointer-events:auto;
  height:var(--nav-h);
  max-width:1320px; margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap: clamp(16px, 2.4vw, 40px);
  position:relative;
}
.nav__brand{
  display:flex; align-items:center; gap:11px;
  font-size:19px; font-weight:600; letter-spacing:-.03em;
  justify-self:start;
}
/* o arquivo foi recortado na caixa do desenho, então a altura aqui é a
   altura do símbolo de verdade — 24px numa barra de 64px deixa 20px de
   respiro acima e abaixo, e casa com a caixa de linha do texto ao lado */
.nav__logo{
  flex:none;
  height:24px;
  width:auto;
}
/* ── a cápsula ─────────────────────────────────── */
.nav__links{
  display:flex; gap: clamp(22px, 2.2vw, 32px);
  justify-self:center;
  padding: 11px clamp(20px, 1.9vw, 28px);

  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(135deg, rgba(10,10,10,.78) 0%, rgba(26,21,18,.78) 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 14px 34px -20px rgba(0,0,0,.9);
  transition: background-color 260ms var(--ease),
              border-color 260ms var(--ease),
              box-shadow 260ms var(--ease);
}
.nav.is-scrolled .nav__links{
  background:linear-gradient(135deg, rgba(10,10,10,.94) 0%, rgba(26,21,18,.94) 100%);
  border-color:rgba(255,255,255,.13);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 44px -22px rgba(0,0,0,1);
}
.nav__links a{
  position:relative;
  font-size:14.5px; line-height:1.2; color:var(--text-mid);
  transition:color var(--dur) var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__actions{ justify-self:end; display:flex; align-items:center; gap:12px; }

.nav__burger{
  display:none;
  width:40px; height:40px;
  background:none; border:1px solid var(--line); border-radius:9px;
  padding:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__burger span{
  display:block; width:17px; height:1.5px; background:var(--text);
  border-radius:2px;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* painel mobile */
.mnav{
  position:fixed; top:0; right:0; z-index:99;
  width:min(320px, 84vw); height:100dvh;
  background:rgba(14,11,9,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-left:1px solid var(--line);
  padding: calc(var(--nav-gap) + 28px) 28px 32px;
  transform:translateX(102%);
  transition:transform 300ms var(--ease);
  visibility:hidden;
}
.mnav.is-open{ transform:translateX(0); visibility:visible; }
.mnav__links{ display:flex; flex-direction:column; gap:6px; }
.mnav__links a{
  padding:13px 0;
  font-size:17px; color:var(--text-mid);
  border-bottom:1px solid var(--line-soft);
  transition:color var(--dur) var(--ease);
}
.mnav__links a:hover{ color:var(--text); }
.mnav__cta{
  margin-top:22px; border-bottom:none; color:#180A02 !important;
}
.mnav__scrim{
  position:fixed; inset:0; z-index:98;
  background:rgba(0,0,0,.55);
  opacity:0; transition:opacity 280ms var(--ease);
}
.mnav__scrim.is-on{ opacity:1; }

/* ══════════════ HERO ══════════════ */
.hero{
  /* largura da coluna da imagem — a coluna de texto se limita ao que sobra,
     então nunca passa por baixo da ampulheta */
  --media-w: min(33vw, 500px);

  /* inclinação da ampulheta. Positivo = para a DIREITA: as linhas de vento
     da imagem vêm da esquerda, então a ampulheta cede ao empurrão.
     O scale compensa a diagonal: girada, a imagem ocuparia ~22% a mais de
     largura e encostaria nas bordas da coluna — com .82 ela cabe inteira,
     com respiro, e a fumaça do topo não corta. */
  --tilt:       10deg;
  --tilt-scale: .82;

  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:var(--nav-gap);
  overflow:hidden;
}
/* a borda direita da imagem acompanha a borda direita do .container,
   então o respiro à direita fica igual ao respiro à esquerda do texto */
.hero__media{
  position:absolute;
  top: calc(var(--nav-gap) + clamp(20px, 4vh, 48px));
  bottom: clamp(28px, 6vh, 64px);
  right: max(var(--pad), calc((100% - 1320px) / 2 + var(--pad)));
  width: var(--media-w);
  pointer-events:none;
}
.hero__media img,
.hero__sand{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* contain: a ampulheta nunca é cortada, sobra margem em volta */
  object-fit:contain;
  object-position:center;
  /* MESMO transform nos dois: a areia cai no eixo da ampulheta inclinada */
  transform: rotate(var(--tilt)) scale(var(--tilt-scale));
  transform-origin:50% 50%;
  /* O PNG já traz tudo gravado no alpha: preto convertido em transparência
     (sem retângulo sobre o fundo) e as quatro bordas dissolvidas — por isso
     a fumaça se esvai no topo em vez de cortar reto. Nada de mask aqui. */
}
/* o canvas cobre a MESMA caixa da imagem; o JS calcula onde, dentro dela,
   o object-fit:contain desenhou a ampulheta e posiciona as partículas ali */
/* fill, e não contain: o canvas já é criado no tamanho exato da caixa,
   e um object-fit herdado do seletor acima colocaria tarja nele */
.hero__sand{ pointer-events:none; object-fit:fill; }

/* respiração de 4s — brilho pulsante muito sutil sobre a ampulheta */
.hero__glow{
  position:absolute; top:50%; left:50%;
  width:72%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,107,26,.22) 0%, rgba(255,107,26,0) 68%);
  mix-blend-mode:screen;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.42; transform:translate(-50%,-50%) scale(.97); }
  50%    { opacity:.85; transform:translate(-50%,-50%) scale(1.03); }
}
/* garante contraste do texto sobre a área da imagem */
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, var(--bg) 0%, rgba(10,8,7,.55) 34%, transparent 62%);
}

/* o hero usa um container próprio, mais largo que o resto do site,
   para o título caber em duas linhas ao lado da imagem */
.hero__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  min-height: calc(100svh - var(--nav-gap));
  padding-block: 40px 32px;
}
/* sem os blocos de números, a coluna é só o bloco de texto — ela se
   centraliza no eixo vertical do hero em vez de esticar até a base */
.hero__copy{ max-width:min(1000px, 80%); }

/* eyebrow: só o nome da marca, sem risco ao lado */
.eyebrow{
  /* maior que antes, o eyebrow precisa de mais respiro até o título
     para continuar lendo como sobretítulo e não como primeira linha */
  margin-bottom: clamp(30px, 3.7vw, 48px);
}
.eyebrow__text{
  /* mesma família e mesmo tracking largo em caixa alta; só o corpo cresce */
  font-size: clamp(13.5px, 1.05vw, 16.5px);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--text-mid);
}

.hero__title{
  /* o tracking mais solto (-.02em) alargou as linhas; o teto cai para 45px
     para o título não encostar na ampulheta em 1920 */
  font-size: clamp(32px, 2.8vw, 45px);
  line-height:1.16;
  letter-spacing:-.02em;
  font-weight:500;
  color:#D9CEC4;
}
/* as três frases têm a mesma hierarquia: uma por linha, mesmo tamanho e peso */
.hero__line{ display:block; }
/* o verbo final fecha cada frase: mais peso e um branco levemente quente.
   Sem laranja aqui — o acento já é do botão e da ampulheta; três palavras
   laranja empilhadas brigariam com eles. */
.hero__title em{
  font-style:normal;
  font-weight:700;
  color:#FCF6F0;
}
.hero__sub{
  margin-top:26px;
  font-size: clamp(16px, 1.75vw, 18.5px);
  line-height:1.6;
  color:var(--text-mid);
  max-width:52ch;
}
/* com um botão só, a linha do CTA ficou mais curta — o respiro acima dela
   aumenta um pouco para o bloco não parecer comprimido no meio */
.hero__cta{ margin-top:42px; display:flex; flex-wrap:wrap; gap:14px; }

.hero__note{
  margin-top:30px;
  font-size:12.5px;
  color:var(--text-dim);
  max-width:56ch;
}

/* entrada: fade + leve subida, stagger via data-delay no JS */
.reveal{
  opacity:0; transform:translateY(16px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* entrada no scroll */
.reveal-on-scroll{
  opacity:0; transform:translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal-on-scroll.is-in{ opacity:1; transform:none; }

/* ══════════════ SEÇÃO 1 — PILARES ══════════════
   O cartão é uma cena, não uma pilha: proporção fixa 4:5, o objeto ocupa
   a caixa inteira reduzido a 65% e o texto mora por cima, encostado na
   base, sobre um degradê que sobe do rodapé. A entrada e o hover têm as
   curvas da referência — expo de saída na entrada, molas de verdade
   (rigidez/amortecimento) no objeto e na cápsula que segue o ponteiro. */
.section--pillars{
  --ease-expo: cubic-bezier(.16, 1, .3, 1);

  /* a seção ocupa a tela e centraliza o conteúdo nela */
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block: clamp(64px, 7vw, 80px);
  border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.28);
}

/* ── cabeçalho: 12 colunas, 4 para a etiqueta, 8 para o discurso ── */
.pil__head{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap: clamp(32px, 3.4vw, 48px);
  margin-bottom: clamp(48px, 6vw, 80px);
  perspective:1200px;
}
.pil__head-label{ grid-column:span 4; }
.pil__head-copy{ grid-column:span 8; }

.pil__eyebrow{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-mid);
  opacity:.5;
}
.pil__h2{
  font-size: clamp(28px, 3.6vw, 48px);
  line-height:1.18;
  letter-spacing:-.025em;
  font-weight:500;
  max-width:56rem;
  margin-bottom:32px;
}
.pil__lead{
  font-size: clamp(14px, 1.4vw, 16px);
  line-height:1.62;
  font-weight:300;
  color:var(--text-mid);
  opacity:.75;
  max-width:42rem;
}

/* ── a grade dos cartões ──────────────────────
   gap fixo de 16px e perspectiva no contêiner: sem ela a inclinação de
   15° da entrada não tem profundidade e vira só um achatamento. */
.pillars{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  perspective:1200px;
}

/* Borda contínua, cantos suaves e a placa um degrau acima do fundo da
   seção. Sem o desfoque de fundo de antes: sobre uma superfície opaca
   ele não tinha o que borrar e só custava composição.
   O acento vem todo de --accent-rgb (o #FF6B1A do botão do hero), em
   opacidade baixa — presente na moldura, longe de néon. */
.pcard{
  --dly: calc(.2s + var(--i, 0) * .1s);
  position:relative;
  display:block;
  aspect-ratio:4 / 5;
  border:1px solid rgb(var(--accent-rgb) / .24);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 58%),
    var(--surface);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 20px 44px -30px rgba(0,0,0,.95);
  overflow:hidden;
  transform-style:preserve-3d;
  transition: border-color 320ms var(--ease),
              box-shadow 320ms var(--ease);
}
.pcard:hover,
.pcard:focus-visible{
  border-color:rgb(var(--accent-rgb) / .38);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 26px 56px -30px rgba(0,0,0,1);
}

/* ── o objeto ─────────────────────────────────
   Camada de fundo do cartão inteiro. Em repouso fica a 65% e translúcido;
   no hover cresce até 95%, clareia e deriva atrás do ponteiro. Os valores
   de repouso estão aqui no CSS para que, sem JS, o cartão já nasça certo. */
/* O glow projetado: fica ATRÁS do objeto (mesmo z-index da camada do
   desenho, mas antes dele na ordem do documento) e um pouco abaixo do
   centro, como a sombra que a peça lança no fundo do cartão. */
.pcard::before{
  content:"";
  position:absolute;
  left:50%; top:70%;
  width:82%; height:26%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgb(var(--accent-rgb) / .30) 0%,
    rgb(var(--accent-rgb) / .11) 44%,
    rgb(var(--accent-rgb) / 0)   72%);
  filter:blur(24px);
  opacity:.85;
  pointer-events:none;
  transition:opacity 320ms var(--ease);
}
.pcard:hover::before{ opacity:1; }

/* Recorta 12% da base em vez de usar translateY: sem transform, este span
   não vira contexto de empilhamento — e é isso que deixa o mix-blend-mode
   da imagem ainda enxergar o fundo do cartão. */
/* Sem z-index aqui: num elemento posicionado, até o z-index:0 cria
   contexto de empilhamento — e isso isolaria o mix-blend-mode da imagem,
   que deixaria de enxergar o fundo do cartão. A ordem continua correta
   porque .pcard__body vem depois no DOM e tem z-index:1. */
.pcard__art{
  position:absolute;
  inset:0 0 12% 0;
  display:flex; align-items:center; justify-content:center;
}
.pcard__img{
  width:88%;
  /* obrigatório: os atributos width/height do HTML entram como dica de
     estilo e, sem isto, a altura de 1400px venceria o aspect-ratio */
  height:auto;
  /* A janela é mais larga (1,36) que o PNG (0,80), então o cover corta em
     cima e embaixo; o object-position escolhe a faixa 12%–71% do arquivo,
     que é onde mora só a arte. Fora dela ficam a moldura, o badge e o
     texto que vêm desenhados dentro do próprio PNG. */
  aspect-ratio:1.36;
  object-fit:cover;
  object-position:50% 29%;
  /* O fundo do arquivo é preto puro e sem canal alfa. No modo screen o
     preto vira exatamente o fundo do cartão e sobra só o desenho — sem
     retângulo recortado aparecendo por baixo. */
  mix-blend-mode:screen;
  /* O recorte ainda pega um resto do painel do mockup, que não é preto
     puro — no screen ele viraria um retângulo fantasma em volta da arte.
     As duas rampas cruzadas dissolvem as quatro bordas, e o desenho passa
     a flutuar no cartão em vez de morar numa caixa. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  opacity:.85;
  transform:scale(1);
  transform-origin:50% 50%;
  transition:opacity 700ms var(--ease);
  will-change:transform, opacity;
}
.pcard:hover .pcard__img,
.pcard:focus-visible .pcard__img{ opacity:1; }

/* respiração de 5s: o único movimento em repouso */
.obj__breath{ animation: obj-breathe 5s ease-in-out infinite; }
@keyframes obj-breathe{
  0%,100%{ opacity:.55; }
  50%    { opacity:.95; }
}

/* ── o texto, encostado na base ───────────────
   min-height em vez de height fixa: o degradê cobre a metade de baixo
   como no original, mas cresce se o título quebrar em mais linhas — o
   texto nunca sai de cima do véu e perde contraste. */
.pcard__body{
  position:absolute; inset:auto 0 0 0; z-index:1;
  min-height:50%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(18px, 2.1vw, 32px);
  background:linear-gradient(to top,
    rgba(10,8,7,.92) 0%,
    rgba(10,8,7,.55) 32%,
    rgba(10,8,7,.14) 68%,
    rgba(10,8,7,0) 100%);
  pointer-events:none;
}
.pcard__title{
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.2;
}
.pcard__text{
  margin-top:8px;
  font-size: clamp(13px, 1.05vw, 14px);
  line-height:1.62;
  font-weight:300;
  color:var(--text-mid);
  opacity:.75;
}

/* ── cápsula que segue o ponteiro ─────────────
   Posição e escala vêm do JS (mola); aqui fica só a aparência. */
.pcard__pill{
  position:absolute; top:0; left:0; z-index:6;
  display:flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--accent);
  color:#180A02;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.8);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size:10px; font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}
.pcard__pill svg{
  width:13px; height:13px;
  fill:none; stroke:currentColor;
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}

/* ── entrada presa ao scroll ──────────────────
   Sobe 100px inclinado 15°, a 90% do tamanho e desfocado, e assenta em
   1,6s com saída exponencial. O escalonamento de 0,1s por cartão sai do
   --i no HTML, com 0,2s de espera antes do primeiro. */
.pillars.is-armed .pcard,
.pil__head.is-armed .pil-in{
  opacity:0;
  transform:translateY(100px) rotateX(15deg) scale(.9);
  filter:blur(10px);
}
.pil-in{ --dly: calc(.2s + var(--i, 0) * .1s); }

.pillars.is-armed .pcard.is-in{
  opacity:1;
  transform:none;
  filter:blur(0px);
  transition: opacity 1.6s var(--ease-expo) var(--dly),
              transform 1.6s var(--ease-expo) var(--dly),
              filter 1.6s var(--ease-expo) var(--dly);
}
/* o cabeçalho assenta em 0,8s — metade do tempo dos cartões */
.pil__head.is-armed .pil-in.is-in{
  opacity:1;
  transform:none;
  filter:blur(0px);
  transition: opacity .8s var(--ease-expo) var(--dly),
              transform .8s var(--ease-expo) var(--dly),
              filter .8s var(--ease-expo) var(--dly);
}

/* o título entra palavra a palavra, saindo de um desfoque de 12px */
.pil-word{ display:inline-block; }
.pil__head.is-armed .pil-word{ opacity:0; filter:blur(12px); }
.pil__head.is-armed .pil-word.is-in{
  opacity:1;
  filter:blur(0px);
  transition: opacity .6s ease-out calc(var(--i, 0) * .05s),
              filter .6s ease-out calc(var(--i, 0) * .05s);
}

/* ══════════════ SEÇÃO 2 — A DOR ══════════════ */
/* mais larga que a .narrow do resto: a cena precisa de linha longa. As
   colunas de leitura (o baralho, a pilha de cartas) se estreitam por conta
   própria dentro dela. */
.pain__wrap{ max-width: calc(1000px + var(--pad) * 2); }
.pain__h{ max-width:22ch; }

/* ── a cena: baralho de cards preso ao scroll ───
   Os três cards ocupam o mesmo ponto e o de cima sai revelando o de baixo,
   conforme a página rola. Quem fixa é o sticky do browser — mesmo padrão do
   o do fluxo, sem position:fixed e sem sequestrar o scroll, então subir a
   página desfaz sozinho e o dedo do celular continua rolando normalmente.

   O que está escrito aqui embaixo é o ESTADO SEM JS: os três cards numa
   coluna, um depois do outro, todos legíveis. O empilhamento só existe
   dentro de .is-live — assim nenhum card nasce escondido atrás de outro
   esperando um scroll que talvez nunca venha. */
.deck{
  width:min(560px, 100%);
  margin-inline:auto;
}
.deckpin__stage{
  display:flex; flex-direction:column;
  gap: clamp(28px, 3.4vw, 46px);
}
/* o título divide a coluna com o baralho: mesma largura, mesma borda
   esquerda. Centralizado sozinho, com o card no meio da página, o bloco
   lia como duas peças soltas. O texto continua alinhado à esquerda, como
   em todos os outros h2 do site. */
.deckpin__stage .pain__h{
  width:min(560px, 100%);
  max-width:none;
  margin-inline:auto;
}
.deck__cards{
  display:flex; flex-direction:column;
  gap: clamp(16px, 2vw, 24px);
}
.deck__dots{ display:none; }

/* ── o card ───────────────────────────────────
   Gradiente na diagonal: o canto de cima puxa o laranja da marca e ele se
   dissolve no fundo do site antes da metade. A carga fica em .58 e não
   cheia de propósito — é o ponto em que o texto claro ainda passa com
   folga de contraste (~5.4:1) sobre o canto mais quente. */
.dcard{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  gap: clamp(26px, 3.6vw, 44px);
  min-height: clamp(208px, 26vh, 264px);
  padding: clamp(24px, 3vw, 34px);
  border-radius:16px;
  border:1px solid rgb(var(--accent-rgb) / .22);
  background:
    linear-gradient(150deg,
      rgb(var(--accent-rgb) / .58) 0%,
      rgb(var(--accent-rgb) / .26) 26%,
      rgb(var(--accent-rgb) / .06) 55%,
      rgb(var(--accent-rgb) / 0)   76%),
    linear-gradient(160deg, var(--surface-2) 0%, var(--bg) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 26px 60px -30px rgba(0,0,0,.95),
    0 12px 32px -24px rgb(var(--accent-rgb) / .5);
}
.dcard__label{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text);
}
.dcard__text{
  font-size: clamp(20px, 2.5vw, 27px);
  line-height:1.34;
  letter-spacing:-.025em;
  color:var(--text);
}
/* o clímax pesa mais que os outros dois mesmo parado: é o fim da história */
.dcard--climax{ border-color:rgb(var(--accent-rgb) / .42); }
.dcard--climax .dcard__text{
  font-weight:600;
  font-size: clamp(23px, 3vw, 32px);
  letter-spacing:-.03em;
}

/* ── o indicador da pilha ─────────────────────── */
.deck__dots{
  margin-top: clamp(22px, 2.6vw, 32px);
  gap:9px; justify-content:center;
}
.deck__dot{
  width:34px; height:3px; border-radius:2px;
  background:var(--line);
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.deck__dot.is-on{
  background:var(--accent);
  box-shadow:0 0 10px -2px var(--accent-glow);
}

/* ── armado pelo JS ─────────────────────────────
   A partir daqui é tudo condicionado ao .is-live. */
.deckpin.is-live{
  position:relative;
  /* 3 fatias de ~90vh depois do palco, a mesma proporção do fluxo. A
     última é a demora no clímax: a seção só solta o scroll depois dela, e é
     isso que impede alguém de emendar no "E é aqui que o dinheiro some". */
  height: calc(100svh + 270vh);
}
.deckpin.is-live .deckpin__stage{
  position:sticky;
  top:var(--nav-gap);
  height: calc(100svh - var(--nav-gap));
  justify-content:center;
}
/* o baralho: o primeiro card fica no fluxo e é ele que dá altura à pilha;
   os outros dois se sobrepõem em absoluto, no mesmo ponto. Sem inset:0 —
   cada card guarda a própria altura em vez de ser esticado pelo maior. */
.deckpin.is-live .deck__cards{
  position:relative;
  display:block;
}
.deckpin.is-live .dcard{
  position:absolute;
  left:0; right:0; top:0;
  opacity:var(--op, 1);
  transform: translate3d(0, calc(var(--y, 0) * 1px), 0) scale(var(--s, 1));
  will-change: transform, opacity;
}
.deckpin.is-live .dcard:first-child{ position:relative; }
/* quem está por cima é fixo: o card que sai continua na frente enquanto
   desvanece, senão ele atravessaria o de baixo no meio da troca */
.deckpin.is-live .dcard:nth-child(1){ z-index:3; }
.deckpin.is-live .dcard:nth-child(2){ z-index:2; }
.deckpin.is-live .dcard:nth-child(3){ z-index:1; }
/* empilhados, os cards de trás passam ~44px abaixo do da frente (é o que dá
   a leitura de baralho). Os tracinhos precisam sair de baixo deles. */
.deckpin.is-live .deck__dots{
  display:flex;
  margin-top: clamp(60px, 6.4vw, 78px);
}

/* ── as consequências: pilha de cartas (sticky puro) ──
   Cada carta gruda num top um pouco maior que a anterior, então a seguinte
   sobe e para EM CIMA da anterior deixando só a pontinha (--peek) à mostra.
   Quem faz tudo é o position:sticky do browser: não há JS de scroll nenhum
   aqui, e por isso subir a página desfaz a pilha sozinho.

   Nada de altura falsa: a coluna já é alta porque cada carta ocupa ~82vh,
   e é essa altura que vira o percurso de rolagem entre uma e outra. */
.pain__h3{
  margin-top: clamp(76px, 9.5vw, 124px);
  font-size: clamp(22px, 2.7vw, 30px);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.2;
  /* mesma coluna das cartas: o título encabeça a pilha, não o container */
  width:min(660px, 100%);
  margin-inline:auto;
}

/* o ângulo da varredura. Registrado para poder ser animado — sem @property
   um custom property não interpola, e a borda ficaria parada. Onde o
   registro não existir, a animação simplesmente não roda e sobra um brilho
   estático no contorno: degrada sem quebrar. */
@property --ang{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.conseq{
  --peek: 16px;                                   /* a pontinha que sobra */
  --stack-top: calc(var(--nav-gap) + 20px);
  --card-h: min(82vh, 640px);
  --vao: clamp(20px, 3vw, 34px);
  margin-top: clamp(26px, 3.2vw, 38px);
  display:flex; flex-direction:column;
  gap:var(--vao);
  width:min(660px, 100%);
  margin-inline:auto;
}
/* Quanto tempo cada carta fica em foco é a distância até a próxima chegar —
   uma altura de carta mais o vão. A última não tem "próxima", e sem fôlego
   equivalente o sticky de todas solta quase junto: o degrau desmonta e a
   quarta mal aparece.

   O fôlego é um espaçador, e não padding-bottom, porque o bloco contentor de
   um sticky é a CONTENT BOX do flex container — padding não conta, e a folga
   simplesmente não teria efeito nenhum sobre o alcance das cartas. */
.conseq::after{
  content:"";
  flex:none;
  height: calc(var(--card-h) + var(--vao));
}

.conseq__item{
  position:sticky;
  top:var(--stack-top);
  /* conteúdo junto e centrado na vertical. Com space-between numa carta de
     640px o ícone ficava sozinho lá em cima e o texto lá embaixo, com um
     vão morto no meio — parecia carta inacabada, não cartaz. */
  display:flex; flex-direction:column; justify-content:center;
  gap: clamp(20px, 2.4vw, 30px);
  min-height:var(--card-h);
  padding: clamp(28px, 3.4vw, 42px);
  border:1px solid rgb(var(--accent-rgb) / .2);
  border-radius:18px;
  /* Gradiente um degrau acima dos cartões de features: um clarão quente no
     canto de cima somado à diagonal que se dissolve no fundo do site. A
     última camada é opaca de propósito — numa pilha, carta translúcida
     deixa a de baixo aparecer através dela. */
  background:
    radial-gradient(86% 62% at 6% -4%,
      rgb(var(--accent-rgb) / .38) 0%,
      rgb(var(--accent-rgb) / 0)  62%),
    linear-gradient(146deg,
      rgb(var(--accent-rgb) / .52)  0%,
      rgb(var(--accent-rgb) / .22) 17%,
      rgb(var(--accent-rgb) / .05) 38%,
      rgb(var(--accent-rgb) / 0)   58%),
    linear-gradient(160deg, var(--surface-2) 0%, var(--bg) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -18px 40px -34px rgb(var(--accent-rgb) / .5),
    0 34px 70px -34px rgba(0,0,0,.95);
}
/* cada carta um degrau mais abaixo: é a diferença entre os tops que vira a
   pontinha da carta de baixo */
.conseq__item:nth-child(2){ top: calc(var(--stack-top) + var(--peek)); }
.conseq__item:nth-child(3){ top: calc(var(--stack-top) + var(--peek) * 2); }
.conseq__item:nth-child(4){ top: calc(var(--stack-top) + var(--peek) * 3); }

/* ── o brilho que percorre o contorno ──────────
   Anel de 1px: o conic-gradient pinta a caixa inteira e a máscara apaga
   tudo menos a moldura (a de fora menos a de dentro). Girando o ângulo, o
   ponto claro dá a volta na borda. inset:-1px para o anel cair EM CIMA da
   borda estática, não um pixel para dentro dela. */
.conseq__item::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--ang),
    rgb(var(--accent-rgb) / 0)     0deg,
    rgb(var(--accent-rgb) / 0)    58deg,
    rgb(var(--accent-rgb) / .45)  88deg,
    var(--accent-soft)           104deg,
    rgb(var(--accent-rgb) / .38) 124deg,
    rgb(var(--accent-rgb) / 0)   178deg,
    rgb(var(--accent-rgb) / 0)   360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation: borda-varre 7s linear infinite;
  pointer-events:none;
}
/* as quatro entram defasadas: a pilha inteira piscando em uníssono viraria
   um letreiro, e o pedido era sutil */
.conseq__item:nth-child(2)::after{ animation-delay:-1.75s; }
.conseq__item:nth-child(3)::after{ animation-delay:-3.5s; }
.conseq__item:nth-child(4)::after{ animation-delay:-5.25s; }

@keyframes borda-varre{ to{ --ang:360deg; } }

.conseq__icon{
  width:30px; height:30px;
  fill:none;
  /* claro, não laranja: neste card o ícone fica sobre o canto quente do
     gradiente, e o laranja sumiria dentro dele */
  stroke:var(--text);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  flex:none;
}
.conseq__title{
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.1;
  margin-bottom:14px;
}
.conseq__text{
  font-size: clamp(16.5px, 1.9vw, 20px);
  line-height:1.55;
  letter-spacing:-.015em;
  color:var(--text-mid);
  max-width:40ch;
}

/* ── o fecho ──────────────────────────────────── */
.pain__final{
  margin-top: clamp(84px, 10vw, 136px);
  margin-inline:auto;
  max-width:27ch;
  text-align:center;
  font-size: clamp(21px, 2.9vw, 31px);
  line-height:1.38;
  letter-spacing:-.03em;
  font-weight:500;
  color:var(--text);
}

/* ══════════════ SEÇÃO 3 — O FLUXO (cinematográfico) ══════════════
   Um palco só, centralizado, e as quatro capturas se revezam nele. O texto
   fica acima e a trilha de progresso abaixo. Quem fixa é o sticky do
   browser: sem position:fixed, sem sequestrar o scroll — subir a página
   desfaz sozinho. O JS só troca a classe .is-on; toda a animação é
   transition de CSS. */
.flowsec{ padding-bottom: clamp(40px, 5vw, 64px); }

.cine{ position:relative; height:420vh; }
.cine__fixo{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  /* o topo precisa passar por baixo da cápsula do menu, que flutua fixa */
  padding: calc(var(--nav-gap) + 10px) var(--pad) 30px;
  overflow:hidden;
}
/* nada encolhe: sem isto o flex espremia o palco (a soma de texto + palco +
   trilha passa de 100vh em telas baixas) e a captura saía menor do que a
   conta de proporção previa */
.cine__texto,
.cine__palco,
.cine__trilha{ flex:none; }

/* clarão atrás do palco: é o que descola a tela do preto do fundo */
.cine__aura{
  position:absolute; left:50%; top:52%;
  width:min(1180px, 104vw); height:74%;
  transform:translate(-50%, -50%);
  background:radial-gradient(ellipse at center,
    rgb(var(--accent-rgb) / .20) 0%,
    rgb(var(--accent-rgb) / .07) 38%,
    rgb(var(--accent-rgb) / 0)   70%);
  filter:blur(54px);
  pointer-events:none;
}

/* ── o texto da etapa ────────────────────────
   Os quatro ocupam a mesma caixa, empilhados: a altura fixa evita que o
   bloco pule de tamanho quando a descrição da etapa seguinte tem outra
   quantidade de linhas. */
.cine__texto{
  position:relative;
  width:100%; max-width:56ch;
  /* Altura da etapa MAIS ALTA (medida: 141px — título mais descrição de três
     linhas). É ela que manda, senão as duas de três linhas transbordam para
     cima e o título vai encostar na cápsula do menu. As de duas linhas
     sobram no topo da caixa de propósito: é esse respiro que impede o palco
     de subir e descer a cada troca de etapa. */
  height:142px;
  margin-bottom:22px;
  display:flex; align-items:flex-end; justify-content:center;
  text-align:center;
}
.cine__item{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  gap:10px;
  opacity:0; transform:translateY(14px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.cine__item.is-on{ opacity:1; transform:translateY(0); }
.cine__titulo{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
}
.cine__desc{
  font-size: clamp(15px, 1.6vw, 17px);
  line-height:1.55;
  color:var(--text-mid);
  max-width:48ch;
}

/* ── o palco ──────────────────────────────────
   Caixa de proporção fixa; cada moldura se encaixa dentro dela pela SUA
   proporção nativa (as capturas vão de 1.60 a 2.63) e fica centrada. Sem
   isso, ou a mais larga ganhava tarja preta ou a mais alta era cortada. */
.cine__palco{
  /* a altura do palco fica explícita porque as molduras precisam dela na
     conta de largura logo abaixo — 16/9.4 escrito como multiplicação */
  --palco-l: min(1080px, 92vw);
  /* 16/9.4 é o teto. Numa tela baixa quem manda é a altura que sobra depois
     do texto, da trilha e dos respiros — 320px é essa reserva, medida. Sem
     este min a moldura passava do palco e era cortada embaixo. */
  --palco-a: min(calc(var(--palco-l) * 9.4 / 16), calc(100svh - 320px));
  position:relative;
  width:var(--palco-l);
  height:var(--palco-a);
}
.cine__tela{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:scale(.965) translateY(18px);
  filter:blur(6px);
  transition: opacity .62s cubic-bezier(.22,1,.36,1),
              transform .62s cubic-bezier(.22,1,.36,1),
              filter .62s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform, filter;
}
.cine__tela.is-on{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }

/* A moldura carrega a proporção EXATA da sua captura, num --ar declarado no
   HTML. Com height:100% e as duas travas de máximo, ela se comporta como um
   object-fit:contain aplicado à caixa inteira: encolhe pela altura quando a
   captura é alta (1.60) e pela largura quando é larga (2.63), sempre dentro
   do palco e sempre sem cortar nem deformar.

   Sem a barra de "janela" aqui de propósito: as capturas já mostram o
   cabeçalho do próprio app, e um chrome falso por cima obrigaria a somar
   34px fixos a uma proporção — a conta deixaria de fechar e a imagem
   estourava o palco. A .frame--hero da economia segue com a barra dela. */
.cine__tela .frame{
  /* encaixa a moldura no palco preservando a proporção da captura: limitada
     pela LARGURA quando a captura é larga (a 2.63 bate nos 100% primeiro) e
     pela ALTURA quando é alta (a 1.60 bateria no fundo antes). É o
     object-fit:contain feito na caixa, e não na imagem — por isso a borda e
     o halo abraçam a captura em vez de uma caixa fixa com sobra dentro. */
  width: min(100%, calc(var(--palco-a) * var(--arn)));
  height:auto;
  aspect-ratio:var(--arn);
  border-color:rgb(var(--accent-rgb) / .16);
  background:linear-gradient(158deg, var(--surface-2) 0%, var(--bg) 100%);
  box-shadow:
    0 44px 96px -30px rgba(0,0,0,.95),
    0 0 0 1px rgb(var(--accent-rgb) / .10),
    0 0 92px -26px var(--accent-glow),
    0 1px 0 rgba(255,255,255,.06) inset;
}
.cine__tela .frame__body{ aspect-ratio:auto; height:100%; }
.cine__tela .frame__body img{ width:100%; height:100%; object-fit:cover; }

/* o fechamento do chamado é o que a operação precisa ver de perto: esta
   entra um pouco maior e com o halo mais quente que as outras três */
.cine__tela--destaque .frame{
  border-color:rgb(var(--accent-rgb) / .32);
  box-shadow:
    0 52px 110px -30px rgba(0,0,0,1),
    0 0 0 1px rgb(var(--accent-rgb) / .20),
    0 0 130px -22px var(--accent-glow),
    0 1px 0 rgba(255,255,255,.09) inset;
}
.cine__tela--destaque.is-on{ transform:scale(1.035) translateY(0); }

/* ── a trilha de progresso ───────────────────── */
.cine__trilha{
  margin-top:24px;
  width:min(1080px, 92vw);
  display:flex; gap:10px; align-items:center;
}
.cine__seg{
  position:relative;
  flex:1; height:2px; border-radius:2px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.cine__seg::after{
  content:"";
  position:absolute; inset:0;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.cine__seg.is-on::after{ transform:scaleX(1); }
/* ══════════════ MOLDURA DAS CAPTURAS ══════════════
   Uma só para as cinco imagens. object-fit:contain: nenhuma captura é
   esticada nem ampliada — o que sobra na caixa vira faixa preta, e como
   as telas do app já são pretas nas bordas, a faixa não aparece. */
.frame{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.95),
              0 1px 0 rgba(255,255,255,.05) inset;
  overflow:hidden;
}
.frame__bar{
  display:flex; gap:7px; align-items:center;
  padding:11px 14px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.02);
}
.frame__bar i{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.13);
}
.frame__body{
  aspect-ratio:16/10;
  /* mesmo preto do fundo do app: quando a proporção da captura não bate
     com a da moldura, a faixa que sobra some em vez de virar tarja */
  background:#0A0A0B;
}
.frame__body img{
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
}

/* ══════════════ SEÇÃO 4 — ECONOMIA ══════════════ */
.section--econ{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(88% 66% at 50% 0%, rgba(255,107,26,.09) 0%, transparent 62%),
    var(--bg-alt);
}
.econ__head{ max-width:840px; margin-inline:auto; text-align:center; }
.econ__eyebrow{ margin-bottom:20px; }
.econ__lead{ margin-inline:auto; max-width:58ch; }

.econ__stage{
  position:relative;
  margin-top: clamp(46px, 5.5vw, 78px);
  /* entrada por scrub: --e vem do JS (0..1) */
  opacity:var(--e, 1);
  transform:scale(calc(.96 + var(--e, 1) * .04));
  will-change:opacity, transform;
}
.econ__glow{
  position:absolute; left:50%; top:52%;
  width:86%; height:76%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(255,107,26,.34) 0%, rgba(255,107,26,0) 70%);
  filter:blur(50px);
  pointer-events:none;
}
.tilt{ perspective:1500px; }
.frame--hero{
  position:relative;
  max-width:1180px; margin-inline:auto;
  box-shadow: 0 60px 120px -52px rgba(0,0,0,1),
              0 0 0 1px rgba(255,146,71,.09),
              0 0 70px -34px var(--accent-glow),
              0 1px 0 rgba(255,255,255,.06) inset;
  transition: transform 300ms var(--ease);
  will-change:transform;
}
/* proporção nativa do arquivo: aqui não sobra faixa nenhuma */
.frame--hero .frame__body{ aspect-ratio: 1806 / 871; }

.econ__cta{ margin-top: clamp(34px, 4vw, 50px); text-align:center; }

/* ══════════════ SEÇÃO 5 — MÓDULOS ══════════════ */
/* Bento: blocos de tamanhos diferentes em vez de oito caixas iguais. A
   estrutura vem da seção de números do site de referência — um bloco alto e
   colorido à esquerda, um bloco maior ao centro e, à direita, dois
   empilhados. A fileira de baixo acomoda os quatro módulos restantes, que
   não cabiam no ritmo de quatro blocos do original.

   Grade de 4 colunas × 3 fileiras = 12 células, e os oito blocos preenchem
   exatamente essas 12: destaque 2, largo 4, os outros seis 1 cada. */
.grid-mod{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:minmax(154px, auto);
  gap: clamp(12px, 1.4vw, 18px);
}

.mod{
  display:flex; flex-direction:column;
  padding: clamp(22px, 2.4vw, 30px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.032) 0%, rgba(255,255,255,0) 62%),
    var(--surface);
  transition: border-color 260ms var(--ease), background-color 260ms var(--ease);
}
.mod:hover{ border-color:rgb(var(--accent-rgb) / .28); }

/* ── as posições do bento ─────────────────────
   Só os quatro blocos do bloco de cima são colocados à mão; os outros
   quatro caem sozinhos na fileira 3, na ordem em que estão no HTML. */
.mod--destaque{ grid-column:1;          grid-row:1 / span 2; }  /* Preventivos */
.mod--largo   { grid-column:2 / span 2; grid-row:1 / span 2; }  /* Governança  */
.mod--topo    { grid-column:4;          grid-row:1; }           /* Estoque     */
.mod--base    { grid-column:4;          grid-row:2; }           /* Inspeções   */

/* Nos dois blocos grandes o ícone fica no topo e o par título+descrição
   desce junto para o rodapé. É o margin-top:auto no título que faz isso —
   um justify-content:space-between espalharia os TRÊS filhos e abriria um
   vão morto entre o título e a descrição. */
.mod--destaque .mod__title,
.mod--largo .mod__title{ margin-top:auto; }
.mod--destaque .mod__title,
.mod--largo .mod__title{ font-size: clamp(19px, 2vw, 24px); margin-bottom:9px; }
.mod--destaque .mod__text,
.mod--largo .mod__text{ font-size: clamp(15px, 1.5vw, 16.5px); max-width:34ch; }
.mod--destaque .mod__icon,
.mod--largo .mod__icon{ width:32px; height:32px; }

/* ── o bloco de destaque ──────────────────────
   Único bloco cheio de laranja da seção. O texto vira o escuro do site (o
   mesmo --bg do fundo da página), que sobre o laranja da marca passa com
   folga de contraste — é a mesma inversão que o botão primário já usa. */
.mod--destaque{
  border-color:rgb(var(--accent-rgb) / .5);
  background:linear-gradient(152deg,
    var(--accent-soft) 0%,
    var(--accent)     44%,
    var(--accent-deep) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 26px 60px -32px rgb(var(--accent-rgb) / .65);
}
.mod--destaque:hover{ border-color:rgb(var(--accent-rgb) / .7); }
.mod--destaque .mod__icon{ stroke:var(--bg); }
.mod--destaque .mod__title{ color:var(--bg); }
.mod--destaque .mod__text{ color:rgb(10 8 7 / .78); }

.mod__icon{
  width:26px; height:26px;
  fill:none; stroke:var(--accent);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:18px;
  flex:none;
}
.mod__title{ font-size:16.5px; font-weight:600; letter-spacing:-.018em; margin-bottom:7px; }
.mod__text{ font-size:14.5px; line-height:1.55; color:var(--text-dim); }

.grid-mod__note{
  margin-top:28px;
  font-size:14.5px;
  color:var(--text-dim);
}

/* ══════════════ SEÇÃO 5B — O QUE A LESSTIME RESOLVE ══════════════ */
.section--solve{
  background:
    radial-gradient(70% 46% at 50% 0%, rgba(255,107,26,.07) 0%, transparent 64%),
    var(--bg);
}
.solve__head{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  margin-bottom: clamp(38px, 4.6vw, 56px);
}
/* maior e mais apertado que o .h2 padrão: o título é o eixo da seção e
   precisa segurar a centralização sozinho, sem lead abaixo */
.solve__title{
  font-size: clamp(31px, 4.8vw, 58px);
  line-height:1.03;
  letter-spacing:-.032em;
  font-weight:500;
  /* largura suficiente para o título caber numa linha no desktop — o
     entrelinha de 1.03 só se justifica se ele não quebrar */
  max-width:26ch;
}
.solve__cta{ margin-top: clamp(24px, 2.6vw, 32px); }

/* ── o bento ──────────────────────────────────
   Quatro colunas: o primeiro cartão ocupa duas e leva o tratamento âmbar;
   os outros dois ficam neutros, uma coluna cada. */
.bento{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap: clamp(14px, 1.4vw, 20px);
}
.bento__card{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height: clamp(300px, 28vw, 416px);
  padding: clamp(24px, 2.4vw, 32px);
  border:1px solid var(--line);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, var(--surface) 0%, rgba(12,9,8,.6) 100%);
  overflow:hidden;
  transition: border-color 280ms var(--ease);
}
.bento__card:hover{ border-color:rgba(255,146,71,.22); }
.bento__card > *{ position:relative; z-index:1; }

.bento__card--wide{
  grid-column:span 2;
  border-color:rgba(255,146,71,.2);
}
/* no lugar da fotografia da referência, a marca da casa: um banho âmbar
   preso ao canto superior esquerdo, que se apaga antes do texto começar */
.bento__wash{
  position:absolute; inset:0;
  z-index:0;
  background:
    radial-gradient(96% 78% at 4% 0%, rgba(255,107,26,.34) 0%, rgba(255,107,26,.08) 44%, transparent 74%),
    radial-gradient(58% 46% at 84% 96%, rgba(255,146,71,.14) 0%, transparent 70%),
    linear-gradient(162deg, rgba(255,146,71,.08) 0%, transparent 56%);
}
.bento__title{
  font-size: clamp(19.5px, 1.9vw, 24px);
  font-weight:600;
  letter-spacing:-.026em;
  line-height:1.26;
  max-width:20ch;
}
/* ── o objeto ─────────────────────────────────
   Ocupa o vão que sobrava entre o título e o texto: flex:1 come a folga
   do space-between, então a composição continua sendo título em cima,
   texto embaixo — o objeto só habita o meio. */
.bento__art{
  flex:1;
  min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding-block: clamp(12px, 1.6vw, 22px);
}
/* no cartão largo o objeto vai para a direita: o texto tem 22rem de
   largura máxima e a diagonal título → objeto → texto usa a sobra */
.bento__card--wide .bento__art{
  justify-content:flex-end;
  padding-right: clamp(0px, 3vw, 56px);
}
.bento__obj{
  width:auto;
  height: clamp(96px, 11vw, 156px);
  transform:scale(1);
  /* mais lenta e mais macia que o --dur do site: o objeto cresce, não
     estala no lugar — mesma curva dos objetos da seção 2 */
  transition: transform 320ms cubic-bezier(.2, .8, .25, 1);
  will-change:transform;
}
.bento__card--wide .bento__obj{ height: clamp(112px, 13.5vw, 190px); }
.bento__card:hover .bento__obj{ transform:scale(1.09); }

/* ── a paleta dos três objetos de vidro ───────
   Os stops dos gradientes vivem no HTML, mas a COR vem daqui: os tokens da
   marca, os mesmos três do .btn--primary. Antes cada objeto tinha a própria
   paleta em hex ("tom mais dourado", "tom mais quente") e todas partiam de
   cremes — #FFD3A0, #FFE6CB, #FFC48A — que sobre o fundo escuro liam como
   laranja lavado, quase marrom. Agora os três partem do mesmo laranja.

   Vai por classe e não por var() direto no atributo: var() não é
   interpretado em atributo de apresentação do SVG, só em propriedade CSS.

   A estrutura de vidro continua: luz na borda e no topo do corpo, base no
   miolo, profundo no rodapé. Nada chapado — o que mudou foi a matiz. */
.bento__obj .o-luz  { stop-color:var(--accent-soft); }   /* #FF9247 */
.bento__obj .o-base { stop-color:var(--accent); }        /* #FF6B1A — o do botão */
.bento__obj .o-fundo{ stop-color:var(--accent-deep); }   /* #D9490A */

.bento__text{
  padding-top: clamp(18px, 2vw, 26px);
  font-size: clamp(15.5px, 1.55vw, 17.5px);
  line-height:1.56;
  color:var(--text-mid);
  max-width:36ch;
}
.bento__card--wide .bento__text{ max-width:22rem; }

/* estado inicial da cascata: só existe quando o JS arma a seção, então
   sem JS (ou com movimento reduzido) os cartões nascem visíveis */
.bento.is-armed .bento__card{ opacity:0; will-change:transform, opacity, filter; }

/* palavras inteiras não quebram; cada letra é que se move */
.split__w{ display:inline-block; }
.split__c{ display:inline-block; }
.is-armed .split__c{ opacity:0; will-change:transform, opacity, filter; }

/* ══════════════ SEÇÃO 8 — CTA + FORM ══════════════ */
.section--cta{
  background:
    radial-gradient(80% 100% at 12% 0%, rgba(255,107,26,.07) 0%, transparent 62%),
    var(--bg-alt);
}
.cta{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0, 460px);
  gap: clamp(40px, 6vw, 80px);
  align-items:center;
}

/* só perspective aqui. Combinar perspective + preserve-3d no MESMO elemento
   quebra o hit-test do Chromium: o clique cai no wrapper e o botão não funciona. */
.card-tilt{ perspective:1000px; }
.form{
  padding: clamp(26px, 3vw, 36px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 36px 80px -46px rgba(0,0,0,1),
              0 1px 0 rgba(255,255,255,.05) inset;
  display:flex; flex-direction:column; gap:16px;
  will-change:transform;
  transition: transform 300ms var(--ease);
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{
  font-size:13px; font-weight:500; color:var(--text-mid);
  letter-spacing:-.005em;
}
.field input{
  width:100%;
  padding:12px 14px;
  font-size:15px;
  color:var(--text);
  background:rgba(0,0,0,.32);
  border:1px solid var(--line);
  border-radius:9px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field input::placeholder{ color:#5E554E; }
.field input:hover{ border-color:rgba(255,255,255,.15); }
.field input:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(0,0,0,.5);
  box-shadow:0 0 0 3px rgba(255,107,26,.12);
}
.field input[type=number]{ appearance:textfield; -moz-appearance:textfield; }
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.field__err{
  font-size:12.5px;
  color:#FF8A65;
  min-height:0;
  opacity:0;
  transition:opacity 160ms var(--ease);
}
.field.has-error input{ border-color:rgba(255,138,101,.55); }
.field.has-error .field__err{ opacity:1; }

.form__submit{ margin-top:8px; width:100%; }
.form__ok{
  margin-top:4px;
  padding:13px 15px;
  font-size:14px;
  color:#F0DECE;
  background:rgba(255,107,26,.09);
  border:1px solid rgba(255,107,26,.28);
  border-radius:10px;
}

/* ══════════════ RODAPÉ ══════════════ */
.footer{
  border-top:1px solid var(--line);
  padding-top: clamp(52px, 6vw, 72px);
  background:var(--bg);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 1.4fr 1fr;
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 56px);
}
.footer__logo{
  display:flex; align-items:center; gap:10px;
  font-size:19px; font-weight:600; letter-spacing:-.03em;
}
.footer__mark{ flex:none; height:22px; width:auto; }
.footer__tag{ margin-top:6px; font-size:14px; color:var(--text-dim); }

.footer__nav{
  display:grid;
  grid-template-columns:repeat(2, max-content);
  gap:11px 40px;
  align-content:start;
}
.footer__nav a{
  font-size:14.5px; color:var(--text-mid);
  transition:color var(--dur) var(--ease);
}
.footer__nav a:hover{ color:var(--accent-soft); }

.footer__contact{
  display:flex; flex-direction:column; gap:8px;
  font-size:14.5px; color:var(--text-mid);
}
.footer__contact a{ transition:color var(--dur) var(--ease); }
.footer__contact a:hover{ color:var(--accent-soft); }
.footer__contact span{ color:var(--text-dim); }

.footer__bottom{
  border-top:1px solid var(--line-soft);
  padding-block:24px 30px;
  font-size:13px;
  color:var(--text-dim);
}

/* ═══════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════ */

/* laptops 1366px e abaixo */
@media (max-width:1200px){
  .hero__copy{ max-width:min(560px, 58%); }
  /* o bento vira duas colunas: os dois blocos grandes passam a ocupar a
     fileira inteira e os seis pequenos se dividem em pares. As colocações
     explícitas precisam ser desfeitas, senão continuam apontando para
     colunas que não existem mais. */
  /* dense porque os dois blocos grandes passam a ocupar a fileira inteira:
     sem ele, o bloco pequeno que vem antes de um grande ficava sozinho na
     fileira, com um buraco do lado. O dense manda o próximo pequeno voltar
     e tapar esse vão. */
  .grid-mod{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-flow:dense; }
  .mod--destaque,
  .mod--largo{ grid-column:1 / -1; grid-row:auto; }
  .mod--topo,
  .mod--base{ grid-column:auto; grid-row:auto; }
}

@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__actions .btn--primary{ display:none; }
  .nav__inner{ grid-template-columns:1fr auto; }

  .cta{ grid-template-columns:minmax(0,1fr); }
  .cta__copy .lead{ max-width:none; }

  /* bento: o cartão largo passa a ocupar a fileira inteira e os outros
     dois dividem a de baixo */
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bento__card{ min-height:284px; }
}

/* 2×2 vira coluna antes de os cartões ficarem estreitos demais */
@media (max-width:700px){
  .bento{ grid-template-columns:minmax(0,1fr); }
  .bento__card{ min-height:auto; }
  .bento__card--wide{ grid-column:auto; }
  .bento__text{ max-width:none; }
  .bento__card--wide .bento__text{ max-width:none; }
  /* empilhado, os três objetos voltam ao centro e ao mesmo tamanho */
  .bento__card--wide .bento__art{ justify-content:center; padding-right:0; }
  .bento__obj,
  .bento__card--wide .bento__obj{ height:120px; }
}

/* cabeçalho: as 12 colunas só valem no desktop largo — abaixo disso a
   etiqueta sobe para cima do discurso, como no original */
@media (max-width:1023px){
  .pil__head{ grid-template-columns:minmax(0,1fr); }
  .pil__head-label,
  .pil__head-copy{ grid-column:auto; }
}

/* três colunas viram uma no mesmo ponto do original (768px) */
@media (max-width:767px){
  .pillars{
    grid-template-columns:minmax(0,1fr);
    max-width:460px;
    margin-inline:auto;
  }
  /* a seção deixa de esticar até a altura da tela: empilhados, os três
     cartões já passam disso e o centramento vertical não teria o que fazer */
  .section--pillars{ min-height:0; display:block; }
}

/* imagem vai pro fundo, texto legível por cima */
@media (max-width:900px){
  .hero{
    min-height:auto;
    padding-block: calc(var(--nav-gap) + 72px) 84px;
    /* de fundo, atrás do texto, a inclinação fica mais discreta */
    --tilt: 8deg;
    --tilt-scale: .8;
  }
  /* a imagem vira fundo: ampulheta inteira, texto legível por cima */
  .hero__media{ inset:0; width:100%; right:0; }
  .hero__media img{
    object-fit:contain;
    /* centro, e não "center 54%": o canvas da areia usa a mesma caixa e só
       fica alinhado se a imagem estiver centralizada nela */
    object-position:center;
    -webkit-mask-image:none;
            mask-image:none;
    opacity:.42;
  }
  .hero__sand{ opacity:.5; }
  .hero__glow{ top:50%; left:50%; width:96%; }
  /* o título passa por cima da ampulheta neste breakpoint; o véu precisa ser
     mais forte na faixa do texto para os verbos não competirem com o vidro */
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(10,8,7,.74) 0%, rgba(10,8,7,.6) 52%, var(--bg) 100%);
  }
  .hero__inner{ min-height:0; }
  .hero__copy{ max-width:none; }

  .footer__inner{ grid-template-columns:1fr 1fr; }

  /* ── fluxo: o palco continua fixado, só encolhe ──
     Aqui a fixação sobrevive ao mobile porque o percurso é 100svh (a
     unidade estável, que não dança com a barra de endereço) e o que troca
     é uma imagem só, não um layout de duas colunas. */
  /* medida da etapa mais alta neste ponto: 115px */
  .cine__texto{ height:118px; margin-bottom:20px; }
  .cine__trilha{ margin-top:22px; }
}

@media (max-width:640px){
  body{ font-size:16px; }

  /* num telefone a descrição quebra em mais linhas e o título é grande:
     a caixa de texto precisa de mais altura para nada saltar na troca */
  /* medido no ponto mais apertado (640px, onde o título ainda é grande e a
     descrição já quebra em três linhas): 118px */
  .cine__texto{ height:120px; }
  .cine__titulo{ font-size: clamp(27px, 8vw, 38px); }
  .cine__tela .frame{ border-radius:var(--radius); }

  /* a régua encosta no texto: num celular, 46px de recuo comem largura que
     a frase precisa para não virar seis linhas */
  /* o card encolhe junto com a tela: a frase é o conteúdo, e ela precisa de
     linha curta sem virar oito linhas espremidas */
  .dcard{ min-height: clamp(190px, 30vh, 240px); }

  /* cada uma das três frases precisa caber numa linha só — se "Todo problema"
     e "resolvido." se separam, as três linhas deixam de ler como três frases */
  /* 6.35vw é o maior valor em que "Toda economia comprovada." — a frase mais
     longa — ainda cabe numa linha de 320px até 430px de viewport */
  .hero__title{ font-size: clamp(20px, 6.35vw, 29px); line-height:1.22; }
  .hero__sub{ margin-top:22px; }
  /* coluna única: nada mais espalha, e a altura mínima sai de cena para o
     bloco ficar do tamanho do próprio texto */
  .grid-mod{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }

  .step{ gap:16px; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__nav{ gap:10px 32px; }
}

/* ── acessibilidade: movimento reduzido ────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .reveal-on-scroll{ opacity:1 !important; transform:none !important; }
  /* o JS nem arma estas duas seções aqui, mas se armasse elas continuariam
     legíveis: nenhum estado inicial invisível sobrevive ao reduced-motion */
  .bento.is-armed .bento__card,
  .is-armed .split__c,
  .pillars.is-armed .pcard,
  .pil__head.is-armed .pil-in,
  .pil__head.is-armed .pil-word{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero__glow{ opacity:.6; }
  /* a respiração dos objetos para no meio-termo, sem pulsar */
  .obj__breath{ animation:none !important; opacity:.7; }
  /* a imagem fica parada: sem mola, sem derivar atrás do ponteiro e sem
     a cápsula — o JS nem liga o laço aqui */
  .pcard__img{ transform:none !important; }
  .pcard:hover .pcard__img{ opacity:1; }
  .pcard__pill{ display:none !important; }
  /* os objetos do bento também param de crescer no hover */
  .bento__card:hover .bento__obj{ transform:none; }

  /* ── a cena: as três etapas já acesas, sem fixação ──
     O JS nem arma o .is-live aqui; estas regras são o cinto de segurança
     para o caso de a classe entrar assim mesmo (troca de preferência com a
     página já aberta, por exemplo). Nada fica esmaecido esperando scroll. */
  .deckpin{ height:auto !important; }
  /* segue flex-column: é o gap do palco que separa o título dos cards */
  .deckpin__stage{ position:static !important; height:auto !important; }
  /* desfaz o empilhamento: os três voltam a ser uma coluna comum */
  .deck__cards{ display:flex !important; }
  .dcard{
    position:relative !important;
    opacity:1 !important;
    transform:none !important;
  }
  .deck__dots{ display:none !important; }

  /* ── as consequências: sem pilha e sem varredura ──
     As quatro cartas viram uma coluna comum, na altura do próprio conteúdo:
     empilhar por sticky é movimento, e 82vh cada uma seria rolagem à toa
     para quem pediu para não animar. */
  .conseq__item{ position:static !important; min-height:0 !important; }
  .conseq__item::after{ animation:none !important; }

  /* ── o fluxo: a troca acontece só por opacidade ──
     A fixação continua (ela é o layout, não o movimento), mas somem o
     desfoque e o deslocamento: nada de escala, nada de translate, nada de
     blur — a etapa simplesmente aparece. */
  .cine__tela,
  .cine__item{
    transition: opacity .01s !important;
    transform:none !important;
    filter:none !important;
  }
  .cine__tela--destaque.is-on{ transform:none !important; }
  .cine__seg::after{ transition:none !important; }
  .cine__aura{ display:none; }

  /* ── economia: entra pronta, sem escala nem inclinação ── */
  .econ__stage{ opacity:1 !important; transform:none !important; }
  .frame--hero{ transform:none !important; }
  /* botão fica estático, sem o gradiente deslizando */
  .btn--primary{ animation:none !important; background-position:14% 50% !important; }
  /* a areia não é desenhada (o JS nem inicia o loop) */
  .hero__sand{ display:none; }
  /* o preenchimento do botão ainda acontece, mas sem crescer: troca direta */
  .btn--fill::before{ transition:none !important; }
}