:root { --universe-accent:#8ca7ff; --universe-tilt-x:0deg; --universe-tilt-y:0deg; }
.universe { position:relative; min-height:112vh; padding:clamp(110px,12vw,180px) 6vw; overflow:hidden; background:radial-gradient(circle at 50% 50%,rgba(89,109,255,.12),transparent 34%),linear-gradient(180deg,rgba(4,5,12,.35),rgba(3,4,9,.92)); }
.universe::before { content:""; position:absolute; inset:8% 4%; border:1px solid rgba(138,164,255,.07); border-radius:50%; transform:perspective(1200px) rotateX(68deg); box-shadow:0 0 130px rgba(87,103,255,.06),inset 0 0 90px rgba(86,105,255,.035); pointer-events:none; }
.universe-copy { position:relative; z-index:4; width:min(700px,90vw); margin:0 auto 42px; text-align:center; }
.universe-copy h2 { margin:.2rem 0 .8rem; font-size:clamp(3rem,7.7vw,8rem); line-height:.85; letter-spacing:-.072em; }
.universe-copy p:last-child { width:min(660px,90vw); margin:0 auto; color:#929bad; line-height:1.7; }
.universe-layout { position:relative; z-index:4; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:clamp(24px,5vw,72px); align-items:center; width:min(1380px,100%); margin:0 auto; }
.universe-stage { position:relative; min-height:clamp(560px,64vw,760px); perspective:1200px; transform-style:preserve-3d; transform:rotateX(var(--universe-tilt-y)) rotateY(var(--universe-tilt-x)); transition:transform .22s linear; }
.universe-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9; }
.universe-core { position:absolute; left:50%; top:50%; width:clamp(104px,12vw,148px); aspect-ratio:1; transform:translate(-50%,-50%) translateZ(42px); border-radius:50%; display:grid; place-items:center; align-content:center; gap:2px; border:1px solid rgba(166,185,255,.34); background:radial-gradient(circle at 35% 30%,rgba(143,170,255,.28),rgba(19,25,69,.86) 46%,rgba(6,8,20,.96)); box-shadow:0 0 58px rgba(99,126,255,.31),inset 0 0 40px rgba(141,167,255,.12); color:#fff; text-shadow:0 0 22px #7190ff; }
.universe-core::before,.universe-core::after { content:""; position:absolute; inset:-24%; border:1px solid rgba(132,157,255,.14); border-radius:50%; animation:universeCorePulse 5.2s ease-in-out infinite; }
.universe-core::after { inset:-46%; opacity:.44; animation-delay:-2.6s; }
.universe-core span { font-size:clamp(1.5rem,3vw,2.5rem); font-weight:780; letter-spacing:-.06em; }
.universe-core small { color:#8290af; font-size:.54rem; letter-spacing:.2em; }
.universe-node { --node-accent:#8ca7ff; position:absolute; left:var(--x); top:var(--y); width:clamp(104px,12vw,148px); min-height:72px; transform:translate(-50%,-50%) translateZ(var(--z,0px)); border:1px solid color-mix(in srgb,var(--node-accent) 34%,rgba(255,255,255,.08)); border-radius:18px; padding:12px 14px; background:linear-gradient(145deg,color-mix(in srgb,var(--node-accent) 10%,rgba(11,13,24,.9)),rgba(6,7,14,.88)); color:#e9edff; text-align:left; cursor:pointer; box-shadow:0 16px 50px rgba(0,0,0,.34),0 0 34px color-mix(in srgb,var(--node-accent) 8%,transparent); backdrop-filter:blur(14px); transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,opacity .24s ease; }
.universe-node::before { content:""; position:absolute; width:7px; height:7px; border-radius:50%; right:10px; top:10px; background:var(--node-accent); box-shadow:0 0 16px var(--node-accent); }
.universe-node:hover,.universe-node:focus-visible,.universe-node.active { transform:translate(-50%,-50%) translateZ(calc(var(--z,0px) + 34px)) scale(1.07); border-color:color-mix(in srgb,var(--node-accent) 74%,white 8%); box-shadow:0 22px 70px rgba(0,0,0,.42),0 0 48px color-mix(in srgb,var(--node-accent) 24%,transparent); outline:none; }
.universe-node.future-node { opacity:.54; border-style:dashed; filter:saturate(.68); }
.universe-node.future-node:hover,.universe-node.future-node:focus-visible,.universe-node.future-node.active { opacity:.95; filter:saturate(1); }
.universe-node.restricted { opacity:.33; filter:grayscale(.28); }
.universe-node .node-status { display:block; margin-bottom:7px; color:color-mix(in srgb,var(--node-accent) 74%,white); font-size:.48rem; letter-spacing:.15em; text-transform:uppercase; }
.universe-node .node-name { display:block; font-size:clamp(.72rem,1.2vw,.98rem); font-weight:720; letter-spacing:-.025em; line-height:1.05; }
.universe-node .node-domain { display:block; margin-top:5px; color:#7f889d; font-size:.52rem; letter-spacing:.055em; }
.universe-intel { position:relative; min-height:360px; padding:26px; border:1px solid rgba(144,165,255,.16); border-radius:24px; background:linear-gradient(155deg,rgba(17,21,45,.76),rgba(6,8,18,.82)); box-shadow:0 30px 100px rgba(0,0,0,.38),inset 0 0 70px rgba(90,108,255,.025); backdrop-filter:blur(18px); }
.universe-intel::before { content:"FDV // PRODUCT INTELLIGENCE"; display:block; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.075); color:#66738e; font-size:.52rem; letter-spacing:.18em; }
.universe-intel h3 { margin:28px 0 10px; font-size:clamp(2rem,3.5vw,3.5rem); letter-spacing:-.055em; line-height:.92; }
.universe-intel > p { color:#929bad; line-height:1.65; }
.universe-meta { display:grid; gap:9px; margin:24px 0 26px; }
.universe-meta div { display:flex; justify-content:space-between; gap:18px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.67rem; }
.universe-meta span { color:#69748a; text-transform:uppercase; letter-spacing:.1em; }
.universe-meta strong { color:#d8deef; text-align:right; font-weight:620; }
.universe-explore[hidden] { display:none; }
.universe-signal { position:absolute; right:20px; top:21px; width:9px; height:9px; border-radius:50%; background:var(--universe-accent); box-shadow:0 0 18px var(--universe-accent); transition:background .2s ease,box-shadow .2s ease; }
.standard-mode .universe-stage { transform:none; }
.standard-mode .universe-canvas { opacity:.28; }
.standard-mode .universe-core::before,.standard-mode .universe-core::after,.reduced-motion .universe-core::before,.reduced-motion .universe-core::after { animation:none; }
.reduced-motion .universe-stage { transform:none !important; }
.reduced-motion .universe-node { transition:none; }
@keyframes universeCorePulse { 0%,100% { transform:scale(.96); opacity:.24; } 50% { transform:scale(1.07); opacity:.78; } }
@media (max-width:1000px) { .universe { min-height:auto; } .universe-layout { grid-template-columns:1fr; } .universe-stage { min-height:650px; } .universe-intel { width:min(720px,100%); min-height:0; margin:0 auto; } }
@media (max-width:680px) { .universe { padding-left:18px; padding-right:18px; } .universe-stage { min-height:610px; } .universe-node { width:104px; padding:10px; border-radius:14px; } .universe-node .node-domain { display:none; } .universe-core { width:88px; } .universe-intel { padding:20px; } }
@media (prefers-reduced-motion:reduce) { .universe-core::before,.universe-core::after { animation:none; } .universe-stage { transform:none !important; } .universe-node { transition:none; } }