/* ── Stage ──────────────────────────────────────────────────────────── */
  .stage {
    position: relative; min-height: 760px; height: 86vh; max-height: 920px;
    background:
      radial-gradient(120% 80% at 50% 8%, #16224A 0%, #0B1330 42%, #070C1E 100%);
    overflow: hidden; perspective: 1600px; perspective-origin: 50% 42%;
    user-select: none; touch-action: none;
  }
  /* perspective grid floor */
  .stage .floor {
    position: absolute; left: -20%; right: -20%; bottom: -6%; height: 60%;
    background-image:
      linear-gradient(rgba(79,131,255,0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(79,131,255,0.16) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: rotateX(74deg); transform-origin: 50% 100%;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000 35%, transparent 78%);
    mask-image: radial-gradient(70% 90% at 50% 0%, #000 35%, transparent 78%);
    opacity: 0.8;
  }
  .stage .vign { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4,8,20,0.85) 100%); }
  .stage .scan { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); }

  .scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .rack-zoom { transform: translateY(var(--fy, 0px)) scale(var(--fs, 1)); transition: transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform; }
  .rack-tilt { transform-style: preserve-3d; transform: rotateX(var(--rx, 7deg)) rotateY(var(--ry, -32deg)); transition: transform .12s ease-out; }
  .scene.idle .rack-tilt { animation: floaty 9s ease-in-out infinite; }
  @keyframes floaty { 0%,100% { transform: rotateX(7deg) rotateY(-32deg) translateY(0); } 50% { transform: rotateX(6deg) rotateY(-29deg) translateY(-8px); } }

  /* ── Background data-hall racks (far behind, atmospheric) ───────────── */
  .hall { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transform-style: preserve-3d; pointer-events: none; }
  .bg-rack { position: absolute; left: 0; top: 0; width: 150px; height: 392px; border-radius: 8px;
    background: linear-gradient(180deg, #15203f, #0b1330);
    background-image: repeating-linear-gradient(180deg, rgba(150,180,240,0.05) 0 2px, rgba(0,0,0,0.18) 2px 14px);
    border: 1px solid rgba(120,150,220,0.14);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset; }
  .bg-rack::after { content:""; position:absolute; left:8px; bottom:14px; width:5px; height:5px; border-radius:50%;
    background: var(--bg-led, #3a6fd0); box-shadow: 0 0 6px var(--bg-led,#3a6fd0), 0 -120px 0 rgba(95,227,161,0.7), 0 -240px 0 rgba(79,131,255,0.7); opacity:.8; }
  .bg-rack.row2 { filter: blur(2px); opacity: 0.5; }
  .bg-rack.row1 { filter: blur(1px); opacity: 0.72; }

  /* ── Rack cabinet ───────────────────────────────────────────────────── */
  .rack { position: relative; width: 340px; transform-style: preserve-3d; }
  .rack-shell {
    position: absolute; inset: -18px -16px -22px -16px; transform: translateZ(-78px);
    background: linear-gradient(180deg, #1b2440, #0e1530);
    border: 1px solid rgba(120,150,220,0.22); border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 0 40px rgba(0,0,0,0.55) inset, 0 40px 120px -30px rgba(0,0,0,0.85);
  }
  /* recessed front bezel — adds visible depth around the units */
  .rack-bezel { position: absolute; inset: -8px -6px -10px -6px; transform: translateZ(-6px); border-radius: 10px;
    border: 2px solid rgba(10,16,32,0.85);
    box-shadow: 0 0 0 1px rgba(150,175,235,0.16), 0 18px 40px -10px rgba(0,0,0,0.7) inset; pointer-events: none; }
  /* front corner posts */
  .rack-post { position: absolute; top: -18px; bottom: -22px; width: 10px; transform: translateZ(6px);
    background: linear-gradient(180deg,#323c5e,#1a2238); border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 12px rgba(0,0,0,0.5); }
  .rack-post.l { left: -16px; } .rack-post.r { right: -16px; }
  /* side depth panels */
  .rack-side { position: absolute; top: -18px; bottom: -22px; width: 78px;
    background: linear-gradient(90deg, #10182f, #0a1126); }
  .rack-side.l { left: -16px; transform: rotateY(90deg); transform-origin: left; border-left: 1px solid rgba(120,150,220,0.18); }
  .rack-side.r { right: -16px; transform: rotateY(-90deg); transform-origin: right; }
  .rack-top { position: absolute; left: -16px; right: -16px; top: -18px; height: 78px;
    background: linear-gradient(180deg, #232f52, #131c38); transform: rotateX(90deg); transform-origin: top; border-radius: 6px 6px 0 0; }

  .units { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 0; transform-style: preserve-3d; }
  .grp { display: flex; flex-direction: column; gap: 4px; position: relative; transition: opacity .5s, filter .5s; }

  /* ── Server unit ────────────────────────────────────────────────────── */
  .u {
    position: relative; height: 42px; border-radius: 5px;
    background: linear-gradient(180deg, #2b3147 0%, #1c2235 48%, #161b2c 100%);
    border: 1px solid rgba(150,170,210,0.18);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 -2px 4px rgba(0,0,0,0.4) inset;
    display: grid; grid-template-columns: 14px 1fr auto 14px; align-items: center; gap: 8px;
    padding: 0 8px; overflow: hidden;
  }
  .u.tall { height: 60px; }
  .u .ear { width: 6px; height: 70%; border-radius: 2px; background: linear-gradient(180deg,#3a4straight,#222a40);
    background: linear-gradient(180deg,#39415e,#20273d); box-shadow: 0 0 0 1px rgba(0,0,0,0.4); position: relative; }
  .u .ear::after { content:""; position:absolute; left:1px; right:1px; top:6px; height:3px; border-radius:2px; background:rgba(0,0,0,0.5); box-shadow:0 9px 0 rgba(0,0,0,0.5), 0 18px 0 rgba(0,0,0,0.5); }
  .u .face { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .u .bays { display: flex; gap: 3px; }
  .u .bay { width: 9px; height: 26px; border-radius: 2px; background: linear-gradient(180deg,#1a2034,#11162600); background: linear-gradient(180deg,#222a42,#141a2c); border: 1px solid rgba(0,0,0,0.45); position: relative; }
  .u.tall .bay { height: 42px; }
  .u .bay::before { content:""; position:absolute; left:2px; top:4px; width:3px; height:3px; border-radius:50%; background:var(--led,#3a7bdc); box-shadow:0 0 5px var(--led,#3a7bdc); }
  .u .vent { flex: 1; height: 24px; border-radius: 3px; min-width: 30px;
    background: repeating-linear-gradient(90deg, #0e1326 0 2px, #1a2238 2px 5px); border: 1px solid rgba(0,0,0,0.4); }
  .u.tall .vent { height: 40px; }
  .u .leds { display: flex; flex-direction: column; gap: 4px; }
  .u .leds i { width: 6px; height: 6px; border-radius: 50%; background: #2a3450; display: block; }
  .u .leds i.on { background: var(--led,#4f83ff); box-shadow: 0 0 6px var(--led,#4f83ff); animation: blink var(--bk,2.4s) steps(1) infinite; }
  @keyframes blink { 0%,70%{opacity:1} 71%,100%{opacity:.35} }
  .u .tag { position: absolute; left: 30px; bottom: 3px; font-family:"IBM Plex Mono",monospace; font-size: 8.5px; letter-spacing:0.08em; color: rgba(180,200,240,0.5); pointer-events:none; }

  /* GPU fans */
  .u .fans { display:flex; gap:6px; align-items:center; }
  .u .fan { width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(122,108,240,0.0) 30%, rgba(122,108,240,0.25) 55%, transparent 70%), conic-gradient(from 0deg, #20263e, #2c3props, #20263e);
    background: radial-gradient(circle, #1a2138 38%, #2a3252 39%, #1a2138 41%), conic-gradient(from 0deg,#222a44,#161c30,#222a44,#161c30,#222a44);
    border: 1px solid rgba(0,0,0,0.5); position: relative; }
  .u .fan::after { content:""; position:absolute; inset:32%; border-radius:50%; background: #7a6cf0; box-shadow:0 0 10px #7a6cf0; opacity:.9; animation: spin 2.4s linear infinite; }

  /* group accents */
  .grp[data-grp="node"]    .u { --led:#5fe3a1; }
  .grp[data-grp="compute"] .u { --led:#4f83ff; border-color: rgba(79,131,255,0.3); }
  .grp[data-grp="storage"] .u { --led:#22c9d4; border-color: rgba(34,201,212,0.28); }
  .grp[data-grp="gpu"]     .u { --led:#7a6cf0; border-color: rgba(122,108,240,0.3); }

  /* ── Hotspots ───────────────────────────────────────────────────────── */
  .hot { position: absolute; right: -30px; top: 50%; transform: translate(50%,-50%) translateZ(60px);
    width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(79,131,255,0.16); color: #cfe0ff; display: grid; place-items: center;
    box-shadow: 0 0 0 1px rgba(120,160,255,0.5), 0 0 18px rgba(79,131,255,0.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 5; }
  .hot::before { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(120,160,255,0.5); animation: ping 2.2s ease-out infinite; }
  .hot .core { width: 9px; height: 9px; border-radius: 50%; background: #7fb0ff; box-shadow: 0 0 8px #7fb0ff; }
  .hot:hover { background: rgba(79,131,255,0.34); }
  .grp[data-grp="gpu"] .hot { background: rgba(122,108,240,0.18); box-shadow: 0 0 0 1px rgba(150,135,255,0.5), 0 0 18px rgba(122,108,240,0.5); }
  .grp[data-grp="storage"] .hot { background: rgba(34,201,212,0.18); box-shadow: 0 0 0 1px rgba(90,220,230,0.5), 0 0 18px rgba(34,201,212,0.45); }
  @keyframes ping { 0%{transform:scale(.8);opacity:.9} 100%{transform:scale(2.1);opacity:0} }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* dim non-focused groups */
  .rack[data-focus] .grp:not(.is-focus) { opacity: 0.28; filter: saturate(0.5) blur(0.4px); }
  .rack[data-focus] .grp:not(.is-focus) .hot { opacity: 0; pointer-events: none; }
  .grp.is-focus .u { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(120,160,255,0.55), 0 0 26px rgba(79,131,255,0.35); }

  /* ── Cables (SVG overlay on right) ──────────────────────────────────── */
  .cables { position: absolute; top: -10px; right: -64px; width: 90px; height: calc(100% + 20px); transform: translateZ(30px); pointer-events: none; overflow: visible; }
  .cables path { fill: none; stroke-width: 3; opacity: 0.8; stroke-linecap: round; filter: drop-shadow(0 0 4px currentColor); }

  /* ── Popup ──────────────────────────────────────────────────────────── */
  .hot-popup { position: absolute; bottom: 6%; right: 5%; top: auto; transform: translateX(20px); width: 340px; max-width: 86vw;
    background: rgba(14,21,46,0.78); border: 1px solid rgba(120,160,255,0.3); border-radius: 16px; padding: 26px;
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8); color: #eaf0ff; opacity: 0; pointer-events: none;
    transition: opacity .4s, transform .4s; z-index: 20; }
  .hot-popup.show { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .hot-popup .pk { display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; color:#9fc0ff; }
  .hot-popup .pk .sw { width:9px; height:9px; border-radius:50%; }
  .hot-popup h3 { margin: 12px 0 0; font-family:"Space Grotesk",sans-serif; font-size: 23px; letter-spacing:-0.02em; }
  .hot-popup .spec { margin: 6px 0 0; font-family:"IBM Plex Mono",monospace; font-size: 12px; color:#7f93c4; }
  .hot-popup p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: rgba(234,240,255,0.82); }
  .hot-popup .badge { margin-top: 16px; display:inline-flex; }
  .hot-popup .start { margin-top: 18px; display: flex; }
  .hot-popup .start .btn { width: 100%; }
  .hot-popup .x { position:absolute; top:14px; right:14px; width:26px; height:26px; border:0; border-radius:7px; background:rgba(255,255,255,0.08); color:#cfe0ff; cursor:pointer; font-size:14px; }
  .hot-popup .x:hover { background:rgba(255,255,255,0.16); }

  /* ── HUD ────────────────────────────────────────────────────────────── */
  .hud { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; gap: 14px; justify-content: center; z-index: 15; pointer-events: none; flex-wrap: wrap; padding: 0 16px; }
  .hud .chip { pointer-events: auto; display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size: 11px; letter-spacing:0.08em;
    background: rgba(12,20,44,0.7); border:1px solid rgba(120,160,255,0.22); color:#bcd0ff; padding:8px 14px; border-radius:999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hud .chip.btn { cursor: pointer; } .hud .chip.btn:hover { border-color:rgba(120,160,255,0.5); color:#fff; }
  .hud .chip .sw { width:9px; height:9px; border-radius:50%; }
  .stage-hint { position:absolute; top:18px; left:50%; transform:translateX(-50%); font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.12em; color:rgba(150,175,230,0.7); z-index:15; pointer-events:none; }
  .stage-hint.gone { opacity:0; transition:opacity .6s; }

  @media (max-width: 720px) {
    .hot-popup { right: 50%; transform: translate(50%, 40px); top: auto; bottom: 70px; }
    .hot-popup.show { transform: translate(50%, 0); }
    .rack-zoom { --fs: 0.82; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scene.idle .rack-tilt { animation: none; }
    .hot::before, .u .leds i.on, .u .fan::after { animation: none; }
  }

  /* ── Unified hero (no card) — blends straight into the rack stage ──────── */
  .os-hero { background: linear-gradient(180deg, #0a1024 0%, #0b1330 70%, #101b3e 100%); padding: 60px 20px 0 !important; }
  .os-hero .hero-card { background: transparent; box-shadow: none; border: 0; border-radius: 0; min-height: auto; overflow: visible; }
  .os-hero .hero-card::before, .os-hero .hero-card::after { display: none !important; }
  .os-hero .hero-inner { padding: 16px 40px 4px; }
  .os-hero .hero h1 { line-height: 1.05; }
  .os-hero .hero-eyebrow { background: rgba(120,160,255,0.10); border-color: rgba(120,160,255,0.22); }
  .hero-down { display: flex; margin: 14px auto 0; width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center;
    color: #9fc0ff; border: 1px solid rgba(120,160,255,0.3); background: rgba(255,255,255,0.04); cursor: pointer; position: relative; z-index: 3;
    animation: heroDown 1.8s ease-in-out infinite; }
  .hero-down:hover { color: #fff; border-color: rgba(120,160,255,0.6); }
  @keyframes heroDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
  .os-stage-section { padding: 0 !important; margin-top: -1px; }
  .stage { background: radial-gradient(120% 80% at 50% 0%, #101b3e 0%, #0B1330 42%, #070C1E 100%) !important; }
  @media (prefers-reduced-motion: reduce) { .hero-down { animation: none; } }

  /* ── WOW background — aurora mesh + drifting grid (detail section) ─────── */
  .wow { position: relative; background: #070C1E; color: var(--paper); overflow: hidden; }
  .wow .eyebrow { color: var(--blue-bright); }
  .wow .h2 { color: #fff; }
  .wow .lede { color: rgba(234,240,255,0.78); }
  .wow .ftile { background: rgba(255,255,255,0.04); border-color: rgba(120,160,255,0.16); }
  .wow .ftile h4 { color: #fff; }
  .wow .ftile p { color: rgba(234,240,255,0.7); }
  .wow-bg { position: absolute; inset: 0; pointer-events: none; }
  .wow-bg::before { content:""; position:absolute; inset:0;
    background-image: linear-gradient(rgba(79,131,255,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(79,131,255,0.10) 1px, transparent 1px);
    background-size: 46px 46px; mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%); animation: wowGrid 24s linear infinite; }
  .wow-bg span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; mix-blend-mode: screen; }
  .wow-bg span:nth-child(1) { width: 520px; height: 520px; left: 8%; top: -10%; background: #2C6BFF; animation: wowFloat 16s ease-in-out infinite; }
  .wow-bg span:nth-child(2) { width: 460px; height: 460px; right: 6%; top: 20%; background: #7A6CF0; animation: wowFloat 21s ease-in-out infinite reverse; }
  .wow-bg span:nth-child(3) { width: 400px; height: 400px; left: 38%; bottom: -16%; background: #22C9D4; animation: wowFloat 18s ease-in-out infinite; }
  @keyframes wowGrid { from { background-position: 0 0, 0 0; } to { background-position: 46px 46px, 46px 46px; } }
  @keyframes wowFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.15); } }
  @media (prefers-reduced-motion: reduce) { .wow-bg::before, .wow-bg span { animation: none; } }