/* =========================================================
   Conversapp IA — Landing Page (v4)
   Identidade visual oficial: Navy + Azul-elétrico + Verde-limão
   Tipografia: Sora
   ========================================================= */

:root {
  /* ===== Sistema de design (identidade visual oficial) =====
     Verde-limão #ABF36A · Azul-elétrico #1200FF · Navy #040F2E · Off-white #F7F7F7
     Base navy escura, acento verde-limão, azul-elétrico como superfície
     de destaque (hero, CTA final, billboard). */

  --navy: #040F2E;     /* navy oficial da marca */
  --bg: #050C24;       /* superfície base — navy escuro respirável */
  --bg-2: #081234;     /* alternância PERCEPTÍVEL entre seções */
  --bg-3: #0C1A48;
  --surface: #0B1539;  /* cards com presença sobre bg e bg-2 */
  --surface-2: #122253;/* hover/elevated */
  --line: rgba(171, 243, 106, 0.10);          /* linha com leve viés lime */
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #F7F7F7;     /* off-white oficial */
  --text-2: #AEB6CE;   /* azul-acinzentado claro */
  --text-3: #717AA0;
  --text-4: #454E72;

  --accent: #ABF36A;       /* verde-limão oficial */
  --accent-2: #BBF770;
  --accent-ink: #07260A;   /* texto/ícone sobre verde-limão (contraste) */
  --accent-glow: rgba(171, 243, 106, 0.45);
  --accent-soft: rgba(171, 243, 106, 0.10);
  --accent-line: rgba(171, 243, 106, 0.22);

  /* Azul-elétrico — superfície de destaque (hero, CTA, billboard) */
  --blue: #1200FF;
  --blue-2: #2C16FF;
  --blue-deep: #0C00BE;
  --blue-soft: rgba(18, 0, 255, 0.12);
  --blue-line: rgba(18, 0, 255, 0.32);

  --whatsapp: #25d366;
  --danger: #ff5562;

  /* Compat com componentes herdados (v3) que usavam --warm:
     remapeado para o verde-limão da marca. */
  --warm: #ABF36A;
  --warm-2: #BBF770;
  --warm-soft: rgba(171, 243, 106, 0.14);

  /* Light surface — quando uma seção quebra pra off-white */
  --light-bg: #F7F7F7;
  --light-bg-2: #ECEEF3;
  --light-line: rgba(4, 15, 46, 0.10);
  --light-text: #040F2E;
  --light-text-2: #3F4A66;
  --light-text-3: #828AA0;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --container: 100%;

  --shadow-glow: 0 0 0 1px rgba(171,243,106,0.20), 0 20px 80px -20px rgba(171,243,106,0.40);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.6);
}

/* Theme variants (Tweaks) */
body[data-theme="emerald"] {
  --accent: #10ffa1;
  --accent-2: #00d18b;
  --accent-glow: rgba(16, 255, 161, 0.45);
  --accent-soft: rgba(16, 255, 161, 0.12);
  --accent-line: rgba(16, 255, 161, 0.32);
}
body[data-theme="lime"] {
  --accent: #d6ff3d;
  --accent-2: #b8ff00;
  --accent-glow: rgba(214, 255, 61, 0.45);
  --accent-soft: rgba(214, 255, 61, 0.12);
  --accent-line: rgba(214, 255, 61, 0.32);
}
body[data-theme="cyan"] {
  --accent: #2ef3ff;
  --accent-2: #00cfdc;
  --accent-glow: rgba(46, 243, 255, 0.45);
  --accent-soft: rgba(46, 243, 255, 0.12);
  --accent-line: rgba(46, 243, 255, 0.32);
}
body[data-bg="deepblack"] {
  --bg: #000000;
  --bg-2: #050605;
  --bg-3: #0a0d0b;
}
body[data-bg="forest"] {
  --bg: #04100b;
  --bg-2: #061811;
  --bg-3: #0a221a;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: clip; /* `clip` em vez de `hidden` — preserva position:sticky nos descendentes */
}
body {
  /* 4ª onda: bg sólido neutro, sem glow verde global (deixava clima
     vacuum-sealed). Noise texture overlay aplicada via body::before. */
  background: var(--bg);
  position: relative;
}

/* Noise texture sutil — anti vacuum-sealed (item 4 do pivot). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ===== Layout helpers ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 72px);
}

.section {
  /* 4ª onda: spacing mais generoso em desktop pra respiro Linear-style. */
  position: relative;
  padding: 80px 0;
}
@media (min-width: 768px) {
  .section { padding: 120px 0; }
}
@media (min-width: 1100px) {
  .section { padding: 140px 0; }
}

.eyebrow {
  /* 4ª onda: neutro (Linear/Resend). Sem verde, sem pulse. */
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-3);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
}
/* Mantém .dot no DOM dos componentes (não vou tirar de cada um) — só
   neutraliza visualmente. Vira ponto sutil que ajuda a balancear o eyebrow. */
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-4);
  box-shadow: none;
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

h1, h2, h3, h4 {
  /* 4ª onda: Geist Sans em headlines (autoridade jurídica B2B).
     Inter segue no body. font-optical-sizing pra cair certinho em telas HiDPI. */
  margin: 0;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 {
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 900px;
}
h2 {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  max-width: 800px;
}
h3 {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
p { margin: 0; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

.text-grad {
  /* 4ª onda: sem gradient verde — texto sólido neutro. */
  color: var(--text);
}
/* 4ª onda: .text-accent neutralizado em headings de seção (era a maior fonte
   de "tudo verde"). O único lugar mantido em verde é o .line-accent do Hero. */
.text-accent { color: var(--text); }
.text-accent-on { color: var(--accent); } /* opt-in raro; usar com parcimônia */
.text-danger { color: var(--danger); }
.text-mono { font-family: 'JetBrains Mono', monospace; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--accent);
  color: #001408;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 30px -5px var(--accent-glow),
    0 8px 24px -8px var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 0 50px -5px var(--accent-glow),
    0 12px 32px -6px var(--accent-glow);
}
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}

.btn-arrow {
  width: 20px; height: 20px;
  transition: transform 0.2s ease;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ===== Nav ===== */
.nav {
  /* Header normal — fica no topo e scrolla junto com o conteúdo
     (não é mais position:fixed). */
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 24px auto 0;
  /* Grid 3-cols: logo à esquerda, links centralizados no eixo, espaço-livre
     simétrico à direita pra o FAQ não ficar colado na borda. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 28px;
  background: rgba(10, 15, 13, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 100px;
}
.nav-logo { justify-self: start; }
.nav-links { justify-self: center; gap: 40px; }
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
}
.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}
.nav-logo .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  color: var(--text-2);
}
.nav-links a:hover { color: var(--text); }
@media (min-width: 900px) {
  .nav-links { display: flex; }
}
.nav .btn { height: 40px; padding: 0 18px; font-size: 14px; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 0; /* nav cuida do espaçamento do topo */
  padding-bottom: 80px;
  display: flex;
  flex-direction: column; /* nav no topo, conteúdo abaixo */
  overflow: hidden;
}
.hero-bg {
  /* 4ª onda: hero-bg sem glow verde (era a maior fonte do clima vacuum-sealed).
     Substituído por glow neutro branco bem suave que só dá dimensão sem cor. */
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(255,255,255,0.025), transparent 60%);
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
}
/* Infinite Grid BG — interactive flashlight grid (acima do glow, atrás do conteúdo) */
.infinite-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; /* tracking via window listener — deixa cliques passarem */
  /* Fade gentil nas bordas (não corta o miolo) */
  -webkit-mask-image: radial-gradient(ellipse 110% 95% at 50% 45%, black 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 110% 95% at 50% 45%, black 55%, transparent 100%);
}
.infinite-grid-bg .igb-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.infinite-grid-bg .igb-subtle {
  opacity: 1; /* visibilidade controlada pelo stroke alpha do SVG */
}
.infinite-grid-bg .igb-flashlight {
  opacity: 1;
  -webkit-mask-image: radial-gradient(0px circle at 50% 50%, transparent, transparent);
  mask-image: radial-gradient(0px circle at 50% 50%, transparent, transparent);
}
.infinite-grid-bg .igb-active {
  filter: drop-shadow(0 0 8px rgba(171,243,106,0.7));
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px; /* mobile: hero-copy e VSL próximos */
  align-items: center;
  width: 100%;
  flex: 1;
}
@media (min-width: 1000px) {
  .hero-inner { grid-template-columns: 1.1fr 1fr; gap: 80px; }
}

.hero-copy { display: flex; flex-direction: column; gap: 24px; }
/* Headline do hero é mais longa que o h1 padrão — fonte própria, menor,
   pra encaixar em poucas linhas sem amontoar no canto. */
.hero-copy h1 {
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.05;
  max-width: 100%;
}
.hero-copy h1 .line { display: block; }
.hero-copy h1 .line-accent {
  /* 4ª onda: ÚNICO ponto da LP que mantém accent em texto (autorizado).
     Sem gradient pra branco — só accent sólido, mais decisivo. */
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
  padding-bottom: 0.08em;
}
.hero-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--text-2);
  max-width: 560px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* Wrapper da VSL: texto-intro acima, vídeo no meio, CTA embaixo */
.hero-vsl-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.hero-vsl-intro {
  margin: 0;
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  text-align: center;
}
.hero-vsl-cta {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
.hero-trust-micro {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ===== Hero — métrica-âncora (3 stat-cards, 3ª onda) =====
   4ª onda: card neutro (surface + linha fina). Apenas o 1º stat
   mantém verde (o "1 número-âncora hero" autorizado pelo briefing).
   Os outros 2 viram off-white pra criar hierarquia. */
.hero-stats {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  position: relative;
}
.hero-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--line);
}
.hero-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
  font-feature-settings: 'tnum';
}
/* "1 número-âncora hero" — só o primeiro stat-value fica em verde. */
.hero-stat:first-child .hero-stat-value { color: var(--accent); }
.hero-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.25;
}
.hero-stat-placeholder .hero-stat-value {
  opacity: 0.65;
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 1px;
}
@media (min-width: 1000px) {
  .hero-stats { align-self: stretch; }
}
@media (min-width: 1000px) {
  .hero-vsl-cta {
    width: fit-content; /* no desktop, botão não fica full-width */
    align-self: flex-start;
  }
  .hero-vsl-intro { text-align: left; }
  .hero-trust-micro { text-align: left; }
}
.hero-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-3);
}
.hero-stamps span {
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-stamps span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-4);
}

/* ===== Chat mockup ===== */
.chat-mockup {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 9/17;
  background: linear-gradient(180deg, #0e1715 0%, #0a100e 100%);
  border-radius: 40px;
  border: 1px solid var(--line-strong);
  padding: 14px;
  box-shadow:
    0 0 0 1px rgba(171,243,106,0.15),
    0 30px 80px -20px rgba(171,243,106,0.3),
    0 60px 100px -30px rgba(0,0,0,0.8);
}
.chat-screen {
  width: 100%; height: 100%;
  background: #0a0f0d;
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #102018 0%, #0c1612 100%);
  border-bottom: 1px solid var(--line);
}
.chat-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  color: #001408;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 12px var(--accent-glow);
}
.chat-name { font-size: 14px; font-weight: 600; }
.chat-status-plain {
  font-size: 11px;
  color: var(--text-3);
}
.chat-status {
  font-size: 11px;
  color: var(--accent);
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.chat-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent-glow);
  animation: pulse 1.5s ease-in-out infinite;
}
.chat-body {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(171,243,106,0.04), transparent 50%),
    #0a0f0d;
}
.bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  animation: bubbleIn 0.5s cubic-bezier(0.2,0.8,0.2,1) forwards;
}
.bubble.user {
  align-self: flex-start;
  background: #1a2a22;
  color: #e8f5ed;
  border-bottom-left-radius: 4px;
}
.bubble.ai {
  align-self: flex-end;
  background: linear-gradient(135deg, #0e2a18, #0a1f12);
  border: 1px solid var(--accent-line);
  color: #e8ffee;
  border-bottom-right-radius: 4px;
  box-shadow: 0 0 16px -4px var(--accent-glow);
}
.bubble.typing {
  background: #1a2a22;
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}
.bubble.typing .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3);
  animation: typing 1.2s ease-in-out infinite;
}
.bubble.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes bubbleIn {
  to { opacity: 1; transform: translateY(0); }
}
.bubble .time {
  display: block;
  font-size: 10px;
  color: var(--text-4);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}
.bubble.user .time { text-align: left; }

.chat-input {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #0c1411;
  align-items: center;
}
.chat-input-field {
  flex: 1;
  background: #1a2a22;
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-3);
}
.chat-send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #001408;
}

/* Floating badges around the phone */
.chat-mockup { z-index: 2; }
.float-badge {
  position: absolute;
  z-index: 3;
  background: rgba(13, 20, 17, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.6);
  font-family: 'JetBrains Mono', monospace;
}
.float-badge.green { border-color: var(--accent-line); }
.float-badge .icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.float-badge.tl { top: 8%; left: -18%; animation: floatA 6s ease-in-out infinite; }
.float-badge.br { bottom: 18%; right: -14%; animation: floatB 7s ease-in-out infinite; }
.float-badge.bl { bottom: 6%; left: -12%; animation: floatA 8s ease-in-out infinite; }
@keyframes floatA {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media (max-width: 999px) {
  .float-badge.tl, .float-badge.bl { left: -4%; }
  .float-badge.br { right: -4%; }
}
@media (max-width: 600px) {
  .float-badge { font-size: 10px; padding: 8px 10px; }
  .float-badge.tl { top: 4%; left: 2%; }
  .float-badge.br { bottom: 14%; right: 2%; }
  .float-badge.bl { display: none; }
}

/* ===== Trust bar (extensão visual do Hero) =====
   4ª onda: sem glow verde. Fundo neutro, linha-divisor neutra. */
.trust-bar {
  position: relative;
  padding: 32px 0;
  background: var(--bg);
}
.trust-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.trust-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.trust-bar-viewport {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 72px);
}
.trust-bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 32px;
}
.trust-bar-list .trust-bar-item-dup { display: none; }
@media (min-width: 768px) {
  .trust-bar-list { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: marquee horizontal — itens rolam sozinhos numa única faixa.
   A duplicata (.trust-bar-item-dup) aparece só aqui pra dar o loop contínuo. */
@media (max-width: 767px) {
  .trust-bar-viewport {
    padding: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .trust-bar-list {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 0;
    animation: tb-marquee 20s linear infinite;
  }
  .trust-bar-list .trust-bar-item-dup { display: flex; }
  .trust-bar-item { flex: 0 0 auto; padding: 0 30px; }
  .trust-bar-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 30px;
    background: var(--line);
  }
}
@keyframes tb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trust-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  position: relative;
}
@media (min-width: 768px) {
  /* separador só entre os 3 itens visíveis (1→2, 2→3); as duplicatas ficam
     display:none mas ainda contam pra :last-child, então uso :nth-child. */
  .trust-bar-item:nth-child(1)::after,
  .trust-bar-item:nth-child(2)::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: var(--line);
  }
}
.trust-bar-stat {
  /* 4ª onda: stat em off-white, label em mono cinza — sem verde. */
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.trust-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.3;
}

/* ===== Section bridges (transições suaves dark↔light) =====
   Pontes visuais entre seções de fundo contrastante. Em vez de cortar com uma
   linha dura, criamos uma faixa de gradient que dissolve uma cor na outra. */
.section-bridge {
  height: 80px;
  margin-top: -1px;        /* mata sub-pixel gap */
  margin-bottom: -1px;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.bridge-d2l {
  /* dark → light (creme) */
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(7, 11, 8, 0.85) 20%,
    rgba(60, 50, 35, 0.35) 55%,
    var(--light-bg, #f5f3ee) 100%
  );
}
.bridge-l2d {
  /* light (creme) → dark */
  background: linear-gradient(
    180deg,
    var(--light-bg, #f5f3ee) 0%,
    rgba(60, 50, 35, 0.30) 45%,
    rgba(7, 11, 8, 0.85) 80%,
    var(--bg) 100%
  );
}

/* ===== Testimonials em fundo dark (sem section-light) =====
   Recebe uma faixa de "blueprint" pra dar contraste suave com o Funnel
   anterior, e prepara visualmente o bridge pro HowItWorks light. */
.section-testimonials-dark {
  /* 4ª onda: fundo neutro, sem glow verde. Cor sobe via bg alternado. */
  position: relative;
  background: var(--bg-2);
}
.section-testimonials-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ===== Section heading ===== */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 64px;
}
.section-heading .eyebrow { align-self: center; }
.section-heading.left {
  align-items: flex-start;
  text-align: left;
}
.section-heading p {
  max-width: 620px;
  color: var(--text-3);
  font-size: 17px;
}

/* ===== Problem section ===== */
.problem-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .problem-cards { grid-template-columns: repeat(3, 1fr); }
}
.problem-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.problem-card .stat {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--danger);
  text-shadow: 0 0 30px rgba(255, 85, 98, 0.3);
  font-feature-settings: 'tnum';
}
.problem-card h3 {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 600;
}
.problem-card p {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 14px;
}
.problem-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255, 85, 98, 0.08), transparent 60%);
  pointer-events: none;
}
.problem-bridge {
  margin-top: 40px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .problem-bridge { font-size: 20px; margin-top: 56px; }
}

/* ===== ComoFunciona3Passos ===== */
.passos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .passos-grid { grid-template-columns: repeat(3, 1fr); }
}
.passo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
}
.passo-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.passo-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}
.passo-card h3 {
  margin: 14px 0 8px;
  font-size: 22px;
  font-weight: 600;
}
.passo-card p {
  margin: 0;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.5;
}
.passo-inline-cta {
  margin-top: 16px;
  font-size: 13px;
  padding: 8px 14px;
  align-self: flex-start;
  gap: 6px;
}

/* ===== Risk Reversal Card section ===== */
.risk-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .risk-pillars { grid-template-columns: repeat(3, 1fr); }
}
.risk-pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.risk-pillar-icon {
  /* 4ª onda: ícone neutro com borda fina (Linear-style). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  margin-bottom: 16px;
}
.risk-pillar h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
}
.risk-pillar p {
  margin: 0;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.5;
}

/* ===== Features ===== */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .features-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ===== Features — cinematic glass + giant background numeral ===== */
.features-stage {
  position: relative;
  isolation: isolate;
}
.features-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80vw;
  height: 60vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(171,243,106,0.18) 0%,
    rgba(171,243,106,0.06) 40%,
    transparent 70%
  );
  filter: blur(80px);
  border-radius: 50%;
  pointer-events: none;
  animation: featuresAurora 8s ease-in-out infinite alternate;
  z-index: -1;
}
@keyframes featuresAurora {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.feature-card {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 36px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              background 0.4s ease;
  overflow: hidden;
  min-height: 340px;
  font-family: 'Sora', system-ui, sans-serif;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,0.5),
    inset 0 1px 1px rgba(255,255,255,0.08),
    inset 0 -1px 2px rgba(0,0,0,0.6);
}
/* giant background numeral inside each card */
.feature-card .ghost-num {
  position: absolute;
  inset: auto 0 -28px 0;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 200px;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(171,243,106,0.08);
  background: linear-gradient(180deg, rgba(171,243,106,0.08) 0%, transparent 60%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0.5;
}
.feature-card > * { position: relative; z-index: 1; }
.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  background: linear-gradient(145deg, rgba(171,243,106,0.08) 0%, rgba(171,243,106,0.02) 100%);
  box-shadow:
    0 20px 50px -10px var(--accent-glow),
    inset 0 1px 1px rgba(255,255,255,0.18);
}
.feature-card:hover .ghost-num {
  transform: translateY(-10px) scale(1.06);
  opacity: 0.75;
}
.feature-card .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.feature-card .icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(171,243,106,0.14), rgba(171,243,106,0.04));
  border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.feature-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px var(--accent-glow);
}
.feature-card .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.feature-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: 'Sora', system-ui, sans-serif;
}
.feature-card p {
  font-size: 14.5px;
  color: var(--text-2);
}
.feature-card .tag {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  width: 100%;
  text-align: center;
}

/* small features row */
.mini-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 700px) { .mini-features { grid-template-columns: repeat(5, 1fr); } }
.mini-feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
  font-weight: 500;
}
.mini-feature .icon-wrap {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ===== How it works (esteira) ===== */
.belt-wrap {
  position: relative;
  margin-top: 40px;
  padding: 40px 0;
  border-radius: var(--r-xl);
  background:
    radial-gradient(800px 300px at 50% 50%, rgba(171,243,106,0.08), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.belt {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.belt-track {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 6px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-line) 10%, var(--accent-line) 90%, transparent 100%);
  border-radius: 100px;
}
.belt-track::before, .belt-track::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 24px var(--accent-glow);
}
.belt-track::before { left: 0; transform: translateX(-50%); }
.belt-track::after { right: 0; transform: translateX(50%); }

.belt-stages {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.belt-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  position: relative;
}
.belt-stage .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.belt-stage .title {
  font-weight: 600; font-size: 16px;
}
.belt-stage .sub {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  max-width: 160px;
}
.belt-stage .icon-wrap {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  position: relative;
  z-index: 2;
}

.belt-pellets {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}
.belt-pellet {
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  transform: translateX(0);
  animation: pelletMove 8s linear infinite;
}
@keyframes pelletMove {
  0% { left: 0%; opacity: 0; transform: scale(0.6); }
  5% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; transform: scale(1.4); }
}
.belt-pellet:nth-child(1) { animation-delay: 0s; }
.belt-pellet:nth-child(2) { animation-delay: 1.6s; }
.belt-pellet:nth-child(3) { animation-delay: 3.2s; background: #fff; box-shadow: 0 0 16px rgba(255,255,255,0.4); }
.belt-pellet:nth-child(4) { animation-delay: 4.8s; }
.belt-pellet:nth-child(5) { animation-delay: 6.4s; background: var(--accent-2); }

.belt-output {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  color: #001408;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 30px var(--accent-glow);
  z-index: 3;
  display: flex; align-items: center; gap: 8px;
}

@media (max-width: 800px) {
  .belt { height: auto; padding: 20px 0; }
  .belt-track { display: none; }
  .belt-stages {
    position: static;
    flex-direction: column;
    gap: 28px;
    padding: 20px;
  }
  .belt-pellets, .belt-output { display: none; }
}

/* steps cards underneath */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
}
.step-card .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
}
.step-card h4 { font-size: 16px; margin-bottom: 6px; font-weight: 600; }
.step-card p { font-size: 13.5px; color: var(--text-3); }

/* ===== Results / metrics ===== */
.metric-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 700px) { .metric-row { grid-template-columns: repeat(4, 1fr); } }
.metric {
  background:
    linear-gradient(180deg, rgba(171,243,106,0.06) 0%, transparent 100%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
}
.metric .value {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 40px var(--accent-glow);
  font-feature-settings: 'tnum';
}
/* Alterna métricas pares com warm âmbar — quebra a monotonia neon */
.metric:nth-child(2n) .value {
  color: var(--warm);
  text-shadow: 0 0 40px rgba(255, 181, 71, 0.45);
}
.metric:nth-child(2n) {
  background:
    linear-gradient(180deg, var(--warm-soft) 0%, transparent 100%),
    var(--surface);
}
.metric .label {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
}
.metric .sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
}

/* Conversion bar chart */
.conversion-viz {
  margin-top: 64px;
  padding: 40px;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(171,243,106,0.08), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
@media (max-width: 700px) { .conversion-viz { padding: 24px; } }

.cv-title { font-size: 18px; font-weight: 600; margin-bottom: 24px; }
.cv-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) { .cv-bars { grid-template-columns: 1fr 1fr; } }
.cv-bar {
  display: flex; flex-direction: column; gap: 8px;
}
.cv-bar-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px;
}
.cv-bar-label .name { color: var(--text-3); font-weight: 500; }
.cv-bar-label .val {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.cv-bar-track {
  height: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.cv-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cv-bar.human .val { color: var(--text-3); }
.cv-bar.human .cv-bar-fill { background: rgba(255,255,255,0.18); }
.cv-bar.ia .val { color: var(--accent); }
.cv-bar.ia .cv-bar-fill {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 16px var(--accent-glow);
}

/* ===== Use cases ===== */
.usecase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) { .usecase-grid { grid-template-columns: repeat(3, 1fr); } }
.usecase {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 22px;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: all 0.2s ease;
  font-family: 'Sora', system-ui, sans-serif;
}
.usecase:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}
.usecase .area {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.usecase h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: 'Sora', system-ui, sans-serif;
}
.usecase p { font-size: 13.5px; color: var(--text-3); }
.usecase .tag-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
  justify-content: center;
}
.usecase .tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text-3);
}

/* ===== Comparison ===== */
.compare-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 800px) { .compare-wrap { grid-template-columns: 1fr 1fr; gap: 20px; } }

.compare-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.compare-col.bad { opacity: 0.85; }
.compare-col.good {
  background:
    linear-gradient(180deg, rgba(171,243,106,0.08) 0%, transparent 60%),
    var(--surface);
  border-color: var(--accent-line);
  box-shadow: 0 30px 80px -30px var(--accent-glow);
}
.compare-col .head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.compare-col h4 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
}
.compare-col .tag-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.compare-col.bad .tag-pill {
  background: rgba(255,85,98,0.1);
  color: var(--danger);
  border: 1px solid rgba(255,85,98,0.3);
}
.compare-col.good .tag-pill {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.compare-list { display: flex; flex-direction: column; gap: 12px; }
.compare-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--text-2);
}
.compare-item .mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.compare-col.bad .mark {
  background: rgba(255,85,98,0.12);
  color: var(--danger);
}
.compare-col.good .mark {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ===== Testimonials ===== */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 800px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.testimonial .quote {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.testimonial .author {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.testimonial .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  color: #001408;
  font-weight: 700;
  font-size: 16px;
}
.testimonial .who {
  display: flex; flex-direction: column;
}
.testimonial .name { font-weight: 600; font-size: 14px; }
.testimonial .role { font-size: 12px; color: var(--text-3); }

/* ===== Integrations ===== */
/* ===== Integrations partners — static centered row ===== */
.partners-row {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 56px 72px;
}
.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.partner:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.partner-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(1.1);
}
.partner-icon-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
}
.partner-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Partners no fundo light — texto escuro + placeholder com borda escura */
.section-light .partner-name { color: var(--light-text); }
.section-light .partner-icon-placeholder {
  border: 1px dashed rgba(20, 30, 25, 0.18);
  background: linear-gradient(145deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
}
.section-light .partner-icon { filter: none; }

/* Liquid glass cards — partner cards com backdrop blur pra contraste
   sobre o background animado de dots. */
.partner-glass {
  flex-direction: row;
  gap: 12px;
  padding: 14px 22px 14px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 24px -10px rgba(20, 30, 25, 0.18),
    0 1px 2px rgba(20, 30, 25, 0.06);
  opacity: 1;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
              background 320ms ease-out;
}
.partner-glass:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 36px -12px rgba(20, 30, 25, 0.25),
    0 1px 3px rgba(20, 30, 25, 0.10);
}
.partner-glass .partner-icon,
.partner-glass .partner-icon-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.partner-glass .partner-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--light-text);
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  .partner-glass {
    padding: 10px 16px 10px 14px;
  }
  .partner-glass .partner-name { font-size: 14px; }
  .partner-glass .partner-icon,
  .partner-glass .partner-icon-placeholder { width: 22px; height: 22px; }
}
@media (max-width: 720px) {
  .partners-row { gap: 36px 44px; }
  .partner-name { font-size: 17px; }
  .partner-icon, .partner-icon-placeholder { width: 40px; height: 40px; }
}
.integrations-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
}
.integration {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: all 0.2s ease;
}
.integration:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}
.integration .icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}

.integration-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 56px;
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
@media (min-width: 800px) {
  .integration-flow { grid-template-columns: 1fr auto 1fr; }
}
.flow-side { display: flex; flex-direction: column; gap: 12px; }
.flow-side h4 { font-size: 18px; font-weight: 600; }
.flow-side p { font-size: 14px; color: var(--text-3); }
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 32px;
}

/* ===== VSL ===== */
.vsl-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0d1411, #050807);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow:
    0 0 0 1px var(--accent-line),
    0 30px 100px -30px var(--accent-glow),
    0 60px 120px -40px rgba(0,0,0,0.8);
}
.vsl-frame::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(171,243,106,0.18), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.02) 12px 13px);
}
.vsl-play {
  position: relative;
  z-index: 2;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #001408;
  box-shadow: 0 0 60px var(--accent-glow);
  transition: all 0.3s ease;
}
.vsl-play:hover { transform: scale(1.05); }
.vsl-play::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--accent-line);
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.vsl-caption {
  position: absolute;
  bottom: 24px; left: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-3);
  z-index: 2;
}
.vsl-meta {
  position: absolute;
  top: 20px; right: 20px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  z-index: 2;
  display: flex; align-items: center; gap: 6px;
}
.vsl-meta::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #ff3b3b;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ===== CTA Final =====
   4ª onda: card Linear-style. Sem glow verde de fundo, sem grid.
   O verde vive só no .btn-primary dentro do card. */
.cta-final {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 80px 32px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 80% at center, black 0%, transparent 80%);
  pointer-events: none;
}
.cta-final .eyebrow { align-self: center; }
.cta-final h2 { position: relative; }
.cta-final p { position: relative; max-width: 580px; margin: 16px auto 0; color: var(--text-2); font-size: 17px; }
.cta-final .ctas { position: relative; margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-final-micro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-transform: uppercase;
}
.cta-final-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex-shrink: 0;
}

/* ===== Footer ===== */
.footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 40px;
  margin-top: 60px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
}
.footer-brand p { font-size: 14px; color: var(--text-3); max-width: 340px; margin-top: 16px; }
.footer-col h5 {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--text-2); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--text-4);
  font-family: 'JetBrains Mono', monospace;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================
   FAQ
   ======================================================== */
.faq-list {
  max-width: 880px;
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.4s ease;
  position: relative;
}
.faq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.03), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.faq-item:hover {
  /* 4ª onda: hover neutro (Linear-style). Não mais verde. */
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.faq-item:hover::before { opacity: 1; }
.faq-item.open {
  /* Estado aberto neutro com leve elevation. */
  border-color: var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.faq-item.open::before { opacity: 1; }

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  font-family: inherit;
}
.faq-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-weight: 600;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.faq-item.open .faq-num { opacity: 1; }
.faq-q-text {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.4;
}
.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-toggle {
  transform: rotate(180deg);
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

.faq-answer-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-item.open .faq-answer-wrap {
  max-height: 800px;
}
.faq-answer {
  overflow: hidden;
}
.faq-answer p {
  padding: 0 28px 26px 76px;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

.faq-cta {
  /* 4ª onda: card neutro Linear-style. */
  margin: 72px auto 0;
  max-width: 640px;
  text-align: center;
  padding: 48px 36px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.faq-cta::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,0.04), transparent 70%);
  opacity: 0.6;
}
.faq-cta > * { position: relative; }
.faq-cta-icon {
  /* Mantém leve toque verde — é o ícone WhatsApp, faz sentido. */
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(171,243,106,0.08);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.faq-cta h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text);
}
.faq-cta p {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .faq-question {
    padding: 20px 20px;
    gap: 14px;
  }
  .faq-q-text { font-size: 15.5px; }
  .faq-answer p {
    padding: 0 20px 22px 56px;
    font-size: 14.5px;
  }
  .faq-num { font-size: 11px; }
  .faq-cta { padding: 40px 24px; }
  .faq-cta h3 { font-size: 22px; }
}

/* ========================================================
   LIGHT SECTIONS — quebram a monotonia escura
   ======================================================== */
.section-light {
  background: #F7F7F7;
  color: #040F2E;
  --text: #040F2E;
  --text-2: #3F4A66;
  --text-3: #6A7390;
  --text-4: #9098AE;
  --line: rgba(4, 15, 46, 0.10);
  --line-strong: rgba(4, 15, 46, 0.18);
  --surface: #ffffff;
  /* Em fundo claro, o acento vira azul-elétrico (alto contraste, cor de marca).
     O verde-limão fica reservado aos botões primários. */
  --accent: #1200FF;
  --accent-2: #2C16FF;
  --accent-glow: rgba(18, 0, 255, 0.25);
  --accent-soft: rgba(18, 0, 255, 0.08);
  --accent-line: rgba(18, 0, 255, 0.32);
}
.section-light::before,
.section-light::after { display: none !important; }
.section-light .container { position: relative; z-index: 2; }

/* 4ª onda: section-light sem glow verde. Apenas sutil sombra superior. */
.section-light::before {
  content: '';
  display: block !important;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(0,0,0,0.04), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.section-light h2 { color: #0c0f12; }
.section-light h2 .text-accent { color: #0c0f12; } /* neutralizado */
.section-light p { color: #3a3f45; }

.section-light .eyebrow {
  background: transparent;
  color: #5b6168;
  border: 1px solid rgba(20,23,26,0.10);
}
.section-light .eyebrow .dot { background: rgba(20,23,26,0.30); box-shadow: none; }

/* HowItWorks — belt + steps in light */
.section-light .belt-wrap { background: #ffffff; border-color: rgba(20,23,26,0.08); }
.section-light .belt-track { background: linear-gradient(90deg, rgba(18,0,255,0.08), rgba(18,0,255,0.18), rgba(18,0,255,0.08)); }
.section-light .belt-pellet { background: #1200FF; box-shadow: 0 0 18px rgba(18,0,255,0.6); }
.section-light .belt-stage { background: #fff; border: 1px solid rgba(20,23,26,0.1); box-shadow: 0 6px 20px -10px rgba(0,0,0,0.18); }
.section-light .belt-stage .label { color: #1200FF; }
.section-light .belt-stage .title { color: #0c0f12; }
.section-light .belt-stage .sub { color: #5b6168; }
.section-light .icon-wrap {
  background: linear-gradient(145deg, rgba(18,0,255,0.12), rgba(18,0,255,0.04));
  border: 1px solid rgba(18,0,255,0.25);
  color: #1200FF;
}
.section-light .step-card {
  background: #fff;
  border: 1px solid rgba(20,23,26,0.08);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.18);
}
.section-light .step-card .num { color: #1200FF; }
.section-light .step-card h4 { color: #0c0f12; }
.section-light .step-card p { color: #3a3f45; }

/* UseCases */
.section-light .usecase {
  background: #ffffff;
  border: 1px solid rgba(20,23,26,0.08);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.18);
}
.section-light .usecase:hover {
  border-color: rgba(18,0,255,0.4);
  box-shadow: 0 18px 40px -20px rgba(18,0,255,0.4);
}
.section-light .usecase .area { color: #1200FF; }
.section-light .usecase h4 { color: #0c0f12; }
.section-light .usecase p { color: #3a3f45; }
.section-light .usecase .tag {
  background: rgba(18,0,255,0.08);
  color: #00703a;
  border: 1px solid rgba(18,0,255,0.18);
}

/* Testimonials */
.section-light .testimonial {
  background: #ffffff;
  border: 1px solid rgba(20,23,26,0.08);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,0.2);
}
.section-light .testimonial .quote { color: #14171a; }
.section-light .testimonial .avatar {
  background: linear-gradient(145deg, #1200FF, #0C00BE);
  color: #fff;
}
.section-light .testimonial .name { color: #0c0f12; }
.section-light .testimonial .role { color: #5b6168; }

/* FAQ */
.section-light .faq-item {
  background: #ffffff;
  border: 1px solid rgba(20,23,26,0.08);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.08);
}
.section-light .faq-item:hover { border-color: rgba(18,0,255,0.3); }
.section-light .faq-item.open {
  border-color: rgba(18,0,255,0.4);
  background: linear-gradient(180deg, #ffffff, #f0fbf4);
  box-shadow: 0 18px 40px -20px rgba(18,0,255,0.3);
}
.section-light .faq-num { color: #1200FF; }
.section-light .faq-q-text { color: #0c0f12; }
.section-light .faq-toggle { border-color: rgba(20,23,26,0.15); color: #3a3f45; }
.section-light .faq-item.open .faq-toggle {
  background: rgba(18,0,255,0.1);
  border-color: rgba(18,0,255,0.4);
  color: #1200FF;
}
.section-light .faq-answer p { color: #3a3f45; }
.section-light .faq-cta {
  background: #ffffff;
  border: 1px solid rgba(20,23,26,0.08);
  box-shadow: 0 14px 40px -20px rgba(18,0,255,0.25);
}
.section-light .faq-cta::before {
  background: radial-gradient(60% 80% at 50% 0%, rgba(18,0,255,0.12), transparent 70%);
}
.section-light .faq-cta-icon {
  background: rgba(18,0,255,0.1);
  border-color: rgba(18,0,255,0.35);
  color: #1200FF;
  box-shadow: 0 0 30px -8px rgba(18,0,255,0.4);
}
.section-light .faq-cta h3 { color: #0c0f12; }
.section-light .faq-cta p { color: #3a3f45; }

.section-light .btn-primary {
  background: #0c0f12;
  color: #fff;
}
.section-light .btn-primary:hover { background: #1200FF; }

/* ========================================================
   FUNNEL DIFFERENTIALS — funil à esquerda + tipos de IA à direita
   ======================================================== */
.funnel-section {
  position: relative;
  overflow-x: clip;
}
/* Bottom fade — DESLIGADO. Assumia que a próxima seção era light (Integrações),
   mas após reordenação, FunnelDifferentials é seguido por IAvsChatbot (dark).
   Mantido como no-op pra preservar a regra que o desliga em body[data-bg="light"]. */
.funnel-section::after {
  content: none;
  background: none;
  pointer-events: none;
  z-index: 3;
}

/* Fade reverso: section LIGHT terminando + section DARK começando.
   Mantém ritmo de transição cinematográfica entre os clusters. */
.section-light + .section:not(.section-light) {
  position: relative;
}
.section-light + .section:not(.section-light)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24vh;
  background: linear-gradient(
    to top,
    rgba(5, 8, 7, 0) 0%,
    rgba(5, 8, 7, 0) 30%,
    rgba(245, 243, 238, 0.20) 55%,
    rgba(245, 243, 238, 0.55) 80%,
    rgba(245, 243, 238, 0.85) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* 4ª onda: atmosfera reduzida a ~40% da intensidade anterior.
   O FunnelDifferentials é a única seção "destaque autorizado" da LP, mas o
   nível anterior estava colando no clima vacuum-sealed. */
.funnel-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 50% 40% at 25% 30%, rgba(171,243,106,0.04), transparent 65%),
    radial-gradient(ellipse 45% 35% at 78% 70%, rgba(171,243,106,0.03), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.funnel-section .container { position: relative; z-index: 2; }

.funnel-layout {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 48px;
  align-items: stretch; /* funil estica pra mesma altura dos cards */
}

/* Funnel SVG contínuo — uma única forma com 3 camadas (rings) + bordas curvas.
   A etapa ativa ganha um spotlight desenhado POR CIMA com glow neon. */
.funnel-viz {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(171,243,106,0.08)); /* 4ª onda: glow reduzido */
}
.funnel-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.funnel-spotlight path {
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Labels do funil — agora ficam FORA do funil, alinhadas à esquerda
   com pequena linha + ponto conectando ao centro do segmento.
   Evita o problema de texto sumir sobre o spotlight ou estourar
   nas etapas estreitas (FUNDO/PÓS-VENDA). */
.funnel-label {
  position: absolute;
  right: calc(100% + 18px); /* fora do funil, à esquerda */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: none;
  z-index: 2;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.45;
}
.funnel-label.active {
  opacity: 1;
  transform: translateX(-4px);
}
.funnel-label-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  text-align: right;
  line-height: 1.05;
  transition: color 600ms ease-out;
}
.funnel-label.active .funnel-label-text {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(171, 243, 106, 0.6);
}
.funnel-label::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(171,243,106,0.4));
  transition: background 500ms ease-out;
}
.funnel-label.active::after {
  background: linear-gradient(90deg, rgba(171,243,106,0.4), var(--accent));
  box-shadow: 0 0 10px var(--accent-glow);
  height: 2px;
}
@media (max-width: 999px) {
  .funnel-label { display: none; }
}
/* Etapa "rebirth" (PÓS-VENDA) — ícone ↻ pulsante pra comunicar novo ciclo */
.funnel-label.rebirth .rebirth-icon {
  display: inline-block;
  color: var(--accent);
  animation: rebirth-spin 4s linear infinite;
}
.funnel-label.rebirth.active .funnel-label-text {
  color: var(--accent);
}
@keyframes rebirth-spin {
  to { transform: rotate(-360deg); }
}

.funnel-tipos {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 8px;
  min-height: 600px; /* dá altura mínima pra cada linha alinhar com 1/4 do funil */
}
.funnel-tipo-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 18px 22px;
  backdrop-filter: blur(12px);
  transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
              background 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  transform-origin: left center;
}
.funnel-tipo-card::before {
  content: '';
  position: absolute;
  left: -60px;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(171,243,106,0.2));
  pointer-events: none;
  transition: background 0.35s ease;
}
.funnel-tipo-card.active {
  border-color: var(--accent-line);
  background: linear-gradient(145deg, rgba(171,243,106,0.10), rgba(171,243,106,0.02));
  transform: translateX(6px);
  box-shadow: -16px 0 40px -20px rgba(171,243,106,0.55),
              0 24px 50px -20px rgba(0,0,0,0.55),
              0 0 0 1px rgba(171,243,106,0.18);
  z-index: 2;
}
.funnel-tipo-card.active::before {
  background: linear-gradient(90deg, transparent, var(--accent));
  box-shadow: 0 0 12px var(--accent-glow);
}
.connector-dash {
  position: absolute;
  left: -56px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-4);
  transform: translateY(-50%) scale(0.6);
  opacity: 0.6;
  transition: all 0.35s ease;
}
.funnel-tipo-card.active .connector-dash {
  background: var(--accent);
  transform: translateY(-50%) scale(1);
  opacity: 1;
  box-shadow: 0 0 14px 2px var(--accent-glow);
}

.tipo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tipo-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
}
.tipo-stage-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
}
.funnel-tipo-card h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
.funnel-tipo-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}
.tipo-bullets {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tipo-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.bullet-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 960px) {
  .funnel-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .funnel-viz {
    height: 480px;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
  .funnel-tipos {
    grid-template-rows: auto;
    gap: 16px;
  }
  .funnel-tipo-card { min-height: auto; }
  .funnel-tipo-card::before,
  .connector-dash {
    display: none;
  }
  .funnel-tipo-card.active { transform: none; }
}

/* ========================================================
   Hero VSL · player de vídeo no lado direito do hero
   ======================================================== */
.hero-vsl {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-vsl-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 50% 45%, rgba(171,243,106,0.08) 0%, #06100b 70%),
    #06100b;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(171,243,106,0.10),
    0 30px 80px -30px rgba(0,0,0,0.7),
    0 0 80px -20px rgba(171,243,106,0.25);
  transition: box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-vsl-frame:hover {
  box-shadow:
    0 0 0 1px rgba(171,243,106,0.25),
    0 30px 80px -30px rgba(0,0,0,0.7),
    0 0 100px -10px rgba(171,243,106,0.45);
  transform: translateY(-2px);
}

/* Decorative scanline / film grain overlay (sutil) */
.hero-vsl-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 3px
    );
  pointer-events: none;
  z-index: 1;
}

/* Live badge */
.hero-vsl-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
}
.hero-vsl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5562;
  box-shadow: 0 0 10px rgba(255,85,98,0.7);
  animation: pulse 1.4s ease-in-out infinite;
}

/* Play button */
.hero-vsl-play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 3;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  color: #051208;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 0 rgba(171,243,106,0.55),
    0 20px 50px -10px rgba(171,243,106,0.55),
    inset 0 -4px 0 rgba(0,0,0,0.15);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 280ms ease-out;
}
.hero-vsl-play svg {
  width: 36px;
  height: 36px;
  margin-left: 4px; /* optical center */
}
.hero-vsl-play:hover {
  transform: scale(1.07);
  background: #fff;
  color: #051208;
  box-shadow:
    0 0 0 8px rgba(171,243,106,0.18),
    0 30px 70px -10px rgba(171,243,106,0.6);
}
.hero-vsl-play:active { transform: scale(0.97); }

/* Pulse ring continuo atrás do botão */
.hero-vsl-play::before,
.hero-vsl-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(171,243,106,0.5);
  animation: hero-vsl-ring 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}
.hero-vsl-play::after { animation-delay: 1.3s; }

@keyframes hero-vsl-ring {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Caption inferior dentro do frame */
.hero-vsl-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.3) 60%,
    transparent 100%
  );
  pointer-events: none;
}
.hero-vsl-label { color: rgba(255,255,255,0.85); }
.hero-vsl-duration { color: var(--accent); }

/* Hint abaixo do frame */
.hero-vsl-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}

/* Quando o vídeo real for inserido como <video> ou <iframe>: */
.hero-vsl-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 1;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-vsl-frame:hover .hero-vsl-media {
  transform: scale(1.05);
}

/* Gradient fade do bottom — preto sólido fundindo em transparente,
   inspirado no efeito do componente shadcn (from-black to-transparent). */
.hero-vsl-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.0) 100%);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 720px) {
  .hero-vsl-play { width: 68px; height: 68px; }
  .hero-vsl-play svg { width: 28px; height: 28px; }
}

/* ========================================================
   Funnel · progress dots (scroll-driven indicator)
   ======================================================== */
.funnel-progress {
  position: absolute;
  right: clamp(20px, 4vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;
}
.fp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background-color 280ms ease-out,
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms ease-out;
}
.fp-dot.active {
  background: var(--accent);
  transform: scale(1.55);
  box-shadow: 0 0 14px var(--accent-glow);
}
@media (max-width: 999px) {
  .funnel-progress { display: none; }
}

/* ========================================================
   Testimonials · novo padrão (foto topo + quote + autor)
   ======================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  justify-content: center;
  max-width: 1200px;
  margin: 56px auto 0;
}

.t-card {
  background: #050a07;
  color: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms ease-out,
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.t-card:hover {
  transform: translateY(-4px);
  border-color: rgba(171,243,106,0.30);
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,0.7),
    0 0 60px -20px rgba(171,243,106,0.30);
}

.t-card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  margin: -1px -1px 0; /* "bleed" sobre a borda do card */
  aspect-ratio: 4 / 3;
}
.t-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.t-card:hover .t-card-media img {
  transform: scale(1.05);
}
.t-card-fade {
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(
    to top,
    #050a07 0%,
    rgba(5,10,7,0.6) 45%,
    transparent 100%
  );
  pointer-events: none;
}

.t-card-body {
  padding: 22px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.t-card-quote {
  margin: 0 0 6px;
  padding-bottom: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.t-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.t-card-role {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  /* gradient verde neon — coerente com a brand do Conversapp */
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.01em;
}

/* Testimonials em modo light — quebra forte da monotonia preto+verde.
   Cards creme com texto escuro, mantendo accent verde no role. */
.section-light .t-card {
  background: #ffffff;
  color: var(--light-text);
  border: 1px solid var(--light-line);
  box-shadow: 0 30px 60px -30px rgba(20, 30, 25, 0.18);
}
.section-light .t-card:hover {
  border-color: rgba(18, 0, 255, 0.32);
  box-shadow:
    0 30px 80px -25px rgba(20, 30, 25, 0.22),
    0 0 60px -20px rgba(18, 0, 255, 0.18);
}
.section-light .t-card-fade {
  background: linear-gradient(
    to top,
    #ffffff 0%,
    rgba(255, 255, 255, 0.65) 45%,
    transparent 100%
  );
}
.section-light .t-card-quote {
  color: var(--light-text);
  border-bottom-color: rgba(20, 30, 25, 0.10);
}
.section-light .t-card-name {
  color: var(--light-text);
}
.section-light .t-card-role {
  background: linear-gradient(90deg, #009b48, #00c75e 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========================================================
   Testimonials — variação SEM foto (anti AI slop, post-eval)
   ======================================================== */
.t-card-text {
  padding: 0;
  position: relative;
}
.t-card-text .t-card-body {
  padding: 32px 28px 28px;
  gap: 18px;
}
.t-card-quote-mark {
  color: var(--accent);
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 0;
}
.t-card-text .t-card-quote {
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 22px;
  position: relative;
  z-index: 1;
}
.t-card-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.t-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, rgba(171,243,106,0.16), rgba(171,243,106,0.04));
  border: 1px solid rgba(171,243,106,0.35);
  color: var(--accent);
  text-shadow: 0 0 12px rgba(171,243,106,0.4);
}
.t-card-text.accent-amber .t-avatar {
  background: linear-gradient(135deg, rgba(255,181,71,0.18), rgba(255,181,71,0.04));
  border-color: rgba(255,181,71,0.45);
  color: #ffb547;
  text-shadow: 0 0 12px rgba(255,181,71,0.4);
}
.t-card-text.accent-amber .t-card-role {
  background: linear-gradient(90deg, #ffb547, #ffd591 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t-author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.t-author-meta .t-card-name { font-size: 15px; }
.t-author-meta .t-card-role { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.t-card-org {
  margin: 2px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* ===== Testimonials — faixa de números agregados (item 5) ===== */
.testimonials-aggregate {
  list-style: none;
  margin: 40px auto 0;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 960px;
  border: 1px solid rgba(171,243,106,0.18);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(171,243,106,0.04), transparent),
    rgba(5,10,7,0.6);
}
@media (min-width: 768px) {
  .testimonials-aggregate {
    grid-template-columns: repeat(3, 1fr);
    padding: 32px 28px;
  }
}
.agg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
}
@media (min-width: 768px) {
  .agg-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.10);
  }
}
.agg-stat {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1.1;
  font-feature-settings: 'tnum';
}
@media (min-width: 768px) {
  .agg-stat { font-size: 36px; }
}
.agg-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* Layout 5 cards — auto-fit já suporta, mas força mínimo razoável */
.testimonials-grid-5 {
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Chip de resultado numérico — destaque do {RESULTADO_NUMERICO} */
.t-result-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(171,243,106,0.12);
  border: 1px solid rgba(171,243,106,0.30);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: -4px 0 4px;
}
.t-card-text.accent-amber .t-result-chip {
  background: rgba(255,181,71,0.14);
  border-color: rgba(255,181,71,0.40);
  color: #ffb547;
}
.t-result-chip-placeholder {
  opacity: 0.55;
  border-style: dashed;
}

/* Avatar — variantes imagem real vs placeholder */
.t-avatar-img {
  object-fit: cover;
  background: var(--surface);
  text-shadow: none;
}
.t-avatar-placeholder {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px dashed rgba(255,255,255,0.30);
  color: rgba(255,255,255,0.55);
  text-shadow: none;
  font-size: 13px;
}
/* Light mode overrides */
.section-light .t-avatar {
  background: linear-gradient(135deg, rgba(18,0,255,0.14), rgba(18,0,255,0.03));
  border-color: rgba(18,0,255,0.30);
  color: #008a3d;
  text-shadow: none;
}
.section-light .t-card-text.accent-amber .t-avatar {
  background: linear-gradient(135deg, rgba(204,130,30,0.16), rgba(204,130,30,0.04));
  border-color: rgba(204,130,30,0.40);
  color: #b86b13;
}
.section-light .t-card-text.accent-amber .t-card-role {
  background: linear-gradient(90deg, #b86b13, #d99a3a 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-light .t-card-org {
  color: rgba(20, 30, 25, 0.55);
}
.section-light .t-card-quote-mark {
  color: #009b48;
}

/* Esconde o estilo antigo se ainda estiver no DOM por cache */
.testimonials { display: none; }

/* ========================================================
   Dotted Surface · canvas animado de fundo (Integrações)
   ======================================================== */
.section-dotted {
  position: relative;
  overflow: hidden;
}
.dotted-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
}
.section-dotted .container {
  position: relative;
  z-index: 2;
}
/* Vinheta suave: dot pattern fica forte no centro e funde nas bordas
   com a cor creme. Usa ::after pra não conflitar com ::before do .section-light. */
.section-dotted::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at center,
      rgba(245, 243, 238, 0.0) 0%,
      rgba(245, 243, 238, 0.0) 40%,
      rgba(245, 243, 238, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ========================================================
   Mobile optimization · ajustes para celular
   ======================================================== */

/* Nav CTA — mostra texto curto em telas pequenas, completo em maiores */
.nav-cta-short { display: none; }
@media (max-width: 600px) {
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
}

/* Nav pill compacta no mobile — só a logo, do tamanho do conteúdo */
@media (max-width: 768px) {
  .nav {
    width: fit-content;       /* pill encolhe pro tamanho da logo */
    margin-inline: auto;      /* centraliza horizontalmente */
    margin-top: 16px;
    padding: 10px 22px;
    justify-content: center;
  }
  .nav-logo img { height: 22px; }
  .nav .btn,
  .nav-cta,
  .nav-links { display: none !important; }
}

/* Hero: garantir que VSL e copy não fiquem com larguras esquisitas */
@media (max-width: 720px) {
  .hero { padding-top: 24px; padding-bottom: 60px; }
  .hero-copy { gap: 18px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero-vsl { max-width: 100%; }
}

/* Sections: padding lateral mais apertado em telas pequenas */
@media (max-width: 600px) {
  .section { padding-top: 64px; padding-bottom: 64px; }
  .section-heading h2 { font-size: clamp(28px, 8vw, 40px); line-height: 1.05; }
}

/* Funnel: em mobile o sticky/zoom é desativado;
   garantir que os cards e trapézios fiquem legíveis. */
@media (max-width: 999px) {
  .funnel-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .funnel-viz {
    filter: none;
    max-width: 320px;
  }
}

/* Cards/grids: forçar 1 coluna em telas muito pequenas pra evitar overflow */
@media (max-width: 480px) {
  .testimonials-grid,
  .usecase-grid,
  .metric-row,
  .mini-features {
    grid-template-columns: 1fr !important;
  }
}

/* Fix global: evitar overflow horizontal em qualquer elemento */
@media (max-width: 720px) {
  body { overflow-x: hidden; }
  .container { padding-left: 16px; padding-right: 16px; }
  h1, h2, h3 { word-break: break-word; }
}

/* ========================================================
   Demo Form Modal · popup de qualificação
   Mobile-first: full-screen no mobile, card no desktop.
   ======================================================== */
.demo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  animation: demo-fade-in 220ms ease-out;
}
@keyframes demo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.demo-modal {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: 56px 20px 32px;
  min-height: 100vh;
  min-height: 100svh;
  animation: demo-slide-up 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes demo-slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (min-width: 720px) {
  .demo-modal-overlay { align-items: center; padding: 24px; }
  .demo-modal {
    max-width: 560px;
    min-height: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-strong);
    padding: 40px 36px 32px;
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.7),
      0 0 0 1px var(--accent-soft);
  }
}

.demo-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.demo-modal-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-color: var(--line-strong);
}

.demo-modal-head {
  margin-bottom: 24px;
}
.demo-modal-head .eyebrow { margin-bottom: 12px; }
.demo-modal-head h3 {
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.demo-modal-head p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  padding: 0;
  margin: 0;
}
.demo-field > span,
.demo-field > legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.005em;
  padding: 0;
}
.demo-field input,
.demo-field select {
  width: 100%;
  height: 48px; /* 44+ pra touch */
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 16px; /* >=16 evita zoom no iOS */
  font-family: inherit;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.demo-field input::placeholder { color: var(--text-4); }
.demo-field input:focus,
.demo-field select:focus {
  border-color: var(--accent-line);
  background: rgba(171,243,106,0.04);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.demo-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 22px,
    calc(100% - 13px) 22px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  /* color-scheme dark força o browser a renderizar o dropdown aberto
     no tema escuro do SO (em vez do branco padrão) */
  color-scheme: dark;
}
/* Estiliza as <option> do dropdown aberto (suporte parcial por browser).
   Chrome/Edge respeitam; Safari ignora; Firefox usa color-scheme acima. */
.demo-field select option {
  background: #131c18;
  color: #ffffff;
  padding: 12px;
}

.demo-hint {
  font-weight: 400;
  color: var(--text-3);
  font-size: 12px;
  margin-left: 6px;
}

/* Dropdown customizado que SEMPRE abre pra cima */
.dropdown-up {
  position: relative;
}
.dropdown-up-trigger {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  text-align: left;
}
.dropdown-up.open .dropdown-up-trigger,
.dropdown-up-trigger:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  background: rgba(171,243,106,0.04);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dropdown-up-trigger .placeholder { color: var(--text-4); }
.dropdown-up-arrow {
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dropdown-up.open .dropdown-up-arrow { transform: rotate(180deg); }

.dropdown-up-menu {
  position: absolute;
  bottom: calc(100% + 6px);  /* ABRE PRA CIMA */
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #131c18;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow:
    0 -8px 24px -8px rgba(0,0,0,0.5),
    0 0 0 1px var(--accent-soft);
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
  animation: dropdown-up-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dropdown-up-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-up-menu li {
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.dropdown-up-menu li:hover {
  background: rgba(171,243,106,0.08);
  color: var(--accent);
}
.dropdown-up-menu li.selected {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.demo-chip {
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  font-family: inherit;
}
.demo-chip:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.demo-chip.selected {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
}

.demo-submit {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  height: 52px;
  font-size: 15px;
}
.demo-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.demo-disclaimer {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-4);
  text-align: center;
}

.demo-error {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  color: #ff8a93;
  background: rgba(255, 85, 98, 0.10);
  border: 1px solid rgba(255, 85, 98, 0.30);
  border-radius: 10px;
  text-align: center;
}

/* Tela de sucesso */
.demo-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 32px 8px;
  margin: auto 0;
}
.demo-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 8px;
}
.demo-success h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.demo-success p {
  font-size: 15px;
  color: var(--text-2);
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}
.demo-success p strong { color: var(--accent); }
.demo-success .btn { margin-top: 12px; }

/* ========================================================
   LIGHT VARIANT — versão branca da landing inteira.
   Ativada via body[data-bg="light"]. Mantém o destaque verde,
   usando #1200FF (verde mais escuro) pra contraste em fundo claro.
   ======================================================== */
body[data-bg="light"] {
  --bg: #f5f3ee;
  --bg-2: #efece1;
  --bg-3: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f5ee;
  --line: rgba(20, 23, 26, 0.10);
  --line-strong: rgba(20, 23, 26, 0.18);

  --text: #0c0f12;
  --text-2: #3a3f45;
  --text-3: #5b6168;
  --text-4: #8a9099;

  --accent: #1200FF;
  --accent-2: #0C00BE;
  --accent-glow: rgba(18, 0, 255, 0.30);
  --accent-soft: rgba(18, 0, 255, 0.08);
  --accent-line: rgba(18, 0, 255, 0.32);

  --shadow-glow: 0 0 0 1px rgba(18,0,255,0.18), 0 20px 80px -20px rgba(18,0,255,0.35);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 60px -30px rgba(0,0,0,0.18);

  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(18,0,255,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(18,0,255,0.04), transparent 60%),
    var(--bg);
  color: var(--text);
}

/* Tipografia base + gradientes de texto que assumiam fundo escuro */
body[data-bg="light"] p { color: var(--text-2); }
body[data-bg="light"] .text-grad {
  background: linear-gradient(180deg, var(--text) 0%, var(--text) 60%, var(--accent) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body[data-bg="light"] .hero-copy h1 .line-accent {
  background: linear-gradient(90deg, var(--accent), #0c0f12 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Nav glass — vidro branco em vez de vidro preto */
body[data-bg="light"] .nav {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--line);
}
body[data-bg="light"] .nav-links a { color: var(--text-2); }
body[data-bg="light"] .nav-links a:hover { color: var(--text); }

/* Botões */
body[data-bg="light"] .btn-primary {
  color: #ffffff;
  background: var(--accent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04) inset,
    0 0 24px -6px var(--accent-glow),
    0 8px 24px -10px var(--accent-glow);
}
body[data-bg="light"] .btn-primary:hover {
  background: #0C00BE;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.08) inset,
    0 0 40px -6px var(--accent-glow),
    0 12px 32px -8px var(--accent-glow);
}
body[data-bg="light"] .btn-ghost {
  background: rgba(20, 23, 26, 0.04);
  color: var(--text);
  border: 1px solid var(--line-strong);
}
body[data-bg="light"] .btn-ghost:hover {
  background: rgba(20, 23, 26, 0.08);
  border-color: rgba(20, 23, 26, 0.25);
}

/* Hero — softens green radial glows + esconde grid de fundo
   (a grid neon some demais em fundo claro) */
body[data-bg="light"] .hero-bg {
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(18,0,255,0.08), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(18,0,255,0.05), transparent 60%),
    radial-gradient(500px 400px at 0% 80%, rgba(18,0,255,0.04), transparent 60%);
}
body[data-bg="light"] .infinite-grid-bg { opacity: 0.35; mix-blend-mode: multiply; }
body[data-bg="light"] .infinite-grid-bg .igb-active {
  filter: drop-shadow(0 0 6px rgba(18,0,255,0.6));
}

/* Hero VSL frame */
body[data-bg="light"] .hero-vsl-frame {
  background:
    radial-gradient(circle at 50% 45%, rgba(18,0,255,0.10) 0%, #ffffff 70%),
    #ffffff;
  border-color: var(--line-strong);
  box-shadow:
    0 0 0 1px rgba(18,0,255,0.10),
    0 30px 80px -30px rgba(0,0,0,0.18),
    0 0 80px -20px rgba(18,0,255,0.20);
}
body[data-bg="light"] .hero-vsl-frame:hover {
  box-shadow:
    0 0 0 1px rgba(18,0,255,0.25),
    0 30px 80px -30px rgba(0,0,0,0.22),
    0 0 100px -10px rgba(18,0,255,0.30);
}
body[data-bg="light"] .hero-vsl-frame::before {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 2px,
      rgba(0,0,0,0.02) 2px,
      rgba(0,0,0,0.02) 3px
    );
}
body[data-bg="light"] .hero-vsl-badge {
  background: rgba(255,255,255,0.85);
  color: var(--text);
  border-color: var(--line);
}
body[data-bg="light"] .hero-vsl-play { color: #ffffff; }
body[data-bg="light"] .hero-vsl-intro { color: var(--text); }
body[data-bg="light"] .hero-stamps { color: var(--text-3); }

/* Chat mockup — INTENCIONALMENTE escuro mesmo em modo light.
   É um celular/WhatsApp, faz sentido manter dark pra realismo. */

/* Float badges em torno do celular — vidro branco */
body[data-bg="light"] .float-badge {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.15);
}

/* Cards de problema/feature/usecase/testimonial — fundo branco com sombra leve */
body[data-bg="light"] .problem-card,
body[data-bg="light"] .mini-feature,
body[data-bg="light"] .step-card,
body[data-bg="light"] .usecase,
body[data-bg="light"] .testimonial,
body[data-bg="light"] .compare-col,
body[data-bg="light"] .integration,
body[data-bg="light"] .integration-flow,
body[data-bg="light"] .belt-wrap,
body[data-bg="light"] .belt-stage {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.15);
}
body[data-bg="light"] .belt-wrap {
  background:
    radial-gradient(800px 300px at 50% 50%, rgba(18,0,255,0.06), transparent 70%),
    #ffffff;
}
body[data-bg="light"] .belt-pellet:nth-child(3) {
  background: #0c0f12;
  box-shadow: 0 0 16px rgba(0,0,0,0.25);
}

/* Feature cards — substitui o glass branco-sobre-preto por glass cinza-sobre-branco */
body[data-bg="light"] .feature-card {
  background: linear-gradient(145deg, #ffffff 0%, #faf9f5 100%);
  border-color: var(--line);
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,0.10),
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -1px 2px rgba(0,0,0,0.04);
}
body[data-bg="light"] .feature-card:hover {
  border-color: var(--accent-line);
  background: linear-gradient(145deg, rgba(18,0,255,0.06) 0%, rgba(18,0,255,0.01) 100%);
  box-shadow:
    0 20px 50px -10px var(--accent-glow),
    inset 0 1px 1px rgba(255,255,255,0.95);
}
body[data-bg="light"] .feature-card .ghost-num {
  -webkit-text-stroke: 1px rgba(18,0,255,0.10);
  background: linear-gradient(180deg, rgba(18,0,255,0.08) 0%, transparent 60%);
  -webkit-background-clip: text;
  background-clip: text;
}
body[data-bg="light"] .feature-card .icon-wrap {
  background: linear-gradient(145deg, rgba(18,0,255,0.14), rgba(18,0,255,0.04));
  border-color: var(--accent-line);
  color: var(--accent);
}
body[data-bg="light"] .features-stage::before {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(18,0,255,0.18) 0%,
    rgba(18,0,255,0.05) 40%,
    transparent 70%
  );
}

/* Conversion viz + barras */
body[data-bg="light"] .conversion-viz {
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(18,0,255,0.08), transparent 70%),
    #ffffff;
  border-color: var(--line);
}
body[data-bg="light"] .cv-bar-track { background: rgba(20,23,26,0.06); }
body[data-bg="light"] .cv-bar.human .cv-bar-fill { background: rgba(20,23,26,0.25); }
body[data-bg="light"] .cv-bar.human .val { color: var(--text-3); }
body[data-bg="light"] .cv-bar.ia .cv-bar-fill {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* Metrics — verde escuro em vez de neon, warm fica como contra-tom */
body[data-bg="light"] .metric {
  background:
    linear-gradient(180deg, rgba(18,0,255,0.06) 0%, transparent 100%),
    #ffffff;
  border-color: var(--line);
}
body[data-bg="light"] .metric .value {
  color: var(--accent);
  text-shadow: 0 0 40px rgba(18,0,255,0.25);
}
body[data-bg="light"] .metric:nth-child(2n) {
  background:
    linear-gradient(180deg, rgba(255,154,31,0.10) 0%, transparent 100%),
    #ffffff;
}

/* Compare */
body[data-bg="light"] .compare-col.good {
  background:
    linear-gradient(180deg, rgba(18,0,255,0.08) 0%, transparent 60%),
    #ffffff;
  border-color: var(--accent-line);
  box-shadow: 0 30px 80px -30px var(--accent-glow);
}
body[data-bg="light"] .usecase .tag {
  background: rgba(18,0,255,0.08);
  color: #00703a;
  border: 1px solid rgba(18,0,255,0.18);
}

/* Testimonial avatar — gradiente verde + texto branco */
body[data-bg="light"] .testimonial .avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
}

/* Partners (integrations) */
body[data-bg="light"] .partner-name { color: var(--text); }
body[data-bg="light"] .partner-icon { filter: none; }
body[data-bg="light"] .partner-icon-placeholder {
  border: 1px dashed rgba(20,23,26,0.18);
  background: linear-gradient(145deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
}

/* VSL frame */
body[data-bg="light"] .vsl-frame {
  background: linear-gradient(135deg, #ffffff, #f5f3ee);
  border-color: var(--line-strong);
  box-shadow:
    0 0 0 1px var(--accent-line),
    0 30px 100px -30px var(--accent-glow),
    0 60px 120px -40px rgba(0,0,0,0.18);
}
body[data-bg="light"] .vsl-frame::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(18,0,255,0.14), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.02) 12px 13px);
}
body[data-bg="light"] .vsl-play { color: #ffffff; }
body[data-bg="light"] .vsl-meta {
  background: rgba(255,255,255,0.85);
  border-color: var(--line);
}

/* CTA Final */
body[data-bg="light"] .cta-final {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(18,0,255,0.18), transparent 70%),
    radial-gradient(600px 300px at 50% 100%, rgba(18,0,255,0.10), transparent 70%),
    #ffffff;
  border-color: var(--accent-line);
}
body[data-bg="light"] .cta-final::before {
  background-image:
    linear-gradient(rgba(18,0,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,0,255,0.06) 1px, transparent 1px);
}

/* FAQ */
body[data-bg="light"] .faq-item {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.08);
}
body[data-bg="light"] .faq-item:hover { border-color: rgba(18,0,255,0.30); }
body[data-bg="light"] .faq-item.open {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, #ffffff, #f0fbf4);
  box-shadow: 0 18px 40px -20px rgba(18,0,255,0.30);
}
body[data-bg="light"] .faq-item::before {
  background: radial-gradient(120% 60% at 0% 0%, rgba(18,0,255,0.05), transparent 60%);
}
body[data-bg="light"] .faq-toggle {
  border-color: var(--line-strong);
  color: var(--text-2);
}
body[data-bg="light"] .faq-item.open .faq-toggle {
  background: rgba(18,0,255,0.10);
  border-color: var(--accent-line);
  color: var(--accent);
}
body[data-bg="light"] .faq-cta {
  background:
    linear-gradient(160deg, rgba(18,0,255,0.06), #ffffff);
  border-color: var(--line);
  box-shadow: 0 14px 40px -20px rgba(18,0,255,0.25);
}
body[data-bg="light"] .faq-cta::before {
  background: radial-gradient(60% 80% at 50% 0%, rgba(18,0,255,0.15), transparent 70%);
}
body[data-bg="light"] .faq-cta-icon {
  background: rgba(18,0,255,0.10);
  border-color: var(--accent-line);
  color: var(--accent);
  box-shadow: 0 0 30px -8px var(--accent-glow);
}

/* Funnel section — desliga os fades cream e tone down ambient glow */
body[data-bg="light"] .funnel-section::after { display: none; }
body[data-bg="light"] .section-light + .section:not(.section-light)::before { display: none; }
body[data-bg="light"] .funnel-section::before {
  background:
    radial-gradient(ellipse 50% 40% at 25% 30%, rgba(18,0,255,0.08), transparent 65%),
    radial-gradient(ellipse 45% 35% at 78% 70%, rgba(18,0,255,0.06), transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(18,0,255,0.03), transparent 70%);
}
body[data-bg="light"] .funnel-viz {
  filter: drop-shadow(0 30px 60px rgba(18,0,255,0.18));
}
body[data-bg="light"] .funnel-tipo-card {
  background: linear-gradient(145deg, #ffffff, #faf9f5);
  border-color: var(--line);
}
body[data-bg="light"] .funnel-tipo-card.active {
  background: linear-gradient(145deg, rgba(18,0,255,0.10), rgba(18,0,255,0.02));
  border-color: var(--accent-line);
  box-shadow: -16px 0 40px -20px rgba(18,0,255,0.40),
              0 24px 50px -20px rgba(0,0,0,0.15),
              0 0 0 1px rgba(18,0,255,0.18);
}
body[data-bg="light"] .funnel-tipo-card::before {
  background: linear-gradient(90deg, transparent, rgba(18,0,255,0.25));
}
body[data-bg="light"] .funnel-tipo-card.active::before {
  background: linear-gradient(90deg, transparent, var(--accent));
}
body[data-bg="light"] .funnel-label-text { color: rgba(12, 15, 18, 0.65); }
body[data-bg="light"] .funnel-label.active .funnel-label-text {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(18,0,255,0.30);
}
body[data-bg="light"] .funnel-label::after {
  background: linear-gradient(90deg, rgba(20,23,26,0.15), rgba(18,0,255,0.40));
}
body[data-bg="light"] .funnel-label.active::after {
  background: linear-gradient(90deg, rgba(18,0,255,0.40), var(--accent));
}
body[data-bg="light"] .tipo-stage-pill {
  background: rgba(20,23,26,0.04);
  border-color: var(--line);
  color: var(--text-3);
}

/* Demo modal — chips e dropdown */
body[data-bg="light"] .demo-chip {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text-2);
}
body[data-bg="light"] .demo-chip:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
body[data-bg="light"] .demo-chip.selected {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
body[data-bg="light"] .dropdown-up-menu li:hover {
  background: rgba(18,0,255,0.08);
  color: var(--accent);
}

/* Eyebrow — chip cinza neutro em fundo claro */
body[data-bg="light"] .eyebrow {
  background: rgba(20,23,26,0.05);
  color: var(--text);
  border-color: rgba(20,23,26,0.10);
}
body[data-bg="light"] .eyebrow .dot {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(18,0,255,0.5);
}

/* Section-light DENTRO de body light vira redundante — desativa overrides
   pra evitar fades cream entre seções (já estamos todos no cream). */
body[data-bg="light"] .section-light::before,
body[data-bg="light"] .section-light::after { display: none !important; }

/* ============================================================
   3ª onda — Elementos do benchmarking
   ============================================================ */

/* ===== AntesDepois (comparativo ConversApp vs outras IAs) ===== */
.section-antes-depois { position: relative; }
/* Headline mais curta por linha — evita "resultado." órfão na 3ª linha. */
.section-antes-depois .section-heading h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  max-width: 920px;
}
.ad-table {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.ad-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.ad-row:last-child { border-bottom: none; }
@media (min-width: 880px) {
  .ad-row { grid-template-columns: 220px 1fr 1fr; }
}
.ad-row-head {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line);
}
.ad-row-head .ad-cell {
  padding: 14px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ad-cell {
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 880px) {
  .ad-cell { border-bottom: none; border-right: 1px solid var(--line); }
  .ad-cell:last-child { border-right: none; }
}
.ad-cell:last-child { border-bottom: none; }
.ad-cell-scenario {
  background: rgba(255,255,255,0.02);
  font-weight: 600;
  color: var(--text);
  align-items: center;
}
.ad-cell-crit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}
.ad-expand-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.ad-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ad-expand-btn:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}
.ad-expand-chevron {
  display: inline-flex;
  transition: transform .25s ease;
}
.ad-expand-chevron.up { transform: rotate(180deg); }
.ad-cell-cenario-text {
  font-size: 14px;
  font-weight: 600;
}
.ad-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ad-tag-sem { color: var(--danger); }
.ad-tag-com { color: var(--accent); }
/* Centraliza os cabeçalhos das duas colunas de comparação */
.ad-row-head .ad-cell-sem,
.ad-row-head .ad-cell-com {
  justify-content: center;
  text-align: center;
}
.ad-cell-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ad-cell-icon-sem {
  background: rgba(255,85,98,0.12);
  color: var(--danger);
}
.ad-cell-icon-com {
  background: rgba(171,243,106,0.16);
  color: var(--accent);
}
.ad-cell-sem { color: rgba(255,255,255,0.78); }
.ad-cell-com { color: rgba(255,255,255,0.92); background: rgba(171,243,106,0.025); }

/* ===== VendedorHumanoVsIA — confronto ponto a ponto, coluna IA destacada ===== */
.section-humano-ia { position: relative; }
.hia-vs {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hia-vs-head,
.hia-vs-row {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .hia-vs-head,
  .hia-vs-row { grid-template-columns: 220px 1fr 1fr; }
}
.hia-vs-row { border-top: 1px solid var(--line); }
.hia-vs-head > div {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.hia-vs-head-aspecto { background: rgba(255,255,255,0.02); }
.hia-vs-head-humano { color: var(--text-3); background: rgba(255,255,255,0.02); }
.hia-vs-head-ia { color: var(--accent); background: rgba(171,243,106,0.08); }
.hia-vs-aspecto {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,0.015);
}
.hia-vs-aspecto-icon { color: var(--accent); display: inline-flex; flex-shrink: 0; }
.hia-vs-cell {
  padding: 22px 24px;
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.hia-vs-cell-humano { color: var(--text-3); }
.hia-vs-cell-ia { color: var(--text); background: rgba(171,243,106,0.06); font-weight: 500; }
@media (max-width: 879px) {
  .hia-vs-head { display: none; }
  .hia-vs-aspecto { background: rgba(171,243,106,0.04); font-size: 16px; }
}
.hia-vs-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.hia-vs-mark-x { background: rgba(255,85,98,0.12); color: var(--danger); }
.hia-vs-mark-check { background: rgba(171,243,106,0.15); color: var(--accent); }

/* ===== IAvsChatbot — agora 4 cards "com IA vs sem IA" ===== */
.section-ia-vs-chatbot { position: relative; }
.iac-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px)  { .iac-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .iac-cards { grid-template-columns: repeat(4, 1fr); } }
.iac-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .2s, background .2s;
}
.iac-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.iac-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.iac-card-icon { display: inline-flex; color: var(--text-3); }
.iac-card-stat {
  font-family: 'Sora', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.iac-card-titulo {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.iac-card-desc { font-size: 13px; line-height: 1.5; color: var(--text-3); }
.iac-card-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.iac-compare-row {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.iac-compare-row strong { font-weight: 700; }
.iac-compare-sem strong { color: var(--danger); }
.iac-compare-com strong { color: var(--accent); }
.iac-compare-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.iac-compare-icon-sem { background: rgba(255,85,98,0.12); color: var(--danger); }
.iac-compare-icon-com { background: rgba(171,243,106,0.12); color: var(--accent); }
.iac-card-fonte { font-size: 11px; color: var(--text-4); font-style: italic; }
.iac-cards-disclaimer {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-4);
}
.iac-table {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.iac-row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line);
}
.iac-row:last-child { border-bottom: none; }
@media (min-width: 880px) {
  .iac-row { grid-template-columns: 180px 1fr 1fr; }
}
.iac-row-head {
  background: rgba(255,255,255,0.03);
}
.iac-row-head .iac-cell {
  padding: 14px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.iac-cell {
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 880px) {
  .iac-cell { border-bottom: none; border-right: 1px solid var(--line); }
  .iac-cell:last-child { border-right: none; }
}
.iac-cell:last-child { border-bottom: none; }
.iac-cell-eixo {
  background: rgba(255,255,255,0.02);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  align-items: center;
}
.iac-cell-eixo-text { font-size: 12px; }
.iac-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.iac-tag-chatbot {
  background: rgba(255,255,255,0.04);
  color: var(--text-3);
  border: 1px solid var(--line);
}
.iac-tag-ia {
  background: rgba(171,243,106,0.12);
  color: var(--accent);
  border: 1px solid rgba(171,243,106,0.40);
}
.iac-cell-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}
.iac-cell-icon-chatbot {
  background: rgba(255,85,98,0.08);
  color: var(--danger);
}
.iac-cell-icon-ia {
  background: rgba(171,243,106,0.16);
  color: var(--accent);
}
.iac-cell-chatbot { color: rgba(255,255,255,0.70); }
.iac-cell-ia { color: rgba(255,255,255,0.92); }

/* ===== SeloSeguranca ===== */
.section-heading-tight p { max-width: 640px; }
.selo-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) {
  .selo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .selo-grid { grid-template-columns: repeat(4, 1fr); }
}
.selo-card {
  display: flex;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  align-items: flex-start;
}
.selo-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(171,243,106,0.12);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.selo-text h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.selo-text p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}
.selo-partner {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.selo-partner-img {
  height: 56px;
  width: auto;
  object-fit: contain;
}
.selo-partner-label {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.selo-partner-placeholder { opacity: 0.85; }
.selo-partner-ph-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  text-align: center;
  max-width: 360px;
}
.selo-partner-ph-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
}
.selo-partner-ph-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* ===== Testimonials — métricas em chips (substitui chip único do resultado) ===== */
.t-metrics {
  list-style: none;
  margin: -4px 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.t-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(171,243,106,0.32);
  border-radius: 10px;
  background: rgba(171,243,106,0.08);
}
.t-card-text.accent-amber .t-metric {
  border-color: rgba(255,181,71,0.40);
  background: rgba(255,181,71,0.10);
}
.t-metric-value {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1.1;
  font-feature-settings: 'tnum';
}
.t-card-text.accent-amber .t-metric-value { color: #ffb547; }
.t-metric-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  line-height: 1.2;
}
.t-metric-placeholder {
  border-style: dashed;
  opacity: 0.7;
}
.t-metric-placeholder .t-metric-value { opacity: 0.75; }

/* ============================================================
   4ª onda — Pivot Linear/Resend
   ============================================================ */

/* ===== TrustStrip (funde Integrations + SeloSeguranca) ===== */
/* ===== IntegraStrip — faixa de logos na dobra ===== */
.integra-strip {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.integra-strip-kicker {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 22px;
  letter-spacing: 0.01em;
}
.integra-strip-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(32px, 5vw, 64px);
}
.integra-strip-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: default;
}
.integra-strip-logo-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}
.integra-strip-logo img {
  height: 48px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  /* Efeito do site oficial: apagado por padrão, ganha cor no hover */
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter .28s ease, opacity .28s ease, transform .28s ease;
}
.integra-strip-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-3px);
}
.integra-strip-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: 0.01em;
  transition: color .28s ease;
}
.integra-strip-logo:hover .integra-strip-name { color: var(--text-2); }

/* TrustStrip quando só tem os selos (logos subiram pro IntegraStrip) */
.trust-strip-solo { grid-template-columns: 1fr !important; justify-items: center; }
.trust-strip-solo .ts-col-selos { align-items: center !important; }

.trust-strip-section {
  /* Faixa compacta — section padding reduzido pra ~120px de altura total. */
  padding: 36px 0 !important;
}
@media (min-width: 768px) {
  .trust-strip-section { padding: 48px 0 !important; }
}
.trust-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 880px) {
  .trust-strip {
    grid-template-columns: 1.4fr auto 1fr;
    gap: 36px;
  }
}
.ts-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (min-width: 880px) {
  .ts-col-integ { align-items: flex-start; }
  .ts-col-selos { align-items: flex-end; }
}
.ts-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #818c86;
}
.ts-divider {
  display: none;
}
@media (min-width: 880px) {
  .ts-divider {
    display: block;
    width: 1px;
    height: 48px;
    background: rgba(20,23,26,0.10);
  }
}
.ts-partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 880px) {
  .ts-partners { justify-content: flex-start; }
}
.ts-partner img {
  height: 20px;
  width: auto;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.2s ease;
}
.ts-partner:hover img {
  filter: grayscale(0) opacity(1);
}
.ts-partner span {
  font-size: 13px;
  color: #5b6168;
  font-weight: 500;
}
.ts-selos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 880px) {
  .ts-selos { justify-content: flex-end; }
}
.ts-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,23,26,0.12);
  background: rgba(20,23,26,0.03);
}
.ts-selo-icon {
  color: #5b6168;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ts-selo-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #3a3f45;
}

/* ===== Testimonials — estado vazio (placeholders escondidos) ===== */
.testimonials-grid-3 {
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.t-card-empty {
  min-height: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
}
.t-card-empty .t-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
}
.t-empty-quote-mark {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background: var(--line);
  margin-bottom: 4px;
}
.t-empty-line {
  margin: 0;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line), var(--line-strong), var(--line));
  background-size: 200% 100%;
  animation: empty-shimmer 2.4s linear infinite;
}
.t-empty-line-long { width: 100%; }
.t-empty-line-short { width: 60%; }
.t-empty-caption {
  margin: auto 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
@keyframes empty-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.agg-item-placeholder .agg-stat { color: var(--text-3); }

/* ===== BG alternado entre seções (4ª onda) =====
   Mapa de ritmo:
     Hero            → bg
     TrustBar        → bg
     AntesDepois     → bg-2
     FunnelDifferentials → bg (mantém glow autorizado)
     IAvsChatbot     → bg-2
     Testimonials    → bg
     ComoFunciona3Passos → light
     UseCases        → light
     TrustStrip      → light
     FAQ             → light
     RiskReversalCard→ bg-2
     CTAFinal        → bg
   Como o App.jsx tirou os bridges-d2l/l2d, a transição agora é só pelo
   contraste do bg adjacente — Linear-style. */
.section-antes-depois,
.section-ia-vs-chatbot,
.section-risk-reversal {
  background: var(--bg-2);
}
/* Override o background do testimonials-dark pra bg neutro (alternância) */
.section-testimonials-dark { background: var(--bg); }

/* ===== Cards Linear-style (4ª onda — override universal) =====
   Substitui shadows pesadas por inset 1px + border hover-strong.
   Aplicado SEM !important onde já estava OK, e via classes específicas
   pra cards que estavam com box-shadow: 0 30px 60px ... */
.problem-card,
.passo-card,
.risk-pillar,
.usecase,
.selo-card,
.t-card {
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.problem-card:hover,
.passo-card:hover,
.risk-pillar:hover,
.usecase:hover,
.selo-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transition: background 220ms ease-out, border-color 220ms ease-out;
}
/* Testimonials t-card: sobrescreve box-shadow do hover anterior */
.t-card {
  background: var(--surface);
}
.t-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  transform: none;
}
/* Light section cards mantêm seu box-shadow leve original */
.section-light .t-card:hover {
  box-shadow: 0 6px 20px -10px rgba(20,30,25,0.18);
}

/* ============================================================
   v3 — Mockup WhatsApp (WhatsAppChat), Hero chat, VejaConversa, Funnel cards
   ============================================================ */

/* ===== WhatsAppChat — base reutilizável ===== */
.wa-chat { position: relative; width: 100%; }
.wa-screen {
  display: flex;
  flex-direction: column;
  background: #0b0f0d;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.05) inset;
}
.wa-compact .wa-screen { height: 420px; }
.wa-full .wa-screen { height: 560px; }
@media (min-width: 768px) {
  .wa-compact .wa-screen { height: 460px; }
}

.wa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #11201a;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.wa-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(171,243,106,0.12);
  color: var(--accent);
  flex-shrink: 0;
}
.wa-header-meta { display: flex; flex-direction: column; line-height: 1.25; }
.wa-header-name { font-size: 14px; font-weight: 600; color: #f5f6f7; }
.wa-header-status { font-size: 11px; color: var(--accent); font-weight: 500; }

.wa-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(171,243,106,0.02), transparent 30%),
    #070b09;
  scroll-behavior: smooth;
  /* Fade-out no topo — mensagens antigas saem suavemente em vez de
     ficarem cortadas pelo header. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 4px), #000);
  mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 4px), #000);
}
.wa-body::-webkit-scrollbar { width: 0; }

.wa-bubble {
  max-width: 82%;
  padding: 9px 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  position: relative;
  color: #e9edeb;
  animation: wa-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  word-break: break-word;
}
@keyframes wa-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wa-user {
  align-self: flex-start;
  background: #1f262b;
  border-bottom-left-radius: 4px;
}
.wa-ai {
  align-self: flex-end;
  background: linear-gradient(135deg, #0e3a22, #0b2c1a);
  border: 1px solid rgba(171,243,106,0.22);
  border-bottom-right-radius: 4px;
  color: #eafff2;
}
.wa-time {
  position: absolute;
  bottom: 4px; right: 10px;
  font-size: 9.5px;
  color: rgba(255,255,255,0.4);
  font-feature-settings: 'tnum';
}
.wa-user .wa-time { color: rgba(255,255,255,0.35); }
.wa-ai .wa-time { color: rgba(171,243,106,0.55); }

/* Anexos (documento / áudio) */
.wa-bubble-attach { padding-bottom: 16px; }
.wa-attach { display: inline-flex; align-items: center; gap: 9px; }
.wa-attach-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  color: #cfe8da;
  flex-shrink: 0;
}
.wa-attach-label { font-size: 12.5px; font-weight: 500; }
.wa-wave { display: inline-flex; align-items: center; gap: 2px; height: 20px; }
.wa-wave i {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: rgba(171,243,106,0.6);
}

/* Mensagem de sistema (confirmação) */
.wa-system {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 88%;
  padding: 7px 13px;
  border-radius: 10px;
  background: rgba(171,243,106,0.10);
  border: 1px solid rgba(171,243,106,0.22);
  color: #d7ffe8;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  animation: wa-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wa-system-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: #00210f;
  flex-shrink: 0;
}

/* Indicador "digitando…" */
.wa-typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}
.wa-typing .wa-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  animation: wa-blink 1.2s infinite ease-in-out;
}
.wa-typing .wa-dot:nth-child(2) { animation-delay: 0.18s; }
.wa-typing .wa-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes wa-blink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.wa-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #11201a;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.wa-input-field {
  flex: 1;
  padding: 9px 14px;
  border-radius: 100px;
  background: #1f262b;
  color: var(--text-3);
  font-size: 13px;
}
.wa-input-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: #00210f;
  flex-shrink: 0;
}

/* ===== Hero chat (wrapper + badges) ===== */
.hero-chat { position: relative; }
.hero-chat-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  background: rgba(13,14,16,0.92);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-2);
  box-shadow: 0 16px 40px -20px rgba(0,0,0,0.7);
  max-width: 200px;
}
.hero-chat-badge strong { color: #f5f6f7; font-weight: 600; }
.hero-chat-badge-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(171,243,106,0.12);
  color: var(--accent);
  flex-shrink: 0;
}
.hero-chat-badge-tr { top: -14px; right: -10px; }
.hero-chat-badge-bl { bottom: -14px; left: -10px; }
@media (max-width: 560px) {
  .hero-chat-badge { display: none; } /* limpa o hero em telas pequenas */
}

/* ===== VejaConversa — split assimétrico ===== */
.section-veja-conversa { background: var(--bg-2); }
.vc-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 980px) {
  .vc-split { grid-template-columns: 1fr 0.85fr; gap: 64px; }
}
.vc-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.vc-copy h2 { margin-top: 4px; }
.vc-lead { font-size: 17px; color: var(--text-2); max-width: 520px; }
.vc-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  width: 100%;
}
.vc-step { display: flex; gap: 13px; align-items: flex-start; }
.vc-step-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent);
  flex-shrink: 0;
}
.vc-step-text { display: flex; flex-direction: column; gap: 2px; }
.vc-step-text strong { font-size: 15px; color: var(--text); font-weight: 600; }
.vc-step-text span { font-size: 13.5px; color: var(--text-3); line-height: 1.45; }
.vc-cta { margin-top: 8px; }
.vc-mockup { position: relative; }
@media (min-width: 980px) {
  .vc-mockup { transform: rotate(1.2deg); }
}

/* ===== Funnel — grid de 4 cards (substitui o SVG gigante) ===== */
.funnel-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .funnel-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .funnel-cards { grid-template-columns: repeat(4, 1fr); }
}
.funnel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: background 220ms ease-out, border-color 220ms ease-out, transform 220ms ease-out;
}
.funnel-card:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.funnel-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.funnel-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(171,243,106,0.10);
  border: 1px solid rgba(171,243,106,0.20);
  color: var(--accent);
}
.funnel-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: -0.02em;
}
.funnel-card-stage {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.funnel-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.funnel-card-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.funnel-card-bullets {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.funnel-card-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-3);
}
.funnel-card-bullets .bullet-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(171,243,106,0.12);
  color: var(--accent);
  flex-shrink: 0;
}

/* Light mode — mockup e cards */
body[data-bg="light"] .section-veja-conversa { background: var(--light-bg-2, #efece1); }
body[data-bg="light"] .vc-step-icon { background: #ffffff; border-color: var(--light-line); }
body[data-bg="light"] .funnel-card {
  background: #ffffff;
  border-color: var(--light-line);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.18);
}
body[data-bg="light"] .funnel-card-title { color: var(--light-text); }
body[data-bg="light"] .funnel-card-desc { color: var(--light-text-2); }

/* ===== ResultadosReais — prova ZapSign + shuffle cards ===== */
.section-resultados { position: relative; }
.resultados-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px) {
  .resultados-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.resultados-stats {
  display: flex;
  gap: 36px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.r-stat { display: flex; flex-direction: column; }
.r-stat b {
  font-family: 'Sora', sans-serif;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.r-stat span { font-size: 13px; color: var(--text-3); margin-top: 6px; max-width: 16ch; }
.resultados-zapsign {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 13px;
  color: var(--text-3);
}
.resultados-zapsign img { height: 22px; width: auto; opacity: 0.9; }

/* Alternância de fundo perceptível entre seções dark (reduz fadiga do "preto contínuo") */
.section-antes-depois,
.section-humano-ia,
.section-risk-reversal { background: var(--bg-2); }

.resultados-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.case-stack {
  position: relative;
  width: clamp(340px, 42vw, 460px);
  height: clamp(440px, 50vw, 560px);
  margin-right: clamp(40px, 9vw, 120px); /* espaço pros cards rotacionados à direita */
}
.case-card {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(340px, 42vw, 460px);
  height: clamp(440px, 50vw, 560px);
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.case-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(8,12,10,0.78);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 4px 10px;
  backdrop-filter: blur(4px);
}
.case-card-imgwrap {
  flex: 1;
  overflow: hidden;
  background: #fff;
}
.case-card-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
}
.case-card-meta {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.case-card-area { font-size: 13px; font-weight: 600; color: var(--text-2); }
.case-card-num { font-size: 13px; color: var(--text-3); }
.case-card-num b {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-right: 2px;
}
.case-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-4);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s;
}
.case-hint:hover { color: var(--text-2); }
.case-hint svg { transform: rotate(180deg); }

/* ===== FunnelDifferentials — headline compacta + lista de produtos ===== */
.funnel-section .section-heading h2 {
  font-size: clamp(26px, 3.2vw, 42px);
  max-width: 42ch;
  line-height: 1.08;
}
.funnel-produtos {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.funnel-produtos-label {
  display: block;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 28px;
}
.funnel-areas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  text-align: left;
}
@media (min-width: 760px) { .funnel-areas { grid-template-columns: repeat(2, 1fr); } }
.funnel-area { --ac: var(--accent); }
.area-prev { --ac: #5b9dff; }  /* Previdenciário — azul */
.area-cons { --ac: #ffd23d; }  /* Consumidor — amarelo */
.area-trab { --ac: #ff6b6b; }  /* Trabalhista — vermelho */
.area-banc { --ac: #ff8c42; }  /* Bancário — laranja */
.area-fam  { --ac: #a78bfa; }  /* Família — violeta */
.funnel-area-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 14px;
}
.funnel-area-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); flex-shrink: 0; }
.funnel-area-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.funnel-produto-chip {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ac, var(--accent)) 28%, var(--line));
  border-radius: 999px;
  padding: 7px 15px;
  transition: border-color .2s, color .2s, background .2s;
}
.funnel-produto-chip:hover {
  border-color: var(--ac, var(--accent));
  color: var(--text);
  background: color-mix(in srgb, var(--ac, var(--accent)) 12%, var(--surface));
}
.funnel-produtos-foot {
  margin: 32px auto 0;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
}
.funnel-produtos-foot strong { color: var(--accent); font-weight: 700; }

/* ComoFunciona3Passos — headline compacta (estava grande demais) */
.section-3passos .section-heading h2 {
  font-size: clamp(28px, 4vw, 46px);
  max-width: 22ch;
}
.section-3passos .section-heading {
  margin-bottom: clamp(40px, 5vw, 60px);
}
.section-3passos .section-heading p { max-width: 52ch; }

/* Marca d'água da logo no fundo das seções brancas (evita o "branco morto") */
.section-3passos,
.section-light#faq {
  position: relative;
  overflow: hidden;
}
.section-3passos::after,
.section-light#faq::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -16%;
  width: min(58vw, 720px);
  height: min(38vw, 460px);
  background: url('assets/logo.png') no-repeat right bottom;
  background-size: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}
.section-3passos > .container,
.section-light#faq > .container {
  position: relative;
  z-index: 1;
}

/* ============================================================
   v3 — Responsividade mobile (não altera desktop; só ≤ breakpoints)
   ============================================================ */

/* --- Rede de segurança + padding lateral mínimo (20px) --- */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .container { padding-left: 20px; padding-right: 20px; }
  h1, h2, h3 { overflow-wrap: anywhere; }
  /* Touch targets confortáveis */
  .btn { min-height: 44px; }
  .nav .btn { min-height: 40px; }
  /* Painel de tweaks (dev-only) não atrapalha no celular */
  .twk-panel { display: none !important; }
}

/* --- Hero: headline e mockup em telas pequenas --- */
@media (max-width: 600px) {
  .hero-copy h1 { font-size: clamp(29px, 8.4vw, 40px); line-height: 1.08; }
  .hero-sub { font-size: 16px; }
  .hero-inner { gap: 28px; }
  /* mockup ocupa a largura sem estourar */
  .hero-chat, .wa-chat { width: 100%; max-width: 100%; }
  .wa-compact .wa-screen { height: 400px; }
}

/* --- ResultadosReais / shuffle-cards: a maior fonte de overflow lateral ---
   Reduz card+stack e centraliza; o deslocamento inline (11%/22%) + rotação
   dos cards de trás é contido pelo overflow-x:hidden do body. */
@media (max-width: 600px) {
  .resultados-cards { width: 100%; max-width: 100%; }
  .case-stack {
    width: min(68vw, 260px);
    height: min(104vw, 380px);
    margin: 0 auto;              /* zera o margin-right que empurrava pra fora */
  }
  .case-card {
    width: min(68vw, 260px);
    height: min(104vw, 380px);
  }
  .resultados-stats { gap: 28px; }
}

/* --- Tabela "Outras IAs vs ConversApp": rótulos quando empilha (<880px) --- */
@media (max-width: 879px) {
  .ad-row-head { display: none; }              /* cabeçalho redundante no empilhado */
  .ad-cell-sem, .ad-cell-com { flex-wrap: wrap; }
  .ad-row:not(.ad-row-head) .ad-cell-sem::before,
  .ad-row:not(.ad-row-head) .ad-cell-com::before {
    flex-basis: 100%;
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .ad-row:not(.ad-row-head) .ad-cell-sem::before { content: 'Outras IAs / faça você mesmo'; color: var(--danger); }
  .ad-row:not(.ad-row-head) .ad-cell-com::before { content: 'ConversApp'; color: var(--accent); }
}

/* --- Tabela "Vendedor humano vs IA": rótulos quando empilha (<880px) --- */
@media (max-width: 879px) {
  .hia-vs-cell { flex-wrap: wrap; }
  .hia-vs-cell-humano::before,
  .hia-vs-cell-ia::before {
    flex-basis: 100%;
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .hia-vs-cell-humano::before { content: 'Vendedor humano'; color: var(--text-3); }
  .hia-vs-cell-ia::before { content: 'Vendedor IA ConversApp'; color: var(--accent); }
}

/* --- Stat-card do hero não estoura em telas estreitas --- */
@media (max-width: 420px) {
  .hero-stats { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .hero-stat { align-items: flex-start; }
  .hero-stat:not(:last-child)::after { display: none; }
}

/* --- VejaConversa: garante mockup full-width sem rotação que vaze no mobile --- */
@media (max-width: 980px) {
  .vc-mockup { transform: none; }
  .vc-mockup .wa-chat { max-width: 460px; margin: 0 auto; }
}

/* --- Integra-strip: logos um pouco menores e gap controlado no mobile --- */
@media (max-width: 600px) {
  .integra-strip-logos { gap: 28px 32px; }
  .integra-strip-logo img, .integra-strip-logo-img { height: 38px; }
}

/* ============================================================
   v3 — Tema light (modo branco) para os componentes NOVOS
   Só body[data-bg="light"]. Não afeta o tema dark.
   Verde de texto sobre claro: #1200FF (o #39ff7a some no branco).
   ============================================================ */

/* --- Alternância de fundo claro (no dark essas seções usam --bg-2) --- */
body[data-bg="light"] .section-resultados,
body[data-bg="light"] .section-antes-depois,
body[data-bg="light"] .section-humano-ia,
body[data-bg="light"] .section-ia-vs-chatbot,
body[data-bg="light"] .section-veja-conversa,
body[data-bg="light"] .section-risk-reversal {
  background: #ffffff;        /* branco limpo sobre o body creme → ritmo claro */
}

/* ===== ResultadosReais ===== */
body[data-bg="light"] .r-stat b { color: #1200FF; }
body[data-bg="light"] .resultados-zapsign { color: var(--light-text-2); }
/* logo: branca no dark, colorida no light */
.zapsign-logo-light { display: none; }
body[data-bg="light"] .zapsign-logo-dark { display: none; }
body[data-bg="light"] .zapsign-logo-light { display: inline-block; }
body[data-bg="light"] .case-card {
  background: #ffffff;
  border-color: var(--light-line);
  box-shadow: 0 30px 70px -34px rgba(20,30,25,0.28);
}
body[data-bg="light"] .case-card-meta {
  background: #f5f3ee;
  border-top-color: var(--light-line);
}
body[data-bg="light"] .case-card-area { color: var(--light-text); }
body[data-bg="light"] .case-card-num { color: var(--light-text-2); }
body[data-bg="light"] .case-card-num b { color: #1200FF; }
body[data-bg="light"] .case-card-badge {
  background: rgba(255,255,255,0.82);
  border-color: rgba(18,0,255,0.35);
  color: #1200FF;
}
body[data-bg="light"] .case-hint { color: var(--light-text-3); }
body[data-bg="light"] .case-hint:hover { color: var(--light-text-2); }

/* ===== VendedorHumanoVsIA ===== */
body[data-bg="light"] .hia-vs { border-color: var(--light-line); }
body[data-bg="light"] .hia-vs-row { border-top-color: var(--light-line); }
body[data-bg="light"] .hia-vs-head-aspecto,
body[data-bg="light"] .hia-vs-head-humano { background: rgba(20,23,26,0.03); color: var(--light-text-2); }
body[data-bg="light"] .hia-vs-head-ia { background: rgba(18,0,255,0.10); color: #1200FF; }
body[data-bg="light"] .hia-vs-aspecto { background: rgba(20,23,26,0.02); color: var(--light-text); }
body[data-bg="light"] .hia-vs-aspecto-icon { color: #1200FF; }
body[data-bg="light"] .hia-vs-cell-humano { color: var(--light-text-2); }
body[data-bg="light"] .hia-vs-cell-ia { color: var(--light-text); background: rgba(18,0,255,0.07); }
body[data-bg="light"] .hia-vs-mark-x { background: rgba(214,58,58,0.12); color: #d63a3a; }
body[data-bg="light"] .hia-vs-mark-check { background: rgba(18,0,255,0.14); color: #1200FF; }
@media (max-width: 879px) {
  body[data-bg="light"] .hia-vs-aspecto { background: rgba(18,0,255,0.05); }
  body[data-bg="light"] .hia-vs-cell-humano::before { color: var(--light-text-3); }
  body[data-bg="light"] .hia-vs-cell-ia::before { color: #1200FF; }
}

/* ===== IAvsChatbot (cards de números) ===== */
body[data-bg="light"] .iac-card {
  background: #ffffff;
  border-color: var(--light-line);
  box-shadow: 0 8px 24px -18px rgba(20,30,25,0.22);
}
body[data-bg="light"] .iac-card:hover { border-color: rgba(18,0,255,0.30); background: #fbfbf9; }
body[data-bg="light"] .iac-card-icon { color: var(--light-text-3); }
body[data-bg="light"] .iac-card-stat { color: #1200FF; }
body[data-bg="light"] .iac-card-titulo { color: var(--light-text); }
body[data-bg="light"] .iac-card-desc { color: var(--light-text-2); }
body[data-bg="light"] .iac-card-compare { border-top-color: var(--light-line); }
body[data-bg="light"] .iac-compare-row { color: var(--light-text-2); }
body[data-bg="light"] .iac-compare-sem strong { color: #d63a3a; }
body[data-bg="light"] .iac-compare-com strong { color: #1200FF; }
body[data-bg="light"] .iac-compare-icon-sem { background: rgba(214,58,58,0.12); color: #d63a3a; }
body[data-bg="light"] .iac-compare-icon-com { background: rgba(18,0,255,0.12); color: #1200FF; }
body[data-bg="light"] .iac-card-fonte { color: var(--light-text-3); }
body[data-bg="light"] .iac-cards-disclaimer { color: var(--light-text-3); }

/* ===== IntegraStrip ===== */
body[data-bg="light"] .integra-strip {
  background: var(--light-bg-2, #efece1);
  border-top: 1px solid var(--light-line);
  border-bottom: 1px solid var(--light-line);
}
body[data-bg="light"] .integra-strip-kicker { color: var(--light-text-2); }
body[data-bg="light"] .integra-strip-name { color: var(--light-text-2); }
/* logos seguem grayscale com hover colorido — funciona em fundo claro */

/* ===== FunnelDifferentials — cards + áreas/teses ===== */
body[data-bg="light"] .funnel-card {
  background: #ffffff;
  border-color: var(--light-line);
  box-shadow: 0 8px 24px -18px rgba(20,30,25,0.20);
}
body[data-bg="light"] .funnel-card:hover { background: #fbfbf9; border-color: rgba(18,0,255,0.28); }
body[data-bg="light"] .funnel-card-icon { background: rgba(18,0,255,0.10); border-color: rgba(18,0,255,0.22); color: #1200FF; }
body[data-bg="light"] .funnel-card-num { color: var(--light-text-3); }
body[data-bg="light"] .funnel-card-stage { color: var(--light-text-3); }
body[data-bg="light"] .funnel-card-title { color: var(--light-text); }
body[data-bg="light"] .funnel-card-desc { color: var(--light-text-2); }
body[data-bg="light"] .funnel-card-bullets li { color: var(--light-text-3); }
body[data-bg="light"] .funnel-card-bullets .bullet-icon { background: rgba(18,0,255,0.12); color: #1200FF; }
body[data-bg="light"] .funnel-produtos { border-top-color: var(--light-line); }
body[data-bg="light"] .funnel-produtos-label { color: var(--light-text-2); }
body[data-bg="light"] .funnel-produtos-foot { color: var(--light-text-2); }
body[data-bg="light"] .funnel-produtos-foot strong { color: #1200FF; }
body[data-bg="light"] .funnel-produto-chip {
  background: #ffffff;
  color: var(--light-text-2);
}
/* Cores das áreas saturadas/escuras pro fundo claro (as originais somem no branco) */
body[data-bg="light"] .area-prev { --ac: #2457c7; }  /* Previdenciário — azul */
body[data-bg="light"] .area-cons { --ac: #c9a200; }  /* Consumidor — amarelo (era ilegível) */
body[data-bg="light"] .area-trab { --ac: #d63a3a; }  /* Trabalhista — vermelho */
body[data-bg="light"] .area-banc { --ac: #e06a1f; }  /* Bancário — laranja */
body[data-bg="light"] .area-fam  { --ac: #7c5cdb; }  /* Família — violeta */

/* ===== AntesDepois (tabela) ===== */
body[data-bg="light"] .ad-table { border-color: var(--light-line); background: #ffffff; }
body[data-bg="light"] .ad-row { border-bottom-color: var(--light-line); }
body[data-bg="light"] .ad-row-head { background: rgba(20,23,26,0.03); border-bottom-color: var(--light-line); }
body[data-bg="light"] .ad-row-head .ad-cell { color: var(--light-text-2); }
body[data-bg="light"] .ad-cell { color: var(--light-text-2); border-bottom-color: var(--light-line); }
@media (min-width: 880px) {
  body[data-bg="light"] .ad-cell { border-right-color: var(--light-line); }
}
body[data-bg="light"] .ad-cell-scenario { background: rgba(20,23,26,0.02); color: var(--light-text); }
body[data-bg="light"] .ad-cell-cenario-text { color: var(--light-text); }
body[data-bg="light"] .ad-cell-crit-icon { color: #1200FF; }
body[data-bg="light"] .ad-tag-sem { color: #d63a3a; }
body[data-bg="light"] .ad-tag-com { color: #1200FF; }
body[data-bg="light"] .ad-cell-icon-sem { background: rgba(214,58,58,0.12); color: #d63a3a; }
body[data-bg="light"] .ad-cell-icon-com { background: rgba(18,0,255,0.16); color: #1200FF; }
body[data-bg="light"] .ad-cell-sem { color: var(--light-text-2); }
body[data-bg="light"] .ad-cell-com { color: var(--light-text); background: rgba(18,0,255,0.04); }
body[data-bg="light"] .ad-expand-btn { background: #ffffff; border-color: var(--light-line); color: var(--light-text); }
body[data-bg="light"] .ad-expand-btn:hover { border-color: rgba(18,0,255,0.35); background: #fbfbf9; }
@media (max-width: 879px) {
  body[data-bg="light"] .ad-cell-sem::before { color: #d63a3a; }
  body[data-bg="light"] .ad-cell-com::before { color: #1200FF; }
}

/* ===== VejaConversa (moldura ao redor do mockup) =====
   O mockup WhatsApp em si fica escuro (parece um celular) — legítimo sobre claro. */
body[data-bg="light"] .vc-lead { color: var(--light-text-2); }
body[data-bg="light"] .vc-step-icon { background: #ffffff; border-color: var(--light-line); color: #1200FF; }
body[data-bg="light"] .vc-step-text strong { color: var(--light-text); }
body[data-bg="light"] .vc-step-text span { color: var(--light-text-2); }

/* ===== Hero chat badges (continuam escuras flutuando sobre o hero claro) ===== */
body[data-bg="light"] .hero-chat-badge {
  background: rgba(255,255,255,0.94);
  border-color: var(--light-line);
  color: var(--light-text-2);
  box-shadow: 0 16px 40px -22px rgba(20,30,25,0.30);
}
body[data-bg="light"] .hero-chat-badge strong { color: var(--light-text); }
body[data-bg="light"] .hero-chat-badge-icon { background: rgba(171,243,106,0.18); color: var(--accent-ink); }

/* =================================================================
   v4 — OVERRIDES DA IDENTIDADE VISUAL OFICIAL
   Navy #040F2E · Azul-elétrico #1200FF · Verde-limão #ABF36A · Sora
   Aplicados por cascata (vencem as regras herdadas da v3).
   ================================================================= */

/* ----- Marca / logo (SVG inline) ----- */
.brand-logo { display: inline-flex; align-items: center; gap: 11px; line-height: 1; }
.brand-mark { display: block; flex: none; }
.brand-word {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.34em;
  letter-spacing: -0.035em;
  color: currentColor;
  line-height: 1;
}
.nav-logo { color: var(--text); }
.footer-brand .nav-logo { color: var(--text); }

/* Botão primário: SEMPRE verde-limão com texto navy (IDV "Try It"),
   independente do fundo. O verde-limão é o botão da marca em qualquer contexto. */
.btn-primary { color: var(--accent-ink); }
.section-light .btn-primary { background: #ABF36A; color: var(--accent-ink); box-shadow: 0 8px 24px -10px rgba(171,243,106,0.6); }
.section-light .btn-primary:hover { background: #BBF770; }
body[data-bg="light"] .btn-primary { background: #ABF36A; color: var(--accent-ink); }
body[data-bg="light"] .btn-primary:hover { background: #BBF770; color: var(--accent-ink); }

/* ----- Hero: superfície azul-elétrico (assinatura da marca) ----- */
.hero {
  background:
    radial-gradient(1200px 760px at 50% -12%, var(--blue-2), transparent 62%),
    linear-gradient(178deg, var(--blue) 0%, var(--blue-deep) 58%, var(--navy) 100%);
}
.hero-bg {
  background:
    radial-gradient(680px 520px at 16% 14%, rgba(171,243,106,0.18), transparent 60%),
    radial-gradient(640px 560px at 94% 82%, rgba(255,255,255,0.12), transparent 62%);
  -webkit-mask-image: none;
  mask-image: none;
}
.infinite-grid-bg .igb-active { filter: drop-shadow(0 0 8px rgba(171,243,106,0.75)); }
.hero-sub { color: rgba(255,255,255,0.88); }
.hero-copy h1 .line-accent { color: var(--accent); font-style: normal; }
.hero-vsl-intro, .hero-trust-micro { color: rgba(255,255,255,0.80); }
.hero-stat-value { color: #fff; }
.hero-stat:first-child .hero-stat-value { color: var(--accent); }
.hero-stat-label { color: rgba(255,255,255,0.70); }

/* Nav sobre o azul */
.nav {
  background: rgba(4, 15, 46, 0.40);
  border-color: rgba(255,255,255,0.18);
}

/* Sparkles + halftone (motifs da IDV) no hero */
.hero-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-deco .spark { position: absolute; fill: var(--accent); filter: drop-shadow(0 0 10px rgba(171,243,106,0.55)); }
.hero-deco .spark-1 { width: 46px; height: 46px; top: 16%; right: 9%; animation: idvSpark 5.5s ease-in-out infinite; }
.hero-deco .spark-2 { width: 26px; height: 26px; top: 60%; right: 4%; animation: idvSpark 6.5s ease-in-out infinite 0.6s; }
.hero-deco .spark-3 { width: 18px; height: 18px; top: 30%; left: 4%; opacity: 0.85; animation: idvSpark 7s ease-in-out infinite 1.2s; }
.hero-deco::after {
  /* halftone de pontos verde-limão no canto inferior — motif da IDV */
  content: '';
  position: absolute;
  left: -10px; bottom: 8%;
  width: 180px; height: 150px;
  background-image: radial-gradient(var(--accent) 2px, transparent 2.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(115deg, #000, transparent 72%);
  mask-image: linear-gradient(115deg, #000, transparent 72%);
  opacity: 0.5;
}
@media (max-width: 1000px) {
  .hero-deco .spark-1 { top: 4%; right: 6%; width: 34px; height: 34px; }
  .hero-deco .spark-2, .hero-deco::after { display: none; }
}
@keyframes idvSpark {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.18) rotate(20deg); opacity: 1; }
}

/* ----- CTA final: superfície azul-elétrico com sparkles ----- */
.cta-final {
  background:
    radial-gradient(900px 500px at 50% -20%, var(--blue-2), transparent 60%),
    linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-color: rgba(255,255,255,0.18);
}
.cta-final::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 70% 90% at center, black 0%, transparent 82%);
}
.cta-final::after {
  content: '';
  position: absolute;
  top: 12%; right: 9%;
  width: 64px; height: 64px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ABF36A' d='M12 1.6c.9 6 4.4 9.5 10.4 10.4C16.4 12.9 12.9 16.4 12 22.4 11.1 16.4 7.6 12.9 1.6 12 7.6 11.1 11.1 7.6 12 1.6Z'/></svg>");
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 12px rgba(171,243,106,0.5));
  animation: idvSpark 6s ease-in-out infinite;
  pointer-events: none;
}
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255,255,255,0.86); }
.cta-final .eyebrow { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.28); }
.cta-final-micro { color: rgba(255,255,255,0.78); }
.cta-final .btn-ghost { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.40); color: #fff; }
.cta-final .btn-ghost:hover { background: rgba(255,255,255,0.18); }

/* ===== Marca d'água da logo — sutil sobre claro (preto a baixa opacidade) ===== */
body[data-bg="light"] .section-3passos::after,
body[data-bg="light"] .section-light#faq::after { opacity: 0.035; }

/* ===== Logo: clara (texto branco) no dark, escura (texto azul) no modo branco ===== */
.logo-on-light { display: none; }
body[data-bg="light"] .logo-on-dark { display: none; }
body[data-bg="light"] .logo-on-light { display: block; }

/* =================================================================
   v4 — MODO CLARO COMO BASE (off-white + navy).
   Azul-elétrico reservado a seções específicas: HERO e CTA FINAL.
   Estes overrides são scoped a body[data-bg="light"] e vêm por último,
   então vencem os blocos de light-mode herdados da v3.
   ================================================================= */

/* ----- HERO: permanece azul-elétrico sólido ----- */
body[data-bg="light"] .hero {
  background:
    radial-gradient(1200px 760px at 50% -12%, var(--blue-2), transparent 62%),
    linear-gradient(178deg, var(--blue) 0%, var(--blue-deep) 100%) !important;
  color: #fff;
}
body[data-bg="light"] .hero-bg {
  background:
    radial-gradient(680px 520px at 16% 14%, rgba(171,243,106,0.20), transparent 60%),
    radial-gradient(640px 560px at 94% 82%, rgba(255,255,255,0.14), transparent 62%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body[data-bg="light"] .infinite-grid-bg { opacity: 0.5; mix-blend-mode: normal; }
body[data-bg="light"] .hero-copy h1 .line { color: #fff; }
/* No hero azul, o acento é verde-limão fixo (não var(--accent), que vira azul
   no modo claro e some sobre o fundo azul). */
body[data-bg="light"] .hero-copy h1 .line-accent {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ABF36A !important;
  color: #ABF36A !important;
}
body[data-bg="light"] .hero-sub,
body[data-bg="light"] .hero-vsl-intro,
body[data-bg="light"] .hero-trust-micro { color: rgba(255,255,255,0.88) !important; }
body[data-bg="light"] .hero-stat-value { color: #fff; }
body[data-bg="light"] .hero-stat:first-child .hero-stat-value { color: #ABF36A; }
body[data-bg="light"] .hero-stat-label { color: rgba(255,255,255,0.72); }

/* Nav: vidro navy sobre o hero azul (a nav só aparece sobre o hero) */
body[data-bg="light"] .nav {
  background: rgba(4,15,46,0.42) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
body[data-bg="light"] .nav-logo { color: #fff; }
body[data-bg="light"] .nav-links a { color: rgba(255,255,255,0.80); }
body[data-bg="light"] .nav-links a:hover { color: #fff; }

/* ----- CTA FINAL: permanece azul-elétrico sólido ----- */
body[data-bg="light"] .cta-final {
  background:
    radial-gradient(900px 500px at 50% -20%, var(--blue-2), transparent 60%),
    linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
body[data-bg="light"] .cta-final::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) !important;
}
body[data-bg="light"] .cta-final h2 { color: #fff !important; }
body[data-bg="light"] .cta-final p { color: rgba(255,255,255,0.86) !important; }
body[data-bg="light"] .cta-final .eyebrow { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.28); }
body[data-bg="light"] .cta-final-micro { color: rgba(255,255,255,0.78); }
body[data-bg="light"] .cta-final .btn-ghost { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.40); color: #fff; }
body[data-bg="light"] .cta-final .btn-ghost:hover { background: rgba(255,255,255,0.18); }
body[data-bg="light"] .cta-final-dot { background: #ABF36A; box-shadow: 0 0 8px #ABF36A; }
body[data-bg="light"] .cta-final .eyebrow .dot { background: #ABF36A; }

/* ----- Hero: grid ESTÁTICO (substitui o grid animado/flashlight) ----- */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 35% 42%, black 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 85% at 35% 42%, black 38%, transparent 100%);
}

/* ----- Mockup de WhatsApp: usar o VERDE oficial do WhatsApp (#25d366),
   não o azul/lime do tema. Aplica em qualquer modo. ----- */
.wa-avatar { background: rgba(37,211,102,0.15); color: var(--whatsapp); }
.wa-header-status { color: var(--whatsapp); }
.wa-ai { border-color: rgba(37,211,102,0.30); }
.wa-ai .wa-time { color: rgba(214,255,225,0.5); }
.wa-system { background: rgba(37,211,102,0.10); border-color: rgba(37,211,102,0.24); }
.wa-system-icon { background: var(--whatsapp); color: #04130a; }
.wa-input-send { background: var(--whatsapp); color: #04130a; }

/* ----- VejaConversa: ícones dos passos com cores distintas (não azul) -----
   Especificidade alta (3 classes) pra vencer body[data-bg="light"] .vc-step-icon. */
.vc-steps .vc-step-icon.vc-icon-wa  { background: rgba(37,211,102,0.16); color: var(--whatsapp); border-color: rgba(37,211,102,0.30); }
.vc-steps .vc-step-icon.vc-icon-doc { background: #040F2E; color: #ffffff; border-color: #040F2E; }
.vc-steps .vc-step-icon.vc-icon-mic { background: #EEF0F4; color: #0E1320; border-color: rgba(4,15,46,0.12); }
.vc-steps .vc-step-icon.vc-icon-cal { background: #ABF36A; color: #040F2E; border-color: rgba(4,15,46,0.18); }

/* =================================================================
   v5 — CINEMATIC LAYER
   Vídeo de fundo no hero, indicador de scroll, e ajustes pra Lenis +
   ScrollTrigger. Animações em si vivem em src/Cinematic.jsx.
   ================================================================= */

/* Vídeo de fundo do hero (loop, mudo). Fica sob o glow, grid e conteúdo. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.30;
  filter: saturate(1.05) contrast(1.05);
  pointer-events: none;
  /* fallback enquanto o vídeo carrega/se está ausente: 0 (o gradiente azul do .hero
     já dá o fundo); a opacidade real entra com o autoplay. */
  background: transparent;
}
/* Garante que glow e grid fiquem acima do vídeo */
.hero .hero-bg { z-index: 1; }
.hero .hero-grid { z-index: 2; }
.hero .hero-deco { z-index: 2; }
.hero .nav { z-index: 4; }
.hero .hero-inner { z-index: 3; }

/* Vinheta sutil sobre o hero pra ancorar texto quando o vídeo carrega */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(4,15,46,0.45), transparent 60%),
    linear-gradient(180deg, rgba(4,15,46,0.18) 0%, transparent 30%);
}

/* Indicador de scroll — barra fina com dot lime descendo em loop */
.hero-scroll-ind {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.78);
  user-select: none;
}
.hero-scroll-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.hero-scroll-line {
  position: relative;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,255,255,0.05));
  overflow: hidden;
}
.hero-scroll-line i {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 16px;
  border-radius: 4px;
  background: var(--accent);
  filter: drop-shadow(0 0 10px rgba(171,243,106,0.75));
  animation: scrollPing 2.0s cubic-bezier(0.55, 0.05, 0.45, 1) infinite;
}
@keyframes scrollPing {
  0%   { transform: translateY(-22px); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(58px); opacity: 0; }
}
@media (max-width: 767px) {
  /* No mobile o hero é mais alto que o viewport e o CTA já indica scroll —
     esconder o indicador evita ficar fora da dobra inicial. */
  .hero-scroll-ind { display: none; }
}

/* Quando os assets cinematográficos terminam de carregar, marca o html.
   Permite estilizar transições pós-load se necessário. */
html.cinematic-ready body { /* placeholder pra futuras camadas */ }

/* Lenis exige overflow correto pra calcular scroll. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----- Eyebrow da seção de depoimentos: bolinha verde-limão (não azul) ----- */
.section-heading-depoimentos .eyebrow .dot {
  background: #ABF36A;
  box-shadow: 0 0 10px rgba(171,243,106,0.55);
}
/* H2 da seção de depoimentos é longo — fonte menor e largura ampla pra ficar
   em 2–3 linhas em vez de empilhar 7. */
.section-heading-depoimentos h2 {
  font-size: clamp(24px, 2.8vw, 38px);
  max-width: 60ch;
  line-height: 1.12;
}

/* ----- Card de depoimento em vídeo (YouTube Short, vertical 9:16) ----- */
.t-video-wrap {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.t-video-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.t-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 30px 80px -30px rgba(4,15,46,0.45),
    0 0 0 1px rgba(4,15,46,0.10);
}
.t-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.t-video-caption {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (max-width: 480px) {
  .t-video-card { max-width: 320px; }
  .t-video-frame { border-radius: 18px; }
}

/* =================================================================
   v5 — Lote de ajustes solicitados
   ================================================================= */

/* ----- Hero: CTA "Quero conhecer a IA" sob o subhead ----- */
.hero-copy-cta {
  align-self: flex-start;
  margin-top: 4px;
}
@media (max-width: 999px) {
  .hero-copy-cta { align-self: stretch; justify-content: center; }
}

/* ----- Nav links (links âncora no topo) ----- */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: #fff; }
body[data-bg="light"] .nav-links a { color: rgba(255,255,255,0.82); }
body[data-bg="light"] .nav-links a:hover { color: #fff; }

/* ----- Bolinha verde no eyebrow das seções pedidas ----- */
.section-heading-funnel .eyebrow .dot,
.section-heading-antesdepois .eyebrow .dot,
.section-heading-depoimentos .eyebrow .dot {
  background: #ABF36A !important;
  box-shadow: 0 0 10px rgba(171,243,106,0.55);
}

/* ----- AntesDepois: cabeçalho "ConversApp" em verde-limão (modo claro) ----- */
body[data-bg="light"] .section-antes-depois .ad-tag-com {
  color: #1E8E32 !important;
}
body[data-bg="light"] .section-antes-depois .ad-row-head .ad-cell-com {
  background: rgba(171,243,106,0.10);
}
body[data-bg="light"] .section-antes-depois .ad-cell-com {
  background: rgba(171,243,106,0.04);
}
body[data-bg="light"] .section-antes-depois .ad-cell-icon-com {
  background: rgba(171,243,106,0.20);
  color: #1E8E32;
}
@media (max-width: 880px) {
  body[data-bg="light"] .section-antes-depois .ad-row:not(.ad-row-head) .ad-cell-com::before {
    color: #1E8E32 !important;
  }
}

/* ----- Reduzir espaço entre AntesDepois e ResultadosReais ----- */
.section-antes-depois { padding-bottom: 56px; }
.section-resultados   { padding-top: 56px; }
@media (min-width: 768px) {
  .section-antes-depois { padding-bottom: 72px; }
  .section-resultados   { padding-top: 72px; }
}

/* ----- Depoimentos: card maior + grid pra múltiplos vídeos ----- */
.t-video-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1100px;
  margin: 36px auto 0;
  justify-items: center;
}
.t-video-card { width: 100%; max-width: 460px; }
.t-video-frame { border-radius: 24px; }
@media (max-width: 480px) {
  .t-video-card { max-width: 340px; }
  .t-video-frame { border-radius: 18px; }
}

/* ----- Respiro acima do FAQ (estava colado na seção anterior) ----- */
.section-light#faq {
  padding-top: clamp(96px, 10vw, 160px);
}
.section-light#faq .section-heading { margin-bottom: 48px; }

/* ----- FunnelDifferentials: cada um dos 4 cards com cor própria, estilo
   VejaConversa (cada ícone com identidade temática). Vence o override de
   light-mode pela ordem (mesmo especificity, vem por último). ----- */
body[data-bg="light"] .funnel-card:nth-child(1) .funnel-card-icon {
  background: rgba(37,211,102,0.16); border-color: rgba(37,211,102,0.32); color: var(--whatsapp);
}
body[data-bg="light"] .funnel-card:nth-child(2) .funnel-card-icon {
  background: rgba(18,0,255,0.10); border-color: rgba(18,0,255,0.22); color: #1200FF;
}
body[data-bg="light"] .funnel-card:nth-child(3) .funnel-card-icon {
  background: rgba(171,243,106,0.30); border-color: rgba(4,15,46,0.16); color: #040F2E;
}
body[data-bg="light"] .funnel-card:nth-child(4) .funnel-card-icon {
  background: #040F2E; border-color: #040F2E; color: #ffffff;
}

/* ----- Depoimentos: H2 + vídeo na mesma dobra ----- */
.section-testimonials-dark { padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(56px, 6vw, 80px); }
.section-heading-depoimentos { margin-bottom: 28px !important; }
.section-heading-depoimentos h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  max-width: 64ch;
  line-height: 1.18;
}
.t-video-wrap { margin-top: 24px !important; max-width: 980px; }
.t-video-card { max-width: 340px; }
.t-video-frame { border-radius: 22px; }

/* ----- "E muito mais..." em verde no funnel produtos ----- */
.funnel-produtos-foot-strong {
  color: #1E8E32 !important;
  font-weight: 700;
}

/* ----- TrustBar com emojis antes do stat ----- */
.trust-bar-emoji {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 6px;
  display: inline-block;
  filter: drop-shadow(0 1px 0 rgba(4,15,46,0.05));
}
@media (max-width: 767px) {
  .trust-bar-emoji { font-size: 22px; margin-bottom: 4px; }
}

/* ----- Comparativo: emoji nos critérios em vez de SVG ----- */
.section-antes-depois .ad-cell-crit-icon {
  font-size: 22px;
  line-height: 1;
  width: auto;
  height: auto;
  background: transparent !important;
  border: 0 !important;
  color: inherit;
}

/* ----- Hero: alinhar conteúdo (texto + chat) com a largura da nav (1200px),
   pra o chat não invadir até a borda da viewport. ----- */
.hero > .container.hero-inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- VendedorHumanoVsIA: eyebrow lime, "IA" verde, coluna Conversapp verde,
   emojis nos critérios. ----- */
.section-heading-humano-ia .eyebrow .dot {
  background: #ABF36A !important;
  box-shadow: 0 0 10px rgba(171,243,106,0.55);
}
.section-heading-humano-ia h2 .text-accent {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #1E8E32 !important;
  color: #1E8E32 !important;
}

/* Coluna "Vendedor IA Conversapp" em verde no modo claro */
body[data-bg="light"] .section-humano-ia .hia-vs-head-ia {
  background: rgba(171,243,106,0.18);
  color: #1E8E32;
}
body[data-bg="light"] .section-humano-ia .hia-vs-cell-ia {
  color: var(--light-text);
  background: rgba(171,243,106,0.07);
}
body[data-bg="light"] .section-humano-ia .hia-vs-mark-check {
  background: rgba(171,243,106,0.22);
  color: #1E8E32;
}
@media (max-width: 880px) {
  body[data-bg="light"] .section-humano-ia .hia-vs-cell-ia::before {
    color: #1E8E32 !important;
  }
}

/* Emojis nos critérios (substituíram o SVG icon) */
.section-humano-ia .hia-vs-aspecto-icon {
  font-size: 22px;
  line-height: 1;
  width: auto;
  height: auto;
  background: transparent !important;
  border: 0 !important;
  color: inherit;
}

/* ----- IAvsChatbot: link na fonte do estudo ----- */
.iac-card-fonte-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(4,15,46,0.30);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.iac-card-fonte-link:hover {
  color: #1200FF;
  text-decoration-color: #1200FF;
}

/* ----- CTA azul-elétrico abaixo dos 3 cards do "Como conhecer nossa IA" ----- */
.passos-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 4vw, 56px);
}
.passos-cta {
  background: var(--blue);
  color: #ffffff;
  font-weight: 600;
  height: 56px;
  padding: 0 32px;
  border-radius: 100px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 12px 32px -10px rgba(18,0,255,0.45),
    0 0 40px -8px rgba(18,0,255,0.35);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.passos-cta:hover {
  transform: translateY(-1px);
  background: var(--blue-2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 18px 40px -10px rgba(18,0,255,0.55),
    0 0 60px -8px rgba(18,0,255,0.45);
}

/* ----- Depoimentos: facade do YouTube (thumbnail + play) ----- */
.t-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.t-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.t-video-poster:hover img { transform: scale(1.03); }
.t-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.30));
  transition: filter .2s ease, transform .2s ease;
  pointer-events: none;
}
.t-video-play svg {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
  transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.t-video-poster:hover .t-video-play svg { transform: scale(1.08); }

/* ----- VejaConversa: GIF de demonstração no lugar do mockup animado ----- */
.vc-mockup {
  display: flex;
  justify-content: center;
}
.vc-gif-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* aspect-ratio aproximado do GIF (vai ajustar ao real depois) */
  aspect-ratio: 1 / 1.07;
  /* overflow:hidden + scale recorta as bordas tracejadas do próprio GIF */
  overflow: hidden;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(4,15,46,0.06),
    0 30px 80px -30px rgba(4,15,46,0.40);
}
.vc-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* recorta as bordas externas (onde fica o tracejado do GIF) */
  transform: scale(1.12);
  transform-origin: center;
}
@media (max-width: 999px) {
  .vc-gif-frame { max-width: 420px; }
}

/* ----- FAQ "Ainda tem dúvida?" como seção FINAL com estilo azul-elétrico
   (herda o visual do antigo CTAFinal, que foi removido). ----- */
body[data-bg="light"] .faq-cta {
  position: relative;
  background:
    radial-gradient(900px 500px at 50% -20%, var(--blue-2), transparent 60%),
    linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--r-xl);
  padding: clamp(56px, 6vw, 88px) clamp(28px, 4vw, 56px) !important;
  overflow: hidden;
  text-align: center;
  margin-top: clamp(56px, 7vw, 96px);
  box-shadow: 0 30px 80px -30px rgba(18,0,255,0.45);
}
body[data-bg="light"] .faq-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at center, black 0%, transparent 82%);
  mask-image: radial-gradient(ellipse 70% 90% at center, black 0%, transparent 82%);
  pointer-events: none;
}
body[data-bg="light"] .faq-cta::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 8%;
  width: 64px;
  height: 64px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ABF36A' d='M12 1.6c.9 6 4.4 9.5 10.4 10.4C16.4 12.9 12.9 16.4 12 22.4 11.1 16.4 7.6 12.9 1.6 12 7.6 11.1 11.1 7.6 12 1.6Z'/></svg>");
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 12px rgba(171,243,106,0.55));
  animation: idvSpark 6s ease-in-out infinite;
  pointer-events: none;
}
body[data-bg="light"] .faq-cta .faq-cta-icon {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #fff !important;
}
body[data-bg="light"] .faq-cta h3 {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  margin-bottom: 14px;
}
body[data-bg="light"] .faq-cta p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.86) !important;
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 17px;
}
body[data-bg="light"] .faq-cta .btn-primary {
  position: relative;
  z-index: 1;
}