/* ============================================================
   RAIN · sitewide design system
   Inspired by Retell AI (bold typographic hierarchy) and Orbai
   (soft elevated cards, pill buttons with icons, warm light bg)
============================================================ */

:root {
  --bg:           #f3f2ee;       /* warm off-white */
  --bg-elev:      #ffffff;
  --bg-sunken:    #ecebe6;
  --bg-dark:      #0a0a0a;
  --bg-dark-2:    #131313;

  --ink:          #0a0a0a;
  --ink-2:        #3a3a3a;
  --ink-3:        #6e6e6e;
  --ink-4:        #9a9a9a;

  --line:         rgba(10,10,10,0.07);
  --line-2:       rgba(10,10,10,0.12);

  --accent:       #2745d6;       /* electric royal */
  --accent-warm:  #d94a1f;       /* clay orange */
  --accent-soft:  #f4a23a;       /* warm amber */

  --shadow-sm:    0 1px 2px rgba(10,10,10,0.04);
  --shadow-card:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.04),
    inset 0 0 0 1px rgba(10,10,10,0.04),
    0 1px 2px rgba(10,10,10,0.04),
    0 4px 8px rgba(10,10,10,0.05),
    0 12px 24px -4px rgba(10,10,10,0.08),
    0 28px 48px -12px rgba(10,10,10,0.12),
    0 56px 80px -24px rgba(10,10,10,0.14);
  --shadow-hover:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.05),
    inset 0 0 0 1px rgba(10,10,10,0.05),
    0 1px 2px rgba(10,10,10,0.04),
    0 8px 14px rgba(10,10,10,0.08),
    0 22px 36px -6px rgba(10,10,10,0.14),
    0 40px 60px -14px rgba(10,10,10,0.2),
    0 70px 100px -30px rgba(10,10,10,0.22);
  --shadow-deep:  0 30px 60px -20px rgba(10,10,10,0.22);

  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  28px;
  --r-xl:  36px;
  --r-pill: 999px;

  --display: "Fraunces", "Instrument Serif", Georgia, serif;
  --sans:    "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --body:    "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif:   "Instrument Serif", "Tiempos", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --pad-x: clamp(20px, 4vw, 56px);
  --max-w: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Important: no overflow restrictions on html/body. They break
     position: sticky which the deck-of-cards section stacking depends on.
     If horizontal overflow becomes an issue, fix it on individual elements. */
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img, svg { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.container-wide { max-width: 1500px; }
.container-narrow { max-width: 980px; }

/* ============================ NAV ============================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 0;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav-hidden { transform: translateY(-120%); }
.nav.scrolled {
  background: rgba(243, 242, 238, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 60, "wght" 500;
  font-weight: 500; font-size: 24px; letter-spacing: 0.01em;
  font-style: italic;
  color: #d9923a;
  text-shadow: 0 0 14px rgba(217, 146, 58, 0.25);
}
.nav-brand .brand-mark {
  width: 32px; height: 32px; flex-shrink: 0;
  color: #d9923a;
  filter: drop-shadow(0 0 6px rgba(217, 146, 58, 0.45));
}
/* Legacy .dot still on some pages — hide it; SVG mark takes over */
.nav-brand .dot { display: none; }
.nav-links {
  display: flex; gap: 4px; align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f0eee8 100%);
  border: 0; border-radius: var(--r-pill); padding: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.06),
    inset 0 0 0 1px rgba(10,10,10,0.06),
    0 1px 1px rgba(10,10,10,0.04),
    0 4px 10px rgba(10,10,10,0.08),
    0 12px 22px -4px rgba(10,10,10,0.12),
    0 24px 36px -12px rgba(10,10,10,0.16);
}
.nav-link {
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  padding: 8px 14px; border-radius: var(--r-pill);
  transition: color 2s, background 2s;
}
.nav-link:hover { color: var(--ink); background: var(--bg-sunken); }
.nav-link.active { color: var(--ink); background: var(--bg-sunken); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--r-pill);
    background: var(--bg-elev); border: 1px solid var(--line);
  }
  .nav.menu-open .nav-mobile { display: flex; }
}
.nav-mobile {
  display: none; position: fixed; inset: 70px 16px auto 16px;
  flex-direction: column; gap: 4px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 12px;
  box-shadow: var(--shadow-deep);
}
.nav-mobile a {
  padding: 14px 16px; font-size: 16px; font-weight: 500;
  border-radius: var(--r-md); color: var(--ink);
}
.nav-mobile a:hover { background: var(--bg-sunken); }

/* ============================ BUTTONS / PILLS ============================
   3D pill buttons with gradients, inset highlights, and layered shadow stacks.
   Press-down active state. Sans-serif type for clean UI feel.
============================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: -0.005em;
  padding: 12px 20px; border-radius: var(--r-pill);
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 2s ease;
  white-space: nowrap; cursor: pointer;
  border: 0; outline: 0;
  isolation: isolate;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* PRIMARY — dark, deeply raised, like a black pebble */
.btn-primary {
  background: linear-gradient(180deg, #2c2c2c 0%, #050505 100%);
  color: #fff;
  padding: 14px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(0,0,0,0.5),
    0 1px 1px rgba(0,0,0,0.05),
    0 4px 8px rgba(10,10,10,0.18),
    0 10px 18px rgba(10,10,10,0.22),
    0 20px 32px -6px rgba(10,10,10,0.32),
    0 36px 56px -16px rgba(10,10,10,0.4),
    0 60px 80px -28px rgba(10,10,10,0.4);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(0,0,0,0.5),
    0 1px 1px rgba(0,0,0,0.05),
    0 8px 14px rgba(10,10,10,0.22),
    0 18px 30px rgba(10,10,10,0.3),
    0 32px 48px -6px rgba(10,10,10,0.4),
    0 50px 72px -14px rgba(10,10,10,0.45),
    0 80px 110px -28px rgba(10,10,10,0.5);
  filter: brightness(1.08);
}
.btn-primary:active {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.5),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 1px 1px rgba(0,0,0,0.05),
    0 4px 8px rgba(10,10,10,0.18);
}

/* LIGHT — cream pebble with strong layered drop shadow */
.btn-light {
  background: linear-gradient(180deg, #ffffff 0%, #ece9e0 100%);
  color: var(--ink);
  padding: 14px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.1),
    inset 0 0 0 1px rgba(10,10,10,0.05),
    0 1px 1px rgba(10,10,10,0.04),
    0 3px 6px rgba(10,10,10,0.08),
    0 8px 14px rgba(10,10,10,0.1),
    0 18px 28px -4px rgba(10,10,10,0.14),
    0 32px 48px -12px rgba(10,10,10,0.18),
    0 56px 72px -24px rgba(10,10,10,0.2);
}
.btn-light:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.1),
    inset 0 0 0 1px rgba(10,10,10,0.05),
    0 1px 1px rgba(10,10,10,0.04),
    0 6px 10px rgba(10,10,10,0.1),
    0 14px 24px rgba(10,10,10,0.14),
    0 28px 40px -4px rgba(10,10,10,0.2),
    0 48px 64px -12px rgba(10,10,10,0.24),
    0 80px 100px -24px rgba(10,10,10,0.26);
}
.btn-light:active {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 3px rgba(10,10,10,0.15),
    inset 0 -1px 0 rgba(255,255,255,0.5),
    inset 0 0 0 1px rgba(10,10,10,0.05),
    0 1px 1px rgba(10,10,10,0.04);
}

/* GHOST — outlined pebble that lifts on hover */
.btn-ghost {
  background: transparent; color: var(--ink); padding: 14px 22px;
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 1px 1px rgba(10,10,10,0.02);
}
.btn-ghost:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.06),
    inset 0 0 0 1px rgba(10,10,10,0.06),
    0 1px 1px rgba(10,10,10,0.04),
    0 6px 12px rgba(10,10,10,0.1),
    0 16px 26px -4px rgba(10,10,10,0.16),
    0 32px 48px -14px rgba(10,10,10,0.22);
}
.btn-ghost:active { transform: translateY(-1px); }

/* ACCENT — royal blue raised pebble with deep glow */
.btn-accent {
  background: linear-gradient(180deg, #3d63ff 0%, #1530a8 100%);
  color: #fff; padding: 14px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.4),
    0 1px 1px rgba(0,0,0,0.05),
    0 4px 8px rgba(39,69,214,0.3),
    0 12px 24px -2px rgba(39,69,214,0.42),
    0 24px 40px -10px rgba(39,69,214,0.5),
    0 44px 64px -20px rgba(39,69,214,0.55);
}
.btn-accent:hover {
  transform: translateY(-3px); filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.4),
    0 8px 14px rgba(39,69,214,0.35),
    0 20px 34px -2px rgba(39,69,214,0.5),
    0 36px 58px -10px rgba(39,69,214,0.6),
    0 64px 96px -20px rgba(39,69,214,0.7);
}
.btn-accent:active {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.4),
    0 1px 1px rgba(0,0,0,0.05),
    0 4px 8px rgba(39,69,214,0.25);
}

.btn-lg { padding: 15px 26px; font-size: 15px; }

.btn .arr {
  display: inline-block;
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover .arr { transform: translateX(4px); }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em;
  padding: 11px 20px 12px 16px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #ffffff 0%, #e8e3d8 100%);
  color: #0a0a0a;
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 2s cubic-bezier(0.16, 1, 0.3, 1);
  /* Replicating the reference tag: pure white top fading to warm cream bottom,
     hairline top highlight, distinct dark rim on the bottom edge (the "lip"),
     and a fully downward cascade — sharp close shadow plus three soft layers
     reaching far below the element. */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1.5px 0 rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(10,10,10,0.05),
    0 1px 1.5px rgba(10,10,10,0.08),
    0 3px 6px rgba(10,10,10,0.08),
    0 7px 14px rgba(10,10,10,0.1),
    0 14px 24px rgba(10,10,10,0.12),
    0 26px 38px rgba(10,10,10,0.14),
    0 44px 56px rgba(10,10,10,0.14),
    0 70px 80px -10px rgba(10,10,10,0.15);
}
/* Icons inside pills: dark, crisp, slightly heavier stroke */
.pill > svg, .pill .ico {
  width: 16px; height: 16px;
  color: #0a0a0a;
  opacity: 1;
  stroke-width: 2;
  flex-shrink: 0;
}
/* The colored "status" dots (pill-dot) keep their accent colors */
.pill .pill-dot { width: 7px; height: 7px; }
.pill:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1.5px 0 rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(10,10,10,0.05),
    0 1px 1.5px rgba(10,10,10,0.07),
    0 4px 8px rgba(10,10,10,0.1),
    0 10px 18px rgba(10,10,10,0.13),
    0 20px 32px rgba(10,10,10,0.16),
    0 36px 52px rgba(10,10,10,0.18),
    0 60px 80px -8px rgba(10,10,10,0.2);
}

/* ============================ NEXT UP banner ============================
   Sits at the top of the hero. Gold-outlined pill on the dark gradient.
   Pulsing gold dot · "NEXT UP" label · divider · event line · arrow.
============================ */
.next-up {
  display: flex; width: fit-content; align-items: center; gap: 14px;
  padding: 11px 22px 11px 16px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(244,162,58,0.08) 0%, rgba(244,162,58,0.03) 100%);
  color: #f4e4c4;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(244,162,58,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(244,162,58,0.04),
    0 8px 24px rgba(0,0,0,0.25),
    0 24px 48px -10px rgba(244,162,58,0.18),
    0 40px 64px -16px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.next-up:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(244,162,58,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(244,162,58,0.08),
    0 14px 32px rgba(0,0,0,0.3),
    0 32px 60px -10px rgba(244,162,58,0.28),
    0 56px 80px -16px rgba(0,0,0,0.5);
}
.next-up .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-soft, #f4a23a);
  box-shadow: 0 0 0 4px rgba(244,162,58,0.18), 0 0 14px rgba(244,162,58,0.6);
  animation: next-pulse 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes next-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244,162,58,0.18), 0 0 14px rgba(244,162,58,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(244,162,58,0.05), 0 0 22px rgba(244,162,58,0.85); }
}
.next-up .label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-soft, #f4a23a);
}
.next-up .div {
  width: 1px; height: 16px;
  background: rgba(244,162,58,0.35);
}
.next-up .event {
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "SOFT" 30;
  font-size: 15px; line-height: 1; color: #f6f3ec;
  letter-spacing: -0.01em;
}
.next-up .event .sep { color: rgba(246,243,236,0.4); margin: 0 0.5em; }
.next-up .arr {
  color: var(--accent-soft, #f4a23a); font-size: 16px;
  margin-left: 4px;
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.next-up:hover .arr { transform: translateX(4px); }
@media (max-width: 640px) {
  .next-up { padding: 10px 16px 10px 14px; }
  .next-up .label, .next-up .div { display: none; }
  .next-up .event { font-size: 13.5px; }
}
.pill .ico { width: 14px; height: 14px; opacity: 0.7; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pill-dot.warm { background: var(--accent-warm); }
.pill-dot.soft { background: var(--accent-soft); }

/* ============================ EYEBROW / LABEL ============================
   Small pill-shaped chip with a soft blue glow. Replaces the previous
   underline-dash style with something that reads as an interactive token.
============================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  padding: 7px 14px 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(39, 69, 214, 0.08) 0%, rgba(39, 69, 214, 0.03) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(39, 69, 214, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 0 4px rgba(39, 69, 214, 0.03),
    0 0 20px rgba(39, 69, 214, 0.18),
    0 0 40px -8px rgba(39, 69, 214, 0.22);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(39, 69, 214, 0.7), 0 0 4px rgba(39, 69, 214, 1);
}
/* On dark hero backdrops, switch to warm gold treatment for contrast */
.hero .eyebrow {
  color: var(--accent-soft, #f4a23a);
  background: linear-gradient(180deg, rgba(244, 162, 58, 0.12) 0%, rgba(244, 162, 58, 0.04) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(244, 162, 58, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 4px rgba(244, 162, 58, 0.03),
    0 0 24px rgba(244, 162, 58, 0.22),
    0 0 50px -8px rgba(244, 162, 58, 0.28);
}
.hero .eyebrow::before {
  background: var(--accent-soft, #f4a23a);
  box-shadow: 0 0 10px rgba(244, 162, 58, 0.75), 0 0 4px rgba(244, 162, 58, 1);
}
/* On dark footer-cta backdrop, same gold treatment */
.footer-cta .eyebrow {
  color: var(--accent-soft, #f4a23a);
  background: linear-gradient(180deg, rgba(244, 162, 58, 0.12) 0%, rgba(244, 162, 58, 0.04) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(244, 162, 58, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 24px rgba(244, 162, 58, 0.22),
    0 0 50px -8px rgba(244, 162, 58, 0.28);
}
.footer-cta .eyebrow::before {
  background: var(--accent-soft, #f4a23a);
  box-shadow: 0 0 10px rgba(244, 162, 58, 0.75), 0 0 4px rgba(244, 162, 58, 1);
}

/* ============================ HEADINGS ============================
   Serif display (Fraunces) paired with sans body (Geist).
   .ser spans flip italic for typographic accent within a line.
============================ */
.h-display {
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "SOFT" 30, "wght" 400;
  font-weight: 400;
  font-size: clamp(42px, 6.4vw, 88px);
  line-height: 0.98; letter-spacing: -0.025em;
  color: var(--ink); margin: 0;
}
.h-display .ser {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
  color: var(--ink);
}
.h-display .sans {
  font-family: var(--sans); font-weight: 500;
  letter-spacing: -0.045em;
}
.h-1 {
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "SOFT" 40, "wght" 400;
  font-weight: 400;
  font-size: clamp(40px, 5.8vw, 80px);
  line-height: 0.96; letter-spacing: -0.025em;
  color: var(--ink); margin: 0;
}
.h-1 .ser {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 400;
}
.h-2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 40, "wght" 400;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.02; letter-spacing: -0.02em;
  color: var(--ink); margin: 0;
}
.h-2 .ser { font-style: italic; font-variation-settings: "opsz" 72, "SOFT" 100, "wght" 400; }
.h-3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 500;
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
.h-3 .ser { font-style: italic; font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400; }
.lead {
  font-family: var(--sans); font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55; color: var(--ink-2); font-weight: 400;
  max-width: 60ch; margin: 0;
}
.lead-lg {
  font-family: var(--sans); font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5; color: var(--ink-2); font-weight: 400;
  max-width: 56ch; margin: 0;
}
p { margin: 0; }

/* ============================ HERO ============================
   Dark, cinematic. Animated organic gradient blobs (monopo-style)
   on a near-black navy stage with grain texture.
============================ */
.hero {
  position: relative;
  /* No horizontal padding on the outer hero — .hero-grid inside owns it
     so the content edge matches .container exactly. */
  padding: 150px 0 90px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden;
  background: #050811;
  color: var(--paper, #f3f2ee);
  isolation: isolate;

  /* Default blob colors — page-specific overrides set on .hero inline */
  --b1: #2745d6;   /* dark blue, dominant */
  --b2: #d9923a;   /* warm amber accent */
  --b3: #3a6a5a;   /* muted teal accent */
  --b4: #1a2882;   /* deeper indigo */
}
.hero-grid {
  max-width: var(--max-w); margin: 0 auto;
  width: 100%;
  padding: 0 var(--pad-x);
  display: grid; gap: 50px; position: relative; z-index: 2;
}
.hero .h-display { color: #f6f3ec; }
.hero .h-display .ser { color: #f6f3ec; }
.hero .lead-lg { color: rgba(246,243,236,0.65); }
.hero .lead { color: rgba(246,243,236,0.65); }
.hero .eyebrow { color: rgba(246,243,236,0.5); }
.hero .hero-meta { border-top-color: rgba(246,243,236,0.1); }
.hero .hero-meta-item .k { color: rgba(246,243,236,0.45); }
.hero .hero-meta-item .v { color: #f6f3ec; }
.hero .pill {
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  color: rgba(246,243,236,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.07),
    0 4px 12px rgba(0,0,0,0.25);
}

/* On dark hero, primary button switches to white-on-dark for contrast pop */
.hero .btn-primary {
  background: linear-gradient(180deg, #ffffff 0%, #e8e4dc 100%);
  color: #050811;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    0 1px 1px rgba(0,0,0,0.1),
    0 6px 14px rgba(0,0,0,0.3),
    0 18px 32px -8px rgba(0,0,0,0.45),
    0 32px 50px -16px rgba(39,69,214,0.4);
}
.hero .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    0 10px 20px rgba(0,0,0,0.35),
    0 24px 40px -8px rgba(0,0,0,0.5),
    0 40px 64px -16px rgba(39,69,214,0.55);
}
.hero .btn-light {
  background: rgba(255,255,255,0.06);
  color: #f6f3ec;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.14),
    0 6px 16px rgba(0,0,0,0.25),
    0 20px 36px -10px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.hero .btn-light:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}
.hero-pills {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.hero-cta-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 32px;
}
.hero-meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line);
}
.hero-meta-item .k {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 4px;
}
.hero-meta-item .v {
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
}

/* ===== Animated organic gradient blobs (monopo-style) =====
   Four big soft radial blobs slowly drift across the dark stage.
   Mix-blend-mode: screen makes them glow additively.
   Grain overlay on top for the moody filmic texture.
================================================================== */
.hero-atmo {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  /* cursor-driven, smoothed in JS */
  --mx: 50%;
  --my: 50%;
  --px: 0px;  /* parallax x */
  --py: 0px;  /* parallax y */
}
.hero-atmo .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
  transition: background 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cursor stage: a zero-size marker positioned at the cursor.
   Cursor blobs nest inside and center themselves with translate(-50%,-50%). */
.hero-atmo .cursor-stage {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  transform: translate3d(var(--mx, 50%), var(--my, 50%), 0);
  will-change: transform;
}

/* Cursor-follow highlight blob, painted in the dominant dark blue */
.hero-atmo .blob-cursor {
  position: absolute; top: 0; left: 0;
  width: 46vw; height: 46vw;
  max-width: 760px; max-height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--b1) 0%, transparent 62%);
  filter: blur(80px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: opacity;
}
.hero-atmo.is-active .blob-cursor { opacity: 0.9; }

/* Subtle secondary highlight in warm amber for color contrast */
.hero-atmo .blob-cursor-2 {
  position: absolute; top: 0; left: 0;
  width: 28vw; height: 28vw;
  max-width: 480px; max-height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--b2) 0%, transparent 65%);
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: opacity;
}
.hero-atmo.is-active .blob-cursor-2 { opacity: 0.55; }
.hero-atmo .blob-1 {
  width: 75vw; height: 75vw; max-width: 1100px; max-height: 1100px;
  top: -22%; left: -18%;
  background: radial-gradient(circle, var(--b1) 0%, transparent 64%);
  opacity: 0.95;
  animation: drift-a 16s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.hero-atmo .blob-2 {
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  bottom: -22%; right: -15%;
  background: radial-gradient(circle, var(--b2) 0%, transparent 64%);
  opacity: 0.78;
  animation: drift-b 19s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.hero-atmo .blob-3 {
  width: 55vw; height: 55vw; max-width: 820px; max-height: 820px;
  top: 28%; left: 28%;
  background: radial-gradient(circle, var(--b3) 0%, transparent 70%);
  opacity: 0.7;
  animation: drift-c 22s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.hero-atmo .blob-4 {
  width: 45vw; height: 45vw; max-width: 700px; max-height: 700px;
  top: -10%; right: 10%;
  background: radial-gradient(circle, var(--b4) 0%, transparent 68%);
  opacity: 0.85;
  animation: drift-d 14s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.hero-atmo .grain {
  position: absolute; inset: 0;
  opacity: 0.85;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-atmo .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(5,8,17,0.55) 95%);
  pointer-events: none;
}
.hero-atmo .fade-bottom { display: none; }

/* Closed-loop orbital paths so motion never jumps at the cycle boundary.
   Translates are big (25–45%) so even the largest blobs visibly swing across the stage. */
/* Heavy rain-fall feel: blobs travel mostly UP/DOWN across ~120% of their
   own height. Almost zero horizontal drift so the motion reads as actual
   vertical falling rather than diagonal drift. Each blob runs on its own
   timing and starts from a different point in the cycle. */
@keyframes drift-a {
  0%   { transform: translate(0%, -40%)  scale(1); }
  25%  { transform: translate(2%, 20%)   scale(1.04); }
  50%  { transform: translate(-1%, 70%)  scale(0.94); }
  75%  { transform: translate(1%, 30%)   scale(1.06); }
  100% { transform: translate(0%, -40%)  scale(1); }
}
@keyframes drift-b {
  0%   { transform: translate(0%, 40%)   scale(1); }
  25%  { transform: translate(-1%, -20%) scale(1.08); }
  50%  { transform: translate(1%, -70%)  scale(0.92); }
  75%  { transform: translate(-2%, -10%) scale(1.04); }
  100% { transform: translate(0%, 40%)   scale(1); }
}
@keyframes drift-c {
  0%   { transform: translate(0%, -55%)  scale(1); }
  30%  { transform: translate(2%, 15%)   scale(1.06); }
  55%  { transform: translate(-1%, 60%)  scale(0.9); }
  80%  { transform: translate(1%, 25%)   scale(1.08); }
  100% { transform: translate(0%, -55%)  scale(1); }
}
@keyframes drift-d {
  0%   { transform: translate(0%, 55%)   scale(1); }
  30%  { transform: translate(-1%, -10%) scale(1.04); }
  55%  { transform: translate(2%, -60%)  scale(1.1); }
  80%  { transform: translate(-2%, -25%) scale(0.96); }
  100% { transform: translate(0%, 55%)   scale(1); }
}

/* Atmosphere swap pill button — glassy white on dark hero */
.atmo-swap {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 11px; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  background: rgba(255,255,255,0.08);
  color: #f6f3ec; cursor: pointer;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 4px 10px rgba(0,0,0,0.18),
    0 14px 26px -6px rgba(0,0,0,0.32);
  transition: transform 2s, box-shadow 2s, background 2s;
}
.atmo-swap:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 8px 18px rgba(0,0,0,0.28),
    0 22px 38px -8px rgba(0,0,0,0.45);
}
.atmo-swap:active { transform: translateY(0); }
.atmo-swap .ring {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor; position: relative; display: inline-block;
}
.atmo-swap .ring::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px dashed currentColor; opacity: 0.5;
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.atmo-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(246,243,236,0.55);
  padding: 8px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.atmo-meta .n { color: #f6f3ec; font-weight: 500; }
.atmo-meta .sep { opacity: 0.4; }
.hero-atmo-row {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 26px;
}

/* ============================ CURSOR DOT ============================
   Glowing white dot follows the cursor. Hidden on touch devices.
============================ */
/* Custom cursor disabled (perf cost). Native cursor handles everything. */
.cursor-dot { display: none; }

/* ============================ SOFT CARDS (popped-out 3D) ============================ */
.soft-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  border: 0;
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.2vw, 44px);
  box-shadow: var(--shadow-card);
  transition: box-shadow 2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.soft-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.soft-card.tall { min-height: 380px; display: flex; flex-direction: column; }
.soft-card-visual {
  flex: 1; min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 24px;
}
.soft-card h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 500;
  font-weight: 500; font-size: 24px;
  letter-spacing: -0.015em; margin: 0 0 8px;
}
.soft-card h3 .ser { font-style: italic; font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400; }
.soft-card p {
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  color: var(--ink-3); margin: 0;
}
.soft-card .num-tag {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  letter-spacing: 0.05em;
}

/* Pill row below cards (orbai-style) */
.pill-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 32px;
}
.pill-row .pill { font-size: 13.5px; padding: 9px 16px 9px 14px; }
.pill-row .pill svg { width: 15px; height: 15px; opacity: 0.6; }

/* ============================ NEUMORPHIC VISUALS ============================ */
.neu-orb {
  width: 140px; height: 140px; border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #ececea);
  box-shadow: inset 8px 8px 16px rgba(10,10,10,0.06), inset -8px -8px 16px rgba(255,255,255,0.95), 0 6px 20px rgba(10,10,10,0.06);
  position: relative;
}
.neu-orb::after {
  content: ''; position: absolute; top: 26%; right: 26%;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 2px 6px rgba(10,10,10,0.2);
}
.neu-orb .hand {
  position: absolute; top: 50%; left: 50%;
  width: 50%; height: 3px; background: var(--ink);
  border-radius: 4px;
  transform-origin: left center;
  transform: translate(0, -50%) rotate(-25deg);
}

.neu-bars {
  display: flex; align-items: flex-end; gap: 10px; height: 140px; position: relative;
}
.neu-bars .bar {
  width: 28px; border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f0efeb);
  box-shadow: 4px 4px 12px rgba(10,10,10,0.06), -4px -4px 12px rgba(255,255,255,0.9);
}
.neu-bars .bar:nth-child(1) { height: 50%; }
.neu-bars .bar:nth-child(2) { height: 95%; }
.neu-bars .bar:nth-child(3) { height: 35%; }
.neu-bars .bar:nth-child(4) { height: 70%; }
.neu-bars .bar:nth-child(5) { height: 28%; }
.neu-bars .tag {
  position: absolute; padding: 5px 11px; background: var(--bg-elev);
  border-radius: var(--r-pill); font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.neu-bars .tag.t1 { top: -14px; left: 18%; }
.neu-bars .tag.t2 { top: 35%; right: -4px; }

.neu-net {
  width: 220px; height: 140px; position: relative;
}
.neu-net .node {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #ececea);
  box-shadow: 4px 4px 12px rgba(10,10,10,0.06), -4px -4px 12px rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
}
.neu-net .node svg { width: 20px; height: 20px; color: var(--ink); }
.neu-net .node.lg { width: 72px; height: 72px; }
.neu-net .node.lg svg { width: 30px; height: 30px; }
.neu-net .n1 { top: 10px; left: 18px; }
.neu-net .n2 { top: 30px; right: 0; }
.neu-net .n3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.neu-net .center { top: 50%; left: 50%; transform: translate(-50%, -55%); }
.neu-net svg.curve {
  position: absolute; inset: 0; width: 100%; height: 100%;
  stroke: var(--line-2); stroke-width: 1.5; fill: none;
}

/* Token-style decorative chip */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--bg-elev); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); color: var(--ink);
}
.chip svg { width: 24px; height: 24px; }

/* ============================ FEATURE LINE (stat row) ============================ */
.feature-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  border-radius: var(--r-lg); overflow: hidden;
  border: 0;
  /* Heavy 3D shadow stack like the pillar cards */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.05),
    inset 0 0 0 1px rgba(10,10,10,0.05),
    0 1px 2px rgba(10,10,10,0.04),
    0 4px 8px rgba(10,10,10,0.05),
    0 12px 24px -4px rgba(10,10,10,0.08),
    0 28px 48px -12px rgba(10,10,10,0.13),
    0 56px 80px -24px rgba(10,10,10,0.16);
  position: relative;
}
.feature-row .cell {
  background: transparent;
  padding: 32px 28px 30px;
  opacity: 0; transform: translateY(28px);
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex; flex-direction: column; gap: 0;
}
/* Subtle vertical divider between cells (right edge of each except last) */
.feature-row .cell + .cell::before {
  content: '';
  position: absolute;
  top: 18%; bottom: 18%; left: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.1) 50%, transparent 100%);
}
.feature-row.is-in .cell { opacity: 1; transform: none; }
.feature-row.is-in .cell:nth-child(1) { transition-delay: 0s; }
.feature-row.is-in .cell:nth-child(2) { transition-delay: 0.14s; }
.feature-row.is-in .cell:nth-child(3) { transition-delay: 0.28s; }
.feature-row.is-in .cell:nth-child(4) { transition-delay: 0.42s; }

/* Small mono "key" label above the big number (e.g. STUDENTS) */
.feature-row .key {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-row .key::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(39, 69, 214, 0.6);
}
.feature-row.is-in .cell .key { opacity: 1; transform: none; }
.feature-row.is-in .cell:nth-child(1) .key { transition-delay: 0.05s; }
.feature-row.is-in .cell:nth-child(2) .key { transition-delay: 0.19s; }
.feature-row.is-in .cell:nth-child(3) .key { transition-delay: 0.33s; }
.feature-row.is-in .cell:nth-child(4) .key { transition-delay: 0.47s; }

.feature-row .num {
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s ease;
  margin-bottom: 16px;
}
.feature-row .lbl {
  opacity: 0; transform: translateY(10px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  /* Bumped from quiet 13px muted to a readable 15px ink-2 with sans-serif weight */
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-2);
  max-width: 26ch;
}
.feature-row.is-in .cell .lbl { opacity: 1; transform: none; }
.feature-row.is-in .cell:nth-child(1) .lbl { transition-delay: 1.0s; }
.feature-row.is-in .cell:nth-child(2) .lbl { transition-delay: 1.14s; }
.feature-row.is-in .cell:nth-child(3) .lbl { transition-delay: 1.28s; }
.feature-row.is-in .cell:nth-child(4) .lbl { transition-delay: 1.42s; }
.feature-row .num {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400;
  font-size: clamp(40px, 4.8vw, 60px); font-weight: 400;
  letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feature-row .lbl-old-keep {
  font-size: 13px; color: var(--ink-3);
}
@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr 1fr; }
}

/* ============================ SECTION SPACING ============================ */
.section {
  padding: clamp(72px, 10vh, 130px) 0;
}
.section-tight { padding: clamp(48px, 6vh, 80px) 0; }
.section-dark {
  background: var(--bg-dark); color: rgba(255,255,255,0.85);
}
.section-dark .h-1, .section-dark .h-2, .section-dark .h-3 { color: #fff; }
.section-dark .lead, .section-dark .lead-lg { color: rgba(255,255,255,0.65); }
.section-dark .eyebrow { color: rgba(255,255,255,0.55); }
.section-head {
  max-width: 740px; margin: 0 auto 48px; text-align: center;
}
.section-head.left { text-align: left; margin-left: 0; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .lead { margin: 18px auto 0; }
.section-head.left .lead { margin: 18px 0 0; }

/* ============================ PILLAR CARDS (4-up grid) ============================ */
.pillar-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
/* Cursor-following 3D parallax + a clear translateZ pop on hover.
   JS writes --rx / --ry continuously from cursor; CSS transitions --pop on
   hover. Both compose into one transform that recomputes per frame. */
@property --rx  { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --ry  { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --pop { syntax: '<length>'; inherits: false; initial-value: 0px;  }

.pillar-grid {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.pillar-card {
  position: relative; padding: 36px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  border: 0; border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 14px; min-height: 300px;

  --rx: 0deg;
  --ry: 0deg;
  --pop: 0px;
  transform: translate3d(0, 0, var(--pop)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: box-shadow 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Hover: no transform, just a small tight blue glow. Slow fade-in (2.4s). */
.pillar-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.04),
    inset 0 0 0 1px rgba(39, 69, 214, 0.28),
    0 1px 2px rgba(10,10,10,0.04),
    0 4px 8px rgba(10,10,10,0.05),
    0 12px 24px -4px rgba(10,10,10,0.08),
    0 0 20px rgba(39, 69, 214, 0.14),
    0 0 36px rgba(39, 69, 214, 0.08);
}

/* Reveal: fade-in only — JS continues to drive the transform */
.reveal-stagger > .pillar-card {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-in > .pillar-card { opacity: 1; }
.reveal-stagger > .pillar-card,
.reveal-stagger.is-in > .pillar-card {
  transform: translate3d(0, 0, var(--pop)) rotateX(var(--rx)) rotateY(var(--ry));
}

@media (prefers-reduced-motion: reduce) {
  .pillar-card { transform: none; }
}
@media (hover: none), (pointer: coarse) {
  .pillar-card { transform: none; }
}
.pillar-card .roman {
  font-family: var(--serif); font-style: italic; font-size: 48px;
  color: var(--ink-4); line-height: 1; margin-bottom: -4px;
}
.pillar-card h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 500;
  font-weight: 500; font-size: 26px;
  letter-spacing: -0.015em; margin: 0;
}
.pillar-card h3 .ser { font-style: italic; font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 400; }
.pillar-card p {
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  color: var(--ink-3); margin: 0; flex: 1;
}
.pillar-card .tag-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
}
.pillar-card .tag {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-3);
  padding: 4px 9px; border-radius: 6px;
  background: var(--bg-sunken);
}
@media (max-width: 800px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

/* ============================ HOW-IT-WORKS GRID (3-up) ============================ */
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 980px) { .how-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .how-grid { grid-template-columns: 1fr; } }

/* ============================ EVENT CARDS ============================ */
.event-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  border: 0; border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 52px);
  box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: 3fr 2fr; gap: 48px;
}
@media (max-width: 880px) {
  .event-card { grid-template-columns: 1fr; gap: 32px; }
}
.event-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.event-speakers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.speaker-row {
  border-top: 1px solid var(--line); padding-top: 12px;
}
.speaker-row .nm { font-family: var(--sans); font-weight: 600; font-size: 15px; }
.speaker-row .ro { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* ============================ PEOPLE GRID ============================ */
.people-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 980px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .people-grid { grid-template-columns: 1fr; } }
.person-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  border: 0; border-radius: var(--r-lg);
  padding: 26px;
  transition: box-shadow 2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-card);
}
.person-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.person-avatar {
  position: relative;
  width: 100%; aspect-ratio: 1; border-radius: var(--r-md); margin-bottom: 16px;
  background: linear-gradient(145deg, #ececea, #d8d6d1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: 32px; color: var(--ink-3);
  overflow: hidden;
}
/* Optional <img> overlay. If src is missing or fails to load, the initials
   underneath show through naturally. */
.person-avatar img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  background: linear-gradient(145deg, #ececea, #d8d6d1);
}
.person-name {
  font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
}
.person-role {
  font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin-top: 2px;
}

/* ============================ FOUNDER CARDS ============================ */
.founder-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px;
}
@media (max-width: 720px) { .founder-grid { grid-template-columns: 1fr; } }
.founder-card {
  background: var(--bg-dark-2);
  border-radius: var(--r-lg);
  padding: 28px;
  color: #fff;
  display: flex; flex-direction: column;
}
.founder-photo {
  width: 88px; height: 88px;
  border-radius: 14px; overflow: hidden;
  margin-bottom: 20px;
  background: #222;
  flex-shrink: 0;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-name {
  font-family: var(--sans); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; color: #fff; margin-bottom: 4px;
}
.founder-role {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 18px;
}
.founder-bio {
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  color: rgba(255,255,255,0.58); flex: 1; margin-bottom: 22px;
}
.founder-links { display: flex; gap: 8px; flex-wrap: wrap; }
.founder-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.8);
  transition: background 0.15s, border-color 0.15s;
}
.founder-link:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }
.founder-link svg { width: 13px; height: 13px; flex-shrink: 0; fill: currentColor; }

/* ============================ FAQ / LIST ============================ */
.q-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.q-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.q-item summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; list-style: none;
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 500;
  font-weight: 500; font-size: 20px; letter-spacing: -0.01em;
}
.q-item summary::-webkit-details-marker { display: none; }
.q-item summary::after { content: '+'; font-size: 24px; font-weight: 300; transition: transform 2s; }
.q-item[open] summary::after { transform: rotate(45deg); }
.q-item p { margin-top: 12px; color: var(--ink-3); }

/* ============================ MARQUEE ============================ */
.marquee {
  overflow: hidden; padding: 20px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 56px; white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.marquee-track span {
  font-family: var(--display); font-weight: 500; font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: -0.02em; color: var(--ink-3); flex-shrink: 0;
}
.marquee-track span .ser { font-family: var(--serif); font-style: italic; color: var(--ink); padding: 0 12px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================ CTA / CLOSING ============================ */
.cta {
  position: relative; background: var(--bg-dark); color: #fff;
  border-radius: var(--r-xl); padding: clamp(48px, 7vw, 96px);
  overflow: hidden; isolation: isolate;
}
.cta::before {
  content: ''; position: absolute;
  top: -40%; right: -20%; width: 80%; height: 140%;
  background: radial-gradient(circle, rgba(39,69,214,0.35) 0%, transparent 60%);
  filter: blur(40px); z-index: -1;
}
.cta::after {
  content: ''; position: absolute;
  bottom: -30%; left: -10%; width: 60%; height: 100%;
  background: radial-gradient(circle, rgba(217,74,31,0.18) 0%, transparent 65%);
  filter: blur(50px); z-index: -1;
}
.cta .eyebrow { color: rgba(255,255,255,0.6); }
.cta .h-1 { color: #fff; margin: 18px 0 22px; max-width: 16ch; }
.cta .lead { color: rgba(255,255,255,0.65); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.cta .btn-light { background: #fff; color: var(--bg-dark); border-color: transparent; }
.cta .btn-light:hover { background: #f0f0f0; }
.cta .btn-ghost { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.2); }
.cta .btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ============================ FOOTER (unified, dark blue stage) ============================
   Big CTA up top + horizontal Pages/Connect rows + brand/copyright/social row.
   Replaces both the old .cta block and the previous .footer multi-column layout.
============================ */
.footer {
  position: relative;
  background: #050811;
  color: rgba(246,243,236,0.7);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.footer::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 18% -10%, rgba(39,69,214,0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 22%, rgba(26,40,130,0.45) 0%, transparent 65%),
    radial-gradient(ellipse at 105% 65%, rgba(58,92,240,0.3) 0%, transparent 65%);
  filter: blur(28px);
  pointer-events: none;
}
.footer::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }

.footer-cta {
  padding: clamp(90px, 16vh, 180px) var(--pad-x) clamp(80px, 12vh, 140px);
}
.footer-cta-inner {
  max-width: var(--max-w); margin: 0 auto;
}
.footer-cta .eyebrow { color: rgba(246,243,236,0.6); margin-bottom: 26px; }
.footer-cta .eyebrow::before { background: rgba(246,243,236,0.4); }
.footer-cta .h-1, .footer-cta .h-display {
  color: #f6f3ec; max-width: 18ch; margin: 0 0 30px;
}
.footer-cta .h-1 .ser, .footer-cta .h-display .ser { color: #f6f3ec; }
.footer-cta .lead, .footer-cta .lead-lg {
  color: rgba(246,243,236,0.55); margin: 0 0 38px; max-width: 52ch;
}
.footer-cta .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-cta .btn-primary {
  background: linear-gradient(180deg, #ffffff 0%, #e8e4dc 100%);
  color: #050811;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    0 1px 1px rgba(0,0,0,0.1),
    0 6px 14px rgba(0,0,0,0.3),
    0 18px 32px -8px rgba(0,0,0,0.45);
}
.footer-cta .btn-light {
  background: rgba(255,255,255,0.06); color: #f6f3ec;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.14),
    0 6px 16px rgba(0,0,0,0.25);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.footer-cta .btn-light:hover { background: rgba(255,255,255,0.12); }
.footer-cta .btn-ghost { color: rgba(246,243,236,0.85); box-shadow: inset 0 0 0 1px rgba(246,243,236,0.2); }
.footer-cta .btn-ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }

.footer-rows { border-top: 1px solid rgba(246,243,236,0.1); }
.footer-rows-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.footer-row {
  display: grid; grid-template-columns: 160px 1fr;
  align-items: center; gap: 0;
  padding: 28px 0;
  border-bottom: 1px solid rgba(246,243,236,0.08);
}
.footer-row:last-child { border-bottom: 0; }
.footer-row .label {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: rgba(246,243,236,0.85);
  padding-right: 28px;
  border-right: 1px solid rgba(246,243,236,0.1);
}
.footer-row .links {
  display: flex; justify-content: flex-start; flex-wrap: wrap;
  gap: 0;
  padding-left: 28px;
}
.footer-row .links a {
  font-family: var(--sans); font-size: 15px;
  color: rgba(246,243,236,0.85);
  padding: 0 clamp(14px, 2.4vw, 28px);
  border-right: 1px solid rgba(246,243,236,0.08);
  transition: color 2s;
}
.footer-row .links a:first-child { padding-left: 0; }
.footer-row .links a:last-child  { border-right: 0; }
.footer-row .links a:hover { color: #fff; }
@media (max-width: 720px) {
  .footer-row { grid-template-columns: 1fr; gap: 10px; }
  .footer-row .label { border-right: 0; padding-right: 0; padding-bottom: 6px; }
  .footer-row .links { padding-left: 0; gap: 4px 0; flex-direction: column; }
  .footer-row .links a { border-right: 0; padding: 0; }
}

.footer-bottom-bar { padding: 32px var(--pad-x) 36px; }
.footer-bottom-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center; gap: 0;
}
.footer-bottom-inner > * + * {
  padding-left: 28px;
  border-left: 1px solid rgba(246,243,236,0.1);
}
.footer-bottom-inner > * + * + * { justify-self: end; }
.footer-brand-2 {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 60, "wght" 500;
  font-weight: 500; font-style: italic;
  font-size: 22px; letter-spacing: 0.01em;
  color: #d9923a;
  text-shadow: 0 0 14px rgba(217, 146, 58, 0.3);
  text-decoration: none;
}
.footer-brand-2 .brand-mark {
  width: 28px; height: 28px; flex-shrink: 0;
  color: #d9923a;
  filter: drop-shadow(0 0 6px rgba(217, 146, 58, 0.55));
}
.footer-brand-2 .dot { display: none; }
.footer-copy {
  text-align: center;
  font-family: var(--sans); font-size: 13.5px;
  color: rgba(246,243,236,0.45);
}
.footer-social { display: flex; gap: 8px; justify-self: end; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(246,243,236,0.06); color: rgba(246,243,236,0.75);
  box-shadow: inset 0 0 0 1px rgba(246,243,236,0.08);
  transition: background 2s, color 2s, transform 2s;
}
.footer-social a:hover {
  background: rgba(246,243,236,0.14); color: #fff; transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .footer-bottom-inner { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .footer-brand-2, .footer-social { justify-self: center; }
}

/* ============================ REVEAL ANIMATIONS ============================
   Long, generous durations + wide stagger so groups breathe in one-by-one
   rather than popping together. ~180ms between siblings reads as natural cascade.
============================ */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.4s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.6s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.8s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 1.0s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 1.2s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 1.4s; }

/* ============================ UTILITIES ============================ */
.text-mono { font-family: var(--mono); }
.text-serif { font-family: var(--serif); }
.text-center { text-align: center; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track { animation: none; }
  .hero-atmo::before, .hero-atmo::after { animation: none; }
}

/* ============================ QUIZ ============================
   Multi-step ICP intake. Soft 3D card with progress strip,
   choice grid, tag chips, form inputs, success state.
============================ */
.quiz-section { padding: clamp(60px, 10vh, 110px) 0 clamp(80px, 12vh, 140px); }

.quiz-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  border: 0; border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  max-width: 880px; margin: 0 auto;
}

.quiz-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(10,10,10,0.05);
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #5470ff 100%);
  width: 0%; border-radius: 0 999px 999px 0;
  transition: width 2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 14px rgba(39, 69, 214, 0.4);
}

.quiz-step {
  display: none;
  animation: quiz-fade-in 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.quiz-step.active { display: block; }
@keyframes quiz-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.quiz-step-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.quiz-step h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 80, "SOFT" 40, "wght" 400;
  font-weight: 400; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 14px; color: var(--ink); max-width: 22ch;
}
.quiz-step h2 .ser { font-style: italic; font-variation-settings: "opsz" 80, "SOFT" 100, "wght" 400; }
.quiz-step .lead {
  margin: 0 0 28px; max-width: 56ch;
}

/* ICP choice grid */
.choice-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin: 8px 0 28px;
}
@media (max-width: 640px) { .choice-grid { grid-template-columns: 1fr; } }
.choice-card {
  position: relative; text-align: left;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  border: 0; border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.06),
    inset 0 0 0 1px rgba(10,10,10,0.06),
    0 1px 2px rgba(10,10,10,0.04),
    0 8px 14px rgba(10,10,10,0.06),
    0 22px 36px -10px rgba(10,10,10,0.1);
  cursor: pointer;
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column; gap: 8px;
}
.choice-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.06),
    inset 0 0 0 1px rgba(10,10,10,0.08),
    0 1px 2px rgba(10,10,10,0.04),
    0 14px 22px rgba(10,10,10,0.08),
    0 32px 50px -10px rgba(10,10,10,0.16);
}
.choice-card.selected {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(39,69,214,0.2),
    inset 0 0 0 2px var(--accent),
    0 1px 2px rgba(10,10,10,0.04),
    0 16px 26px rgba(39,69,214,0.18),
    0 40px 60px -10px rgba(39,69,214,0.25);
}
.choice-card .ico {
  width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg-sunken);
  color: var(--ink); margin-bottom: 4px;
}
.choice-card.selected .ico { background: var(--accent); color: #fff; }
.choice-card .ico svg { width: 18px; height: 18px; }
.choice-card .title {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 500;
  font-weight: 500; font-size: 19px; letter-spacing: -0.015em;
  color: var(--ink);
}
.choice-card .desc {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.45;
  color: var(--ink-3);
}

/* Multi-select tag grid */
.tag-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 8px 0 28px;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  background: linear-gradient(180deg, #ffffff 0%, #ebe7df 100%);
  color: var(--ink); cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(10,10,10,0.06),
    inset 0 0 0 1px rgba(10,10,10,0.06),
    0 1px 2px rgba(10,10,10,0.05),
    0 4px 10px -2px rgba(10,10,10,0.08);
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tag-chip::before {
  content: ''; width: 14px; height: 14px; border-radius: 4px;
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px rgba(10,10,10,0.1);
  transition: background 0.2s, box-shadow 0.2s;
}
.tag-chip.selected {
  box-shadow:
    inset 0 0 0 1.5px var(--accent),
    inset 0 1px 0 rgba(255,255,255,1),
    0 6px 14px -2px rgba(39, 69, 214, 0.2),
    0 16px 26px -8px rgba(39, 69, 214, 0.18);
}
.tag-chip.selected::before {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Form inputs */
.quiz-field { margin-bottom: 20px; }
.quiz-field label {
  display: block;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink); margin-bottom: 8px;
}
.quiz-input, .quiz-textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: #ffffff;
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(10,10,10,0.1),
    inset 0 2px 4px rgba(10,10,10,0.04);
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  transition: box-shadow 2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: 0;
}
.quiz-input:focus, .quiz-textarea:focus {
  box-shadow:
    inset 0 0 0 2px var(--accent),
    inset 0 2px 4px rgba(10,10,10,0.04),
    0 0 0 4px rgba(39, 69, 214, 0.1);
}
.quiz-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.quiz-input::placeholder, .quiz-textarea::placeholder { color: var(--ink-4); }

.quiz-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 540px) { .quiz-row-2 { grid-template-columns: 1fr; } }

/* Quiz actions */
.quiz-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px; gap: 14px; flex-wrap: wrap;
}
.quiz-actions .left, .quiz-actions .right { display: flex; gap: 10px; align-items: center; }
.quiz-back {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink-3); cursor: pointer; padding: 12px 4px;
  transition: color 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.quiz-back:hover { color: var(--ink); }
.quiz-step-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4);
}

/* Success state */
.quiz-success { text-align: left; }
.quiz-success .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(39,69,214,0.1) 0%, rgba(39,69,214,0.04) 100%);
  color: var(--accent); font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(39,69,214,0.25);
  margin-bottom: 22px;
}
.quiz-success h2 { max-width: 24ch; margin-bottom: 16px; }
.quiz-success .reco-list {
  margin-top: 28px; display: flex; flex-direction: column; gap: 10px;
}
.quiz-success .reco {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.quiz-success .reco .ico {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px; background: var(--bg-elev);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.quiz-success .reco .ico svg { width: 16px; height: 16px; }
.quiz-success .reco .body { display: flex; flex-direction: column; gap: 2px; }
.quiz-success .reco .body strong {
  font-family: var(--display); font-variation-settings: "opsz" 24, "SOFT" 40, "wght" 500;
  font-weight: 500; font-size: 16px; color: var(--ink);
}
.quiz-success .reco .body span {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-3);
}

/* Error state */
.quiz-error {
  margin-top: 16px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(217, 74, 31, 0.08); color: var(--accent-warm);
  font-family: var(--sans); font-size: 13.5px;
  box-shadow: inset 0 0 0 1px rgba(217, 74, 31, 0.2);
}

/* Loading state on submit */
.btn[disabled] { opacity: 0.7; cursor: not-allowed; pointer-events: none; }

/* ============================ FOUNDER CARDS ============================
   Rich card for featured team members: photo + name + role + bio + links.
============================ */
.founder-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  margin-top: 24px;
}
@media (max-width: 880px) { .founder-grid { grid-template-columns: 1fr; } }

.founder-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f2ec 100%);
  border: 0; border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
  transition: box-shadow 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.founder-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(39, 69, 214, 0.25),
    0 1px 2px rgba(10,10,10,0.04),
    0 4px 8px rgba(10,10,10,0.05),
    0 12px 24px -4px rgba(10,10,10,0.08),
    0 0 20px rgba(39, 69, 214, 0.14),
    0 0 36px rgba(39, 69, 214, 0.08);
}
@media (max-width: 540px) {
  .founder-card { grid-template-columns: 1fr; padding: 24px; }
}

.founder-photo {
  width: 140px; height: 140px;
  border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(145deg, #ececea, #d8d6d1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "SOFT" 40, "wght" 500;
  font-weight: 500; font-size: 44px; color: var(--ink-3);
  position: relative;
}
.founder-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: linear-gradient(145deg, #ececea, #d8d6d1);
}

.founder-name {
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 40, "wght" 500;
  font-weight: 500; font-size: 22px; line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink); margin: 0;
}
.founder-role {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-top: 6px;
}
.founder-bio {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2); margin: 14px 0 16px;
}
.founder-links {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.founder-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--ink-2);
  text-decoration: none;
  transition: background 2s, color 2s;
}
.founder-link:hover { background: var(--ink); color: var(--paper, #fff); }
.founder-link svg { width: 14px; height: 14px; fill: currentColor; }

/* ============================ CALLOUT SECTION ============================
   Full-viewport callout for a single thesis paragraph. Large serif type.
============================ */
.callout {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(80px, 12vh, 160px) 0;
  position: relative;
  background: var(--bg);
  overflow: hidden;
}
.callout::before {
  /* Subtle warm gradient behind the text */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(39,69,214,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 80% 70%, rgba(217,146,58,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.callout-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--pad-x);
  width: 100%; position: relative; z-index: 1;
}
.callout-eyebrow {
  margin-bottom: 36px;
}
.callout-text {
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "SOFT" 40, "wght" 400;
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 1.12; letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.callout-text .ser {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 400;
  color: var(--accent);
}
.callout-text .light {
  color: var(--ink-3);
}

/* ============================ DECK-OF-CARDS PARALLAX ============================
   Every section is `position: sticky; top: 0` with `min-height: 100vh` and
   a progressively higher z-index, so each one pins to the top of the
   viewport as you scroll past, and the next slides UP over it. Combined
   with rounded tops, top shadow, and alternating background shades, the
   whole page reads as a deck of cards continuously folding over itself.
============================ */
.hero {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Spacer is no longer needed once hero is sticky — but keep the class
   defined so any stray usages collapse to nothing instead of breaking
   layout. */
.hero-spacer { display: none; }

/* Sections after the hero flow normally with visual layering — rounded
   tops + upward shadow + slight overlap. NOT sticky / 100vh enforced
   because that was clipping content on pages where sections are taller
   than viewport. The hero is still sticky so it parallaxes; everything
   else just stacks like a soft card cascade. */
.hero ~ section,
.hero ~ footer {
  position: relative;
  margin-top: -36px;
  border-radius: 36px 36px 0 0;
  background: var(--bg);
  box-shadow:
    0 -6px 14px -4px rgba(10,10,10,0.12),
    0 -18px 36px -12px rgba(10,10,10,0.18),
    0 -40px 80px -32px rgba(10,10,10,0.22),
    0 -2px 0 rgba(10,10,10,0.04);
}

/* Alternating shade so the rounded boundary reads visually. */
.hero ~ section:nth-of-type(odd)  { background: var(--bg); }
.hero ~ section:nth-of-type(even) { background: var(--bg-sunken); }

/* Footer keeps its dark stage. */
.hero ~ footer { background: #050811; }

/* Progressive z-index — later cards cover earlier ones when both pinned. */
.hero ~ section:nth-of-type(1) { z-index: 2; }
.hero ~ section:nth-of-type(2) { z-index: 3; }
.hero ~ section:nth-of-type(3) { z-index: 4; }
.hero ~ section:nth-of-type(4) { z-index: 5; }
.hero ~ section:nth-of-type(5) { z-index: 6; }
.hero ~ section:nth-of-type(6) { z-index: 7; }
.hero ~ section:nth-of-type(7) { z-index: 8; }
.hero ~ section:nth-of-type(8) { z-index: 9; }
.hero ~ section:nth-of-type(9) { z-index: 10; }
.hero ~ section:nth-of-type(10) { z-index: 11; }
.hero ~ section:nth-of-type(11) { z-index: 12; }
.hero ~ footer { z-index: 20; }

@media (max-width: 720px) {
  .hero ~ section,
  .hero ~ footer { border-radius: 24px 24px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .hero ~ section, .hero ~ footer {
    position: relative;
    min-height: auto;
  }
}

/* ============================ RAIN SEAL ============================
   Full circular seal artwork. Gold on dark backgrounds (footer-cta),
   subtle on light backgrounds. Scales with the container.
============================ */
.seal {
  display: inline-block;
  width: clamp(120px, 18vw, 200px);
  aspect-ratio: 1;
  color: #d9923a;
  filter: drop-shadow(0 0 24px rgba(217, 146, 58, 0.25));
}
.seal img, .seal svg { width: 100%; height: 100%; display: block; }
.footer-cta .seal {
  margin-bottom: 32px;
  filter: drop-shadow(0 0 28px rgba(244, 162, 58, 0.35));
}
.seal-stage {
  display: flex; justify-content: center; align-items: center;
  padding: clamp(40px, 6vh, 80px) 0;
}

/* ============================ BUNDLE SECTION ============================
   Wraps Past Events + Stats + Pillars + Operating Model + Programs +
   Marquee + Footer into one continuous block on the homepage. It still
   participates in the deck-of-cards parallax (sticky pin over Featured
   Event), but inside it everything flows naturally — no per-section fold.
============================ */
.hero ~ section.bundle {
  display: block;             /* not flex centering */
  background: var(--bg);      /* override the alternating nth-of-type bg */
  border-radius: 36px 36px 0 0;
}
/* Inner sections inside the bundle are NOT hero siblings so they don't
   inherit the sticky parallax treatment. Make sure they render as normal
   blocks with no rounded tops or upward shadows. */
.bundle section,
.bundle footer {
  position: relative;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: auto;
  display: block;
  top: auto;
}
/* The footer inside the bundle keeps its dark stage but loses the card
   rounding so it flows continuously into the page bottom. */
.bundle footer.footer {
  background: #050811;
  margin-top: 0;
}
@media (max-width: 720px) {
  .hero ~ section.bundle { border-radius: 24px 24px 0 0; }
}