/* =========================================================
   Karma Jyotisha — design tokens derived from founder's chart
   Capricorn lagna · Jupiter Atmakaraka · Sun exalted Aries ·
   Moon Pisces · Jupiter↔Venus exchange · Kalpadruma yoga
   ========================================================= */

:root {
  /* Single accent palette — gold only. Discipline > decoration. */
  --midnight:  #0a0e27;
  --ink:       #11162e;
  --slate-d:   #1a1f3a;
  --slate-m:   #2a2e4a;

  /* Gold (the only accent) */
  --gold:        #f4c430;
  --gold-warm:   #f4a02e;
  --gold-deep:   #c89a3a;
  --gold-soft:   #f5e0a0;
  --gold-glow:   rgba(244,196,48,0.35);

  /* Aliases now mapped to gold variants — no more rose/ember/teal noise */
  --saffron:   #f4a02e;
  --rose:      #f4c430;
  --pearl:     #f5e0a0;
  --ember:     #f4a02e;
  --ember-d:   #c89a3a;
  --ocean:     #11162e;
  --teal:      #1a1f3a;

  /* Cream parchment (warm light text) */
  --cream:     #f4ead5;
  --cream-d:   #d4c8a8;
  --cream-mute:#a89a78;

  /* Hero sunrise gradient — midnight to dawn */
  --grad-cosmic: linear-gradient(160deg, #0a0e27 0%, #1a1340 25%, #3d1f5e 50%, #7a2c4a 75%, #f4a02e 100%);
  --grad-aurora: linear-gradient(180deg, #0a0e27 0%, #11162e 50%, #1a1f3a 100%);
  --grad-dawn:   linear-gradient(135deg, #f4a02e 0%, #f4c430 50%, #f5e0a0 100%);
  --grad-altar:  linear-gradient(180deg, #11162e 0%, #1a1340 100%);

  /* Type — FRAUNCES ONLY for all English (display + UI). Sanskrit in Tiro. */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-script:  'Tiro Devanagari Sanskrit', serif;
  --font-hand:    'Caveat', 'Reenie Beanie', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Shadows — warm gold-tinted, never cold */
  --shadow-sm:  rgba(244,160,46,0.05) 0 4px 14px -4px, rgba(10,14,39,0.4) 0 0 0 1px;
  --shadow-md:  rgba(0,0,0,0.35) 0 14px 36px -10px, rgba(244,196,48,0.08) 0 0 0 1px;
  --shadow-lg:  rgba(0,0,0,0.45) 0 28px 56px -14px, rgba(244,196,48,0.12) 0 0 0 1px;
  --ring-gold:  inset 0 0 0 1px rgba(244,196,48,0.22);
  --ring-gold-strong: inset 0 0 0 1.5px rgba(244,196,48,0.5);
  --glow-ember: 0 0 18px rgba(255,107,53,0.32), inset rgba(255,255,255,0.16) 0 1px 0;

  /* Layout */
  --max-w: 1200px;
  --section-gap: 120px;
  --radius-pill: 9999px;
  --radius-card: 24px;
  --radius-card-sm: 8px;
}

/* =========================================================
   Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream);
  background: var(--midnight);
  letter-spacing: -0.005em;
  font-feature-settings: 'ss01' on, 'cv11' on;
  font-variation-settings: 'opsz' 14, 'SOFT' 50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Fraunces optical sizing — smaller text gets less display drama */
.section-display, .section-heading, .hero-display, .never-quote, .vs-title, .gps-title,
.vision-h2, .install-h2, .viral-quote { font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.hero-sub, .section-lede, .prose p, .install-lede, .vision-prose p, .gps-body, .vs-body,
.never-body, .pillar p, .step p, .privacy-card p, .tool-card p, .price-features li,
.compare-table td, .footer-letter-body { font-variation-settings: 'opsz' 11, 'SOFT' 50; }
.section-eyebrow, .nav-link, .nav-cta, .price-tier-tag, .stat-label,
.kj-modal-eyebrow, .anchor-chips-eyebrow { font-variation-settings: 'opsz' 9, 'SOFT' 0, 'wght' 500; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
::selection { background: var(--saffron); color: var(--midnight); }

/* Body cosmic background — subtle nebula */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(122,44,74,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(244,160,46,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 70%, rgba(26,122,133,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -2;
}

/* Twinkling starfield (CSS only) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(244,234,213,0.6) 50%, transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(244,234,213,0.4) 50%, transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(244,196,48,0.7) 50%, transparent),
    radial-gradient(1px 1px at 10% 85%, rgba(232,165,152,0.5) 50%, transparent),
    radial-gradient(1px 1px at 40% 50%, rgba(244,234,213,0.3) 50%, transparent),
    radial-gradient(1px 1px at 75% 90%, rgba(244,196,48,0.5) 50%, transparent),
    radial-gradient(2px 2px at 30% 10%, rgba(244,234,213,0.7) 50%, transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(232,165,152,0.4) 50%, transparent);
  background-size: 1200px 1200px;
  background-repeat: repeat;
  animation: twinkle 12s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  opacity: 0.28;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.14; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-cta, .btn-ghost, .btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease, background 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.btn-cta {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-warm) 100%);
  color: var(--midnight);
  padding: 14px 28px;
  font-weight: 600;
  box-shadow: var(--glow-ember), var(--shadow-md);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease;
}
.btn-script {
  font-family: var(--font-script);
  font-size: 17px;
  line-height: 1;
  color: var(--midnight);
  opacity: 0.7;
  margin-right: -2px;
}
.btn-cta::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--gold), var(--ember), var(--rose), var(--gold));
  background-size: 300% 300%;
  z-index: -1;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: aura 4s ease infinite;
}
.btn-cta:hover { transform: translateY(-2px) scale(1.02); }
.btn-cta:hover::before { opacity: 0.7; }
.btn-cta:active { transform: translateY(0) scale(1); }

@keyframes heartbeat {
  0%, 100%   { box-shadow: var(--glow-ember), var(--shadow-md); }
  50% { box-shadow: 0 0 36px rgba(255,107,53,0.7), inset rgba(255,255,255,0.18) 0 1px 0, var(--shadow-lg); }
}
@keyframes aura {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.btn-ghost {
  background: transparent;
  color: var(--cream);
  padding: 13px 24px;
  box-shadow: inset rgba(244,234,213,0.18) 0 0 0 1px, inset rgba(255,255,255,0.04) 0 1px 0;
}
.btn-ghost:hover { background: rgba(244,234,213,0.06); transform: translateY(-1px); }

.btn-ghost-light {
  background: rgba(244,234,213,0.08);
  color: var(--cream);
  padding: 12px 22px;
  box-shadow: inset rgba(244,234,213,0.16) 0 0 0 1px;
}
.btn-ghost-light:hover { background: rgba(244,234,213,0.14); transform: translateY(-1px); }

/* =========================================================
   Nav
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 0;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
.nav.scrolled {
  background: rgba(10,14,39,0.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: rgba(244,196,48,0.08) 0 1px 0 0;
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.nav-brand-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--saffron) 50%, var(--rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(244,234,213,0.85);
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--gold); }

/* Nav links — ghost-pill against the cosmic background, gold on hover */
.nav-link {
  position: relative;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(244,234,213,0.85);
  background: transparent;
  border: none;
  border-radius: 9999px;
  letter-spacing: -0.005em;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-display);
}
.nav-link:hover {
  color: var(--gold);
  background: rgba(244,196,48,0.06);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.2);
}
.nav-link-darshana {
  background: rgba(244,234,213,0.04);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.18);
}
.nav-link-darshana:hover {
  background: rgba(244,196,48,0.08);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.36);
}
.nav-link-hint {
  font-size: 11px;
  opacity: 0.5;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.nav-link-darshana:hover .nav-link-hint {
  opacity: 1;
  color: var(--gold);
}

/* Tooltip — SIBLING of link, NOT child. visibility:hidden ensures zero-render when off. */
.nav-link-wrap {
  position: relative;
  display: inline-flex;
}
.nav-tip {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.96);
  width: 320px;
  background: linear-gradient(160deg, var(--ink) 0%, #2a1840 100%);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(244,196,48,0.28);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.8,.2,1), visibility 0.22s ease;
  z-index: 200;
  text-align: left;
}
.nav-tip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--ink);
  box-shadow: -1px -1px 0 rgba(244,196,48,0.28);
}
.nav-tip::after {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
  background: transparent;
}
.nav-link-wrap:hover .nav-tip,
.nav-link-wrap:focus-within .nav-tip {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-tip-script {
  font-family: var(--font-script);
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.nav-tip-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--cream);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.nav-tip-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(244,234,213,0.7);
  margin-bottom: 8px;
}
.nav-tip-cta {
  font-size: 12px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .nav-link { padding: 7px 12px; font-size: 13px; }
  .nav-tip { width: 260px; left: auto; right: -24px; transform: translateY(-6px) scale(0.96); padding: 18px; }
  .nav-tip::before { left: auto; right: 32px; }
  .nav-link-wrap:hover .nav-tip,
  .nav-link-wrap:focus-within .nav-tip { transform: translateY(0) scale(1); }
}

/* Darśana hover tooltip — Vedic + Modern guidance for newcomers */
.nav-darshana {
  position: relative;
  padding: 8px 16px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  background: rgba(244,234,213,0.04);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.12);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.nav-darshana:hover {
  background: rgba(244,196,48,0.08);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.32);
}
.nav-darshana-tip {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  background: linear-gradient(160deg, var(--ink) 0%, #2a1840 100%);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(244,196,48,0.22);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.8,.2,1);
  z-index: 100;
}
.nav-darshana-tip::before {
  content: '';
  position: absolute;
  top: -6px; right: 30px;
  width: 12px; height: 12px;
  background: var(--ink);
  transform: rotate(45deg);
  box-shadow: -1px -1px 0 rgba(244,196,48,0.22);
}
.nav-darshana-tip::after {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
  background: transparent;
}
.nav-darshana:hover .nav-darshana-tip,
.nav-darshana:focus .nav-darshana-tip,
.nav-darshana-tip:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.tip-script {
  font-family: var(--font-script);
  font-size: 22px;
  color: var(--rose);
  line-height: 1;
  margin-bottom: 2px;
}
.tip-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--cream);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.tip-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(244,234,213,0.7);
  margin-bottom: 8px;
}
.tip-cta {
  font-size: 12px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  color: var(--midnight) !important;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(244,196,48,0.32);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  position: relative;
}
.nav-cta-script {
  font-family: var(--font-script);
  font-size: 16px;
  line-height: 1;
  color: var(--midnight);
  opacity: 0.85;
}
.nav-cta-text { color: var(--midnight); font-weight: 600; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(244,196,48,0.5); }
.nav-cta:hover, .nav-cta:hover * { color: var(--midnight) !important; }
.nav-cta svg { color: var(--midnight); transition: transform 0.25s ease; }
.nav-cta:hover svg { transform: translateX(3px); }

/* MEGA MENU — conversational nav with 3 columns + sub-items */
.nav-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.97);
  width: 820px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(160deg, var(--ink) 0%, #2a1840 100%);
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 32px 56px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(244,196,48,0.3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.8,.2,1), visibility 0.22s ease;
  z-index: 200;
}
.nav-mega::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--ink);
  box-shadow: -1px -1px 0 rgba(244,196,48,0.3);
}
.nav-mega::after {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
  background: transparent;
}
.nav-link-wrap:hover .nav-mega,
.nav-link-wrap:focus-within .nav-mega {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-mega-col { display: flex; flex-direction: column; gap: 6px; padding: 0; }
.nav-mega-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin-bottom: 12px;
  padding: 0 14px;
}
.nav-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-mega-item:hover {
  background: rgba(244,196,48,0.06);
  transform: translateX(2px);
}
.nav-mega-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(244,196,48,0.08);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.2);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.nav-mega-item:hover .nav-mega-icon {
  background: rgba(244,196,48,0.18);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.45);
}
.nav-mega-text { display: flex; flex-direction: column; gap: 5px; }
.nav-mega-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.nav-mega-sub {
  font-size: 12px;
  color: rgba(244,234,213,0.55);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.nav-mega-item:hover .nav-mega-title { color: var(--gold); }

/* MOBILE — hamburger pattern (Grabio-style): kebab + CTA always visible, mega = full dropdown */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  background: rgba(244,234,213,0.05);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.2);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.nav-burger:hover { background: rgba(244,196,48,0.1); }
.nav-burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-link-wrap { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-cta {
    padding: 8px 14px !important;
    font-size: 13px;
    gap: 5px;
  }
  .nav-cta-text { font-size: 13px; }
  .nav-cta svg { width: 12px; height: 12px; }
  /* Mega menu = full-width dropdown when burger toggles it via JS class */
  .nav-mega-mobile-open .nav-link-wrap {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-top: 12px;
  }
  .nav-mega-mobile-open .nav-mega {
    position: relative;
    top: 0; left: 0; right: 0;
    transform: none;
    width: calc(100vw - 24px);
    max-width: 480px;
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 4px;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .nav-mega-mobile-open .nav-mega::before { display: none; }
}
@media (max-width: 460px) {
  .nav-brand-text { font-size: 15px; }
  .nav-inner { padding: 0 14px; }
}

@media (max-width: 640px) {
  .nav-darshana { padding: 6px 12px; font-size: 13px; }
  .nav-darshana-tip { width: 280px; right: -16px; padding: 18px; }
}

@media (max-width: 720px) {
  .nav-links { gap: 14px; }
  .nav-links a:not(.nav-cta) { display: none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  background: var(--grad-cosmic);
  background-size: 200% 200%;
  color: var(--cream);
  padding: 180px 24px 140px;
  overflow: hidden;
  isolation: isolate;
  animation: cosmicShift 20s ease-in-out infinite;
}
@keyframes cosmicShift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

.hero::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, var(--midnight) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-bg-script {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-script);
  font-size: clamp(280px, 46vw, 680px);
  color: rgba(244,196,48,0.05);
  font-weight: 400;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  line-height: 1;
  text-shadow: 0 0 80px rgba(244,160,46,0.16);
}

/* Floating planet glyphs at Aditya's actual chart positions */
.hero-planets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-planet {
  position: absolute;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  opacity: 0.4;
  text-shadow: 0 0 12px var(--gold);
  animation: float 8s ease-in-out infinite;
}
.hero-planet.p1 { top: 18%; left: 12%; animation-delay: 0s; }
.hero-planet.p2 { top: 28%; left: 84%; animation-delay: 1.2s; }
.hero-planet.p3 { top: 62%; left: 8%;  animation-delay: 2.4s; }
.hero-planet.p4 { top: 72%; left: 88%; animation-delay: 3.6s; }
.hero-planet.p5 { top: 42%; left: 92%; animation-delay: 0.6s; }
.hero-planet.p6 { top: 86%; left: 16%; animation-delay: 4.8s; }
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  50% { transform: translateY(-12px) scale(1.06); opacity: 0.7; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(244,234,213,0.06);
  color: var(--cream);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0.005em;
  box-shadow: inset rgba(244,196,48,0.18) 0 0 0 1px;
  margin-bottom: 32px;
  backdrop-filter: blur(8px);
}
.hero-badge svg { color: var(--gold); }

.hero-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  color: var(--cream);
  padding: 0.04em 0;
  overflow: visible;
}
.hero-display em { display: inline-block; padding: 0.04em 0; }
.hero-em {
  display: block;
  font-style: italic;
  background: linear-gradient(135deg, var(--gold) 0%, var(--saffron) 40%, var(--rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-feature-settings: 'ss04', 'ss06', 'ss09';
}
.hero-sub {
  font-size: 20px;
  line-height: 1.55;
  color: rgba(244,234,213,0.78);
  max-width: 660px;
  margin: 0 auto 40px;
  letter-spacing: -0.01em;
}
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(244,234,213,0.6);
  letter-spacing: -0.005em;
  font-family: var(--font-ui);
}
.hero-trust-dot {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 12px var(--gold);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--gold); }
  50% { opacity: 0.5; box-shadow: 0 0 24px var(--gold); }
}

@media (max-width: 720px) {
  .hero { padding: 140px 20px 100px; }
  .hero-sub { font-size: 17px; }
}

/* =========================================================
   Stats row — 4 numbers row right after hero (CONTAINED, not edge-to-edge)
   ========================================================= */
.stats-row {
  background: linear-gradient(180deg, var(--ink), var(--slate-d));
  border-radius: var(--radius-card);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--max-w);
  margin: 32px auto;
  position: relative;
  z-index: 2;
  box-shadow: var(--ring-gold), var(--shadow-md);
  overflow: hidden;
}
.stats-row::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.4), transparent);
}
.stat-box {
  padding: 32px 16px;
  text-align: center;
  border-right: 1px solid rgba(244,196,48,0.08);
  position: relative;
  transition: background 0.3s ease;
}
.stat-box:last-child { border-right: none; }
.stat-box:hover { background: rgba(244,196,48,0.04); }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
  font-feature-settings: 'ss04';
}
.stat-zero .stat-num {
  background: linear-gradient(135deg, var(--rose), var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--cream-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
@media (max-width: 720px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat-box { padding: 24px 12px; border-right: 1px solid rgba(244,196,48,0.08); }
  .stat-box:nth-child(2n) { border-right: none; }
  .stat-box:nth-child(-n+2) { border-bottom: 1px solid rgba(244,196,48,0.08); }
}

/* =========================================================
   Privacy architecture grid (icon + content properly aligned)
   ========================================================= */
.section-privacy { background: transparent; }
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.privacy-card {
  background: linear-gradient(180deg, var(--ink), var(--slate-d));
  border-radius: var(--radius-card);
  padding: 40px 32px 36px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.privacy-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ring-gold), var(--shadow-lg);
}
.privacy-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.4), transparent);
}
.privacy-card::after {
  content: '';
  position: absolute;
  top: -60%; right: -40%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(244,196,48,0.06) 0%, transparent 70%);
  pointer-events: none;
}
/* Single big numbered marker per card — instead of small line-icon-in-square */
.privacy-icon {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 18px;
  font-feature-settings: 'ss04';
  letter-spacing: -0.04em;
  width: auto; height: auto;
  display: inline-block;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
}
.privacy-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin: 0 0 10px;
  line-height: 1.3;
}
.privacy-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(244,234,213,0.7);
  margin: 0;
}
.privacy-card p em { color: var(--gold); font-style: italic; }

/* =========================================================
   vs ChatGPT card
   ========================================================= */
.section-vs-gpt { background: transparent; }

/* Stage: before → after comparison */
.vsg-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: 48px;
}
.vsg-col {
  background: linear-gradient(180deg, var(--slate-d) 0%, var(--ink) 100%);
  border-radius: var(--radius-card);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
}
.vsg-before {
  box-shadow: inset 0 0 0 1px rgba(244,234,213,0.08);
  opacity: 0.92;
}
.vsg-after {
  box-shadow: var(--ring-gold), var(--shadow-md);
  position: relative;
}
.vsg-after::before {
  content: '';
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.vsg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.vsg-tag {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream-d);
}
.vsg-tag-after { color: var(--gold); }
.vsg-verdict {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
}
.vsg-verdict-bad { color: var(--cream-mute); }
.vsg-verdict-good {
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vsg-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.vsg-bubble {
  font-size: 15px;
  line-height: 1.6;
  border-radius: 14px;
  padding: 13px 16px;
}
.vsg-ask {
  align-self: flex-end;
  max-width: 88%;
  background: rgba(244,196,48,0.10);
  color: var(--cream);
  border: 1px solid rgba(244,196,48,0.18);
  border-bottom-right-radius: 4px;
}
.vsg-reply {
  align-self: flex-start;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(244,234,213,0.09);
  border-bottom-left-radius: 4px;
  color: rgba(244,234,213,0.82);
}
.vsg-reply p { margin: 0 0 12px; }
.vsg-bad {
  color: #e88a8a;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: rgba(232,138,138,0.5);
}
.vsg-good { color: var(--gold); font-weight: 600; }
.vsg-out {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--cream-d);
  background: rgba(10,14,39,0.55);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 12px;
  white-space: pre;
  overflow-x: auto;
}
.vsg-flag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #cf8a8a;
  padding-top: 10px;
  border-top: 1px solid rgba(244,234,213,0.08);
}
.vsg-flag svg { flex: none; margin-top: 1px; }
.vsg-flag-ok { color: var(--gold-deep); }
.vsg-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  color: var(--gold);
}
.vsg-arrow-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--cream-d);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.02em;
}
.vsg-coda {
  text-align: center;
  max-width: 680px;
  margin: 36px auto 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(244,234,213,0.66);
}
.vsg-coda strong { color: var(--gold); font-weight: 500; }
@media (max-width: 860px) {
  .vsg-stage { grid-template-columns: 1fr; gap: 16px; }
  .vsg-arrow { flex-direction: row; padding: 4px 0; }
  .vsg-arrow svg { transform: rotate(90deg); }
  .vsg-arrow-label { writing-mode: horizontal-tb; transform: none; }
}

/* =========================================================
   Founder chart strip (proof block)
   ========================================================= */
.founder-strip {
  background: var(--ink);
  border-top: 1px solid rgba(244,196,48,0.12);
  border-bottom: 1px solid rgba(244,196,48,0.12);
  padding: 24px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--cream-d);
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
}
.founder-strip strong {
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.founder-strip em { font-style: italic; color: var(--rose); }

/* =========================================================
   Marquee
   ========================================================= */
.marquee {
  background: var(--ink);
  padding: 20px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(244,196,48,0.08);
  border-bottom: 1px solid rgba(244,196,48,0.08);
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }

.marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  animation: marquee 40s linear infinite;
  width: max-content;
  white-space: nowrap;
}
.marquee-item {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cream-d);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 56px;
}
.marquee-item.gold {
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marquee-item.script {
  font-family: var(--font-script);
  color: var(--rose);
}
.marquee-dot {
  display: inline-block;
  vertical-align: middle;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
  flex-shrink: 0;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================================================
   Section base
   ========================================================= */
.section {
  padding: var(--section-gap) 24px;
  position: relative;
}
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.section-inner.narrow { max-width: 920px; }

.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-family: var(--font-ui);
}

.section-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--cream);
  margin: 0 0 28px;
  padding: 0.04em 0;
  overflow: visible;
}
.section-display em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold), var(--saffron) 60%, var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-feature-settings: 'ss04','ss06';
  display: inline-block;
  padding: 0.04em 0;
}
.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--cream);
  margin: 0 0 18px;
  padding: 0.04em 0;
  overflow: visible;
}
.section-heading em { display: inline-block; padding: 0.04em 0; }
.never-quote { padding: 0.05em 0; line-height: 1.22; }
.never-quote em { display: inline-block; padding: 0.04em 0; }
.gps-title em { display: inline-block; padding: 0.05em 0; line-height: 1.18; }
.section-heading em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(244,234,213,0.72);
  max-width: 720px;
  margin: 0 0 56px;
  letter-spacing: -0.01em;
}

/* =========================================================
   Pillars (Philosophy)
   ========================================================= */
.section-philosophy { background: transparent; }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 56px;
}
.pillar {
  background: linear-gradient(180deg, var(--ink) 0%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.pillar::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.pillar:hover::before { opacity: 1; }
.pillar-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  font-feature-settings: 'ss04';
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.22;
  color: var(--cream);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.pillar p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244,234,213,0.65);
  margin: 0;
  letter-spacing: -0.005em;
}
.pillar p em { color: var(--gold); font-style: italic; }
.pillar p strong { color: var(--cream); font-weight: 600; }

/* =========================================================
   Why AI / Predestined / Never blocks (long-form prose)
   ========================================================= */
.section-whyai, .section-predestined { background: transparent; }

.prose {
  font-size: 18px;
  line-height: 1.72;
  color: rgba(244,234,213,0.78);
  letter-spacing: -0.005em;
  max-width: 720px;
  margin: 32px auto 0;
}
.prose p { margin: 0 0 22px; }
.prose p strong { color: var(--gold); font-weight: 600; }
.prose p em { color: var(--rose); font-style: italic; }

/* =========================================================
   Predestined / free-will section
   ========================================================= */
.pre-head { text-align: center; max-width: 760px; margin: 0 auto; }
.pre-eyebrow {
  font-size: 12px; font-weight: 500; color: var(--gold);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px;
}
.pre-quote {
  font-family: var(--font-display);
  font-weight: 400; font-style: italic;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.16; letter-spacing: -0.028em;
  color: var(--cream); margin: 0 0 22px; padding: 0.04em 0;
}
.pre-quote em {
  display: inline-block; padding: 0.04em 0.32em 0.04em 0;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pre-lead {
  font-size: 18px; line-height: 1.6; color: rgba(244,234,213,0.78);
  max-width: 660px; margin: 0 auto;
}
.pre-lead strong { color: var(--cream); font-weight: 600; }
.pre-lead em { color: var(--gold); font-style: italic; }

.pre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 48px 0 0;
  align-items: stretch;
}
.pre-engines {
  background: linear-gradient(180deg, var(--ink), var(--slate-d));
  border-radius: var(--radius-card);
  padding: 34px 32px 28px;
  box-shadow: var(--ring-gold), var(--shadow-md);
  display: flex; flex-direction: column; gap: 16px;
}
.pre-engines-label {
  font-family: var(--font-display); font-style: italic;
  font-size: 15px; color: var(--cream-mute); margin-bottom: 4px;
}
.pre-engine-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 14px;
}
.pre-engine { display: flex; align-items: center; gap: 16px; }
.pre-engine-glyph {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script); font-size: 22px; color: var(--gold);
  background: rgba(244,196,48,0.08); box-shadow: var(--ring-gold);
}
.pre-engine-text { display: flex; flex-direction: column; }
.pre-engine-text b { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--cream); letter-spacing: -0.01em; }
.pre-engine-text span { font-size: 13.5px; color: rgba(244,234,213,0.6); }
.pre-engines-note { margin: 10px 0 0; font-size: 14px; color: rgba(244,234,213,0.62); }
.pre-engines-note em { color: var(--gold); font-style: italic; }

.pre-forecast {
  background: linear-gradient(160deg, #11162e 0%, #2a1840 70%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  padding: 34px 32px 28px;
  box-shadow: var(--ring-gold-strong), var(--shadow-lg);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.pre-forecast-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-mute); margin-bottom: 12px;
}
.pre-forecast-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(244,196,48,0.18); animation: prePulse 2.4s ease-in-out infinite;
}
@keyframes prePulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.pre-forecast-line {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px);
  color: var(--cream); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 14px;
}
.pre-forecast-line b { color: var(--gold); font-weight: 500; }
.pre-forecast-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--gold); margin: 2px 0 14px;
}
.pre-forecast-arrow span { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--cream-mute); }
.pre-choices { display: flex; flex-direction: column; gap: 10px; }
.pre-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(244,196,48,0.16);
  font-size: 15px; color: var(--cream);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pre-choice:hover { background: rgba(244,196,48,0.07); border-color: rgba(244,196,48,0.4); transform: translateX(3px); }
.pre-choice svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.pre-forecast-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(244,196,48,0.14);
  font-size: 15px; color: rgba(244,234,213,0.7);
}
.pre-forecast-foot strong { color: var(--gold); font-weight: 600; }
.pre-coda {
  text-align: center; margin: 44px auto 0; max-width: 640px;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(20px, 2.6vw, 26px); color: var(--gold); letter-spacing: -0.015em;
}
@media (max-width: 820px) {
  .pre-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pre-engines, .pre-forecast { padding: 26px 22px; }
}

/* =========================================================
   How / Tools
   ========================================================= */
.section-how { background: transparent; }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.step {
  background: linear-gradient(180deg, var(--ink) 0%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}
.step-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
  font-feature-settings: 'ss04';
  line-height: 1;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 12px;
}
.step p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244,234,213,0.65);
  margin: 0;
}

/* =========================================================
   Tools grid
   ========================================================= */
.section-tools { background: transparent; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 48px;
}
.tool-card {
  background: rgba(26,31,58,0.6);
  border-radius: 16px;
  padding: 22px;
  box-shadow: inset rgba(244,196,48,0.10) 0 0 0 1px;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease, background 0.3s ease;
}
.tool-card:hover {
  transform: translateY(-3px);
  background: rgba(42,46,74,0.8);
  box-shadow: inset rgba(244,196,48,0.3) 0 0 0 1px, var(--shadow-md);
}
.tool-icon {
  font-family: var(--font-display);
  font-size: 28px;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
  line-height: 1;
}
.tool-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin: 0 0 6px;
}
.tool-card p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244,234,213,0.55);
  margin: 0;
}
.tool-note {
  text-align: center;
  font-size: 14px;
  color: rgba(244,234,213,0.55);
  margin-top: 36px;
  font-style: italic;
  font-family: var(--font-display);
}

/* =========================================================
   Install / Signup — sacred container
   ========================================================= */
.section-install { background: transparent; padding-bottom: 140px; }
.install-card {
  background: linear-gradient(160deg, var(--ink) 0%, #2d1b4e 60%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  padding: 64px 52px;
  box-shadow: var(--ring-gold), var(--shadow-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.install-script-bg {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-script);
  font-size: 280px;
  color: rgba(244,196,48,0.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}
.install-card > *:not(.install-script-bg) { position: relative; z-index: 2; }
.install-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin: 0 0 18px;
  padding: 0.04em 0;
}
.install-h2 em {
  font-style: italic;
  display: inline-block;
  padding: 0.04em 0;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.install-lede {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(244,234,213,0.7);
  max-width: 540px;
  margin: 0 auto 32px;
  letter-spacing: -0.005em;
}
.install-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(244,196,48,0.10) 0%, transparent 50%);
  pointer-events: none;
  animation: pulseHalo 6s ease-in-out infinite;
}
@keyframes pulseHalo {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.7; }
}
.install-card > * { position: relative; z-index: 2; }

.signup-form {
  display: flex;
  gap: 8px;
  margin: 36px 0 18px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.signup-form input {
  flex: 1;
  padding: 16px 20px;
  border: 1px solid rgba(244,196,48,0.24);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--cream);
  background: rgba(10,14,39,0.5);
  letter-spacing: -0.005em;
}
.signup-form input::placeholder { color: rgba(244,234,213,0.4); }
.signup-form input:focus { outline: 2px solid var(--gold); outline-offset: -2px; background: rgba(10,14,39,0.7); }
.signup-form .btn-cta { flex-shrink: 0; }

.install-trust {
  font-size: 13px;
  color: rgba(244,234,213,0.55);
  max-width: 520px;
  margin: 18px auto 0;
}
.install-trust a { color: var(--rose); border-bottom: 1px solid currentColor; }

.signup-result {
  margin-top: 32px;
  padding: 24px;
  background: rgba(10,14,39,0.6);
  border-radius: var(--radius-card);
  text-align: left;
  font-size: 14px;
  color: var(--cream);
  border: 1px solid rgba(244,196,48,0.2);
}
.signup-result.success { border-left: 3px solid var(--gold); }
.signup-result.error { border-left: 3px solid var(--ember); }
.signup-result a { color: var(--gold); border-bottom: 1px solid currentColor; }
.signup-result code {
  display: block;
  background: var(--midnight);
  color: var(--gold);
  padding: 14px;
  border-radius: var(--radius-card-sm);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  margin-top: 14px;
  word-break: break-all;
  border: 1px solid rgba(244,196,48,0.2);
}

@media (max-width: 600px) {
  .install-card { padding: 44px 28px; }
  .signup-form { flex-direction: column; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  background: var(--ink);
  color: rgba(244,234,213,0.55);
  padding: 80px 24px 40px;
  border-top: 1px solid rgba(244,196,48,0.12);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
}
.footer-brand { color: var(--cream); }
.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  margin-bottom: 16px;
}
.footer-mark span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-brand p {
  font-size: 14px;
  color: rgba(244,234,213,0.5);
  max-width: 320px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col h5 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(244,234,213,0.55);
  padding: 6px 0;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 40px;
  margin-top: 32px;
  border-top: 1px solid rgba(244,196,48,0.1);
  font-size: 12px;
  color: rgba(244,234,213,0.4);
  letter-spacing: -0.005em;
}
.footer-disclaimer { font-style: italic; }

@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   For Me? — non-astrologer reassurance section
   ========================================================= */
.section-forme { background: transparent; padding: 100px 0; }

.forme-header { text-align: center; margin-bottom: 56px; }
.forme-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 16px;
}
.forme-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  font-variation-settings: 'opsz' 72, 'SOFT' 80;
  color: var(--cream);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.forme-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

.forme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.forme-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(244,196,48,0.1);
  border-radius: 20px;
  padding: 36px 32px;
  transition: border-color 0.3s, background 0.3s;
}
.forme-card:hover {
  border-color: rgba(244,196,48,0.25);
  background: rgba(244,196,48,0.04);
}
.forme-card-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--gold);
  background: rgba(244,196,48,0.07);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.18);
  transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.forme-card-icon svg { width: 24px; height: 24px; }
.forme-card:hover .forme-card-icon {
  background: rgba(244,196,48,0.12);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.32);
  color: var(--gold-soft);
}
.forme-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  font-variation-settings: 'opsz' 18, 'SOFT' 60;
  color: var(--cream);
  margin: 0 0 12px;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.forme-card-body {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.7;
  margin: 0;
}
.forme-card-body em { color: var(--gold); font-style: italic; }

/* Placeholder shown only when img has no real source yet */
.forme-media-placeholder {
  margin: 8px auto 40px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border: 1px dashed rgba(244,196,48,0.2);
  border-radius: var(--radius-card);
  background:
    repeating-linear-gradient(135deg, rgba(244,196,48,0.015) 0 14px, transparent 14px 28px);
}
.forme-media-img[data-placeholder] { display: none; }
.forme-media-img:not([data-placeholder]) {
  display: block;
  width: 100%;
  max-width: 760px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(244,196,48,0.15);
  margin: 0 auto 10px;
}
.forme-media-label {
  font-size: 0.8rem;
  color: rgba(244,234,213,0.4);
  font-style: italic;
  letter-spacing: 0.04em;
}

.forme-footer { text-align: center; }
.forme-note {
  display: inline-block;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.45);
  background: rgba(244,196,48,0.05);
  border: 1px solid rgba(244,196,48,0.12);
  border-radius: 40px;
  padding: 14px 28px;
  line-height: 1.6;
  max-width: 600px;
}
.forme-note strong { color: rgba(255,255,255,0.75); }

/* =========================================================
   Vision section — letter from founder (real voice, not abstract)
   ========================================================= */
.section-vision { background: transparent; }
.vision-letter {
  background: linear-gradient(135deg, rgba(244,196,48,0.05) 0%, rgba(42,24,64,0.4) 50%, rgba(244,196,48,0.03) 100%);
  border: 1px solid rgba(244,196,48,0.14);
  border-radius: 28px;
  padding: 56px 64px;
  position: relative;
  overflow: hidden;
}
.vision-letter::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.5), transparent);
}
.vision-greet {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 24px;
  letter-spacing: -0.005em;
}
.vision-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin: 0 0 32px;
  padding: 0.04em 0;
}
.vision-h2 em {
  font-style: italic;
  display: inline-block;
  padding: 0.04em 0;
  background: linear-gradient(135deg, var(--gold), var(--saffron), var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vision-prose p {
  font-size: 17px;
  line-height: 1.72;
  color: rgba(244,234,213,0.78);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.vision-prose p strong { color: var(--gold); font-weight: 500; }
.vision-prose p em { color: var(--rose); font-style: italic; }
.vision-pivot {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 22px !important;
  color: var(--cream) !important;
  padding: 8px 0 12px !important;
}
.vision-sign {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(244,196,48,0.15);
  display: flex;
  align-items: center;
  gap: 18px;
}
.vision-photo-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(244,196,48,0.4), 0 0 0 5px rgba(244,196,48,0.08);
  background: linear-gradient(160deg, var(--slate-m), var(--slate-d));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vision-photo-mono {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.vision-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.vision-sign-meta { display: flex; flex-direction: column; gap: 4px; }
.vision-sign-name {
  font-family: var(--font-hand);
  font-size: 36px;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.vision-sign-role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--cream-mute);
  letter-spacing: -0.005em;
}
@media (max-width: 768px) {
  .forme-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vision-h2 { font-size: 28px; }
  .vision-pivot { font-size: 19px !important; }
  .vision-letter { padding: 36px 28px; }
  .vision-sign { flex-direction: column; align-items: flex-start; gap: 4px; }
  .forme-card { padding: 28px 22px; }
}

/* =========================================================
   Lineage / Why Parashara
   ========================================================= */
.section-lineage { background: transparent; }
.lineage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.lineage-card {
  background: linear-gradient(180deg, var(--ink) 0%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.lineage-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
  font-feature-settings: 'ss04';
}
.lineage-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin: 0 0 10px;
}
.lineage-card p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244,234,213,0.6);
  margin: 0;
}
.lineage-note {
  text-align: center;
  font-size: 15px;
  color: rgba(244,234,213,0.6);
  margin-top: 36px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
}

/* =========================================================
   AI CAN / CANNOT
   ========================================================= */
.section-aican { background: transparent; }

/* Split layout — two stacked halves with divider */
.aican-split {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aican-side-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.aican-side-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aican-icon-can {
  background: linear-gradient(135deg, rgba(244,196,48,0.18), rgba(244,196,48,0.06));
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.35);
  color: var(--gold);
}
.aican-icon-cannot {
  background: linear-gradient(135deg, rgba(244,196,48,0.08), rgba(244,196,48,0.02));
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.18);
  color: var(--cream-mute);
}
.aican-side-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin: 0;
}
.aican-side-title em { color: var(--gold); }

/* Card grid — 2 columns of individual interactive cards */
.aican-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.aican-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--ink) 0%, var(--slate-d) 100%);
  border-radius: 16px;
  box-shadow: var(--ring-gold);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(244,234,213,0.8);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, background 0.25s ease;
  cursor: default;
}
.aican-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ring-gold-strong), 0 12px 32px rgba(0,0,0,0.3);
  background: linear-gradient(180deg, #161c38 0%, var(--slate-d) 100%);
}
.aican-card em { color: var(--gold); font-style: italic; }

/* Markers */
.aican-marker {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  margin-top: 1px;
}
.can-marker {
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2311162e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px rgba(244,196,48,0.35);
}
.cannot-marker {
  background: rgba(244,196,48,0.06);
  border: 1.5px solid rgba(244,196,48,0.25);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89a78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Divider between CAN and CANNOT */
.aican-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 0;
}
.aican-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.25), transparent);
}
.aican-divider-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--cream-mute);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

/* Coda */
.aican-coda {
  text-align: center;
  font-size: 17px;
  color: rgba(244,234,213,0.7);
  margin-top: 40px;
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
.aican-coda em { color: var(--gold); font-style: italic; }

@media (max-width: 720px) {
  .aican-cards { grid-template-columns: 1fr; }
  .aican-side-title { font-size: 19px; }
}

/* =========================================================
   GPS metaphor card
   ========================================================= */
.section-gps { background: transparent; padding: 80px 24px; }
.gps-card {
  background: linear-gradient(160deg, var(--ink) 0%, #2d1b4e 60%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  padding: 56px 48px;
  box-shadow: var(--ring-gold), var(--shadow-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gps-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(244,196,48,0.10) 0%, transparent 50%);
  pointer-events: none;
}
.gps-card > * { position: relative; z-index: 2; }
.gps-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(244,196,48,0.08);
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  box-shadow: var(--ring-gold);
}
.gps-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin: 0 0 28px;
  padding: 0.05em 0;
}
.gps-title em { padding-right: 0.05em; }
.gps-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold), var(--saffron), var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gps-body {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(244,234,213,0.78);
  max-width: 580px;
  margin: 0 auto 18px;
  letter-spacing: -0.005em;
}
.gps-body strong { color: var(--gold); font-weight: 600; }
.gps-body em { color: var(--rose); font-style: italic; }
@media (max-width: 600px) { .gps-card { padding: 36px 24px; } }

/* =========================================================
   Viral reel callout — Vedic + futuristic, decorative corners
   ========================================================= */
.section-viral { background: transparent; padding: 80px 24px; }
.viral-card {
  background: linear-gradient(160deg, var(--ink) 0%, #2a1840 60%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  padding: 64px 56px;
  box-shadow: var(--ring-gold), var(--shadow-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.viral-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(244,196,48,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255,107,53,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.viral-card > :not(.viral-corner) { position: relative; z-index: 2; }
.viral-corner {
  position: absolute !important;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--gold);
  opacity: 0.4;
  z-index: 3;
  pointer-events: none;
}
/* Only top-left + bottom-right — restraint, not clutter */
.viral-corner-tl { top: 18px; left: 22px; }
.viral-corner-br { bottom: 18px; right: 22px; }
.viral-corner-tr, .viral-corner-bl { display: none !important; }
.viral-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.viral-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin: 0 0 28px;
  padding: 0.05em 0;
  text-align: center;
}
.viral-quote em {
  font-style: italic;
  display: inline-block;
  padding: 0.04em 0;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.viral-strike {
  position: relative;
  color: var(--ember);
  font-style: italic;
  display: inline-block;
  padding: 0 4px;
}
.viral-strike::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  top: 52%;
  height: 2px;
  background: var(--ember);
  transform: rotate(-1.5deg);
  opacity: 0.85;
}
.viral-body {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(244,234,213,0.78);
  max-width: 620px;
  margin: 0 auto 18px;
  letter-spacing: -0.005em;
  text-align: center;
}
.viral-body strong { color: var(--cream); font-weight: 500; }
.viral-body em { color: var(--rose); font-style: italic; }
.viral-bottom { font-size: 17px; color: rgba(244,234,213,0.92); margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(244,196,48,0.12); }
.viral-bottom strong { color: var(--gold); font-weight: 500; }
@media (max-width: 600px) {
  .viral-card { padding: 44px 24px; }
  .viral-corner { width: 16px; height: 16px; font-size: 8px; }
  .viral-corner-tl, .viral-corner-tr { top: 12px; }
  .viral-corner-bl, .viral-corner-br { bottom: 12px; }
}

/* Social mockup cards */
.social-mockups {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 44px;
  flex-wrap: wrap;
}
.smock {
  width: 340px;
  border-radius: 16px;
  overflow: hidden;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}
/* X / Twitter */
.smock-x {
  background: #000;
  border: 1px solid #2f3336;
  padding: 20px;
}
.smock-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.smock-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900;
  flex-shrink: 0;
}
.smock-avatar-x { background: #000; color: #fff; border: 1px solid #555; font-family: serif; }
.smock-meta { display: flex; flex-direction: column; gap: 2px; }
.smock-name { font-weight: 700; color: #e7e9ea; font-size: 0.82rem; }
.smock-handle { color: #71767b; font-size: 0.78rem; }
.smock-body { color: #e7e9ea; line-height: 1.55; margin-bottom: 14px; }
.smock-strike-text { color: #1d9bf0; font-size: 0.78rem; }
.smock-footer { display: flex; gap: 14px; color: #71767b; font-size: 0.78rem; padding-bottom: 14px; border-bottom: 1px solid #2f3336; margin-bottom: 10px; }
.smock-debunk { font-size: 0.75rem; color: var(--gold); opacity: 0.85; font-style: italic; line-height: 1.55; margin-top: auto; }

/* Instagram reel */
.smock-ig {
  background: #000;
  border: 1px solid #333;
}
.smock-ig-screen {
  position: relative;
  flex: 1;
  min-height: 210px;
  background: linear-gradient(160deg, #1a0025 0%, #0d001a 50%, #000520 100%);
  overflow: hidden;
}
.smock-ig-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
  z-index: 2;
}
.smock-ig-avatar {
  font-size: 1.8rem;
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.smock-ig-text {
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 600;
}
.smock-ig-bars {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; gap: 3px;
  height: 60px; opacity: 0.15;
}
.smock-ig-bar {
  flex: 1;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
}
.smock-ig-meta {
  display: flex; gap: 12px; justify-content: center;
  padding: 10px 14px;
  color: #e4e4e4;
  font-size: 0.75rem;
  border-bottom: 1px solid #222;
}
.smock-ig .smock-debunk {
  padding: 10px 14px 14px;
  margin-top: auto;
  font-size: 0.75rem; color: var(--gold); opacity: 0.85; font-style: italic; line-height: 1.55;
}

/* =========================================================
   Viral mockup carousel
   ========================================================= */
.viral-carousel-wrap { margin-top: 56px; }
.viral-carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.viral-carousel-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.viral-carousel-label em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.viral-carousel-nav { display: flex; gap: 10px; flex: none; }
.vcar-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244,196,48,0.3);
  background: rgba(244,196,48,0.05);
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.vcar-arrow:hover { background: rgba(244,196,48,0.14); transform: translateY(-1px); }
.vcar-arrow:disabled { opacity: 0.3; cursor: default; transform: none; }
.viral-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 20px;
  /* bleed to viewport edges so the row feels larger than the text column */
  padding-left: max(24px, calc((100vw - var(--max-w)) / 2));
  padding-right: max(24px, calc((100vw - var(--max-w)) / 2));
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.viral-carousel::-webkit-scrollbar { display: none; }
.viral-carousel .smock,
.viral-carousel .feedcard {
  flex: 0 0 auto;
}

/* Unified viral post card — one consistent format for X + Reels */
.feedcard {
  width: 326px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #161a30 0%, #0e1124 100%);
  border: 1px solid rgba(244,234,213,0.09);
  border-radius: 16px;
  padding: 24px 22px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.feedcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 56px rgba(0,0,0,0.6);
  border-color: rgba(244,196,48,0.32);
}
.feedcard-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.feedcard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.feedcard-avatar[data-net="x"] { background: #000; border: 1px solid #3a3a3a; color: #fff; }
.feedcard-avatar[data-net="ig"] { background: linear-gradient(135deg, #f09433, #dc2743 55%, #bc1888); color: #fff; }
.feedcard-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.feedcard-name { font-weight: 700; color: #f0ebe0; font-size: 0.92rem; line-height: 1.2; }
.feedcard-handle { color: #8b90a4; font-size: 0.8rem; line-height: 1.2; }
.feedcard-net {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 7px;
}
.feedcard-net-x { background: rgba(255,255,255,0.08); color: #d6d9e3; }
.feedcard-net-ig { background: rgba(220,39,67,0.16); color: #ff90a6; }
.feedcard-body {
  color: #e8e8ef;
  font-size: 0.9rem;
  line-height: 1.58;
  margin: 0 0 15px;
  font-family: var(--font-ui);
}
.feedcard-body b { color: #fff; font-weight: 700; }
.feedcard-stats {
  display: flex;
  gap: 18px;
  color: #8b90a4;
  font-size: 0.8rem;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244,234,213,0.09);
  margin-bottom: 14px;
}
.feedcard-debunk {
  margin: auto 0 0;
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--gold);
  padding-top: 13px;
}
.feedcard-debunk em { color: var(--cream); font-style: italic; }

/* =========================================================
   Ambient drifting orbs (CSS only, page-level Vedic-futuristic feel)
   ========================================================= */
.ambient-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
  opacity: 0.18;
}
.ambient-orb-1 {
  top: 30%; left: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--saffron) 0%, transparent 70%);
  animation: orb-drift-1 22s ease-in-out infinite;
}
.ambient-orb-2 {
  top: 60%; right: -15%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--rose) 0%, transparent 70%);
  animation: orb-drift-2 28s ease-in-out infinite;
}
.ambient-orb-3 {
  bottom: -20%; left: 30%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
  animation: orb-drift-3 32s ease-in-out infinite;
}
@keyframes orb-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.1); } }
@keyframes orb-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-70px, -50px) scale(0.9); } }
@keyframes orb-drift-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, -60px) scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .ambient-orb { animation: none !important; }
}

/* =========================================================
   Cards — add corner ornaments (Vedic accent)
   ========================================================= */
.pillar { overflow: hidden; }
.pillar::after {
  content: '◆';
  position: absolute;
  top: 18px; right: 18px;
  font-size: 10px;
  color: var(--gold);
  opacity: 0.35;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.pillar:hover::after { opacity: 1; transform: rotate(45deg); }
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.4), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.pillar:hover::before { opacity: 1; }

.lineage-card { position: relative; overflow: hidden; }
.lineage-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.32), transparent);
}

.tool-card { position: relative; overflow: hidden; }
.tool-card::after {
  content: '◇';
  position: absolute;
  top: 12px; right: 14px;
  font-size: 10px;
  color: var(--gold);
  opacity: 0.25;
}

/* =========================================================
   What's different (THEM vs US)
   ========================================================= */
.section-different { background: transparent; }
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.diff-col {
  background: linear-gradient(180deg, var(--ink) 0%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}
.diff-them { border-top: 3px solid var(--ember); }
.diff-us   { border-top: 3px solid var(--gold); }
.diff-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--cream);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}
.diff-them .diff-eyebrow { color: var(--ember); }
.diff-us .diff-eyebrow   { color: var(--gold); }
.diff-col ul { list-style: none; padding: 0; margin: 0; }
.diff-col li {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244,234,213,0.78);
  padding: 12px 0 12px 22px;
  border-top: 1px solid rgba(244,196,48,0.06);
  position: relative;
  letter-spacing: -0.005em;
}
.diff-col li:first-child { border-top: none; padding-top: 4px; }
.diff-col li strong { color: var(--cream); font-weight: 600; }
.diff-them li::before {
  content: '✕';
  position: absolute; left: 0; top: 12px;
  color: var(--ember);
  font-weight: 600;
  font-size: 13px;
}
.diff-us li::before {
  content: '◆';
  position: absolute; left: 0; top: 12px;
  color: var(--gold);
  font-size: 11px;
}
.diff-coda {
  text-align: center;
  font-size: 17px;
  color: rgba(244,234,213,0.7);
  margin-top: 36px;
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
.diff-coda strong { color: var(--gold); font-weight: 600; }
@media (max-width: 760px) { .diff-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Sample output — terminal-styled
   ========================================================= */
.section-sample { background: transparent; }
.sample-output {
  margin-top: 40px;
  background: #050a1f;
  border-radius: var(--radius-card);
  border: 1px solid rgba(244,196,48,0.15);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.sample-bar {
  background: linear-gradient(180deg, #0a0e27, #050a1f);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(244,196,48,0.1);
}
.sample-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(244,234,213,0.15);
  display: inline-block;
}
.sample-dot:nth-child(1) { background: rgba(255,107,53,0.5); }
.sample-dot:nth-child(2) { background: rgba(244,196,48,0.5); }
.sample-dot:nth-child(3) { background: rgba(122,228,107,0.5); }
.sample-label {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(244,234,213,0.5);
  letter-spacing: -0.005em;
}
.sample-code {
  margin: 0;
  padding: 28px 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(244,234,213,0.85);
  white-space: pre;
  overflow-x: auto;
}
.sample-c { color: rgba(244,234,213,0.4); font-style: italic; }
.sample-k { color: var(--rose); font-weight: 500; }
.sample-v { color: var(--gold); }
.sample-y { color: #c8e87a; }
.sample-em { color: var(--gold); font-style: italic; }
@media (max-width: 700px) {
  .sample-code { padding: 18px; font-size: 11.5px; }
}

/* =========================================================
   Comparison table — detailed
   ========================================================= */
.section-compare { background: transparent; }

/* =========================================================
   Compare tabs — replaces the old monolithic table
   ========================================================= */
.cmp-tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.cmp-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 36px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
  min-width: 160px;
}
.cmp-tab:hover { border-color: rgba(244,196,48,0.3); background: rgba(244,196,48,0.04); }
.cmp-tab.active {
  border-color: rgba(244,196,48,0.5);
  background: rgba(244,196,48,0.07);
}
.cmp-tab-featured {
  border-color: rgba(244,196,48,0.3);
}
.cmp-tab-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #0a0e27;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.cmp-tab-name {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}
.cmp-tab-price {
  font-size: 0.85rem;
  color: var(--gold);
  opacity: 0.8;
}

/* Panels */
.cmp-panels { position: relative; }
.cmp-panel { display: none; }
.cmp-panel.active { display: block; }

.cmp-panel-hero {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 32px 24px;
  margin-bottom: 28px;
}
.cmp-panel-hero-gold {
  background: rgba(244,196,48,0.06);
  border-color: rgba(244,196,48,0.2);
}
.cmp-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.cmp-hero-stat:last-child { border-right: none; }
.cmp-hero-num {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.cmp-hero-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cmp-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 28px;
}
.cmp-group-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.65;
  padding: 16px 0 6px;
}
.cmp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.93rem;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.02);
  transition: background 0.2s;
}
.cmp-row:hover { background: rgba(255,255,255,0.04); }
.cmp-row.cmp-yes::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
.cmp-row.cmp-no::before { content: '—'; color: rgba(255,255,255,0.2); flex-shrink: 0; }
.cmp-row.cmp-no { color: rgba(255,255,255,0.35); }

.cmp-cta {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid rgba(244,196,48,0.35);
  border-radius: 40px;
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s;
}
.cmp-cta:hover { background: rgba(244,196,48,0.1); border-color: var(--gold); }
.cmp-cta-gold {
  background: var(--gold);
  color: #0a0e27;
  border-color: var(--gold);
}
.cmp-cta-gold:hover { background: #e8b82a; border-color: #e8b82a; }

/* Anchor chips — replaced the gold-bordered text box with a 4-card grid */
.anchor-chips { margin-top: 40px; }
.anchor-chips-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-mute);
  text-align: center;
  margin-bottom: 18px;
}
.anchor-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.anchor-chip {
  background: rgba(244,234,213,0.03);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.10);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.anchor-chip:hover {
  background: rgba(244,234,213,0.05);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.18);
}
.anchor-chip-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  color: rgba(244,234,213,0.75);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  font-feature-settings: 'ss04';
}
.anchor-chip-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--cream-mute);
  margin-left: 2px;
}
.anchor-chip-label {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(244,234,213,0.6);
  letter-spacing: -0.005em;
}
.anchor-chip-us {
  background: linear-gradient(160deg, rgba(244,196,48,0.10), rgba(244,160,46,0.04));
  box-shadow: inset 0 0 0 1.5px rgba(244,196,48,0.4);
}
.anchor-chip-us .anchor-chip-num {
  background: linear-gradient(135deg, var(--gold), var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.anchor-chip-us .anchor-chip-label { color: rgba(244,234,213,0.85); }
.compare-section-row td {
  background: var(--slate-d) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  border-bottom: 2px solid rgba(244,196,48,0.18) !important;
  text-align: left !important;
}
.compare-table th.row-label,
.compare-table td.row-label { text-align: left; }

/* =========================================================
   Footer extras (mission line)
   ========================================================= */
.footer-mission {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(244,234,213,0.62);
  max-width: 540px;
  margin: 0 auto 36px;
}
.footer-meta {
  font-size: 11px;
  color: rgba(244,234,213,0.4);
  letter-spacing: 0.02em;
  margin-top: 6px;
}
.compare-table-wrap {
  margin-top: 40px;
  overflow-x: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(180deg, var(--ink) 0%, var(--slate-d) 100%);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--cream);
  min-width: 720px;
}
.compare-table th, .compare-table td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid rgba(244,196,48,0.08);
  border-right: 1px solid rgba(244,196,48,0.04);
}
.compare-table th:first-child, .compare-table td:first-child {
  text-align: left;
  color: rgba(244,234,213,0.85);
  font-weight: 500;
}
.compare-table th {
  background: var(--slate-d);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--cream);
  letter-spacing: -0.015em;
  border-bottom: 2px solid rgba(244,196,48,0.18);
}
.compare-table th span {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--cream-mute);
  margin-top: 2px;
}
.compare-table th.featured {
  color: var(--gold);
  background: linear-gradient(180deg, var(--slate-d), #2d1b4e);
}
.compare-table td.featured {
  background: rgba(244,196,48,0.05);
  color: var(--gold);
  font-weight: 600;
}
.compare-table tr:hover td { background: rgba(244,196,48,0.04); }
.compare-table tr:last-child td { border-bottom: none; }

/* =========================================================
   GLOWING DIVIDER — full-width gold gradient line + glow
   ========================================================= */
.glow-divider {
  width: 100%;
  max-width: 720px;
  height: 1px;
  margin: 48px auto 0;
  background: linear-gradient(90deg, transparent 0%, rgba(244,196,48,0.6) 50%, transparent 100%);
  box-shadow: 0 0 24px rgba(244,196,48,0.5), 0 0 48px rgba(244,196,48,0.3);
  position: relative;
}
.glow-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--gold), 0 0 40px rgba(244,196,48,0.6);
  animation: orbitPulse 2.4s ease-in-out infinite;
}

/* =========================================================
   NAVAGRAHA ORBIT — 9 grahas rotating around the brand mark (BIGGER)
   ========================================================= */
.navagraha-orbit {
  position: relative;
  width: 420px;
  height: 420px;
  margin: 32px auto 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navagraha-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,196,48,0.18) 0%, rgba(244,196,48,0.04) 50%, transparent 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 0 32px rgba(244,196,48,0.3), inset 0 0 0 1px rgba(244,196,48,0.4);
  animation: coreGlow 3s ease-in-out infinite;
}
@keyframes coreGlow {
  0%, 100% { box-shadow: 0 0 32px rgba(244,196,48,0.3), inset 0 0 0 1px rgba(244,196,48,0.4); }
  50% { box-shadow: 0 0 48px rgba(244,196,48,0.5), inset 0 0 0 1px rgba(244,196,48,0.6); }
}
.navagraha-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(244,196,48,0.18);
  border-radius: 50%;
  animation-name: navaSpin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.navagraha-ring-1 { inset: 32px;  animation-duration: 38s; }
.navagraha-ring-2 { inset: 84px;  animation-duration: 28s; animation-direction: reverse; }
.navagraha-ring-3 { inset: 132px; animation-duration: 22s; }
@keyframes navaSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.navagraha {
  position: absolute;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(244,196,48,0.08);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.5), 0 0 12px rgba(244,196,48,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  cursor: help;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.navagraha:hover {
  background: rgba(244,196,48,0.18);
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px rgba(244,196,48,0.4);
  transform: scale(1.15);
}
/* Counter-rotate so glyphs stay upright */
.navagraha-ring-1 .navagraha { animation: navaCounter 32s linear infinite; }
.navagraha-ring-2 .navagraha { animation: navaCounter 24s linear infinite reverse; }
.navagraha-ring-3 .navagraha { animation: navaCounter 18s linear infinite; }
@keyframes navaCounter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.navagraha-ring-2 .navagraha { animation-direction: normal; } /* counter-rotate fix for reversed ring */
@keyframes navaCounterRev { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Position 3 per ring at 0°, 120°, 240° */
.navagraha-ring-1 .graha-sun     { top: -19px; left: 50%; transform: translateX(-50%); }
.navagraha-ring-1 .graha-moon    { top: 50%;   left: 100%; transform: translate(-50%, -50%); }
.navagraha-ring-1 .graha-mars    { top: 50%;   left: 0;   transform: translate(-50%, -50%); }
.navagraha-ring-2 .graha-mercury { top: -19px; left: 50%; transform: translateX(-50%); }
.navagraha-ring-2 .graha-jupiter { top: 100%;  left: 25%; transform: translate(-50%, -50%); }
.navagraha-ring-2 .graha-venus   { top: 100%;  left: 75%; transform: translate(-50%, -50%); }
.navagraha-ring-3 .graha-saturn  { top: -19px; left: 50%; transform: translateX(-50%); }
.navagraha-ring-3 .graha-rahu    { top: 100%;  left: 30%; transform: translate(-50%, -50%); }
.navagraha-ring-3 .graha-ketu    { top: 100%;  left: 70%; transform: translate(-50%, -50%); }

/* Sanskrit-term hover tooltip (gold outline, premium sleek) */
.navagraha[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--cream);
  background: var(--ink);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.35), 0 8px 20px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.navagraha:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 600px) {
  .navagraha-orbit { width: 280px; height: 280px; margin: 20px auto 28px; }
  .navagraha-ring-1 { inset: 22px; }
  .navagraha-ring-2 { inset: 56px; }
  .navagraha-ring-3 { inset: 92px; }
  .navagraha { width: 30px; height: 30px; font-size: 14px; }
  .navagraha-ring-1 .graha-sun, .navagraha-ring-2 .graha-mercury, .navagraha-ring-3 .graha-saturn { top: -15px; }
}

.footer-mark-name-only {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 28px;
}

/* =========================================================
   GENERIC SANSKRIT TERM TOOLTIP — for inline classical terms
   Use: <span data-sk="meaning">Sanskrit term</span>
   ========================================================= */
[data-sk] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted rgba(244,196,48,0.5);
}
[data-sk]::after {
  content: attr(data-sk);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--cream);
  background: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.4), 0 12px 24px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 50;
  max-width: 280px;
  white-space: normal;
  text-align: center;
}
[data-sk]:hover::after,
[data-sk]:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   Warm letter-style footer — personal, not corporate
   ========================================================= */
.footer {
  background: linear-gradient(180deg, var(--midnight) 0%, var(--ink) 100%);
  padding: 96px 24px 48px;
  border-top: 1px solid rgba(244,196,48,0.08);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.4), transparent);
}
.footer-inner-warm {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.footer-letter {
  text-align: left;
  background: linear-gradient(180deg, rgba(244,196,48,0.03), transparent);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  margin-bottom: 56px;
  border-left: 2px solid rgba(244,196,48,0.25);
}
.footer-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.footer-letter-body {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(244,234,213,0.78);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.footer-letter-body em { color: var(--rose); font-style: italic; }
.footer-letter-sign {
  margin: 24px 0 4px;
  font-size: 17px;
  color: rgba(244,234,213,0.6);
}
.footer-letter-email {
  margin: 0;
  font-size: 14px;
}
.footer-letter-email a {
  color: var(--gold);
  border-bottom: 1px solid rgba(244,196,48,0.3);
}
.footer-letter-email a:hover { border-bottom-color: var(--gold); }
.footer-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.3), transparent);
  margin: 0 auto 32px;
}
.footer-mark-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.footer-mark-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gold), var(--saffron), var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-links-warm {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-bottom: 32px;
}
.footer-links-warm a {
  font-size: 13.5px;
  color: rgba(244,234,213,0.55);
  padding: 6px 0;
  transition: color 0.2s ease;
  letter-spacing: -0.005em;
}
.footer-links-warm a:hover { color: var(--gold); }
.footer-hand {
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--gold);
  line-height: 1;
}
.footer-meta {
  font-style: italic;
  font-size: 12px;
  color: rgba(244,234,213,0.38);
  letter-spacing: -0.005em;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Footer 3-column conversational grid (mirrors mega menu) */
.footer-mega {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  text-align: left;
  max-width: 720px;
  margin: 40px auto 36px;
  padding: 32px 4px 0;
  border-top: 1px solid rgba(244,196,48,0.1);
}
.footer-mega-col { display: flex; flex-direction: column; gap: 6px; }
.footer-mega-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11.5px;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.footer-mega-col a {
  font-family: var(--font-display);
  font-size: 14.5px;
  color: rgba(244,234,213,0.72);
  letter-spacing: -0.005em;
  padding: 4px 0;
  transition: color 0.2s ease, transform 0.2s ease;
  line-height: 1.4;
}
.footer-mega-col a:hover { color: var(--gold); transform: translateX(2px); }
.footer-bottom-nav {
  border-top: 1px solid rgba(244,196,48,0.1);
  padding-top: 28px;
}
@media (max-width: 720px) {
  .footer-mega { grid-template-columns: 1fr; gap: 24px; padding: 28px 8px 0; }
}

/* =========================================================
   FULL-PAGE AMBIENT ORBIT — planets revolving across entire site
   ========================================================= */
.cosmic-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  /* Keep ambient decoration OUT of the central reading column — felt, not noticed.
     Fully masked through the middle, faint only toward the far edges. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 9%, transparent 27%, transparent 73%, #000 91%, #000 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 9%, transparent 27%, transparent 73%, #000 91%, #000 100%);
}
.cosmic-orbit {
  position: absolute;
  border: 1px dashed rgba(244,196,48,0.08);
  border-radius: 50%;
  animation: cosmicSpin linear infinite;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(244,196,48,0.02);
}
.cosmic-orbit-1 { top: -20%; left: -10%; width: 700px; height: 700px; animation-duration: 220s; }
.cosmic-orbit-2 { top: 10%;  right: -25%; width: 1000px; height: 1000px; animation-duration: 320s; animation-direction: reverse; }
.cosmic-orbit-3 { top: 50%;  left: 30%; width: 800px; height: 800px; animation-duration: 280s; }
.cosmic-orbit-4 { bottom: -20%; right: 10%; width: 600px; height: 600px; animation-duration: 200s; animation-direction: reverse; }
@keyframes cosmicSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.cosmic-planet {
  position: absolute;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  opacity: 0.13;
  text-shadow: 0 0 10px rgba(244,196,48,0.18);
  filter: none;
}
.cosmic-orbit-1 .cosmic-planet { top: -11px; left: 50%; transform: translateX(-50%); animation: cosmicCounter 220s linear infinite; }
.cosmic-orbit-2 .cosmic-planet { top: -11px; left: 50%; transform: translateX(-50%); animation: cosmicCounter 320s linear infinite reverse; }
.cosmic-orbit-3 .cosmic-planet { top: -11px; left: 50%; transform: translateX(-50%); animation: cosmicCounter 280s linear infinite; }
.cosmic-orbit-4 .cosmic-planet { top: -11px; left: 50%; transform: translateX(-50%); animation: cosmicCounter 200s linear infinite reverse; }
@keyframes cosmicCounter { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(-360deg); } }

/* Twinkling deep-space stars (denser than the existing body::after starfield) */
.cosmic-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* Bright gold stars */
    radial-gradient(2px 2px at 5% 12%, rgba(244,196,48,0.8) 50%, transparent),
    radial-gradient(2px 2px at 88% 30%, rgba(244,196,48,0.85) 50%, transparent),
    radial-gradient(2px 2px at 82% 60%, rgba(244,196,48,0.75) 50%, transparent),
    radial-gradient(2px 2px at 45% 45%, rgba(244,196,48,0.7) 50%, transparent),
    radial-gradient(2px 2px at 15% 72%, rgba(244,196,48,0.65) 50%, transparent),
    /* Medium cream stars */
    radial-gradient(1.5px 1.5px at 55% 22%, rgba(244,196,48,0.6) 50%, transparent),
    radial-gradient(1.5px 1.5px at 48% 78%, rgba(244,234,213,0.6) 50%, transparent),
    radial-gradient(1.5px 1.5px at 12% 88%, rgba(244,234,213,0.6) 50%, transparent),
    radial-gradient(1.5px 1.5px at 76% 42%, rgba(244,234,213,0.55) 50%, transparent),
    radial-gradient(1.5px 1.5px at 34% 56%, rgba(244,196,48,0.5) 50%, transparent),
    radial-gradient(1.5px 1.5px at 92% 85%, rgba(244,234,213,0.55) 50%, transparent),
    radial-gradient(1.5px 1.5px at 62% 8%, rgba(244,196,48,0.55) 50%, transparent),
    /* Small dim stars — fill the field */
    radial-gradient(1px 1px at 18% 28%, rgba(244,234,213,0.5) 50%, transparent),
    radial-gradient(1px 1px at 32% 8%, rgba(244,234,213,0.45) 50%, transparent),
    radial-gradient(1px 1px at 72% 14%, rgba(244,234,213,0.5) 50%, transparent),
    radial-gradient(1px 1px at 8% 52%, rgba(244,234,213,0.4) 50%, transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(244,196,48,0.45) 50%, transparent),
    radial-gradient(1px 1px at 65% 90%, rgba(244,196,48,0.4) 50%, transparent),
    radial-gradient(1px 1px at 95% 75%, rgba(244,234,213,0.45) 50%, transparent),
    radial-gradient(1px 1px at 3% 38%, rgba(244,234,213,0.35) 50%, transparent),
    radial-gradient(1px 1px at 42% 96%, rgba(244,196,48,0.4) 50%, transparent),
    radial-gradient(1px 1px at 58% 34%, rgba(244,234,213,0.35) 50%, transparent),
    radial-gradient(1px 1px at 86% 48%, rgba(244,234,213,0.4) 50%, transparent),
    radial-gradient(1px 1px at 22% 16%, rgba(244,196,48,0.35) 50%, transparent),
    radial-gradient(1px 1px at 68% 72%, rgba(244,234,213,0.35) 50%, transparent),
    radial-gradient(1px 1px at 50% 5%, rgba(244,196,48,0.4) 50%, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: starsTwinkle 6s ease-in-out infinite alternate;
  opacity: 0.45;
  /* Same center-column mask: keep starfield to the edges, never over text */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 10%, transparent 26%, transparent 74%, #000 90%, #000 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 10%, transparent 26%, transparent 74%, #000 90%, #000 100%);
}
@keyframes starsTwinkle {
  0% { opacity: 0.45; }
  100% { opacity: 0.28; }
}
@media (max-width: 600px) {
  .footer { padding: 72px 18px 36px; }
  .footer-letter { padding: 28px 22px; }
  .footer-letter-body { font-size: 15px; }
}

/* =========================================================
   AMBIENT — rotating planet, sparkle field, gold cursor trail
   ========================================================= */

/* Rotating orbit decoration — appears in section breaks */
.orbit-deco {
  width: 64px; height: 64px;
  margin: 0 auto;
  position: relative;
  animation: orbitSpin 18s linear infinite;
}
.orbit-deco::before, .orbit-deco::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(244,196,48,0.18);
  border-radius: 50%;
}
.orbit-deco::before { inset: 0; }
.orbit-deco::after  { inset: 12px; border-color: rgba(244,196,48,0.32); }
.orbit-deco-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--gold), 0 0 36px rgba(244,196,48,0.6);
  animation: orbitPulse 2.4s ease-in-out infinite;
}
.orbit-deco-planet {
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold);
}
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbitPulse { 0%,100% { opacity: 1; box-shadow: 0 0 20px var(--gold), 0 0 36px rgba(244,196,48,0.6); } 50% { opacity: 0.6; box-shadow: 0 0 12px var(--gold), 0 0 24px rgba(244,196,48,0.4); } }

/* Star sparkle clusters — add to any section */
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sparkle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold), 0 0 16px rgba(244,196,48,0.4);
  animation: sparkleTwinkle 4s ease-in-out infinite;
  opacity: 0;
}
.sparkle.s1 { top: 12%; left: 8%;  animation-delay: 0s; }
.sparkle.s2 { top: 24%; right: 14%; animation-delay: 1.1s; width: 2px; height: 2px; }
.sparkle.s3 { top: 60%; left: 18%; animation-delay: 2.3s; width: 4px; height: 4px; }
.sparkle.s4 { bottom: 18%; right: 8%; animation-delay: 0.7s; }
.sparkle.s5 { top: 48%; right: 32%; animation-delay: 1.8s; width: 2px; height: 2px; }
.sparkle.s6 { bottom: 28%; left: 38%; animation-delay: 3.2s; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Gold cursor trail — soft following dot, desktop only */
.kj-cursor {
  position: fixed;
  width: 16px; height: 16px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  filter: blur(4px);
  opacity: 0.6;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  mix-blend-mode: screen;
  display: none;
}
@media (pointer: fine) {
  .kj-cursor { display: block; }
}
.kj-cursor.kj-cursor-hover { width: 32px; height: 32px; opacity: 0.9; }

/* Section section-break — small orbit + sparkles between sections */
.section-break {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 0;
  position: relative;
}

/* =========================================================
   Reveal-on-scroll — DEFAULT VISIBLE; only hidden if JS attaches .js-on
   This guarantees the page works with zero JavaScript.
   ========================================================= */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1);
}
html.js-on .reveal:not(.in) {
  opacity: 0;
  transform: translateY(20px);
}
html.js-on .reveal.in {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Hero entrance — pure CSS, plays once on load (no JS dep)
   ========================================================= */
@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: none; }
}
.hero-badge   { animation: heroFadeUp 0.8s 0.05s ease-out both; }
.hero-display { animation: heroFadeUp 1.0s 0.20s cubic-bezier(.2,.7,.2,1) both; }
.hero-sub     { animation: heroFadeUp 0.9s 0.45s ease-out both; }
.hero-ctas    { animation: heroFadeUp 0.7s 0.65s ease-out both; }
.hero-trust   { animation: heroFadeUp 0.6s 0.85s ease-out both; }
.nav-inner    { animation: heroFadeUp 0.7s 0.10s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .marquee-track, body::after, .btn-cta, .install-card::before,
  .hero-badge, .hero-display, .hero-sub, .hero-ctas, .hero-trust, .nav-inner { animation: none !important; }
}

/* =========================================================
   Signup modal — opens after email submit
   ========================================================= */
.kj-modal-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.kj-modal-root.kj-on {
  pointer-events: auto;
  opacity: 1;
}
.kj-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 25, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.kj-modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -45%) scale(0.96);
  width: min(560px, calc(100vw - 32px));
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(160deg, var(--ink) 0%, #2d1b4e 70%, var(--slate-d) 100%);
  border-radius: var(--radius-card);
  box-shadow: var(--ring-gold-strong), rgba(0,0,0,0.7) 0 28px 64px -10px;
  padding: 44px 40px 36px;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
  text-align: center;
}
.kj-modal-root.kj-on .kj-modal { transform: translate(-50%, -50%) scale(1); }
.kj-modal::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.kj-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: transparent;
  border: none;
  color: rgba(244,234,213,0.5);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
}
.kj-modal-close:hover { color: var(--gold); background: rgba(244,196,48,0.06); }

.kj-modal-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.kj-modal-eyebrow.kj-err { color: var(--ember); }

.kj-modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--cream);
  margin: 0 0 14px;
}

.kj-modal-lede {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244,234,213,0.7);
  margin: 0 0 28px;
}
.kj-modal-lede strong { color: var(--cream); font-weight: 600; }
.kj-modal-lede a { color: var(--gold); border-bottom: 1px solid currentColor; }

.kj-modal-cta {
  width: 100%;
  justify-content: center;
  font-size: 16px;
  padding: 16px 28px;
  margin-bottom: 6px;
}

.kj-modal-divider {
  position: relative;
  margin: 28px 0 24px;
  color: rgba(244,234,213,0.5);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kj-modal-divider span {
  background: var(--ink);
  padding: 0 14px;
  position: relative;
  z-index: 2;
}
.kj-modal-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(244,196,48,0.12);
  z-index: 1;
}

.kj-modal-field {
  text-align: left;
  margin-bottom: 16px;
}
.kj-modal-field label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.kj-modal-codebox {
  display: flex;
  align-items: stretch;
  background: #050a1f;
  border-radius: 8px;
  border: 1px solid rgba(244,196,48,0.15);
  overflow: hidden;
}
.kj-modal-codebox code {
  flex: 1;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cream);
  word-break: break-all;
  line-height: 1.5;
}
.kj-modal-copy {
  flex-shrink: 0;
  padding: 0 16px;
  background: rgba(244,196,48,0.06);
  border: none;
  border-left: 1px solid rgba(244,196,48,0.18);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}
.kj-modal-copy:hover { background: rgba(244,196,48,0.14); }
.kj-modal-copy.kj-copied { background: rgba(122,228,107,0.18); color: #c8e87a; }

.kj-modal-help {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(244,234,213,0.04);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244,234,213,0.65);
  text-align: left;
}
.kj-modal-help strong { color: var(--gold); font-weight: 600; }

.kj-modal-foot {
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: rgba(244,234,213,0.5);
}
.kj-modal-foot em { color: var(--rose); }

/* Compact modal fields */
.kj-modal-field input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(244,196,48,0.24);
  border-radius: var(--radius-card-sm);
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--cream);
  background: rgba(10,14,39,0.5);
  letter-spacing: -0.005em;
}
.kj-modal-field input::placeholder { color: rgba(244,234,213,0.4); }
.kj-modal-field input:focus {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  background: rgba(10,14,39,0.7);
}
.kj-modal-turnstile { display: flex; justify-content: center; margin: 4px 0 14px; }
.kj-modal #signup-result { margin-top: 18px; }

/* Compact closing install band */
.install-card--compact { padding: 52px 44px; }
.install-card--compact .install-lede { margin: 0 auto 28px; }
.install-get { margin: 0 auto; }

@media (max-width: 600px) {
  .kj-modal { padding: 36px 22px 28px; }
  .kj-modal-title { font-size: 22px; }
}


.section-pricing { background: transparent; }

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px;
  margin-top: 48px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.price-card {
  background: linear-gradient(180deg, var(--ink) 0%, var(--slate-d, #161b34) 100%);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* hover removed — it was hiding the gold ring on the featured card */
.price-card-featured {
  background: linear-gradient(180deg, var(--ink) 0%, #2d1b4e 100%);
  box-shadow: var(--ring-gold-strong, 0 0 0 1px rgba(244,196,48,0.35)), var(--shadow-lg);
}
.price-card-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  background: radial-gradient(ellipse at top, rgba(244,196,48,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.price-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--saffron, #f97316));
  color: var(--midnight, #0a0e27);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(244,196,48,0.4);
}
.price-tier {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 4px;
}
.price-tier-tag {
  font-family: var(--font-ui, sans-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--cream-mute, rgba(244,234,213,0.55));
  margin-left: 6px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 14px 0 4px;
  color: var(--cream);
}
.price-currency {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--gold);
  margin-right: 1px;
}
.price-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(135deg, var(--cream), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-period {
  font-size: 14px;
  color: var(--cream-mute, rgba(244,234,213,0.55));
  margin-left: 4px;
}
.price-sub {
  font-size: 13px;
  color: var(--cream-mute, rgba(244,234,213,0.55));
  margin-bottom: 28px;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  flex-grow: 1;
}
.price-features li {
  font-size: 14px;
  color: rgba(244,234,213,0.78);
  padding: 10px 0 10px 26px;
  position: relative;
  border-top: 1px solid rgba(244,196,48,0.08);
}
.price-features li:first-child { border-top: none; padding-top: 4px; }
.price-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, var(--gold), var(--saffron, #f97316));
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2311162e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}
.price-cta { width: 100%; justify-content: center; }
.price-note {
  text-align: center;
  font-size: 13px;
  color: rgba(244,234,213,0.5);
  margin-top: 36px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* =========================================================
   Mobile tightening — same message at smaller scale
   ========================================================= */
@media (max-width: 720px) {
  :root { --section-gap: 72px; }
  .section { padding: 72px 18px; }
  .nav { padding: 12px 0; }
  .nav-inner { padding: 0 18px; }
  .nav-brand-text { font-size: 17px; }
  .nav-cta { padding: 7px 14px !important; font-size: 13px !important; }
  .hero { padding: 120px 18px 80px; }
  .hero-badge { font-size: 12px; padding: 7px 14px; }
  .hero-display { font-size: clamp(34px, 9vw, 44px); }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn-cta, .hero-ctas .btn-ghost { width: 100%; justify-content: center; }
  .hero-trust { font-size: 12px; line-height: 1.4; }
  .founder-strip { font-size: 12px; padding: 18px 20px; line-height: 1.5; }
  .marquee { padding: 14px 0; }
  .marquee-item { font-size: 17px; }
  .section-display { font-size: clamp(30px, 7vw, 40px); }
  .section-heading { font-size: clamp(26px, 6.5vw, 36px); }
  .section-lede { font-size: 16px; margin-bottom: 32px; }
  .section-eyebrow { font-size: 11px; margin-bottom: 16px; }
  .pillars { gap: 14px; }
  .pillar { padding: 28px 24px; }
  .pillar h3 { font-size: 20px; }
  .lineage-grid { gap: 12px; }
  .lineage-card { padding: 24px 20px; }
  .lineage-num { font-size: 44px; }
  .aican-cards { gap: 10px; }
  .aican-card { padding: 14px 16px; }
  .isnot-grid, .diff-grid { gap: 14px; }
  .isnot-col, .diff-col { padding: 28px 22px; }
  .never-card { padding: 36px 22px; }
  .never-quote { font-size: clamp(22px, 6vw, 30px); }
  .tool-grid { gap: 10px; }
  .tool-card { padding: 18px; }
  .price-grid { gap: 16px; grid-template-columns: 1fr !important; max-width: 460px; }
  .price-card { padding: 26px 22px; }
  .price-num { font-size: 38px; }
  .install-card { padding: 36px 22px; }
  .signup-form { flex-direction: column; }
  .compare-table { font-size: 12px; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
  .footer { padding: 56px 18px 32px; }
  .footer-mark-name { font-size: 22px; }
  .footer-blessing { font-size: 18px; }
  .footer-links-warm { gap: 4px 18px; }
  .sample-code { font-size: 11px; padding: 16px; }
  .sample-bar { padding: 10px 14px; }
  .sample-label { font-size: 10.5px; margin-left: 8px; }
}
@media (max-width: 480px) {
  .price-grid { grid-template-columns: 1fr !important; }
  .lineage-grid { grid-template-columns: repeat(2, 1fr); }
  .lineage-card { padding: 20px 14px; }
  .lineage-num { font-size: 36px; }
}


/* install-section-cro-overrides */
.section-install { padding-bottom: 72px; }
.install-card { padding: 36px 44px; }
.install-script-bg { font-size: 160px; top: -10px; opacity: 0.6; }
.install-lede { font-size: 15px; margin-bottom: 0; }
.signup-row { display: flex; gap: 8px; margin: 20px auto 0; max-width: 520px; }
.signup-row input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(244,196,48,0.24);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--cream);
  background: rgba(10,14,39,0.5);
  min-width: 0;
}
.signup-row input::placeholder { color: rgba(244,234,213,0.4); }
.signup-row input:focus { outline: 2px solid var(--gold); outline-offset: -2px; background: rgba(10,14,39,0.7); }
.signup-cta-full { display: block; width: 100%; max-width: 520px; margin: 10px auto 0; text-align: center; justify-content: center; }
.signup-turnstile { max-width: 520px; margin: 8px auto 0; }
.install-checks {
  list-style: none;
  margin: 16px auto 0;
  padding: 0;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}
.install-checks li {
  font-size: 13px;
  color: rgba(244,234,213,0.72);
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}
.install-checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* footer-letter trim — shorter now */
.footer-letter { padding: 24px 28px; margin-bottom: 36px; }
.footer-letter-body:last-child { margin-bottom: 0; }


/* ============================================================
   MOBILE NAV — full-screen overlay redesign
   ============================================================ */
.nav-mobile-cta { display: none; }

@media (max-width: 820px) {
  /* Hide desktop CTA from header */
  .nav-cta { display: none !important; }

  /* The nav-link-wrap becomes a full-screen overlay when open */
  .nav-link-wrap.nav-mega-mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    inset: 0;
    height: 100dvh;
    background: rgba(3, 5, 22, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 998;
    padding: 76px 28px 100px;
    overflow-y: auto;
  }

  /* Hide the 'What Makes Us Different' trigger button — show items directly */
  .nav-link-wrap.nav-mega-mobile-open .nav-link-darshana { display: none !important; }

  /* Show all nav-mega items directly (no extra click needed) */
  .nav-link-wrap.nav-mega-mobile-open .nav-mega {
    display: flex !important;
    position: static !important;
    opacity: 1 !important;
    pointer-events: all !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-direction: column !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* Flatten nav-mega-col into one list */
  .nav-link-wrap.nav-mega-mobile-open .nav-mega-col {
    display: flex;
    flex-direction: column;
  }

  /* Style each nav item row */
  .nav-link-wrap.nav-mega-mobile-open .nav-mega-item {
    padding: 13px 0;
    border-bottom: 1px solid rgba(244,234,213,0.07);
    font-size: 15px;
    gap: 12px;
    display: flex;
    align-items: center;
  }

  /* Eyebrow section labels */
  .nav-link-wrap.nav-mega-mobile-open .nav-mega-eyebrow {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--gold);
    opacity: 0.7;
    padding: 18px 0 4px;
  }

  /* Hide sub-text to keep overlay clean */
  .nav-link-wrap.nav-mega-mobile-open .nav-mega-sub { display: none; }

  /* Gold CTA pinned to bottom of flex overlay */
  .nav-link-wrap.nav-mega-mobile-open .nav-mobile-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 14px 32px;
    background: var(--gold);
    color: var(--midnight) !important;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-radius: var(--radius-pill);
    text-align: center;
    flex-shrink: 0;
  }
}

/* ============================================================
   AICAN SECTION — card redesign
   ============================================================ */
.aican-side .aican-cards { gap: 6px; }

/* CAN side — gold border + checkmark */
.aican-can .aican-card {
  border-left: 3px solid rgba(244,196,48,0.55);
  background: rgba(244,196,48,0.045);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.aican-can .aican-marker {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.aican-can .can-marker::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
}

/* CANNOT side — red border + cross */
.aican-cannot .aican-card {
  border-left: 3px solid rgba(200,70,70,0.55);
  background: rgba(200,70,70,0.04);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
  color: rgba(244,234,213,0.75);
}
.aican-cannot .aican-marker {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.aican-cannot .cannot-marker::before {
  content: '×';
  color: rgba(200,80,80,0.9);
  font-weight: 700;
  font-size: 15px;
}

/* ============================================================
   DIFF-GRID — visual distinction (them vs us)
   ============================================================ */
.diff-col.diff-them {
  border-top: 3px solid rgba(200,70,70,0.5);
}
.diff-col.diff-them .diff-eyebrow {
  color: rgba(200,70,70,0.85);
}
.diff-col.diff-us {
  border-top: 3px solid rgba(244,196,48,0.5);
}
.diff-col.diff-us .diff-eyebrow {
  color: var(--gold);
}


/* ============================================================
   MOBILE NAV v3 — nav-open on header.nav (no nested fixed bug)
   ============================================================ */
@media (max-width: 820px) {

  /* Expand header to full screen */
  .nav.nav-open {
    height: 100dvh;
    overflow: hidden;
    background: #0a0e27 !important;  /* SOLID — no alpha bleed, no backdrop-filter */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* CRITICAL: .nav-inner has a transform, which makes IT the containing block for
     the absolutely-positioned .nav-link-wrap (only ~40px tall) → menu items got
     clipped. Remove the transform while open so the panel sizes to the full-height nav. */
  .nav.nav-open .nav-inner { transform: none !important; }
  .nav.nav-open .nav-link-wrap { height: 100dvh !important; }

  /* Show nav-link-wrap: absolute inside full-height .nav, clears the brand/burger row */
  .nav.nav-open .nav-link-wrap {
    display: flex !important;
    flex-direction: column;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 72px 24px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }

  /* Hide the dropdown trigger */
  .nav.nav-open .nav-link-darshana { display: none !important; }

  /* Show nav-mega directly — kill desktop animation */
  .nav.nav-open .nav-mega {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    opacity: 1 !important;
    pointer-events: all !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    gap: 0 !important;
  }
  /* FORCE every overlay element visible — defensive against any inherited hide
     (opacity/visibility/transform from the desktop dropdown state) */
  .nav.nav-open .nav-link-wrap,
  .nav.nav-open .nav-mega,
  .nav.nav-open .nav-mega-col,
  .nav.nav-open .nav-mega-item,
  .nav.nav-open .nav-mega-text,
  .nav.nav-open .nav-mega-title,
  .nav.nav-open .nav-mega-icon,
  .nav.nav-open .nav-mega-eyebrow {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .nav.nav-open .nav-mega-text  { display: flex !important; }
  .nav.nav-open .nav-mega-icon  { display: flex !important; }
  .nav.nav-open .nav-mega-title { color: var(--cream) !important; font-size: 15px !important; line-height: 1.3 !important; }

  .nav.nav-open .nav-mega::before,
  .nav.nav-open .nav-mega::after { display: none !important; }

  /* Flatten columns */
  .nav.nav-open .nav-mega-col {
    display: flex;
    flex-direction: column;
  }

  /* Section eyebrows */
  .nav.nav-open .nav-mega-eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244,196,48,0.7);
    padding: 16px 0 2px;
    margin: 0;
  }

  /* Each nav link row */
  .nav.nav-open .nav-mega-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(244,234,213,0.07);
    font-size: 15px;
    color: rgba(244,234,213,0.9) !important;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(244,196,48,0.15);
  }
  .nav.nav-open .nav-mega-item:active {
    background: rgba(244,196,48,0.06);
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Hide sub-descriptions to save space */
  .nav.nav-open .nav-mega-sub { display: none !important; }

  /* Gold CTA pinned to bottom via margin-top: auto */
  .nav.nav-open .nav-mobile-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 14px 32px;
    background: var(--gold);
    color: var(--midnight) !important;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  /* Ensure burger stays on top of the overlay */
  .nav.nav-open .nav-burger {
    position: relative;
    z-index: 10;
  }

  /* Keep nav-brand on top of the overlay */
  .nav.nav-open .nav-brand {
    position: relative;
    z-index: 10;
  }

  /* Hide desktop CTA when overlay is open */
  .nav.nav-open .nav-cta { display: none !important; }
}

/* =========================================================
   POLISH PASS — 2026-06 · signature chart motif, rhythm, spacing
   ========================================================= */

/* --- Hero signature infographic: North-Indian birth-chart diamond --- */
.hero-chart {
  position: absolute;
  top: 50%;
  right: -7%;
  transform: translateY(-50%);
  width: clamp(340px, 40vw, 580px);
  aspect-ratio: 1 / 1;
  color: var(--gold);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: heroChartFade 1.6s 0.4s ease-out forwards;
}
.hero-chart svg { width: 100%; height: 100%; overflow: visible; }
.hero-chart .hc-frame  { stroke-width: 1.4; opacity: 0.85; }
.hero-chart .hc-line   { stroke-width: 0.9; opacity: 0.55; }
.hero-chart .hc-diamond{ stroke-width: 1;   opacity: 0.7; }
.hero-chart .hc-glyphs text { font-size: 24px; opacity: 0.8; }
@keyframes heroChartFade { from { opacity: 0; } to { opacity: 0.18; } }
@media (prefers-reduced-motion: reduce) {
  .hero-chart { animation: none; opacity: 0.16; }
}
@media (max-width: 900px) {
  .hero-chart { right: -22%; width: 70vw; }
  @keyframes heroChartFade { from { opacity: 0; } to { opacity: 0.1; } }
}
@media (max-width: 600px) {
  .hero-chart { display: none; }
}

/* --- Section rhythm: alternating quiet panels break the monotony --- */
.section-lineage,
.section-different,
.section-how,
.section-privacy,
.section-pricing {
  background:
    linear-gradient(180deg,
      rgba(18,22,45,0) 0%,
      rgba(18,22,45,0.62) 7%,
      rgba(18,22,45,0.62) 93%,
      rgba(18,22,45,0) 100%);
}
.section-lineage::after,
.section-different::after,
.section-how::after,
.section-privacy::after,
.section-pricing::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 92%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,48,0.16), transparent);
}

/* --- Consistency: unify card radii --- */
.forme-card { border-radius: var(--radius-card); }

/* --- Stats band: more designed, less flat --- */
.stat-num {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-warm));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-box { transition: background 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1); }
.stat-box:hover { transform: translateY(-3px); }
.stat-zero .stat-num { -webkit-text-fill-color: var(--gold); }

/* --- Install / signup: calmer watermark + tighter rhythm --- */
.install-script-bg { opacity: 0.22 !important; }
.install-card { padding: 48px 48px 44px !important; }
.install-h2 { margin-top: 6px; }
.install-lede { margin: 0 auto 22px !important; max-width: 460px; }
.signup-row { margin-top: 18px !important; }
#signup-form { margin-top: 4px; }
.signup-result { margin-top: 14px; }

/* --- Micro-interactions: consistent, gentle lift + glow --- */
.forme-card, .lineage-card, .tool-card, .privacy-card, .pillar, .price-card, .step {
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1), border-color 0.4s ease, background 0.4s ease, box-shadow 0.5s ease;
}
.tool-card:hover, .privacy-card:hover, .lineage-card:hover { transform: translateY(-4px); }

/* --- Accessibility: visible keyboard focus everywhere --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
.nav-link:focus-visible,
.nav-mega-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* Fix: italic gradient (background-clip:text) headings clipped their last
   letter ("cannot" → "canno"). Add trailing room so the italic tail shows. */
.section-heading em,
.section-display em,
.install-h2 em,
.vs-title em,
.viral-quote em,
.gps-title em,
.vision-h2 em,
.never-quote em,
.hero-em {
  padding-right: 0.32em;
  margin-right: -0.24em;
}

/* =========================================================
   SIGNATURE SCROLL EFFECT — celestial zodiac dial
   ========================================================= */
.scroll-zodiac {
  position: fixed;
  top: 50%;
  right: -300px;
  width: 660px;
  height: 660px;
  margin-top: -330px;
  color: var(--gold);
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  will-change: transform;
}
.scroll-zodiac svg { width: 100%; height: 100%; overflow: visible; }
.scroll-zodiac .sz-ring   { stroke-width: 1; opacity: 0.55; }
.scroll-zodiac .sz-spokes { stroke-width: 0.75; opacity: 0.4; }
.scroll-zodiac .sz-glyphs { opacity: 0.85; }
@media (max-width: 900px)  { .scroll-zodiac { opacity: 0.06; right: -380px; } }
@media (max-width: 600px)  { .scroll-zodiac { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-zodiac { transform: none !important; }
}

/* =========================================================
   CAN / CANNOT — composed balance, not a flat checklist
   ========================================================= */
.aican-split { gap: 0; }
.aican-side {
  border-radius: var(--radius-card);
  padding: 34px 34px 30px;
  position: relative;
}
.aican-can {
  background: linear-gradient(180deg, rgba(244,196,48,0.07) 0%, rgba(244,196,48,0.018) 100%);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.16);
}
.aican-cannot {
  background: linear-gradient(180deg, rgba(22,27,52,0.62) 0%, rgba(22,27,52,0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(244,234,213,0.06);
}
.aican-side .aican-cards { gap: 2px 30px; grid-template-columns: 1fr 1fr; }

/* Rows become a clean hairline ledger instead of stacked boxes */
.aican-can .aican-card,
.aican-cannot .aican-card {
  background: transparent !important;
  border: none;
  border-left: none !important;
  border-radius: 8px;
  box-shadow: none;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(244,234,213,0.07);
  align-items: center;
  transition: background 0.35s ease, padding-left 0.35s ease;
}
.aican-can .aican-card { border-bottom-color: rgba(244,196,48,0.12); }
.aican-can .aican-card:hover,
.aican-cannot .aican-card:hover {
  transform: none;
  background: rgba(244,196,48,0.05) !important;
  padding-left: 16px;
}

/* Central "but" → a glowing medallion that anchors the composition */
.aican-divider { padding: 26px 0; gap: 22px; }
.aican-divider-label {
  width: 60px; height: 60px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,196,48,0.14), rgba(244,196,48,0) 72%);
  box-shadow: inset 0 0 0 1px rgba(244,196,48,0.28);
  font-size: 15px;
  color: var(--gold-soft);
}
.aican-side-header { margin-bottom: 22px; }
.aican-side-title { font-size: 24px; }

@media (max-width: 720px) {
  .aican-side { padding: 24px 20px; }
  .aican-side .aican-cards { grid-template-columns: 1fr; }
}

/* Crisp, legible markers on the new ledger rows */
.aican-can .aican-marker,
.aican-cannot .aican-marker {
  width: 19px; height: 19px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: none !important;
}
.aican-can .can-marker {
  background: linear-gradient(135deg, var(--gold), var(--gold-warm)) !important;
  box-shadow: 0 0 10px rgba(244,196,48,0.3);
}
.aican-can .can-marker::before {
  content: '✓';
  color: var(--midnight);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
.aican-cannot .cannot-marker {
  background: rgba(244,234,213,0.05) !important;
  box-shadow: inset 0 0 0 1.5px rgba(200,90,90,0.4);
}
.aican-cannot .cannot-marker::before {
  content: '×';
  color: rgba(214,120,120,0.95);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* =========================================================
   HERO REPAIR + NAV OVERFLOW               7 September 2026
   Three faults, all found by looking at the rendered page.
   ========================================================= */

/* 1. THE CHART WAS BEING SLICED, NOT BLED.
      .hero-chart sits at right:-7% inside a .hero with overflow:hidden, so at
      1440px the frame and the diamond were cut by a hard vertical line a few
      pixels in from the viewport edge. A straight cut through a square reads
      as a rendering fault; a bleed has to fade or it looks broken. The mask
      does that fade, and pulling it further right turns it into atmosphere
      instead of a diagram someone forgot to finish. */
.hero-chart {
  right: -16%;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

/* 2. THE COPY WAS SITTING ON THE BUSY PART OF THE ARTWORK.
      .hero-bg-script is a 680px Devanagari glyph centred behind everything,
      which put its heaviest strokes directly under the lead paragraph. Rather
      than delete the artwork, the text block gets its own quiet ground: a soft
      radial veil that follows the copy, so the type always has something calm
      behind it and the artwork still reads around it. */
.hero-inner { position: relative; }
.hero-inner::before {
  content: '';
  position: absolute;
  inset: -8% -6%;
  background: radial-gradient(ellipse 62% 58% at 50% 46%,
              rgba(16,10,38,0.72) 0%, rgba(16,10,38,0.45) 45%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}

/* 3. And the script itself steps back a little. At 0.05 alpha over a moving
      gradient it was still the loudest thing behind an h1. */
.hero-bg-script { color: rgba(244,196,48,0.035); text-shadow: 0 0 90px rgba(244,160,46,0.10); }

/* 4. 180px of empty ground above the badge pushed the headline down without
      buying any calm, because the section already has a full-bleed gradient
      doing that job. */
.hero { padding-top: clamp(96px, 11vw, 150px); }

/* 5. NAV OVERFLOW ON A PHONE.
      Measured at 390px: .nav-inner reached 425px, giving the whole site 35px
      of horizontal scroll on every page. Flex items default to min-width:auto,
      so the brand and the CTA refused to shrink below their content width and
      pushed the row wider than the screen instead. */
.nav-inner { max-width: 100%; }
.nav-inner > * { min-width: 0; }
.nav-brand { min-width: 0; overflow: hidden; }
.nav-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 460px) {
  .nav-links { gap: 10px; }
  .nav-cta { padding-left: 14px; padding-right: 14px; }
  .nav-cta-text { font-size: 13px; }
}

/* =========================================================
   HORIZONTAL OVERFLOW ON A PHONE          7 September 2026
   Measured at 390px: documentElement.scrollWidth was 425, so every page on
   the site scrolled 35px sideways.

   Two things caused it, and the first one hid the second.

   .viral-carousel full-bleeds with width:100vw plus negative margins. 100vw is
   the viewport INCLUDING any classic scrollbar, so that pattern overflows the
   document by the scrollbar width on every engine that has one. width:100%
   with the same negative margins bleeds exactly as wide without ever
   exceeding the page.

   The nav then made it permanent. It is position:fixed, so it sizes to the
   canvas rather than to body, and body's overflow-x:hidden cannot clip it: it
   had already grown to 425 and kept the document that wide even once the
   carousel was clipped. Clamping it to the viewport stops a fixed element from
   ever setting the page width.

   overflow-x:clip on the root is the backstop, and clip rather than hidden
   because hidden on an ancestor silently breaks position:sticky further down
   the page.
   ========================================================= */
html { overflow-x: clip; }

.viral-carousel {
  width: 100%;
  padding-left: max(24px, calc((100% - var(--max-w)) / 2));
  padding-right: max(24px, calc((100% - var(--max-w)) / 2));
}

.nav { max-width: 100vw; }
.nav-inner { max-width: min(var(--max-w), 100%); }

/* Restore the real full bleed.
   Clamping the carousel to width:100% stopped the overflow but also stopped
   the bleed: measured 0..1392 inside a 1440 viewport, 48px short on the right.
   The bleed was never the bug. The bug was that nothing stopped a 100vw
   element from lengthening the PAGE, and overflow-x:clip on the root now does
   exactly that. So the carousel goes back to bleeding edge to edge, and the
   few pixels 100vw adds for a scrollbar are clipped instead of scrolled. */
.viral-carousel {
  width: 100vw;
  padding-left: max(24px, calc((100vw - var(--max-w)) / 2));
  padding-right: max(24px, calc((100vw - var(--max-w)) / 2));
}

/* The signup honeypot. Off-canvas rather than display:none, which the better
   scrapers check for, and out of the tab order and the accessibility tree so
   no keyboard or screen reader ever meets it. Replaced Cloudflare Turnstile,
   which was rejecting 100% of signups on this domain. */
.kj-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* KAR-130: one line under the pricing grid after a cancelled Dodo checkout */
.checkout-notice { margin: 24px 0 0; text-align: center; color: inherit; }
.checkout-notice[hidden] { display: none; }