@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600&family=Days+One&display=swap');

/* ═══════════════════════════════════════════
   FOUNDERSQUAD — DESIGN SYSTEM V3 (MOBILE-FIRST)
   Swarm: /griff + /cassian + /drexler + /sophia + /damian + /ezra + /omar
   ═══════════════════════════════════════════ */

:root {
  --bg: #09090B;
  --bg-card: #111113;
  --bg-glass: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.16);
  
  --text-1: #FAFAFA;
  --text-2: #A1A1AA;
  --text-3: #71717A;
  --text-4: #3F3F46;
  
  --accent: #FFFFFF;
  --glow: #14B8A6;
  --glow-dim: rgba(20,184,166,0.15);
  
  --font-h: 'Outfit', -apple-system, sans-serif;
  --font-b: 'Inter', -apple-system, sans-serif;
  --font-m: ui-monospace, 'SF Mono', 'Fira Code', monospace;
  --font-dir: 'Space Grotesk', -apple-system, sans-serif;
  
  --radius: 16px;
  --radius-sm: 10px;
  --pad: 20px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Ritmo de seção (premium) — um único sistema de gaps */
  --section-gap: 104px; /* entre blocos irmãos (pilar→pilar, passo→passo) */
  --divider-gap: 64px;  /* conteúdo ↔ linha ↔ conteúdo (só o wrap do divisor) */
}

/* ═══════ RESET ═══════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-b);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* ═══════ TYPOGRAPHY ═══════ */
h1, h2, h3 {
  font-family: var(--font-h);
  letter-spacing: -0.04em;
  line-height: 1.08;
}

/* ═══════════════════════════════════════════
   HERO — /calvin (Atenção) + /sophia (Visual)
   Full viewport. Imagem da Sede como fundo.
   O usuário DEVE entender o produto em 3 segundos.
   ═══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Grupo sobe: começa na faixa do vídeo (quadrado amarelo), não colado no rodapé */
  justify-content: flex-start;
  padding: var(--pad);
  padding-top: calc(100vw * 9 / 16 * 0.72);
  padding-bottom: 48px;
  overflow: hidden;
  --hero-stack-gap: 16px; /* logo↔título = título↔descrição */
  --hero-hack-gap: calc(var(--hero-stack-gap) * 1.5); /* gaps do hack iguais +50% */
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 15%, rgba(20,184,166,0.14) 0%, transparent 55%),
    linear-gradient(180deg, #111113 0%, var(--bg) 100%);
  background-color: var(--bg); /* área abaixo do vídeo — nunca branco */
}

.hero-bg-video,
.hero-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* hero-video.mp4 = 1280×720 */
  object-fit: contain;
  object-position: top center;
}

/* Mobile: vídeo inteiro, laterais + topo encostados na borda do phone.
   Altura = largura × 9/16 — sem crop (cover) e sem letterbox lateral. */
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: top center;
  background-color: transparent;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
}

@keyframes heroZoom {
  from { transform: scale(1.15); }
  to { transform: scale(1); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9,9,11,0) 0%,
    rgba(9,9,11,0.4) 30%,
    rgba(9,9,11,0.85) 70%,
    rgba(9,9,11,1) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.hero-logo {
  display: flex;
  align-items: center;
  align-self: stretch;
  /* Mesma distância logo→título e título→descrição */
  margin: 0 0 var(--hero-stack-gap) 0;
  padding: 0;
  text-decoration: none;
}

.logo-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.logo-founder {
  color: var(--glow);
}

.logo-squad {
  color: var(--text-1);
}

.logo-img {
  height: 34px; /* 40px − 15% */
  width: auto;
  display: block;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  /* Contraste no vídeo sem caixa/scrim: sombra suave + leve halo escuro */
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 12px rgba(0, 0, 0, 0.55));
}

.hero-logo svg {
  flex-shrink: 0;
}

.hero h1 {
  font-size: clamp(36px, 10vw, 52px);
  font-weight: 800;
  line-height: 0.98;
  margin: 0 0 var(--hero-stack-gap) 0;
  background: linear-gradient(180deg, #FFFFFF 20%, #71717A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-highlight {
  background: none !important;
  -webkit-text-fill-color: #14b8a6 !important;
  color: #14b8a6;
}

.hero-dot {
  background: none !important;
  -webkit-text-fill-color: #E7E7E8 !important;
  color: #E7E7E8;
}

.hero-sub {
  /* Mesma tipografia de #intro.pillar p (entrelinhas apertado vs intro) */
  font-size: 12.75px;
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.28;
  margin-bottom: var(--hero-hack-gap); /* = gap abaixo do hack */
  max-width: 440px;
}

.hero-sub-nobr {
  white-space: nowrap;
}

.price-off-badge.hero-hack-badge {
  display: block;
  margin: 0 0 var(--hero-hack-gap);
  text-align: inherit;
  font-size: 16.2px; /* 10.8px + 50% */
}

@media (min-width: 768px) {
  .price-off-badge.hero-hack-badge {
    font-size: 18px; /* 12px + 50% */
  }
}

.micro {
  display: block;
  margin-top: 14px;
  font-family: var(--font-m);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-align: center;
}

/* Scroll Indicator — no fluxo do grupo (sobe junto com o conteúdo) */
.scroll-indicator {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 6px;
  z-index: 2;
  margin-top: 28px;
  animation: fadeFloat 2.5s ease-in-out infinite;
}

.scroll-indicator span {
  font-family: var(--font-m);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scroll-indicator svg {
  width: 16px;
  height: 16px;
  color: var(--text-4);
}

@keyframes fadeFloat {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50% { opacity: 0.95; transform: translateY(6px); }
}

/* ═══════════════════════════════════════════
   BUTTONS — "Rotate Border" (Magic UI / 21st.dev)
   Camada conic com inset negativo + feixe ESTREITO.
   Miolo teal cobre o centro; só o anel (padding) revela o feixe.
   ═══════════════════════════════════════════ */
.btn-primary,
.btn-sticky {
  --btn-ring: 2px;
  --btn-radius: 10px;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: var(--btn-ring);
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: #000;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--btn-radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}

.btn-primary:active,
.btn-sticky:active {
  transform: scale(0.97);
}

/* Calda longa (~120°) — combina com ciclo lento de 5s */
.btn-rotate-spin {
  position: absolute;
  inset: -1000%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 240deg,
    rgba(255, 255, 255, 0.03) 255deg,
    rgba(255, 255, 255, 0.08) 275deg,
    rgba(255, 255, 255, 0.16) 295deg,
    rgba(255, 255, 255, 0.28) 315deg,
    rgba(255, 255, 255, 0.48) 330deg,
    rgba(255, 255, 255, 0.72) 342deg,
    rgba(255, 255, 255, 0.92) 352deg,
    #ffffff 357deg,
    #ffffff 360deg
  );
  animation: btnRotateSpin 4s linear infinite;
}

.btn-rotate-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  background: #14B8A6;
  color: #ffffff;
  /* outer radius − ring — evita gap/double-edge */
  border-radius: calc(var(--btn-radius) - var(--btn-ring));
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}

@keyframes btnRotateSpin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   STICKY CTA — /funnel (CRO)
   Aparece após o Hero sair da tela.
   Garante CTA always-visible no mobile.
   ═══════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px var(--pad);
  padding-bottom: max(12px, var(--safe-bottom));
  background: rgba(9,9,11,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-cta.visible {
  transform: translateY(0);
}

.btn-sticky {
  min-height: 50px;
  border-radius: 10px;
  font-size: 15px;
}

.btn-sticky .btn-rotate-label {
  min-height: 46px;
  padding: 12px 16px;
  font-size: 15px;
}

/* ═══════════════════════════════════════════
   INTRO — O que é o FounderSquad
   (Herdando estilos do .pillar-content)
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   AUTHORITY — /george (Identidade) + /bobby (Prova)
   Números que ancoram o valor na mente.
   ═══════════════════════════════════════════ */
.authority {
  padding: 12px var(--pad) 16px;
}

.authority-stats {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.authority-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.authority-row-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.stat { text-align: center; flex: 1; padding: 0 8px; min-width: 0; }

.stat-number {
  display: block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(18px, 5vw, 28px);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
  white-space: nowrap;
}

.stat-number-sm {
  font-size: clamp(15px, 4.2vw, 22px);
  white-space: normal;
  line-height: 1.1;
}

.stat-number-md {
  font-size: clamp(20px, 5.6vw, 32px);
  white-space: normal;
  line-height: 1.1;
}

.stat-number-xl {
  font-size: clamp(24px, 6.8vw, 38px);
}

.stat-label {
  display: block;
  font-family: var(--font-m);
  font-size: clamp(9.6px, 2.64vw, 12px);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.15;
}

.stat-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}

.authority-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   STATEMENT — /caleb (Simplicidade)
   Uma frase que quebra o padrão de scroll.
   ═══════════════════════════════════════════ */
.statement {
  padding: 36px var(--pad);
  text-align: center;
}

.statement p {
  font-family: var(--font-h);
  font-size: clamp(24px, 7vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--glow);
  line-height: 1.15;
}

.statement::after {
  display: none; /* divisor real fica em .section-divider, logo abaixo */
}

/* Divisor de seções — mesma linha das bordas de .authority-stats.
   O ar até o conteúdo vizinho vem SÓ daqui (não some com margin da seção). */
.section-divider-wrap {
  padding: 0 var(--pad);
  margin: var(--divider-gap) 0;
}

.section-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--border);
}

/* Fronteiras com divisor: zera margem da seção — gap = --divider-gap */
.pillar:has(+ .section-divider-wrap),
.statement:has(+ .section-divider-wrap) {
  margin-bottom: 0;
}

.statement:has(+ .section-divider-wrap) {
  padding-bottom: 0;
}

.section-divider-wrap + .pillar {
  margin-top: 0;
}

/* ═══════════════════════════════════════════
   PILARES — /brady (Produto) + /sophia (Visual)
   + /patrick (Psicologia) + /ryder (Tensão)
   
   ★ PONTO FORTE DA LP ★
   Cada pilar = imagem full-width + texto curto.
   A imagem é o argumento. O texto é a legenda.
   ═══════════════════════════════════════════ */
.pillar {
  padding: 0 var(--pad);
  margin-bottom: var(--section-gap);
  position: relative;
}

/* Intro: menos espaço antes dos stats de autoridade */
#intro.pillar {
  margin-bottom: 20px;
}

/* Audiência — gap vertical vem do divisor (--divider-gap), não daqui */
#intro-below.pillar {
  margin-top: 0;
  margin-bottom: var(--section-gap);
}

#intro-below.pillar h2 {
  font-size: 28px;
  margin-bottom: 28px; /* igual a #pilares → PILAR 01 */
}

/* Tag teal abaixo do H2 (papel invertido: antes era o eyebrow) */
#intro-below .audience-tag.pillar-tag {
  display: block;
  margin: 0 0 14px; /* igual a #organogram .org-tree-hint → tree */
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glow);
  opacity: 1;
  text-align: left;
  line-height: normal;
}

.audience-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audience-list li {
  position: relative;
  padding-left: 18px;
  font-size: 12.75px; /* 15px - 15% */
  color: var(--text-2);
  line-height: 1.55;
}

.audience-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.775em; /* metade do line-height 1.55 — centro da 1ª linha */
  width: 4.8px; /* 6px - 20% */
  height: 4.8px;
  border-radius: 1.2px;
  background: var(--glow);
  transform: translateY(-50%);
}

/* ═══════════════════════════════════════════
   ORGANOGRAM — Cascata hierárquica (6 níveis)
   /griff (clareza) + /sophia (pirâmide) + /ezra
   + taste-skill (anti-slop, glass refraction)
   Zinc + Teal. Fundo transparente = --bg.
   ═══════════════════════════════════════════ */
#organogram.pillar {
  margin-top: 0; /* após divisor: gap = --divider-gap */
  margin-bottom: var(--section-gap);
  padding-left: var(--pad);
  padding-right: var(--pad);
}

#organogram .pillar-content {
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

#organogram .pillar-tag {
  margin-bottom: 10px;
}

#organogram h2 {
  margin-bottom: 10px;
}

/* Título "Os 4 Pilares" / "Como funciona" — gap até o 1º card (não é --section-gap) */
#pilares.pillar,
#how.pillar {
  margin-top: 0; /* #how após divisor: gap = --divider-gap */
  margin-bottom: 28px;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

#pilares .pillar-content,
#how .pillar-content {
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

#pilares h2,
#how h2 {
  margin-bottom: 10px;
}

.org-lead {
  font-size: 14px !important;
  color: var(--text-3) !important;
  margin-bottom: 28px !important;
  line-height: 1.45 !important;
  /* Largura para caber em 2 linhas */
  max-width: 42ch;
}

/* Teaser solto entre Hero e Intro — sem título, só a caixa.
   Margin-bottom = gap padrão entre .pillar. */
.org-bucket-teaser {
  display: flex;
  justify-content: center;
  padding: 20px var(--pad) 0;
  margin-bottom: var(--section-gap);
}

/* ── Bucket (21st.dev → vanilla, Zinc+Teal) ── */
.org-bucket {
  width: 100%;
  max-width: 520px;
  margin: 0;
}

.org-bucket-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 655 / 352;
  isolation: isolate;
}

.org-bucket-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.org-bucket-svg--back { z-index: 0; }
.org-bucket-svg--front { z-index: 2; }

.org-bucket-chip-slot {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 58%;
  pointer-events: none;
}

.org-bucket-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 84vw;
  padding: 8px 14px 8px 8px;
  border-radius: 10px; /* mesmo do .btn-primary */
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: bottom center;
}

.org-bucket-chip[data-state="in"] {
  animation: orgChipIn 0.55s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

.org-bucket-chip[data-state="out"] {
  animation: orgChipOut 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes orgChipIn {
  from { opacity: 0; transform: translateY(-72px) scale(0.82); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes orgChipOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(110px) scale(0.82); }
}

.org-bucket-chip-count {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  width: auto;
  height: 40px;
  padding: 0 6px;
  border-radius: 10px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.03em;
  color: var(--glow);
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.28);
}

.org-bucket-chip-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.org-bucket-chip-title {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.15;
  white-space: nowrap;
}

.org-bucket-chip-desc {
  font-family: var(--font-b);
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}

@media (min-width: 768px) {
  .org-bucket { max-width: 560px; }
  .org-bucket-chip { max-width: 360px; }
}

/* ── Pirâmide: card com glow teal (mesma intensidade dos pilares) ── */
.org-pyramid-stage {
  position: relative;
  width: 100%;
  margin: 8px 0 0;
}

/* "Estrutura" acima do card da pirâmide — mesma formatação do pillar-tag */
#organogram .org-pyramid-tag {
  display: block;
  text-align: left;
  margin-bottom: 14px;
}

.org-pyramid-card-glow {
  display: none;
}

.org-pyramid-card {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 0;
  overflow: visible;
  border: none;
  background: transparent;
}

.org-pyramid {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
}

.org-pyramid-html {
  width: 100%;
  line-height: 0;
}

.org-pyramid-html svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.org-pyramid-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* ── Tree list hierárquica (abaixo da pirâmide) ── */
.org-tree-wrap {
  width: 100%;
  max-width: 640px;
  margin: 28px 0 0;
  padding: 0 0 8px;
}

/* Mesma formatação de ESTRUTURA (.pillar-tag) — seletor forte contra .pillar p */
#organogram .org-tree-hint.pillar-tag {
  display: block;
  margin: 0 0 14px;
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glow);
  opacity: 1;
  text-align: left;
  line-height: normal;
}

.org-tree-footer {
  margin-top: 20px;
  text-align: left;
  width: 100%;
  max-width: 100%;
}

.org-tree-footer-text {
  margin: 0;
  font-family: var(--font-b);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-2);
  opacity: 0.75;
}

.org-tree-footer-cmd {
  margin: 6px 0 0;
  font-family: var(--font-m);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-3);
  opacity: 0.35;
}

.org-tree {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  padding: 8px 6px;
}

.org-tree-list,
.org-tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.org-tree-children {
  margin: 0;
}

.org-tree-children--animating {
  will-change: height, opacity;
}

.org-tree-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 8px 10px 8px calc(10px + var(--tree-pad, 0px));
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-b);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.org-tree-row:hover,
.org-tree-row:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.org-tree-row--leaf {
  cursor: default;
  padding-left: calc(10px + 16px + 6px + var(--tree-pad, 0px));
}

.org-tree-row--leaf:hover {
  background: transparent;
}

.org-tree-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--text-3);
  transition: transform 0.18s ease;
}

.org-tree-row[aria-expanded="true"] .org-tree-chevron {
  transform: rotate(0deg);
}

.org-tree-row[aria-expanded="false"] .org-tree-chevron {
  transform: rotate(-90deg);
}

.org-tree-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.org-tree-name-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.org-tree-name {
  font-weight: 500;
  color: var(--text-1);
}

.org-tree-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-3);
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
}

.org-tree-role {
  font-size: 0.8125rem;
  color: var(--text-3);
  font-weight: 400;
}

.org-tree-label--leader .org-tree-name {
  color: var(--glow);
}

.org-tree-error {
  color: var(--text-3);
  font-size: 0.875rem;
  padding: 12px;
  text-align: center;
}

@media (min-width: 768px) {
  .org-tree-wrap {
    margin-top: 36px;
  }
}

/* Glow aura abaixo da imagem (fora do overflow:hidden) */
.pillar-glow {
  position: absolute;
  top: 55%;
  left: 15%;
  right: 15%;
  height: 120px;
  background: radial-gradient(ellipse, var(--glow-dim) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.pillar-image-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

/* Cards com foto: quadrados perfeitos (altura = largura) */
.pillar-image-wrapper--with-copy {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  height: auto;
  margin-bottom: 0;
  overflow: hidden;
}

/* Pilar 01: faixa de imagem natural (referência de padronização) */
#pilar-especialistas .pillar-image-wrapper--with-copy .pillar-visual--photo {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
}

/*
  Pilares 02–04: mesma faixa de imagem do Pilar 01 (~57% do card 1:1).
  object-fit: cover dá zoom até preencher 100% do slot.
*/
#pilar-cerebro .pillar-image-wrapper--with-copy .pillar-visual--photo,
#pilar-busca .pillar-image-wrapper--with-copy .pillar-visual--photo,
#pilar-conhecimento .pillar-image-wrapper--with-copy .pillar-visual--photo,
#passo-1 .pillar-image-wrapper--with-copy .pillar-visual--photo,
#passo-2 .pillar-image-wrapper--with-copy .pillar-visual--photo,
#passo-3 .pillar-image-wrapper--with-copy .pillar-visual--photo {
  display: block;
  width: 100%;
  flex: 0 0 57%;
  height: 57%;
  min-height: 57%;
  max-height: 57%;
  aspect-ratio: auto;
  overflow: hidden;
}

.pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

.pillar-image-wrapper--with-copy .pillar-content--in-card {
  position: relative;
  z-index: 5;
  /* sobe pra nascer dentro do fade — posição intacta */
  margin-top: -8%;
  padding: 0 18px 22px;
  text-align: left;
  flex: 1 1 auto;
}

/* "Pilar 0X" fora do card, acima, alinhado à esquerda */
#pilar-especialistas .pillar-tag--above,
#pilar-cerebro .pillar-tag--above,
#pilar-busca .pillar-tag--above,
#pilar-conhecimento .pillar-tag--above,
#passo-1 .pillar-tag--above,
#passo-2 .pillar-tag--above,
#passo-3 .pillar-tag--above {
  display: block;
  position: relative;
  z-index: 1;
  text-align: left;
  margin-bottom: 14px;
}

/* Cards com foto (Pilar 01–04 + Passo 01–03): fundo um pouco mais escuro que os demais */
#pilar-especialistas,
#pilar-cerebro,
#pilar-busca,
#pilar-conhecimento,
#passo-1,
#passo-2,
#passo-3 {
  --photo-card-bg: #0b0b0d;
}

#pilar-especialistas .pillar-image-wrapper--with-copy,
#pilar-cerebro .pillar-image-wrapper--with-copy,
#pilar-busca .pillar-image-wrapper--with-copy,
#pilar-conhecimento .pillar-image-wrapper--with-copy,
#passo-1 .pillar-image-wrapper--with-copy,
#passo-2 .pillar-image-wrapper--with-copy,
#passo-3 .pillar-image-wrapper--with-copy {
  margin-bottom: 0;
  background: var(--photo-card-bg);
}

/* Sem degrade no card inteiro — ele desalinhava da faixa da imagem */
#pilar-especialistas .pillar-image-wrapper--with-copy::after,
#pilar-cerebro .pillar-image-wrapper--with-copy::after,
#pilar-busca .pillar-image-wrapper--with-copy::after,
#pilar-conhecimento .pillar-image-wrapper--with-copy::after,
#passo-1 .pillar-image-wrapper--with-copy::after,
#passo-2 .pillar-image-wrapper--with-copy::after,
#passo-3 .pillar-image-wrapper--with-copy::after {
  content: none;
  display: none;
}

/* Descrição nos cards com foto: 12.375px */
#pilar-especialistas .pillar-content--in-card p:not(.pillar-highlight),
#pilar-cerebro .pillar-content--in-card p:not(.pillar-highlight),
#pilar-busca .pillar-content--in-card p:not(.pillar-highlight),
#pilar-conhecimento .pillar-content--in-card p:not(.pillar-highlight),
#passo-1 .pillar-content--in-card p:not(.pillar-highlight),
#passo-2 .pillar-content--in-card p:not(.pillar-highlight),
#passo-3 .pillar-content--in-card p:not(.pillar-highlight) {
  font-size: 12.375px;
}

/* Highlight nos cards com foto: 12.54px + teal */
#pilar-especialistas .pillar-content--in-card .pillar-highlight,
#pilar-cerebro .pillar-content--in-card .pillar-highlight,
#pilar-busca .pillar-content--in-card .pillar-highlight,
#pilar-conhecimento .pillar-content--in-card .pillar-highlight,
#passo-1 .pillar-content--in-card .pillar-highlight,
#passo-2 .pillar-content--in-card .pillar-highlight,
#passo-3 .pillar-content--in-card .pillar-highlight {
  font-size: 12.54px !important;
  color: var(--glow) !important;
}

.pillar-visual {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.pillar-visual::before,
.pillar-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* PILAR 01 — Foto natural no topo; só corrige clash de cor pro DNA zinc/teal */
.pillar-visual--photo {
  background: transparent;
}

.pillar-visual--photo .pillar-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  /* Leve: esfria um pouco e baixa saturação de cores que brigam com o DNA */
  filter: saturate(0.78) contrast(1.04) brightness(0.96);
  transform: none;
  /* Dissolve a base da foto na cor do card — fade longo, sem fronteira visível */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.15) 82%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.15) 82%, transparent 94%);
}

.pillar-visual--photo::before {
  z-index: 2;
  /* Tint mínimo — quase imperceptível, só puxa midtones pro teal da marca */
  background: rgba(20, 184, 166, 0.1);
  mix-blend-mode: color;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 70%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 70%);
}

.pillar-visual--photo::after {
  display: none;
}

/*
  Degrade + máscara DOS 4 PILARES — depois das regras legadas.
  Faixa sólida no fim mata a borda inferior da imagem.
*/
#pilar-especialistas .pillar-image-wrapper--with-copy .pillar-visual--photo,
#pilar-cerebro .pillar-image-wrapper--with-copy .pillar-visual--photo,
#pilar-busca .pillar-image-wrapper--with-copy .pillar-visual--photo,
#pilar-conhecimento .pillar-image-wrapper--with-copy .pillar-visual--photo,
#passo-1 .pillar-image-wrapper--with-copy .pillar-visual--photo,
#passo-2 .pillar-image-wrapper--with-copy .pillar-visual--photo,
#passo-3 .pillar-image-wrapper--with-copy .pillar-visual--photo {
  background: var(--photo-card-bg, #0b0b0d);
}

#pilar-especialistas .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo,
#pilar-cerebro .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo,
#pilar-busca .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo,
#pilar-conhecimento .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo,
#passo-1 .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo,
#passo-2 .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo,
#passo-3 .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: bottom center !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 40%,
    rgba(0, 0, 0, 0.65) 62%,
    rgba(0, 0, 0, 0.25) 80%,
    transparent 92%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 40%,
    rgba(0, 0, 0, 0.65) 62%,
    rgba(0, 0, 0, 0.25) 80%,
    transparent 92%
  ) !important;
}

#pilar-especialistas .pillar-image-wrapper--with-copy .pillar-visual--photo::before,
#pilar-cerebro .pillar-image-wrapper--with-copy .pillar-visual--photo::before,
#pilar-busca .pillar-image-wrapper--with-copy .pillar-visual--photo::before,
#pilar-conhecimento .pillar-image-wrapper--with-copy .pillar-visual--photo::before,
#passo-1 .pillar-image-wrapper--with-copy .pillar-visual--photo::before,
#passo-2 .pillar-image-wrapper--with-copy .pillar-visual--photo::before,
#passo-3 .pillar-image-wrapper--with-copy .pillar-visual--photo::before {
  /* Tint some antes da divisa — evita linha do mix-blend */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 70%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 70%) !important;
}

#pilar-especialistas .pillar-image-wrapper--with-copy .pillar-visual--photo::after,
#pilar-cerebro .pillar-image-wrapper--with-copy .pillar-visual--photo::after,
#pilar-busca .pillar-image-wrapper--with-copy .pillar-visual--photo::after,
#pilar-conhecimento .pillar-image-wrapper--with-copy .pillar-visual--photo::after,
#passo-1 .pillar-image-wrapper--with-copy .pillar-visual--photo::after,
#passo-2 .pillar-image-wrapper--with-copy .pillar-visual--photo::after,
#passo-3 .pillar-image-wrapper--with-copy .pillar-visual--photo::after {
  content: '';
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: 58%;
  z-index: 4;
  pointer-events: none;
  /* Últimos ~20% já são cor sólida do card = some a borda de vez */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(11, 11, 13, 0.2) 20%,
    rgba(11, 11, 13, 0.55) 42%,
    rgba(11, 11, 13, 0.88) 62%,
    #0b0b0d 78%,
    #0b0b0d 100%
  );
}

.pillar:hover .pillar-visual--photo .pillar-photo {
  transform: none;
}

/* PILAR 01 (legado CSS) — Rede hierárquica: nó de comando central (eco do Ponto Teal do
   logotipo) irradiando conexões retas sobre um grid de precisão. Zero curvas
   orgânicas — hierarquia rígida, não uma "nuvem neural" fofa. */
.pillar-visual--network {
  background:
    radial-gradient(circle at 50% 44%, rgba(20,184,166,0.30) 0%, rgba(20,184,166,0.06) 20%, transparent 46%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 34px),
    linear-gradient(160deg, #121214 0%, #09090B 100%);
}

.pillar-visual--network::before {
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(20,184,166,0.5) calc(50% - 0.5px), rgba(20,184,166,0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top left, transparent calc(50% - 0.5px), rgba(20,184,166,0.5) calc(50% - 0.5px), rgba(20,184,166,0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top, transparent calc(50% - 0.5px), rgba(255,255,255,0.16) calc(50% - 0.5px), rgba(255,255,255,0.16) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 30px 30px;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, #000 42%, transparent 64%);
  mask-image: radial-gradient(circle at 50% 44%, #000 0%, #000 42%, transparent 64%);
  opacity: 0.55;
}

.pillar-visual--network::after {
  top: 44%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #F4F4F5 0%, rgba(20,184,166,0.9) 30%, transparent 70%);
  box-shadow: 0 0 24px 6px rgba(20,184,166,0.5), 0 0 64px 18px rgba(20,184,166,0.15);
}

/* PILAR 02 — Módulo de memória: chip/blueprint com células reticuladas e
   blocos "ativos" acesos em Teal. Arquitetura sólida, não um cérebro orgânico. */
.pillar-visual--brain {
  background:
    radial-gradient(circle at 50% 50%, rgba(20,184,166,0.20) 0%, transparent 48%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 26px),
    linear-gradient(150deg, #161618 0%, #09090B 100%);
}

.pillar-visual--brain::before {
  inset: 20%;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 33.33% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(20,184,166,0.14),
    inset 0 0 30px rgba(20,184,166,0.10),
    0 0 50px rgba(20,184,166,0.16);
}

.pillar-visual--brain::after {
  background:
    radial-gradient(circle at 33% 25%, rgba(20,184,166,0.95) 0%, transparent 16%),
    radial-gradient(circle at 66% 75%, rgba(20,184,166,0.7) 0%, transparent 14%),
    radial-gradient(circle at 66% 25%, rgba(244,244,245,0.55) 0%, transparent 13%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* PILAR 03 — Busca Híbrida: dois feixes retos convergindo (Aço/branco =
   correspondência exata; Teal = compreensão semântica) num alvo de precisão
   central. Substitui o azul genérico de IA — só Zinc + Teal. */
.pillar-visual--search {
  background:
    radial-gradient(circle at 30% 32%, rgba(244,244,245,0.10) 0%, transparent 40%),
    radial-gradient(circle at 70% 68%, rgba(20,184,166,0.24) 0%, transparent 46%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 30px),
    linear-gradient(170deg, #111113 0%, #09090B 100%);
}

.pillar-visual--search::before {
  background:
    linear-gradient(35deg, transparent 46%, rgba(244,244,245,0.5) 49.5%, rgba(244,244,245,0.5) 50.5%, transparent 54%),
    linear-gradient(-35deg, transparent 46%, rgba(20,184,166,0.75) 49.5%, rgba(20,184,166,0.75) 50.5%, transparent 54%);
}

.pillar-visual--search::after {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(20,184,166,0.65);
  border-radius: 3px;
  background: radial-gradient(circle, rgba(244,244,245,0.9) 0%, rgba(20,184,166,0.45) 40%, transparent 72%);
  box-shadow: 0 0 30px 4px rgba(20,184,166,0.3);
}

.pillar-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pillar-image-wrapper .pillar-visual--photo .pillar-photo {
  height: auto;
  object-fit: contain;
  object-position: top center;
  transform: none;
  transition: none;
}

.pillar:hover .pillar-image-wrapper img {
  transform: scale(1.03);
}

.pillar:hover .pillar-image-wrapper .pillar-visual--photo .pillar-photo {
  transform: none;
}

.pillar-content {
  padding: 0 4px;
}

.pillar-tag {
  display: inline-block;
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--glow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.pillar h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 14px;
}

.pillar p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.55;
}

/* Intro body: -15% vs pillar p padrão */
#intro.pillar p:not(.pillar-highlight) {
  font-size: 12.75px;
}

.pillar-highlight {
  color: var(--text-1) !important;
  font-weight: 600;
  margin-top: 12px;
  font-size: 16px !important;
}

/* ═══════════════════════════════════════════
   COMO FUNCIONA — cards #passo-1…3
   Títulos longos: tipografia/âncora próprias (não herdar
   .pillar h2 30→36px dos pilares de nome curto).
   Altura do card: −20% vs quadrado dos pilares (1:1 → 5:4).
   ═══════════════════════════════════════════ */
#passo-1 .pillar-image-wrapper--with-copy,
#passo-2 .pillar-image-wrapper--with-copy,
#passo-3 .pillar-image-wrapper--with-copy {
  aspect-ratio: 5 / 4; /* altura = 80% da largura */
}

/* Card 1: +10% na altura vs passos 2–3 (0,80 → 0,88 da largura) */
#passo-1 .pillar-image-wrapper--with-copy {
  aspect-ratio: 25 / 22;
}

#passo-1 .pillar-image-wrapper--with-copy .pillar-content--in-card,
#passo-2 .pillar-image-wrapper--with-copy .pillar-content--in-card,
#passo-3 .pillar-image-wrapper--with-copy .pillar-content--in-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  margin-top: -6%;
  padding: 8px 18px 20px;
  text-align: left;
}

#passo-1 .pillar-content--in-card h2,
#passo-2 .pillar-content--in-card h2,
#passo-3 .pillar-content--in-card h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

#passo-1 .pillar-content--in-card p:not(.pillar-highlight),
#passo-2 .pillar-content--in-card p:not(.pillar-highlight),
#passo-3 .pillar-content--in-card p:not(.pillar-highlight) {
  margin: 0;
  line-height: 1.45;
}

#passo-1 .pillar-content--in-card .pillar-highlight,
#passo-2 .pillar-content--in-card .pillar-highlight,
#passo-3 .pillar-content--in-card .pillar-highlight {
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.35;
}

/* Prints de UI: enquadrar pelo topo (conteúdo útil fica acima do fade) */
#passo-1 .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo,
#passo-2 .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo,
#passo-3 .pillar-image-wrapper--with-copy .pillar-visual--photo .pillar-photo {
  object-position: top center !important;
}

/* ═══════════════════════════════════════════
   PRICING — /cooper (Vendas) + /funnel (CRO)
   + /patrick (Desejo)
   Card com aura Teal. Preço como protagonista.
   ═══════════════════════════════════════════ */
.pricing-section {
  padding: 64px var(--pad);
  position: relative;
}

.pricing-section h2 {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
}

.pricing-wrapper {
  position: relative;
}

/* Glow atrás do card */
.pricing-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(20,184,166,0.12) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.pricing-card {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  /* hidden: linha shimmer (::before) precisa seguir o border-radius */
  overflow: hidden;
}

/* Gradient line no topo do card */
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--glow), var(--text-1), var(--glow));
  background-size: 200% 100%;
  animation: shimmer 3s ease infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.price-off-badge {
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  /* mesmo shimmer da linha ::before do card */
  background: linear-gradient(90deg, var(--glow), var(--text-1), var(--glow));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  .price-off-badge {
    animation: none;
    background: none;
    color: var(--text-1);
    -webkit-text-fill-color: var(--text-1);
  }
}

.pricing-card .price-was {
  position: relative;
  display: inline-block;
  font-family: var(--font-h);
  font-size: 45px !important; /* 64px − 30% */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--text-1) 40%, transparent);
  opacity: 1;
  text-decoration: none; /* risco via ::after — opacidade cheia */
  margin-bottom: 6px;
}

.pricing-card .price-was::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--text-1);
  transform: translateY(-50%);
  pointer-events: none;
}

.price {
  font-family: var(--font-h);
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
}

.price-info {
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

/* Strands — overlap nos textos; mask dissolve o glow (canvas clipa em y=0/H) */
.pricing-strands {
  width: var(--strands-width, 12em);
  max-width: 100%;
  height: 210px;
  margin: -36px auto -36px;
  position: relative;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 12%,
    #000 28%,
    #000 72%,
    rgba(0, 0, 0, 0.35) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 12%,
    #000 28%,
    #000 72%,
    rgba(0, 0, 0, 0.35) 88%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.strands-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: visible;
}

.strands-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-strands {
    display: none;
  }
}

/* Direction Hover — text only (spec 2026-07-29): sem card; Outfit; A↔B */
.value-anchor.dir-hover {
  display: block;
  margin: 0 auto 28px;
  padding: 0;
  border: none;
  background: none;
  max-width: 100%;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2;
}

.dir-hover-viewport {
  overflow: hidden;
  width: 100%;
}

.dir-hover-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  /* fallback até o JS medir em px; 2 linhas + folga de glifo */
  --dir-step: 3.2em;
  font-family: var(--font-h);
  font-size: 11.34px; /* hero-hack 16.2px − 30% */
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .dir-hover-stack {
    font-size: 12.6px; /* hero-hack 18px − 30% */
  }
}

.dir-hover-stack[data-dir="none"] {
  transform: translateY(calc(-1 * var(--dir-step)));
}
.dir-hover-stack[data-dir="top"] {
  transform: translateY(0);
}
.dir-hover-stack[data-dir="bottom"] {
  transform: translateY(calc(-2 * var(--dir-step)));
}

.dir-hover-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--dir-step);
  width: 100%;
  height: var(--dir-step);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden; /* impede bleed do slide vizinho */
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  opacity: 1;
  background: none;
  color: inherit;
  -webkit-text-fill-color: unset;
  animation: none;
}

.dir-hover-text {
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: inherit;
  padding: 2px 0; /* folga p/ ascenders/descenders do Outfit 800 */
}

.dir-hover-base {
  color: var(--text-1); /* branco */
  opacity: 1;
}

.dir-hover-accent {
  color: var(--glow); /* teal */
  opacity: 1;
}

.value-num {
  font-weight: 500; /* ~20% acima do texto base (400) */
}
.value-num--teal {
  color: var(--glow); /* DNA teal #14B8A6 */
}
.value-num--red {
  color: #EF5F68;
}

@media (prefers-reduced-motion: reduce) {
  .dir-hover-stack {
    transition: none;
  }
}

.features {
  list-style: none;
  text-align: left;
  margin-bottom: 32px;
}

.features li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-1);
}

.features li:first-child {
  border-top: 1px solid var(--border);
}

.check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--glow);
  font-weight: 700;
  font-size: 14px;
}

.guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.guarantee svg {
  width: 14px;
  height: 14px;
  color: var(--text-3);
}

/* Selo de pagamento seguro — reversão de risco extra além da garantia.
   Reutiliza a mesma linguagem visual do .guarantee (mono, --text-3, ícone stroke). */
.badge-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-align: center;
}

.badge-secure svg {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   FAQ — /wesley (Marca) + /brody (Manifesto)
   Respostas de 2 frases. Sem enrolação.
   ═══════════════════════════════════════════ */
.faq-section {
  padding: 48px var(--pad) 64px;
}

.faq-section h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.faq-sub {
  font-size: 14px;
  color: var(--text-3);
  margin-bottom: 32px;
}

.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-header {
  width: 100%;
  text-align: left;
  padding: 22px 0;
  background: none;
  border: none;
  color: var(--text-1);
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  -webkit-tap-highlight-color: transparent;
}

.accordion-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 20px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-content p {
  padding-bottom: 22px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════
   CTA FINAL — /joe (Escorregador) + /ryder (Tensão)
   Última gota de óleo. Frase + Botão + Garantia.
   ═══════════════════════════════════════════ */
.final-section {
  padding: 80px var(--pad) 64px;
  text-align: center;
  position: relative;
}

/* Atmospheric glow */
.final-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(20,184,166,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.final-section h2 {
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}

.final-sub {
  font-size: 18px;
  color: var(--text-2);
  margin-bottom: 36px;
  font-weight: 500;
}

.final-guarantee {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-3);
}

/* ═══════════════════════════════════════════
   COOKIE / PIXEL CONSENT
   ═══════════════════════════════════════════ */
.fs-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  padding: 12px var(--pad);
  padding-bottom: max(12px, calc(12px + var(--safe-bottom)));
  background: rgba(17, 17, 19, 0.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fs-cookie-banner__inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.fs-cookie-banner__text {
  flex: 1 1 240px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  text-align: left;
}

.fs-cookie-banner__text a {
  color: var(--glow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fs-cookie-banner__actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.fs-cookie-btn {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fs-cookie-btn--ghost {
  background: transparent;
  color: var(--text-2);
}

.fs-cookie-btn--ghost:hover {
  border-color: var(--border-hover);
  color: var(--text-1);
}

.fs-cookie-btn--primary {
  background: var(--text-1);
  color: var(--bg);
  border-color: var(--text-1);
}

.fs-cookie-btn--primary:hover {
  background: #e4e4e7;
}

html.fs-cookie-open .sticky-cta {
  bottom: calc(88px + var(--safe-bottom));
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer {
  padding: 40px var(--pad);
  padding-bottom: max(96px, calc(40px + var(--safe-bottom)));
  text-align: center;
  border-top: 1px solid var(--border);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-bottom: 16px;
}

.footer-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--glow);
}

footer p {
  font-size: 12px;
  color: var(--text-4);
}

/* ═══════════════════════════════════════════
   LEGAL PAGES (Privacidade / Termos / Reembolso)
   ═══════════════════════════════════════════ */
.legal-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--pad);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(9, 9, 11, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10;
}

.legal-brand {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-1);
  text-decoration: none;
}

.legal-back {
  font-size: 14px;
  color: var(--text-3);
  text-decoration: none;
}

.legal-back:hover {
  color: var(--glow);
}

.legal-main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px var(--pad) 64px;
}

.legal-main h1 {
  font-family: var(--font-h);
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.legal-updated {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 28px;
}

.legal-main h2 {
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 10px;
  color: var(--text-1);
}

.legal-main p,
.legal-main li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 12px;
}

.legal-main ul {
  padding-left: 1.25em;
  margin-bottom: 12px;
}

.legal-main a {
  color: var(--glow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-main strong {
  color: var(--text-1);
  font-weight: 600;
}

.legal-page footer {
  padding-bottom: max(32px, calc(24px + var(--safe-bottom)));
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL — /damian (Motion Architect)
   Elementos surgem suavemente ao entrar na tela.
   ═══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Staggered children */
.reveal-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-children.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-children.visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.reveal-children.visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-children.visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal-children.visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.reveal-children.visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════
   RESPONSIVE — Desktop Enhancement
   Mobile é o design principal. Desktop apenas amplia.
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {
  :root { --pad: 40px; }

  /* Desktop: mesmo enquadramento — vídeo 16:9 inteiro, topo + laterais encostados */
  .hero-bg-video {
    object-fit: contain;
    object-position: top center;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Hero permanece full-width, conteúdo centralizado */
  .hero-content {
    max-width: 600px;
    margin: 0 auto;
  }

  .authority, .statement, 
  .pricing-section, .faq-section, .final-section,
  .section-divider-wrap {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .pillar {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  footer {
    max-width: 100%;
  }

  .hero h1 { font-size: 56px; }
  .pillar h2 { font-size: 36px; }
  #intro-below.pillar h2 { font-size: 34px; }
  #passo-1 .pillar-content--in-card h2,
  #passo-2 .pillar-content--in-card h2,
  #passo-3 .pillar-content--in-card h2 {
    font-size: 26px; /* não herdar 36px — títulos dos passos são longos */
  }
  .price { font-size: 72px; }
  .pricing-card .price-was { font-size: 53px !important; } /* 76px − 30% */
  .price-off-badge { font-size: 20px; }
  
  .sticky-cta { display: none; }
}

/* ═══════════════════════════════════════════
   VARIANT B — index-b.html (Mobile Minimalista)
   Escopo: .page-b
   ═══════════════════════════════════════════ */
.page-b {
  padding-bottom: max(24px, var(--safe-bottom));
}

.page-b .app-container {
  max-width: 480px;
  margin: 0 auto;
}

.page-b .hero {
  min-height: auto;
  display: block;
  justify-content: flex-start;
  padding: 28px var(--pad) 40px;
}

.page-b .hero h1 {
  font-size: clamp(32px, 9vw, 44px);
  margin-bottom: 16px;
}

.page-b .subtitle {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 28px;
}

.page-b .text-mono {
  font-family: var(--font-m);
}

.page-b .micro-copy {
  display: block;
  margin-top: 14px;
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-align: center;
}

.page-b .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  background: var(--accent);
  color: #000;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 16px;
  border-radius: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.page-b .btn:active {
  transform: scale(0.97);
}

.page-b .hero-image-container {
  margin-top: 36px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 50% 35%, rgba(20,184,166,0.18) 0%, transparent 50%),
    linear-gradient(180deg, #121214 0%, var(--bg) 100%);
  position: relative;
}

.page-b .hero-image-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.45;
  pointer-events: none;
}

.page-b .hero-image-container .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: none;
  mask-image: none;
}

.page-b .hero-image-container .hero-video:not([src]),
.page-b .hero-image-container .hero-video[src=""] {
  display: none;
}

.page-b .authority {
  padding: 40px var(--pad);
  text-align: center;
}

.page-b .authority p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 20px;
}

.page-b .badge-line {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.08em;
}

.page-b .pillars {
  padding: 0 var(--pad) 48px;
}

.page-b .section-title {
  font-family: var(--font-h);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}

.page-b .pillars-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-b .card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.page-b .card-number {
  display: block;
  font-size: 11px;
  color: var(--glow);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.page-b .card-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 16px;
}

.page-b .card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}

.page-b .card p strong {
  color: var(--text-1);
}

.page-b .how-it-works {
  padding: 48px var(--pad);
}

.page-b .timeline {
  position: relative;
}

.page-b .timeline::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--border);
}

.page-b .timeline-item {
  position: relative;
  padding-left: 60px;
  padding-bottom: 28px;
}

.page-b .timeline-item:last-child {
  padding-bottom: 0;
}

.page-b .timeline-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 18px;
  color: var(--glow);
  z-index: 1;
}

.page-b .timeline-title {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.page-b .timeline-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

.page-b .pricing {
  padding: 48px var(--pad);
}

.page-b .pricing .section-title {
  text-align: center;
  margin-bottom: 28px;
}

.page-b .pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-b .pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--glow), var(--text-1), var(--glow));
  background-size: 200% 100%;
  animation: shimmer 3s ease infinite;
}

.page-b .price-main {
  font-family: var(--font-h);
  font-size: clamp(40px, 12vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 6px;
}

.page-b .price-sub {
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 16px;
}

.page-b .pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: 28px;
}

.page-b .pricing-features li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-1);
}

.page-b .pricing-features li:first-child {
  border-top: 1px solid var(--border);
}

/* Selo de pagamento seguro dentro do card de preço — mesma linguagem
   visual do .guarantee-badge (mono, --text-3, ícone stroke minimalista). */
.page-b .pricing-card .badge-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.page-b .pricing-card .badge-secure svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.page-b .faq {
  padding: 48px var(--pad);
}

.page-b .accordion {
  border-top: 1px solid var(--border);
}

.page-b .final-cta {
  padding: 64px var(--pad) 48px;
  text-align: center;
}

.page-b .final-cta h2 {
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 700;
  margin-bottom: 8px;
}

.page-b .final-cta .subtitle {
  margin-bottom: 32px;
}

.page-b .guarantee-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-m);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  max-width: 280px;
}

.page-b .guarantee-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}

.page-b .sticky-cta-b {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px var(--pad);
  padding-bottom: max(12px, var(--safe-bottom));
  background: rgba(9,9,11,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-b .sticky-cta-b.visible {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .page-b .sticky-cta-b {
    display: none;
  }
}