@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,700&family=Inter:wght@400;500;600&display=swap');

:root{--ink:#030514;--navy:#070b27;--white:#f7fbff;--cyan:#52e8ff;--blue:#2178ff;--violet:#9b5cff;--muted:#a9b3d3;--line:rgba(158,215,255,.22);--header:78px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--white);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.16;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.site-header{height:var(--header);padding:0 clamp(22px,5vw,78px);position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(1,3,15,.72),transparent)}
.brand{display:flex;align-items:center;gap:13px;text-transform:uppercase;letter-spacing:.18em;font:600 .76rem/1 Inter}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;clip-path:polygon(18% 0,100% 0,84% 50%,100% 100%,18% 100%,0 50%);background:linear-gradient(135deg,var(--cyan),var(--blue) 55%,var(--violet));color:#02051b;font:800 1rem/1 'Barlow Condensed'}
.brand-mark b,.brand b,footer b{font-weight:800}
.nav{display:flex;gap:36px;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}
.nav a{opacity:.78;transition:.25s}
.nav a:hover{opacity:1;color:var(--cyan)}
.sound-toggle{display:flex;align-items:flex-end;justify-content:center;gap:3px;width:42px;height:42px;padding:12px;border:1px solid var(--line);background:rgba(6,12,43,.48);clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);cursor:pointer}
.sound-toggle span{width:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:eq .7s ease-in-out infinite alternate}
.sound-toggle span:nth-child(1){height:8px}.sound-toggle span:nth-child(2){height:17px;animation-delay:-.35s}.sound-toggle span:nth-child(3){height:12px;animation-delay:-.15s}
.sound-toggle.muted span{animation:none;height:2px}
@keyframes eq{to{height:5px}}
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--header) + 70px) clamp(22px,8vw,130px) 80px;background:#050819 url('assets/backgrounds/hero-cosmic.png') center/cover no-repeat;isolation:isolate}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,3,16,.92) 0%,rgba(2,5,21,.66) 36%,rgba(2,5,20,.05) 72%),linear-gradient(0deg,rgba(3,5,20,.75),transparent 35%)}
.hero-copy{max-width:760px}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;color:#c9d8ff;font-size:.73rem;font-weight:600;letter-spacing:.22em}
.eyebrow span{display:block;width:34px;height:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.hero h1,.lore-title h1{margin:0;font:800 clamp(4rem,8.8vw,8.7rem)/.78 'Barlow Condensed',sans-serif;letter-spacing:-.045em;text-transform:uppercase;text-shadow:0 0 45px rgba(31,119,255,.13)}
.hero-kicker{margin:24px 0 40px;font:italic 700 clamp(1.5rem,3vw,2.8rem)/1 'Barlow Condensed';color:var(--cyan);letter-spacing:.025em}
.action-grid{display:flex;flex-wrap:wrap;gap:13px;max-width:720px}
.charge-button{position:relative;min-width:190px;height:58px;padding:0 20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:28px;border:0;clip-path:polygon(11px 0,100% 0,calc(100% - 13px) 50%,100% 100%,11px 100%,0 calc(100% - 11px),0 11px);background:linear-gradient(115deg,#d9fbff 0%,var(--cyan) 38%,#3787ff 100%);color:#02051a;font-size:.77rem;font-weight:800;letter-spacing:.16em;cursor:pointer;filter:drop-shadow(0 0 16px rgba(76,224,255,.2));transition:transform .25s,filter .25s}
.charge-button::before{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(100deg,rgba(255,255,255,.5),transparent 52%);opacity:.5}
.charge-button span,.charge-button i{position:relative;z-index:1}.charge-button i{font-style:normal;font-size:1.2rem}
.charge-button:hover{transform:translateY(-3px);filter:drop-shadow(0 0 22px rgba(76,224,255,.52))}
.charge-button.violet{background:linear-gradient(115deg,#e7dcff,var(--violet) 45%,#4f38d9);color:#08031c}
.charge-button.ghost{color:var(--white);background:linear-gradient(115deg,rgba(82,232,255,.35),rgba(34,70,155,.3));box-shadow:inset 0 0 0 1px rgba(125,233,255,.55)}
.charge-button.wide{width:min(360px,100%);margin-top:28px}
.coordinates{position:absolute;right:clamp(24px,5vw,70px);bottom:35px;color:#a5b1d6;font:500 .64rem/1 Inter;letter-spacing:.16em}
.scroll-cue{position:absolute;left:clamp(22px,8vw,130px);bottom:30px;display:flex;align-items:center;gap:12px;color:#9ba6c9;text-transform:uppercase;font-size:.62rem;letter-spacing:.2em}.scroll-cue span{display:block;width:40px;height:1px;background:var(--cyan)}
.signal-section{position:relative;min-height:100svh;padding:130px clamp(22px,8vw,130px);overflow:hidden;background:radial-gradient(circle at 72% 43%,rgba(32,115,255,.18),transparent 28%),linear-gradient(135deg,#030514,#07102f 62%,#05061d)}
.signal-section::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 220deg at 70% 50%,transparent,rgba(69,222,255,.08),transparent 25%);animation:slowspin 22s linear infinite}
@keyframes slowspin{to{transform:rotate(360deg)}}
.section-label{position:relative;z-index:2;color:#8392bc;font-size:.67rem;letter-spacing:.24em}
.signal-copy{position:relative;z-index:2;display:grid;grid-template-columns:minmax(320px,1.2fr) minmax(280px,.55fr);gap:8vw;align-items:end;margin-top:70px}
.mega-quote{margin:0;font:700 clamp(4rem,8vw,8rem)/.83 'Barlow Condensed';letter-spacing:-.035em}.mega-quote em{color:transparent;-webkit-text-stroke:1px var(--cyan);text-shadow:0 0 28px rgba(82,232,255,.36)}
.body-copy{max-width:460px;margin:0 0 8px;color:#bac5e4;font-size:clamp(1rem,1.4vw,1.28rem);line-height:1.75}
.signal-orbit{position:absolute;right:-12vw;top:4vh;width:min(62vw,880px);aspect-ratio:1;border:1px solid rgba(82,232,255,.18);border-radius:50%;box-shadow:0 0 90px rgba(46,111,255,.12),inset 0 0 90px rgba(46,111,255,.08)}
.signal-orbit::before,.signal-orbit::after{content:"";position:absolute;inset:12%;border:1px dashed rgba(143,99,255,.22);border-radius:50%;transform:rotate(32deg)}
.signal-orbit::after{inset:31%;border-style:solid;border-color:rgba(82,232,255,.28)}
.signal-orbit span{position:absolute;left:9%;top:48%;width:82%;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 22px var(--cyan);transform:rotate(-18deg)}
.signal-note{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin-top:110px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.signal-note span{padding:24px 18px;text-align:center;color:#d3dcf7;font:600 .68rem/1 Inter;letter-spacing:.22em;border-right:1px solid var(--line)}.signal-note span:last-child{border-right:0}
.rules-section{min-height:90svh;padding:130px clamp(22px,8vw,130px);background:linear-gradient(180deg,#05071d,#080a26)}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:70px;background:var(--line);border:1px solid var(--line)}
.rule-card{position:relative;min-height:390px;padding:44px 38px;background:linear-gradient(155deg,rgba(10,17,50,.96),rgba(3,5,20,.98));overflow:hidden}
.rule-card::after{content:"";position:absolute;width:180px;height:180px;right:-80px;bottom:-90px;border:1px solid rgba(82,232,255,.32);transform:rotate(45deg);box-shadow:0 0 40px rgba(82,232,255,.08)}
.rule-card>span{color:var(--cyan);font-size:.68rem;letter-spacing:.2em}.rule-card h2{margin:128px 0 16px;font:700 clamp(2.3rem,4vw,4rem)/.9 'Barlow Condensed';text-transform:uppercase}.rule-card p{max-width:270px;color:#9eabc9;line-height:1.65}
.portal-section{position:relative;min-height:82svh;display:grid;place-items:center;text-align:center;padding:110px 22px;overflow:hidden;background:#030514}
.portal-glow{position:absolute;width:min(70vw,820px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(82,232,255,.7);box-shadow:0 0 45px var(--blue),inset 0 0 80px rgba(68,103,255,.38);background:radial-gradient(circle,rgba(68,129,255,.26),transparent 63%)}
.portal-glow::before,.portal-glow::after{content:"";position:absolute;inset:10%;border:1px solid rgba(155,92,255,.55);border-radius:50%}.portal-glow::after{inset:24%;border-color:rgba(82,232,255,.34)}
.portal-copy{position:relative;z-index:2;max-width:680px;display:flex;flex-direction:column;align-items:center}.portal-copy h2{margin:0 0 18px;font:700 clamp(3.5rem,7vw,7rem)/.88 'Barlow Condensed';text-transform:uppercase}.portal-copy>p:not(.eyebrow){margin:0;color:#b5c0df;font-size:1.05rem;line-height:1.7}
footer{min-height:90px;padding:0 clamp(22px,5vw,78px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);color:#8d99bd;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;background:#02030e}footer span:first-child{color:#fff;font-size:.9rem}
.toast{position:fixed;z-index:80;left:50%;bottom:28px;transform:translate(-50%,140%);opacity:0;padding:15px 22px;color:#031020;background:var(--cyan);font-size:.8rem;font-weight:700;letter-spacing:.04em;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);transition:.35s}.toast.show{transform:translate(-50%,0);opacity:1}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}

/* Lore */
.header-back{font-size:.66rem;letter-spacing:.18em;color:var(--cyan)}
.lore-hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;padding:calc(var(--header) + 70px) clamp(22px,8vw,130px) 90px;background:#020417 url('assets/backgrounds/lore-observatory.png') center/cover no-repeat;isolation:isolate}
.lore-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(2,4,18,.94),transparent 65%),linear-gradient(90deg,rgba(2,4,18,.72),transparent 58%)}
.lore-title h1{font-size:clamp(4.5rem,10vw,10rem)}
.case-number{position:absolute;right:clamp(22px,8vw,130px);bottom:100px;margin:0;text-align:right;color:#a7b6df;font-size:.67rem;line-height:1.8;letter-spacing:.19em}
.story-section{min-height:95svh;display:grid;grid-template-columns:.45fr 1fr;gap:9vw;padding:150px clamp(22px,10vw,165px);background:linear-gradient(135deg,#050719,#081033)}
.story-index{color:var(--cyan);font:700 clamp(4rem,8vw,8rem)/.8 'Barlow Condensed';letter-spacing:-.03em}.story-index span{display:block;margin-top:22px;color:#7280a7;font:600 .64rem/1 Inter;letter-spacing:.2em}
.story-copy{max-width:760px}.story-copy p{margin:0 0 42px;color:#bbc5e4;font-size:clamp(1.15rem,2vw,1.65rem);line-height:1.72}.story-copy .dropcap::first-letter{float:left;margin:.04em .12em 0 0;color:#fff;font:700 5.2em/.72 'Barlow Condensed';text-shadow:0 0 20px var(--blue)}.story-copy strong{color:var(--cyan);letter-spacing:.12em}
.evidence-section{padding:130px clamp(22px,8vw,130px);background:#030514}.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:65px}.evidence{min-height:260px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:linear-gradient(145deg,rgba(13,25,67,.7),rgba(6,8,27,.6));clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}.evidence span{color:var(--cyan);font:700 1rem/1 'Barlow Condensed'}.evidence p{margin:0;max-width:240px;font:600 clamp(1.6rem,3vw,2.6rem)/1.05 'Barlow Condensed';text-transform:uppercase}
.last-word{min-height:90svh;display:grid;place-items:center;padding:120px 22px;background:radial-gradient(circle at 50% 48%,rgba(27,113,255,.26),transparent 28%),linear-gradient(180deg,#05061b,#02030d);text-align:center}.last-word-inner{display:flex;flex-direction:column;align-items:center}.last-word h2{margin:0 0 42px;font:700 clamp(4rem,8vw,8rem)/.86 'Barlow Condensed';text-transform:uppercase}.last-word h2 em{color:var(--cyan)}.action-grid.compact{justify-content:center}

@media (max-width:820px){:root{--header:68px}.nav{display:none}.sound-toggle{width:38px;height:38px}.hero{padding-left:22px;background-position:62% center}.hero-shade{background:linear-gradient(90deg,rgba(1,3,16,.95),rgba(2,5,21,.62) 70%,rgba(2,5,20,.22))}.hero h1{font-size:clamp(3.55rem,17vw,6.1rem)}.hero-kicker{margin-top:18px}.action-grid{display:grid;grid-template-columns:1fr 1fr;width:100%}.charge-button{min-width:0;width:100%}.charge-button.ghost{grid-column:1/-1}.coordinates{display:none}.signal-section,.rules-section{padding:100px 22px}.signal-copy{grid-template-columns:1fr;gap:42px}.mega-quote{font-size:clamp(3.5rem,17vw,6rem)}.signal-orbit{width:110vw;right:-52vw;top:15vh}.signal-note{grid-template-columns:1fr;margin-top:75px}.signal-note span{border-right:0;border-bottom:1px solid var(--line)}.rules-grid{grid-template-columns:1fr}.rule-card{min-height:280px}.rule-card h2{margin-top:72px}.portal-glow{width:105vw}.evidence-grid{grid-template-columns:1fr}.evidence{min-height:210px}.story-section{grid-template-columns:1fr;padding:110px 22px}.story-index{font-size:4rem}.case-number{display:none}.lore-title h1{font-size:clamp(4rem,18vw,7rem)}.header-back{display:none}footer{align-items:flex-start;flex-direction:column;padding-top:28px;padding-bottom:28px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.signal-section::before,.sound-toggle span{animation:none}.reveal{opacity:1;transform:none;transition:none}}