:root { --live-accent: #74a7ff; --pointer-x: 50%; --pointer-y: 42%; }
.cinematic-light { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(480px circle at var(--pointer-x) var(--pointer-y), color-mix(in srgb, var(--live-accent) 17%, transparent), transparent 68%); mix-blend-mode: screen; opacity: .72; transition: opacity .35s ease; }
.standard-mode .cinematic-light, .reduced-motion .cinematic-light { opacity: .25; }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; background: rgba(255,255,255,.04); }
.scroll-progress span { display: block; width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #7ba5ff, var(--live-accent)); box-shadow: 0 0 18px var(--live-accent); }
.scene-rail { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 38; display: grid; gap: 7px; }
.scene-rail a { position:relative; display: grid; grid-template-columns: 24px 0fr; align-items: center; gap: 6px; min-height: 24px; text-decoration: none; color: #687080; font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; transition: color .25s ease, grid-template-columns .25s ease; }
.scene-rail a span { font-variant-numeric: tabular-nums; }
.scene-rail a b { overflow: hidden; white-space: nowrap; font-weight: 650; opacity: 0; transition: opacity .25s ease; }
.scene-rail a::after { content:""; position:absolute; right:-8px; width:2px; height:14px; background:rgba(255,255,255,.12); border-radius:4px; }
.scene-rail a.active { color: #fff; grid-template-columns: 24px 74px; }
.scene-rail a.active b { opacity: 1; }
.scene-rail a.active::after { background: var(--live-accent); box-shadow: 0 0 14px var(--live-accent); }
.hero-signal { display:flex; flex-wrap:wrap; gap:8px; margin-top:2.2rem; max-width:760px; }
.hero-signal span { padding:.48rem .68rem; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:#737c8e; font-size:.62rem; letter-spacing:.12em; background:rgba(255,255,255,.02); }
[data-depth] { will-change: transform; transform: translate3d(var(--parallax-x,0),var(--parallax-y,0),0); transition: transform .18s linear; }
.product-world::after { content:""; position:absolute; left:8%; right:8%; bottom:0; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--scene-accent) 45%,transparent),transparent); opacity:.45; }
.phoenix-console { position:absolute; width:min(88%,620px); padding:18px; border:1px solid rgba(255,139,74,.23); border-radius:22px; background:linear-gradient(145deg,rgba(32,15,9,.82),rgba(9,8,12,.72)); box-shadow:0 30px 100px rgba(0,0,0,.5),0 0 90px rgba(255,116,40,.12); backdrop-filter:blur(18px); transform:perspective(1000px) rotateY(-8deg) rotateX(3deg); }
.console-top { display:flex; justify-content:space-between; gap:10px; color:#caa28c; font-size:.62rem; letter-spacing:.13em; }
.console-top i { font-style:normal; color:#ff9f69; }
.console-grid { display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:10px; margin-top:16px; }
.console-grid div { min-height:112px; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.025); display:flex; flex-direction:column; justify-content:flex-end; }
.console-grid small { color:#85776f; font-size:.58rem; letter-spacing:.1em; }
.console-grid strong { margin-top:auto; font-size:clamp(1.15rem,2vw,1.8rem); letter-spacing:-.04em; }
.console-grid em { color:#a89387; font-size:.66rem; font-style:normal; margin-top:4px; }
.mastery-track { height:5px; margin-top:14px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; }
.mastery-track span { display:block; height:100%; width:var(--mastery); background:linear-gradient(90deg,#ff6d2f,#ffc097); box-shadow:0 0 18px #ff7a3d; }
.preview-meta { display:grid; gap:8px; margin:1.2rem 0; }
.preview-meta span { display:flex; justify-content:space-between; gap:18px; padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.08); color:#8d95a6; font-size:.78rem; }
.preview-meta strong { color:#eef1f7; font-weight:600; }
.scene.is-active .product-index, .scene.is-active .eyebrow { color: color-mix(in srgb, var(--live-accent) 72%, white); }
.scene.is-active .visual-system { filter:saturate(1.08) brightness(1.03); }
@media (max-width: 980px) { .scene-rail { display:none; } .console-grid { grid-template-columns:1fr 1fr; } .console-grid div:first-child { grid-column:1/-1; } }
@media (max-width: 640px) { .hero-signal { display:none; } .phoenix-console { width:94%; padding:12px; transform:none; } .console-grid div { min-height:86px; } }

.hero-3d-stage { position:absolute; z-index:1; right:clamp(-120px,-5vw,-40px); top:50%; width:min(58vw,860px); aspect-ratio:1.08; transform:translateY(-48%); pointer-events:none; isolation:isolate; }
.hero-3d { position:absolute; inset:0; width:100%; height:100%; opacity:.94; filter:drop-shadow(0 0 46px rgba(70,102,255,.24)); }
.cinematic-v3 .hero-orbit { opacity:.22; transform:translateY(-50%) scale(1.08); filter:blur(.1px); }
.hero-3d-stage::before { content:""; position:absolute; inset:13%; border:1px solid rgba(119,151,255,.12); border-radius:50%; box-shadow:0 0 90px rgba(69,91,255,.08), inset 0 0 80px rgba(93,69,255,.05); animation:heroStagePulse 5.8s ease-in-out infinite; }
.hero-3d-stage::after { content:""; position:absolute; inset:29%; border:1px solid rgba(255,255,255,.08); border-radius:50%; transform:rotateX(68deg); box-shadow:0 0 52px rgba(128,103,255,.08); }
.hero-telemetry { position:absolute; right:8%; bottom:15%; display:grid; justify-items:end; gap:4px; color:#73809a; font-size:.56rem; letter-spacing:.17em; text-transform:uppercase; text-shadow:0 0 18px rgba(70,102,255,.45); }
.hero-telemetry b { color:#cbd5ff; font-size:.61rem; font-weight:650; }
.hero-telemetry i { color:#796eff; font-style:normal; }
.hero-axis { position:absolute; opacity:.22; background:linear-gradient(90deg,transparent,#7191ff,transparent); }
.hero-axis-x { left:8%; right:8%; top:50%; height:1px; }
.hero-axis-y { top:8%; bottom:8%; left:50%; width:1px; background:linear-gradient(transparent,#7191ff,transparent); }
.cinematic-v3 .hero-copy { position:relative; z-index:4; }
.cinematic-v3 .hero::after { content:""; position:absolute; z-index:0; right:-14%; top:11%; width:65vw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(64,80,255,.14),rgba(91,47,255,.04) 42%,transparent 70%); filter:blur(28px); pointer-events:none; }
.hero3d-fallback .hero-3d-stage { display:none; }
.standard-mode .hero-3d-stage { display:none; }
.reduced-motion .hero-3d-stage::before { animation:none; }
@keyframes heroStagePulse { 0%,100% { transform:scale(.96); opacity:.35; } 50% { transform:scale(1.035); opacity:.8; } }
@media (max-width:1100px) { .hero-3d-stage { right:-18vw; width:70vw; opacity:.72; } }
@media (max-width:760px) { .hero-3d-stage { top:33%; right:-47vw; width:118vw; opacity:.42; } .hero-telemetry { display:none; } .cinematic-v3 .hero::after { width:100vw; right:-40%; } }
@media (prefers-reduced-motion: reduce) { .hero-3d-stage::before { animation:none; } }

/* Visual UAT: keep the entry gate atmospheric without exposing the hero copy underneath. */
.experience-gate {
  background:
    radial-gradient(circle at 50% 45%, rgba(62,83,150,.30), rgba(5,6,10,.96) 44%, #05060a 72%),
    #05060a;
}
@media (max-width:560px) {
  .experience-gate {
    background:
      radial-gradient(circle at 68% 42%, rgba(62,83,150,.22), rgba(5,6,10,.98) 48%, #05060a 76%),
      #05060a;
  }
}