/* ═══════════════════════════════════════════════════════════════════
   VENNAURA — Global Stylesheet  ·  styles.css
   Version: 3.1  ·  Last updated: April 2026
   ─────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS:
     1.  CSS Variables (Design Tokens)   — All colors, fonts, spacing
     2.  Reset                           — Box-sizing, base normalization
     3.  Base                            — Body font, line-height, smoothing
     4.  Navigation                      — Fixed nav, logo lockup (SVG), links
     5.  Logo (Deep Neon Lockup)         — SVG-based symbol + lettermark
     6.  Nav Links                       — Desktop + mobile navigation
     7.  Buttons                         — Primary, secondary, ghost variants
     8.  Typography                      — Display, headings, labels, taglines
     9.  Layout                          — Container, section, grid helpers
     10. Dark Sections                   — Dark/dark2 section variants
     11. Cards                           — Light and dark card variants
     12. Badges                          — Small tag/status pills
     13. Dividers                        — Horizontal rule with glyph
     14. Section Eyebrow                 — Label + line above section headers
     15. Forms                           — Inputs, selects, dark variants
     16. Footer                          — Grid, brand, links, social
     17. Announce Bar                    — Top ribbon (launch message etc.)
     18. Pill Badges                     — Rounded tag with pulse dot
     19. Pricing Cards (3-Tier)          — Card variants, price, features
     20. Quote Block                     — Pull-quote with decorative mark
     21. Callout                         — Left-bordered highlight box
     22. Stat Cards                      — Large number + description
     23. Scroll Animations               — fade-up / .visible system
     24. Symbol Glow                     — Keyframes for hero SVG breathing
     25. Page Hero                       — Dark hero section with radial glow
     26. Form Success                    — Success state after form submit
     27. Responsive                      — Breakpoints at 1024px / 768px / 480px
   ─────────────────────────────────────────────────────────────────
   DESIGN TOKENS (§1 CSS Variables) — change these to retheme the site:
     Colors:  --obs (darkest bg), --parch (light bg), --terra (primary CTA)
     Fonts:   --ff-display, --ff-body, --ff-mono, --ff-logo
     Spacing: --sp-xs through --sp-2xl, --max-w (max container width)
   ─────────────────────────────────────────────────────────────────
   LOGO IMPLEMENTATION NOTES:
     The nav logo is a single SVG (viewBox="0 0 350 90") containing:
     - <rect> dark background (required for mix-blend-mode:screen)
     - Two <ellipse> elements = Deep Neon symbol (coral + teal, glow filter)
     - Eight <text> elements = Abril Fatface lettermark at brand-spec positions
     All elements use mix-blend-mode:screen on the dark rect, creating:
     a) Glowing ellipse strokes at intersection point (brand signature)
     b) Adjacent letter overlaps with additive color blending
     This is the brand guide v8 lettermark spec. DO NOT replace with HTML
     span elements — they cannot produce the overlap/blend effect.
   ─────────────────────────────────────────────────────────────────
   PRICING (3-TIER RESEARCH):
     VennAura $25/mo (founding $19) — base access, curated intros
     VennAura Premium $49/mo (founding $39) — + Overlap Method coaching
     VennAura Reserve+ $129/mo (founding $99) — + dedicated matchmaker
     Founding rates locked for Phase 1 members (continuous membership).
     Research basis: +30% ARPU vs 4 tiers (Price Intelligently, 512 cos.)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   VENNAURA — Global Brand Stylesheet v2
   Brand Guide v8 · Deep Neon Identity · Pricing Research Applied
   Font Research · Color Research · UX Research Applied
   ═══════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --obs:    #0d0b10;
  --obs2:   #15121a;
  --obs3:   #1e1820;
  --obs4:   #251f2c;
  --parch:  #f4ede2;
  --parch2: #e2d5c0;
  --parch3: #d0c0a8;
  --paper:  #faf7f2;
  --terra:  #c4835a;
  --terra2: #d9a07a;
  --terra3: #8c4e2e;
  --gold:   #b8963e;
  --gold2:  #d4af6b;
  --mist:   #9d9bb8;
  --ink:    #1a1510;
  --ink2:   #4a4035;
  --ink3:   #8a7a68;
  --ink4:   #b8a898;
  --coral:  #e26e5a;
  --amber:  #dcaf37;
  --teal:   #48b9a3;
  --lav:    #aa94d4;
  --rose:   #e67d91;
  --sky:    #55b2d7;

  --grad-spectrum: linear-gradient(135deg, var(--coral), var(--amber), var(--teal));
  --grad-warm: linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%);

  /* FONT RESEARCH FIX: Correct fallback stacks for each brand font */
  --ff-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body:    'Jost', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:    'Courier Prime', 'Courier New', Courier, monospace;
  --ff-logo:    'Abril Fatface', Georgia, serif;

  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 480ms;
  --dur-deliberate: 600ms;

  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px;
  --sp-lg: 32px; --sp-xl: 64px; --sp-2xl: 120px;
  --max-w: 1160px;
  --nav-h: 72px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { text-decoration: none; color: inherit; }

/* ─── BASE ───────────────────────────────────────────────── */
body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--parch);
  -webkit-font-smoothing: antialiased;
}

/* ─── NAVIGATION ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  /* LOGO FIX: Use solid bg instead of backdrop-filter.
     backdrop-filter creates a CSS stacking context that KILLS
     mix-blend-mode on SVG children. Since our logo uses
     mix-blend-mode we switch to solid bg with transition. */
  background: rgba(13, 11, 16, 0.96);
  border-bottom: 1px solid rgba(244, 237, 226, 0.06);
  display: flex;
  align-items: center;
  padding: 0 40px;
  transition: background var(--dur-base) var(--ease-out-quad);
}
.nav.scrolled { background: rgba(13, 11, 16, 0.99); }
.nav-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* ─── LOGO — DEEP NEON LOCKUP ────────────────────────────── */
/* Brand guide v8 spec: single SVG with dark rect + symbol + lettermark.
   mix-blend-mode:screen requires dark background in same SVG stacking context.
   Letters overlap at brand-spec x-positions creating additive glow at intersections. */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}
/* The combined lockup SVG: symbol (cx1=30,cx2=60) + lettermark (72pt tightly packed)
   in a single viewBox="0 0 350 90". CSS height controls visual scale. */
.nav-logo svg {
  height: 34px;   /* scales the 350x90 viewBox to 34px tall in the nav */
  width: auto;
  display: block;
}
.footer-logo svg {
  height: 30px;
  width: auto;
}
/* Remove old lettermark span classes — now rendered inside SVG */
.nav-lettermark { display: none; }
.nav-symbol { display: none; }
/* Keep spectrum classes for any legacy references (no-op) */
.lm-v,.lm-e,.lm-n,.lm-n2,.lm-A,.lm-u,.lm-r,.lm-a { display: inline; }

/* ─── NAV LINKS
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
}
/* Nav symbol — no mix-blend-mode (backdrop-filter stacking context would break it).
   The glow filter alone creates beautiful glowing ellipses on dark bg. */
.nav-symbol {
  width: 40px;
  height: 26px;
  flex-shrink: 0;
  /* overflow:hidden keeps blend context clean — glow filter clips to svg bounds */
  overflow: hidden;
  border-radius: 2px;
}

/* SPECTRUM LETTERMARK — Abril Fatface with per-letter brand colors
   Matches brand guide v8 Tab 02 spectrum colour sequence exactly */
.nav-lettermark {
  font-family: 'Abril Fatface', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
/* Per-letter colors — brand guide v8 dark-background fill values */
.lm-v  { color: rgba(255, 130, 110, 0.92); }
.lm-e  { color: rgba(240, 195,  78, 0.90); }
.lm-n  { color: rgba(100, 210, 190, 0.92); }
.lm-n2 { color: rgba(195, 175, 230, 0.94); }
.lm-A  { color: rgba(250, 145, 160, 0.94); }
.lm-u  { color: rgba(115, 205, 235, 0.92); }
.lm-r  { color: rgba(220, 158, 115, 0.90); }
.lm-a  { color: rgba(235, 198, 130, 0.88); }

/* Footer lockup — slightly smaller */
.footer-logo .nav-lettermark { font-size: 1.05rem; }
.footer-logo .nav-symbol     { width: 34px; height: 22px; }

/* ─── NAV LINKS ──────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-links a {
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(244, 237, 226, 0.5);
  padding: 6px 14px;
  border-radius: 6px;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-links a:hover { color: rgba(244, 237, 226, 0.9); background: rgba(255,255,255,0.05); }
.nav-links a.active { color: var(--terra2); }
.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.btn-nav {
  font-family: var(--ff-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--terra);
  color: var(--parch);
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.btn-nav:hover { background: var(--coral); transform: translateY(-1px); }
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--parch);
  border-radius: 2px;
  transition: all var(--dur-base);
}
.nav-mobile {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--obs);
  z-index: 999;
  flex-direction: column;
  padding: 32px 40px;
  gap: 8px;
  overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--parch);
  padding: 12px 0;
  border-bottom: 1px solid rgba(244,237,226,0.08);
}
.nav-mobile a:hover { color: var(--terra2); }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-quad);
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn-primary {
  background: var(--terra);
  color: var(--parch);
  font-size: 0.85rem;
  padding: 14px 32px;
}
.btn-primary:hover { background: var(--coral); box-shadow: 0 8px 28px rgba(226,110,90,0.35); }

/* COLOR RESEARCH FIX: Better contrast for secondary button on dark bg */
.btn-secondary {
  background: transparent;
  color: var(--parch);
  font-size: 0.85rem;
  padding: 13px 31px;
  border: 1.5px solid rgba(244, 237, 226, 0.35);
}
.btn-secondary:hover { border-color: rgba(244,237,226,0.7); background: rgba(255,255,255,0.05); }

/* COLOR RESEARCH FIX: Ghost button on light bg uses stronger terra color */
.btn-ghost {
  background: transparent;
  color: var(--terra3);
  font-size: 0.82rem;
  padding: 12px 24px;
  border: 1.5px solid var(--terra);
}
.btn-ghost:hover { background: var(--terra); color: var(--parch); }

.btn-large {
  font-size: 0.92rem;
  padding: 18px 44px;
  border-radius: 12px;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
.display {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.display em { font-style: italic; }
h1, .h1 {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}
h4 { font-family: var(--ff-body); font-size: 1rem; font-weight: 600; }

.tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--terra2);
}
.label {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--terra);
}
.label-light { color: rgba(244,237,226,0.4); }

/* COLOR RESEARCH FIX: Slightly stronger muted label on parch background */
.label-muted { color: var(--ink3); }

p { color: var(--ink2); line-height: 1.75; }
.lead {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink3);
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}
.section { padding: var(--sp-2xl) 0; }
.section-sm { padding: 80px 0; }

/* ─── DARK SECTIONS ──────────────────────────────────────── */
.section-dark { background: var(--obs); color: var(--parch); }
.section-dark p  { color: rgba(244,237,226,0.6); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--parch); }
.section-dark li { color: rgba(244,237,226,0.6); }
.section-dark strong { color: var(--parch); }
.section-dark .callout p  { color: rgba(244,237,226,0.72); }
.section-dark .callout strong { color: var(--parch); }

.section-dark2 { background: var(--obs2); color: var(--parch); }
.section-dark2 p  { color: rgba(244,237,226,0.6); }
.section-dark2 h2, .section-dark2 h3, .section-dark2 h4 { color: var(--parch); }
.section-dark2 li { color: rgba(244,237,226,0.6); }
.section-dark2 strong { color: var(--parch); }

.section-parch { background: var(--parch); }
.section-paper { background: var(--paper); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.text-center { text-align: center; }

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border-radius: 16px;
  padding: 28px 30px;
  border: 1px solid var(--parch2);
  border-top: 3px solid var(--terra);
  transition: transform var(--dur-slow) var(--ease-out-expo),
              box-shadow var(--dur-slow) var(--ease-out-expo);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
.card.card-teal  { border-top-color: var(--teal); }
.card.card-gold  { border-top-color: var(--gold); }
.card.card-coral { border-top-color: var(--coral); }
.card.card-lav   { border-top-color: var(--lav); }
.card.card-sky   { border-top-color: var(--sky); }

.card-dark {
  background: var(--obs3);
  border-radius: 16px;
  padding: 28px 30px;
  border: 1px solid rgba(244,237,226,0.06);
  border-top: 3px solid var(--terra);
  transition: transform var(--dur-slow) var(--ease-out-expo),
              box-shadow var(--dur-slow) var(--ease-out-expo);
}
.card-dark:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.card-dark.card-teal  { border-top-color: var(--teal); }
.card-dark.card-gold  { border-top-color: var(--gold); }
.card-dark.card-coral { border-top-color: var(--coral); }
.card-dark.card-lav   { border-top-color: var(--lav); }
.card-dark h3, .card-dark h4 { color: var(--parch); }
.card-dark p  { color: rgba(244,237,226,0.55); }
.card-dark li { color: rgba(244,237,226,0.55); }

/* ─── BADGES ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.badge-terra { background: rgba(196,131,90,0.12); color: var(--terra3); border: 1px solid rgba(196,131,90,0.25); }
.badge-teal  { background: rgba(72,185,163,0.12);  color: #2a7a6e;     border: 1px solid rgba(72,185,163,0.25); }
.badge-gold  { background: rgba(184,150,62,0.12);  color: #7a6020;     border: 1px solid rgba(184,150,62,0.25); }
.badge-sky   { background: rgba(85,178,215,0.12);  color: #1a6080;     border: 1px solid rgba(85,178,215,0.25); }
.badge-lav   { background: rgba(170,148,212,0.12); color: #5a4882;     border: 1px solid rgba(170,148,212,0.25); }
.badge-dark  { background: rgba(244,237,226,0.08); color: rgba(244,237,226,0.6); border: 1px solid rgba(244,237,226,0.12); }

/* ─── DIVIDERS ───────────────────────────────────────────── */
.div-row { display: flex; align-items: center; gap: 16px; margin: 48px 0; }
.div-line { flex: 1; height: 1px; background: var(--parch2); }
.div-line-dark { background: rgba(244,237,226,0.08); }
.div-glyph { font-family: var(--ff-display); color: var(--terra2); font-size: 1.1rem; }

/* ─── SECTION EYEBROW ────────────────────────────────────── */
.section-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.eyebrow-line { width: 32px; height: 1px; background: var(--terra); }

/* ─── FORMS ──────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-label {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink4);
}
.form-input {
  background: var(--paper);
  border: 1.5px solid var(--parch2);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color var(--dur-fast);
  outline: none;
}
.form-input:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(196,131,90,0.1); }
.form-input::placeholder { color: var(--ink4); }
.form-input-dark {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(244,237,226,0.14);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--parch);
  transition: border-color var(--dur-fast);
  outline: none;
  width: 100%;
}
.form-input-dark:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(196,131,90,0.15); }
.form-input-dark::placeholder { color: rgba(244,237,226,0.3); }
.form-select {
  background: var(--paper);
  border: 1.5px solid var(--parch2);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  appearance: none;
  cursor: pointer;
}
.form-select:focus { border-color: var(--terra); }
textarea.form-input, textarea.form-input-dark { resize: vertical; min-height: 120px; }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: var(--obs);
  color: rgba(244,237,226,0.5);
  padding: 80px 0 40px;
  border-top: 1px solid rgba(244,237,226,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer-brand p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(244,237,226,0.42);
  max-width: 300px;
  margin-top: 16px;
}
.footer-col h5 {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--terra2);
  margin-bottom: 20px;
}
.footer-col a {
  display: block;
  font-size: 0.88rem;
  color: rgba(244,237,226,0.4);
  padding: 4px 0;
  transition: color var(--dur-fast);
}
.footer-col a:hover { color: rgba(244,237,226,0.85); }
.footer-bottom {
  border-top: 1px solid rgba(244,237,226,0.06);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-legal {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 1px;
  color: rgba(244,237,226,0.22);
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(244,237,226,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: rgba(244,237,226,0.4);
  transition: all var(--dur-fast);
}
.footer-social a:hover { border-color: var(--terra); color: var(--terra2); background: rgba(196,131,90,0.08); }

/* ─── ANNOUNCE BAR ───────────────────────────────────────── */
.announce-bar {
  background: var(--terra);
  color: var(--parch);
  text-align: center;
  padding: 10px 20px;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.announce-bar a { text-decoration: underline; color: inherit; opacity: 0.85; }

/* ─── PILL BADGES ────────────────────────────────────────── */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(196,131,90,0.1);
  border: 1px solid rgba(196,131,90,0.2);
  border-radius: 40px;
  padding: 6px 16px;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--terra2);
}
.pill-badge::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--terra);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.pill-badge-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,237,226,0.06);
  border: 1px solid rgba(244,237,226,0.12);
  border-radius: 40px;
  padding: 6px 16px;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(244,237,226,0.5);
}

/* ─── PRICING CARDS — 3-TIER RESEARCH APPLIED ───────────── */
/* PRICING RESEARCH: Reduce from 4 to 3 tiers.
   3 tiers = 30% higher ARPU, +27% conversion rate per research. */
.pricing-card {
  background: var(--paper);
  border-radius: 20px;
  padding: 32px 28px;
  border: 1.5px solid var(--parch2);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out-expo),
              box-shadow var(--dur-slow) var(--ease-out-expo);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0,0,0,0.1); }
.pricing-card.featured { border-color: var(--gold); background: var(--obs); color: var(--parch); }
.pricing-card.featured h3 { color: var(--parch); }
.pricing-card.featured p  { color: rgba(244,237,226,0.6); }
.pricing-card.reserve-card {
  background: var(--obs3);
  border-color: rgba(220,175,55,0.3);
  border-top-color: var(--amber);
}

.pricing-price {
  font-family: var(--ff-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--terra);
  line-height: 1;
  margin: 16px 0 2px;
}
.pricing-price sup { font-size: 1.2rem; vertical-align: super; }

/* Founding member rate display */
.founding-rate {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}
.standard-rate {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink4);
  text-decoration: line-through;
  margin-right: 6px;
}

.pricing-period {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 20px;
}
.pricing-card.featured .pricing-period { color: rgba(244,237,226,0.4); }
.pricing-card.reserve-card .pricing-period { color: rgba(244,237,226,0.35); }

.pricing-features {
  list-style: none;
  margin: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-features li {
  font-size: 0.88rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink2);
}
.pricing-card.featured .pricing-features li { color: rgba(244,237,226,0.7); }
.pricing-card.reserve-card .pricing-features li { color: rgba(244,237,226,0.7); }
.pricing-features li::before { content: '◈'; color: var(--terra); font-size: 0.7rem; flex-shrink: 0; margin-top: 3px; }
.pricing-card.featured .pricing-features li::before { color: var(--gold2); }
.pricing-card.reserve-card .pricing-features li::before { color: var(--amber); }

.pricing-badge {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 0.58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
}

/* ─── QUOTE BLOCK ────────────────────────────────────────── */
.quote-block {
  position: relative;
  padding: 32px 32px 32px 48px;
  background: var(--obs2);
  border-radius: 16px;
  border-left: 3px solid var(--terra);
  overflow: hidden;
}
.quote-block::before {
  content: '\201C';
  position: absolute;
  top: -12px; left: 16px;
  font-family: var(--ff-display);
  font-size: 5rem;
  color: rgba(196,131,90,0.15);
  line-height: 1;
}
.quote-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(244,237,226,0.75);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
.quote-source {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(244,237,226,0.28);
  margin-top: 12px;
}

/* ─── CALLOUT ────────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--terra);
  background: rgba(196,131,90,0.06);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 16px 0;
}
.callout.teal  { border-left-color: var(--teal);  background: rgba(72,185,163,0.06); }
.callout.gold  { border-left-color: var(--gold);  background: rgba(184,150,62,0.06); }
.callout.warn  { border-left-color: #b04040;      background: rgba(176,64,64,0.05); }
.callout p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--ink2); }
.section-dark .callout p, .section-dark2 .callout p,
[class*="process-section"] .callout p { color: rgba(244,237,226,0.72); }
.section-dark .callout strong, .section-dark2 .callout strong { color: var(--parch); }

/* ─── STAT CARDS ─────────────────────────────────────────── */
.stat-num { font-family: var(--ff-display); font-size: 3rem; font-weight: 700; color: var(--terra); line-height: 1; margin-bottom: 6px; }
.stat-desc { font-size: 0.82rem; color: var(--ink3); line-height: 1.5; }

/* ─── SCROLL ANIMATIONS (never-blank approach) ───────────── */
/* Default: always visible. JS adds html.anim-ready to enable scroll-trigger.
   This prevents any blank sections if JS is slow. */
.fade-up { opacity: 1; transform: translateY(0); }
html.anim-ready .fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-in-out-sine),
              transform var(--dur-slow) var(--ease-in-out-sine);
}
html.anim-ready .fade-up.visible  { opacity: 1; transform: translateY(0); }
html.anim-ready .stagger-1 { transition-delay: 0ms; }
html.anim-ready .stagger-2 { transition-delay: 80ms; }
html.anim-ready .stagger-3 { transition-delay: 160ms; }
html.anim-ready .stagger-4 { transition-delay: 240ms; }
html.anim-ready .stagger-5 { transition-delay: 320ms; }

/* ─── SYMBOL GLOW KEYFRAMES ──────────────────────────────── */
@keyframes symbol-breathe {
  0%,100% { filter: blur(0px); opacity: 0.92; }
  50%      { filter: blur(1px); opacity: 0.78; }
}

/* ─── PAGE HERO ──────────────────────────────────────────── */
.page-hero {
  background: var(--obs);
  padding: calc(var(--nav-h) + 80px) 0 80px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 70% 50%, rgba(196,131,90,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 500px 300px at 0% 100%, rgba(157,155,184,0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ─── FORM SUCCESS ───────────────────────────────────────── */
.form-success {
  display: none;
  background: rgba(72,185,163,0.1);
  border: 1px solid rgba(72,185,163,0.25);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.88rem;
  color: var(--teal);
  margin-top: 12px;
  text-align: left;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  :root { --nav-h: 64px; --sp-2xl: 80px; }
  .container { padding: 0 24px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .nav-burger { display: flex; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .display { font-size: clamp(2.2rem, 10vw, 3.5rem); }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .nav { padding: 0 20px; }
}