/* ============================================
   STARSEEDS ON POINT — Cosmic Marketing Site
   ============================================ */

:root {
  /* Palette */
  --deep-space: #0a0118;
  --midnight: #1a0b2e;
  --midnight-2: #140822;
  --violet: #4a1d96;
  --violet-2: #6d28d9;
  --lavender: #c084fc;
  --lavender-soft: #d8b4fe;
  --gold: #fbbf24;
  --gold-soft: #fde68a;
  --text: #f5f3ff;
  --text-dim: #b8b3d4;
  --text-mute: #8a85a8;
  --border: rgba(192, 132, 252, 0.18);
  --border-strong: rgba(192, 132, 252, 0.35);

  /* Fonts */
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Sizing */
  --container: 1200px;
  --radius: 16px;
  --radius-lg: 24px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ===== COSMIC BACKGROUND ===== */
.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, #1a0b2e 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, #2d1065 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, #1e1b4b 0%, transparent 50%),
    var(--deep-space);
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}
.nebula-1 {
  top: -10%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
  animation: drift1 28s ease-in-out infinite;
}
.nebula-2 {
  bottom: 10%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.35), transparent 70%);
  animation: drift2 36s ease-in-out infinite;
}
.nebula-3 {
  top: 40%;
  left: 30%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.08), transparent 70%);
  animation: drift3 44s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.1); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -60px) scale(1.15); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  50% { transform: translate(40px, -30px); opacity: 0.4; }
}

/* Starfield — generated via box-shadow */
.stars {
  position: absolute;
  inset: 0;
  background: transparent;
}
.stars::before,
.stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
}

.stars-small::before {
  box-shadow:
    23px 412px #fff, 156px 89px #fff, 287px 234px #fff, 412px 67px #fff,
    523px 345px #fff, 645px 123px #fff, 723px 456px #fff, 834px 78px #fff,
    945px 289px #fff, 1056px 423px #fff, 1145px 156px #fff, 1234px 367px #fff,
    78px 567px #fff, 189px 689px #fff, 312px 745px #fff, 423px 612px #fff,
    534px 823px #fff, 656px 712px #fff, 767px 889px #fff, 878px 645px #fff,
    989px 756px #fff, 1089px 867px #fff, 1198px 723px #fff, 67px 934px #fff,
    198px 1023px #fff, 312px 1145px #fff, 445px 967px #fff, 567px 1089px #fff,
    689px 1234px #fff, 812px 1067px #fff, 934px 1198px #fff, 1056px 989px #fff,
    1178px 1123px #fff, 145px 1345px #fff, 278px 1456px #fff, 389px 1287px #fff,
    512px 1389px #fff, 634px 1512px #fff, 756px 1378px #fff, 867px 1489px #fff,
    978px 1567px #fff, 1098px 1423px #fff, 234px 1645px #fff, 367px 1734px #fff,
    489px 1612px #fff, 612px 1745px #fff, 734px 1834px #fff, 856px 1689px #fff,
    978px 1789px #fff, 1098px 1912px #fff, 45px 1234px #fff, 167px 1923px #fff;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.stars-small::after {
  box-shadow:
    89px 178px #fff, 234px 312px #fff, 367px 423px #fff, 478px 156px #fff,
    589px 267px #fff, 678px 389px #fff, 789px 512px #fff, 867px 198px #fff,
    978px 345px #fff, 1089px 467px #fff, 1198px 234px #fff, 56px 678px #fff,
    178px 789px #fff, 289px 678px #fff, 412px 856px #fff, 534px 745px #fff,
    645px 967px #fff, 767px 834px #fff, 878px 956px #fff, 989px 723px #fff,
    1098px 845px #fff, 1198px 956px #fff, 123px 1078px #fff, 245px 1167px #fff,
    378px 1256px #fff, 489px 1078px #fff, 612px 1189px #fff, 723px 1356px #fff,
    845px 1145px #fff, 967px 1267px #fff, 1089px 1389px #fff, 1198px 1078px #fff,
    89px 1456px #fff, 212px 1567px #fff, 334px 1678px #fff, 456px 1456px #fff,
    578px 1589px #fff, 689px 1712px #fff, 812px 1567px #fff, 934px 1678px #fff,
    1056px 1789px #fff, 1178px 1612px #fff, 67px 1845px #fff, 189px 1956px #fff;
  animation: twinkle 5s ease-in-out infinite alternate-reverse;
  opacity: 0.7;
}

.stars-medium::before {
  width: 1.5px;
  height: 1.5px;
  box-shadow:
    134px 245px #c084fc, 267px 123px #c084fc, 389px 312px #c084fc,
    512px 178px #c084fc, 634px 423px #c084fc, 745px 234px #c084fc,
    856px 412px #c084fc, 978px 156px #fde68a, 1089px 345px #c084fc,
    156px 534px #c084fc, 278px 645px #fde68a, 389px 567px #c084fc,
    512px 723px #c084fc, 634px 678px #c084fc, 756px 834px #fde68a,
    878px 745px #c084fc, 989px 856px #c084fc, 1098px 678px #c084fc,
    234px 945px #c084fc, 356px 1067px #c084fc, 478px 956px #fde68a,
    589px 1089px #c084fc, 712px 978px #c084fc, 834px 1156px #c084fc,
    945px 1078px #c084fc, 1067px 1189px #fde68a, 178px 1267px #c084fc,
    289px 1389px #c084fc, 412px 1278px #c084fc, 534px 1412px #c084fc,
    656px 1334px #fde68a, 778px 1456px #c084fc, 889px 1389px #c084fc,
    1012px 1512px #c084fc, 1134px 1434px #c084fc, 234px 1645px #fde68a,
    356px 1567px #c084fc, 478px 1689px #c084fc, 612px 1612px #c084fc,
    734px 1745px #c084fc, 856px 1678px #c084fc, 978px 1812px #fde68a;
  animation: twinkle 6s ease-in-out infinite alternate;
}

.stars-large::before {
  width: 2.5px;
  height: 2.5px;
  box-shadow:
    234px 312px rgba(255, 255, 255, 0.9),
    567px 234px rgba(192, 132, 252, 0.9),
    867px 412px rgba(255, 255, 255, 0.9),
    345px 678px rgba(253, 230, 138, 0.85),
    712px 789px rgba(255, 255, 255, 0.9),
    1023px 567px rgba(192, 132, 252, 0.9),
    156px 956px rgba(255, 255, 255, 0.9),
    489px 1078px rgba(255, 255, 255, 0.9),
    823px 1189px rgba(253, 230, 138, 0.85),
    234px 1389px rgba(255, 255, 255, 0.9),
    634px 1456px rgba(192, 132, 252, 0.9),
    967px 1612px rgba(255, 255, 255, 0.9),
    345px 1789px rgba(253, 230, 138, 0.85),
    778px 1867px rgba(255, 255, 255, 0.9);
  animation: twinkle-bright 3s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}
@keyframes twinkle-bright {
  0% { opacity: 0.5; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* Shooting stars */
.shooting-stars {
  position: absolute;
  inset: 0;
}
.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: linear-gradient(to right, transparent, #fff, transparent);
  border-radius: 50%;
  box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.6);
}
.shooting-star::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
  transform-origin: left center;
}
.shooting-star:nth-child(1) {
  top: 15%; left: -100px;
  animation: shoot 12s ease-out infinite;
  animation-delay: 2s;
}
.shooting-star:nth-child(2) {
  top: 40%; left: -100px;
  animation: shoot 14s ease-out infinite;
  animation-delay: 7s;
}
.shooting-star:nth-child(3) {
  top: 70%; left: -100px;
  animation: shoot 16s ease-out infinite;
  animation-delay: 11s;
}
@keyframes shoot {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  5% { opacity: 1; }
  20% { opacity: 1; }
  30% { transform: translateX(120vw) translateY(40vh); opacity: 0; }
  100% { transform: translateX(120vw) translateY(40vh); opacity: 0; }
}

/* ===== LAYOUT ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding: clamp(5rem, 10vw, 9rem) 0;
  position: relative;
}
.section-alt {
  background:
    linear-gradient(180deg, transparent, rgba(26, 11, 46, 0.4) 20%, rgba(26, 11, 46, 0.4) 80%, transparent);
}

.section-head {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 760px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 1rem;
}
.kicker.gold { color: var(--gold); }

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  background: linear-gradient(180deg, #fff 0%, #d8b4fe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-sub {
  font-size: 1.125rem;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0 auto;
}

.lede {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--text);
  font-weight: 400;
  font-style: italic;
}

/* ===== HEADER / NAV ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(10, 1, 24, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.site-header.scrolled {
  background: rgba(10, 1, 24, 0.85);
  border-bottom-color: var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text);
}
.brand-mark {
  width: 32px;
  height: 32px;
  color: var(--lavender);
  filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.5));
}
.brand-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.brand-text em {
  font-style: italic;
  color: var(--lavender);
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.875rem;
  color: var(--text-dim);
}
.nav-links a {
  position: relative;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--lavender);
  transition: width 0.3s var(--ease-out);
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }

.nav-cta {
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  background: rgba(192, 132, 252, 0.08);
  transition: all 0.25s var(--ease-out);
}
.nav-cta:hover {
  background: rgba(192, 132, 252, 0.18);
  border-color: var(--lavender);
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.3);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  position: relative;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #c084fc 50%, #fbbf24 130%);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(192, 132, 252, 0.4),
    0 8px 30px -8px rgba(124, 58, 237, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary.glow {
  animation: pulse-glow 3s ease-in-out infinite;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(192, 132, 252, 0.6),
    0 12px 40px -8px rgba(192, 132, 252, 0.8),
    0 0 60px -10px rgba(251, 191, 36, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.4), 0 8px 30px -8px rgba(124, 58, 237, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  50% { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.6), 0 12px 40px -8px rgba(192, 132, 252, 0.7), 0 0 50px -10px rgba(251, 191, 36, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: rgba(192, 132, 252, 0.08);
  border-color: var(--lavender);
  color: var(--lavender);
}

.btn-xl {
  padding: 1.25rem 2.5rem;
  font-size: 1.05rem;
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 1.5rem 6rem;
  position: relative;
  text-align: center;
}
.hero-inner {
  max-width: 900px;
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 2rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(192, 132, 252, 0.05);
  backdrop-filter: blur(8px);
}
.eyebrow-glyph {
  color: var(--gold);
  font-size: 0.875rem;
  animation: spin-slow 12s linear infinite;
  display: inline-block;
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(3.5rem, 10vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}
.hero-title .line {
  display: block;
  background: linear-gradient(180deg, #fff 0%, #e9d5ff 60%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title .italic {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(180deg, #fde68a 0%, #fbbf24 60%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--lavender-soft);
  margin: 0 0 1.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0 auto 2.5rem;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero decorative orbit */
.hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 90vw);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}
.orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(192, 132, 252, 0.12);
}
.orbit-1 { transform: scale(1); animation: rotate 60s linear infinite; }
.orbit-2 { transform: scale(0.72); animation: rotate 80s linear infinite reverse; border-color: rgba(251, 191, 36, 0.08); }
.orbit-3 { transform: scale(0.5); animation: rotate 100s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg) scale(var(--s, 1)); } }
.orbit-1 { animation: rotate-1 60s linear infinite; }
.orbit-2 { animation: rotate-2 80s linear infinite reverse; }
.orbit-3 { animation: rotate-3 100s linear infinite; }
@keyframes rotate-1 { from { transform: rotate(0) scale(1); } to { transform: rotate(360deg) scale(1); } }
@keyframes rotate-2 { from { transform: rotate(0) scale(0.72); } to { transform: rotate(360deg) scale(0.72); } }
@keyframes rotate-3 { from { transform: rotate(0) scale(0.5); } to { transform: rotate(360deg) scale(0.5); } }

.moon {
  position: absolute;
  top: 10%;
  right: 12%;
  font-size: 2.5rem;
  color: var(--gold-soft);
  text-shadow: 0 0 30px rgba(253, 230, 138, 0.6);
  animation: float 6s ease-in-out infinite;
  z-index: 1;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color 0.2s;
}
.scroll-cue:hover { color: var(--lavender); }
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--lavender), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ===== ABOUT (TCN) ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.about-copy p {
  color: var(--text-dim);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}
.about-copy .lede {
  color: var(--text);
  font-style: normal;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  line-height: 1.45;
  margin-bottom: 1.75rem;
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.875rem;
}
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  color: var(--text);
  font-size: 1rem;
}
.about-list .dot {
  color: var(--gold);
  margin-top: 2px;
  font-size: 0.875rem;
}

.about-card {
  position: relative;
  background: linear-gradient(160deg, rgba(74, 29, 150, 0.25), rgba(26, 11, 46, 0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.card-glow {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(192, 132, 252, 0.15), transparent 50%);
  pointer-events: none;
}
.quote-mark {
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: -1rem;
  position: relative;
}
.about-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--text);
  position: relative;
  margin: 0 0 1.5rem;
}
.quote-attrib {
  font-size: 0.875rem;
  color: var(--lavender);
  letter-spacing: 0.05em;
  margin: 0;
  position: relative;
}

/* ===== PERKS ===== */
.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.perk {
  position: relative;
  padding: 2rem 1.75rem;
  background: linear-gradient(160deg, rgba(74, 29, 150, 0.12), rgba(20, 8, 34, 0.4));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
  overflow: hidden;
}
.perk::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(192, 132, 252, 0.15), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.perk:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: linear-gradient(160deg, rgba(74, 29, 150, 0.2), rgba(20, 8, 34, 0.5));
}
.perk:hover::before { opacity: 1; }
.perk:hover .perk-icon {
  color: var(--gold);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

.perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.12), rgba(74, 29, 150, 0.2));
  border: 1px solid var(--border);
  color: var(--lavender);
  margin-bottom: 1.5rem;
  transition: all 0.4s var(--ease-out);
}
.perk-icon svg { width: 28px; height: 28px; }

.perk h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.625rem;
  color: var(--text);
  letter-spacing: 0.01em;
}
.perk p {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}

/* ===== FIT ===== */
.fit-wrap {
  max-width: 980px;
  margin: 0 auto;
}
.fit-copy {
  text-align: center;
}
.fit-copy .kicker { display: inline-block; }
.fit-copy .lede {
  max-width: 60ch;
  margin: 0 auto 3rem;
  color: var(--text-dim);
}

.fit-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.fit-card {
  text-align: left;
  padding: 2rem;
  background: linear-gradient(160deg, rgba(74, 29, 150, 0.15), rgba(20, 8, 34, 0.4));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.fit-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.fit-icon {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}
.fit-card h4 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.625rem;
  color: var(--text);
}
.fit-card p {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}

.fit-requirements {
  list-style: none;
  padding: 1.75rem;
  margin: 0;
  display: grid;
  gap: 0.875rem;
  background: rgba(26, 11, 46, 0.4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  max-width: 640px;
  margin: 0 auto;
}
.fit-requirements li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  color: var(--text);
  font-size: 0.975rem;
}
.fit-requirements .check {
  color: var(--lavender);
  font-size: 0.875rem;
  margin-top: 3px;
}

/* ===== STEPS ===== */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 2rem 1.5rem;
  background: linear-gradient(160deg, rgba(74, 29, 150, 0.12), rgba(20, 8, 34, 0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.step:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.step-num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--gold), var(--lavender));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.step h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.step p {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}
.step-line {
  display: none;
}

/* ===== APPLY CTA ===== */
.apply-card {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  background:
    linear-gradient(160deg, rgba(74, 29, 150, 0.3), rgba(26, 11, 46, 0.6) 60%, rgba(124, 58, 237, 0.2));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.apply-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(192, 132, 252, 0.2), transparent 50%);
  pointer-events: none;
}

.apply-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: 1.5rem;
  color: var(--gold-soft);
  opacity: 0.5;
}
.apply-stars span {
  position: absolute;
  animation: twinkle 3s ease-in-out infinite alternate;
}
.apply-stars span:nth-child(1) { top: 15%; left: 8%; }
.apply-stars span:nth-child(2) { top: 25%; right: 12%; font-size: 1rem; animation-delay: 1s; }
.apply-stars span:nth-child(3) { bottom: 25%; left: 14%; font-size: 1.25rem; animation-delay: 0.5s; }
.apply-stars span:nth-child(4) { bottom: 15%; right: 8%; font-size: 0.875rem; animation-delay: 1.5s; }
.apply-stars span:nth-child(5) { top: 50%; left: 5%; font-size: 1rem; animation-delay: 2s; }

.apply-content {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}
.apply-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, #fff 0%, #fde68a 50%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.apply-sub {
  font-size: 1.0625rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 2.5rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.apply-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}

/* ===== FOOTER ===== */
.site-footer {
  padding: 3rem 0 2.5rem;
  border-top: 1px solid var(--border);
  background: rgba(10, 1, 24, 0.6);
  backdrop-filter: blur(8px);
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.footer-brand .brand-mark { width: 28px; height: 28px; }
.footer-brand .brand-text { font-size: 1.125rem; }

.footer-meta {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-mute);
}
.footer-meta p { margin: 0.25rem 0; }
.footer-meta a {
  color: var(--lavender);
  transition: color 0.2s;
}
.footer-meta a:hover { color: var(--gold); }

.footer-social {
  display: flex;
  gap: 0.75rem;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: all 0.25s var(--ease-out);
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover {
  color: var(--lavender);
  border-color: var(--lavender);
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.3);
  transform: translateY(-2px);
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .nav-links { gap: 1.25rem; }
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-cta { display: inline-block; }
  .about-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-header { padding: 0.875rem 1.25rem; }
  .brand-text { font-size: 1.0625rem; }
  .hero { padding-top: 7rem; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .fit-cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 1.5rem;
  }
  .moon { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}