.main { position: relative; isolation: isolate; overflow: clip; color: #f4f2eb; background: #070912; }
.world { position: fixed; z-index: 0; inset: 0; height: 100svh; pointer-events: auto; }
.noise { position: fixed; z-index: 1; inset: 0; opacity: .22; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.hero { position: relative; display: flex; min-height: calc(100svh - 82px); flex-direction: column; justify-content: center; width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: clamp(88px, 11vw, 154px) clamp(0px, 5vw, 72px) 80px; pointer-events:none; }
.hero::before { position: absolute; top: 9%; bottom: 9%; left: 0; width: 1px; content: ""; background: linear-gradient(transparent, #8499cf66 15%, #8499cf66 85%, transparent); }
.heroMeta { position: absolute; top: 30px; right: 0; left: 0; display: flex; justify-content: space-between; color: #9299b1; font: 600 .58rem/1 var(--font-geist-mono); letter-spacing: .16em; }
.heroCopy { position: relative; z-index: 2; width: min(820px, 72%); }
.heroCopy > * { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }.heroCopy > :nth-child(2) { animation-delay: .08s; }.heroCopy > :nth-child(3) { animation-delay: .16s; }.heroCopy > :nth-child(4) { animation-delay: .24s; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 30px; color: #bccaff; font: 650 .66rem/1.3 var(--font-geist-mono); letter-spacing: .17em; text-transform: uppercase; }
.hero h1 { font: 300 clamp(4.8rem, 10.5vw, 10.2rem)/.76 var(--font-physics); letter-spacing: -.075em; text-shadow: 0 10px 45px #000a; }
.hero h1 em { color: transparent; font-weight: 300; -webkit-text-stroke: 1px #b6c4eb; }
.lead { max-width: 570px; margin-top: 42px; color: #aeb5c8; font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.75; }
.jumpLink { display: inline-flex; align-items: center; gap: 14px; margin-top: 35px; color: #f5d575; font: 650 .75rem/1 var(--font-geist-mono); letter-spacing: .08em; text-transform: uppercase; }.jumpLink svg { animation: drift 1.8s ease-in-out infinite; }
.coordinates { position: absolute; right: 0; bottom: 48px; display: grid; gap: 8px; justify-items: end; color: #747e9a; font: 600 .56rem/1 var(--font-geist-mono); letter-spacing: .13em; }.coordinates b { color: #76e7be; font-weight: 600; }
.fields { position: relative; z-index: 2; width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 130px 0 150px; }.fields::before { position: absolute; z-index: -1; inset: 4% -25% -3%; content: ""; background: radial-gradient(ellipse, #10162bea 0, #080b16e8 48%, transparent 74%); }
.sectionTitle { margin-bottom: 55px; font: 300 clamp(3.5rem, 7vw, 7rem)/.9 var(--font-physics); letter-spacing: -.06em; }
.sectionHeading { display: grid; grid-template-columns: 1fr 320px; gap: 50px; align-items: end; margin-bottom: 70px; }.sectionHeading > div > p, .manifestoLabel { margin-bottom: 14px; color: #8ea2e7; font: 650 .62rem/1 var(--font-geist-mono); letter-spacing: .18em; }.sectionHeading h2, .manifesto h2 { font: 300 clamp(3.5rem, 7vw, 7rem)/.88 var(--font-physics); letter-spacing: -.065em; }.sectionNote { color: #858da5; line-height: 1.7; }
.fieldGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; perspective: 1200px; }
.fieldCard { --card-accent: #839cf5; position: relative; display: flex; min-height: 470px; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 30px; color: #f1f4ff; background: linear-gradient(145deg, #1b2445c7, #0d1124b8); border: 1px solid #99a8d943; border-radius: 26px; box-shadow: 0 28px 90px #0008, inset 0 1px #ffffff24; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .18s ease-out, border-color .25s ease, box-shadow .25s ease; backdrop-filter: blur(20px) saturate(1.25); }
.fieldCard:hover { border-color: color-mix(in srgb, var(--card-accent), transparent 30%); box-shadow: 0 35px 100px #000a, 0 0 60px color-mix(in srgb, var(--card-accent), transparent 78%), inset 0 1px #ffffff38; }
.cardGlow { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(450px circle at var(--mx) var(--my), color-mix(in srgb, var(--card-accent), transparent 70%), transparent 42%); transition: opacity .25s; }.fieldCard:hover .cardGlow { opacity: 1; }
.physicsCard { grid-column: span 2; min-height: 560px; --card-accent: #70e7ed; background: linear-gradient(125deg, #0c3540d9, #0a1426c4 60%, #112346b0); }
.physicsCard .cardBody { margin: auto 0; }
.cardTop, .cardFoot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #9aa5c3; font: 650 .59rem/1 var(--font-geist-mono); letter-spacing: .14em; }
.cardSymbol { position: absolute; top: 50%; right: 3%; width: 52%; height: 52%; color: var(--card-accent); opacity: .1; transform: translateY(-50%) translateZ(20px); stroke-width: .6; }
.cardBody { position: relative; z-index: 2; transform: translateZ(35px); }.cardBody h3 { margin-bottom: 17px; font: 300 clamp(3.7rem, 7vw, 7.5rem)/.8 var(--font-physics); letter-spacing: -.065em; }.futureCard .cardBody { margin:auto 0; transform:none; }.futureCard .cardBody h3 { font-size: clamp(3rem, 5vw, 5.2rem); }.cardBody > p:last-child { max-width: 450px; color: #aeb5c8; line-height: 1.65; }
.cardFoot { padding-top: 24px; border-top: 1px solid #ffffff24; }.cardFoot span { display: flex; align-items: center; gap: 10px; }.cardFoot strong { color: #f4f2eb; font: 400 1.4rem/1 var(--font-physics); }
.futureCard { --card-accent: #7f8389; color: #b8b9b8; background-color: #35373a; background-image: radial-gradient(circle at 22% 20%, #ffffff0a 0 1px, transparent 2px), radial-gradient(circle at 74% 64%, #0000001c 0 2px, transparent 3px), linear-gradient(138deg, #44474abf, #242629dc); background-size: 37px 37px, 53px 53px, auto; border-color: #85888b52; box-shadow: 0 22px 70px #0008, inset 0 1px #ffffff16; filter: grayscale(1) saturate(.2); transform: none; cursor: not-allowed; }
.futureCard::after { position: absolute; inset: 0; border-radius: inherit; content: ""; pointer-events: none; background: linear-gradient(118deg, transparent 0 31%, #c7c7c708 31.3% 31.6%, transparent 32% 69%, #00000016 69.3% 69.7%, transparent 70%); }
.futureCard:hover { border-color: #85888b52; box-shadow: 0 22px 70px #0008, inset 0 1px #ffffff16; }
.futureCard .cardSymbol { color: #a2a4a4; opacity: .075; }.futureCard .cardBody > p { color: #8f9191; }.futureCard .cardFoot { color: #777a7b; }
.amber, .violet, .green { --card-accent: #7f8389; }
.futureSymbol { position:absolute; top:50%; right:7%; color:#6f7472; opacity:.1; font:200 clamp(8rem,18vw,17rem)/1 var(--font-physics); transform:translateY(-50%); }
.aboutSection { position:relative; z-index:2; width:min(1440px,calc(100% - 48px)); margin:0 auto; padding:100px 0 130px; }
.aboutSection::before { position:absolute; z-index:-1; inset:5% -18%; content:""; background:radial-gradient(ellipse,#eef3eceb,transparent 72%); }
.aboutLink { position:absolute; z-index:4; top:50%; left:clamp(28px,6vw,88px); display:grid; gap:30px; color:#fffdf4; transform:translateY(-50%); }
.aboutSection h2 { max-width:4.5em; font:300 clamp(4rem,7.5vw,7.5rem)/.82 var(--font-physics); letter-spacing:-.065em; text-shadow:0 4px 35px #071a1de6; }
.aboutLink span { display:flex; width:max-content; align-items:center; gap:12px; padding:13px 17px; color:#153f45; background:#f8f4e9e6; border:1px solid #fff9; border-radius:999px; box-shadow:0 10px 35px #06181b55; font:650 .78rem/1.15 var(--font-geist-mono); letter-spacing:.055em; transition:color .2s,background .2s,transform .2s; }
.aboutLink:hover span,.aboutLink:focus-visible span { color:#fffdf4; background:#176b77; transform:translateX(5px); }
.legacyShowcase { position:relative; overflow:hidden; width:100%; color:#27474a; background:#b8c7c3; border:1px solid #6e8b856b; border-radius:26px; box-shadow:0 24px 65px #3c504b30,inset 0 1px #fff; }
.legacyShowcase::after { position:absolute; z-index:3; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg,#071d21d9 0,#0a292d9e 18%,#102d3035 38%,transparent 62%); }
.showcaseViewport { overflow:hidden; width:100%; padding:12px 0; }
.showcaseTrack { --reel-gap:12px; --reel-half-gap:6px; display:flex; width:max-content; gap:var(--reel-gap); transform:translateX(calc(-50% - var(--reel-half-gap))); animation:showcase-reel 62s linear infinite; will-change:transform; }
.showcaseSet { display:flex; gap:var(--reel-gap); }
.showcaseFrame { position:relative; overflow:hidden; width:clamp(260px,30vw,430px); height:clamp(300px,38vw,510px); flex:0 0 auto; margin:0; background:#cbd4d0; border-radius:15px; }
.showcaseFrame::after { position:absolute; inset:0; content:""; pointer-events:none; box-shadow:inset 0 0 0 1px #fff6; }
.showcaseFrame img { width:100%; height:100%; object-fit:cover; }
@keyframes showcase-reel { to { transform:translateX(0); } }
.planetLabelLayer { position:absolute; z-index:5; inset:0; overflow:hidden; pointer-events:none; }
.planetLabel { position:absolute; top:0; left:0; display:block; width:10px; height:10px; color:#324541; pointer-events:auto; will-change:transform; }
.planetLabel i { position:absolute; inset:0; border:2px solid #fffdf1; border-radius:50%; background:#7a817e; box-shadow:0 0 0 1px #69736f,0 0 14px #42504c40; }
.planetLabel i::after { position:absolute; top:50%; left:50%; width:var(--planet-hit,70px); aspect-ratio:1; border:1px solid transparent; border-radius:50%; content:""; transform:translate(-50%,-50%); transition:border-color .2s,background .2s; }
.planetLabel:hover i::after,.planetLabel:focus-visible i::after { border-color:#3c76785c; background:#f5f3e411; }
.planetLabel span { position:absolute; top:50%; left:50%; width:max-content; padding:8px 12px; border:1px solid #747f7b69; border-radius:999px; background:#f8f5ebdc; box-shadow:0 8px 24px #3a484426; font:500 .8rem/1 var(--font-physics); transform:translate(-50%,-50%) translate(var(--label-offset-x,38px),var(--label-offset-y,0)); backdrop-filter:blur(12px); }
.planetLabel[data-hub-planet="1"]{--planet-hit:48px}.planetLabel[data-hub-planet="2"]{--planet-hit:58px}.planetLabel[data-hub-planet="4"]{--planet-hit:72px}.planetLabel[data-hub-planet="6"]{--planet-hit:58px}
.planetLabel.isActive { color:#0f5661; }.planetLabel.isActive i { background:#16808c; box-shadow:0 0 0 1px #24727a,0 0 18px #16808c70; }.planetLabel.isActive span { border-color:#22818a78; background:#f4f9f2e8; }
.planetLabel:hover span,.planetLabel:focus-visible span { color:#fffdf4; background:#1a626c; border-color:#1a626c; }
.manifesto { position: relative; z-index: 2; width: min(1220px, calc(100% - 48px)); min-height: 82svh; margin: 0 auto; padding: 150px 0 120px; }.manifesto::before { position: absolute; z-index: -1; inset: 0 -20%; content: ""; background: linear-gradient(180deg, transparent, #070912e8 16%, #070912f5 80%, #070912); }.manifesto h2 em { color: #f2d276; font-weight: 300; }.principles { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 90px; border-top: 1px solid #66708a66; border-bottom: 1px solid #66708a66; }.principles p { display: grid; min-height: 220px; grid-template-rows: auto auto 1fr; gap: 17px; padding: 30px; }.principles p + p { border-left: 1px solid #66708a66; }.principles span { color: #8ea2e7; font: 600 .62rem/1 var(--font-geist-mono); }.principles strong { font: 400 1.7rem/1 var(--font-physics); }.principles small { max-width: 260px; align-self: end; color: #858da5; font-size: .86rem; line-height: 1.6; }
@keyframes rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } @keyframes drift { 50% { transform:translateY(7px); } }
@media (max-width: 760px) { .hero { width: calc(100% - 32px); min-height: calc(100svh - 68px); padding: 80px 8px 75px 22px; }.heroMeta { top: 20px; font-size: .48rem; }.heroCopy { width: 100%; }.hero h1 { font-size: clamp(4rem, 21vw, 6rem); line-height: .8; }.lead { max-width: 88%; margin-top: 34px; }.coordinates { display:none; }.fields { width: calc(100% - 32px); padding: 100px 0; }.sectionHeading { grid-template-columns:1fr; gap:25px; margin-bottom:45px; }.sectionHeading h2 { font-size: 3.7rem; }.fieldGrid { grid-template-columns:1fr; gap:18px; }.physicsCard { grid-column:auto; min-height:460px; }.fieldCard { min-height:360px; padding:24px; border-radius:22px; }.cardSymbol { width:65%; height:65%; right:-5%; }.cardBody h3,.futureCard .cardBody h3 { font-size:3.7rem; }.manifesto { width:calc(100% - 32px); padding:100px 0 80px; }.manifesto h2 { font-size:3.5rem; }.principles { grid-template-columns:1fr; margin-top:60px; }.principles p { min-height:170px; }.principles p + p { border-top:1px solid #66708a66; border-left:0; } }
@media (prefers-reduced-motion:reduce) { .heroCopy > *,.jumpLink svg { animation:none; }.fieldCard { transform:none; }.showcaseTrack{animation-duration:150s} }
@media(max-width:760px){.planetLabel{gap:5px}.planetLabel span{padding:7px 9px;font-size:.69rem}.planetLabel i{width:9px;height:9px}.aboutSection{width:calc(100% - 32px);padding:75px 0 95px}.aboutLink{left:24px;gap:22px}.aboutSection h2{font-size:4.4rem}.aboutLink span{font-size:.78rem}.legacyShowcase{border-radius:18px}.showcaseViewport{padding:8px 0}.showcaseTrack{--reel-gap:8px;--reel-half-gap:4px;animation-duration:50s}.showcaseFrame{width:72vw;height:105vw;max-height:470px;border-radius:11px}}

/* Planetary light system */
.main { color:#102c37; background:#f7f3e8; }
.noise { opacity:.1; mix-blend-mode:multiply; }
.fields::before { background:radial-gradient(ellipse,#f7f3e8f5 0,#f7f3e8e8 58%,transparent 78%); }
.sectionTitle { color:#102c37; }
.fieldCard { color:#102c37; background:linear-gradient(145deg,#fffdf2d9,#e7f1edc7); border-color:#63888663; box-shadow:0 28px 70px #315b5e24,inset 0 1px #fff; }
.fieldCard:hover { border-color:#2b858d99; box-shadow:0 32px 80px #315b5e32,0 0 55px #58bfc52b,inset 0 1px #fff; }
.physicsCard { --card-accent:#0d7482; background:linear-gradient(125deg,#effaf5e8,#d9ece8d8 60%,#f8f4e9e0); }
.cardBody h3 { color:#103740; }.cardFoot { color:#476d70; border-color:#527b7935; }.cardFoot strong { color:#102c37; }.cardSymbol { color:var(--card-accent); opacity:.13; }
.cardGlow { background:radial-gradient(450px circle at var(--mx) var(--my),#67cdd34d,transparent 44%); }
.futureCard { color:#8a8b88; background-color:#d7d5ce; background-image:radial-gradient(circle at 22% 20%,#fff7 0 1px,transparent 2px),radial-gradient(circle at 74% 64%,#0001 0 2px,transparent 3px),linear-gradient(138deg,#e1dfd7e8,#bbbdbad9); border-color:#898c875c; box-shadow:0 20px 55px #59615e25,inset 0 1px #fff9; }
.futureCard:hover { border-color:#898c875c; box-shadow:0 20px 55px #59615e25,inset 0 1px #fff9; }.futureCard .cardBody h3 { color:#777a78; }.futureCard .cardSymbol { color:#6f7472; opacity:.09; }

/* Scroll-driven field cylinder */
.immersive-landing { overflow-x:clip; }
.immersive-landing .site-frame,.hub-main { overflow:visible; }
.fields { width:100%; height:380svh; margin:0; padding:0; }
.fields::before { position:absolute; inset:0; background:linear-gradient(180deg,transparent 0,#edf3eee8 8%,#edf3eef7 92%,transparent 100%); }
.fieldStage { position:sticky; top:0; overflow:hidden; width:min(1440px,100%); height:100svh; margin:0 auto; }
.sectionTitle { position:absolute; z-index:30; top:clamp(84px,11vh,126px); right:clamp(28px,5vw,76px); left:auto; margin:0; text-align:right; pointer-events:none; }
.fieldGrid { --orbit-x:-70px; --orbit-y:58%; --orbit-radius:520px; position:absolute; inset:0; display:block; perspective:none; }
.fieldGrid::before { position:absolute; z-index:0; top:var(--orbit-y); left:var(--orbit-x); width:calc(var(--orbit-radius) * 2); aspect-ratio:1; content:""; border:1px solid #42777a4a; border-radius:50%; box-shadow:0 0 0 28px #8fc2bd12,0 0 0 74px #669e9a0b,inset 0 0 80px #579b9820; transform:translate(-50%,-50%); }
.fieldGrid::after { position:absolute; z-index:25; top:var(--orbit-y); left:var(--orbit-x); width:clamp(90px,10vw,138px); aspect-ratio:1; content:""; border:1px solid #416e706b; border-radius:50%; background:radial-gradient(circle at 38% 34%,#f9f6e9 0 7%,#9bc6bf 8% 22%,#397a7c 23% 25%,#dce9e2 26% 52%,#6fa29d 53% 55%,#eef3e8 56%); box-shadow:0 18px 45px #274e4c42,0 0 0 16px #e7efe799; transform:translate(-50%,-50%); }
.fieldCard { position:absolute; top:var(--orbit-y); left:var(--orbit-x); width:min(1000px,78vw); min-height:0; height:min(48svh,470px); margin:0; padding:clamp(26px,3vw,42px); transform-origin:center; transition:border-color .25s,box-shadow .25s,opacity .16s; will-change:transform,opacity; }
.fieldCard:not(:first-child) { opacity:.14; }
.fieldCard.isCurrent { border-color:#2b858d99; box-shadow:0 32px 85px #315b5e32,0 0 60px #58bfc526,inset 0 1px #fff; }
.physicsCard { grid-column:auto; min-height:0; }
.cardBody h3,.futureCard .cardBody h3 { font-size:clamp(4.2rem,8vw,8rem); }
.cardFoot { font-size:clamp(.82rem,1.05vw,1rem); letter-spacing:.11em; }
.cardFoot strong { font-size:clamp(1.9rem,2.5vw,2.7rem); }
.cardFoot svg { width:24px; height:24px; }
.fieldSteps { position:absolute; z-index:31; right:clamp(22px,4vw,60px); bottom:clamp(28px,7vh,70px); display:flex; gap:10px; }
.fieldSteps i { width:7px; height:7px; border:1px solid #426e6b80; border-radius:50%; background:#f5f2e8; transition:width .25s,background .25s; }
.fieldSteps i.isCurrent { width:32px; background:#267a7f; border-color:#267a7f; border-radius:999px; }
@media(max-width:760px){
  .fields{height:340svh}
  .fieldStage{height:100svh}
  .sectionTitle{top:78px;right:20px;left:auto;font-size:3.8rem;text-align:right}
  .fieldGrid{--orbit-x:-60px;--orbit-y:59%;--orbit-radius:255px}
  .fieldGrid::after{width:82px;box-shadow:0 12px 32px #274e4c42,0 0 0 11px #e7efe799}
  .fieldCard{width:calc(100vw - 44px);height:min(43svh,360px);padding:23px;border-radius:22px}
  .cardBody h3,.futureCard .cardBody h3{font-size:3.8rem}
  .cardFoot{font-size:.74rem;letter-spacing:.08em}
  .cardFoot strong{font-size:1.75rem}
  .cardFoot svg{width:21px;height:21px}
  .cardSymbol{right:-6%;width:70%;height:70%}
  .fieldSteps{right:18px;bottom:24px}
}