/**
 * Epicurus One Landing Page — Light, Modern, Glossy
 * 
 * Light theme, glass morphism, icon pattern background,
 * CSS transitions for scroll reveals, keyframes for ambient effects.
 */

/* ─── Variables ──────────────────────────────────── */

:root {
  --l-bg: #f8f9fc;
  --l-bg-white: #ffffff;
  --l-bg-alt: #f0f1f6;

  --l-text: #1a1a2e;
  --l-text-secondary: #555580;
  --l-text-muted: #8888a4;

  --l-accent: #883dff;
  --l-accent-light: #c4a0ff;
  --l-accent-glow: rgba(136, 61, 255, 0.15);
  --l-accent-bg: rgba(136, 61, 255, 0.06);

  --l-green: #00d2a0;
  --l-green-light: rgba(0, 210, 160, 0.1);
  --l-amber: #f59e0b;
  --l-amber-light: rgba(245, 158, 11, 0.1);
  --l-red: #ff6b6b;
  --l-red-light: rgba(255, 107, 107, 0.1);

  --l-border: rgba(0, 0, 0, 0.06);
  --l-border-light: rgba(0, 0, 0, 0.03);

  --l-glass: rgba(255, 255, 255, 0.65);
  --l-glass-border: rgba(255, 255, 255, 0.5);
  --l-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);

  --l-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --l-max-width: 1140px;
}

/* ─── Reset ──────────────────────────────────────── */

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

html {
  scroll-behavior: auto;
}

body {
  font-family: var(--l-font);
  background: var(--l-bg);
  color: var(--l-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* iOS Safari ignores body overflow-x if html doesn't also clip. Without
   this the whole page can ride outside 100vw when a single descendant
   overshoots (e.g. a long flex row that can't wrap), forcing a pinch-
   zoom to fit. Belt-and-braces. */
html {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ═══════════════════════════════════════════════════ */
/* KEYFRAMES                                           */
/* ═══════════════════════════════════════════════════ */

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes shimmerBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* ═══════════════════════════════════════════════════ */
/* ICON PATTERN BACKGROUND                             */
/* ═══════════════════════════════════════════════════ */

.icon-pattern {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  will-change: auto;
}

.pattern-icon {
  position: absolute;
  color: var(--l-accent);
  animation: iconFloat ease-in-out infinite;
  contain: layout style;
}

/* ═══════════════════════════════════════════════════ */
/* GRADIENT BLOBS                                      */
/* ═══════════════════════════════════════════════════ */

.gradient-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
}

.blob {
  position: absolute;
  border-radius: 50%;
}

.blob-1 {
  width: 500px;
  height: 500px;
  top: -10%;
  right: -5%;
  background: radial-gradient(circle, rgba(136, 61, 255, 0.08) 0%, transparent 70%);
}

.blob-2 {
  width: 400px;
  height: 400px;
  bottom: 20%;
  left: -8%;
  background: radial-gradient(circle, rgba(0, 210, 160, 0.06) 0%, transparent 70%);
}

.blob-3 {
  width: 350px;
  height: 350px;
  top: 40%;
  right: 20%;
  background: radial-gradient(circle, rgba(116, 185, 255, 0.05) 0%, transparent 70%);
}

/* ═══════════════════════════════════════════════════ */
/* LAYOUT                                              */
/* ═══════════════════════════════════════════════════ */

.container {
  max-width: var(--l-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
  /* Hard boundary — whatever flows inside the container gets clipped at
     the container edge, preventing a single rogue child (long flex row,
     oversized image, pre-wrap text) from pushing the whole page past
     100vw on mobile. Rows that NEED to scroll horizontally (rare on this
     page) must declare their own overflow-x behaviour explicitly. */
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .container {
    padding: 0 18px;
  }
}

.section {
  padding: 100px 0;
  position: relative;
}

.section-alt {
  background: var(--l-bg-alt);
}

/* ═══════════════════════════════════════════════════ */
/* REVEAL & STAGGER ANIMATIONS                         */
/* ═══════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

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

.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }

.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

.stagger.active > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger.active > *:nth-child(2)  { transition-delay: 0.12s; }
.stagger.active > *:nth-child(3)  { transition-delay: 0.19s; }
.stagger.active > *:nth-child(4)  { transition-delay: 0.26s; }
.stagger.active > *:nth-child(5)  { transition-delay: 0.33s; }
.stagger.active > *:nth-child(6)  { transition-delay: 0.40s; }
.stagger.active > *:nth-child(7)  { transition-delay: 0.47s; }
.stagger.active > *:nth-child(8)  { transition-delay: 0.54s; }

.stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════ */
/* GLASS MORPHISM                                      */
/* ═══════════════════════════════════════════════════ */

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--l-glass-border);
  border-radius: 16px;
  box-shadow: var(--l-glass-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  border-color: rgba(136, 61, 255, 0.2);
}

.glass-card-sm {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--l-glass-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

/* ═══════════════════════════════════════════════════ */
/* NAVBAR                                              */
/* ═══════════════════════════════════════════════════ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
  background: rgba(248, 249, 252, 0.97);
  border-bottom: 1px solid var(--l-border);
  padding: 10px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.nav-container {
  max-width: var(--l-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo-icon {
  height: 30px;
  width: 30px;
  border-radius: 8px;
  object-fit: contain;
}

.nav-logo-text {
  font-size: 20px;
  font-weight: 800;
  color: var(--l-accent);
  letter-spacing: -0.5px;
}

.nav-links {
  display: flex;
  gap: 32px;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--l-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--l-accent);
}

.nav-actions {
  display: flex;
  gap: 10px;
}

.nav-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav-btn-secondary {
  color: var(--l-text-secondary);
}

.nav-btn-secondary:hover {
  color: var(--l-accent);
}

.nav-btn-primary {
  background: var(--l-accent);
  color: white;
  box-shadow: 0 2px 8px var(--l-accent-glow);
}

.nav-btn-primary:hover {
  background: #6e2dd4;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--l-accent-glow);
}

/* ── Referral Banner ── */
.ref-banner {
  background: linear-gradient(135deg, #883dff, #6e2dd4);
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-top: -20px;
  margin-bottom: 20px;
}
.ref-banner i { margin-right: 6px; }

/* ── Mobile Hamburger ── */
.nav-mobile-only { display: none; }
.nav-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 20px;
  position: relative;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--l-text);
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}
.nav-hamburger span:nth-child(1) { top: 0; }
.nav-hamburger span:nth-child(2) { top: 9px; }
.nav-hamburger span:nth-child(3) { top: 18px; }
.nav-hamburger.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

.nav-mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 12px 20px 16px;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-link {
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--l-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover { color: var(--l-accent); }

/* ── Referral pricing badges ── */
.ref-price-badge {
  display: inline-block;
  background: linear-gradient(135deg, #883dff, #6e2dd4);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  margin-top: 0;
  margin-bottom: 20px;
}
.pricing-price.ref-struck span {
  text-decoration: line-through;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .nav-mobile-only { display: flex; }
  .nav-desktop-only { display: none !important; }
  .nav-mobile-menu { display: none; }
  .nav-mobile-menu.open { display: flex; }
  .ref-banner { font-size: 12px; padding: 7px 12px; }
}

/* ═══════════════════════════════════════════════════ */
/* SECTION HEADERS                                     */
/* ═══════════════════════════════════════════════════ */

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--l-accent);
  margin-bottom: 12px;
  padding: 5px 14px;
  background: var(--l-accent-bg);
  border-radius: 20px;
}

/* Long headings with inline brand acronyms (SEO, AEO, GEO, SXO) should
   wrap gracefully on narrow screens. Without this, a stubborn word +
   inline span combo can overflow the container on small viewports. */
.section-title,
.hero-title,
.cta-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.section-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--l-text);
}

.section-desc {
  font-size: 17px;
  color: var(--l-text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════ */
/* BUTTONS                                             */
/* ═══════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-family: var(--l-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-lg {
  padding: 14px 30px;
  font-size: 15px;
  border-radius: 12px;
}

.btn-primary {
  background: var(--l-accent);
  color: white;
  box-shadow: 0 4px 14px var(--l-accent-glow);
}

.btn-primary:hover {
  background: #6e2dd4;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(136, 61, 255, 0.25);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.92);
  color: var(--l-text);
  border: 1px solid var(--l-border);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.btn-outline {
  background: transparent;
  color: var(--l-accent);
  border: 2px solid var(--l-accent);
  padding: 10px 22px;
}

.btn-outline:hover {
  background: var(--l-accent);
  color: white;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════ */
/* HERO                                                */
/* ═══════════════════════════════════════════════════ */

.hero {
  padding: 190px 0 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* TEMPORARILY HIDDEN — earth animation disabled until continent definitions are improved */
#globeViz {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 35%, transparent 55%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 35%, transparent 55%);
}

.hero-content {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--l-accent);
  background: var(--l-accent-bg);
  padding: 6px 16px;
  border-radius: 24px;
  margin-bottom: 24px;
  border: 1px solid rgba(136, 61, 255, 0.12);
}

.hero-title {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 28px;
}

.gradient-text {
  background: linear-gradient(135deg, var(--l-accent) 0%, var(--l-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.seo-highlight {
  color: var(--l-green);
  -webkit-text-fill-color: var(--l-green);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-weight: inherit;
}

.aeo-highlight {
  color: #0099ff;
  -webkit-text-fill-color: #0099ff;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-weight: inherit;
}

.geo-highlight {
  color: var(--l-amber);
  -webkit-text-fill-color: var(--l-amber);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-weight: inherit;
}

.sxo-highlight {
  color: #c77dff;
  -webkit-text-fill-color: #c77dff;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-weight: inherit;
}

.hero-desc {
  font-size: 19px;
  color: var(--l-text-secondary);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero-mars {
  font-style: italic;
  opacity: 0.7;
  font-size: 0.88em;
}

.hero-two {
  font-size: 1.35em;
  color: var(--l-green);
  letter-spacing: -3px;
  display: inline-block;
  line-height: 0.85;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 48px;
}

.hero-stats {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--l-glass-border);
  border-radius: 14px;
}

.hero-stat {
  text-align: center;
}

.hero-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--l-text);
}

.hero-stat span {
  font-size: 12px;
  color: var(--l-text-muted);
}

.hero-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--l-border);
}

.hero-engines-tagline {
  font-size: 17px;
  font-weight: 600;
  color: var(--l-text-secondary);
  margin-top: 28px;
  margin-bottom: 16px;
  letter-spacing: 0.1px;
}

.hero-engines {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 0;
}

.hero-engine-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--l-text-muted);
  letter-spacing: 0.1px;
}

.hero-engine-icon {
  width: 20px;
  height: 20px;
  fill: var(--l-text-muted);
  opacity: 0.7;
  flex-shrink: 0;
}

.hero-aeo-explainer {
  margin-top: 28px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-aeo-explainer p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--l-text-secondary);
  background: rgba(0, 153, 255, 0.04);
  border: 1px solid rgba(0, 153, 255, 0.1);
  border-radius: 12px;
  padding: 16px 24px;
}

.hero-aeo-explainer strong {
  color: var(--l-text-primary);
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════ */
/* HERO PILLAR DECK — top-of-hero card shuffle          */
/*                                                      */
/* Single-slot stack. The front card shows the active   */
/* pillar (SEO/AEO/GEO/SXO). Two more cards peek out    */
/* behind, creating a physical deck feel. Every 2s the  */
/* front card slides up + fades, revealing the next.    */
/* Filip's call Apr 19: give the user an immediate      */
/* visual hook for the jargon before the headline text. */
/* ═══════════════════════════════════════════════════ */

.hero-pillar-deck {
  width: 100%;
  max-width: 320px;
  margin: 20px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hpd-stack {
  position: relative;
  width: 280px;
  height: 110px;
  perspective: 1200px;
}

/* When the deck is sandwiched between two title halves, tighten the
   vertical rhythm so the three parts (top line + deck + bottom line)
   read as a single hero composition rather than stacked sections. */
.hero-title-top {
  margin-bottom: 4px;
}
.hero-title-bottom {
  margin-top: 4px;
  margin-bottom: 18px;
}

.hpd-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: white;
  border: 1px solid rgba(15, 15, 30, 0.08);
  box-shadow: 0 12px 32px rgba(15, 15, 30, 0.10);
  transform-origin: center bottom;
  /* Fluid crossfade: both the exit card and the incoming card run the
     SAME transition curve simultaneously. No sequential stagger — when
     the front card starts leaving, the next card is already ramping
     toward full opacity + scale. */
  transition: transform 0.48s cubic-bezier(0.32, 0.72, 0.24, 1),
              opacity 0.42s cubic-bezier(0.32, 0.72, 0.24, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Stack positions. Index 0 = front, 1 = first peek, 2 = second peek,
   3+ = hidden. Each card gets its position via data attribute from JS. */
.hpd-card[data-pos="0"] {
  transform: translateY(0) scale(1);
  opacity: 1;
  z-index: 30;
}
.hpd-card[data-pos="1"] {
  transform: translateY(8px) scale(0.95);
  opacity: 0.65;
  z-index: 20;
}
.hpd-card[data-pos="2"] {
  transform: translateY(16px) scale(0.90);
  opacity: 0.35;
  z-index: 10;
}
.hpd-card[data-pos="3"] {
  transform: translateY(22px) scale(0.86);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

/* Exit animation: outgoing front card lifts up slightly and fades.
   Kept short (-45%) so it disappears off the top of the deck fast
   instead of flying far. Faster opacity than transform so the card
   'evaporates' while still gently drifting up — feels fluid, not
   mechanical. */
.hpd-card-exit {
  transform: translateY(-45%) scale(0.94) !important;
  opacity: 0 !important;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 30 !important;
  pointer-events: none;
}

/* Per-pillar accent — left border and color-tinted label. */
.hpd-card .hpd-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--l-text-muted, #888);
  margin-bottom: 3px;
}

.hpd-card .hpd-acronym {
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hpd-card .hpd-subtitle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--l-text-secondary, #555);
  letter-spacing: 0.2px;
}

.hpd-seo {
  border-left: 3px solid #00d2a0;
}
.hpd-seo .hpd-acronym {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #00d2a0 100%);
}
.hpd-seo .hpd-subtitle { color: #00a884; }

.hpd-aeo {
  border-left: 3px solid #0099ff;
}
.hpd-aeo .hpd-acronym {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #0099ff 100%);
}
.hpd-aeo .hpd-subtitle { color: #0077cc; }

.hpd-geo {
  border-left: 3px solid #f59e0b;
}
.hpd-geo .hpd-acronym {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #f59e0b 100%);
}
.hpd-geo .hpd-subtitle { color: #d98600; }

.hpd-sxo {
  border-left: 3px solid #c77dff;
}
.hpd-sxo .hpd-acronym {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #c77dff 100%);
}
.hpd-sxo .hpd-subtitle { color: #a54fe8; }

/* Mobile — tighten a touch so it doesn't push the headline too far down */
@media (max-width: 520px) {
  .hero-pillar-deck {
    margin-bottom: 24px;
  }
  .hpd-stack {
    width: 260px;
    height: 104px;
  }
  .hpd-card {
    padding: 14px 20px;
  }
  .hpd-card .hpd-acronym {
    font-size: 34px;
  }
  .hpd-card .hpd-subtitle {
    font-size: 12px;
  }
}

/* Respect reduced motion — keep the front card visible, skip the cycle */
@media (prefers-reduced-motion: reduce) {
  .hpd-card {
    transition: none;
  }
  .hpd-card-exit {
    transition: opacity 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* ACRONYM CARD SHUFFLE — SEO / AEO / GEO / SXO        */
/*                                                     */
/* Four flip cards in a row. Track re-orders itself    */
/* every 4.5s via CSS order changes (no layout thrash, */
/* no Flash-of-Shuffled-Content on initial render).    */
/* Hover/focus/tap flips a card to reveal plain-       */
/* English explainer. Each card owns the pillar color. */
/* ═══════════════════════════════════════════════════ */

.hero-acronym-shuffle {
  margin: 32px auto 0;
  max-width: 880px;
  text-align: center;
}

.acronym-shuffle-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  perspective: 1000px;
  align-items: stretch;
}

.acronym-card {
  /* reset button defaults */
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
  text-align: center;

  /* Grow with content instead of forcing a fixed 1:1 — long back copy
     was overflowing the square on mobile before the fix. */
  min-height: 200px;
  perspective: 1000px;
  outline: none;
}

.acronym-card:focus-visible {
  outline: 2px solid var(--l-accent, #883dff);
  outline-offset: 4px;
  border-radius: 14px;
}

.acronym-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.3, 1);
}

.acronym-card.is-flipped .acronym-card-inner,
.acronym-card:hover .acronym-card-inner,
.acronym-card:focus-visible .acronym-card-inner {
  transform: rotateY(180deg);
}

.acronym-card-front,
.acronym-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  box-shadow: 0 8px 24px rgba(15, 15, 30, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: white;
  overflow: hidden;
}

.acronym-card-front {
  background: linear-gradient(140deg, #ffffff 0%, #f8f5ff 100%);
}

.acronym-card-back {
  transform: rotateY(180deg);
  background: white;
  padding: 12px 14px;
  justify-content: center;
  /* Stretch back-card children to full width so each text block hugs
     the left edge. Without this, the parent's align-items: center
     (inherited from the shared .acronym-card-front, .acronym-card-back
     rule) center-shifts each flex child based on its own width, which
     made the shortest card (SEO) look pushed in from the left edge.
     Filip caught this on the mobile screenshot. */
  align-items: stretch;
  text-align: left;
  gap: 4px;
}

.acronym-card-back .acronym-card-fullname,
.acronym-card-back .acronym-card-tagline,
.acronym-card-back .acronym-card-body {
  text-align: left;
  align-self: stretch;
}

/* Per-pillar top-border accent on each card */
.acronym-seo .acronym-card-front,
.acronym-seo .acronym-card-back { border-top: 3px solid #00d2a0; }
.acronym-aeo .acronym-card-front,
.acronym-aeo .acronym-card-back { border-top: 3px solid #0099ff; }
.acronym-geo .acronym-card-front,
.acronym-geo .acronym-card-back { border-top: 3px solid #f59e0b; }
.acronym-sxo .acronym-card-front,
.acronym-sxo .acronym-card-back { border-top: 3px solid #c77dff; }

.acronym-card-glyph {
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--l-text-primary, #1a1a2e) 0%, var(--l-accent, #883dff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}

.acronym-seo .acronym-card-glyph {
  background: linear-gradient(135deg, #1a1a2e 0%, #00d2a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.acronym-aeo .acronym-card-glyph {
  background: linear-gradient(135deg, #1a1a2e 0%, #0099ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.acronym-geo .acronym-card-glyph {
  background: linear-gradient(135deg, #1a1a2e 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.acronym-sxo .acronym-card-glyph {
  background: linear-gradient(135deg, #1a1a2e 0%, #c77dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.acronym-card-label {
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--l-text-muted, #888);
  opacity: 0.85;
}

.acronym-card-fullname {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--l-text-primary, #1a1a2e);
  line-height: 1.25;
  margin-bottom: 3px;
}

.acronym-card-tagline {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
}

.acronym-seo .acronym-card-tagline { color: #00a884; }
.acronym-aeo .acronym-card-tagline { color: #0077cc; }
.acronym-geo .acronym-card-tagline { color: #d98600; }
.acronym-sxo .acronym-card-tagline { color: #a54fe8; }

.acronym-card-body {
  font-size: 11px;
  line-height: 1.4;
  color: var(--l-text-secondary, #555);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acronym-shuffle-hint {
  font-size: 12px;
  color: var(--l-text-muted, #888);
  margin-top: 14px;
  line-height: 1.5;
}

.acronym-shuffle-hint a {
  color: var(--l-accent, #883dff);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(136, 61, 255, 0.3);
}
.acronym-shuffle-hint a:hover { border-bottom-color: currentColor; }

/* Mobile: 2x2 grid, slightly taller cards so back copy fits without overflow */
@media (max-width: 720px) {
  .acronym-shuffle-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .acronym-card {
    min-height: 210px;
  }
  .acronym-card-glyph {
    font-size: clamp(22px, 8vw, 32px);
  }
  .acronym-card-body {
    font-size: 11px;
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
  .acronym-card-front,
  .acronym-card-back {
    padding: 14px 14px;
  }
  /* On touch devices, don't flip on hover — rely on is-flipped class only */
  @media (hover: none) {
    .acronym-card:hover .acronym-card-inner {
      transform: none;
    }
    .acronym-card.is-flipped .acronym-card-inner {
      transform: rotateY(180deg);
    }
  }
}

/* Reduced motion: disable the auto-shuffle animation */
@media (prefers-reduced-motion: reduce) {
  .acronym-card-inner,
  .acronym-card {
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════ */
/* TRUST STRIP                                         */
/* ═══════════════════════════════════════════════════ */

.trust-strip {
  padding: 40px 0;
}

.trust-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--l-text-secondary);
}

.trust-item i {
  color: var(--l-accent);
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════ */
/* SOCIAL PROOF                                         */
/* ═══════════════════════════════════════════════════ */

.section-proof {
  padding: 48px 0 32px;
}

.proof-grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.proof-card {
  padding: 28px 32px;
  text-align: center;
  min-width: 200px;
  flex: 0 1 280px;
}

.proof-number {
  font-size: 36px;
  font-weight: 800;
  color: var(--l-accent);
  line-height: 1.1;
  margin-bottom: 6px;
}

.proof-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--l-text);
  margin-bottom: 4px;
}

.proof-desc {
  font-size: 12.5px;
  color: var(--l-text-muted);
  line-height: 1.5;
}

.proof-stars {
  color: var(--l-amber);
  font-size: 14px;
  margin-bottom: 4px;
  letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════ */
/* SAVINGS COMPARISON                                   */
/* ═══════════════════════════════════════════════════ */

.section-savings {
  padding: 80px 0;
}

.savings-highlight {
  color: var(--l-green);
}

.savings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.savings-card {
  padding: 36px 32px;
  border-radius: 20px;
}

.savings-card-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--l-text);
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: -0.3px;
}

.savings-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.savings-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.savings-label {
  font-size: 14px;
  color: var(--l-text-secondary);
  flex-shrink: 0;
}

.savings-label strong {
  color: var(--l-text);
  font-size: 16px;
}

.savings-value {
  font-size: 14px;
  color: var(--l-text);
  font-weight: 500;
  text-align: right;
}

.savings-strikethrough {
  text-decoration: line-through;
  color: var(--l-text-muted);
}

.savings-divider {
  height: 1px;
  background: var(--l-border);
  margin: 4px 0;
}

.savings-row-total {
  align-items: flex-start;
}

.savings-total-wrap {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.savings-big-number {
  font-size: 32px;
  font-weight: 900;
  color: var(--l-green);
  letter-spacing: -1px;
  line-height: 1;
}

.savings-check {
  font-size: 13px;
  font-weight: 600;
  color: var(--l-green);
}

.savings-check i {
  margin-right: 4px;
}

/* What You Get Card */

.savings-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.savings-feature-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.savings-feature-row > i {
  color: var(--l-green);
  font-size: 13px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.savings-feature-name {
  font-size: 14px;
  color: var(--l-text-secondary);
  flex: 1;
}

.savings-feature-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--l-text-muted);
  flex-shrink: 0;
  text-align: right;
}

.savings-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.savings-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--l-text);
}

.savings-totals-amount {
  font-size: 28px;
  font-weight: 900;
  color: var(--l-text);
  letter-spacing: -0.5px;
}

.savings-totals-you-pay {
  margin-top: 4px;
}

.savings-totals-price {
  font-size: 28px;
  font-weight: 900;
  color: var(--l-green);
  letter-spacing: -0.5px;
}

.savings-off-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--l-green);
  text-align: right;
  margin-top: 4px;
}

.savings-off-label i {
  margin-right: 4px;
}

/* Platform Cycling Pill */

.sp-pill {
  display: inline-block;
  height: 28px;
  overflow: hidden;
  vertical-align: middle;
  background: var(--l-accent-bg);
  border: 1px solid rgba(136, 61, 255, 0.15);
  border-radius: 100px;
  padding: 0 12px;
  position: relative;
  transform: translateY(-1px);
}

.sp-pill-track {
  display: flex;
  flex-direction: column;
  animation: sp-slide 9s infinite;
}

.sp-pill-item {
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--l-accent);
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}

.sp-pill-item i {
  font-size: 13px;
  width: 14px;
  text-align: center;
}

.sp-pill-logo {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@keyframes sp-slide {
  0%        { transform: translateY(0); }
  1.5%      { transform: translateY(4px); }
  3%        { transform: translateY(-28px); }
  4.5%      { transform: translateY(-25px); }
  6%, 14%   { transform: translateY(-28px); }

  15%       { transform: translateY(-24px); }
  16.5%     { transform: translateY(-56px); }
  18%       { transform: translateY(-53px); }
  19.5%, 30% { transform: translateY(-56px); }

  31%       { transform: translateY(-52px); }
  32.5%     { transform: translateY(-84px); }
  34%       { transform: translateY(-81px); }
  35.5%, 46% { transform: translateY(-84px); }

  47%       { transform: translateY(-80px); }
  48.5%     { transform: translateY(-112px); }
  50%       { transform: translateY(-109px); }
  51.5%, 62% { transform: translateY(-112px); }

  63%       { transform: translateY(-108px); }
  64.5%     { transform: translateY(-140px); }
  66%       { transform: translateY(-137px); }
  67.5%, 80% { transform: translateY(-140px); }

  81%       { transform: translateY(-136px); }
  82.5%     { transform: translateY(-168px); }
  84%       { transform: translateY(-165px); }
  85.5%, 100% { transform: translateY(-168px); }
}

/* ═══════════════════════════════════════════════════ */
/* HOW IT WORKS — STEPS                                */
/* ═══════════════════════════════════════════════════ */

.steps-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.step-card {
  flex: 1;
  padding: 36px 28px;
  text-align: center;
  position: relative;
}

.step-number {
  font-size: 48px;
  font-weight: 900;
  color: var(--l-accent-bg);
  position: absolute;
  top: 16px;
  right: 20px;
  line-height: 1;
  color: rgba(136, 61, 255, 0.08);
}

.step-icon {
  font-size: 28px;
  color: var(--l-accent);
  margin-bottom: 16px;
}

.step-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.step-card p {
  font-size: 14px;
  color: var(--l-text-secondary);
  line-height: 1.6;
}

.step-connector {
  color: var(--l-accent-light);
  font-size: 18px;
  padding: 0 8px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════ */
/* FEATURES GRID                                       */
/* ═══════════════════════════════════════════════════ */

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  padding: 32px 24px;
}

.feature-icon {
  font-size: 26px;
  color: var(--l-accent);
  margin-bottom: 16px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--l-accent-bg);
  border-radius: 12px;
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 14px;
  color: var(--l-text-secondary);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════ */
/* AEO: AI SEARCH OPTIMIZATION                         */
/* ═══════════════════════════════════════════════════ */

.section-aeo {
  background: var(--l-bg);
}

/* ── Four Pillars (SEO + AEO + GEO + SXO) ─── */

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 1100px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pillar-card {
  padding: 32px 24px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pillar-color-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.pillar-bar-seo { background: var(--l-green); }
.pillar-bar-aeo { background: #0099ff; }
.pillar-bar-geo { background: var(--l-amber); }
.pillar-bar-sxo { background: #c77dff; }

/* ── Testimonials (social proof from real partners) ── */

.section-testimonials {
  padding: 80px 0 40px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.testimonial-card {
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-quote {
  font-size: 22px;
  color: var(--l-accent);
  opacity: 0.35;
  line-height: 1;
}

.testimonial-card blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--l-text-primary);
  font-weight: 500;
  font-style: normal;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--l-border);
}

.testimonial-author strong {
  font-size: 15px;
  color: var(--l-text-primary);
  font-weight: 600;
}

.testimonial-role {
  font-size: 13px;
  color: var(--l-text-muted);
}

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

.pillar-icon {
  font-size: 26px;
  margin-bottom: 14px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-left: auto;
  margin-right: auto;
}

.pillar-card:nth-child(1) .pillar-icon { color: var(--l-green); background: var(--l-green-light); }
.pillar-card:nth-child(2) .pillar-icon { color: #0099ff; background: rgba(0, 153, 255, 0.1); }
.pillar-card:nth-child(3) .pillar-icon { color: var(--l-amber); background: var(--l-amber-light); }
/* SXO (4th pillar) added Build 68 — icon color mapping was missing and
   fell back to default dark. Filip caught it in the mobile screenshot. */
.pillar-card:nth-child(4) .pillar-icon { color: #c77dff; background: rgba(199, 125, 255, 0.12); }

.pillar-card h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--l-text);
}

.pillar-full-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--l-text-muted);
  margin-bottom: 14px;
}

.pillar-card > p:last-child {
  font-size: 14px;
  color: var(--l-text-secondary);
  line-height: 1.7;
}

.aeo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.aeo-card {
  padding: 28px 22px;
  text-align: center;
}

.aeo-icon {
  font-size: 28px;
  color: var(--l-accent);
  margin-bottom: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--l-accent-bg);
  border-radius: 14px;
  margin-left: auto;
  margin-right: auto;
}

.aeo-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--l-text);
}

.aeo-card p {
  font-size: 13.5px;
  color: var(--l-text-secondary);
  line-height: 1.6;
}

.aeo-explainer {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 28px;
  background: var(--l-accent-bg);
  border-radius: 12px;
  border: 1px solid var(--l-accent-glow);
}

.aeo-explainer p {
  font-size: 14px;
  color: var(--l-text-secondary);
  line-height: 1.7;
}

.aeo-explainer strong {
  color: var(--l-accent);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════ */
/* SPEED COMPARISON                                    */
/* ═══════════════════════════════════════════════════ */

.speed-visual {
  max-width: 700px;
  margin: 0 auto;
}

.speed-card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.speed-side {
  flex: 1;
  padding: 40px 32px;
  text-align: center;
}

.speed-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--l-text-muted);
  padding: 4px 12px;
  background: var(--l-bg-alt);
  border-radius: 6px;
  margin-bottom: 12px;
}

.accent-tag {
  color: var(--l-accent);
  background: var(--l-accent-bg);
}

.speed-time {
  font-size: 42px;
  font-weight: 900;
  color: var(--l-text-muted);
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.accent-time {
  color: var(--l-accent);
}

.speed-side p {
  font-size: 13px;
  color: var(--l-text-muted);
  margin-bottom: 20px;
}

.speed-bar-track {
  height: 8px;
  background: var(--l-bg-alt);
  border-radius: 4px;
  overflow: hidden;
}

.speed-bar-fill {
  height: 100%;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.competitor-bar {
  width: 50%;
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.4));
}

.us-bar {
  width: 100%;
  background: linear-gradient(90deg, var(--l-accent), var(--l-green));
}

/* Shimmer effect on our bar */
.us-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmerBar 2.5s ease infinite;
}

.speed-divider {
  width: 1px;
  background: var(--l-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.speed-divider span {
  background: var(--l-bg);
  padding: 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--l-text-muted);
  position: absolute;
}

/* ═══════════════════════════════════════════════════ */
/* OUR MISSION                                         */
/* ═══════════════════════════════════════════════════ */

.section-mission {
  padding: 80px 0;
}

.mission-block {
  max-width: 900px;
  margin: 0 auto;
}

.mission-lead {
  text-align: center;
  padding: 48px 40px;
  margin-bottom: 40px;
  border-radius: 24px;
  border: 1px solid rgba(136, 61, 255, 0.15);
}

.mission-belief {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--l-accent) 0%, #a855f7 50%, var(--l-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.mission-statements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.mission-card {
  position: relative;
  overflow: hidden;
  padding: 32px 28px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mission-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(136, 61, 255, 0.08);
  color: var(--l-accent);
  font-size: 18px;
  flex-shrink: 0;
}

.mission-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--l-text-secondary);
  font-weight: 500;
  margin: 0;
}

/* ═══════════════════════════════════════════════════ */
/* FEATURE PLATFORMS                                   */
/* ═══════════════════════════════════════════════════ */

.feature-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.feature-platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--l-border);
  color: var(--l-text-muted);
}

.feature-platform.active {
  background: var(--l-green-light);
  color: var(--l-green);
  border-color: rgba(0, 210, 160, 0.2);
}

.feature-platform.soon {
  opacity: 0.7;
}

.feature-platform em {
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--l-accent);
  font-weight: 700;
}

.feature-platform i {
  font-size: 12px;
}

.fp-logo {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════ */
/* PRICING                                             */
/* ═══════════════════════════════════════════════════ */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
}

.pricing-grid-two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin: 0 auto;
  gap: 24px;
}

.pricing-grid-three {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin: 0 auto;
  gap: 24px;
}

.pricing-card {
  padding: 32px 24px;
  text-align: center;
  position: relative;
}

.featured-card {
  border-color: var(--l-accent);
  box-shadow: 0 8px 32px var(--l-accent-glow);
  transform: scale(1.03);
}

.featured-card:hover {
  transform: scale(1.03) translateY(-3px);
}

.pricing-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: var(--l-accent);
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.pricing-tier-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--l-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.pricing-price {
  font-size: 44px;
  font-weight: 900;
  color: var(--l-text);
  margin-bottom: 4px;
  letter-spacing: -1px;
}

.pricing-price span {
  font-size: 16px;
  font-weight: 500;
  color: var(--l-text-muted);
}

.pricing-pages {
  font-size: 13px;
  color: var(--l-accent);
  font-weight: 600;
  margin-bottom: 24px;
}

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

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--l-text-secondary);
  padding: 6px 0;
  line-height: 1.45;
  /* Allow the text node to wrap when the features row is narrow — without
     min-width: 0, the flex text child refuses to shrink below its content
     width and pushes the card past the viewport on mobile.
     NOTE: intentionally NOT setting overflow-wrap: break-word here. The
     earlier break-word rule caused 3-letter acronyms (SEO/AEO/GEO/SXO)
     to stack vertically on narrow desktop pricing cards — the browser
     treated each acronym as breakable. Word-wrapping is the default and
     is the correct behaviour for multi-word English feature bullets. */
  min-width: 0;
  word-break: normal;
}

/* Pillar acronyms inside narrow flex contexts must never split mid-letter.
   Scoped to the known-narrow containers — pricing cards, savings rows,
   feature cards — rather than applied globally. The hero tagline uses
   the same highlight classes on longer phrases like "AI search engines"
   and "generative AI" which DO need to wrap, so we cannot globally
   force nowrap on the highlight classes themselves.
   Filip caught SEO stacking as 'SE' + 'O' in the desktop pricing card
   Apr 20 after the earlier overflow-wrap: break-word fix leaked into
   acronym behaviour. */
.pricing-features li .seo-highlight,
.pricing-features li .aeo-highlight,
.pricing-features li .geo-highlight,
.pricing-features li .sxo-highlight,
.savings-label .seo-highlight,
.savings-label .aeo-highlight,
.savings-label .geo-highlight,
.savings-label .sxo-highlight,
.savings-feature-name .seo-highlight,
.savings-feature-name .aeo-highlight,
.savings-feature-name .geo-highlight,
.savings-feature-name .sxo-highlight,
.feature-card .seo-highlight,
.feature-card .aeo-highlight,
.feature-card .geo-highlight,
.feature-card .sxo-highlight {
  white-space: nowrap;
}

.pricing-features li > :not(i) {
  min-width: 0;
  flex: 1;
}

.pricing-features i {
  color: var(--l-green);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 4px;
}

.pricing-card .btn {
  width: 100%;
  justify-content: center;
}

/* ─── Landing Billing Toggle ──────────────────────── */

.landing-billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 32px;
}

.landing-billing-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--l-text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.landing-billing-label.active {
  color: var(--l-text);
}

.landing-billing-save {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #00d68f;
  background: rgba(0, 214, 143, 0.1);
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: 6px;
}

.landing-billing-switch {
  position: relative;
  width: 52px;
  height: 28px;
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
  padding: 0;
}

.landing-billing-switch:hover {
  border-color: var(--l-accent);
}

.landing-billing-switch[aria-checked="true"] {
  background: var(--l-accent);
  border-color: var(--l-accent);
}

.landing-billing-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.landing-billing-switch[aria-checked="true"] .landing-billing-knob {
  transform: translateX(24px);
}

.landing-price-billed {
  margin: -2px 0 12px;
}

.landing-billed-text {
  font-size: 12px;
  color: var(--l-text-muted);
}

.landing-billed-savings {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #00d68f;
  margin-left: 6px;
}

/* ═══════════════════════════════════════════════════ */
/* CTA SECTION                                         */
/* ═══════════════════════════════════════════════════ */

.section-cta {
  background: linear-gradient(135deg, var(--l-accent) 0%, #6e2dd4 100%);
  text-align: center;
}

.cta-title {
  font-size: 40px;
  font-weight: 800;
  color: white;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.cta-desc {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 32px;
}

/* ─── Waitlist Form ──────────────────────── */

.waitlist-form {
  max-width: 520px;
  margin: 0 auto;
}

.waitlist-input-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.waitlist-input {
  flex: 1;
  padding: 16px 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.waitlist-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.waitlist-input:focus {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
}

.waitlist-btn {
  background: white !important;
  color: var(--l-accent) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  flex-shrink: 0;
}

.waitlist-btn:hover {
  background: #f0f0ff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.waitlist-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.waitlist-message {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  min-height: 22px;
}

.waitlist-message.success {
  color: #a5ffc9;
}

.waitlist-message.error {
  color: #ffa5a5;
}

.waitlist-count {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

/* ═══════════════════════════════════════════════════ */
/* FOOTER                                              */
/* ═══════════════════════════════════════════════════ */

.footer {
  padding: 40px 0;
  border-top: 1px solid var(--l-border);
  position: relative;
  z-index: 1;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.footer-logo-icon {
  height: 22px;
  width: 22px;
  border-radius: 5px;
  object-fit: contain;
}

.footer-logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--l-accent);
}

.footer-brand p {
  font-size: 12px;
  color: var(--l-text-muted);
}

.footer-links {
  display: flex;
  gap: 24px;
}

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

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

.footer-copy {
  font-size: 12px;
  color: var(--l-text-muted);
}

/* ═══════════════════════════════════════════════════ */
/* REGISTRATION RIGHT PANEL                              */
/* ═══════════════════════════════════════════════════ */

.reg-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.reg-overlay.visible { opacity: 1; }

.analyzer-reg {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  background: #ffffff;
  border-left: 1px solid var(--l-border);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.analyzer-reg.visible { transform: translateX(0); }

.reg-panel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--l-border);
  background: var(--l-bg);
  color: var(--l-text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 150ms ease;
  z-index: 2;
}
.reg-panel-close:hover {
  background: var(--l-accent);
  color: white;
  border-color: var(--l-accent);
}

.analyzer-reg-inner {
  padding: 40px 32px;
}

.analyzer-reg-header {
  text-align: center;
  margin-bottom: 28px;
}
.analyzer-reg-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--l-accent), #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
  font-size: 24px;
  animation: cv-pulse-icon 2s ease-in-out infinite;
}
.analyzer-reg-header h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.analyzer-reg-header p {
  font-size: 14px;
  color: var(--l-text-secondary);
  line-height: 1.6;
}

.analyzer-reg-form { display: flex; flex-direction: column; gap: 14px; }

.reg-field { display: flex; flex-direction: column; gap: 4px; }
.reg-label { font-size: 12px; font-weight: 600; color: var(--l-text); letter-spacing: 0.01em; }
.reg-input-wrap { position: relative; }

.reg-phone-wrap {
  border: 1px solid var(--l-border);
  border-radius: 8px;
  transition: 150ms ease;
}
.reg-phone-wrap:focus-within {
  border-color: var(--l-accent);
  box-shadow: 0 0 0 3px rgba(136, 61, 255, 0.12);
}
.reg-phone-wrap:focus-within .reg-icon { color: var(--l-accent); }
.reg-phone-wrap .analyzer-reg-input {
  border: none;
  border-radius: 0;
  background: transparent;
}
.reg-phone-wrap .analyzer-reg-input:focus {
  border: none;
  box-shadow: none;
}
.reg-phone-wrap select.analyzer-reg-input {
  border-right: 1px solid var(--l-border);
}
.reg-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--l-text-muted); pointer-events: none; transition: color 150ms;
}
.reg-input-wrap:focus-within .reg-icon { color: var(--l-accent); }
.reg-input-wrap .analyzer-reg-input { padding-left: 40px; }
.reg-input-wrap .analyzer-reg-input[type="password"],
.reg-input-wrap .analyzer-reg-input[type="text"].reg-pw-visible { padding-right: 42px; }
.reg-input-wrap .analyzer-reg-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 1; }

.analyzer-reg-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  border-radius: 12px;
  font-family: var(--l-font);
  font-size: 14px;
  color: var(--l-text);
  transition: 150ms ease;
}
.analyzer-reg-input:focus {
  outline: none;
  border-color: var(--l-accent);
  box-shadow: 0 0 0 3px rgba(108,92,231,0.12);
}
.analyzer-reg-input::placeholder { color: var(--l-text-muted); }

.analyzer-reg-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--l-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
}
.analyzer-reg-eye:hover { color: var(--l-accent); }

.analyzer-reg-btn {
  margin-top: 4px;
  width: 100%;
  font-size: 14px;
  padding: 14px;
}

.analyzer-reg-error {
  display: none;
  padding: 10px 14px;
  background: rgba(231,76,60,0.08);
  border: 1px solid rgba(231,76,60,0.2);
  border-radius: 8px;
  color: #e74c3c;
  font-size: 13px;
  text-align: center;
}
.analyzer-reg-error.show { display: block; }

.analyzer-reg-fine {
  text-align: center;
  font-size: 12px;
  color: var(--l-text-muted);
  margin-top: 20px;
}
.analyzer-reg-fine a {
  color: var(--l-accent);
  text-decoration: none;
  font-weight: 600;
}

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

/* Mobile: full-width panel from bottom */
@media (max-width: 768px) {
  .analyzer-reg {
    width: 100%;
    height: auto;
    max-height: 90vh;
    max-height: 90dvh;
    top: auto;
    bottom: 0;
    border-left: none;
    border-top: 1px solid var(--l-border);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
  }
  .analyzer-reg.visible { transform: translateY(0); }
  .analyzer-reg-inner { padding: 24px 20px; }
  .analyzer-reg-header { margin-bottom: 20px; }
  .analyzer-reg-header h3 { font-size: 18px; }
  .analyzer-reg-header p { font-size: 13px; }
  .analyzer-reg-form { gap: 10px; }
  .reg-label { font-size: 11px; }
  .analyzer-reg-input { padding: 10px 16px; font-size: 13px; }
  .reg-input-wrap .analyzer-reg-input { padding-left: 36px; }
  .reg-icon { left: 12px; font-size: 12px; }
  .analyzer-reg-icon { width: 44px; height: 44px; margin-bottom: 12px; }
  .analyzer-reg-icon i { font-size: 18px; }
  .analyzer-reg-btn { padding: 12px; font-size: 13px; }
  .analyzer-reg-fine { margin-top: 14px; }
  .reg-panel-close { top: 12px; right: 12px; }
}

/* ═══════════════════════════════════════════════════ */
/* SEO POTENTIAL METER                                  */
/* ═══════════════════════════════════════════════════ */

.potential-meter {
  padding: 32px;
  margin-bottom: 28px;
  border-radius: 16px;
  overflow: hidden;
}

.potential-meter-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--l-text);
  margin-bottom: 28px;
}

.potential-meter-header i {
  color: var(--l-accent);
  font-size: 20px;
}

/* ── Meter Bar ── */

.meter-bar-container {
  position: relative;
  margin-bottom: 32px;
}

.meter-bar {
  display: flex;
  gap: 3px;
  height: 18px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: var(--l-bg-alt);
}

.meter-segment {
  flex: 1;
  border-radius: 4px;
  transition: opacity 0.3s ease;
  opacity: 0.18;
}

.meter-seg-1 { background: #e74c3c; }
.meter-seg-2 { background: #e67e22; }
.meter-seg-3 { background: #f1c40f; }
.meter-seg-4 { background: #2ecc71; }
.meter-seg-5 { background: var(--l-accent); }

/* Segments light up when meter fills past them */
.meter-segment.lit {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.meter-seg-5.lit {
  box-shadow: 0 0 20px rgba(136, 61, 255, 0.5);
}

/* The animated fill overlay */
.meter-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 10px;
  background: linear-gradient(90deg, #e74c3c 0%, #e67e22 20%, #f1c40f 40%, #2ecc71 65%, var(--l-accent) 100%);
  opacity: 0.35;
  transition: width 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

/* Needle / indicator */
.meter-needle {
  position: absolute;
  top: -6px;
  width: 4px;
  height: 30px;
  background: var(--l-text);
  border-radius: 2px;
  left: 0%;
  transition: left 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 3;
  opacity: 0;
}

.meter-needle.visible {
  opacity: 1;
}

/* ── Tier Labels ── */

.meter-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
}

.meter-labels span {
  font-size: 11px;
  font-weight: 600;
  color: var(--l-text-muted);
  text-align: center;
  flex: 1;
  transition: color 0.4s ease, transform 0.4s ease;
}

.meter-labels span.active {
  color: var(--l-accent);
  transform: scale(1.1);
  font-weight: 700;
}

/* ── Markers (You Are Here / Your Potential) ── */

.meter-markers {
  position: relative;
  height: 40px;
  margin-top: 4px;
}

.meter-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.5s ease, left 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateX(-50%);
}

.meter-marker.visible {
  opacity: 1;
}

.marker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.meter-marker span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.meter-marker-current .marker-dot {
  background: #e67e22;
}
.meter-marker-current span {
  color: #e67e22;
}

.meter-marker-potential .marker-dot {
  background: var(--l-accent);
  box-shadow: 0 0 12px rgba(136, 61, 255, 0.5);
}
.meter-marker-potential span {
  color: var(--l-accent);
}

/* ── Potential Insight Text ── */

.potential-insight {
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.potential-insight.visible {
  opacity: 1;
  transform: translateY(0);
}

.potential-headline {
  font-size: 22px;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  line-height: 1.3;
}

.potential-text {
  font-size: 15px;
  color: var(--l-text-secondary);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 20px;
}

.potential-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.potential-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  background: var(--l-bg-alt);
  border-radius: 12px;
  border: 1px solid var(--l-border);
  min-width: 120px;
}

.potential-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--l-accent);
  letter-spacing: -0.5px;
}

.potential-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--l-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Meter Animations ── */

@keyframes meter-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.15); }
}

@keyframes meter-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(136, 61, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(136, 61, 255, 0.6), 0 0 60px rgba(136, 61, 255, 0.2); }
}

@keyframes meter-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px); }
  20% { transform: translateX(4px); }
  30% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

@keyframes needle-bounce {
  0%, 100% { transform: scaleY(1); }
  30% { transform: scaleY(1.2); }
  60% { transform: scaleY(0.95); }
}

.meter-bar.shake {
  animation: meter-shake 0.6s ease;
}

.meter-bar.pulse {
  animation: meter-pulse 1.5s ease infinite;
}

.meter-bar.glow {
  animation: meter-glow 2s ease infinite;
  border-radius: 10px;
}

.meter-needle.bounce {
  animation: needle-bounce 0.4s ease;
}

/* Potential stat entrance */
@keyframes stat-pop {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.potential-stat.pop {
  animation: stat-pop 0.4s ease forwards;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════ */
/* ANALYSIS LIMIT — FOMO / URGENCY CTA                 */
/* ═══════════════════════════════════════════════════ */

.analyzer-limit {
  margin-top: 32px;
  animation: limit-entrance 0.6s ease forwards;
}

@keyframes limit-entrance {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.limit-card {
  text-align: center;
  padding: 48px 40px;
  border-radius: 20px;
  border: 1px solid rgba(231, 76, 60, 0.15);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 245, 243, 0.9));
  position: relative;
  overflow: hidden;
}

.limit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #e74c3c, #e67e22, var(--l-accent));
  animation: limit-bar-pulse 2s ease infinite;
}

@keyframes limit-bar-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.limit-icon-wrap {
  margin-bottom: 16px;
}

.limit-fire {
  font-size: 40px;
  color: #e74c3c;
  animation: limit-fire-pulse 1.5s ease infinite;
}

@keyframes limit-fire-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.limit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.15);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
  margin-bottom: 20px;
  animation: limit-badge-glow 2s ease infinite;
}

@keyframes limit-badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
  50% { box-shadow: 0 0 20px 4px rgba(231, 76, 60, 0.12); }
}

.limit-badge i {
  color: #e67e22;
  animation: limit-bolt-flash 1.2s ease infinite;
}

@keyframes limit-bolt-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.limit-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--l-text);
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.limit-subtitle {
  font-size: 16px;
  color: var(--l-text-secondary);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 20px;
}

.limit-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #e74c3c, var(--l-accent));
  border-radius: 2px;
  margin: 0 auto 20px;
}

.limit-cta-text {
  font-size: 15px;
  color: var(--l-text-secondary);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 28px;
}

.limit-cta-text strong {
  color: var(--l-text);
}

.limit-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.limit-btn-main {
  font-size: 16px;
  padding: 16px 36px;
  border-radius: 12px;
  animation: limit-btn-breathe 2.5s ease infinite;
}

@keyframes limit-btn-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 20px var(--l-accent-glow); }
  50% { transform: scale(1.03); box-shadow: 0 8px 32px var(--l-accent-glow); }
}

.limit-urgency {
  font-size: 13px;
  color: var(--l-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.limit-urgency i {
  color: #e67e22;
}

.limit-urgency span {
  font-weight: 700;
  color: #e74c3c;
}

/* ═══════════════════════════════════════════════════ */
/* RESPONSIVE                                          */
/* ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .hero-title { font-size: 48px; }
  .section-title { font-size: 32px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .aeo-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-row { flex-wrap: wrap; justify-content: center; gap: 24px; }
  .step-connector { display: none; }
  .step-card { min-width: 260px; }
  .pillars-grid { gap: 16px; }
}

@media (max-width: 768px) {
  /* ── Mobile Pillars ── */
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pillar-card { padding: 24px 20px 22px; }
  .pillar-card h3 { font-size: 20px; }
  .proof-grid { gap: 16px; }
  .proof-card { padding: 20px 16px; min-width: unset; flex: 1 1 140px; }
  .proof-number { font-size: 28px; }

  /* ── Mobile AEO ── */
  .aeo-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .aeo-card {
    padding: 24px 20px;
  }
  .aeo-explainer {
    padding: 16px 20px;
  }

  /* ── Mobile Savings ── */
  .savings-grid {
    grid-template-columns: 1fr;
  }
  .savings-card {
    padding: 28px 20px;
  }
  .savings-card-title {
    font-size: 18px;
  }
  .savings-row {
    flex-direction: column;
    gap: 4px;
  }
  .savings-value {
    text-align: left;
  }
  .savings-total-wrap {
    text-align: left;
  }
  .savings-big-number {
    font-size: 28px;
  }
  .savings-totals-amount,
  .savings-totals-price {
    font-size: 24px;
  }
  .savings-off-label {
    text-align: left;
  }

  /* ── Mobile Navbar ── */
  .nav-container {
    padding: 0 16px;
  }
  .nav-logo {
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }
  .nav-logo-icon {
    height: 24px;
    width: 24px;
  }
  .nav-logo-text {
    font-size: 15px;
    white-space: nowrap;
  }
  .nav-actions {
    gap: 8px;
    align-items: center;
  }
  .nav-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .nav-btn-primary {
    padding: 7px 14px;
  }

  /* ── Mobile Hero ── */
  .section { padding: 60px 0; }
  .section.hero { padding: 90px 0 60px; }
  .hero-title { font-size: 36px; }
  .section-title { font-size: 26px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-stats { flex-direction: column; gap: 12px; padding: 20px; }
  .hero-stat-divider { width: 40px; height: 1px; }
  .hero-engines { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .hero-engine-item { font-size: 13px; gap: 6px; }
  .hero-engine-icon { width: 17px; height: 17px; }
  .hero-engines-tagline { font-size: 15px; margin-top: 44px; margin-bottom: 8px; }
  .trust-strip { padding: 20px 0; }
  .section.hero { padding-bottom: 30px; }
  .section-savings { padding-top: 30px; }

  /* ── Mobile Layout ── */
  .steps-row { flex-direction: column; gap: 32px; }
  .step-card { min-width: auto; }
  .features-grid, .pricing-grid { grid-template-columns: 1fr; }
  .speed-card { flex-direction: column; }
  .speed-divider { width: 100%; height: auto; flex-direction: row; padding: 28px 0; }
  .speed-divider span { padding: 0 12px; font-size: 15px; }
  .nav-links { display: none; }
  .featured-card { transform: none; order: -1; }
  .featured-card:hover { transform: translateY(-3px); }
  .pricing-card { padding: 28px 18px; }
  .pricing-features li { font-size: 12.5px; gap: 8px; }
  .pricing-features { margin-bottom: 20px; }
  .footer-row { flex-direction: column; gap: 16px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
  .cta-title { font-size: 28px; }
  .waitlist-input-row { flex-direction: column; }
  .waitlist-btn { width: 100%; justify-content: center; }

  /* ── Mobile Mission ── */
  .mission-lead { padding: 32px 24px; margin-bottom: 28px; }
  .mission-statements { grid-template-columns: 1fr; gap: 16px; }
  .mission-card { padding: 28px 20px; }
  .mission-text { font-size: 15px; }

  /* ── Mobile Meter ── */
  .potential-meter { padding: 20px 16px; }
  .potential-meter-header { font-size: 16px; margin-bottom: 20px; }
  .meter-bar { height: 14px; }
  .meter-needle { height: 26px; top: -5px; }
  .meter-labels span { font-size: 9px; }
  .potential-headline { font-size: 18px; }
  .potential-text { font-size: 13px; }
  .potential-stats { gap: 12px; }
  .potential-stat { min-width: 90px; padding: 10px 14px; }
  .potential-stat-value { font-size: 18px; }
  .potential-stat-label { font-size: 10px; }
  .meter-marker span { font-size: 8px; }
  .marker-dot { width: 8px; height: 8px; }

  /* ── Mobile Limit/FOMO ── */
  .limit-card { padding: 32px 20px; }
  .limit-title { font-size: 24px; }
  .limit-subtitle { font-size: 14px; }
  .limit-cta-text { font-size: 13px; }
  .limit-btn-main { font-size: 14px; padding: 14px 24px; }
  .limit-fire { font-size: 32px; }
}

/* ─── Selection & Scrollbar ──────────────────────── */

::selection {
  background: var(--l-accent);
  color: white;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--l-bg); }
::-webkit-scrollbar-thumb { background: #c8c8d8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--l-accent); }

/* ─── Coming Soon Toast ──────────────────────── */

.toast-coming-soon {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, var(--l-accent), var(--l-accent-dark, #5a2dcc));
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 32px rgba(108, 62, 228, 0.35);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-coming-soon.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-coming-soon i {
  font-size: 18px;
}


/* ─── ANALYZER SECTION ──────────────────────────── */

.section-analyzer {
  padding: 80px 0;
  position: relative;
}

.analyzer-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.analyzer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--l-green-light);
  color: #00b388;
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  margin-bottom: 20px;
}

.analyzer-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.analyzer-desc {
  color: var(--l-text-secondary);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ─── Analyzer Input ─── */

.analyzer-form {
  margin-bottom: 24px;
}

.analyzer-input-row {
  display: flex;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.analyzer-input-wrap {
  flex: 1;
  position: relative;
}

.analyzer-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--l-text-muted);
  font-size: 16px;
  pointer-events: none;
}

.analyzer-input {
  width: 100%;
  padding: 16px 16px 16px 44px;
  font-size: 16px;
  font-family: var(--l-font);
  border: 2px solid var(--l-border);
  border-radius: 14px;
  background: var(--l-bg-white);
  color: var(--l-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.analyzer-input:focus {
  border-color: var(--l-accent);
  box-shadow: 0 0 0 4px var(--l-accent-glow);
}

.analyzer-btn {
  white-space: nowrap;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
}

/* ─── Conveyor Belt v2 (Card Style) ─── */

.conveyor-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 0;
}

.conveyor-card {
  text-align: center;
  padding: 40px 32px;
  background: var(--l-bg-white);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

.conveyor-card-icon {
  font-size: 36px;
  color: var(--l-accent);
  margin-bottom: 16px;
  animation: cv-pulse-icon 2s ease-in-out infinite;
}

@keyframes cv-pulse-icon {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

.conveyor-card-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--l-text);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.conveyor-card-status {
  color: var(--l-text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* Top row: done pills left, active pill right */
.conveyor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 16px;
  gap: 8px;
}

.conveyor-done {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.conveyor-active {
  flex-shrink: 0;
}

/* Done pills — small, muted */
.cv-pill-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--l-green-light);
  color: var(--l-green);
  font-size: 11px;
  font-weight: 600;
  border-radius: 100px;
  border: 1px solid rgba(0, 210, 160, 0.2);
  animation: pill-shrink-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pill-shrink-in {
  0% { opacity: 0; transform: translateX(40px) scale(1.2); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Active pill — spinning snake border */
.cv-pill-active {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  color: var(--l-accent);
  font-size: 13px;
  font-weight: 700;
  border-radius: 100px;
  background: var(--l-bg-white);
  overflow: hidden;
  animation: pill-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Spinning snake — large square rotates behind pill, overflow hidden clips it */
.cv-pill-active::before {
  content: '';
  position: absolute;
  /* Make it a big square so the rotation stays smooth around corners */
  width: 200%;
  height: 600%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: conic-gradient(
    transparent 0%,
    transparent 65%,
    var(--l-accent-light) 80%,
    var(--l-accent) 92%,
    transparent 100%
  );
  animation: snake-spin 2.5s linear infinite;
  z-index: 0;
}

/* Inner fill — thin border visible + progress fill */
.cv-pill-active::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 100px;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(136, 61, 255, 0.1), rgba(136, 61, 255, 0.08)) no-repeat left center,
    var(--l-bg-white);
  background-size: 0% 100%;
  animation: pill-fill-up 20s ease-in-out forwards;
}

@keyframes pill-fill-up {
  0% { background-size: 0% 100%; }
  100% { background-size: 95% 100%; }
}

/* Content sits above everything */
.cv-pill-active > * {
  position: relative;
  z-index: 2;
}

@keyframes snake-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pill-pop-in {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* Conveyor scene — wind rain zone */
.conveyor-scene {
  position: relative;
  height: 80px;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 12px;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;
}

/* Wind rain icons */
.cv-drop-icon {
  position: absolute;
  font-size: var(--drop-size, 16px);
  color: var(--l-accent-light);
  opacity: 0;
  pointer-events: none;
  animation: wind-rain var(--rain-duration, 2.5s) ease-in forwards;
  animation-delay: var(--rain-delay, 0s);
}

@keyframes wind-rain {
  0% {
    opacity: 0;
    transform: translate(0, -10px) rotate(0deg);
  }
  10% {
    opacity: var(--drop-opacity, 0.45);
  }
  80% {
    opacity: var(--drop-opacity, 0.45);
  }
  100% {
    opacity: 0;
    transform: translate(var(--wind-x, 120px), 90px) rotate(var(--spin, 30deg));
  }
}

/* Bottom row: status + percent */
.conveyor-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conveyor-bottom .conveyor-step-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--l-text-secondary);
}

.conveyor-pct {
  font-size: 20px;
  font-weight: 800;
  color: var(--l-accent);
  letter-spacing: -0.5px;
}

.conveyor-step-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--l-text-secondary);
}

/* Progress bar */
.conveyor-bar-wrap {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin: 16px 0;
  position: relative;
}

.conveyor-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--l-accent), var(--l-green));
  border-radius: 4px;
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

.conveyor-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: cv-shimmer-bar 2.5s ease infinite;
}

@keyframes cv-shimmer-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.conveyor-note {
  font-size: 13px;
  color: var(--l-text-muted);
  margin: 0;
}

/* Mobile conveyor */
@media (max-width: 640px) {
  .conveyor-card { padding: 28px 20px; }
  .conveyor-card-title { font-size: 18px; }

  .conveyor-top {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .conveyor-done {
    justify-content: center;
  }

  .cv-pill-done {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ─── Results ─── */

.analyzer-results {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.analyzer-results.visible {
  opacity: 1;
  transform: translateY(0);
}

.results-header {
  text-align: center;
  margin-bottom: 24px;
}

.results-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--l-green);
}

.results-header h3 i {
  margin-right: 8px;
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.result-card {
  padding: 20px;
  border-radius: 16px;
}

.result-card-full {
  grid-column: 1 / -1;
}

.result-card-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--l-accent);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-card-header i {
  margin-right: 6px;
}

.result-card-body {
  font-size: 14px;
  color: var(--l-text);
  line-height: 1.6;
}

.result-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--l-border-light);
}

.result-item:last-child {
  border-bottom: none;
}

.result-item strong {
  color: var(--l-text);
}

.result-recommendations {
  margin-top: 12px;
}

.result-recommendations ul {
  list-style: none;
  padding: 0;
  margin-top: 6px;
}

.result-recommendations li {
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
  font-size: 13px;
  color: var(--l-text-secondary);
}

.result-recommendations li::before {
  content: '\f0a4';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--l-accent);
  font-size: 10px;
}

/* ─── Keyword List ─── */

.keyword-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.keyword-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--l-border-light);
}

.keyword-row:last-child {
  border-bottom: none;
}

.keyword-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--l-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keyword-metrics {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.keyword-metric {
  font-size: 12px;
  color: var(--l-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.keyword-score {
  color: var(--l-accent);
  font-weight: 600;
}

/* ─── Strategy Results ─── */

.strategy-overview {
  font-size: 14px;
  color: var(--l-text-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}

.strategy-articles {
  margin-top: 8px;
}

.strategy-articles > strong {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--l-text);
}

.strategy-article-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--l-border-light);
}

.strategy-article-row:last-child {
  border-bottom: none;
}

.strategy-priority {
  background: var(--l-accent-bg);
  color: var(--l-accent);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.strategy-article-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.strategy-article-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--l-text);
}

.strategy-article-meta {
  font-size: 12px;
  color: var(--l-text-muted);
}

.strategy-more {
  font-size: 13px;
  color: var(--l-accent);
  font-weight: 600;
  margin-top: 8px;
}

.results-cta {
  text-align: center;
  margin-top: 32px;
}

/* ─── Private by Principle ─── */

.section-privacy {
  padding: 80px 0 40px;
  background: transparent;
}

.privacy-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.privacy-shield-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--l-accent) 0%, var(--l-green) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
}

.privacy-headline {
  font-size: 28px;
  font-weight: 800;
  color: var(--l-text);
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}

.privacy-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.privacy-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--l-border);
  border-radius: 12px;
}

.privacy-point i {
  color: var(--l-accent);
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.privacy-point p {
  font-size: 15px;
  color: var(--l-text-secondary);
  line-height: 1.65;
  margin: 0;
}

.privacy-belief {
  font-size: 18px;
  font-weight: 700;
  color: var(--l-text);
  margin-bottom: 16px;
}

.privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--l-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.privacy-link:hover {
  opacity: 0.75;
}

@media (max-width: 640px) {
  .section-privacy {
    padding: 60px 0 32px;
  }
  .privacy-headline {
    font-size: 22px;
  }
  .privacy-point {
    padding: 12px 16px;
  }
  .privacy-belief {
    font-size: 16px;
  }
}

/* ─── Why Epicurus? ─── */

.section-epicurus {
  padding: 80px 0;
  background: transparent;
}

.epicurus-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.epicurus-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--l-text);
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.epicurus-quote {
  font-size: 20px;
  font-style: italic;
  color: var(--l-accent);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
}

.epicurus-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--l-text-muted);
}

@media (max-width: 640px) {
  .epicurus-title {
    font-size: 22px;
  }
  .epicurus-quote {
    font-size: 17px;
  }
  .epicurus-body {
    font-size: 14px;
  }
}

/* ─── Mobile: Analyzer ─── */

@media (max-width: 640px) {
  .analyzer-input-row {
    flex-direction: column;
  }

  .analyzer-btn {
    width: 100%;
  }

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

/* ─── Mobile: prevent iOS Safari zoom on input focus ── */

@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input:not([type]),
  select,
  textarea,
  .analyzer-input,
  .analyzer-reg-input,
  .waitlist-input {
    font-size: 16px !important;
  }
}