@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #f4f5f3;
  --muted: #9ca3a0;
  --line: rgba(255,255,255,.12);
  --panel: rgba(255,255,255,.055);
  --green: #a8ff36;
  --green-soft: #d9ffad;
  --night: #050706;
  --night-2: #0a0e0c;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); touch-action:manipulation; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font-family: 'DM Sans', Arial, sans-serif;
  overflow-x: hidden;
  touch-action: manipulation;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link{position:fixed;z-index:100;left:16px;top:12px;padding:12px 16px;background:#fff;color:#111;transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:4px}

.space { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 50% -10%, #101b15 0, #070a08 40%, #020403 78%); }
.space::before,.space::after{content:'';position:absolute;inset:-10%;background-image:radial-gradient(circle,#d9fff0 0 1px,transparent 1.4px);background-size:83px 91px;opacity:.28}
.space::after{background-size:151px 137px;background-position:42px 68px;opacity:.2}
.starfield-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .92; }
.space.has-webgl::before,.space.has-webgl::after,.space.has-webgl .nebula { display: none; }
.nebula { position: absolute; width: 100vw; height: 52vw; top: 12%; left: -34%; background: radial-gradient(ellipse, rgba(71,133,102,.08), transparent 68%); transform: rotate(-22deg); filter: blur(28px); }

.site-header, main, .site-footer { position: relative; z-index: 1; }
.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 84px;
  padding: 0 clamp(24px, 4vw, 68px);
  display: flex;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(5,7,6,.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 18px; margin-right: auto; }
.brand img { width: 74px; display: block; }
.brand span { color: #a5aaa7; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; border-left: 1px solid var(--line); padding-left: 18px; }
.site-header nav { display: flex; gap: clamp(16px, 2.2vw, 38px); }
.site-header nav a { color: #c2c7c4; font-size: 13px; transition: color .2s; }
.site-header nav a:hover { color: #fff; }
.nav-cta { padding: 12px 18px; border: 1px solid rgba(168,255,54,.5); color: var(--green); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.menu-button { display: none; background: none; border: 0; padding: 10px; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 142px clamp(24px, 7vw, 120px) 70px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 5vw;
  overflow: hidden;
}
.hero-copy { min-width:0;max-width: 610px; position: relative; z-index: 2; }
.hero h1, h2 { font-family: 'Space Grotesk', Arial, sans-serif; letter-spacing: -.055em; font-weight: 500; }
.hero h1 { font-size: clamp(54px, 7.2vw, 112px); line-height: .91; margin: 0; }
em { font-family: var(--serif); font-weight: 400; color: var(--green-soft); }
.hero-lead { max-width: 520px; margin: 32px 0; color: #adb4b0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.button { min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border: 1px solid transparent; transition: transform .25s, box-shadow .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green); color: #10150d; box-shadow: 0 0 40px rgba(168,255,54,.1); }
.button-primary:hover { box-shadow: 0 10px 44px rgba(168,255,54,.22); }
.text-link { font-size: 12px; text-transform: uppercase; letter-spacing: .11em; color: #bfc5c1; display: flex; gap: 16px; }

.hero-visual { min-height: 650px; position: relative; display: grid; place-items: center; perspective: 900px; }
.hero-tag-stage { position:absolute; z-index:1; top:84px; left:0; width:100%; height:255px; overflow:hidden; pointer-events:none; }
.launch-turntable { width:min(43vw,650px); position:relative; z-index:3; touch-action:manipulation; }
.launch-deck { position:relative; aspect-ratio:1.34; border:1px solid #414943; border-radius:18px; background:linear-gradient(145deg,#272d29 0,#0a0d0b 58%,#161b18 100%); box-shadow:-35px 45px 90px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.16); transform:perspective(1100px) rotateX(7deg) rotateZ(-3deg); }
.launch-platter { position:absolute; width:70%; aspect-ratio:1; left:5%; top:5%; padding:2.2%; overflow:hidden; border-radius:50%; background:repeating-radial-gradient(circle,#272c29 0 2px,#0c0f0d 3px 5px); box-shadow:inset 0 0 20px #000,0 8px 24px #000; }
.vinyl { width:100%; height:100%; position:relative; border-radius:50%; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; outline:none; will-change:transform; filter:brightness(1.35); box-shadow:0 12px 30px #000; }
.vinyl:focus-visible { outline:2px solid rgba(168,255,54,.7); outline-offset:-7px; }
.vinyl.is-scratching { cursor:grabbing; filter:brightness(1.55) drop-shadow(0 0 12px rgba(168,255,54,.18)); }
.vinyl img { width:100%; height:100%; display:block; object-fit:contain; pointer-events:none; }
.touch-ring { position:absolute; inset:8%; border-radius:50%; border:1px solid transparent; transition:border-color .2s,box-shadow .2s; }
.vinyl.is-scratching .touch-ring { border-color:rgba(168,255,54,.45); box-shadow:inset 0 0 30px rgba(168,255,54,.09); }
.launch-tonearm { position:absolute; right:8%; top:9%; width:13%; height:65%; border-radius:50px; border-right:8px solid #777e79; transform:rotate(10deg); transform-origin:top; filter:drop-shadow(3px 5px 4px #000); transition:transform 1.05s cubic-bezier(.22,.75,.2,1); }
.audio-is-playing .launch-tonearm { transform:rotate(28deg); transition-delay:.12s; }
.launch-tonearm::before { content:''; position:absolute; right:-14px; top:-9px; width:29px; height:29px; border-radius:50%; background:#242925; border:1px solid #727974; }
.launch-tonearm span { position:absolute; right:-13px; bottom:-3px; width:27px; height:42px; border-radius:4px; background:#4c544f; transform:rotate(-8deg); }
.deck-play-button { position:absolute; z-index:5; left:5%; bottom:7%; width:52px; height:52px; padding:0; border:1px solid rgba(255,205,54,.75); border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 42% 34%,#303733,#0a0d0b 68%); color:#ffd044; box-shadow:0 6px 14px #000,0 0 10px rgba(255,205,54,.2),inset 0 0 10px rgba(255,205,54,.08); cursor:pointer; -webkit-tap-highlight-color:transparent; animation:deck-pulse-pause 1.8s ease-in-out infinite; }
.deck-play-button::after { content:''; position:absolute; inset:-5px; border:1px solid #323a35; border-radius:50%; }
.deck-play-icon { width:0; height:0; margin-left:3px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid currentColor; }
.deck-play-button span:last-child { position:absolute; top:calc(100% + 8px); color:#c3a541; font:600 7px 'Space Grotesk'; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.deck-play-button.is-playing { color:var(--green); border-color:rgba(168,255,54,.78); box-shadow:0 6px 14px #000,0 0 14px rgba(168,255,54,.28),inset 0 0 12px rgba(168,255,54,.1); animation-name:deck-pulse-play; }
.deck-play-button.is-playing span:last-child { color:var(--green); }
.deck-play-button.is-playing .deck-play-icon { width:10px; height:12px; margin:0; border:0; border-left:3px solid currentColor; border-right:3px solid currentColor; }
@keyframes deck-pulse-pause { 50% { border-color:rgba(255,205,54,.38); box-shadow:0 6px 14px #000,0 0 22px rgba(255,205,54,.36),inset 0 0 15px rgba(255,205,54,.13); } }
@keyframes deck-pulse-play { 50% { border-color:rgba(168,255,54,.42); box-shadow:0 6px 14px #000,0 0 24px rgba(168,255,54,.4),inset 0 0 16px rgba(168,255,54,.15); } }
.launch-meter { position:absolute; right:5%; bottom:8%; width:20%; display:grid; gap:10px; }
.launch-meter output { color:var(--green); font:600 11px 'Space Grotesk'; text-align:right; }
.launch-meter > div { height:34px; display:flex; align-items:end; gap:3px; }
.launch-meter i { flex:1; min-height:3px; height:12%; background:#2c342f; transition:height .08s,background .08s; }
.launch-meter i.is-on { background:var(--green); box-shadow:0 0 7px rgba(168,255,54,.7); }
.launch-touch-copy { min-height:44px; margin:0 0 18px; text-align:center; color:var(--green); font:600 clamp(13px,1.15vw,18px) 'Space Grotesk'; letter-spacing:.13em; line-height:1.25; white-space:pre-line; text-transform:uppercase; transform:rotate(-3deg); transform-origin:center; text-shadow:0 0 14px rgba(168,255,54,.16); }
.launch-audio-controls { margin-top:26px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; transform:rotate(-3deg); transform-origin:center; }
.launch-audio-controls > label,.launch-audio-controls select { min-width:0; height:52px; padding:0 19px; border:1px solid #364039; border-radius:2px; background:linear-gradient(180deg,rgba(20,25,22,.96),rgba(5,8,6,.96)); color:#c3cbc5; box-shadow:0 5px 12px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.045); font:600 10px 'Space Grotesk'; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition:border-color .2s,color .2s,box-shadow .2s; }
.launch-audio-controls > label:hover,.launch-audio-controls select:hover,.launch-audio-controls > label:focus-within,.launch-audio-controls select:focus { border-color:rgba(168,255,54,.55); color:var(--green); box-shadow:0 5px 12px rgba(0,0,0,.36),0 0 12px rgba(168,255,54,.08); }
.launch-audio-controls > label { display:flex; align-items:center; }
.launch-audio-controls input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.launch-audio-controls select { width:230px; max-width:230px; padding-right:38px; color-scheme:dark; text-transform:none; letter-spacing:.02em; }
.launch-audio-controls select option { background:#0a0e0b; color:#e4e9e5; }
.launch-audio-controls select option:checked { background:#26321f; color:var(--green); }
.launch-volume { gap:7px; }
.launch-volume input { width:88px; accent-color:var(--green); }
.alien-crowd { position:relative; width:100%; height:118px; margin-top:8px; pointer-events:none; overflow:visible; }
.crowd-arrival { position:absolute; z-index:2; left:var(--alien-x); bottom:var(--alien-y,5px); width:64px; height:55px; opacity:0; transform:translate(-50%,95px) scale(.25); animation:ufo-arrive .72s cubic-bezier(.18,.8,.24,1.18) forwards; }
.crowd-ufo { position:absolute; inset:0; transform:scale(var(--alien-depth)); animation:ufo-hover .82s var(--alien-delay) ease-in-out infinite alternate; filter:drop-shadow(0 8px 8px rgba(0,0,0,.62)); }
.ufo-dome { position:absolute; z-index:2; left:17px; top:3px; width:30px; height:29px; overflow:hidden; border:1px solid rgba(168,255,54,.48); border-radius:50% 50% 38% 38%; background:rgba(19,38,27,.9); box-shadow:inset 0 0 9px rgba(168,255,54,.12); }
.alien-head { position:absolute; left:7px; top:4px; width:15px; height:17px; border-radius:52% 52% 44% 44%; background:#9bdc68; }
.alien-head::before,.alien-head::after { content:''; position:absolute; top:6px; width:4px; height:5px; border-radius:50%; background:#071008; transform:rotate(18deg); }
.alien-head::before { left:3px; }.alien-head::after { right:3px; transform:rotate(-18deg); }
.alien-head span { position:absolute; left:5px; bottom:3px; width:5px; height:2px; border-bottom:1px solid #183019; border-radius:50%; }
.alien-body { position:absolute; left:10px; top:18px; width:10px; height:12px; border-radius:5px 5px 2px 2px; background:#76b955; }
.ufo-saucer { position:absolute; z-index:3; left:5px; top:30px; width:54px; height:15px; border:1px solid #58645d; border-radius:50%; background:linear-gradient(#66726b 0 24%,#111713 30% 70%,#050806 72%); box-shadow:0 4px 0 -1px #252d28,0 0 10px rgba(168,255,54,.12); }
.ufo-saucer::after { content:''; position:absolute; left:16px; bottom:-3px; width:22px; height:3px; border-radius:50%; background:var(--green); box-shadow:0 0 7px rgba(168,255,54,.58); }
.alien-arms { position:absolute; z-index:1; left:18px; top:18px; width:28px; height:12px; border-top:3px solid #9bdc68; }
.alien-arms::before,.alien-arms::after { content:''; position:absolute; top:-7px; width:3px; height:10px; background:#9bdc68; border-radius:3px; transform-origin:bottom; }
.alien-arms::before { left:-1px; transform:rotate(-42deg); }.alien-arms::after { right:-1px; transform:rotate(42deg); }
.ufo-variant-2 .ufo-dome { left:19px; top:4px; width:26px; height:28px; border-color:rgba(91,210,255,.58); background:rgba(12,35,43,.92); }
.ufo-variant-2 .alien-head,.ufo-variant-2 .alien-arms::before,.ufo-variant-2 .alien-arms::after { background:#76d9e9; }
.ufo-variant-2 .alien-body { background:#55afbe; }
.ufo-variant-2 .alien-arms { border-color:#76d9e9; }
.ufo-variant-2 .ufo-saucer { left:1px; top:31px; width:62px; height:12px; border-color:#47636a; background:linear-gradient(#78949a 0 20%,#10191b 28% 72%,#040708 74%); }
.ufo-variant-2 .ufo-saucer::after { left:20px; background:#70e8ff; box-shadow:0 0 7px rgba(112,232,255,.58); }
.ufo-variant-3 .ufo-dome { left:18px; top:1px; width:28px; height:30px; border-radius:48% 48% 30% 30%; border-color:rgba(255,216,79,.55); background:rgba(47,38,11,.9); }
.ufo-variant-3 .alien-head { top:7px; border-radius:45% 45% 55% 55%; background:#e6cc68; }
.ufo-variant-3 .alien-body { background:#b29a42; }
.ufo-variant-3 .alien-arms { border-color:#e6cc68; }.ufo-variant-3 .alien-arms::before,.ufo-variant-3 .alien-arms::after { background-color:#e6cc68; }
.ufo-variant-3 .ufo-saucer { left:8px; width:48px; height:17px; border-radius:42% 42% 50% 50%; background:linear-gradient(#756d4a 0 22%,#18160b 30% 72%,#050504 74%); }
.ufo-variant-3 .ufo-saucer::after { left:13px; background:#ffd84f; box-shadow:0 0 7px rgba(255,216,79,.58); }
.ufo-variant-4 .ufo-dome { left:14px; top:4px; width:36px; height:27px; border-color:rgba(206,125,255,.55); background:rgba(35,18,46,.92); }
.ufo-variant-4 .alien-head { left:10px; width:16px; border-radius:60% 40% 48% 52%; background:#c794e8; }
.ufo-variant-4 .alien-body { left:13px; background:#9d6aba; }
.ufo-variant-4 .alien-arms { border-color:#c794e8; }.ufo-variant-4 .alien-arms::before,.ufo-variant-4 .alien-arms::after { background-color:#c794e8; }
.ufo-variant-4 .ufo-saucer { left:3px; top:30px; width:58px; height:18px; border-radius:50% 50% 38% 38%; border-color:#66506f; background:linear-gradient(#806a89 0 22%,#1c1021 29% 70%,#080509 72%); }
.ufo-variant-4 .ufo-saucer::after { left:18px; background:#d591ff; box-shadow:0 0 7px rgba(213,145,255,.55); }
.ufo-variant-5 .ufo-dome { left:18px; top:5px; width:28px; height:28px; border-color:rgba(255,126,73,.58); background:rgba(47,22,12,.92); }
.ufo-variant-5 .alien-head { top:3px; height:19px; border-radius:38% 62% 48% 52%; background:#e98b5f; }
.ufo-variant-5 .alien-body { background:#b86242; }
.ufo-variant-5 .alien-arms { border-color:#e98b5f; }.ufo-variant-5 .alien-arms::before,.ufo-variant-5 .alien-arms::after { background-color:#e98b5f; }
.ufo-variant-5 .ufo-saucer { left:6px; top:32px; width:52px; height:13px; border-radius:35% 65% 50% 50%; border-color:#714c3c; background:linear-gradient(#95634e 0 23%,#20110c 30% 70%,#080504 72%); }
.ufo-variant-5 .ufo-saucer::after { left:15px; background:#ff8552; box-shadow:0 0 7px rgba(255,133,82,.56); }
.audio-is-playing .alien-arms { animation:alien-cheer .28s ease-in-out infinite alternate; }
.crowd-arrival.is-leaving { animation:ufo-leave .68s var(--leave-delay) ease-in forwards; }
@keyframes ufo-arrive { to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes ufo-leave { from { opacity:1; transform:translate(-50%,0) scale(1); } to { opacity:0; transform:translate(calc(-50% + 75px),-115px) scale(.35) rotate(12deg); } }
@keyframes ufo-hover { to { transform:translateY(-7px) rotate(2deg) scale(var(--alien-depth)); } }
@keyframes alien-cheer { to { transform:translateY(-4px) scaleY(1.2); } }
.planet { width: min(40vw, 570px); aspect-ratio: 1; z-index: 2; border-radius: 50%; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 40% 34%, rgba(200,255,190,.16), rgba(30,50,40,.08) 30%, #070b08 68%); box-shadow: inset -45px -30px 90px #020302, inset 20px 15px 50px rgba(141,255,100,.06), 0 0 100px rgba(100,180,130,.08); }
.planet::before { content: ''; position: absolute; inset: 3%; border-radius: 50%; background: repeating-radial-gradient(ellipse at 40% 52%, transparent 0 21px, rgba(206,255,226,.07) 22px 23px, transparent 24px 40px); transform: rotate(-18deg); }
.planet-glow { position: absolute; inset: -3%; border-radius: 50%; border: 1px solid rgba(210,255,227,.14); box-shadow: 0 0 35px rgba(168,255,54,.06), inset 0 0 22px rgba(168,255,54,.04); }
.orbit { position: absolute; width: 112%; aspect-ratio: 1.8; border: 1px solid rgba(185,255,216,.18); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one::after { content: ''; position: absolute; top: 47%; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.orbit-two { width: 90%; transform: rotate(62deg); opacity: .45; }
.deck { width: 72%; height: 36%; position: relative; z-index: 2; padding: 6% 6% 3%; border-radius: 10px; background: linear-gradient(145deg, #2b302d, #090b0a 55%); box-shadow: -18px 28px 60px #000, inset 0 1px rgba(255,255,255,.22); transform: rotateX(58deg) rotateZ(-22deg); border: 1px solid #424a45; }
.deck-top { display: grid; grid-template-columns: 1fr .75fr 1fr; align-items: center; gap: 6%; height: 72%; }
.jog { aspect-ratio: 1; border-radius: 50%; border: 2px solid #68706b; background: #080a09; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 12px #000; }
.jog img { width: 110%; height: 110%; object-fit: contain; animation: vinyl-spin 9s linear infinite; filter: brightness(1.65) contrast(1.05); }
.jog:last-child img { animation-duration: 11s; animation-direction: reverse; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.mixer { height: 90%; display: flex; justify-content: space-around; align-items: flex-start; position: relative; }
.mixer i { width: 5%; height: 60%; background: #080a09; border: 1px solid #626762; }
.mixer b { position: absolute; bottom: 6%; width: 15%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #5d635f; }
.mixer b:nth-of-type(1) { left: 5%; }.mixer b:nth-of-type(2) { left: 42%; }.mixer b:nth-of-type(3) { right: 5%; }
.deck-word { text-align: center; letter-spacing: .45em; font: 700 clamp(8px, .8vw, 13px) 'Space Grotesk'; color: #8c958f; }
.orbit-tags { pointer-events: none; }
.floating-tag { position: absolute; left: 50%; top: 50%; z-index: 4; padding: 10px 15px; border: 1px solid var(--line); background: rgba(9,13,11,.9); color: #bac2bd; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; contain:layout paint style; backface-visibility:hidden; will-change: transform, opacity; pointer-events: none; }

.manifest { padding: clamp(90px, 12vw, 180px) 12vw; background: #dbe1d9; color: #101411; display: grid; grid-template-columns: 1fr .5fr; gap: 8vw; align-items: start; }
.manifest blockquote { margin: 0; font: 400 clamp(32px, 4.3vw, 68px)/1.08 'Space Grotesk'; letter-spacing: -.05em; }
.manifest blockquote strong { font-family: var(--serif); font-weight: 400; }
.manifest > p:last-child { color: #5b625d; font-size: 14px; line-height: 1.8; margin-top: 12px; }

.section-shell { padding: clamp(90px, 11vw, 170px) clamp(24px, 8vw, 130px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 70px; margin-bottom: 72px; }
.section-heading h2, .journey h2, .parent-card h2, .shop h2, .final-cta h2 { font-size: clamp(42px, 5.6vw, 82px); line-height: .98; margin: 0; }
.section-heading > p { max-width: 420px; color: var(--muted); line-height: 1.8; font-size: 14px; }
.learning-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.learning-card { min-height: 345px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); display: flex; flex-direction: column; transition: background .3s, transform .3s; }
.learning-card:hover { background: rgba(255,255,255,.06); transform: translateY(-5px); }
.learning-card.featured { background: var(--green); color: #11170d; }
.card-icon { height: 55px; margin-top: auto; margin-bottom: 20px; color: var(--green); }
.featured .card-icon { color: #11170d; }
.waveform { display: flex; align-items: center; gap: 4px; }.waveform i { width: 3px; height: 15px; background: currentColor; }.waveform i:nth-child(2),.waveform i:nth-child(4){height:36px}.waveform i:nth-child(3){height:51px}
.dial { width: 48px; height: 48px; border: 2px solid currentColor; border-radius: 50%; position: relative; }.dial::after { content:''; width:2px; height:20px; position:absolute; left:22px; top:3px; background:currentColor; transform:rotate(35deg); transform-origin:bottom; }
.bars { display:flex; align-items:end; gap:8px }.bars i { width:9px; height:24px; border:1px solid currentColor }.bars i:nth-child(2){height:48px}.bars i:nth-child(3){height:34px;background:currentColor}
.spark { font-size: 48px; line-height: 1; }
.learning-card h3 { font: 500 19px 'Space Grotesk'; margin: 0 0 12px; }
.learning-card p { margin: 0; color: #8f9692; font-size: 13px; line-height: 1.7; }
.learning-card.featured p { color: #3a4531; }

.journey { display: grid; grid-template-columns: 1fr .85fr; gap: 10vw; align-items: center; background: linear-gradient(120deg, rgba(19,26,22,.7), rgba(5,7,6,.2)); }
.journey-copy > p { max-width: 540px; color: var(--muted); line-height: 1.8; }
.journey ul { list-style: none; padding: 0; margin: 40px 0; border-top: 1px solid var(--line); }
.journey li { padding: 16px 0; border-bottom: 1px solid var(--line); font: 500 14px 'Space Grotesk'; }
.journey li span { display: inline-block; width: 52px; color: var(--green); font-size: 10px; }
.button-light { border-color: rgba(255,255,255,.3); }
.journey-panel { min-height: 490px; padding: 44px; position: relative; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border: 1px solid var(--line); box-shadow: 0 35px 100px rgba(0,0,0,.35); overflow: hidden; }
.signal { height: 160px; margin-bottom: 30px; background: linear-gradient(transparent 49%, rgba(168,255,54,.08) 50%, transparent 51%), linear-gradient(90deg, transparent 49%, rgba(168,255,54,.05) 50%, transparent 51%); background-size: 22px 22px; position: relative; }
.signal svg { position:absolute;inset:20px 0;width:100%;height:calc(100% - 40px);overflow:visible; }
.signal path { fill:none;vector-effect:non-scaling-stroke; }
.signal-line { stroke:rgba(168,255,54,.3);stroke-width:1.4; }
.signal-pulse { stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.16 .84;animation:signal-travel 3.2s linear infinite;filter:drop-shadow(0 0 6px var(--green)); }
@keyframes signal-travel { to { stroke-dashoffset:-1; } }
.panel-kicker { font-size: 9px; text-transform: uppercase; letter-spacing: .18em; color: #68706b; }
.progress-row { display: flex; justify-content: space-between; margin-top: 18px; font-size: 11px; }.progress-row b { color: var(--green); }
.progress-track { height: 2px; margin-top: 8px; background: #28302b; }.progress-track i { display:block; width:var(--progress); height:100%; background:var(--green); box-shadow:0 0 8px var(--green); }
.panel-note { margin-top: 32px; color: #777f7a; font: 14px/1.6 var(--serif); font-style: italic; }

.parents { background: #cdd4cb; color: #111511; display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; }
.parent-card { background: #eef1ec; padding: clamp(35px, 5vw, 74px); }
.parent-card > p, .parent-more p { color: #5b635d; line-height: 1.8; max-width: 600px; }
.text-button { margin-top: 22px; background: none; border: 0; border-bottom: 1px solid #8b948d; padding: 0 0 8px; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; cursor: pointer; }
.text-button span { margin-left: 18px; }
.parent-quote { padding: 6vw; display: flex; flex-direction: column; justify-content: center; }
.quote-mark { color: #55705a; font: 100px/0.5 var(--serif); }
.parent-quote p { font: 400 clamp(25px, 3vw, 46px)/1.3 var(--serif); margin: 30px 0; }
.parent-quote > span:last-child { color:#667068; font-size:10px; letter-spacing:.17em; text-transform:uppercase; }

.section-heading.compact { align-items: center; }
.story-controls { display:flex; align-items:center; gap:8px; }.stories-all { margin-right:14px;padding-bottom:6px;border-bottom:1px solid #68706b;color:#aeb5b0;font-size:10px;letter-spacing:.1em;text-transform:uppercase; }.stories-all:hover{color:var(--green);border-color:var(--green)}.story-controls button { width:48px; height:48px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:18px; }.story-controls button:hover { background:var(--green); color:#111; }
.story-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(340px, 46%); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:10px; }
.story-track::-webkit-scrollbar { display:none; }
.story-card { scroll-snap-align:center; min-height:330px; padding:42px; display:flex; flex-direction:column; justify-content:space-between; background:var(--panel); border:1px solid var(--line); }
.story-card:nth-child(2) { background:linear-gradient(145deg, rgba(168,255,54,.12), rgba(255,255,255,.03)); }
.story-card blockquote { margin:0; font:400 clamp(20px, 2vw, 29px)/1.45 var(--serif); color:#dce0dd; }
.story-card footer { display:flex; align-items:center; gap:14px; margin-top:38px; }.story-card footer > span { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#15200e;font-size:10px;font-weight:700; }
.story-card footer div { display:flex;flex-direction:column;gap:4px }.story-card strong { font-size:12px }.story-card small { color:#747c77;font-size:10px;text-transform:uppercase;letter-spacing:.1em }
.stories-loading { color:var(--muted); min-height:200px; }

.shop { min-height: 690px; position:relative; overflow:hidden; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; background:radial-gradient(circle at 70% 50%, rgba(168,255,54,.1), transparent 35%), #070a08; }
.shop-copy { position:relative; z-index:2; max-width:550px; }.shop-copy > p { color:var(--muted);line-height:1.8; }
.coming-soon { display:inline-flex;align-items:center;gap:14px;margin-top:20px;text-transform:uppercase;letter-spacing:.15em;font-size:10px;color:var(--green); }.coming-soon i { width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.shop-orbit { position:absolute; width:700px; height:700px; right:-3%; top:0; border:1px solid rgba(168,255,54,.1); border-radius:50%; }.shop-orbit span { position:absolute;inset:15%;border:inherit;border-radius:inherit }.shop-orbit span:nth-child(2){inset:30%}.shop-orbit span:nth-child(3){inset:45%}
.product-ghosts { height:440px;position:relative;perspective:900px; }
.product { position:absolute;border:1px solid #49534d;background:linear-gradient(135deg,#2b312d,#090b0a);box-shadow:0 35px 80px #000;display:grid;place-items:center;color:var(--green);font:700 14px 'Space Grotesk';letter-spacing:.2em; }
.product span { text-align: center; line-height: 1.7; }
.product small { color: #88918b; font-size: 8px; letter-spacing: .3em; }
.product-a { width:180px;height:260px;left:8%;top:80px;transform:rotateY(24deg) rotateZ(-8deg) }.product-b { width:220px;height:310px;left:35%;top:20px;z-index:2;transform:rotateY(-10deg) }.product-c { width:160px;height:230px;right:1%;top:125px;transform:rotateY(-28deg) rotateZ(7deg) }

.final-cta { min-height:710px;padding:120px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden; }
.final-cta h2 { font-size:clamp(50px,7.6vw,110px);position:relative;z-index:1 }.final-cta > p{color:var(--muted);margin:26px 0 34px}.button.large{min-height:62px;padding:0 32px}
.cta-rings { position:absolute;width:650px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(168,255,54,.1);box-shadow:0 0 150px rgba(168,255,54,.06),inset 0 0 100px rgba(168,255,54,.04) }.cta-rings::before,.cta-rings::after{content:'';position:absolute;border-radius:50%;border:inherit}.cta-rings::before{inset:15%}.cta-rings::after{inset:33%}

.site-footer { padding:70px clamp(24px,7vw,110px) 28px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:60px; }
.footer-brand img { width:110px }.footer-brand p { color:#555d58;text-transform:uppercase;letter-spacing:.18em;font-size:9px }
.footer-links { display:grid;grid-template-columns:1fr 1fr;gap:30px }.footer-links div{display:flex;flex-direction:column;gap:12px}.footer-links span{color:#59605c;text-transform:uppercase;letter-spacing:.15em;font-size:9px;margin-bottom:8px}.footer-links a{font-size:12px;color:#afb5b1}
.copyright { grid-column:1/-1;padding-top:30px;border-top:1px solid var(--line);color:#4c534f;font-size:9px;text-transform:uppercase;letter-spacing:.12em }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform .8s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.learning-card.reveal:nth-child(2){transition-delay:.08s}.learning-card.reveal:nth-child(3){transition-delay:.16s}.learning-card.reveal:nth-child(4){transition-delay:.24s}

@media (max-width: 980px) {
  .site-header nav { position:absolute;left:0;top:84px;width:100%;padding:28px;background:#090c0a;flex-direction:column;display:none;border-bottom:1px solid var(--line) }
  .site-header nav.is-open { display:flex }
  .menu-button { display:block;position:relative;width:42px;height:42px }.menu-button::before,.menu-button::after{content:'';position:absolute;left:10px;width:22px;height:1px;background:#fff}.menu-button::before{top:16px}.menu-button::after{top:25px}.menu-button span:not(.sr-only){display:none}
  .nav-cta { display:none }
  .hero { grid-template-columns:1fr;padding-top:150px }.hero-copy{max-width:700px}.hero-visual{min-height:580px}.launch-turntable{width:min(82vw,650px)}
  .manifest { grid-template-columns:1fr }.manifest > p:last-child{max-width:600px}
  .learning-grid { grid-template-columns:1fr 1fr }
  .journey { grid-template-columns:1fr;gap:70px }.journey-panel{max-width:650px;width:100%}
  .parents { grid-template-columns:1fr }.parent-quote{padding:70px 5vw}
  .shop { grid-template-columns:1fr;padding-bottom:40px }.product-ghosts{max-width:650px;width:100%}
}

@media (max-width: 640px) {
  .site-header { height:70px;padding:0 20px }.site-header nav{top:70px}.brand span{display:none}.brand img{width:67px}
  .hero-tag-stage{display:none}
  .hero { min-height:auto;padding:130px 22px 70px;gap:20px }.hero h1{font-size:55px}.hero-lead{max-width:100%;font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:22px}
  .hero-visual{min-height:650px}.launch-turntable{width:94vw}.launch-deck{border-radius:11px}.launch-platter{width:62%;left:8%;top:7%;padding:2%}.deck-play-button{left:5%;bottom:5%;width:48px;height:48px}.launch-touch-copy{min-height:48px;font-size:17px;line-height:1.25;letter-spacing:.11em;margin-bottom:18px}.launch-audio-controls{margin-top:20px;gap:7px}.launch-audio-controls>label,.launch-audio-controls select{height:42px;padding:0 13px;font-size:8px}.launch-audio-controls select{width:175px;max-width:175px}.launch-volume{display:none!important}.alien-crowd{height:100px}.crowd-arrival{width:54px;transform:translate(-50%,80px) scale(.25)}.crowd-ufo{transform:scale(calc(var(--alien-depth) * .82))}.floating-tag{font-size:8px}
  .manifest,.section-shell{padding:80px 22px}.manifest blockquote{font-size:35px}
  .section-heading{align-items:flex-start;flex-direction:column;gap:25px;margin-bottom:45px}.section-heading h2,.journey h2,.parent-card h2,.shop h2,.final-cta h2{font-size:44px}
  .learning-grid{grid-template-columns:1fr}.learning-card{min-height:290px}
  .journey-panel{min-height:430px;padding:25px}.signal{height:130px}
  .parents{padding:22px}.parent-card{padding:34px 25px}.parent-quote{padding:60px 20px}
  .story-track{grid-auto-columns:88%}.story-card{padding:28px;min-height:360px}.story-controls{align-self:flex-end}
  .shop{min-height:850px}.product-ghosts{height:360px}.product-a{width:120px;height:190px}.product-b{width:160px;height:240px}.product-c{width:110px;height:170px}
  .final-cta{min-height:650px}.cta-rings{width:520px}
  .site-footer{grid-template-columns:1fr;padding:55px 22px 22px}.footer-links{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important }
  .signal-pulse { stroke-dasharray:1 0; }
}