:root { --bg:#101217; --panel:#15181f; --line:rgba(221,230,255,.17); --muted:#aab1c1; --text:#f4f5f8; --blue:#9faeff; --violet:#a27cff; --max:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Noto Sans SC","Manrope",sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-4; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(to bottom,black,transparent 68%); }
.page-noise { position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.055; 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='.7'/%3E%3C/svg%3E"); }
.ambient { position:fixed; width:45vw; height:45vw; border-radius:50%; filter:blur(90px); opacity:.12; z-index:-3; pointer-events:none; }
.ambient-one { background:#575cdb; top:-15vw; right:-12vw; }.ambient-two { background:#732eac; bottom:5vh; left:-25vw; }
.section { position:relative; }.section-pad { width:min(calc(100% - 64px),var(--max)); margin-inline:auto; padding-block:150px; }
.hero { min-height:100svh; display:flex; align-items:center; isolation:isolate; overflow:hidden; width:100%; }
.hero-grid { position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 50% 45%,rgba(129,142,255,.12),transparent 30%),linear-gradient(90deg,transparent 49.94%,rgba(255,255,255,.07) 50%,transparent 50.06%); mask-image:linear-gradient(to bottom,black 30%,transparent 85%); }
.orbit { position:absolute; border:1px solid rgba(190,200,255,.22); border-radius:50%; z-index:-1; transform:rotate(-28deg); }.orbit::before { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#c6caff; box-shadow:0 0 18px 6px rgba(158,172,255,.8); }
.orbit-large { width:min(1040px,85vw); height:min(420px,35vw); left:33%; top:27%; }.orbit-large::before { top:1%; left:13%; }
.orbit-small { width:440px; height:180px; left:53%; top:41%; border-color:rgba(172,129,255,.36); }.orbit-small::before { bottom:-3px; right:9%; background:#c49bff; box-shadow:0 0 18px 6px rgba(181,123,255,.8); }
.nav { position:absolute; top:29px; left:max(32px,calc((100vw - var(--max))/2)); right:max(32px,calc((100vw - var(--max))/2)); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:19px; }
.wordmark { color:var(--text); font:800 18px/1 "Manrope",sans-serif; letter-spacing:-.06em; text-decoration:none; }.wordmark span { color:var(--violet); }.nav-link { display:flex; align-items:center; gap:9px; color:#d7d9e2; font:500 11px/1 "DM Mono",monospace; letter-spacing:.09em; text-decoration:none; }.nav-link i { font-size:15px; }
.hero-content { width:min(calc(100% - 64px),var(--max)); margin-inline:auto; padding-top:4vh; }.eyebrow,.kicker,.section-marker,.community-code { margin:0; color:var(--blue); font:500 11px/1.4 "DM Mono",monospace; letter-spacing:.13em; }.hero h1 { max-width:750px; margin:23px 0 22px; font:800 clamp(64px,11.7vw,166px)/.78 "Manrope",sans-serif; letter-spacing:-.095em; }.hero h1 em { font-style:normal; color:transparent; -webkit-text-stroke:1px rgba(236,238,255,.84); }.hero-subtitle { margin:0; color:#e3e5f0; font-size:clamp(15px,1.8vw,22px); font-weight:500; letter-spacing:.05em; }.scroll-cue { position:absolute; display:flex; align-items:center; gap:17px; bottom:39px; left:max(32px,calc((100vw - var(--max))/2)); color:#c4c9d8; font-size:12px; text-decoration:none; }.scroll-cue i { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; font-size:15px; transition:transform .3s ease,background .3s ease; }.scroll-cue:hover i { background:#747de8; transform:translateY(3px); }.hero-index { position:absolute; bottom:42px; right:max(32px,calc((100vw - var(--max))/2)); margin:0; color:#777d90; font:11px "DM Mono",monospace; }
.hero-signal { position:absolute; top:30%; right:9%; display:flex; gap:6px; align-items:end; height:45px; opacity:.8; }.hero-signal span { width:2px; background:var(--blue); box-shadow:0 0 10px var(--blue); animation:pulse 2.5s ease-in-out infinite; }.hero-signal span:nth-child(1){height:14px}.hero-signal span:nth-child(2){height:39px;animation-delay:.3s}.hero-signal span:nth-child(3){height:23px;animation-delay:.6s}
.project-entry{min-height:680px;display:flex;align-items:center;isolation:isolate;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.project-entry-image{position:absolute;z-index:-2;inset:0;background:center/cover no-repeat url("assets/reactor/containment-network.png");filter:brightness(.6) saturate(.72)}.project-entry-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(11,12,16,.96) 0%,rgba(11,12,16,.72) 44%,rgba(12,8,10,.1) 100%),linear-gradient(0deg,rgba(11,12,16,.65),transparent)}.project-entry-content{width:min(calc(100% - 64px),var(--max));margin:auto;padding:70px 0}.project-entry h2{max-width:760px;margin:24px 0 22px;font:800 clamp(44px,7.3vw,105px)/.82 "Manrope",sans-serif;letter-spacing:-.09em}.project-entry h2 span{color:transparent;-webkit-text-stroke:1px rgba(238,230,255,.86)}.project-entry-copy{max-width:430px;margin:0;color:#d7cad0;font-size:16px;line-height:1.9}.project-entry-link{display:inline-flex;align-items:center;gap:10px;margin-top:35px;padding:13px 0;color:#f2f3ff;border-bottom:1px solid #aab4ff;font-size:14px;text-decoration:none}.project-entry-link i{font-size:18px}.project-entry-coordinate{position:absolute;right:max(32px,calc((100vw - var(--max))/2));bottom:35px;margin:0;color:#b9a9b1;font:10px "DM Mono",monospace;letter-spacing:.1em}
.section-marker { display:flex; gap:18px; color:#868fa8; padding-bottom:22px; border-bottom:1px solid var(--line); }.section-marker span:first-child { color:var(--blue); }.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding-top:75px; }.about-heading h2,.metrics h2,.community h2 { margin:18px 0 0; font:700 clamp(37px,5.3vw,72px)/1.05 "Manrope","Noto Sans SC",sans-serif; letter-spacing:-.065em; }.about-heading h2 span,.metrics h2 span,.community h2 span { color:#a9b3ff; }.about-copy { padding-top:11px; max-width:600px; color:#c4c8d4; font-size:15px; line-height:2; }.about-copy p { margin:0 0 29px; }.about-copy .lead { color:#edf0f9; font-size:17px; font-weight:500; }.story-block { position:relative; max-width:890px; margin:105px 0 0 auto; padding:0 0 0 69px; color:#b5bbca; font-size:14px; line-height:2.05; }.story-block p { margin:0; }.story-quote { position:absolute; top:-57px; left:0; color:#7887fc; font:150px/.85 Georgia,serif; }.story-line { position:absolute; left:15px; top:70px; bottom:0; width:1px; background:linear-gradient(var(--blue),transparent); }
.metrics { width:100%; max-width:none; padding-inline:max(32px,calc((100vw - var(--max))/2)); padding-block:135px; background:linear-gradient(110deg,#171b29 0%,#11141b 55%,#191627 100%); overflow:hidden; }.metrics::after { content:""; position:absolute; width:60vw; height:60vw; border:1px solid rgba(143,156,255,.12); border-radius:50%; right:-25vw; top:-45vw; }.metrics-top { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; }.metric-note { margin:0 0 5px; padding-left:20px; border-left:1px solid #7c8aff; color:#aab0c1; font:12px/1.8 "DM Mono","Noto Sans SC",sans-serif; }.metric-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); margin-top:76px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.metric-card { position:relative; min-height:248px; padding:36px 26px; border-right:1px solid var(--line); overflow:hidden; transition:background .35s ease,transform .35s ease,box-shadow .35s ease; }.metric-card:first-child { border-left:1px solid var(--line); }.metric-card:hover { background:rgba(144,157,255,.09); transform:translateY(-7px); box-shadow:0 20px 45px rgba(0,0,0,.17); }.metric-number { font:700 clamp(48px,6vw,90px)/1 "Manrope",sans-serif; letter-spacing:-.08em; }.unit { color:#afb9ff; font:600 clamp(22px,2.6vw,38px)/1 "Manrope",sans-serif; margin-left:5px; }.metric-card p { margin:42px 0 0; color:#c5cad8; font-size:14px; }.metric-symbol { position:absolute; right:27px; bottom:27px; color:#717da4; font-size:23px; }
.community { min-height:720px; overflow:hidden; }.community-heading { position:relative; z-index:1; }.community-intro { margin:22px 0 0; color:var(--muted); font-size:15px; }.community-orb { position:absolute; width:560px; height:560px; right:3%; top:71px; border-radius:50%; background:radial-gradient(circle at 40% 38%,rgba(204,214,255,.55),rgba(109,123,233,.27) 8%,rgba(22,25,42,.4) 33%,transparent 65%); }.community-orb span { position:absolute; border:1px solid rgba(179,190,255,.22); border-radius:50%; }.community-orb span:nth-child(1){inset:10%}.community-orb span:nth-child(2){inset:27%;transform:rotateX(64deg)}.community-orb span:nth-child(3){inset:18%;transform:rotate(70deg) scaleY(.35)}
.community-links { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:90px; }.community-card { min-height:178px; display:flex; flex-direction:column; justify-content:space-between; position:relative; padding:26px; color:var(--text); text-decoration:none; background:rgba(22,25,34,.72); border:1px solid var(--line); transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease; }.community-card:hover { transform:translateY(-7px) scale(1.01); border-color:#9daaff; box-shadow:0 18px 45px rgba(0,0,0,.26); }.community-card strong { font-size:21px; letter-spacing:-.04em; }.community-card i { position:absolute; right:25px; bottom:25px; color:#b8c2ff; font-size:21px; }
.footer { width:min(calc(100% - 64px),var(--max)); margin:auto; padding:35px 0 42px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#8990a1; font-size:11px; }.footer-main,.footer-meta { display:flex; gap:25px; align-items:center; }.footer p { margin:0; }.footer-meta a { color:#d3d7e3; text-decoration:none; }.back-top { position:fixed; display:grid; place-items:center; z-index:8; right:25px; bottom:25px; width:46px; height:46px; padding:0; color:#11131a; background:#dce0ff; border:0; border-radius:50%; cursor:pointer; font-size:20px; opacity:0; transform:translateY(15px); pointer-events:none; transition:opacity .25s ease,transform .25s ease,background .25s ease; }.back-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }.back-top:hover { background:#aeb8ff; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity:1; transform:none; }.reveal-load { opacity:0; transform:translateY(20px); animation:load-in .8s cubic-bezier(.2,.8,.2,1) forwards; }.nav.reveal-load{animation-delay:.05s}.hero-content .reveal-load:nth-child(1){animation-delay:.18s}.hero-content .reveal-load:nth-child(2){animation-delay:.28s}.hero-content .reveal-load:nth-child(3){animation-delay:.42s}.scroll-cue.reveal-load{animation-delay:.55s}.hero-index.reveal-load{animation-delay:.6s}
@keyframes load-in { to{opacity:1;transform:none} } @keyframes pulse { 50%{transform:scaleY(.4);opacity:.35} }
@media (max-width:760px) { .section-pad{width:min(calc(100% - 40px),var(--max));padding-block:95px}.nav{left:20px;right:20px;top:22px}.hero-content{width:calc(100% - 40px)}.hero h1{font-size:clamp(59px,18.2vw,100px)}.hero-signal{right:7%;top:24%}.orbit-large{width:110vw;height:46vw;left:17%;top:32%}.orbit-small{width:90vw;height:36vw;left:28%;top:43%}.hero-index{right:20px;bottom:35px}.scroll-cue{left:20px;bottom:31px}.project-entry{min-height:570px}.project-entry-content{width:calc(100% - 40px);padding:85px 0}.project-entry h2{font-size:clamp(43px,13vw,70px)}.project-entry-copy{font-size:14px}.project-entry-coordinate{right:20px;bottom:27px;font-size:9px}.about-layout{grid-template-columns:1fr;gap:32px;padding-top:50px}.about-copy{padding:0;font-size:14px}.about-copy .lead{font-size:16px}.story-block{margin-top:72px;padding-left:35px;font-size:13px}.story-quote{left:-7px;font-size:105px}.story-line{left:3px}.metrics{padding:95px 20px}.metrics-top{display:block}.metric-note{margin-top:34px}.metric-grid{grid-template-columns:1fr;margin-top:51px}.metric-card{min-height:187px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.metric-card:last-child{border-bottom:0}.metric-card p{margin-top:27px}.community{min-height:auto}.community-orb{width:390px;height:390px;right:-38%;top:80px;opacity:.7}.community-links{grid-template-columns:1fr;margin-top:62px}.community-card{min-height:139px}.footer{width:calc(100% - 40px);display:block;padding-block:28px}.footer-main,.footer-meta{gap:12px;align-items:flex-start;flex-direction:column}.footer-meta{margin-top:23px}.footer-main .wordmark{font-size:21px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.reveal,.reveal-load{opacity:1;transform:none;animation:none;transition:none}.metric-card,.community-card,.back-top{transition:none}.hero-signal span{animation:none} }