/* ──────────────────────────────────────────────────────────────────
   Luve AI — landing page styles
   Aesthetic system:
     - Cinematic night ocean with a slowly-rising moon (fixed bg + parallax)
     - Frosted glass cards float over the atmosphere (毛玻璃)
     - Sensual / feminine / cinematic — never spiritual-shop, never neon
   ────────────────────────────────────────────────────────────────── */

:root {
  --bg-deep:   #06061a;   /* near-black blue-violet */
  --bg-mid:    #0c0a2a;   /* deep blue-purple midnight */
  --bg-warm:   #1d0c30;   /* warm violet near horizon */
  --bg-horizon:#2f0c2e;   /* plum at the horizon */
  --moon-warm: #fde0c4;   /* peach moon body */
  --moon-cool: #e8b89c;   /* peach shadow */
  --moon-glow: #f9c8a4;   /* warm peach halo */
  --moon-deep: #d97a6a;   /* warm pink-coral edge */
  --ink:       #f4ecd9;   /* warm off-white */
  --ink-soft:  rgba(244,236,217,0.70);
  --ink-faint: rgba(244,236,217,0.45);
  --accent:    #f0a878;   /* warm peach accent */
  --gold:      #e8c878;   /* warm gold for sparkles */
  --glass-bg:  rgba(30, 20, 60, 0.28);
  --glass-bg-warm: rgba(70, 36, 70, 0.28);
  --glass-stroke: rgba(244,236,217,0.16);
  --glass-shine: rgba(244,236,217,0.08);
}

* { box-sizing: border-box; }

/* Hero still painted at first paint, before React mounts — .sky-stage (fixed,
   z-index 0) covers it once the app renders. Kills the deep-blue blank on load.
   (body::before instead of background-attachment:fixed — iOS Safari quirk.) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('assets/wave-poster.jpg') center / cover no-repeat;
}
@media (max-width: 768px) {
  /* mobile's final scene IS this image (no video) — same file = seamless handoff */
  body::before {
    background-image: url('assets/mobile-bg.webp');
    background-position: 50% 30%;
  }
}
html, body {
  margin: 0; padding: 0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ── Typography ─────────────────────────────────────────────────── */
.display { font-family: 'Cormorant Garamond', 'Italiana', serif; font-weight: 400; letter-spacing: -0.015em; line-height: 0.98; text-shadow: 0 1px 3px rgba(0,0,0,0.92), 0 2px 16px rgba(4,3,15,0.88), 0 0 60px rgba(4,3,15,0.65); }
.display em { font-style: italic; font-weight: 400; }
.display.thin { font-weight: 300; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 236, 217, 0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(4,3,15,0.85), 0 0 40px rgba(4,3,15,0.6);
}

/* ── Headline with soft glow (NOT on glass — let moon breathe behind) ─ */
.hero-headline {
  position: relative;
  padding: 20px 40px;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.98),
    0 2px 14px rgba(0, 0, 0, 0.9),
    0 2px 30px rgba(4, 3, 15, 0.95),
    0 0 80px rgba(4, 3, 15, 0.85),
    0 0 140px rgba(4, 3, 15, 0.65);
}
/* soft, heavily-blurred dark glow behind the text — no hard edge */
.hero-headline::before {
  content: '';
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 62% at 50% 50%,
    rgba(4, 3, 15, 0.82) 0%,
    rgba(4, 3, 15, 0.55) 42%,
    rgba(4, 3, 15, 0.2) 64%,
    transparent 78%);
  filter: blur(40px);
  pointer-events: none;
}
.hero-eyebrow-bg {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(4, 3, 15, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 236, 217, 0.10);
}

/* luminous moon-gold gradient text — echoes the moon's warm light (lightened for readability) */
.gold-text {
  background: linear-gradient(175deg, #fff7e2 0%, #fbecc4 50%, #f5e0ad 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* match the white words' soft dark glow — via drop-shadow so the gold
     fill stays bright (text-shadow would muddy it bronze) */
  text-shadow: none;
  filter: drop-shadow(0 2px 20px rgba(4,3,15,0.85)) drop-shadow(0 0 55px rgba(4,3,15,0.55));
}

/* ── Slot-machine word roller ──────────────────────────────────── */
.slot {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
  top: -0.13em;        /* flush the rolling word with the baseline of the line */
  min-width: 2em;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* soft top/bottom fade so words enter/exit through a veil */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
.slot-track {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* easeOutExpo — whips up fast, then decelerates into the landing word */
  transition: transform 0.78s cubic-bezier(0.16, 1, 0.3, 1), filter 0.78s ease-out;
  will-change: transform;
}
.slot-track.rolling {
  filter: blur(0.5px);
}
.slot-word {
  display: block;
  text-align: center;
  white-space: nowrap;
  font-style: normal;
  font-weight: 500;
}
.slot-orange {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(240, 168, 120, 0.4), 0 2px 14px rgba(4,3,15,0.7);
}

/* ── Scripts bingo card ─────────────────────────────────────────── */
.bingo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.bingo-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.3;
  color: rgba(244, 236, 217, 0.9);
  background: rgba(12, 9, 28, 0.55);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(244, 236, 217, 0.10);
  transition: color 0.45s ease, background 0.45s ease, border-color 0.45s ease,
              box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.bingo-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(244, 236, 217, 0.28);
  transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
}
.bingo-chip.hot {
  color: #f0a878;
  text-shadow: 0 0 18px rgba(240, 168, 120, 0.45);
  background: rgba(240, 168, 120, 0.16);
  border-color: rgba(240, 168, 120, 0.6);
  box-shadow: 0 0 0 1px rgba(240, 168, 120, 0.3),
              0 8px 30px -8px rgba(240, 168, 120, 0.4),
              inset 0 1px 0 rgba(255, 245, 220, 0.14);
  transform: translateY(-2px) scale(1.015);
}
.bingo-chip.hot .bingo-dot {
  background: #f0a878;
  box-shadow: 0 0 10px 2px rgba(240, 168, 120, 0.75);
  transform: scale(1.3);
}
@media (max-width: 760px) {
  .bingo { grid-template-columns: 1fr; }
}

/* ── Tarot deck 3D stage ────────────────────────────────────────── */
.tarot-stage {
  position: relative;
  height: 560px;
  margin: 56px 0 24px;
  user-select: none;
  perspective: 1700px;
  perspective-origin: 50% 42%;
}
.tarot-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  z-index: 2;
}
/* moon-orbit ground ornament — laid flat under the cards */
.tarot-orbit {
  position: absolute;
  left: 50%;
  top: 82%;
  width: 820px; height: 820px;
  margin-left: -410px;
  margin-top: -410px;
  transform: rotateX(74deg);
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 52%, transparent 82%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 52%, transparent 82%);
  filter: drop-shadow(0 0 22px rgba(227, 192, 122, 0.4));
}
@keyframes nodePulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.orbit-node-glow { animation: nodePulse 4s ease-in-out infinite; }
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.orbit-spin { animation: orbitSpin 120s linear infinite; }

.deck-arrow {
  background: transparent;
  border: 1px solid rgba(227, 192, 122, 0.4);
  color: var(--gold, #e3c07a);
  color: #e3c07a;
  width: 48px; height: 48px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  font-size: 16px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.deck-arrow:hover { background: rgba(227, 192, 122, 0.12); border-color: rgba(227, 192, 122, 0.7); }

/* ── Frosted glass ──────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-stroke);
  border-radius: 24px;
  position: relative;
  box-shadow:
    0 1px 0 0 var(--glass-shine) inset,
    0 24px 60px -20px rgba(0,0,0,0.6),
    0 8px 24px -8px rgba(0,0,0,0.4);
}
.glass-warm {
  background: var(--glass-bg-warm);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-stroke);
  border-radius: 24px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 16px 28px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg-deep);
  box-shadow: 0 10px 24px -8px rgba(244,236,217,0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -6px rgba(244,236,217,0.35); }
.btn-ghost {
  background: rgba(244,236,217,0.06);
  color: var(--ink);
  border: 1px solid rgba(244,236,217,0.22);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(244,236,217,0.12); }

/* ── Page chrome ────────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 2;        /* sits over the fixed sky */
}

/* ── The fixed cosmic background ─────────────────────────────── */
.sky-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* gradient sky — fallback dark base behind images */
.sky-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, #0c0820 0%, transparent 60%),
    linear-gradient(180deg, #06051a 0%, #04030f 60%, #020108 100%);
}

/* ── 1. BG video — full-bleed pristine scene/sky ────────────────────── */
.ocean-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.ocean-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;   /* JS pans 0% → 100% on scroll */
  /* NO filter — pristine */
}

/* ── 2. Moon cutout — over the bg, BEHIND the front waves ───────────── */
.moon-layer {
  position: absolute;
  left: 50%;
  top: 56%;            /* nudged a tad higher */
  transform: translate(-50%, -50%);
  width: 620px;
  height: 620px;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}
/* warm radiant halo sitting BEHIND the moon image, like real moonlight */
.moon-layer::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 244, 214, 0.55) 0%,
    rgba(255, 232, 188, 0.34) 24%,
    rgba(255, 220, 175, 0.16) 42%,
    rgba(255, 214, 170, 0.06) 58%,
    transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  animation: moonHalo 8s ease-in-out infinite alternate;
}
@keyframes moonHalo {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
.moon-layer img {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  /* tight bright rim + soft warm bloom — makes the moon read as a light source */
  filter:
    brightness(1.06)
    drop-shadow(0 0 24px rgba(255, 240, 210, 0.45));
  /* PERF: no infinite filter animation — breathing is done by the ::before
     halo below via opacity (compositor-only, zero repaint). */
}
/* soft breathing halo behind the moon — cheap opacity pulse */
.moon-layer::before {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,200,0.30) 0%, rgba(255,224,180,0.12) 45%, transparent 70%);
  animation: haloPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes haloPulse {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ── 3. FRONT waves — same video, lower band, feathered top = waterline ─ */
.ocean-front {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 54vh;            /* raised slightly so the waterline sits higher and covers more of the moon's base */
  overflow: hidden;
  z-index: 2;              /* IN FRONT of the moon (z-index 1) */
  /* feather the TOP so the waves dissolve into the moon/sky above */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 9%, #000 24%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 9%, #000 24%, #000 100%);
}
.ocean-front video {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 100vh;           /* show the SAME lower slice as the bg video */
  object-fit: cover;
  object-position: 50% 100%;
  /* NO filter — pristine */
}

/* Cumulative darken — strengthens on scroll so content sections stay legible */
.hero-darken {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(6,5,20,0.0) 0%, rgba(6,5,20,0.45) 58%, rgba(5,4,16,0.92) 100%);
  pointer-events: none;
  opacity: 0.0;
  transition: opacity 0.2s ease;
}

/* ── Twinkling stars field (in the sky) ──────────────────────── */
.stars {
  position: absolute;
  inset: 0 0 38% 0;   /* upper portion of viewport — the sky */
  pointer-events: none;
}
.star {
  position: absolute;
  width: 1.5px; height: 1.5px;
  background: #fdf4e0;
  border-radius: 50%;
  opacity: 0.6;
  box-shadow: 0 0 4px rgba(253, 244, 224, 0.6);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1.1); }
}
.star.tw { animation: twinkle 4s ease-in-out infinite; }

/* A few larger 4-pointed "shining" stars in the sky */
.star-shine {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 245, 220, 0.95) 0%, rgba(240, 210, 150, 0.5) 35%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.star-shine::before, .star-shine::after {
  content: '';
  position: absolute;
  background: linear-gradient(transparent, rgba(255, 245, 220, 0.9), transparent);
}
.star-shine::before {
  left: 50%; top: -180%;
  width: 1px; height: 460%;
  transform: translateX(-50%);
}
.star-shine::after {
  left: -180%; top: 50%;
  width: 460%; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 245, 220, 0.9), transparent);
}
.star-shine.tw { animation: sparkleTw 5s ease-in-out infinite; }

/* ── Grain texture (cinematic) ──────────────────────────────── */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* ── Section spacing ────────────────────────────────────────── */
section {
  position: relative;
  padding: 140px 7vw;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 1200px) {
  section { padding: 160px 96px; }
}

/* ── Inputs ─────────────────────────────────────────────────── */
.field {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.field::placeholder { color: var(--ink-faint); }

/* small utility */
.scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.scroll-cue-line {
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, var(--ink-faint));
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE  (≤768px)  —  responsive overrides
   Inline styles win over normal CSS, so most rules use !important.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* MOBILE static background image (replaces the video → no decode/crash) */
  .ocean-bg-static {
    position: absolute; inset: 0;
    background-image: url("assets/mobile-bg.webp");
    background-size: cover;
    background-position: 50% 30%;
    background-repeat: no-repeat;
  }

  /* ════════ iOS PERFORMANCE: kill backdrop-filter blur ════════
     Multiple backdrop-filter blurs over a video crash mobile Safari.
     Replace with solid translucent backgrounds — stable, still on-brand. */
  .glass, .bingo-chip, .deck-arrow, .field,
  .ocean-front, .hero-eyebrow-bg, .tarot-face,
  .glass-warm, .btn-ghost {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .glass-warm { background: rgba(18, 14, 42, 0.86) !important; }
  .btn-ghost { background: rgba(244,236,217,0.10) !important; }
  .glass { background: rgba(18, 14, 42, 0.86) !important; }
  .bingo-chip { background: rgba(14, 10, 32, 0.72) !important; }
  .nav-right, .hero-eyebrow-bg { background: rgba(18, 14, 42, 0.86) !important; }

  /* ════════ iOS PERFORMANCE: stop ALL infinite idle animations ════════
     Continuously-running keyframes (spinning wheel, pulsing glow, twinkling
     stars, scroll cue) repaint every frame forever → battery + memory drain
     that compounds into Safari crashes on long sessions. Freeze them. */
  .orbit-spin, .orbit-node-glow,
  .star.tw, .star-shine.tw,
  .scroll-cue-line, .moon-halo {
    animation: none !important;
  }
  /* Hide the decorative star field entirely on mobile (dozens of animated
     DOM nodes) — the video/poster already carries the celestial mood. */
  .stars { display: none !important; }

  /* ── Global: tighter section padding ── */
  section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Nav: hide text links, keep logo + Join waitlist ── */
  .nav-right { gap: 0 !important; padding: 8px 8px 8px 8px !important; }
  .nav-link { display: none !important; }
  .nav-tagline { font-size: 9px !important; }

  /* ── Hero headline: big first sentence, small one-line second sentence ── */
  .hero-headline,
  .hero-headline .gold-text {
    font-size: 33px !important;
    white-space: normal !important;
    line-height: 1.18 !important;
  }
  .hero-headline .hero-line2 {
    font-size: 24px !important;
    white-space: nowrap !important;
    display: inline-block;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 10px rgba(0,0,0,1), 0 2px 20px rgba(0,0,0,1), 0 3px 40px rgba(0,0,0,1), 0 0 70px rgba(0,0,0,1) !important;
  }
  .hero-headline { padding: 0 !important; text-shadow: 0 2px 16px rgba(0,0,0,1), 0 3px 30px rgba(0,0,0,1), 0 5px 60px rgba(0,0,0,0.98), 0 0 100px rgba(0,0,0,0.95) !important; }

  /* hero CTA glass box: compact but with breathing room before the buttons */
  .hero-section .glass { padding: 20px 18px !important; gap: 16px !important; }
  .hero-section .glass p { line-height: 1.34 !important; }

  /* ── Moon: dropped a touch ── */
  .moon-layer { width: 400px !important; height: 400px !important; top: 41% !important; }

  /* ── Front waves: lower the waterline so it sits at the headline height
     (not up over the moon) ── */
  .ocean-front {
    height: 66vh !important;
    /* waterline lands right at the "so you can finally break the cycle" line:
       a short soft feather (hidden behind the text shadow), opaque below it */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 6%, #000 13%, #000 100%) !important;
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 6%, #000 13%, #000 100%) !important;
  }
  /* mobile uses a single video (2nd decode crashes iOS); the front "waves"
     become a deep-navy gradient that submerges the moon's lower half, while
     the bottom stays clear so the bg video's real waves still show. */
  .ocean-front-grad { display: none !important; }

  /* glass box opacity */
  .hero-section .glass { background: rgba(16, 12, 38, 0.62) !important; }
  .hero-section { padding-bottom: 60px !important; }
  /* fade the moon's lower half — radial so it's circular (no rectangle), and
     drop will-change so Safari doesn't show the GPU layer's box edge */
  .moon-layer { will-change: auto !important; }
  .moon-layer::before { display: none; }   /* mobile: skip the halo layer entirely */
  .moon-layer { top: 36% !important; }
  .moon-layer img {
    /* clipped to the moon disk (no box); centered high + tight so the LOWER
       half fades more → the waves behind show through clearly */
    -webkit-mask-image: radial-gradient(circle at 50% 37%, #000 30%, rgba(0,0,0,0.45) 41%, rgba(0,0,0,0.12) 50%, transparent 58%) !important;
            mask-image: radial-gradient(circle at 50% 37%, #000 30%, rgba(0,0,0,0.45) 41%, rgba(0,0,0,0.12) 50%, transparent 58%) !important;
    /* PERF: kill the infinite drop-shadow filter animation — it repaints the
       whole moon every frame and is the main cause of scroll jank + crashes.
       Static, single, light glow instead. */
    animation: none !important;
    filter: brightness(1.06) drop-shadow(0 0 22px rgba(255, 236, 200, 0.4)) !important;
    transform: translateZ(0);
  }
  .moon-layer::before { display: none !important; }

  /* give the hero text more room + sit it clearly below the moon */
  .hero-section { padding-bottom: 60px !important; }

  /* ── Glass panels: full width, lighter padding ── */
  .glass { max-width: 100% !important; }

  /* ── Kill the scroll-darken band entirely on mobile; rely on text shadow ── */
  .hero-darken { display: none !important; }

  /* ── Personas: scale the whole 3D ring down so 3 cards show (center hero
     bigger + two sides peeking), since auto-rotate is off on mobile ── */
  .tarot-stage { transform: scale(0.62); transform-origin: center top; height: 380px !important; margin: 72px 0 0 !important; }
  .tarot-orbit { width: 460px !important; height: 460px !important; margin-left: -230px !important; margin-top: -230px !important; }

  /* quiz eyebrow: tighter so "So which script is running you?" fits one line */
  #quiz .eyebrow { letter-spacing: 0.08em !important; font-size: 10px !important; }
  #personas { padding-left: 12px !important; padding-right: 12px !important; }
  #personas > div > p { font-size: 19px !important; line-height: 1.42 !important; max-width: 320px !important; margin-inline: auto !important; letter-spacing: -0.01em !important; }

  /* manifesto lines must wrap on mobile (were nowrap → overflowed) */
  #manifesto > p.display,
  #manifesto .glass span { white-space: normal !important; }

  /* waitlist form: first + last on one row, email below, button below
     (was a giant ugly stacked pill) */
  #waitlist form { flex-wrap: wrap !important; border-radius: 22px !important; gap: 8px !important; align-items: stretch !important; }
  #waitlist form input[placeholder="First name"],
  #waitlist form input[placeholder="Last name"] { width: calc(50% - 4px) !important; flex: 0 0 calc(50% - 4px) !important; }
  #waitlist form input[type="email"] { width: 100% !important; flex: 0 0 100% !important; }
  #waitlist form button { width: 100% !important; flex: 0 0 100% !important; }

  /* footer: brand block full-width on top, then 3 link columns in a row */
  .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 20px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-brand p { max-width: 100% !important; }

  /* footer bottom bar: stack the 3 items, centered */
  .footer-bottom { flex-direction: column !important; gap: 14px !important; text-align: center !important; }

  /* ── No-background display text: deepest shadow for readability ── */
  #manifesto > p.display,
  blockquote.display,
  #premise .hero-headline {
    text-shadow: 0 2px 16px rgba(0,0,0,1), 0 3px 30px rgba(0,0,0,1), 0 5px 60px rgba(0,0,0,0.98), 0 0 100px rgba(0,0,0,0.95) !important;
  }

  /* ── Bingo chips: more compact (shorter, tighter) ── */
  .bingo { gap: 8px !important; }
  .bingo-chip { padding: 9px 14px !important; font-size: 17px !important; gap: 9px !important; border-radius: 11px !important; }

  /* ── Quiz panel: centered, not nudged right ── */
  #quiz > div { transform: none !important; margin-left: auto !important; margin-right: auto !important; }

  /* hero CTA copy + slot line */
  .slot { font-size: inherit; }
}