:root { color-scheme: dark; --ink:#f4efe6; --muted:#b7b0a5; --quiet:#817a71; --bg:#05070c; --blue:#e8b56d; --violet:#e8b56d; --gold:#e8b56d; --green:#e8b56d; --line:rgba(244,239,230,.2); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { overflow-x:hidden; margin:0; min-width:320px; color:var(--ink); background:var(--bg); line-height:1.5; } body::before { position:fixed; z-index:-4; inset:0; content:""; background:radial-gradient(circle at 12% 8%,rgba(232,181,109,.12),transparent 38rem),radial-gradient(circle at 88% 35%,rgba(232,181,109,.08),transparent 36rem),linear-gradient(180deg,#060a16,#050811 65%,#080b13); } .home-noise { position:fixed; z-index:-1; inset:0; opacity:.045; pointer-events:none; 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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); } .shell { width:min(1240px,calc(100% - 56px)); margin:0 auto; }
.landing-nav { display:flex; align-items:center; gap:36px; padding:24px 0; border-bottom:1px solid rgba(163,193,236,.1); } .home-brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:.72rem; font-weight:650; letter-spacing:.08em; line-height:1.05; text-decoration:none; text-transform:uppercase; } .home-brand b { color:var(--blue); font-weight:750; } .brand-orbit { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(232,181,109,.62); border-radius:50%; color:var(--blue); font-size:.6rem; letter-spacing:-.08em; box-shadow:0 0 25px rgba(232,181,109,.2),inset 0 0 12px rgba(232,181,109,.12); } .landing-nav nav { display:flex; gap:27px; margin-left:auto; } .landing-nav nav a,.nav-entry { color:var(--muted); font-size:.73rem; text-decoration:none; }.landing-nav nav a:hover,.nav-entry:hover { color:var(--ink); }.nav-entry { padding:9px 13px; border:1px solid var(--line); border-radius:999px; }.nav-entry span { margin-left:8px; color:var(--blue); }
.home-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(390px,1.1fr); gap:50px; align-items:center; min-height:760px; padding:95px 0 105px; }.hero-kicker,.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:var(--blue); font-size:.66rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }.hero-kicker span { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 15px var(--green); } h1,h2,h3,p { margin-top:0; } h1 { max-width:620px; margin-bottom:25px; font-size:clamp(3.5rem,7vw,7.2rem); letter-spacing:-.095em; line-height:.87; } h1 i { color:var(--blue); font-style:normal; } h1 strong { font-weight:760; background:linear-gradient(100deg,#fff,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }.hero-description { max-width:510px; margin-bottom:30px; color:var(--muted); font-size:1rem; line-height:1.75; }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-bottom:40px; }.hero-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:14px 17px 14px 20px; border:1px solid rgba(232,181,109,.48); border-radius:9px; color:#eef7ff; background:linear-gradient(110deg,rgba(46,145,204,.32),rgba(110,75,180,.26)); box-shadow:0 10px 35px rgba(39,131,195,.12); font-size:.78rem; font-weight:800; text-decoration:none; transition:.2s ease; }.hero-button:hover { transform:translateY(-2px); border-color:var(--blue); box-shadow:0 15px 40px rgba(39,131,195,.24); }.hero-button span { color:var(--blue); font-size:1.1rem; }.text-link { color:var(--muted); font-size:.76rem; font-weight:700; text-decoration:none; }.text-link span { margin-left:9px; color:var(--blue); }.text-link:hover { color:var(--ink); }.hero-signature { display:flex; flex-wrap:wrap; gap:14px; color:var(--quiet); font-size:.61rem; letter-spacing:.14em; }.hero-signature span:not(:last-child)::after { margin-left:14px; content:"·"; color:var(--violet); }
.hero-visual { position:relative; min-height:540px; border:1px solid var(--line); border-radius:25px; background:radial-gradient(circle at 50% 50%,rgba(75,110,203,.1),transparent 58%),rgba(8,13,27,.44); box-shadow:inset 0 0 100px rgba(83,92,189,.08),0 35px 100px rgba(0,0,0,.25); }.hero-visual::before,.hero-visual::after { position:absolute; content:""; pointer-events:none; }.hero-visual::before { inset:10%; border:1px solid rgba(232,181,109,.1); border-radius:50%; transform:rotate(-24deg) scaleX(1.45); }.hero-visual::after { inset:18% 5%; border-top:1px solid rgba(232,181,109,.22); border-radius:50%; transform:rotate(32deg); }#cosmos-canvas { display:block; width:100%; height:540px; }.visual-readout { position:absolute; z-index:2; display:grid; gap:3px; font-size:.56rem; letter-spacing:.12em; }.visual-readout span { color:var(--quiet); }.visual-readout b { color:var(--blue); font-size:.72rem; font-weight:700; letter-spacing:.08em; }.readout-top { top:22px; left:25px; }.readout-left { top:48%; left:21px; }.readout-right { top:42%; right:21px; text-align:right; }.readout-bottom { right:25px; bottom:22px; display:flex; align-items:center; gap:7px; }.readout-bottom em { margin-left:12px; color:var(--quiet); font-style:normal; }.pulse { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 11px var(--green); }
.manifesto { display:grid; grid-template-columns:130px 1fr 210px; gap:42px; padding:31px 0 32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.manifesto-label { display:flex; gap:12px; color:var(--quiet); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }.manifesto-label span:first-child { color:var(--blue); }.manifesto h2 { max-width:700px; margin-bottom:17px; font-size:clamp(1.7rem,3.5vw,3.25rem); letter-spacing:-.065em; line-height:1.02; }.manifesto h2 em { color:var(--blue); font-style:normal; }.manifesto p { max-width:680px; margin:0; color:var(--muted); font-size:.87rem; line-height:1.7; }.manifesto-aside { align-self:end; padding-left:19px; border-left:1px solid var(--line); }.manifesto-aside span { display:block; margin-bottom:9px; color:var(--quiet); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }.manifesto-aside strong { color:var(--gold); font-size:.85rem; line-height:1.35; }
.flow-section,.labs-section { padding-top:145px; }.section-intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px; margin-bottom:45px; }.section-intro h2,.labs-heading h2 { margin-bottom:0; font-size:clamp(2.1rem,4vw,4.15rem); letter-spacing:-.075em; line-height:.96; }.section-intro p:last-child { max-width:340px; margin:0; color:var(--muted); font-size:.86rem; line-height:1.7; }.flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.flow-card { position:relative; min-height:310px; padding:22px; border-top:1px solid var(--line); background:linear-gradient(145deg,rgba(19,30,53,.63),rgba(10,16,29,.25)); }.flow-card:hover { border-top-color:var(--blue); }.flow-number { color:var(--blue); font-size:.62rem; letter-spacing:.15em; }.flow-glyph { display:grid; width:65px; height:65px; place-items:center; margin:38px 0 28px; border:1px solid rgba(232,181,109,.25); border-radius:50%; color:var(--blue); font-family:Georgia,serif; font-size:2.2rem; box-shadow:0 0 35px rgba(232,181,109,.09); }.glyph-equation,.glyph-detector { color:var(--violet); border-color:rgba(232,181,109,.25); }.flow-card h3 { margin-bottom:10px; font-size:1.1rem; }.flow-card p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.7; }
.labs-heading { display:grid; grid-template-columns:1fr 350px; align-items:end; gap:40px; margin-bottom:46px; }.labs-heading p:last-child { margin:0; color:var(--muted); font-size:.85rem; line-height:1.7; }.labs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.lab-card { position:relative; display:flex; min-height:260px; flex-direction:column; justify-content:space-between; padding:21px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:rgba(13,22,39,.65); text-decoration:none; overflow:hidden; transition:.25s ease; }.lab-card:hover { transform:translateY(-4px); border-color:rgba(232,181,109,.46); background:rgba(19,34,57,.8); }.lab-card::after { position:absolute; right:-35px; bottom:-52px; width:150px; height:150px; border:1px solid rgba(232,181,109,.12); border-radius:50%; content:""; }.lab-featured { grid-column:span 2; min-height:310px; background:radial-gradient(circle at 72% 10%,rgba(232,181,109,.18),transparent 28rem),linear-gradient(135deg,rgba(27,54,81,.7),rgba(21,18,43,.7)); }.lab-status { align-self:flex-start; padding:5px 8px; border:1px solid rgba(124,224,192,.28); border-radius:999px; color:var(--green); font-size:.59rem; letter-spacing:.1em; text-transform:uppercase; }.lab-status.planned { border-color:var(--line); color:var(--quiet); }.lab-symbol { position:absolute; top:48px; right:48px; color:var(--blue); font-family:Georgia,serif; font-size:6rem; line-height:1; text-shadow:0 0 40px rgba(232,181,109,.3); }.lab-card p { margin:0 0 7px; color:var(--blue); font-size:.61rem; font-weight:800; letter-spacing:.15em; }.lab-card h3 { margin-bottom:7px; font-size:1.45rem; letter-spacing:-.04em; }.lab-card div span,.lab-card > span:last-child { color:var(--muted); font-size:.72rem; }.lab-card h3 + span b { margin-left:10px; color:var(--gold); }
.classroom-entry { display:grid; grid-template-columns:240px 1fr; gap:80px; align-items:center; margin-top:145px; padding:65px 85px; border:1px solid rgba(232,181,109,.2); border-radius:18px; background:radial-gradient(circle at 17% 50%,rgba(232,181,109,.17),transparent 20rem),linear-gradient(105deg,rgba(28,26,58,.82),rgba(15,25,41,.8)); }.classroom-entry h2 { font-size:clamp(2rem,4vw,4rem); line-height:.97; }.classroom-entry p:not(.eyebrow) { max-width:620px; color:var(--muted); font-size:.88rem; line-height:1.75; }.classroom-orbit { position:relative; display:grid; width:190px; height:190px; place-items:center; border:1px solid rgba(232,181,109,.42); border-radius:50%; color:var(--violet); box-shadow:0 0 70px rgba(232,181,109,.12),inset 0 0 50px rgba(232,181,109,.08); }.classroom-orbit::before,.classroom-orbit::after { position:absolute; inset:16px -12px; border:1px solid rgba(232,181,109,.25); border-radius:50%; content:""; transform:rotate(58deg); }.classroom-orbit::after { inset:-12px 16px; transform:rotate(-24deg); }.classroom-orbit span { font-size:3.2rem; font-weight:300; letter-spacing:-.1em; }.classroom-orbit small { position:absolute; bottom:29px; color:var(--muted); font-size:.57rem; letter-spacing:.1em; text-transform:uppercase; }.classroom-orbit i { position:absolute; top:22px; right:22px; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 15px var(--gold); }
.closing { padding:175px 0 145px; text-align:center; }.closing .eyebrow { justify-content:center; }.closing h2 { margin-bottom:32px; font-size:clamp(2.8rem,7vw,7rem); letter-spacing:-.09em; line-height:.9; }.closing .hero-button { display:inline-flex; }.home-footer { display:flex; justify-content:space-between; gap:20px; padding:25px 0 35px; border-top:1px solid var(--line); color:var(--quiet); font-size:.67rem; }.home-footer .home-brand { color:var(--muted); transform:scale(.9); transform-origin:left center; }.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s ease,transform .8s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:900px) { .home-hero { grid-template-columns:1fr; padding-top:75px; }.hero-visual { min-height:460px; }.hero-visual canvas { height:460px; }.flow-grid { grid-template-columns:repeat(2,1fr); }.labs-grid { grid-template-columns:repeat(2,1fr); }.lab-featured { grid-column:span 2; }.classroom-entry { padding:45px; } }
@media (max-width:650px) { .shell { width:min(100% - 28px,1240px); }.landing-nav { flex-wrap:wrap; gap:16px; }.landing-nav nav { order:3; width:100%; gap:17px; }.nav-entry { margin-left:auto; }.home-hero { min-height:0; padding:70px 0 75px; }.hero-visual { min-height:360px; }.hero-visual canvas { height:360px; }.manifesto,.section-intro,.labs-heading { grid-template-columns:1fr; gap:22px; }.manifesto-aside { max-width:220px; }.flow-section,.labs-section { padding-top:90px; }.flow-grid,.labs-grid { grid-template-columns:1fr; }.lab-featured { grid-column:auto; }.classroom-entry { grid-template-columns:1fr; gap:35px; margin-top:90px; padding:32px 25px; }.classroom-orbit { width:150px; height:150px; }.closing { padding:120px 0 100px; }.home-footer { display:block; }.home-footer > span { display:block; margin-top:13px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } }.home-inline-links { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:22px; }.landing-nav { position:sticky; top:0; z-index:10; background:rgba(5,7,12,.78); backdrop-filter:blur(16px); }
.landing-nav nav { padding:5px; border:1px solid rgba(5,7,12,.18); border-radius:999px; background:rgba(244,239,230,.93); }
.landing-nav nav a { padding:7px 13px; border-radius:999px; color:#171513; }
.landing-nav nav a:hover { color:#171513; background:var(--gold); }
.nav-entry { color:#05070c; background:var(--gold); border-color:var(--gold); }
body::before { background:radial-gradient(circle at 12% 8%,rgba(232,181,109,.12),transparent 38rem),radial-gradient(circle at 88% 35%,rgba(232,181,109,.08),transparent 36rem),linear-gradient(180deg,#08080a,#05070c 65%,#090807); }
.hero-button { color:#05070c; background:linear-gradient(110deg,rgba(232,181,109,.94),rgba(232,181,109,.72)); box-shadow:0 10px 35px rgba(232,181,109,.12); }
.hero-button:hover { box-shadow:0 15px 40px rgba(232,181,109,.24); }
.hero-visual { background:radial-gradient(circle at 50% 50%,rgba(232,181,109,.1),transparent 58%),rgba(8,8,10,.44); box-shadow:inset 0 0 100px rgba(232,181,109,.08),0 35px 100px rgba(0,0,0,.25); }
.flow-card { background:linear-gradient(145deg,rgba(25,22,18,.72),rgba(10,9,8,.3)); }
.lab-card { background:rgba(18,16,14,.72); }
.lab-card:hover { background:rgba(30,24,17,.82); }
.lab-featured { background:radial-gradient(circle at 72% 10%,rgba(232,181,109,.18),transparent 28rem),linear-gradient(135deg,rgba(45,32,18,.7),rgba(26,19,15,.7)); }
.classroom-entry { background:radial-gradient(circle at 17% 50%,rgba(232,181,109,.17),transparent 20rem),linear-gradient(105deg,rgba(40,30,20,.82),rgba(18,16,14,.8)); }