@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

:root {
  --ink: #050108;
  --paper: #f7eaff;
  --violet: #6a19ff;
  --purple: #9b2cff;
  --pink: #ff3bd4;
  --hot: #ff71e6;
  --blue: #52d9ff;
  --line: rgba(255, 226, 255, 0.32);
  --background: #050108;
  --foreground: #f7eaff;
  --card: #16091e;
  --card-foreground: #f7eaff;
  --popover: #16091e;
  --popover-foreground: #f7eaff;
  --primary: #ff3bd4;
  --primary-foreground: #050108;
  --secondary: #6a19ff;
  --secondary-foreground: #ffffff;
  --muted: #26102f;
  --muted-foreground: #c8a6d3;
  --accent: #52d9ff;
  --accent-foreground: #050108;
  --border: rgba(255, 226, 255, 0.28);
  --input: rgba(255, 226, 255, 0.22);
  --ring: #ff3bd4;
  --radius: 0.35rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.site-shell { min-height: 100vh; background: #050108; }
.noise {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.topbar {
  position: fixed; inset: 0 0 auto; z-index: 40; height: 76px; padding: 0 clamp(18px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--line); background: rgba(5,1,8,.66); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 900; letter-spacing: .06em; }
.brand small { color: #bf9aca; font-size: 9px; font-weight: 600; letter-spacing: .18em; }
.brand-eye { width: 17px; aspect-ratio: 1; border: 1px solid var(--hot); border-radius: 50%; box-shadow: 0 0 15px var(--pink), inset 0 0 6px var(--blue); }
.topbar nav { display: flex; gap: 28px; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
.topbar nav a { opacity: .72; transition: opacity .2s, color .2s; }
.topbar nav a:hover { opacity: 1; color: var(--hot); }
.header-actions { justify-self: end; display: flex; gap: 8px; }
.mini-button, .buy-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.mini-button { width: 38px; font-weight: 900; }
.buy-button { gap: 8px; padding: 0 18px; color: var(--ink); background: var(--pink); border-color: var(--pink); font-size: 11px; font-weight: 900; letter-spacing: .12em; box-shadow: 0 0 22px rgba(255,59,212,.28); }

.hero {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); align-items: center;
  padding: 116px clamp(22px, 6vw, 98px) 64px;
}
.hero::before { content:""; position:absolute; inset:0; z-index:-3; background: radial-gradient(circle at 48% 47%, #4d087d 0, #13031e 34%, #030106 73%); }
.hero-backdrop {
  position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,1,8,.88) 0%, rgba(5,1,8,.2) 48%, rgba(5,1,8,.35) 100%), url('/prophecy-junkspace.png') center/cover no-repeat; opacity: .58; filter: saturate(1.2) contrast(1.1);
}
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(115deg, transparent 55%, rgba(255,59,212,.12)); }
.signal-pill { position:absolute; right: clamp(20px, 4vw, 64px); top: 100px; display:flex; align-items:center; gap:8px; font: 700 9px/1 monospace; letter-spacing:.17em; color: var(--blue); }
.signal-pill svg { animation: blink 1.1s steps(2) infinite; }
.hero-copy { position: relative; z-index: 4; padding-top: 26px; }
.eyebrow { margin: 0 0 17px; color: var(--blue); font: 800 10px/1 monospace; letter-spacing: .28em; }
.hero h1 { margin: 0; font-size: clamp(54px, 7.4vw, 124px); line-height: .77; letter-spacing: -.075em; text-transform: uppercase; text-shadow: 0 0 30px rgba(109,30,255,.2); }
.hero h1 span { color: var(--blue); -webkit-text-stroke: 1px var(--blue); }
.hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px var(--hot); filter: drop-shadow(0 0 12px rgba(255,59,212,.55)); }
.hero-deck { max-width: 470px; margin: 27px 0 0; color: #d6badf; font: 500 clamp(15px, 1.3vw, 20px)/1.5 Georgia, serif; }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:29px; }
.primary-action, .secondary-action { min-height: 51px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 20px; border:1px solid var(--line); font-size:10px; font-weight:900; letter-spacing:.14em; cursor:pointer; }
.primary-action { color: var(--ink); background: var(--paper); }
.secondary-action { background: rgba(25,7,33,.6); backdrop-filter: blur(10px); }
.primary-action:hover, .secondary-action:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,59,212,.22); }

.flybrain-frame { position: relative; z-index: 2; justify-self: center; width: min(42vw, 640px); aspect-ratio: 1; }
.portrait-wrap { position:absolute; inset:11%; border-radius:50%; overflow:hidden; clip-path:polygon(50% 0, 81% 9%, 100% 36%, 94% 72%, 68% 100%, 29% 94%, 0 68%, 7% 30%); box-shadow: 0 0 28px #6a19ff, 0 0 90px rgba(255,59,212,.34); }
.portrait-wrap img { width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
.portrait-wrap::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 70px rgba(5,1,8,.62); }
.scanline { position:absolute; inset:-20% 0 auto; height:18%; background:linear-gradient(transparent, rgba(82,217,255,.36), transparent); mix-blend-mode:screen; animation:scan 4.5s linear infinite; }
.orbit { position:absolute; inset:2%; border:1px solid rgba(255,113,230,.45); border-radius:50%; animation:spin 18s linear infinite; }
.orbit::before, .orbit::after { content:""; position:absolute; width:7px; aspect-ratio:1; border-radius:50%; background:var(--blue); box-shadow:0 0 14px var(--blue); }
.orbit::before { left:8%; top:20%; }.orbit::after{right:9%;bottom:18%;background:var(--pink);box-shadow:0 0 14px var(--pink)}
.orbit span { position:absolute; left:8%; top:18%; color:#e8ccf0; background:#07010b; padding:4px 7px; font:700 8px monospace; letter-spacing:.15em; }
.orbit-two { inset:-7%; border-style:dashed; border-color:rgba(82,217,255,.32); animation-direction:reverse; animation-duration:26s; }
.orbit-two span { left:auto; right:8%; top:70%; }
.portrait-tag { position:absolute; z-index:5; border:1px solid var(--line); padding:6px 9px; background:rgba(5,1,8,.75); color:#d8b6e1; font:700 8px monospace; letter-spacing:.12em; }
.tag-a{left:2%;bottom:18%;transform:rotate(-6deg)} .tag-b{right:-5%;top:25%;transform:rotate(5deg)}
.scroll-cue { position:absolute; left:clamp(22px, 3vw, 48px); bottom:25px; display:flex; align-items:center; gap:15px; color:#b98fc7; font:700 8px monospace; letter-spacing:.16em; }
.scroll-cue i { width:72px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--pink);transform:translateX(-100%);animation:sweep 2.3s infinite}
.preview-next { min-height:42vh; display:grid; place-items:center; border-top:1px solid var(--line); background:radial-gradient(circle,#351047 0,#070109 65%); color:#c6a3d1; font:700 10px monospace; letter-spacing:.2em; }

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scan{to{top:110%}}
@keyframes sweep{to{transform:translateX(100%)}}
@keyframes blink{50%{opacity:.3}}

@media (max-width: 820px) {
  .topbar { grid-template-columns:1fr auto; height:66px; padding:0 16px; }
  .brand small, .topbar nav { display:none; }
  .hero { grid-template-columns:1fr; align-content:center; padding:100px 20px 60px; }
  .hero-copy { z-index:5; padding-top:0; }
  .hero h1 { font-size:clamp(51px,16vw,82px); }
  .hero-deck { max-width:330px; }
  .flybrain-frame { position:absolute; right:-24%; top:16%; width:min(100vw,540px); opacity:.58; }
  .signal-pill { top:82px; }
  .tag-b { right:7%; }
}

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

/* signal layer */
.pointer-aurora {
  position: fixed; z-index: 39; left: var(--mx, 50%); top: var(--my, 50%); width: 330px; aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%; opacity: .2;
  background: radial-gradient(circle, rgba(82,217,255,.36), rgba(255,59,212,.09) 35%, transparent 68%);
  mix-blend-mode: screen; transition: opacity .25s;
}
.is-awake .pointer-aurora { width: 520px; opacity: .42; }
.awake-flash { position:fixed; inset:0; z-index:80; display:grid; place-items:center; pointer-events:none; visibility:hidden; background:var(--paper); mix-blend-mode:difference; }
.awake-flash span { color:#070109; font:900 64vw/.8 Arial,sans-serif; letter-spacing:-.12em; }
.is-awake .awake-flash { animation:awakeFlash .72s steps(1); }
.is-awake .hero-backdrop { filter:saturate(1.65) contrast(1.15) hue-rotate(12deg); opacity:.8; }
.is-awake .portrait-wrap img { animation:eyePulse 1.4s ease-in-out infinite alternate; }
.is-awake .site-shell { --hot:#75efff; --pink:#ff24d3; }
.shard-meter { position:fixed; z-index:40; right:clamp(18px,3vw,46px); bottom:22px; display:flex; align-items:center; gap:7px; padding:9px 11px; color:#ddbfe7; background:rgba(8,2,12,.72); border:1px solid var(--line); backdrop-filter:blur(12px); font:700 8px monospace; letter-spacing:.14em; }
.shard-meter b { color:var(--blue); }
.signal-shard { position:absolute; z-index:11; display:grid; place-items:center; width:33px; aspect-ratio:1; padding:0; color:#fff; background:rgba(66,16,88,.65); border:1px solid rgba(255,113,230,.6); clip-path:polygon(50% 0, 100% 42%, 73% 100%, 15% 84%, 0 25%); cursor:pointer; filter:drop-shadow(0 0 8px var(--pink)); animation:shardFloat 3.4s ease-in-out infinite alternate; }
.signal-shard:hover { transform:scale(1.3) rotate(15deg); }
.signal-shard.collected { opacity:.12; transform:scale(.2) rotate(90deg); pointer-events:none; transition:all .45s ease; }
.shard-1{left:47%;top:20%}.shard-2{right:7%;top:58%;animation-delay:-1.2s}.shard-3{left:35%;bottom:12%;animation-delay:-2.1s}.shard-4{left:4%;top:48%}.shard-5{right:5%;top:13%}
.key-hint { margin:15px 0 0; color:#a982b5; font:700 8px monospace; letter-spacing:.11em; }
.key-hint kbd { display:inline-grid; place-items:center; width:21px; height:21px; margin-right:6px; color:var(--paper); border:1px solid var(--line); box-shadow:inset 0 -3px rgba(255,255,255,.08); }
.sound-button { min-height:38px; width:38px; display:grid; place-items:center; padding:0; border:1px solid var(--line); background:transparent; cursor:pointer; }
.sound-button:hover,.mini-button:hover { color:var(--blue); border-color:var(--blue); }

.ticker { overflow:hidden; border-block:1px solid rgba(255,255,255,.18); background:var(--pink); color:var(--ink); transform:rotate(-1deg) scale(1.02); }
.ticker div { width:max-content; display:flex; align-items:center; gap:25px; padding:10px 0; animation:ticker 26s linear infinite; }
.ticker span { font:900 11px/1 Arial,sans-serif; letter-spacing:.18em; }
.ticker b { font-size:12px; }

.story-section { position:relative; isolation:isolate; padding:clamp(92px,11vw,170px) clamp(20px,7vw,110px); background:radial-gradient(circle at 88% 20%,#3f0e54 0,transparent 33%),linear-gradient(180deg,#070109,#110319 60%,#070109); }
.story-section::after { content:"F"; position:absolute; right:-3vw; top:0; z-index:-1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07); font:900 58vw/.8 Arial,sans-serif; letter-spacing:-.16em; }
.section-heading,.roadmap-heading { display:grid; grid-template-columns:.34fr 1fr .55fr; align-items:end; gap:35px; max-width:1400px; margin:0 auto 70px; }
.section-heading>p,.chapter-label,.prophecy-head>p,.roadmap-heading>p { align-self:start; margin:5px 0 0; color:var(--blue); font:700 9px monospace; letter-spacing:.2em; }
.section-heading h2,.anatomy-copy h2,.prophecy-head h2,.roadmap-heading h2 { margin:0; font-size:clamp(46px,7vw,102px); line-height:.82; letter-spacing:-.075em; }
.section-heading h2 em,.anatomy-copy h2 em,.prophecy-head h2 em,.roadmap-heading h2 em { color:transparent; font-style:normal; -webkit-text-stroke:1px var(--hot); }
.section-heading>span,.roadmap-heading>span { max-width:330px; color:#c9a9d3; font:italic 15px/1.55 Georgia,serif; }
.memory-console { display:grid; grid-template-columns:minmax(300px,.88fr) 1.12fr; max-width:1200px; margin:auto; border:1px solid var(--line); background:rgba(14,4,19,.78); box-shadow:0 35px 100px rgba(0,0,0,.35); }
.memory-image { position:relative; min-height:530px; overflow:hidden; border-right:1px solid var(--line); }
.memory-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.12); transform:scale(1.05); transition:transform 1s ease; }
.memory-console:hover .memory-image img{transform:scale(1.1)}
.memory-image::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(5,1,8,.9)),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.035) 5px)}
.memory-stamp { position:absolute; z-index:2; left:17px; bottom:17px; padding:7px 9px; border:1px solid rgba(255,255,255,.35); background:rgba(4,0,7,.55); color:var(--blue); font:700 8px monospace; letter-spacing:.16em; }
.memory-copy { display:flex; flex-direction:column; min-height:530px; padding:clamp(30px,5vw,73px); }
.memory-meta { display:flex; justify-content:space-between; align-items:center; color:var(--pink); font:700 9px monospace; letter-spacing:.15em; }
.memory-meta i { color:#9772a4; font-style:normal; }
.memory-copy h3 { max-width:620px; margin:38px 0 22px; font-size:clamp(32px,4.3vw,67px); line-height:.92; letter-spacing:-.055em; text-transform:uppercase; }
.memory-copy>p { max-width:680px; margin:0; color:#d3badb; font:16px/1.75 Georgia,serif; }
.memory-copy blockquote { margin:28px 0 0; padding:14px 0 14px 20px; color:var(--blue); border-left:1px solid var(--blue); font:700 10px/1.55 monospace; letter-spacing:.08em; }
.memory-controls { display:flex; align-items:center; gap:17px; margin-top:auto; padding-top:35px; }
.memory-controls>button { width:40px; height:40px; display:grid; place-items:center; padding:0; color:var(--paper); border:1px solid var(--line); background:transparent; cursor:pointer; }
.memory-controls>button:hover{color:var(--ink);background:var(--pink)}
.memory-dots { display:flex; align-items:center; gap:8px; }
.memory-dots button { width:25px; height:2px; padding:0; border:0; background:#5c3c66; cursor:pointer; transition:width .3s,background .3s; }
.memory-dots button.active { width:57px; background:var(--pink); }
.artifact-row { display:grid; grid-template-columns:repeat(4,1fr); max-width:1200px; margin:25px auto 0; border:1px solid var(--line); border-right:0; }
.artifact-row>div { min-height:116px; display:flex; align-items:center; gap:16px; padding:22px; border-right:1px solid var(--line); background:rgba(14,4,19,.62); }
.artifact-row svg { flex:0 0 auto; color:var(--hot); filter:drop-shadow(0 0 8px rgba(255,59,212,.5)); }
.artifact-row span { color:#b99ec2; font:11px/1.55 monospace; }
.artifact-row b { display:block; margin-bottom:4px; color:var(--paper); text-transform:uppercase; letter-spacing:.06em; }

.anatomy-section { min-height:100vh; display:grid; grid-template-columns:minmax(300px,.82fr) 1.18fr; background:#e8dcf0; color:#120519; }
.anatomy-copy { align-self:center; padding:100px clamp(25px,7vw,105px); }
.anatomy-copy .chapter-label { color:#69117f; }
.anatomy-copy h2 { margin:30px 0; font-size:clamp(48px,6.3vw,96px); }
.anatomy-copy h2 em { -webkit-text-stroke-color:#a20da9; }
.anatomy-copy>p:not(.chapter-label) { max-width:490px; color:#4c3a53; font:16px/1.65 Georgia,serif; }
.anatomy-readout { margin-top:45px; padding:25px 0 25px 25px; border-left:2px solid #a20da9; }
.anatomy-readout>span { color:#8a0e90; font:700 9px monospace; letter-spacing:.16em; }
.anatomy-readout h3 { margin:10px 0 9px; font-size:clamp(20px,2.2vw,34px); line-height:1; text-transform:uppercase; }
.anatomy-readout p { max-width:470px; margin:0; color:#59455f; font:14px/1.6 Georgia,serif; }
.anatomy-visual { position:relative; min-height:760px; overflow:hidden; background:#14051c; clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 12%); }
.anatomy-visual img { width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.08); transform:translate(var(--tilt-x,0),var(--tilt-y,0)) scale(1.08); transition:transform .2s ease-out; }
.anatomy-visual::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,3,20,.35),transparent);pointer-events:none; }
.hotspot { position:absolute; z-index:4; width:45px; height:45px; padding:0; display:grid; place-items:center; color:white; background:rgba(6,1,9,.55); border:1px solid rgba(255,255,255,.65); border-radius:50%; cursor:pointer; box-shadow:0 0 0 9px rgba(255,59,212,.12),0 0 25px rgba(255,59,212,.45); }
.hotspot::after { content:""; position:absolute; inset:-11px; border:1px dashed rgba(255,255,255,.5); border-radius:50%; animation:spin 9s linear infinite; }
.hotspot:hover,.hotspot.active { color:#050108; background:var(--pink); border-color:var(--pink); transform:scale(1.12); }
.hotspot span{font:700 10px monospace}.hotspot-1{left:54%;top:38%}.hotspot-2{left:17%;top:29%}.hotspot-3{right:12%;top:19%}.hotspot-4{right:23%;bottom:13%}
.anatomy-scan { position:absolute; z-index:3; left:0; right:0; top:-15%; height:12%; background:linear-gradient(transparent,rgba(82,217,255,.4),transparent); mix-blend-mode:screen; animation:scan 6s linear infinite; pointer-events:none; }

.prophecy-section { position:relative; isolation:isolate; padding:clamp(95px,11vw,170px) clamp(20px,7vw,110px); overflow:hidden; background:#08010c; }
.prophecy-section::before { content:""; position:absolute; inset:0; z-index:-2; background:url('/prophecy-junkspace.png') center/cover fixed; opacity:.32; filter:saturate(1.2); }
.prophecy-section::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,1,8,.95),rgba(20,3,28,.74),rgba(5,1,8,.9)); }
.prophecy-head { max-width:1200px; margin:0 auto 65px; display:grid; grid-template-columns:.34fr 1fr; gap:35px; align-items:start; }
.receiver { max-width:1050px; margin:auto; padding:clamp(22px,4vw,52px); border:1px solid rgba(255,255,255,.38); background:rgba(8,1,12,.73); box-shadow:0 0 0 8px rgba(75,15,102,.25),0 40px 100px rgba(0,0,0,.55); backdrop-filter:blur(13px); }
.receiver-topline { display:flex; justify-content:space-between; align-items:center; color:#b994c5; font:700 9px monospace; letter-spacing:.17em; }
.receiver-topline b { color:var(--blue); font-size:13px; }
.waveform { height:168px; display:flex; align-items:center; gap:clamp(2px,.5vw,7px); margin:36px 0 18px; overflow:hidden; }
.waveform i { flex:1; min-width:2px; background:linear-gradient(var(--blue),var(--pink)); box-shadow:0 0 9px rgba(255,59,212,.38); transition:height .18s ease; }
.frequency-rule { position:relative; height:19px; border-block:1px solid rgba(255,255,255,.2); background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 1px,transparent 1px 4%); }
.frequency-rule span { position:absolute; top:-7px; width:16px; height:31px; background:var(--paper); box-shadow:0 0 15px var(--blue); transition:left .12s linear; }
.frequency-slider { width:100%; height:40px; margin-top:-29px; opacity:0; cursor:ew-resize; }
.receiver-output { min-height:185px; margin-top:28px; padding:28px; border:1px solid rgba(255,59,212,.38); background:rgba(38,5,48,.48); }
.receiver-output span { color:var(--pink); font:700 9px monospace; letter-spacing:.16em; }
.receiver-output p { max-width:830px; margin:19px 0 0; font:italic clamp(25px,3.9vw,54px)/1.05 Georgia,serif; }
.receiver-foot { display:flex; align-items:center; gap:10px; margin-top:22px; color:#9774a3; font:700 8px monospace; letter-spacing:.13em; }
.receiver-foot i { flex:1; height:1px; background:rgba(255,255,255,.2); }

.roadmap-section { position:relative; padding:clamp(100px,11vw,170px) clamp(20px,6vw,96px); overflow:hidden; background:radial-gradient(circle at 52% 55%,#38084e 0,#0d0212 35%,#040106 75%); }
.roadmap-section::before { content:""; position:absolute; inset:0; opacity:.32; background-image:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.4px); background-size:49px 49px; mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent); }
.roadmap-heading { position:relative; z-index:2; margin-bottom:35px; }
.flight-map { position:relative; max-width:1400px; height:690px; margin:auto; border:1px solid rgba(255,255,255,.13); background:linear-gradient(135deg,rgba(255,255,255,.025),transparent),repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.035) calc(10% - 1px) 10%),repeating-linear-gradient(0deg,transparent 0 calc(20% - 1px),rgba(255,255,255,.035) calc(20% - 1px) 20%); }
.flight-lines { position:absolute; inset:3% 0 auto; width:100%; height:63%; overflow:visible; }
.flight-lines path { fill:none; }
.path-shadow { stroke:rgba(255,255,255,.16); stroke-width:2; stroke-dasharray:5 8; }
.path-live { stroke:url(#nothing); stroke:var(--pink); stroke-width:2; stroke-dasharray:7 18; animation:dash 18s linear infinite; }
.flying-marker { position:absolute; z-index:5; width:33px; height:33px; display:grid; place-items:center; background:var(--blue); color:var(--ink); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); offset-path:path('M 90 302 C 182 330 210 90 322 112 S 420 310 545 255 S 640 45 735 74 S 828 330 912 266'); offset-distance:0%; animation:flyPath 15s linear infinite; box-shadow:0 0 20px var(--blue); }
.flying-marker span { font:900 11px Arial,sans-serif; }
.map-node { position:absolute; z-index:4; width:36px; height:36px; padding:0; transform:translate(-50%,-50%); border:0; border-radius:50%; background:#08010c; color:#fff; cursor:pointer; box-shadow:0 0 0 1px var(--pink),0 0 0 8px rgba(255,59,212,.09),0 0 25px rgba(255,59,212,.35); }
.map-node::after { content:"";position:absolute;inset:-14px;border:1px dashed rgba(255,255,255,.2);border-radius:50%;animation:spin 13s linear infinite; }
.map-node i { font:900 10px Arial,sans-serif; font-style:normal; }
.map-node>span { position:absolute; left:50%; top:48px; width:130px; transform:translateX(-50%); color:#a98bb4; font:700 8px/1.4 monospace; letter-spacing:.1em; text-transform:uppercase; }
.map-node:hover,.map-node.active { background:var(--pink); color:var(--ink); transform:translate(-50%,-50%) scale(1.25); }
.map-node.active>span { color:var(--paper); }
.map-card { position:absolute; left:4%; bottom:5%; width:min(480px,43%); min-height:205px; padding:28px; border:1px solid var(--line); background:rgba(7,1,10,.82); backdrop-filter:blur(12px); }
.map-card>div { display:flex; justify-content:space-between; color:var(--blue); font:700 8px monospace; letter-spacing:.14em; }
.map-card>div b{color:var(--pink)}
.map-card h3 { margin:18px 0 8px; font-size:clamp(23px,3vw,42px); line-height:1; letter-spacing:-.04em; text-transform:uppercase; }
.map-card p { margin:0; max-width:400px; color:#c6aacd; font:13px/1.55 Georgia,serif; }
.map-card small { display:block; margin-top:18px; color:#785e82; font:700 7px monospace; letter-spacing:.12em; }

.final-section { position:relative; min-height:93vh; display:grid; place-items:center; overflow:hidden; padding:110px 20px; text-align:center; background:linear-gradient(180deg,#050108,#190321 55%,#050108); }
.final-section::before { content:"";position:absolute;inset:0;background:url('/prophecy-junkspace.png') center/cover;opacity:.17;mix-blend-mode:screen; }
.final-orbit { position:absolute; width:min(72vw,850px); aspect-ratio:1; border:1px solid rgba(255,59,212,.25); border-radius:50%; animation:spin 36s linear infinite; }
.final-orbit::before,.final-orbit::after { content:"";position:absolute;border-radius:50%;border:1px dashed rgba(82,217,255,.24);inset:10%; }.final-orbit::after{inset:25%;border-color:rgba(255,255,255,.14)}
.final-orbit span { position:absolute; width:10px; aspect-ratio:1; border-radius:50%; background:var(--pink); box-shadow:0 0 18px var(--pink); }
.final-orbit span:nth-child(1){left:7%;top:28%}.final-orbit span:nth-child(2){right:12%;bottom:20%;background:var(--blue);box-shadow:0 0 18px var(--blue)}.final-orbit span:nth-child(3){left:50%;bottom:0}
.final-content { position:relative; z-index:2; width:min(890px,100%); }
.final-content>svg { color:var(--pink); filter:drop-shadow(0 0 12px var(--pink)); }
.final-content>p { margin:16px 0 24px; color:var(--blue); font:700 9px monospace; letter-spacing:.2em; }
.final-content h2 { margin:0; font-size:clamp(41px,7.5vw,105px); line-height:.87; letter-spacing:-.07em; text-transform:uppercase; }
.final-copy { display:block; max-width:600px; margin:28px auto 0; color:#c5a9cd; font:15px/1.6 Georgia,serif; }
.final-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:34px; }
.final-actions button,.final-actions a { min-height:50px; display:inline-flex; align-items:center; gap:9px; padding:0 19px; border:1px solid var(--line); color:var(--paper); background:rgba(9,1,12,.72); font:900 9px monospace; letter-spacing:.12em; cursor:pointer; }
.final-actions a{color:var(--ink);background:var(--pink);border-color:var(--pink)}
.final-actions button:hover,.final-actions a:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(255,59,212,.28)}
.is-unlocked .final-section { background:radial-gradient(circle,#5e0d76 0,#13021b 45%,#030105 76%); }

footer { min-height:190px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:35px; padding:45px clamp(20px,5vw,75px); border-top:1px solid var(--line); background:#030105; }
.footer-mark { display:grid; grid-template-columns:auto auto; justify-content:start; align-items:center; gap:8px; }
.footer-mark b { font-size:17px; letter-spacing:.08em; }
.footer-mark small { grid-column:1/-1; color:#80668a; font:700 7px monospace; letter-spacing:.15em; }
.contract { text-align:center; }
.contract>span { display:block; margin-bottom:8px; color:#765c7e; font:700 7px monospace; letter-spacing:.14em; }
.contract button { display:flex; align-items:center; gap:8px; padding:9px 12px; color:#c7a9d0; border:1px solid rgba(255,255,255,.15); background:transparent; font:700 9px monospace; cursor:pointer; }
.contract button:hover{border-color:var(--pink);color:var(--paper)}
.footer-links { justify-self:end; display:flex; gap:20px; }
.footer-links a { display:flex; align-items:center; gap:5px; font:800 9px monospace; letter-spacing:.1em; }
.footer-links a:hover{color:var(--pink)}

@keyframes awakeFlash { 0%{visibility:visible;opacity:1} 20%{opacity:0} 35%{opacity:.8} 37%{opacity:0} 100%{visibility:hidden;opacity:0} }
@keyframes eyePulse { to{transform:scale(1.11);filter:saturate(1.5) brightness(1.14)} }
@keyframes shardFloat { to{translate:0 -13px;rotate:12deg} }
@keyframes ticker { to{transform:translateX(-50%)} }
@keyframes dash { to{stroke-dashoffset:-500} }
@keyframes flyPath { to{offset-distance:100%} }

@media (max-width: 1020px) {
  .section-heading,.roadmap-heading { grid-template-columns:.25fr 1fr; }
  .section-heading>span,.roadmap-heading>span { grid-column:2; }
  .artifact-row { grid-template-columns:repeat(2,1fr); }
  .anatomy-section { grid-template-columns:1fr; }
  .anatomy-copy { padding-bottom:65px; }
  .anatomy-visual { min-height:720px; clip-path:polygon(7% 0,100% 0,100% 100%,0 100%,0 8%); }
  .flight-map { height:610px; }
}

@media (max-width: 720px) {
  .pointer-aurora { display:none; }
  .header-actions .sound-button { display:none; }
  .header-actions .buy-button { padding:0 12px; }
  .signal-pill { display:none; }
  .shard-meter { left:16px; right:auto; bottom:13px; }
  .hero { min-height:850px; padding-top:110px; align-content:start; }
  .flybrain-frame { right:-34%; top:25%; width:110vw; }
  .hero-copy { padding-top:10px; }
  .hero-deck { font-size:15px; }
  .key-hint { display:none; }
  .scroll-cue { bottom:38px; }
  .shard-1{left:42%;top:48%}.shard-2{right:4%;top:68%}.shard-3{left:32%;bottom:8%}
  .section-heading,.roadmap-heading,.prophecy-head { display:block; }
  .section-heading>p,.roadmap-heading>p,.prophecy-head>p { margin-bottom:24px; }
  .section-heading>span,.roadmap-heading>span { display:block; margin-top:23px; }
  .memory-console { grid-template-columns:1fr; }
  .memory-image { min-height:360px; border-right:0; border-bottom:1px solid var(--line); }
  .memory-copy { min-height:580px; padding:32px 24px; }
  .memory-copy h3 { margin-top:28px; }
  .artifact-row { grid-template-columns:1fr; border-bottom:0; }
  .artifact-row>div { min-height:95px; border-bottom:1px solid var(--line); }
  .anatomy-copy { padding:90px 23px 58px; }
  .anatomy-visual { min-height:560px; }
  .hotspot { width:39px;height:39px; }
  .prophecy-section { padding-inline:15px; }
  .prophecy-head { padding-inline:7px; }
  .receiver { padding:22px 16px; }
  .waveform { height:120px; gap:2px; }
  .receiver-output { min-height:210px; padding:22px 18px; }
  .receiver-foot span:last-child,.receiver-foot i { display:none; }
  .roadmap-section { padding-inline:15px; }
  .roadmap-heading { padding-inline:7px; }
  .flight-map { height:710px; }
  .flight-lines { top:7%; height:48%; }
  .map-node>span { display:none; }
  .map-card { left:5%; right:5%; bottom:5%; width:auto; min-height:225px; }
  .final-orbit { width:140vw; }
  footer { grid-template-columns:1fr; text-align:center; }
  .footer-mark { justify-content:center; }
  .contract { justify-self:center; }
  .footer-links { justify-self:center; }
}