:root{
  --bg:#05070d; --panel:#07101d; --cyan:#00e5ff; --cyan2:#7cf9ff; --gold:#ffb020;
  --white:#ecfbff; --muted:#94a7bd; --line:rgba(0,229,255,.26); --glass:rgba(7,16,29,.66);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--white);font-family:Sora,system-ui,sans-serif;overflow-x:hidden}
.shell{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;padding:42px clamp(18px,4vw,70px)}
.grid{position:fixed;inset:0;z-index:-8;background:
  linear-gradient(rgba(0,229,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,229,255,.035) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(circle at center,#000 0 55%,transparent 90%)}
.grid:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(0,229,255,.12),transparent 30%),linear-gradient(120deg,rgba(0,0,0,.9),transparent 45%,rgba(0,0,0,.95))}
.scanline{position:fixed;inset:0;z-index:10;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(124,249,255,.045),transparent);height:14vh;animation:scan 7s linear infinite}
.ambient{position:fixed;border-radius:50%;filter:blur(70px);opacity:.38;z-index:-7}.ambient-cyan{width:42vw;height:42vw;background:#00e5ff;left:-18vw;top:8vh}.ambient-gold{width:34vw;height:34vw;background:#ff9d00;right:-14vw;bottom:2vh}
.image-accent{position:fixed;z-index:-6;opacity:.16;filter:contrast(1.2) saturate(.9);background-size:cover;background-position:center;mask-image:linear-gradient(to right,transparent,#000 25%,#000 72%,transparent)}
.accent-a{inset:0 0 auto auto;width:38vw;height:100vh;background-image:url("./assets/blue-frame.jpg");transform:translateX(10%)}
.accent-b{left:-6vw;bottom:-14vh;width:46vw;height:60vh;background-image:url("./assets/hud-blueprint.jpg");opacity:.11}
.intro{position:fixed;inset:0;display:grid;place-items:center;z-index:5;transition:opacity .6s ease,transform .8s ease}.activated .intro{opacity:0;transform:scale(1.2);pointer-events:none}
.eli-core{position:relative;width:230px;height:230px;border-radius:999px;border:1px solid rgba(0,229,255,.45);background:radial-gradient(circle,rgba(0,229,255,.16),rgba(5,7,13,.92) 62%);color:var(--white);font-family:Orbitron,sans-serif;font-size:54px;font-weight:900;letter-spacing:.15em;cursor:pointer;box-shadow:0 0 36px rgba(0,229,255,.24),inset 0 0 30px rgba(0,229,255,.13);transition:width 1s cubic-bezier(.15,1,.2,1),height 1s cubic-bezier(.15,1,.2,1),border-radius 1s cubic-bezier(.15,1,.2,1),letter-spacing .8s}
.eli-core:hover{transform:scale(1.04)}.eli-core.expanding{width:min(980px,86vw);height:150px;border-radius:30px;letter-spacing:.08em}
.core-rings,.core-glow{position:absolute;inset:-24px;border-radius:inherit;border:1px solid rgba(255,176,32,.32);animation:rotate 9s linear infinite}.core-glow{inset:-60px;border-color:rgba(0,229,255,.2);animation:breath 2.4s ease-in-out infinite}
.core-full{position:absolute;inset:0;display:grid;place-items:center;opacity:0;font-size:clamp(22px,4vw,48px);padding:0 18px;text-align:center}.core-short{transition:.45s}.eli-core.expanding .core-short{opacity:0;filter:blur(12px)}.eli-core.expanding .core-full{opacity:1;transition:opacity .6s .25s}
.command{opacity:0;transform:translateY(26px);pointer-events:none;max-width:1440px;margin:0 auto}.activated .command{opacity:1;transform:none;pointer-events:auto;transition:opacity .9s .65s ease,transform .9s .65s ease}
.command-header{text-align:center;margin:8px auto 20px;position:relative}.eyebrow{text-transform:uppercase;color:var(--gold);letter-spacing:.48em;font-size:12px;margin:0 0 10px}
h1{font-family:Orbitron,sans-serif;text-transform:uppercase;font-size:clamp(34px,7vw,92px);line-height:.88;margin:0;text-shadow:0 0 22px rgba(0,229,255,.42)}
.status-strip{margin:24px auto 0;width:min(760px,100%);display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.status-strip span{border:1px solid var(--line);background:rgba(0,229,255,.05);border-radius:999px;padding:8px 13px;color:#c6f9ff;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.central-ring{width:160px;height:160px;margin:20px auto 8px;position:relative}.ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,229,255,.34);border-top-color:var(--gold);animation:rotate 8s linear infinite}.r2{inset:22px;animation-duration:5s;animation-direction:reverse}.r3{inset:48px;border-style:dashed}.ring-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:var(--cyan);box-shadow:0 0 24px var(--cyan);transform:translate(-50%,-50%)}
.portals{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:22px;margin-top:22px}.portal{opacity:0;transform:perspective(900px) translateY(80px) rotateX(18deg);animation:portalIn .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.95s + var(--delay));position:relative;min-height:520px;border:1px solid rgba(0,229,255,.35);border-radius:26px;overflow:hidden;text-decoration:none;color:var(--white);background:linear-gradient(180deg,rgba(10,25,42,.72),rgba(2,5,10,.9));box-shadow:0 20px 70px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.04);transition:transform .35s ease,border-color .35s,box-shadow .35s}
.portal:hover{transform:perspective(900px) translateY(-12px) rotateX(0) rotateY(var(--tilt,0deg));border-color:rgba(255,176,32,.75);box-shadow:0 28px 90px rgba(0,229,255,.16)}
.portal:before,.portal:after{content:"";position:absolute;width:60px;height:60px;border-color:var(--cyan);border-style:solid;opacity:.75}.portal:before{left:12px;top:12px;border-width:1px 0 0 1px}.portal:after{right:12px;bottom:12px;border-width:0 1px 1px 0}
.portal-top{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:var(--gold);font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:.17em;text-transform:uppercase;border-bottom:1px solid rgba(0,229,255,.18)}
.preview{height:230px;position:relative;overflow:hidden;background:#030912}.preview iframe{position:absolute;inset:0;width:130%;height:130%;border:0;transform:scale(.78);transform-origin:0 0;filter:saturate(1.25) contrast(1.05) brightness(.62);opacity:.72;pointer-events:none}.preview-fallback{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;mix-blend-mode:screen}.hud-bg{background-image:url("./assets/hud-blueprint.jpg")}.white-bg{background-image:url("./assets/white-circuit.jpg")}.gold-bg{background-image:url("./assets/mechanical-gold.jpg")}.blue-bg{background-image:url("./assets/blue-frame.jpg")}
.hud-lines{position:absolute;inset:0;background:linear-gradient(transparent 48%,rgba(0,229,255,.18) 50%,transparent 52%),radial-gradient(circle at 25% 30%,rgba(255,176,32,.4),transparent 8%),linear-gradient(120deg,rgba(0,229,255,.22),transparent 32%,rgba(0,0,0,.9));background-size:100% 18px,100% 100%,100% 100%}
.portal-copy{padding:24px}.portal h2{font-size:22px;line-height:1.05;margin:0 0 14px;text-transform:uppercase}.portal p{margin:0;color:#c2d2e5;font-size:14px;line-height:1.6}.meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:24px}.meta span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.meta span:last-child{background:linear-gradient(90deg,var(--cyan),var(--gold));color:#06101a;padding:12px 15px;border-radius:999px}
@keyframes rotate{to{transform:rotate(360deg)}}@keyframes breath{50%{transform:scale(1.08);opacity:.55}}@keyframes scan{from{transform:translateY(-20vh)}to{transform:translateY(110vh)}}@keyframes portalIn{to{opacity:1;transform:perspective(900px) translateY(0) rotateX(0)}} 
@media(max-width:1100px){.portals{grid-template-columns:repeat(2,1fr)}.portal{min-height:500px}}
@media(max-width:640px){.shell{padding:28px 14px}.portals{grid-template-columns:1fr}.central-ring{width:110px;height:110px}.eyebrow{letter-spacing:.24em}.status-strip{display:none}.preview{height:210px}.portal{min-height:auto}.eli-core{width:180px;height:180px;font-size:42px}.eli-core.expanding{height:120px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}