/* ==============================================================
   ZapReview — style.css
   Organização:
     1. Tokens (variáveis CSS)
     2. Reset / base
     3. Tipografia
     4. Background (grid geométrica + glow)
     5. Container e utilitários
     6. Botões base
     7. Seções (cada seção tem seu bloco abaixo, na ordem)
   ============================================================== */


/* ============================================
   1. TOKENS
   ============================================ */
:root {
  /* Cores */
  --color-primary: #0260F6;
  --color-primary-soft: #2C7CFB;
  --color-primary-deep: #0044C2;

  --color-bg: #000000;
  --color-bg-elev: #0A0A0C;
  --color-surface: #0F1014;
  --color-surface-2: #16181F;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  --color-text: #FFFFFF;
  --color-text-muted: #A4A8B3;
  --color-text-soft: #6F7380;

  --color-accent-glow: rgba(2, 96, 246, 0.35);

  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.375rem;    /* 22px */
  --fs-xl: 1.75rem;     /* 28px */
  --fs-2xl: 2.5rem;     /* 40px */
  --fs-3xl: 3.25rem;    /* 52px */
  --fs-4xl: 4rem;       /* 64px */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  /* Layout */
  --container-max: 1200px;
  --section-pad-y: clamp(2.75rem, 6vw, 4.5rem);

  /* Bordas e raios */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(2, 96, 246, 0.25), 0 20px 60px rgba(2, 96, 246, 0.25);

  /* Transições */
  --t-fast: 160ms cubic-bezier(.2,.6,.2,1);
  --t-base: 260ms cubic-bezier(.2,.6,.2,1);
}


/* ============================================
   2. RESET / BASE
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}


/* ============================================
   3. TIPOGRAFIA
   ============================================ */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

h1 { font-size: clamp(2.25rem, 5.5vw, var(--fs-4xl)); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.875rem, 4vw, var(--fs-3xl)); font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

.brand-zap {
  color: var(--color-primary);
}

.brand {
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.005em;
}


/* ============================================
   4. BACKGROUND — grid geométrica + glow
   ============================================ */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
  /* fade radial nas bordas para focar o centro */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 90%);
}

/* ============================================
   BG-FLOW — fluxo de energia azul
   3 blobs flutuantes + 2 streams diagonais sutis
   Aplica mix-blend-mode: screen p/ se somar com glow
   ============================================ */
.bg-flow {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  /* CRÍTICO: isola o stacking context — sem isso, o mix-blend-mode
     dos blobs recalcula o blend com TODA a página a cada repaint, causando
     flicker quando estrelas (com drop-shadow) animam acima */
  isolation: isolate;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, rgba(0,0,0,0.4) 80%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 40%, rgba(0,0,0,0.4) 80%, transparent 100%);
}

.flow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  /* sem transform: translateZ(0) — os keyframes flow1/2/3 sobrescrevem
     mesmo. will-change é suficiente pra promover camada GPU */
}

.flow-blob.fb-1 {
  width: 720px;
  height: 720px;
  background: radial-gradient(circle at center, rgba(2, 96, 246, 0.28) 0%, rgba(2, 96, 246, 0.08) 45%, transparent 75%);
  top: -15%;
  left: -10%;
  animation: flow1 28s ease-in-out infinite;
}

.flow-blob.fb-2 {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle at center, rgba(110, 168, 255, 0.22) 0%, rgba(2, 96, 246, 0.07) 45%, transparent 75%);
  top: 20%;
  right: -18%;
  animation: flow2 34s ease-in-out infinite;
}

.flow-blob.fb-3 {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at center, rgba(0, 68, 194, 0.30) 0%, rgba(2, 96, 246, 0.08) 50%, transparent 78%);
  bottom: -25%;
  left: 35%;
  animation: flow3 40s ease-in-out infinite;
}

@keyframes flow1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(35vw, 18vh) scale(1.18); }
  66%      { transform: translate(18vw, 48vh) scale(0.92); }
}
@keyframes flow2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-32vw, 28vh) scale(1.15); }
}
@keyframes flow3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-22vw, -34vh) scale(1.12); }
  80%      { transform: translate(18vw, -12vh) scale(0.94); }
}

/* streams: faixas finas diagonais que "fluem" na diagonal,
   simulando energia escorrendo pelo cenário */
.flow-stream {
  position: absolute;
  width: 130%;
  height: 240px;
  left: -15%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(2, 96, 246, 0.06) 30%,
    rgba(110, 168, 255, 0.10) 50%,
    rgba(2, 96, 246, 0.06) 70%,
    transparent 100%
  );
  filter: blur(60px);
  mix-blend-mode: screen;
  transform-origin: center;
  opacity: 0.6;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.flow-stream.fs-1 {
  top: 18%;
  transform: rotate(-8deg);
  animation: stream1 18s ease-in-out infinite;
}
.flow-stream.fs-2 {
  bottom: 12%;
  transform: rotate(6deg);
  animation: stream2 22s ease-in-out infinite;
}

@keyframes stream1 {
  0%, 100% { transform: translateX(-8%) rotate(-8deg); opacity: 0.6; }
  50%      { transform: translateX(8%)  rotate(-10deg); opacity: 1; }
}
@keyframes stream2 {
  0%, 100% { transform: translateX(8%)  rotate(6deg);  opacity: 0.5; }
  50%      { transform: translateX(-8%) rotate(8deg);  opacity: 0.95; }
}

.bg-glow {
  position: fixed;
  top: -10%;
  left: 50%;
  width: 90vw;
  max-width: 1200px;
  height: 700px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(2, 96, 246, 0.20) 0%, transparent 60%);
  filter: blur(50px);
  opacity: 0.45;
  transform-origin: 50% 30%;
  animation: glow-breathe 11s ease-in-out infinite;
  will-change: transform, opacity;
}

/* glow secundário — bem sutil */
.bg-glow::after {
  content: '';
  position: absolute;
  inset: 10% 20%;
  background: radial-gradient(ellipse at 30% 60%, rgba(2, 96, 246, 0.13) 0%, transparent 70%);
  filter: blur(40px);
  animation: glow-drift 16s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.32;
  }
  50% {
    transform: translateX(-50%) scale(1.12);
    opacity: 0.55;
  }
}

@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50%      { transform: translate(6%, 3%); opacity: 0.7; }
}


/* ============================================
   5. CONTAINER / UTILITÁRIOS
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 2rem);
  padding-right: clamp(1.25rem, 4vw, 2rem);
}

.section {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  position: relative;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-soft);
  background: rgba(2, 96, 246, 0.08);
  border: 1px solid rgba(2, 96, 246, 0.25);
  border-radius: var(--radius-pill);
}

.section-title {
  margin-top: 1.25rem;
  max-width: 760px;
}

.section-subtitle {
  margin-top: 1.25rem;
  max-width: 640px;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* CTA inline pra colocar no fim de seções intermediárias.
   Botão centralizado + meta line + halo azul sutil pra atrair atenção
   sem ser tão grande quanto o CTA Final. */
.section-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  text-align: center;
}

/* halo azul radial atrás do botão — chama atenção sem precisar de container */
.section-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 80%);
  height: 100px;
  background: radial-gradient(ellipse at center, rgba(2, 96, 246, 0.22) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

.section-cta-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  letter-spacing: 0.01em;
}
.section-cta-meta strong {
  color: var(--color-text-muted);
  font-weight: 600;
}


/* Skip-link (acessibilidade): invisível até receber foco via teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: 9999;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  outline: 2px solid #fff;
  outline-offset: 2px;
  text-decoration: none;
}


/* ============================================
   REVEAL ANIMATIONS
   Use: adicionar classe .reveal / .reveal-up /
        .reveal-down / .reveal-scale / .reveal-blur
        nos elementos. Definir --reveal-delay inline.
   JS no fim do body adiciona .is-visible quando entra.
   ============================================ */
.reveal,
.reveal-up,
.reveal-down,
.reveal-scale,
.reveal-blur {
  opacity: 0;
  transition:
    opacity   0.9s cubic-bezier(.22, .8, .36, 1),
    transform 0.9s cubic-bezier(.22, .8, .36, 1),
    filter    0.9s cubic-bezier(.22, .8, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.reveal,
.reveal-up   { transform: translateY(28px); }
.reveal-down { transform: translateY(-20px); }
.reveal-scale{ transform: scale(0.94); }
.reveal-blur { filter: blur(10px); transform: translateY(18px); }

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}
.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-down, .reveal-scale, .reveal-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}


/* ============================================
   6. BOTÕES BASE
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform var(--t-fast), background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base);
  white-space: nowrap;
  user-select: none;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primário — azul ZapReview, com shine + glow respirando */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-primary) 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 24px rgba(2, 96, 246, 0.35),
    0 0 0 1px rgba(110, 168, 255, 0.0);
  animation: btn-glow-pulse 2.6s ease-in-out infinite;
}

/* anel sutil de luz que respira em volta */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(110, 168, 255, 0.55), rgba(2, 96, 246, 0.0));
  z-index: -1;
  filter: blur(10px);
  opacity: 0.8;
  animation: btn-halo 2.6s ease-in-out infinite;
}

/* faixa de reflexo varrendo a cada ~2.4s */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%
  );
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
  animation: btn-shine 2.4s ease-in-out infinite;
}

.btn-primary:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 40px rgba(2, 96, 246, 0.6),
    0 0 0 1px rgba(110, 168, 255, 0.4);
}
.btn-primary:hover::after {
  animation-duration: 1.4s;
}

@keyframes btn-glow-pulse {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18) inset,
      0 8px 24px rgba(2, 96, 246, 0.35);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.22) inset,
      0 12px 38px rgba(2, 96, 246, 0.6),
      0 0 0 1px rgba(110, 168, 255, 0.35);
  }
}

@keyframes btn-halo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

@keyframes btn-shine {
  0%   { transform: translateX(-180%) skewX(-18deg); }
  60%  { transform: translateX(-180%) skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}

/* Secundário — outline sutil */
.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}

.btn-lg {
  padding: 1.1rem 2rem;
  font-size: var(--fs-base);
}


/* ============================================
   7. SEÇÕES
   (cada seção será adicionada abaixo, em ordem)
   ============================================ */

/* ============================================
   1. HERO
   ============================================ */

.hero {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  background: #000; /* segurança caso shader não carregue */
}

/* canvas do shader cobre todo o hero (apenas desktop) */
.hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   METEOROS MOBILE — animação CSS pura (sem shader WebGL)
   GPUs móveis variam muito; CSS transforms são compositor-only,
   100% smooth em qualquer device.
   ═══════════════════════════════════════════════════════════ */

.hero-meteors-mobile {
  display: none;  /* desktop usa o canvas shader */
}

@media (max-width: 900px) {
  .hero-shader {
    display: none !important;
  }
  .hero-meteors-mobile {
    display: block;
  }
}

.hero-meteors-mobile {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* fundo sólido — as nebulosas (.nebula-layer) animadas é que dão cor agora */
  background: linear-gradient(180deg, #020308 0%, #03060F 50%, #020308 100%);
}

/* twinkles — pontos brancos sutis pulsando ao fundo, dão profundidade cósmica */
.hero-meteors-mobile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 255, 255, 0.65) 50%, transparent),
    radial-gradient(1px 1px at 60% 65%, rgba(255, 255, 255, 0.55) 50%, transparent),
    radial-gradient(2px 2px at 40% 78%, rgba(180, 210, 255, 0.55) 50%, transparent),
    radial-gradient(1px 1px at 78% 28%, rgba(255, 255, 255, 0.55) 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 70%, rgba(255, 255, 255, 0.65) 50%, transparent),
    radial-gradient(1px 1px at 12% 65%, rgba(180, 210, 255, 0.55) 50%, transparent),
    radial-gradient(1px 1px at 50% 12%, rgba(255, 255, 255, 0.55) 50%, transparent),
    radial-gradient(1.5px 1.5px at 25% 90%, rgba(255, 255, 255, 0.55) 50%, transparent),
    radial-gradient(1px 1px at 92% 45%, rgba(180, 210, 255, 0.55) 50%, transparent);
  animation: css-twinkle 4s ease-in-out infinite alternate;
}

@keyframes css-twinkle {
  from { opacity: 0.45; }
  to   { opacity: 0.95; }
}

/* meteoro: linha fina com gradiente do tail (transparente) ao head (branco brilhante).
   Todos meteoros usam o MESMO ângulo de 135° (45° down-left). */
.css-meteor {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(110, 168, 255, 0.0) 25%,
    rgba(110, 168, 255, 0.30) 55%,
    rgba(170, 215, 255, 0.70) 80%,
    rgba(225, 240, 255, 0.95) 95%,
    #ffffff 100%
  );
  filter:
    drop-shadow(0 0 3px rgba(200, 225, 255, 0.85))
    drop-shadow(0 0 8px rgba(110, 168, 255, 0.60))
    drop-shadow(0 0 18px rgba(2, 96, 246, 0.40));
  opacity: 0;
  will-change: transform, opacity;
}

/* 10 meteoros CALMOS, espalhados pela lateral direita E pelo topo.
   Velocidade unificada (~3s, similar ao "meteoro lento" que aparece bem visível).
   Stagger generoso (0.6s entre cada) → sem efeito rajada, fluxo natural. */

/* ─── 3 meteoros pela LATERAL DIREITA (espalhados top 12% a 55%) ─── */
.css-meteor.m-1 {
  top: 12%; right: -100px; width: 100px;
  animation: css-meteor-fall 2.9s linear 0s infinite;
}
.css-meteor.m-2 {
  top: 32%; right: -110px; width: 105px;
  animation: css-meteor-fall 4.2s linear 0.8s infinite;
}
.css-meteor.m-3 {
  top: 55%; right: -100px; width: 95px;
  animation: css-meteor-fall 3.3s linear 1.6s infinite;
}

/* ─── 3 meteoros pelo TOPO (espalhados right 4% a 32%) ─── */
.css-meteor.m-4 {
  top: -100px; right: 4%;  width: 105px;
  animation: css-meteor-fall 3.7s linear 2.4s infinite;
}
.css-meteor.m-5 {
  top: -90px;  right: 18%; width: 95px;
  animation: css-meteor-fall 2.8s linear 3.2s infinite;
}
.css-meteor.m-6 {
  top: -100px; right: 32%; width: 100px;
  animation: css-meteor-fall 4.0s linear 4.0s infinite;
}

/* Trajetória diagonal fixa: rotate(135deg) = head aponta down-left,
   translate(-115vw, 115vh) = move down-left ~45° abaixo da horizontal.
   Direção do trail e direção de movimento alinhadas. */
@keyframes css-meteor-fall {
  0%   { transform: translate(0, 0) rotate(135deg);          opacity: 0; }
  6%   {                                                       opacity: 1; }
  85%  {                                                       opacity: 1; }
  100% { transform: translate(-115vw, 115vh) rotate(135deg);  opacity: 0; }
}

/* ═══ NEBULOSAS — camadas grandes drifting (responsável por toda a cor de fundo)
   Cores variadas (azul ZapReview / azul claro / violeta-azul) pra criar contraste
   entre as zonas atmosféricas. Alpha alto + blur menor = visíveis e definidas. ═══ */
.nebula-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}
/* truque: usa as props CSS individuais `translate` e `scale` (não o `transform`
   shorthand) — assim as 2 animações (drift + breathe) podem rodar em paralelo
   sem conflito (cada uma anima uma prop diferente). */
.nebula-1 {
  width: 75vw;
  height: 75vw;
  top: -28%;
  left: -22%;
  background: radial-gradient(circle, rgba(2, 96, 246, 0.95) 0%, rgba(2, 96, 246, 0.35) 35%, transparent 65%);
  animation:
    nebula-drift-1 18s ease-in-out infinite alternate,
    nebula-breathe 5s ease-in-out infinite;
}
.nebula-2 {
  width: 65vw;
  height: 65vw;
  bottom: -28%;
  right: -22%;
  background: radial-gradient(circle, rgba(110, 168, 255, 0.85) 0%, rgba(110, 168, 255, 0.30) 35%, transparent 65%);
  animation:
    nebula-drift-2 22s ease-in-out infinite alternate,
    nebula-breathe 6.5s ease-in-out infinite -1.5s;
}
.nebula-3 {
  width: 80vw;
  height: 80vw;
  top: 30%;
  left: 25%;
  background: radial-gradient(circle, rgba(80, 130, 240, 0.70) 0%, rgba(40, 80, 200, 0.25) 40%, transparent 70%);
  animation:
    nebula-drift-3 26s ease-in-out infinite alternate,
    nebula-breathe 7.5s ease-in-out infinite -3s;
}

/* drift = movimento lento de translação (anima `translate` individual) */
@keyframes nebula-drift-1 {
  to { translate: 25vw 18vh; }
}
@keyframes nebula-drift-2 {
  to { translate: -22vw -15vh; }
}
@keyframes nebula-drift-3 {
  to { translate: -25vw 22vh; }
}

/* breathe = pulsação de escala (anima `scale` individual, paralelo ao drift) */
@keyframes nebula-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.10; }
}


/* ═══ ESTRELAS BRILHANTES — focos visuais com pulse dramático ═══ */
.bright-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 4px #ffffff,
    0 0 9px rgba(190, 220, 255, 0.85),
    0 0 18px rgba(110, 168, 255, 0.55),
    0 0 30px rgba(2, 96, 246, 0.30);
  z-index: 3;
  animation: bright-star-pulse 3.5s ease-in-out infinite;
  will-change: transform, opacity;
}
.bright-star-1 { top: 14%; left: 22%;  animation-delay: 0s;   }
.bright-star-2 { top: 38%; right: 18%; animation-delay: 0.8s; }
.bright-star-3 { top: 26%; right: 40%; animation-delay: 1.5s; }
.bright-star-4 { top: 68%; left: 28%;  animation-delay: 2.1s; }
.bright-star-5 { top: 84%; left: 62%;  animation-delay: 0.4s; }
.bright-star-6 { top: 52%; left: 9%;   animation-delay: 1.1s; }

@keyframes bright-star-pulse {
  0%, 100% { opacity: 0.30; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.6); }
}


/* ═══ COMETAS GRANDES — raros, dramáticos, trail longo ═══ */
.big-comet {
  position: absolute;
  height: 2.5px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(110, 168, 255, 0.05) 25%,
    rgba(110, 168, 255, 0.25) 55%,
    rgba(170, 215, 255, 0.65) 80%,
    rgba(225, 240, 255, 0.95) 95%,
    #ffffff 100%
  );
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 11px rgba(110, 168, 255, 0.70))
    drop-shadow(0 0 24px rgba(2, 96, 246, 0.50));
  opacity: 0;
  z-index: 5;
  will-change: transform, opacity;
}
/* cometa 1 entra pela direita, cometa 2 entra pelo topo — variedade */
.big-comet-1 {
  top: 24%; right: -200px; width: 180px;
  animation: big-comet-fall 7s linear 5s infinite;
}
.big-comet-2 {
  top: -180px; right: 35%; width: 200px;
  animation: big-comet-fall 8s linear 13s infinite;
}

@keyframes big-comet-fall {
  0%   { transform: translate(0, 0) rotate(135deg);          opacity: 0; }
  4%   {                                                       opacity: 1; }
  92%  {                                                       opacity: 1; }
  100% { transform: translate(-130vw, 130vh) rotate(135deg);  opacity: 0; }
}


/* respeita prefers-reduced-motion: estático, sem animação */
@media (prefers-reduced-motion: reduce) {
  .css-meteor,
  .nebula-layer,
  .bright-star,
  .big-comet,
  .hero-meteors-mobile::before {
    animation: none !important;
  }
  .css-meteor,
  .big-comet { opacity: 0; }
}

/* vinheta + escurecedor global do shader (pra não ficar claro demais) */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, transparent 45%, rgba(0,0,0,0.55) 100%),
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42));
}

/* No mobile, vinheta MUITO mais sutil pra não esconder as nebulosas atmosféricas */
@media (max-width: 900px) {
  .hero-vignette {
    background:
      radial-gradient(ellipse at 50% 50%, transparent 0%, transparent 70%, rgba(0,0,0,0.20) 100%);
  }
}

/* fade-out final do hero → preto sólido pra próxima seção
   (no mobile a transição começa mais cedo, por dentro do hero) */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 55%,
    var(--color-bg) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* --- Top nav (logo + CTA) --- */
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.hero-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.hero-logo img {
  height: 32px;
  width: auto;
  display: block;
}

/* --- Hero layout --- */
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 600px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #DDE6FF;
  background: rgba(2, 96, 246, 0.10);
  border: 1px solid rgba(2, 96, 246, 0.30);
  border-radius: var(--radius-pill);
}

.hero-eyebrow .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.04); }
}

.hero-title {
  margin-top: 1.4rem;
  font-size: clamp(2.4rem, 5.6vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  /* contain layout: muda de tamanho do título não afeta layout externo */
  contain: layout style;
  /* Entrada própria (rise + fade + scale sutil), coreografada pra completar
     ~1.25s — exatamente quando as estrelas começam o pop-in (1.30s).
     fill-mode both => fica invisível durante o delay (sem flash). */
  animation: hero-title-in 0.95s cubic-bezier(.22, .8, .36, 1) 0.30s both;
}

@keyframes hero-title-in {
  0%   { opacity: 0; transform: translateY(22px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   ANIMAÇÃO DO TÍTULO: "uma ★" → "★★★★★"
   - "uma " colapsa (max-width + opacity + scale)
   - 4 estrelas laterais expandem de dentro pra fora
   - Glow pulsa em onda esquerda → direita
   ============================================ */

/* container das 5 estrelas — inline-block + baseline natural */
.ta-stars {
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  margin: 0 0.05em;
}

/* cada estrela: começa invisível, faz pop-in com bounce, depois entra em loop
   contínuo de glow em onda. Stagger por :nth-child controla o ritmo */
.ta-star {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: baseline;
  background: linear-gradient(180deg, #FFF1B8 0%, #FFC83D 50%, #FFB800 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transform-origin: center;
  filter:
    drop-shadow(0 0 10px rgba(255, 200, 60, 0.78))
    drop-shadow(0 0 22px rgba(255, 184, 0, 0.50))
    drop-shadow(0 0 40px rgba(255, 150, 0, 0.28));
  /* estado inicial — invisível antes da entrada */
  opacity: 0;
  transform: scale(0);
  /* 2 animações: 1) pop-in one-shot (forwards) 2) glow contínuo (infinite) */
  animation:
    star-pop-in 0.7s cubic-bezier(.34, 1.6, .55, 1) forwards,
    star-glow-wave 2.8s ease-in-out infinite;
  will-change: filter, opacity, transform;
  backface-visibility: hidden;
}

/* timing por estrela:
   - reveal do título completa em ~1.25s, então pop-in começa em 1.30s
   - cada estrela com stagger de 0.12s (typing left→right)
   - glow contínuo arranca depois da entrada (~2.0s+) também escalonado */
.ta-star:nth-child(1) { animation-delay: 1.30s, 2.00s; }
.ta-star:nth-child(2) { animation-delay: 1.42s, 2.18s; }
.ta-star:nth-child(3) { animation-delay: 1.54s, 2.36s; }
.ta-star:nth-child(4) { animation-delay: 1.66s, 2.54s; }
.ta-star:nth-child(5) { animation-delay: 1.78s, 2.72s; }

@keyframes star-pop-in {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* glow pulsa só no drop-shadow (não em transform, evita conflito) */
@keyframes star-glow-wave {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(255, 200, 60, 0.75))
      drop-shadow(0 0 22px rgba(255, 184, 0, 0.50))
      drop-shadow(0 0 40px rgba(255, 150, 0, 0.25));
  }
  50% {
    filter:
      drop-shadow(0 0 16px rgba(255, 220, 120, 1))
      drop-shadow(0 0 32px rgba(255, 184, 0, 0.80))
      drop-shadow(0 0 58px rgba(255, 150, 0, 0.50));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-star {
    opacity: 1;
    transform: scale(1);
    animation: none !important;
  }
}

.hero-title .text-grad {
  background: linear-gradient(180deg, #6EA8FF 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero-sub {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 560px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.hero-trust-stars {
  color: #FFC83D;
  font-size: 1rem;
  letter-spacing: 0.15em;
  filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.5));
}

.hero-trust-text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.hero-trust-text strong { color: var(--color-text); font-weight: 600; }

/* --- Hero visual mockup (WhatsApp → Google) --- */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.visual-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(22, 24, 31, 0.85) 0%, rgba(15, 16, 20, 0.85) 100%);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  position: relative;
}

.visual-card.whats {
  transform: rotate(-1.5deg);
  animation: card-float 6s ease-in-out infinite;
}

.visual-card.google {
  transform: rotate(1.5deg);
  animation: card-float 6s ease-in-out infinite;
  animation-delay: -3s;
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px rgba(2, 96, 246, 0.25),
    0 20px 60px rgba(2, 96, 246, 0.18);
}

@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, -1.5deg)); }
  50%      { transform: translateY(-8px) rotate(var(--r, -1.5deg)); }
}
.visual-card.whats  { --r: -1.5deg; }
.visual-card.google { --r:  1.5deg; }

.vc-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.85rem;
}

.vc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.vc-avatar.google {
  background: linear-gradient(135deg, #4285F4 0%, #0260F6 100%);
  font-weight: 700;
  color: #fff;
}

.vc-head-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.vc-head-info strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.vc-head-info small {
  font-size: 0.75rem;
  color: var(--color-text-soft);
}

.vc-bubble {
  background: rgba(37, 211, 102, 0.10);
  border: 1px solid rgba(37, 211, 102, 0.20);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-size: var(--fs-sm);
  color: #E5E7EB;
  line-height: 1.55;
}

.vc-link {
  display: block;
  margin-top: 0.55rem;
  color: #25D366;
  font-size: 0.82rem;
  text-decoration: underline;
  word-break: break-all;
}

.vc-stars-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.vc-stars {
  color: #FFC83D;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  filter: drop-shadow(0 0 8px rgba(255, 200, 60, 0.55));
}

.vc-rating {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
}

.vc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}

.vc-meta .up {
  color: #4ADE80;
  font-weight: 600;
}

/* connector arrow between cards */
.visual-arrow {
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, transparent, var(--color-primary), transparent);
  position: relative;
  opacity: 0.7;
}

.visual-arrow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: translateX(-50%) rotate(45deg);
}

/* (camadas de shooting stars / twinkle removidas — substituídas pelo shader WebGL) */

/* --- Responsivo Hero --- */
@media (max-width: 960px) {
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-template-columns: none;
    gap: 0;
  }
  /* hero-content vira "transparent" no layout, expondo seus filhos
     ao flex pai pra reordenar via order */
  .hero-content { display: contents; }

  /* Ordem mobile:
       1. eyebrow
       2. título
       3. subtítulo  ← meteoros visíveis aqui
       4. CTAs       ← logo abaixo do subtítulo
       5. trust
       6. cards      ← já na zona escura (fade-out cobre) */
  .hero-eyebrow { order: 1; }
  .hero-title   { order: 2; }
  .hero-sub     { order: 3; margin-left: auto; margin-right: auto; }
  .hero-ctas    { order: 4; justify-content: center; margin-top: 2rem; }
  .hero-trust   {
    order: 5;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
  .hero-visual  {
    order: 6;
    margin: 3rem auto 0;
    max-width: 480px;
    width: 100%;
  }
  .hero-trust-text { text-align: center; }

  /* Fade-out cobre só a área dos cards: começa no gap após trust,
     escurece rápido para o cards aparecerem em fundo preto */
  .hero::after {
    height: 640px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 14%,
      rgba(0, 0, 0, 0.92) 28%,
      var(--color-bg) 50%,
      var(--color-bg) 100%
    );
  }

  /* sobe um pouco a "câmera" do shader pra que os meteoros fiquem
     mais altos no hero (atrás do subtítulo, não do trust) */
  .hero-shader {
    transform: translateY(-10%);
  }
}

@media (max-width: 540px) {
  .hero-nav { padding-bottom: 1.75rem; }
  .hero-nav .btn { padding: 0.7rem 1.1rem; font-size: var(--fs-xs); }
  .hero-trust {
    flex-direction: column;
    gap: 0.65rem;
  }

  /* cards levemente maiores no mobile */
  .visual-card { max-width: 100%; padding: 1.3rem 1.4rem; }
  .visual-card.whats   { transform: rotate(-1deg); }
  .visual-card.google  { transform: rotate(1deg); }
  .vc-bubble    { font-size: 0.95rem; line-height: 1.55; }
  .vc-stars     { font-size: 1.5rem; }
  .vc-rating    { font-size: 1.2rem; }
  .vc-head-info strong { font-size: var(--fs-md); }
  .vc-avatar    { width: 40px; height: 40px; font-size: 1rem; }
}
/* ============================================
   2. PROBLEMA
   ============================================ */

.problem {
  position: relative;
}

/* Transição suave hero → seção: gradiente preto sólido (continua o fim do
   hero) que vai abrindo aos poucos pra revelar grid+glow do body bg.
   Sem isso, há corte visível entre o preto da hero e a grid abaixo. */
.problem::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 360px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    rgba(0, 0, 0, 0.95) 18%,
    rgba(0, 0, 0, 0.75) 38%,
    rgba(0, 0, 0, 0.45) 60%,
    rgba(0, 0, 0, 0.18) 82%,
    transparent 100%
  );
}

.problem > .container {
  position: relative;
  z-index: 1;
}

/* head padronizado de seção (centralizado) */
.section-head {
  max-width: 760px;
  margin: 0 auto;
}

.section-head .section-title {
  margin-top: 1.4rem;
  margin-left: auto;
  margin-right: auto;
}

.section-head .section-subtitle {
  margin-top: 1.2rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* destaque "perde" no headline — gradient quente sugerindo urgência */
.text-warn {
  background: linear-gradient(180deg, #FFB59A 0%, #FF6B4A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* grid de cards */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.problem-card {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: linear-gradient(180deg, rgba(22, 24, 31, 0.7) 0%, rgba(15, 16, 20, 0.55) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base);
}

.problem-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 110, 90, 0.0) 0%, rgba(255, 110, 90, 0.0) 60%, rgba(255, 110, 90, 0.18) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
}

.problem-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(28, 30, 38, 0.78) 0%, rgba(20, 22, 27, 0.62) 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.problem-card:hover::before { opacity: 1; }

/* ícone com tom quente (amber/coral) — alerta visual sutil */
.problem-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 130, 100, 0.14) 0%, rgba(255, 90, 70, 0.06) 100%);
  border: 1px solid rgba(255, 110, 90, 0.22);
  display: grid;
  place-items: center;
  color: #FF8A6B;
  margin-bottom: 1.4rem;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.problem-card:hover .problem-icon {
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(255, 110, 90, 0.25);
}

.problem-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.85rem;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.problem-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .problem-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .problem::before {
    height: 240px;  /* mais curto no mobile — o hero já tem fade-out longo */
  }
}

@media (max-width: 540px) {
  .section-head .section-title br {
    display: none;
  }
  .problem::before {
    height: 200px;
  }
}
/* ============================================
   3. SOLUÇÃO
   ============================================ */

.solution {
  position: relative;
}

/* layout dos dois caminhos lado-a-lado */
.flow-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  position: relative;
}

/* foco interativo: hover em uma coluna esmaece a outra */
.flow-paths:hover .flow-path:not(:hover) {
  opacity: 0.55;
  transform: scale(0.985);
}

.flow-path {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.55) 0%, rgba(10, 11, 14, 0.35) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity var(--t-base), transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  overflow: hidden;
}

/* glow sutil de cor por trás de cada caminho (positiva = azul/verde, crítica = coral) */
.flow-path::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60%;
  pointer-events: none;
  opacity: 0.35;
  filter: blur(60px);
  z-index: 0;
}

.flow-path--positive::before {
  background: radial-gradient(ellipse at center, rgba(2, 96, 246, 0.55) 0%, transparent 70%);
}

.flow-path--negative::before {
  background: radial-gradient(ellipse at center, rgba(255, 130, 100, 0.45) 0%, transparent 70%);
}

.flow-path:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.flow-path-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.flow-path-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1px solid;
}

.flow-path-tag--good {
  color: #6FCF97;
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.28);
}

.flow-path-tag--warn {
  color: #FF9C7E;
  background: rgba(255, 130, 100, 0.08);
  border-color: rgba(255, 130, 100, 0.28);
}

.flow-path-rating {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  letter-spacing: 0.01em;
}

/* track: stages stacked verticalmente */
.flow-stages {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  z-index: 1;
}

/* linha estática conectando os 3 stages (atrás dos cards) */
.track-line {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: calc(clamp(1.5rem, 2.5vw, 2.25rem) + 28px);
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 12%,
    rgba(255, 255, 255, 0.10) 88%,
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* O .track-line está dentro de .flow-stages, mas left é relativo ao .flow-stages.
   Ajuste pra alinhar com o centro do stage-icon (28px do container interno). */
.flow-stages .track-line {
  left: 27px;
}

/* pulso de energia que desce continuamente — sugere fluxo.
   z-index 0 → atrás dos cards (que tem z-index 1), visível via glassmorphism
   (cards têm bg semi-transparente + backdrop-filter blur) */
.track-pulse {
  position: absolute;
  left: 27px;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -6px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: pulse-travel 4s cubic-bezier(.5, 0, .5, 1) infinite;
  opacity: 0;
}

/* glow expandido — atravessa o glassmorphism dos cards com sutileza */
.track-pulse--good {
  background: #4ADE80;
  box-shadow:
    0 0 12px #4ADE80,
    0 0 28px rgba(74, 222, 128, 0.85),
    0 0 56px rgba(74, 222, 128, 0.6),
    0 0 90px rgba(74, 222, 128, 0.35);
}

.track-pulse--warn {
  background: #FF9C7E;
  box-shadow:
    0 0 12px #FF9C7E,
    0 0 28px rgba(255, 156, 126, 0.85),
    0 0 56px rgba(255, 130, 100, 0.6),
    0 0 90px rgba(255, 130, 100, 0.35);
}

.flow-path--negative .track-pulse {
  animation-delay: -2s; /* defasa pra não ficar sincronizado com a positiva */
}

@keyframes pulse-travel {
  0% {
    top: 6%;
    opacity: 0;
    transform: scale(0.6);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    top: 94%;
    opacity: 0;
    transform: scale(0.6);
  }
}

/* cada stage = card horizontal com ícone + texto.
   bg semi-transparente + backdrop-filter cria o efeito glassmorphism que
   permite o pulso (atrás) brilhar levemente através do card */
.flow-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: rgba(20, 22, 28, 0.55);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
  z-index: 1;
}

.flow-stage:hover {
  transform: translateX(2px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(24, 26, 33, 0.7);
}

.stage-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0;
  border: 1px solid;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.flow-stage:hover .stage-icon {
  transform: scale(1.06);
}

.stage-icon--stars {
  color: #FFC83D;
  background: linear-gradient(180deg, rgba(255, 200, 60, 0.16), rgba(255, 184, 0, 0.06));
  border-color: rgba(255, 200, 60, 0.30);
}

.stage-icon--stars-warn {
  color: #FFB196;
  background: linear-gradient(180deg, rgba(255, 156, 126, 0.14), rgba(255, 130, 100, 0.05));
  border-color: rgba(255, 156, 126, 0.28);
}

.mini-stars {
  font-size: 0.68rem;
  letter-spacing: 0;
  line-height: 1;
  filter: drop-shadow(0 0 6px currentColor);
}

.stage-icon--zap {
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary-deep));
  border-color: rgba(110, 168, 255, 0.40);
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 0 20px rgba(2, 96, 246, 0.25);
}

/* logo do ZapReview dentro do badge azul — força em branco via filtro */
.zap-logo {
  width: 32px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.stage-icon--google {
  background: linear-gradient(135deg, #4285F4 0%, #2563EB 100%);
  border-color: rgba(110, 168, 255, 0.45);
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Inter', sans-serif;
}

.stage-icon--shield {
  color: #FF9C7E;
  background: linear-gradient(135deg, rgba(255, 130, 100, 0.20), rgba(255, 90, 70, 0.08));
  border-color: rgba(255, 130, 100, 0.35);
}

.stage-text {
  flex: 1;
  min-width: 0;
}

.stage-text strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}

.stage-text small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* stage final destacado */
.flow-stage--final {
  position: relative;
}

.flow-path--positive .flow-stage--final {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.10) 0%, rgba(20, 22, 28, 0.55) 100%);
  border-color: rgba(74, 222, 128, 0.22);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.06), 0 12px 36px rgba(74, 222, 128, 0.10);
}

.flow-path--negative .flow-stage--final {
  background: linear-gradient(180deg, rgba(255, 130, 100, 0.10) 0%, rgba(20, 22, 28, 0.55) 100%);
  border-color: rgba(255, 130, 100, 0.22);
  box-shadow: 0 0 0 1px rgba(255, 130, 100, 0.06), 0 12px 36px rgba(255, 130, 100, 0.10);
}

/* mobile-first: pill flui naturalmente abaixo do texto.
   No desktop (>540px) vira absolute no canto superior direito do card. */
.stage-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 0.65rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid;
  white-space: nowrap;
}

@media (min-width: 541px) {
  .stage-pill {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    margin-top: 0;
  }
  /* deixa espaço pro pill absoluto não sobrepor o texto */
  .flow-stage--final .stage-text {
    padding-right: 132px;
  }
}

.stage-pill--good {
  color: #6FCF97;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.30);
}

.stage-pill--warn {
  color: #FFB196;
  background: rgba(255, 130, 100, 0.12);
  border-color: rgba(255, 130, 100, 0.30);
}

@media (max-width: 900px) {
  .flow-paths {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* mobile: pulso ainda alinha com ícone do stage */
  .flow-stages .track-line,
  .flow-stages .track-pulse {
    left: 27px;
  }

  /* hover dim entre os caminhos não faz sentido em touch — desliga */
  .flow-paths:hover .flow-path:not(:hover) {
    opacity: 1;
    transform: none;
  }
}

/* (regra mobile do .stage-pill já é o default mobile-first acima) */
/* ============================================
   4. COMO FUNCIONA
   ============================================ */

.how-it-works {
  position: relative;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  position: relative;
}

/* setas conectoras entre os passos no desktop */
@media (min-width: 901px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 4.5rem;
    right: -1.5rem;
    width: 1.5rem;
    height: 14px;
    background:
      radial-gradient(circle at 0% 50%, var(--color-primary-soft) 0, transparent 30%),
      radial-gradient(circle at 30% 50%, rgba(110, 168, 255, 0.6) 0, transparent 30%),
      radial-gradient(circle at 60% 50%, rgba(110, 168, 255, 0.4) 0, transparent 30%);
    background-size: 8px 4px;
    background-repeat: no-repeat;
    background-position: 0 50%, 33% 50%, 66% 50%;
    z-index: 2;
    pointer-events: none;
  }
  .step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 4.5rem;
    right: -1.7rem;
    transform: translateY(-2px);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--color-primary-soft);
    z-index: 2;
    filter: drop-shadow(0 0 4px rgba(110, 168, 255, 0.6));
  }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.55) 0%, rgba(10, 11, 14, 0.35) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  overflow: hidden;
  isolation: isolate;
}

/* glow sutil azul no topo de cada card (acentua a numeração) */
.step::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(2, 96, 246, 0.30) 0%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  opacity: 0.5;
  transition: opacity var(--t-base);
  pointer-events: none;
}

.step:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(-3px);
}
.step:hover::before { opacity: 1; }

/* numeração 01/02/03 — gradient azul, fonte deslocada */
.step-num {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #6EA8FF 0%, var(--color-primary) 80%, rgba(2, 96, 246, 0.3) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0 18px rgba(2, 96, 246, 0.25));
}

.step-visual {
  margin-bottom: 1.5rem;
}

.step h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.65rem;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.step p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}


/* ============================================
   MOCKUPS — UI fake estilizada de cada passo
   ============================================ */

.mock {
  position: relative;
  background: linear-gradient(180deg, #161821 0%, #0E1015 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 50px rgba(0, 0, 0, 0.5);
}

/* header do mockup (barra de app) */
.mock-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
}

.mock-bar-spacer { flex: 1; }
.mock-bar-meta {
  font-size: 0.68rem;
  color: var(--color-text-soft);
  font-weight: 500;
}

.mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}

.mock-dot-online {
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80, 0 0 0 3px rgba(74, 222, 128, 0.18);
  animation: dot-online 2.4s ease-in-out infinite;
}

@keyframes dot-online {
  0%, 100% { box-shadow: 0 0 8px #4ADE80, 0 0 0 3px rgba(74, 222, 128, 0.18); }
  50%      { box-shadow: 0 0 12px #4ADE80, 0 0 0 6px rgba(74, 222, 128, 0.06); }
}

.mock-app {
  font-weight: 700;
}

.mock-body {
  padding: 1rem;
}


/* ░░░ MOCK 1 — DISPATCH ░░░ */

.mock--dispatch .mock-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  margin-bottom: 0.85rem;
}

.mock-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB59A 0%, #FF6B4A 100%);
  flex-shrink: 0;
  position: relative;
}
.mock-avatar::after {
  content: 'M';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.mock-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mock-name {
  font-size: 0.78rem;
  color: var(--color-text);
  font-weight: 600;
}

.mock-meta {
  font-size: 0.66rem;
  color: var(--color-text-soft);
  letter-spacing: 0;
}

.mock-tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  background: rgba(2, 96, 246, 0.12);
  color: var(--color-primary-soft);
  border: 1px solid rgba(2, 96, 246, 0.25);
  border-radius: var(--radius-pill);
}

.mock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-primary) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: mock-btn-pulse 2.6s ease-in-out infinite;
}

@keyframes mock-btn-pulse {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 4px 14px rgba(2, 96, 246, 0.30);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 8px 28px rgba(2, 96, 246, 0.55),
      0 0 0 1px rgba(110, 168, 255, 0.30);
  }
}

/* shine sweep dentro do botão */
.mock-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%, transparent 100%);
  transform: translateX(-200%) skewX(-18deg);
  animation: mock-btn-shine 3.2s ease-in-out infinite;
}

@keyframes mock-btn-shine {
  0%, 65% { transform: translateX(-200%) skewX(-18deg); }
  100%    { transform: translateX(280%) skewX(-18deg); }
}

.mock-success {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  color: #6FCF97;
  font-weight: 500;
}


/* ░░░ MOCK 2 — RATE ░░░ */

.mock-bar--whats {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-bottom-color: transparent;
  color: white;
}

.mock-whats-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: white;
  flex-shrink: 0;
}

.mock-bar--whats .mock-bar-meta {
  color: rgba(255, 255, 255, 0.7);
}

.mock-bubble {
  position: relative;
  background: rgba(37, 211, 102, 0.10);
  border: 1px solid rgba(37, 211, 102, 0.22);
  border-radius: 14px 14px 14px 4px;
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  color: var(--color-text);
  line-height: 1.5;
}

.mock-link {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: #4ADE80;
  text-decoration: underline;
  word-break: break-all;
}

.mock-stars {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.1rem 0 0.55rem;
}

.mock-star {
  font-size: 1.65rem;
  color: rgba(255, 200, 60, 0.20);
  line-height: 1;
  transition: color 0.3s, filter 0.3s;
  animation: mock-star-fill 5s ease-in-out infinite;
}

.mock-star:nth-child(1) { animation-delay: 0s;    }
.mock-star:nth-child(2) { animation-delay: 0.18s; }
.mock-star:nth-child(3) { animation-delay: 0.36s; }
.mock-star:nth-child(4) { animation-delay: 0.54s; }
.mock-star:nth-child(5) { animation-delay: 0.72s; }

@keyframes mock-star-fill {
  0%, 75%, 100% {
    color: rgba(255, 200, 60, 0.20);
    filter: drop-shadow(0 0 0 transparent);
    transform: scale(1);
  }
  18%, 60% {
    color: #FFC83D;
    filter: drop-shadow(0 0 8px rgba(255, 200, 60, 0.7));
    transform: scale(1.08);
  }
}

.mock-tap {
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-text-soft);
  letter-spacing: 0.01em;
}


/* ░░░ MOCK 3 — RESULT (split Google + Privado) ░░░ */

.mock-result-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  position: relative;
}

.mock-result--google {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.06), transparent 60%);
}

.mock-result--private {
  background: linear-gradient(90deg, rgba(255, 130, 100, 0.06), transparent 60%);
}

.mock-icon-google,
.mock-icon-shield {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.mock-icon-google {
  background: linear-gradient(135deg, #4285F4 0%, #2563EB 100%);
  color: white;
  box-shadow: 0 0 12px rgba(66, 133, 244, 0.4);
}

.mock-icon-shield {
  background: linear-gradient(135deg, rgba(255, 130, 100, 0.30), rgba(255, 90, 70, 0.12));
  border: 1px solid rgba(255, 130, 100, 0.32);
  color: #FF8A6B;
}

.mock-result-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mock-result-text strong {
  font-size: 0.78rem;
  color: var(--color-text);
  margin-bottom: 0.15rem;
  font-weight: 600;
}

.mock-result-text span {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.mock-stars-mini {
  color: #FFC83D !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.4));
}

.mock-pill {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mock-pill--good {
  background: rgba(74, 222, 128, 0.14);
  color: #6FCF97;
  border: 1px solid rgba(74, 222, 128, 0.32);
}

.mock-pill--warn {
  background: rgba(255, 130, 100, 0.14);
  color: #FF9C7E;
  border: 1px solid rgba(255, 130, 100, 0.32);
}

.mock-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}


/* ============================================
   responsivo
   ============================================ */

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
/* ============================================
   5. FUNCIONALIDADES
   ============================================ */

.features {
  position: relative;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.feature-card {
  position: relative;
  padding: clamp(1.4rem, 2.2vw, 1.85rem);
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.55) 0%, rgba(10, 11, 14, 0.35) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  isolation: isolate;
  overflow: hidden;
}

/* border-gradient sutil que aparece no hover (efeito "premium") */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(110, 168, 255, 0.5) 0%, rgba(110, 168, 255, 0) 50%, rgba(110, 168, 255, 0.3) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base);
}

/* glow azul interno sutil no hover */
.feature-card::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 30%;
  width: 50%;
  height: 80px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(2, 96, 246, 0.30) 0%, transparent 70%);
  filter: blur(30px);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.feature-card:hover::before { opacity: 1; }
.feature-card:hover::after  { opacity: 1; }

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(2, 96, 246, 0.18) 0%, rgba(2, 96, 246, 0.05) 100%);
  border: 1px solid rgba(2, 96, 246, 0.30);
  color: var(--color-primary-soft);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.feature-card:hover .feature-icon {
  transform: scale(1.08);
  border-color: rgba(110, 168, 255, 0.50);
  box-shadow: 0 0 24px rgba(2, 96, 246, 0.35);
}

.feature-card h3 {
  font-size: var(--fs-md);
  margin-bottom: 0.55rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text);
  line-height: 1.3;
}

.feature-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 540px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   6. PROVA SOCIAL
   ============================================ */

.proof {
  position: relative;
}

/* ░░░ STATS STRIP ░░░ */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.55) 0%, rgba(10, 11, 14, 0.35) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

/* glow azul radial atrás dos números */
.stats-strip::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(2, 96, 246, 0.18) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

.stat {
  text-align: center;
  position: relative;
}

/* divisor sutil entre stats no desktop */
.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 25%;
  bottom: 25%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}

.stat-num {
  display: block;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #6EA8FF 0%, var(--color-primary) 90%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(2, 96, 246, 0.25));
}

.stat-unit {
  font-size: 0.55em;
  font-weight: 700;
  opacity: 0.9;
  margin-left: 0.05em;
  /* sobrescreve color:transparent herdado do parent (background-clip:text não
     se aplica em filhos) — sem isso o "%" some */
  color: var(--color-primary-soft);
  -webkit-text-fill-color: var(--color-primary-soft);
}

.stat-label {
  display: block;
  margin-top: 0.7rem;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
}


/* ░░░ TESTIMONIALS ░░░ */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.testimonial {
  position: relative;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: linear-gradient(180deg, rgba(22, 24, 31, 0.6) 0%, rgba(15, 16, 20, 0.4) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  isolation: isolate;
  overflow: hidden;
}

.testimonial:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* aspas decorativas grandes — Georgia/serif pra parecer "editorial" */
.testimonial-quote {
  position: absolute;
  top: -1.2rem;
  left: 1rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(110, 168, 255, 0.18);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.testimonial-text {
  position: relative;
  z-index: 1;
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: 1.65;
  margin: 1.25rem 0 1.85rem;
  font-weight: 400;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}

.testimonial-avatar--blue  { background: linear-gradient(135deg, #6EA8FF 0%, #0260F6 100%); box-shadow: 0 0 16px rgba(2, 96, 246, 0.30); }
.testimonial-avatar--coral { background: linear-gradient(135deg, #FFB59A 0%, #FF6B4A 100%); box-shadow: 0 0 16px rgba(255, 107, 74, 0.30); }
.testimonial-avatar--green { background: linear-gradient(135deg, #6FCF97 0%, #2EAD68 100%); box-shadow: 0 0 16px rgba(74, 222, 128, 0.25); }

.testimonial-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonial-info strong {
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.testimonial-info span {
  font-size: 0.72rem;
  color: var(--color-text-soft);
  margin-top: 0.05rem;
}

.testimonial-stars {
  font-size: 0.78rem;
  color: #FFC83D;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.45));
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
    padding: 2rem 1.25rem;
  }
  /* divisor: oculta no último de cada linha (quando em 2 col) */
  .stat:nth-child(2n)::after {
    display: none;
  }
  /* divisor horizontal entre as 2 linhas */
  .stat:nth-child(-n+2)::before {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  }

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

  .testimonial-quote {
    font-size: 5rem;
  }
}

@media (max-width: 540px) {
  .stats-strip {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .stat:not(:last-child)::after { display: none; }
  .stat:nth-child(-n+2)::before { display: none; }

  .testimonial-author {
    flex-wrap: wrap;
    gap: 0.7rem;
  }
  .testimonial-stars {
    width: 100%;
    margin-left: calc(42px + 0.85rem);
  }
}
/* ============================================
   7. COMPARATIVO DE VALOR
   ============================================ */

.value-comparison {
  position: relative;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.compare-card {
  position: relative;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.55) 0%, rgba(10, 11, 14, 0.35) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  isolation: isolate;
  overflow: hidden;
}

/* glow azul sutil no card "Com ZapReview" — visualmente "vence" */
.compare-card--with {
  border-color: rgba(2, 96, 246, 0.30);
  box-shadow: 0 20px 60px rgba(2, 96, 246, 0.10);
}
.compare-card--with::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 30%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(2, 96, 246, 0.30) 0%, transparent 65%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.compare-card--without::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 30%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(255, 130, 100, 0.12) 0%, transparent 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.compare-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.compare-head {
  margin-bottom: 1.5rem;
}

.compare-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1px solid;
  margin-bottom: 0.85rem;
}

.tag-warn {
  background: rgba(255, 130, 100, 0.10);
  color: #FF9C7E;
  border-color: rgba(255, 130, 100, 0.30);
}

.tag-good {
  background: rgba(2, 96, 246, 0.10);
  color: #6EA8FF;
  border-color: rgba(2, 96, 246, 0.35);
}

.compare-head h3 {
  font-size: var(--fs-xl);
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.compare-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}
.compare-list li:last-child { border-bottom: none; }

.compare-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid;
}

.compare-marker--bad {
  background: rgba(255, 130, 100, 0.10);
  color: #FF9C7E;
  border-color: rgba(255, 130, 100, 0.25);
}

.compare-marker--good {
  background: rgba(2, 96, 246, 0.12);
  color: var(--color-primary-soft);
  border-color: rgba(2, 96, 246, 0.30);
}

.compare-row {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.compare-row strong {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

.compare-card--without .compare-row strong {
  color: rgba(255, 156, 126, 0.85);
}

.compare-card--with .compare-row strong {
  background: linear-gradient(180deg, #6EA8FF 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(2, 96, 246, 0.20));
}

.compare-row span {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}


/* nota explicativa abaixo do comparativo */
.compare-disclaimer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  font-style: italic;
  letter-spacing: 0.01em;
}

.compare-disclaimer span[aria-hidden] {
  color: var(--color-primary-soft);
  margin-right: 0.15em;
  font-style: normal;
}


/* ░░░ ROI CALLOUT ░░░ */

.roi-callout {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2rem, 3.5vw, 3rem);
  background:
    linear-gradient(135deg, rgba(2, 96, 246, 0.12) 0%, rgba(15, 16, 20, 0.55) 60%);
  border: 1px solid rgba(2, 96, 246, 0.30);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* glow azul radial dentro do callout */
.roi-callout::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(2, 96, 246, 0.22) 0%, transparent 55%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}

.roi-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.roi-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.roi-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.roi-num {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.025em;
  line-height: 1;
}

.roi-num--big {
  font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  font-weight: 800;
  background: linear-gradient(180deg, #6EA8FF 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(2, 96, 246, 0.35));
}

.roi-unit {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 0.15em;
  -webkit-text-fill-color: var(--color-text-muted); /* sobrescreve o gradient pro número grande */
}

.roi-num--big .roi-unit {
  -webkit-text-fill-color: rgba(110, 168, 255, 0.7);
}

.roi-arrow {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 10px rgba(2, 96, 246, 0.40));
}

.roi-line {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  position: relative;
}

.roi-line strong {
  color: var(--color-text);
  font-weight: 700;
}

.roi-line .text-grad {
  font-weight: 800;
}


/* ============================================
   responsivo
   ============================================ */

@media (max-width: 900px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }

  .roi-arrow {
    transform: rotate(90deg);
    margin: 0.25rem 0;
  }
}

@media (max-width: 540px) {
  .roi-row {
    flex-direction: column;
    gap: 1.25rem;
  }
  .roi-arrow {
    transform: rotate(90deg);
  }
}
/* ============================================
   8. OFERTA / PREÇO
   ============================================ */

.pricing {
  position: relative;
}

.pricing-cards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.price-card {
  position: relative;
  padding: clamp(1.85rem, 2.8vw, 2.5rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.55) 0%, rgba(10, 11, 14, 0.35) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  isolation: isolate;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ░░░ Card destaque (Anual) ░░░ */
.price-card--featured {
  background:
    linear-gradient(180deg, rgba(2, 96, 246, 0.10) 0%, rgba(15, 16, 20, 0.55) 60%);
  border: 1px solid rgba(2, 96, 246, 0.40);
  box-shadow:
    0 24px 70px rgba(2, 96, 246, 0.18),
    0 0 0 1px rgba(2, 96, 246, 0.08) inset;
  padding-top: clamp(2.75rem, 4vw, 3.5rem);
  margin-top: 0.85rem; /* espaço pro ribbon não escapar do container */
  overflow: visible;
}

.price-card--featured::before {
  content: '';
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 100%;
  background: radial-gradient(ellipse at top, rgba(2, 96, 246, 0.30) 0%, transparent 60%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.price-card--featured:hover {
  border-color: rgba(2, 96, 246, 0.60);
  box-shadow:
    0 32px 90px rgba(2, 96, 246, 0.30),
    0 0 0 1px rgba(2, 96, 246, 0.15) inset;
}

/* ░░░ Ribbon "Mais escolhido" ░░░ */
.price-card-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-primary-deep) 100%);
  color: white;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 24px rgba(2, 96, 246, 0.45),
    0 0 0 4px rgba(2, 96, 246, 0.10);
  z-index: 3;
  white-space: nowrap;
}

.ribbon-star {
  color: #FFC83D;
  font-size: 0.95em;
  filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.6));
}

/* ░░░ Sticker PIX 20% ░░░ */
.price-pix-badge {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: linear-gradient(135deg, #FFE486 0%, #FFB800 70%, #FF9C3D 100%);
  color: #2A1610;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 220, 100, 0.5);
  box-shadow:
    0 8px 22px rgba(255, 184, 0, 0.35),
    0 0 0 1px rgba(255, 230, 130, 0.30) inset;
  transform: rotate(7deg);
  z-index: 2;
  white-space: nowrap;
  font-weight: 600;
  animation: pix-wiggle 4s ease-in-out infinite;
}

.price-pix-badge strong { font-weight: 800; }
.price-pix-badge svg { color: #2A1610; flex-shrink: 0; }

@keyframes pix-wiggle {
  0%, 100% { transform: rotate(7deg); }
  50%      { transform: rotate(4deg) scale(1.04); }
}

/* ░░░ Header do card ░░░ */
.price-card-head {
  margin-bottom: 1.4rem;
}

.price-card-head h3 {
  font-size: var(--fs-xl);
  margin-bottom: 0.35rem;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.price-card-head p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ░░░ Preço ░░░ */
.price-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--color-border);
}

.price-prefix {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.price-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.price-currency {
  font-size: 1.4rem;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-right: 0.05em;
}

.price-amount {
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  color: var(--color-text);
}

.price-card--featured .price-amount {
  background: linear-gradient(180deg, #6EA8FF 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(2, 96, 246, 0.30));
}

.price-period {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-left: 0.15em;
}

.price-suffix {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  margin-top: 0.55rem;
  line-height: 1.4;
}

.price-suffix strong {
  color: #FFC83D;
  font-weight: 700;
}

/* ░░░ Lista de features ░░░ */
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.price-features li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.45;
}

.check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.check--blue {
  background: rgba(2, 96, 246, 0.15);
  color: var(--color-primary-soft);
  border-color: rgba(2, 96, 246, 0.35);
}

.check--star {
  background: linear-gradient(135deg, #FFE486 0%, #FFB800 100%);
  color: #2A1610;
  border-color: rgba(255, 200, 60, 0.5);
  font-size: 0.78rem;
}

.feat-highlight {
  margin-top: 0.4rem;
  padding-top: 0.85rem !important;
  border-top: 1px dashed rgba(255, 200, 60, 0.20);
}

.feat-highlight strong {
  background: linear-gradient(180deg, #FFE486 0%, #FFB800 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 800;
}

.btn-full {
  width: 100%;
  margin-top: 0.5rem;
}

.price-fineprint {
  margin-top: 0.95rem;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  letter-spacing: 0.01em;
}

/* ░░░ Card simples (Mensal) ░░░ */
.price-card--simple {
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.45) 0%, rgba(10, 11, 14, 0.30) 100%);
  border-color: rgba(255, 255, 255, 0.07);
}

.price-card--simple .price-card-head h3 {
  color: var(--color-text);
}

@media (max-width: 600px) {
  /* No mobile o ribbon "Mais escolhido" cobre o canto superior central.
     Tira o PIX badge da posição absolute e coloca como pill inline acima
     do título do plano, evitando sobreposição. */
  .price-pix-badge {
    position: relative;
    top: auto;
    right: auto;
    transform: rotate(0deg);
    margin: 0 0 1rem;
    align-self: flex-start;
    font-size: 0.68rem;
    padding: 0.35rem 0.7rem;
    animation: none;
  }
  .price-pix-badge svg {
    width: 12px;
    height: 12px;
  }
  .price-card--featured {
    display: flex;
    flex-direction: column;
    padding-top: 2.75rem;
  }
  /* garante que o PIX badge venha ANTES do head visualmente */
  .price-card--featured > .price-pix-badge { order: 1; }
  .price-card--featured > .price-card-head  { order: 2; }
  .price-card--featured > .price-display    { order: 3; }
  .price-card--featured > .price-features   { order: 4; }
  .price-card--featured > .btn              { order: 5; }
  .price-card--featured > .price-fineprint  { order: 6; }
}
/* ============================================
   9. FAQ
   ============================================ */

.faq {
  position: relative;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 760px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15, 16, 20, 0.55) 0%, rgba(10, 11, 14, 0.35) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}

/* anima entry via CSS animation (não transition) — evita conflito com a regra
   transition do .faq-item que sobrescreve as transições de opacity/transform
   herdadas do .reveal-up */
.faq-item.reveal-up.is-visible {
  animation: faq-item-in 0.9s cubic-bezier(.22, 1.4, .36, 1) var(--reveal-delay, 0s) both;
}

@keyframes faq-item-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.faq-item.is-open {
  border-color: rgba(2, 96, 246, 0.35);
  background: linear-gradient(180deg, rgba(2, 96, 246, 0.06) 0%, rgba(10, 11, 14, 0.40) 100%);
  box-shadow: 0 16px 40px rgba(2, 96, 246, 0.10);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-base);
  line-height: 1.4;
}

.faq-question:hover {
  color: var(--color-primary-soft);
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-primary-soft);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(2, 96, 246, 0.12);
  border: 1px solid rgba(2, 96, 246, 0.30);
  color: var(--color-primary-soft);
  display: grid;
  place-items: center;
  transition:
    transform 0.35s cubic-bezier(.4, 0, .2, 1),
    background var(--t-base),
    color var(--t-base),
    border-color var(--t-base);
}

.faq-item.is-open .faq-icon {
  transform: rotate(135deg);  /* + → x */
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary-deep));
  border-color: rgba(2, 96, 246, 0.60);
  color: white;
}

/* trick grid-template-rows pra animar height auto suavemente */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(.4, 0, .2, 1);
}

.faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer {
  overflow: hidden;
}

.faq-answer p {
  padding: 0 1.5rem 1.4rem;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.faq-answer strong {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 540px) {
  .faq-question {
    padding: 1rem 1.1rem;
    font-size: var(--fs-sm);
  }
  .faq-answer p {
    padding: 0 1.1rem 1.2rem;
  }
}
/* ============================================
   10. CTA FINAL
   ============================================ */

.cta-final {
  position: relative;
}

.cta-block {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem);
  background:
    linear-gradient(135deg, rgba(2, 96, 246, 0.14) 0%, rgba(15, 16, 20, 0.55) 60%);
  border: 1px solid rgba(2, 96, 246, 0.32);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  isolation: isolate;
  max-width: 960px;
  margin: 0 auto;
}

/* glow azul radial atrás do bloco — climax visual da página */
.cta-block::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(2, 96, 246, 0.28) 0%, transparent 60%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

/* estrelas decorativas flutuando ao redor do conteúdo */
.cta-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cta-deco-star {
  position: absolute;
  color: rgba(255, 200, 60, 0.14);
  filter: drop-shadow(0 0 18px rgba(255, 200, 60, 0.20));
  user-select: none;
  pointer-events: none;
  animation: cta-star-float 6s ease-in-out infinite;
}

.cta-deco-star-1 { top: 12%;  left: 6%;   font-size: 1.8rem; animation-delay: 0s;    animation-duration: 5s; }
.cta-deco-star-2 { top: 20%;  right: 8%;  font-size: 2.6rem; animation-delay: -1s;   animation-duration: 6.5s; }
.cta-deco-star-3 { bottom: 18%; left: 8%; font-size: 2.2rem; animation-delay: -2s;   animation-duration: 5.5s; }
.cta-deco-star-4 { bottom: 22%; right: 10%; font-size: 1.6rem; animation-delay: -3s; animation-duration: 6s; }
.cta-deco-star-5 { top: 50%;  right: 14%; font-size: 1.3rem; animation-delay: -1.5s; animation-duration: 7s; transform: rotate(-10deg); }
.cta-deco-star-6 { top: 55%;  left: 12%;  font-size: 1.4rem; animation-delay: -4s;   animation-duration: 5s; transform: rotate(8deg); }

@keyframes cta-star-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50%      { transform: translateY(-10px) rotate(6deg); opacity: 1; }
}

.cta-deco-star-5,
.cta-deco-star-6 {
  /* override pra preservar a rotação inicial dessas duas */
  animation-name: cta-star-float-tilted;
}

@keyframes cta-star-float-tilted {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 0.7; }
  50%      { transform: translateY(-8px) rotate(calc(var(--rot, 0deg) + 5deg)); opacity: 1; }
}

.cta-deco-star-5 { --rot: -10deg; }
.cta-deco-star-6 { --rot: 8deg; }

.cta-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 auto 1.25rem;
  max-width: 760px;
  color: var(--color-text);
}

.cta-subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 2.25rem;
}

.cta-actions {
  display: flex;            /* block-level (era inline-flex) → cada bloco em sua linha */
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin: 0 auto 2rem;
  width: max-content;
  max-width: 100%;
}

.cta-main-btn {
  font-size: 1.05rem;
  padding: 1.15rem 2.6rem;
  letter-spacing: -0.005em;
}

.cta-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  letter-spacing: 0.01em;
}
.cta-meta strong {
  color: var(--color-text-muted);
  font-weight: 600;
}

.cta-trust {
  display: flex;            /* block-level → fica em linha própria abaixo do CTA */
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  flex-wrap: wrap;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.cta-trust-stars {
  color: #FFC83D;
  font-size: 0.92rem;
  letter-spacing: 0.10em;
  filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.5));
  flex-shrink: 0;
}

.cta-trust-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.cta-trust-text strong {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 600px) {
  .cta-block {
    padding: 2.5rem 1.25rem;
  }
  .cta-title {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
  }
  .cta-trust {
    padding: 0.7rem 1rem;
    flex-direction: column;
    gap: 0.45rem;
  }
  .cta-deco-star-1 { font-size: 1.2rem; }
  .cta-deco-star-2 { font-size: 1.7rem; }
  .cta-deco-star-3 { font-size: 1.5rem; }
  .cta-deco-star-4 { font-size: 1.2rem; }
  .cta-deco-star-5 { display: none; }
  .cta-deco-star-6 { display: none; }
}
/* ============================================
   11. RODAPÉ
   ============================================ */

.site-footer {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.75) 100%);
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
}

/* coluna 1: brand + tagline */
.footer-brand {
  max-width: 360px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.footer-logo img {
  height: 30px;
  width: auto;
  display: block;
}

.footer-tagline {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 280px;
}

/* colunas: heading + lista de links */
.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-heading {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  font-weight: 600;
  margin: 0 0 1rem;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color var(--t-fast), transform var(--t-fast);
}

.footer-list a:hover {
  color: var(--color-primary-soft);
}

.footer-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: rgba(2, 96, 246, 0.10);
  border: 1px solid rgba(2, 96, 246, 0.22);
  color: var(--color-primary-soft);
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.footer-list a:hover .footer-icon {
  background: rgba(2, 96, 246, 0.20);
  border-color: rgba(2, 96, 246, 0.40);
}

/* faixa inferior: copyright + legal */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  margin: 0;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer-legal a {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  transition: color var(--t-fast);
}

.footer-legal a:hover {
  color: var(--color-text-muted);
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: 480px;
  }
}

@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-brand { grid-column: auto; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
}


/* ============================================
   RESPONSIVO BASE
   ============================================ */
@media (max-width: 768px) {
  .bg-grid { background-size: 48px 48px; }
  .bg-glow { height: 500px; opacity: 0.55; }
}

@media (max-width: 480px) {
  .bg-grid { background-size: 40px 40px; }
  .btn { padding: 0.85rem 1.3rem; }
}


/* Acessibilidade: respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}