/* ───────── protótipo a2ia — adaptação dos slots de imagem ─────────
   Os slots da senthora foram desenhados para celular em pé (680x1408 e
   1284x2778). Os mockups da Dona são paisagem (1536x1024) e já trazem o
   notebook, os cards flutuantes e a sombra dentro do próprio PNG.

   Este arquivo carrega DEPOIS de style-ac70caea.css de propósito: com a mesma
   especificidade, quem vem por último vence — inclusive as regras que estão
   dentro de @media lá. Nada do arquivo original foi editado. */

/* ─────────── tipografia — Metropolis, a fonte da marca ───────────
   A página clonada roda inteira em 'Nohemi', declarada em 4 pesos e usada em
   meia dúzia de seletores espalhados pelo CSS de origem. Duas camadas:

   1. 'Metropolis' declarada de verdade, 300–900, para o que este arquivo
      estiliza daqui em diante;
   2. a família 'Nohemi' REDECLARADA apontando para os arquivos da Metropolis.
      @font-face de mesmo nome/peso/estilo: o último vence — então todas as
      regras do CSS clonado passam a renderizar Metropolis sem caçar seletor.

   A hierarquia de pesos vem depois das faces: display pesado e apertado nos
   títulos, texto em regular com respiro, rótulos pequenos em semibold com
   tracking largo. É o contraste entre os extremos que dá a elegância — peso
   médio em tudo deixaria a página inteira com a mesma voz. */

@font-face { font-family: 'Metropolis'; src: url('../fonts/Metropolis-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/Metropolis-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/Metropolis-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/Metropolis-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/Metropolis-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/Metropolis-ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../fonts/Metropolis-Black.otf') format('opentype'); font-weight: 900; font-display: swap; }

/* o alias: as 4 faces da Nohemi, reapontadas */
@font-face { font-family: 'Nohemi'; src: url('../fonts/Metropolis-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Nohemi'; src: url('../fonts/Metropolis-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nohemi'; src: url('../fonts/Metropolis-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Nohemi'; src: url('../fonts/Metropolis-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
/* pesos que a Nohemi não declarava — sem estas faces, bold sairia sintetizado
   (o navegador engrossa o Regular), que é o contrário de elegante */
@font-face { font-family: 'Nohemi'; src: url('../fonts/Metropolis-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nohemi'; src: url('../fonts/Metropolis-ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nohemi'; src: url('../fonts/Metropolis-Black.otf') format('opentype'); font-weight: 900; font-display: swap; }

/* ── hierarquia de pesos ── */

/* display: os grandes títulos, pesados e com tracking negativo — a Metropolis
   é geométrica e em corpo grande pede aperto para não esparramar */
.hero-title,
.cta-title { font-weight: 800; letter-spacing: -.025em; }
.statement-text { font-weight: 700; letter-spacing: -.015em; }
h2, .features-title, .sig-title, .exploded-title, .imagine-title,
.compare-title, .pricing h2, .faq-title, .reviews-title { font-weight: 700; letter-spacing: -.02em; }

/* títulos de bloco: um degrau abaixo */
.step-item h3, .sig-copy h3, .i-info h4 { font-weight: 600; letter-spacing: -.01em; }
.f-card h3, .pr-card h3 { font-weight: 600; }

/* texto corrido: regular, com entrelinha folgada — o contraste com o display
   pesado é o que dá a sensação de leveza */
body { font-weight: 400; }
.hero-sub, .sig-copy p, .step-item p, .f-card p, .i-info p, .faq-body,
.pr-desc, .imagine-stat p, .compare-note { font-weight: 400; }

/* números grandes: o peso máximo, uso pontual */
.pr-price, .stat-num { font-weight: 800; letter-spacing: -.03em; }

/* rótulos pequenos em caixa alta: semibold + tracking largo, o contraponto
   clássico do display apertado */
.section-kicker, .sig-badge, .pr-tag,
.compare-table thead th { font-weight: 600; letter-spacing: .22em; }
.pr-opt, .pr-btn, .store-btn b, .btn-primary { font-weight: 600; }

/* ─── sem as trilhas de circuito ───
   Todas as linhas de "circuito impresso" com pulso de luz saem a pedido:
   as do hero, os conectores em S entre as seções, a moldura que se desenha
   em volta do texto-manifesto, as trilhas da grade de funcionalidades e as
   das linhas do "Sob o capô".

   `visibility: hidden` em vez de `display: none` de propósito, por dois
   motivos: os conectores ocupam altura real entre as seções (sumir com eles
   colaria uma seção na outra), e o JS mede os caminhos com getTotalLength()
   ao carregar — elemento sem render devolve zero e derrubaria a animação
   que continua existindo sobre os demais. */
.hero-net,
.connector svg,
.sig-connector svg,
.statement-net,
.f-net,
.i-trace { visibility: hidden; }

/* ─── sem o contador 01/04 dos passos ───
   Escondido por CSS em vez de removido do HTML: o JS escreve nele a cada
   troca de passo (stepsCounterNum), e apagar o nó quebraria essa rotina. */
.steps-counter { display: none !important; }

/* ─── o chip é a logo ───
   O CSS de origem faz `brightness(0) invert(1)` na imagem do chip — vira
   silhueta branca. O glifo do senthora tinha transparência e funcionava; o
   ícone do a2ia é um quadrado cheio, e a silhueta dele é só um bloco branco
   (era o que aparecia). Aqui o ícone real preenche a face do chip, sem
   filtro; o brilho, a borda clara e a animação de respiração continuam
   vindo do .app-chip por fora. */
.app-chip img {
  width: 100%; height: 100%;
  border-radius: 26%;
  object-fit: cover;
  filter: none;
}

/* ─── ícones do "Sob o capô" ───
   Os tiles traziam as marcas da infra do senthora (OpenAI, ElevenLabs,
   Azure), que não têm relação com os rótulos novos. Viraram ícones de linha
   no mesmo tamanho que o CSS de origem dava às imagens, na cor de destaque
   da página: balão de conversa, documento e gráfico. */
.i-tile .i-ico {
  width: clamp(38px, 6vh, 52px);
  height: clamp(38px, 6vh, 52px);
  color: var(--violet);
  filter: drop-shadow(0 0 10px rgba(154, 138, 251, .35));
}
@media (min-width: 1200px) {
  .i-tile .i-ico { width: 78px; height: 78px; }
}

/* ─── as três dobras de recurso ─── */
.sig-phone img {
  /* era 340px de largura e recorte em 64vh de altura, medidas de retrato */
  max-width: 620px;
  width: 100%;
  max-height: none;
  aspect-ratio: 1536 / 1024;
  /* sombra bem mais discreta: o PNG já tem a dele, e as duas somadas viravam
     uma mancha preta em volta do notebook */
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .5));
}

/* ─── a dobra "imagine" ─── */
/* .imagine-device é uma moldura de celular feita em CSS — borda, raio de 52px
   e gradiente metálico. Como o mockup já vem com o notebook desenhado, a
   moldura precisa sumir por inteiro, senão fica aparelho dentro de aparelho. */
.imagine-device {
  width: min(680px, 92vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.imagine-device img {
  border-radius: 0;
  aspect-ratio: 1536 / 1024;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .5));
}

@media (max-width: 900px) {
  .sig-phone img { max-width: 100%; }
  .imagine-device { width: 100%; }
}

@media (min-width: 1200px) {
  .sig-phone img { max-width: 660px; }
}

/* ─── hero ───
   O título do senthora tinha 21 e 20 caracteres por linha e cabia em 88px.
   A headline da copy nova tem o dobro, e no tamanho original a segunda linha
   passava da largura da tela. Duas correções, e as duas precisam existir:

   - o tamanho cai, com teto em 60px em vez de 88 (e 72 no monitor grande, no
     lugar dos 110px fixos que o CSS original aplica acima de 1200px);
   - `overflow: visible` na linha, porque `.line { overflow: hidden }` existe
     para mascarar a animação de entrada e supõe UMA linha visual; com a frase
     ocupando duas, a máscara cortaria a segunda pela metade. */
.hero-title {
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.08;
  text-wrap: balance;
}
.hero-title .line { overflow: visible; }
.hero-sub { max-width: 620px; }

/* O glifo fantasma no começo da segunda linha.
   `background-clip: text` está aplicado DUAS vezes no CSS de origem: na linha
   `.accent` e em cada `.char` que o JS cria dentro dela. Com a linha inteira
   cabendo em uma largura só, as duas pinturas coincidiam e ninguém percebia.
   Com a frase mais longa, a pintura da linha saía deslocada e vazava — provei
   por eliminação: desligar o degradê da LINHA limpa a tela; desligar o do CHAR
   deixa só o fantasma, o que mostra de quem era a sobra.

   Quem pinta o texto passa a ser só o char. O `:has()` devolve o degradê à
   linha no caso em que o JS não roda e os chars nunca existem (tradutor do
   navegador ligado, `prefers-reduced-motion`) — sem ele, o título sumiria,
   porque `color` continua transparente. */
.hero-title .accent:has(.char),
.cta-title .accent:has(.char) {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

@media (min-width: 1200px) {
  .hero-title { font-size: 72px; }
}

/* ─── esteira de integrações ─── */
/* Era uma esteira de idiomas, com bandeira de país ao lado do nome. Os nomes
   viraram Google Ads, Meta Ads, WhatsApp e afins — e bandeira de país não diz
   nada sobre eles. Escondo a imagem em vez de apagar a tag, para não mexer na
   marcação clonada. */
.lang-chip img { display: none; }
.lang-chip { padding-left: 20px; }

/* ─────────── preços, no molde do linearity.io ───────────
   Medidas vindas da receita extraída (receitas-pricing.json):
   card 272.92 x 551.55 e raio 13.71px; pílula 87x42 com inset de 5px;
   borda de 1px feita por mask-composite em vez de `border`, que é como o
   original consegue o fio claríssimo sem clarear o fundo do card.
   O laranja de lá virou o violeta/rosa que esta página já usa. */

.pricing .pr-sub {
  max-width: 40rem; margin: 0 auto clamp(28px, 4vh, 44px);
  color: var(--muted); font-size: 16px; line-height: 1.6; text-align: center;
}

/* ── alternador ── */
.pr-toggle {
  position: relative; display: inline-flex; align-items: center;
  padding: 5px; margin: 0 auto clamp(34px, 5vh, 64px);
  border-radius: 9999px; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.pr-pill {
  position: absolute; left: 5px; top: 5px; height: 42px;
  border-radius: 9999px; background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), width .4s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
/* a barra borrada por baixo da pílula — no original é um degradê de quatro
   paradas; aqui são as duas cores da página */
.pr-pill::after {
  content: ''; position: absolute; left: 22px; bottom: -10px;
  width: 77px; height: 13px; border-radius: 9999px; filter: blur(22px);
  background: linear-gradient(to right, var(--violet), var(--pink));
}
.pr-opt {
  position: relative; z-index: 1; height: 42px; padding: 0 20px;
  border: 0; background: none; cursor: pointer;
  border-radius: 9999px; color: var(--muted);
  font: 600 14px/1 inherit; letter-spacing: .01em;
  transition: color .3s;
}
.pr-opt.is-active { color: #fff; }

/* ── grade ── */
.pr-grid {
  display: grid; gap: 18px; max-width: var(--container); margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  text-align: left;
}

.pr-card {
  position: relative; isolation: isolate;
  padding: 26px 24px 30px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 42%);
  display: flex; flex-direction: column;
}
/* o fio de 1px: dois degradês recortados um do outro, para a borda existir
   sem que o `border` clareie a caixa inteira */
.pr-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 40%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: -1;
}
.pr-card.is-popular::before {
  background: linear-gradient(180deg, var(--violet), rgba(154, 138, 251, .12) 55%);
}

.pr-tag {
  color: var(--violet); font-size: 11px; font-weight: 800; letter-spacing: .18em;
  margin-bottom: 6px;
}
.pr-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.pr-desc { color: var(--muted); font-size: 13.5px; line-height: 1.5; min-height: 40px; margin-bottom: 20px; }

.pr-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 46px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
}
.pr-price-sob { font-size: 34px; }
.pr-cifra { font-size: 20px; font-weight: 500; align-self: flex-start; padding-top: 6px; }
.pr-old {
  color: var(--muted); font-size: 26px; font-weight: 500;
  text-decoration-thickness: 2px; margin-right: 8px;
}
.pr-per { color: var(--muted); font-size: 13px; margin-top: 8px; }
.pr-bill { color: rgba(164, 157, 181, .7); font-size: 12px; margin-top: 2px; }

.pr-btn {
  display: block; margin: 22px 0 20px; padding: 12px 18px;
  border-radius: 9999px; text-align: center; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--text);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  transition: background .25s, transform .25s;
}
.pr-btn:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.pr-btn.is-primary {
  color: #fff; background: linear-gradient(120deg, var(--violet), var(--pink));
  box-shadow: 0 10px 30px rgba(154, 138, 251, .34);
}

.pr-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.pr-list li {
  position: relative; padding-left: 20px;
  color: var(--muted-2); font-size: 13.5px; line-height: 1.45;
}
.pr-list li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--pink));
}

@media (max-width: 980px) {
  .pr-grid { grid-template-columns: 1fr; max-width: 420px; }
  .pr-desc { min-height: 0; }
}

/* ─── cartão-estatística do Dona OS ───
   O número original era curto ("24 horas"); "Operar melhor" é largo e
   espremia o parágrafo ao lado em uma palavra por linha. Empilhado fica
   legível em qualquer largura. */
.imagine-stat { flex-direction: column; align-items: flex-start; gap: 10px; }
.imagine-stat .stat-num { font-size: clamp(30px, 3.4vw, 44px); }

/* ─── celular dos passos ───
   O .step-video original era um screencast LARGO, e o CSS o encaixava na
   moldura com width 220% e left -60% — recorte de vídeo deitado em moldura em
   pé. A tela da Dona já é vertical na proporção da moldura, então essas
   contas jogavam a imagem para fora do quadro (por isso a moldura aparecia
   vazia). Aqui a imagem simplesmente preenche a moldura. */
.phone-frame img.step-video {
  width: 100%; height: 100%;
  left: 0; top: 0;
  object-fit: cover;
}

/* ─────────── comparação — integração x fragmentação ───────────
   Mesmo vocabulário visual dos cards de preço: superfície translúcida e fio
   de 1px por mask-composite. */
.compare { padding: var(--space-section) var(--space-inline); text-align: center; }
.compare-title { font-size: var(--fs-h2); line-height: 1.1; margin-bottom: var(--space-title); }
.compare-title .dim { color: var(--muted); }

.compare-wrap { max-width: 760px; margin: 0 auto; overflow-x: auto; }
.compare-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  position: relative; isolation: isolate; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 42%);
  font-size: 14px;
}
.compare-table th, .compare-table td {
  padding: 13px 20px; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.compare-table thead th {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: rgba(255, 255, 255, .03);
}
.compare-table thead th:last-child { color: var(--violet); }
.compare-table tbody th { font-weight: 600; color: var(--text); }
.compare-table tbody td { color: var(--muted); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td.sim {
  color: transparent; font-weight: 800; text-align: center;
  background-image: linear-gradient(120deg, var(--violet), var(--pink));
  -webkit-background-clip: text; background-clip: text;
}
.compare-note {
  max-width: 560px; margin: 22px auto 0;
  color: var(--muted); font-size: 12.5px; line-height: 1.6;
}

/* No celular a tabela era mais larga que a tela e a coluna Dona IA ficava
   cortada, dependendo de rolagem horizontal. Compactada, as três colunas
   cabem inteiras no quadro. */
@media (max-width: 640px) {
  .compare { padding-left: 14px; padding-right: 14px; }
  .compare-table { font-size: 12.5px; }
  .compare-table th, .compare-table td { padding: 11px 8px; }
  .compare-table thead th { font-size: 9px; letter-spacing: .06em; }
  .compare-table tbody th { font-size: 13px; }
}

/* ─────────── passos: mockup à esquerda, texto à direita ───────────
   O mockup novo (celular com os ícones do Meta, Google e WhatsApp flutuando)
   já traz o aparelho e a cena inteira, então a moldura CSS (.phone-frame)
   deixa de recortar: vira só o contêiner da imagem, sem borda, sombra ou
   overflow. Como a perspectiva do aparelho aponta para a direita, ele passa
   para a coluna esquerda e a lista de passos vai para a direita. */
@media (min-width: 901px) {
  .steps-body { grid-template-columns: minmax(320px, 460px) 1fr; }
  .steps-phone { order: -1; }
}
.phone-frame {
  width: min(430px, 78vw); aspect-ratio: 1024 / 1536;
  border-radius: 0; overflow: visible;
  box-shadow: none;
}
/* O fundo do mockup não é o fundo da página; duas máscaras interseccionadas
   (uma horizontal, uma vertical) dissolvem as quatro bordas num fade longo,
   sem retângulo visível. A rampa de baixo é maior porque é onde o brilho
   claro da imagem mais destoa do fundo escuro. */
.phone-frame img.step-video {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
/* o brilho radial atrás da moldura fica mais discreto: a cena já tem luz própria */
.phone-glow { opacity: .55; }
@media (max-width: 900px) {
  .phone-frame { width: min(250px, 62vw); }
}

/* ─────────── preço em card único ───────────
   Um plano só, super completo, centralizado. */
.pr-grid { grid-template-columns: min(430px, 100%); justify-content: center; }
.pr-desc { min-height: 0; }

/* QR codes de loja e crédito "Feito por" fora (escondidos por CSS: o JS
   anima o .qr-box na entrada da seção). */
.qr-box, .footer-credit { display: none !important; }

/* ─────────── linha de progresso da rolagem ───────────
   Fio fino no topo, sempre visível, com a rampa violeta→rosa da marca;
   preenche da esquerda para a direita conforme a página desce (o JS ajusta o
   scaleX — transform não dispara layout, então acompanha o scroll de graça). */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
  box-shadow: 0 0 12px rgba(154, 138, 251, .55);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}

/* ─────────── blindagem mobile ───────────
   O canvas do fundo (#gl, three.js) vem do clone com width:1440px inline; o
   JS o redimensiona, mas se falhar (ou demorar) num aparelho, os 1440px
   estouram a largura e navegadores como o do MIUI AFASTAM O ZOOM para caber
   o conteúdo — a página inteira encolhe. Aqui o canvas fica preso ao
   viewport e qualquer estouro horizontal é cortado em vez de alargar a
   página. */
#gl { width: 100vw !important; height: 100vh !important; max-width: 100vw; }
html, body { overflow-x: clip; }

/* ─────────── conectores encolhidos ───────────
   Os .connector abrigavam as linhas de circuito em "S" entre as seções.
   Com as linhas escondidas (pedido do usuário), cada bloco virou 36vh
   (324px) de vazio puro, sete vezes na página. Encolhidos para um respiro
   fixo — inclusive o da seção de frases, que tinha regra própria. */
.connector, .languages + .connector { height: 120px; min-height: 120px; }
@media (max-width: 900px) {
  .connector, .languages + .connector { height: 70px; min-height: 70px; }
}

/* ─────────── nav enxuta: só Entrar + Testar 7 dias ───────────
   Links e menu hambúrguer escondidos por CSS (o JS referencia o menu, então
   remover os nós quebraria a rotina). O Entrar é um fantasma em pílula, no
   mesmo tamanho do CTA. */
.nav .nav-link, .nav .nav-menu { display: none; }
.nav-login {
  font-size: 13px; padding: 10px 22px; border-radius: 100px;
  color: var(--text); font-weight: 600; white-space: nowrap;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: transform .3s, background .3s, box-shadow .3s;
}
.nav-login:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

/* CTA da nav no mesmo padrão do botão primário: rampa violeta→rosa, fio de
   1px em fade, glow que respira e varredura de luz no hover. Texto branco
   (o original era escuro sobre lilás, com !important — daí o !important). */
.nav-cta {
  position: relative; overflow: hidden;
  color: #fff !important;
  background: linear-gradient(120deg, var(--violet), var(--pink) 52%);
  background-size: 170% 100%; background-position: 0% 0;
  box-shadow: 0 6px 20px rgba(204, 51, 102, .35);
  animation: nav-respira 3s ease-in-out infinite;
  transition: transform .3s, box-shadow .3s, background-position .45s;
}
.nav-cta font { color: #fff !important; }
.nav-cta:hover {
  animation: none;
  background-position: 65% 0;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(204, 51, 102, .55);
}
@keyframes nav-respira {
  50% { box-shadow: 0 6px 26px rgba(154, 138, 251, .5); }
}
.nav-cta::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .08) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.nav-cta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
.nav-cta:hover::after {
  transform: translateX(130%);
  transition: transform .65s ease;
}

/* "Teste agora" do preço no mesmo padrão: rampa com o rosa presente, fio de
   1px em fade, glow que respira e varredura de luz no hover. */
.pr-btn.is-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--violet), var(--pink) 52%);
  background-size: 170% 100%; background-position: 0% 0;
  box-shadow: 0 10px 30px rgba(204, 51, 102, .35);
  animation: nav-respira 3s ease-in-out infinite;
  transition: transform .25s, box-shadow .25s, background-position .45s;
}
.pr-btn.is-primary:hover {
  animation: none;
  background-position: 65% 0;
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(204, 51, 102, .55);
}
.pr-btn.is-primary::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .08) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.pr-btn.is-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
.pr-btn.is-primary:hover::after {
  transform: translateX(130%);
  transition: transform .65s ease;
}

/* ─────────── botões do hero e do CTA final ───────────
   Os .store-btn eram os badges de loja da senthora (retângulo preto, borda
   branca). Agora: o primário (cadastro) leva a rampa violeta→rosa do
   "Assinar agora", com glow que respira e varredura de luz no hover; o
   "Entrar" (login) vira botão de vidro. */
.store-btn {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s, box-shadow .25s, background .25s, background-position .45s;
}
.store-btn:hover {
  transform: translateY(-2px); background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .3);
}

.store-btn[href="#pricing"] {
  border-color: transparent;
  /* rampa violeta→rosa (o rosa do título), com o rosa chegando de verdade:
     o background-size de 170% só mostra ~59% da rampa, então o stop do rosa
     fica em 52% para ele dominar a metade direita do botão já em repouso */
  background: linear-gradient(120deg, var(--violet), var(--pink) 52%);
  background-size: 170% 100%; background-position: 0% 0;
  box-shadow: 0 10px 30px rgba(204, 51, 102, .35);
  animation: btn-respira 3s ease-in-out infinite;
}
.store-btn[href="#pricing"]:hover {
  animation: none; border-color: transparent;
  background: linear-gradient(120deg, var(--violet), var(--pink) 52%);
  background-size: 170% 100%; background-position: 65% 0;
  box-shadow: 0 14px 44px rgba(204, 51, 102, .55);
}
@keyframes btn-respira {
  50% { box-shadow: 0 10px 40px rgba(154, 138, 251, .5); }
}

/* fio de 1px com fade: aceso na aresta de cima, morre a caminho de baixo —
   mesma receita de mask-composite dos cards de preço */
.store-btn[href="#pricing"]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .08) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* varredura de luz: um facho diagonal atravessa o primário no hover */
.store-btn[href="#pricing"]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
.store-btn[href="#pricing"]:hover::after {
  transform: translateX(130%);
  transition: transform .65s ease;
}

/* ─── mão do hero: dissolve o corte reto do pulso ───
   A geração termina num corte seco na borda de baixo (o pulso bate no limite
   do quadro). O fade esconde essa linha: a imagem morre suave antes da borda. */
.hero-phone img {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .55) 78%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .55) 78%, transparent 92%);
}

/* ─────────── títulos com destaque: sem animação, gradiente do botão ───────────
   O data-split saiu do HTML (hero e CTA), então o JS não fatia mais o título
   em letras: acabou a animação de emergir e, com ela, o gradiente picotado —
   cada letra recebia a rampa violeta→rosa inteira. Agora a linha é um
   elemento só e recebe a MESMA rampa do botão "Assinar agora"
   (.pr-btn.is-primary): linear-gradient(120deg, violeta, rosa), de ponta a
   ponta da linha. */
.hero-title .accent, .cta-title .accent {
  background: linear-gradient(120deg, var(--violet), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* o text-shadow do título vaza POR DENTRO das letras quando o preenchimento
     é transparente (background-clip: text) — era a mancha escura no meio do
     gradiente. Na linha branca a sombra fica, porque o preenchimento opaco a
     cobre. */
  text-shadow: none;
}