/* =========================================================
   WEBASE — componentes

   Lê os tokens de tokens.css. Nenhum componente redefine o
   espaçamento vertical de seção: isso vive só em .section.

   A página é um diagnóstico. A régua horizontal é o chão de
   toda a composição, o leque nasce dela, e nove seções usam
   nove estruturas diferentes de propósito.
   ========================================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 14px 22px;
  background: var(--amber);
  color: var(--ink);
  font-weight: 600;
  border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------
   O leque
   Uma peça, três papéis: marca, hero e Método. O ponto de
   origem fica na base do viewBox, então o leque sempre se
   apoia na linha que estiver embaixo dele.
   --------------------------------------------------------- */

.fan { display: block; height: auto; }
.fan .p {
  transform-box: view-box;
  transform-origin: 42px 37px;
}

/* ---------------------------------------------------------
   Marca
   --------------------------------------------------------- */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
}
.lockup .fan {
  width: 46px;
  flex: none;
  transition: width var(--t-mid) var(--ease);
}
/* Wrapper de dois blocos: sem isto é um span inline segurando
   elementos de bloco, o que funciona por acidente e não por regra. */
.lockup__text { display: block; }

.lockup__word {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variation-settings: "wdth" 92, "opsz" 24;
  color: var(--paper);
}
.lockup__tagline {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azure);
}

/* ---------------------------------------------------------
   Botões
   Forma: pílula. É a única forma arredondada da página, e é
   o que separa "coisa em que se clica" de "superfície".
   O preço mora numa cápsula dentro do botão, nunca solto ao
   lado do texto.
   --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  transition: background var(--t-fast) var(--ease-2),
              transform var(--t-fast) var(--ease-2),
              color var(--t-fast) var(--ease-2);
}
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--primary:hover { background: var(--amber-2); }
.btn:active { transform: scale(0.985); }
.btn--lg { padding: 17px 28px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn:disabled { cursor: default; opacity: 0.65; transform: none; }

.btn__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px 5px;
  border-radius: var(--r-pill);
  background: rgba(11, 23, 32, 0.13);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background var(--t-fast) var(--ease-2),
              transform var(--t-fast) var(--ease-2);
}
.btn:hover .btn__tag { background: rgba(11, 23, 32, 0.2); transform: translateX(2px); }

/* Link de texto com sublinhado que cresce a partir da esquerda */
.link {
  position: relative;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--azure);
  padding-bottom: 3px;
  transition: color var(--t-fast) var(--ease-2);
}
.link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.36);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.link:hover { color: var(--paper); }
.link:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease-2),
              border-color var(--t-mid) var(--ease-2);
}
.masthead.is-stuck {
  background: rgba(6, 15, 22, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--rule);
}
.masthead.is-stuck .lockup .fan { width: 38px; }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}
.masthead__cta { margin-left: 0; padding: 10px 18px; font-size: var(--fs-xs); }

.nav {
  display: flex;
  gap: var(--sp-4);
  margin-left: auto;
}
.nav a {
  position: relative;
  padding-block: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--paper-2);
  transition: color var(--t-fast) var(--ease-2);
}
.nav a:hover { color: var(--paper); }
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav a:hover::after,
.nav a.is-current::after { transform: scaleX(1); }
.nav a.is-current { color: var(--paper); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
}
.burger span {
  display: block;
  height: 1.5px;
  background: var(--paper);
  transition: transform 260ms var(--ease-2), opacity 200ms var(--ease-2);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------------------------------------------------------
   1 — Hero
   O leque se apoia numa régua que atravessa a tela inteira.
   Tudo abaixo da régua está fundado nela. É a tese da marca
   em forma de layout, e é o único momento coreografado da
   página no carregamento.
   --------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--abyss);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  /* Teto de 680px: numa tela de 1440x900 o hero inteiro cabe e
     ainda sobra borda da próxima seção. Sem o teto, a viewport
     alta estica o bloco e o ar sobra todo em cima. */
  min-height: 540px;
  min-height: min(calc(100svh - var(--header-h)), 680px);
  overflow: hidden;
}
/* Sem mancha de luz radial atrás do leque: é o fundo padrão de
   qualquer página escura de tecnologia. A profundidade aqui vem do
   eco do próprio leque, em .hero__echo. */

.hero__grid { position: relative; align-items: end; row-gap: 0; }

.hero__mark {
  grid-column: 1 / 7;
  align-self: end;
  padding-bottom: var(--sp-3);
}
.hero__fan {
  position: relative;
  grid-column: 8 / 13;
  justify-self: end;
  align-self: end;
  width: min(340px, 30vw);
}

/* Os ângulos exatos das penas do logo (±14°, ±36°, ±58°) continuam
   para fora do leque como linhas finas, saindo do mesmo ponto de
   origem. É a geometria da marca estendida ao fundo, no lugar da
   grade de blueprint ou da mancha de luz que toda página escura de
   tecnologia usa. Em conic-gradient 0deg aponta para cima, então os
   ângulos negativos das penas viram 360 menos o valor. */
.hero__fan::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2600px;
  height: 1300px;
  transform: translateX(-50%);
  pointer-events: none;
  /* Opacidade .5 e linha de .9deg. Valores mais discretos parecem
     mais elegantes num print, mas somem por completo na tela: se o
     efeito não é percebido, ele é só código. */
  background: conic-gradient(from 0deg at 50% 100%,
    transparent  13.1deg, rgba(22,143,208,.5)  14deg, transparent  14.9deg,
    transparent  35.1deg, rgba(22,143,208,.5)  36deg, transparent  36.9deg,
    transparent  57.1deg, rgba(22,143,208,.5)  58deg, transparent  58.9deg,
    transparent 301.1deg, rgba(22,143,208,.5) 302deg, transparent 302.9deg,
    transparent 323.1deg, rgba(22,143,208,.5) 324deg, transparent 324.9deg,
    transparent 345.1deg, rgba(22,143,208,.5) 346deg, transparent 346.9deg);
  /* Apaga junto ao pivô, onde o leque real já ocupa, e some antes
     das pontas para a linha não terminar num corte seco. */
  -webkit-mask-image: radial-gradient(closest-side, transparent 6%, #000 22%, transparent 82%);
          mask-image: radial-gradient(closest-side, transparent 6%, #000 22%, transparent 82%);
}
.hero__rule { grid-column: 1 / 13; --rule-w: 18%; }

.hero__title { grid-column: 1 / 11; margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.hero__a {
  display: block;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.375rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 96, "opsz" 36;
  color: var(--paper-3);
}
.hero__b {
  display: block;
  margin-top: 0.12em;
  color: var(--paper);
}
.hero__b em { font-style: normal; color: var(--amber); }

.hero__lede { grid-column: 1 / 8; margin-top: var(--sp-3); }
.hero__cta {
  grid-column: 1 / 11;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
}

/* A abertura. Sem JS os atributos transform do SVG já deixam
   o leque aberto, então a página nunca aparece quebrada. */
.js .hero__fan .p {
  transform: rotate(0deg) scaleY(0.16);
  opacity: 0;
  transition: transform 1000ms var(--ease-2) var(--d, 0ms),
              opacity 520ms var(--ease) var(--d, 0ms);
}
.js .hero__fan.is-open .p { opacity: 1; }
.js .hero__fan.is-open .p[data-a="-76"] { transform: rotate(-76deg); }
.js .hero__fan.is-open .p[data-a="76"]  { transform: rotate(76deg); }
.js .hero__fan.is-open .p[data-a="-58"] { transform: rotate(-58deg); }
.js .hero__fan.is-open .p[data-a="58"]  { transform: rotate(58deg); }
.js .hero__fan.is-open .p[data-a="-36"] { transform: rotate(-36deg); }
.js .hero__fan.is-open .p[data-a="36"]  { transform: rotate(36deg); }
.js .hero__fan.is-open .p[data-a="-14"] { transform: rotate(-14deg); }
.js .hero__fan.is-open .p[data-a="14"]  { transform: rotate(14deg); }

.js .hero__rule::after { transform: scaleX(0); transform-origin: left; }
.js .hero__rule.is-open::after {
  transform: scaleX(1);
  transition: transform 900ms var(--ease-2) 260ms;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__fan .p { transform: none; opacity: 1; }
  .js .hero__fan.is-open .p[data-a="-76"] { transform: rotate(-76deg); }
  .js .hero__fan.is-open .p[data-a="76"]  { transform: rotate(76deg); }
  .js .hero__fan.is-open .p[data-a="-58"] { transform: rotate(-58deg); }
  .js .hero__fan.is-open .p[data-a="58"]  { transform: rotate(58deg); }
  .js .hero__fan.is-open .p[data-a="-36"] { transform: rotate(-36deg); }
  .js .hero__fan.is-open .p[data-a="36"]  { transform: rotate(36deg); }
  .js .hero__fan.is-open .p[data-a="-14"] { transform: rotate(-14deg); }
  .js .hero__fan.is-open .p[data-a="14"]  { transform: rotate(14deg); }
  .js .hero__rule::after { transform: none; }
}

/* ---------------------------------------------------------
   Cabeçalho de seção
   --------------------------------------------------------- */

/* A medida curta é do título, não do bloco: pôr max-width no
   container estrangula a lede junto e ela quebra em coluna de
   jornal. Cada filho tem a sua. */
.head { max-width: 60ch; }
.head h2 { max-width: 18ch; }
.head--wide h2 { max-width: 25ch; }
.head .label + h2 { margin-top: var(--sp-2); }
.head .lede { margin-top: var(--sp-3); max-width: 56ch; }

/* ---------------------------------------------------------
   2 — Diagnóstico rápido
   A assinatura da página. O visitante marca os sintomas que
   reconhece e o painel responde ao número que ele mesmo
   marcou. Nenhum número aqui foi inventado pela WEBASE.
   --------------------------------------------------------- */

.diag { border-top: 1px solid var(--rule); }
.diag__grid { margin-top: var(--sp-7); row-gap: var(--sp-6); }
.diag__list { grid-column: 1 / 8; }
.diag__side { grid-column: 9 / 13; }

.sym {
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--t-mid) var(--ease);
}
.sym:first-child { border-top: 1px solid var(--rule); }
.sym__box {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  cursor: pointer;
}
.sym__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.sym__mark {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: none;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  background: transparent;
  transition: background var(--t-fast) var(--ease-2),
              border-color var(--t-fast) var(--ease-2);
}
/* O traço nasce do canto e cresce, então marcar parece um
   gesto e não um estado que troca de imagem. */
.sym__mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: transform 260ms var(--ease-2), opacity 140ms linear;
}
.sym__text {
  color: var(--paper-3);
  transition: color var(--t-mid) var(--ease);
}
.sym__box:hover .sym__mark { border-color: var(--paper-3); }
.sym__box:hover .sym__text { color: var(--paper-2); }

.sym__input:checked ~ .sym__mark {
  background: var(--amber);
  border-color: var(--amber);
}
.sym__input:checked ~ .sym__mark::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.sym__input:checked ~ .sym__text { color: var(--paper); }
.sym__input:focus-visible ~ .sym__mark {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* O painel. Fica colado enquanto a lista rola, porque a
   resposta precisa estar visível no momento em que a pessoa
   marca a terceira caixa. */
.verdict {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  padding: var(--sp-4);
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.verdict__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.verdict__n {
  font-size: clamp(3.5rem, 2.5rem + 3vw, 4.5rem);
  font-variation-settings: "wdth" 84, "opsz" 72;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-mid) var(--ease);
}
.verdict__of {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--paper-3);
}
.verdict__label {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-3);
}
.verdict__text {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--paper-2);
}
.verdict__cta { margin-top: var(--sp-3); }
.verdict__cta[hidden] { display: none; }

/* O número reage ao clique: sem isso a troca de dígito passa
   despercebida e a pessoa não liga o gesto ao painel. */
.verdict__n.is-bump { animation: bump 400ms var(--ease-2); }
@keyframes bump {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .verdict__n.is-bump { animation: none; }
}

/* ---------------------------------------------------------
   3 — Serviços
   Uma peça só, dividida por hairlines de 1px. Quatro células
   de quatro tamanhos: a primeira carrega o serviço que mais
   entra pela porta, e as outras três não fingem ter o mesmo
   peso.
   --------------------------------------------------------- */

.svc {
  display: grid;
  gap: 1px;
  margin-top: var(--sp-7);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
.svc__cell {
  position: relative;
  padding: var(--sp-4);
  background: var(--ink);
  transition: background var(--t-mid) var(--ease);
}
.svc__cell:hover { background: var(--ink-2); }
.svc__name { margin-bottom: var(--sp-2); }
.svc__cell p { color: var(--paper-2); font-size: var(--fs-sm); }

/* A célula grande ganha o leque como relevo de fundo. É a
   única variação de superfície da grade, e serve para dizer
   qual das quatro frentes é a porta de entrada. */
.svc__cell--lead {
  background: linear-gradient(150deg, #0E2130 0%, var(--ink) 58%);
  overflow: hidden;
}
.svc__cell--lead:hover { background: linear-gradient(150deg, #123049 0%, var(--ink-2) 58%); }
/* O leque apoiado na base da célula, ecoando o hero. É o que
   preenche a altura da célula grande sem inventar conteúdo. */
.svc__art {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: min(330px, 78%);
  transform: translateX(-50%);
  color: rgba(22, 143, 208, 0.17);
  pointer-events: none;
}
.svc__cell--lead .svc__name { font-size: var(--fs-h3); }

/* A própria página é a prova do serviço de sites. A linha ganha o
   amarelo de ação porque é argumento de venda, não descrição. */
.svc__proof {
  position: relative;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--amber);
}
.svc__cell--lead p.svc__proof { color: var(--amber); }

/* ---------------------------------------------------------
   4 — Método BASE
   O mesmo leque, lido de outro jeito: quatro penas, quatro
   etapas, uma abrindo por vez conforme a leitura desce. As
   etapas indentam em degrau porque é isso que um leque faz.
   --------------------------------------------------------- */

.method { border-top: 1px solid var(--rule); }
/* O leque ocupa a coluna que o cabeçalho deixaria vazia, e fica
   colado enquanto as etapas passam: sem ele na tela, a pena que
   abre a cada etapa não é vista por ninguém. */
.method__grid { row-gap: 0; }
.method__head  { grid-column: 1 / 8;  grid-row: 1; }
.method__stage { grid-column: 8 / 13; grid-row: 1 / 3; }
.method__steps { grid-column: 1 / 8;  grid-row: 2; margin-top: var(--sp-7); }

.method__fan {
  position: sticky;
  top: calc(var(--header-h) + 56px);
  width: min(100%, 330px);
  margin-inline: auto;
}
/* O leque do Método é a marca inteira, não uma redução dela: as
   oito penas e os mesmos gradientes. O que a leitura controla é
   só quanto dela já abriu. A cor nunca é animada — gradiente não
   interpola — então a transição mora em transform e opacity. */
.method__fan .p {
  transition: transform 1100ms var(--ease-2), opacity 700ms var(--ease);
}

/* Com JS começa dobrado e apagado. A classe fica no grid inteiro
   porque as etapas são irmãs do leque, não filhas dele.
   Fechado é um feixe recolhido, não um sumiço: as penas mantêm
   rotações mínimas para não colapsarem numa forma só, e a
   proporção do recolhimento acompanha o ângulo final para todas
   saírem do feixe no mesmo ritmo. */
.method__grid.is-armed .method__fan .p { opacity: 0.14; }
.method__grid.is-armed .method__fan .p[data-a="-76"] { transform: rotate(-9.5deg) scaleY(0.58); }
.method__grid.is-armed .method__fan .p[data-a="76"]  { transform: rotate(9.5deg)  scaleY(0.58); }
.method__grid.is-armed .method__fan .p[data-a="-58"] { transform: rotate(-7deg)   scaleY(0.58); }
.method__grid.is-armed .method__fan .p[data-a="58"]  { transform: rotate(7deg)    scaleY(0.58); }
.method__grid.is-armed .method__fan .p[data-a="-36"] { transform: rotate(-4.5deg) scaleY(0.58); }
.method__grid.is-armed .method__fan .p[data-a="36"]  { transform: rotate(4.5deg)  scaleY(0.58); }
.method__grid.is-armed .method__fan .p[data-a="-14"] { transform: rotate(-1.8deg) scaleY(0.58); }
.method__grid.is-armed .method__fan .p[data-a="14"]  { transform: rotate(1.8deg)  scaleY(0.58); }

.method__grid.is-armed .method__fan .p.is-lit { opacity: 1; }
.method__grid.is-armed .method__fan .p.is-lit[data-a="-76"] { transform: rotate(-76deg); }
.method__grid.is-armed .method__fan .p.is-lit[data-a="76"]  { transform: rotate(76deg); }
.method__grid.is-armed .method__fan .p.is-lit[data-a="-58"] { transform: rotate(-58deg); }
.method__grid.is-armed .method__fan .p.is-lit[data-a="58"]  { transform: rotate(58deg); }
.method__grid.is-armed .method__fan .p.is-lit[data-a="-36"] { transform: rotate(-36deg); }
.method__grid.is-armed .method__fan .p.is-lit[data-a="36"]  { transform: rotate(36deg); }
.method__grid.is-armed .method__fan .p.is-lit[data-a="-14"] { transform: rotate(-14deg); }
.method__grid.is-armed .method__fan .p.is-lit[data-a="14"]  { transform: rotate(14deg); }

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "letter name" "letter text";
  column-gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
  transition: opacity var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.method__grid.is-armed .step { opacity: 0.34; }
.method__grid.is-armed .step.is-lit { opacity: 1; }

.step__letter {
  grid-area: letter;
  align-self: start;
  width: 1.1em;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 80, "opsz" 48;
  color: var(--azure);
  transition: color var(--t-mid) var(--ease);
}
.method__grid.is-armed .step__letter { color: rgba(22, 143, 208, 0.3); }
.method__grid.is-armed .step.is-lit .step__letter { color: var(--azure); }
.step__name { grid-area: name; }
.step__text {
  grid-area: text;
  margin-top: 8px;
  color: var(--paper-2);
  font-size: var(--fs-sm);
  max-width: 52ch;
}

/* ---------------------------------------------------------
   5 — O que muda em 90 dias
   Dois ganhos em escala de manchete, quatro em escala de
   corpo. Os dois grandes são os que o dono sente primeiro.
   Sem cards, sem ícone, sem hairline em toda linha.
   --------------------------------------------------------- */

.gains { margin-top: var(--sp-7); row-gap: var(--sp-6); }
.gain--lead  { grid-column: 1 / 7; }
.gain--lead2 { grid-column: 8 / 13; }
.gain--lead .gain__t,
.gain--lead2 .gain__t {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-variation-settings: "wdth" 90, "opsz" 36;
  color: var(--paper);
}
.gain--lead .gain__t em,
.gain--lead2 .gain__t em { font-style: normal; color: var(--azure); }

.gains__rest {
  grid-column: 1 / 13;
  display: grid;
  gap: var(--sp-5) var(--gutter);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.gain__t {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.gain p { margin-top: 10px; color: var(--paper-2); font-size: var(--fs-sm); max-width: 46ch; }

/* ---------------------------------------------------------
   6 — A parte honesta
   A WEBASE não tem cliente para mostrar. Em vez de esconder
   isso num parágrafo, vira a manchete da seção. As ferramentas
   passam numa faixa contínua: é a única faixa em movimento da
   página.
   --------------------------------------------------------- */

.honest { border-top: 1px solid var(--rule); }
.honest__grid { row-gap: var(--sp-5); }
.honest__say { grid-column: 1 / 9; }
.honest__say h2 em { font-style: normal; color: var(--amber); }
.honest__note {
  grid-column: 10 / 13;
  align-self: end;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--amber);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--paper-2);
}

.strip {
  margin-top: var(--sp-7);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.strip__track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}
.strip__set {
  display: flex;
  gap: var(--sp-7);
  padding-right: var(--sp-7);
  flex: none;
}
.strip:hover .strip__track,
.strip:focus-within .strip__track { animation-play-state: paused; }
@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.strip__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--paper-2);
  white-space: nowrap;
}
.strip__item img {
  width: 22px;
  height: 22px;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .strip__track { animation: none; }
}

/* ---------------------------------------------------------
   7 — Oferta
   Ficha do serviço: o que entra à esquerda, o preço à direita,
   a garantia logo abaixo do preço porque é lá que a objeção
   nasce.
   --------------------------------------------------------- */

.offer { border-top: 1px solid var(--rule); }
.offer__grid { margin-top: var(--sp-7); row-gap: var(--sp-6); }
/* A call abre a seção em largura total. É o único bloco da página
   que usa o amarelo numa borda: aqui ele não é botão, é o sinal de
   que este é o item de maior valor da oferta. */
.offer__call {
  grid-column: 1 / 13;
  margin-bottom: var(--sp-6);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background: linear-gradient(115deg, #10202C 0%, var(--ink) 62%);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--amber);
  border-radius: var(--r);
}
.offer__call-rot {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--amber);
}
.offer__call-t {
  margin-top: var(--sp-2);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  font-variation-settings: "wdth" 92, "opsz" 32;
  max-width: 26ch;
}
.offer__call-t em { font-style: normal; color: var(--paper-3); }
.offer__call-p {
  margin-top: var(--sp-3);
  color: var(--paper-2);
  max-width: 62ch;
}
.offer__call-l {
  display: grid;
  gap: 10px var(--sp-5);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  color: var(--paper-2);
}
.offer__call-l li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
/* Marcador em pena, o mesmo gesto do leque, em vez de bolinha. */
.offer__call-l li::before {
  content: "";
  width: 6px;
  height: 14px;
  margin-top: 5px;
  background: var(--azure);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.offer__list { grid-column: 1 / 6; }
.offer__amostra { grid-column: 6 / 9; margin: 0; }
.offer__buy  { grid-column: 9 / 13; }

.offer__amostra img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  /* Sombra fria para o papel branco pousar no fundo escuro em vez
     de flutuar recortado. */
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.85);
}
.offer__amostra figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--paper-3);
}

.offer__list li {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  color: var(--paper-2);
  font-size: var(--fs-sm);
}
.offer__list li:first-child { border-top: 1px solid var(--rule); }

.price {
  padding: var(--sp-4);
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.price__was {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--paper-3);
}
.price__was s { text-decoration-thickness: 1px; }
.price__now {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 84, "opsz" 60;
  color: var(--amber);
}
.price__unit {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-3);
}
.price .btn { margin-top: var(--sp-3); }
.price__note {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--paper-2);
}

.safety {
  grid-column: 1 / 13;
  display: grid;
  gap: var(--sp-4) var(--gutter);
  margin-top: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.safety__t {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.safety p { margin-top: 8px; color: var(--paper-2); font-size: var(--fs-sm); max-width: 48ch; }

/* ---------------------------------------------------------
   8 — Perguntas
   Objeções e dúvidas operacionais num acordeão só, em dois
   grupos. Sem caixa em volta de cada pergunta: uma linha
   entre elas basta.
   --------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }
.faq__grid { margin-top: var(--sp-7); row-gap: var(--sp-7); }
.faq__col { grid-column: span 6; }
.faq__title {
  padding-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-3);
}

.qa { border-top: 1px solid var(--rule); }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease-2);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--azure); }
/* Cruz que vira traço. Dois retângulos, um deles gira. */
.qa__sign {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 7px;
}
.qa__sign::before,
.qa__sign::after {
  content: "";
  position: absolute;
  background: var(--azure);
  transition: transform 300ms var(--ease-2);
}
.qa__sign::before { inset: 5px 0; height: 2px; }
.qa__sign::after  { inset: 0 5px; width: 2px; }
.qa[open] .qa__sign::after { transform: rotate(90deg); }
.qa__body {
  padding-bottom: var(--sp-3);
  color: var(--paper-2);
  font-size: var(--fs-sm);
  max-width: 58ch;
}

/* ---------------------------------------------------------
   9 — Fechamento e formulário
   --------------------------------------------------------- */

.closing {
  position: relative;
  background: var(--abyss);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
/* Os mesmos raios do hero, agora nascendo do canto inferior esquerdo
   e abrindo para cima. Fecha a página com a geometria com que ela
   abriu, em vez de outra mancha de luz. */
.closing::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2200px;
  height: 1100px;
  pointer-events: none;
  /* Mais fraco que no hero porque aqui os raios cruzam a área do
     texto em vez de sair pela borda. */
  background: conic-gradient(from 22deg at 8% 100%,
    transparent  13.3deg, rgba(22,143,208,.22)  14deg, transparent  14.7deg,
    transparent  35.3deg, rgba(22,143,208,.22)  36deg, transparent  36.7deg,
    transparent  57.3deg, rgba(22,143,208,.22)  58deg, transparent  58.7deg);
  /* Raio explícito em vez de closest-side: com o centro na própria
     borda do elemento, closest-side resolve para zero e a máscara
     apaga o gradiente inteiro. */
  -webkit-mask-image: radial-gradient(1200px 1200px at 8% 100%, transparent 5%, #000 24%, transparent 76%);
          mask-image: radial-gradient(1200px 1200px at 8% 100%, transparent 5%, #000 24%, transparent 76%);
}
.closing__grid { position: relative; row-gap: var(--sp-6); align-items: start; }
.closing__copy { grid-column: 1 / 7; }
.closing__copy h2 em { font-style: normal; color: var(--amber); }
.closing__copy .lede { margin-top: var(--sp-3); }
.closing__copy .btn { margin-top: var(--sp-5); }
.closing__form { grid-column: 8 / 13; }

.formwrap {
  padding: var(--sp-4);
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.formwrap__t {
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.form { display: grid; gap: var(--sp-2); }
.field { display: grid; gap: 6px; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--paper-2);
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--ink);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  color: var(--paper);
  transition: border-color var(--t-fast) var(--ease-2),
              box-shadow var(--t-fast) var(--ease-2),
              background var(--t-fast) var(--ease-2);
}
.field textarea { resize: vertical; min-height: 78px; }
.field input::placeholder { color: var(--paper-3); }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--ink-3);
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-lo);
}
.field[data-invalid] input,
.field[data-invalid] textarea { border-color: var(--alert); }
.field__error {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--alert);
}
.field__error:empty { display: none; }

/* Armadilha anti-spam: fora da tela, fora do foco, sem
   display:none para não ser ignorada por bots que checam
   visibilidade. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form .btn { margin-top: var(--sp-1); }
.form__micro {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--paper-3);
  text-align: center;
}
.form__failure {
  font-size: var(--fs-xs);
  color: var(--alert);
  text-align: center;
}
.form__failure:empty { display: none; }

/* Com o formulário fora, a caixa mantém a altura travada pelo
   JS e a confirmação nasce onde o formulário estava. */
.formwrap.is-done { display: grid; place-content: center; }
.done { text-align: center; }
.done p { color: var(--paper-2); max-width: 34ch; margin: var(--sp-1) auto 0; font-size: var(--fs-sm); }
.done .link { display: inline-block; margin-top: var(--sp-3); }

/* ---------------------------------------------------------
   Rodapé
   --------------------------------------------------------- */

.foot { padding-block: var(--sp-7) var(--sp-5); border-top: 1px solid var(--rule); }
.foot__inner { display: grid; gap: var(--sp-4); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.foot__links a {
  font-size: var(--fs-sm);
  color: var(--paper-2);
  transition: color var(--t-fast) var(--ease-2);
}
.foot__links a:hover { color: var(--amber); }
.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--paper-3);
}

/* ---------------------------------------------------------
   Flutuante de WhatsApp
   --------------------------------------------------------- */

.wa {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 54px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 14px 34px -18px rgba(6, 15, 22, 0.9);
  transition: gap var(--t-fast) var(--ease-2),
              padding var(--t-fast) var(--ease-2),
              opacity var(--t-mid) var(--ease-2),
              transform var(--t-mid) var(--ease-2),
              visibility 0s linear 0s;
}
.wa__icon { width: 27px; height: 27px; flex: none; }
.wa__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: max-width var(--t-mid) var(--ease);
}
.wa.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transition-delay: 0s, 0s, 0s, 0s, var(--t-mid);
}
@media (hover: hover) {
  .wa:hover { gap: 10px; padding-right: 19px; }
  .wa:hover .wa__label { max-width: 200px; }
}
.wa:focus-visible { gap: 10px; padding-right: 19px; }
.wa:focus-visible .wa__label { max-width: 200px; }

/* =========================================================
   Grade responsiva
   Cada bloco declara aqui como colapsa. Nada fica por conta
   do acaso.
   ========================================================= */

@media (min-width: 560px) {
  .gains__rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .safety { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer__call-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  /* O serviço que mais entra pela porta toma a coluna inteira da
     esquerda e os outros três empilham à direita. Assim nenhuma
     célula termina com metade da altura vazia. */
  .svc {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
  }
  .svc__cell--lead { grid-column: 1 / 7;  grid-row: 1 / 4; }
  .svc__cell--tall { grid-column: 7 / 13; grid-row: 1; }
  .svc__cell--c    { grid-column: 7 / 13; grid-row: 2; }
  .svc__cell--d    { grid-column: 7 / 13; grid-row: 3; }
  .svc__cell { padding: var(--sp-5); }
  .svc__cell--lead { padding-bottom: 190px; }

  .gains__rest { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* O degrau: cada etapa abre um pouco mais que a anterior. */
  .step:nth-child(2) { padding-left: 20px; }
  .step:nth-child(3) { padding-left: 40px; }
  .step:nth-child(4) { padding-left: 60px; }
}

@media (max-width: 1099px) and (min-width: 900px) {
  .diag__list { grid-column: 1 / 8; }
  .diag__side { grid-column: 8 / 13; }
  /* Três colunas não cabem aqui: a amostra desce para baixo da
     lista e divide a largura com ela. */
  .offer__list    { grid-column: 1 / 5; }
  .offer__amostra { grid-column: 5 / 8; }
  .offer__buy     { grid-column: 8 / 13; }
  .closing__copy { grid-column: 1 / 7; }
  .closing__form { grid-column: 7 / 13; }
  .honest__note { grid-column: 9 / 13; }
}

@media (max-width: 899px) {
  .hero {
    align-items: flex-start;
    min-height: 0;
    padding-block: var(--sp-6) var(--sp-8);
  }
  .hero__grid { row-gap: 0; }
  .hero__mark { padding-bottom: var(--sp-4); }
  .hero__fan {
    width: clamp(180px, 36vw, 280px);
    justify-self: start;
    margin-bottom: 0;
  }
  .hero__title { margin-top: var(--sp-5); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  /* align-self em vez de text-align: esticado, o sublinhado do link
     ocupa a linha inteira e descola do texto centralizado. */
  .hero__cta .link { align-self: center; }

  /* No celular o painel não pode ficar embaixo da lista: quem marca
     nunca veria a resposta. Ele sobe para o topo e vira uma barra
     colada sob o cabeçalho, com o número e o veredito lado a lado. */
  .diag__grid { row-gap: var(--sp-4); }
  .diag__side {
    order: -1;
    position: sticky;
    top: calc(var(--header-h) - 1px);
    z-index: 90;
    margin-bottom: var(--sp-2);
  }
  .verdict {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-width: 0 0 1px;
    border-radius: 0;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .verdict__count { grid-column: 1; }
  .verdict__n { font-size: 2.75rem; }
  .verdict__of { font-size: var(--fs-xs); }
  .verdict__label { display: none; }
  .verdict__text {
    grid-column: 2;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: var(--fs-xs);
    line-height: 1.45;
  }
  .verdict__cta { grid-column: 1 / -1; margin-top: 0; }

  .method__grid { row-gap: var(--sp-5); }
  .method__steps { margin-top: 0; }
  .method__fan { position: static; width: 200px; margin-inline: 0; }

  .svc__cell--lead { padding-bottom: 150px; }
  .svc__art { width: 240px; bottom: -14px; }

  /* A amostra do relatório em coluna única fica gigante. Limita a
     largura e centraliza, para ler como documento e não como banner. */
  .offer__amostra { max-width: 320px; margin-inline: auto; }

  /* O recuo generoso do bloco da call come largura demais numa tela
     de 390px, e o texto passa a quebrar a cada quatro palavras. */
  .offer__call {
    padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-4);
    margin-bottom: var(--sp-5);
  }
  .offer__call-l { gap: 9px; }

  .foot__inner { gap: var(--sp-4); }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding: 0 var(--gutter) var(--sp-3);
    /* Fundo sólido de propósito: backdrop-filter aninhado
       dentro do cabeçalho, que já tem um, vaza o conteúdo de
       trás no Chromium. */
    background: var(--abyss);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 22px 36px -26px rgba(0, 0, 0, 0.95);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--t-mid) var(--ease-2),
                transform var(--t-mid) var(--ease-2),
                visibility 0s linear var(--t-mid);
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s, 0s, 0s;
  }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--rule); }
  .nav a::after { display: none; }
  .burger { display: flex; }
  .masthead__cta { display: none; }
}

@media (min-width: 900px) {
  .foot__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .foot__links { justify-content: flex-end; }
  .foot__legal { grid-column: 1 / -1; justify-content: space-between; }
}