:root {
  --canvas: #f4f7fc;
  --ink: #10233f;
  --muted: #50627a;
  --line: #dce6f5;
  --atmosphere: #dce6f5;
  --stage-scale: 1;
}
:root[data-theme="dark"], :root[data-theme="navy"] {
  --canvas: #10233f;
  --ink: #ffffff;
  --muted: #aebed5;
  --line: #50627a;
  --atmosphere: #1262e8;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: "Segoe UI", system-ui, Arial, sans-serif; background: var(--canvas); }
#root {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 1280px;
  height: 720px;
  padding: 36px 52px 28px;
  overflow: hidden;
  background: var(--canvas);
  color: var(--ink);
  transform: scale(var(--stage-scale));
  transform-origin: top left;
}
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 54% 80%, var(--atmosphere), var(--canvas) 70%);
  opacity: .7;
  pointer-events: none;
}
.brandbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 0 0 64px;
}
.brand { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; white-space: nowrap; }
.brandrule { height: 1px; background: var(--line); flex: 1; transform-origin: left; }
.logo-panel { display: flex; align-items: center; padding: 9px 16px; border-radius: 12px; background: #ffffff; }
.logo-panel img { display: block; width: 216px; height: 46px; object-fit: contain; }
#scene-stage { position: relative; z-index: 1; flex: 1; min-height: 0; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
#scene1 { z-index: 1; }
#scene2 { z-index: 2; opacity: 0; }
#scene3 { z-index: 3; opacity: 0; }
#scene4 { z-index: 4; opacity: 0; }
.scene-content { width: 100%; height: 100%; padding: 0 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; }
.product-strip { display: flex; align-items: flex-end; justify-content: center; gap: 24px; width: 100%; height: 100%; }
.product { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 300px; }
.product.hero { flex-basis: 350px; }
.visual { width: 100%; height: 416px; display: flex; align-items: center; justify-content: center; }
.hero .visual { height: 454px; }
.visual img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
figcaption { display: flex; align-items: flex-start; justify-content: center; width: 100%; min-height: 86px; margin: 0; color: var(--ink); font-size: 40px; line-height: 1.08; font-weight: 500; letter-spacing: -.025em; text-align: center; }
.four .product { flex-basis: 268px; }
.four .visual { height: 390px; }
.four .product-strip { gap: 18px; }
.subscriptions .product { flex-basis: 405px; }
.subscriptions .product-strip { gap: 104px; }
.subscriptions .visual { height: 443px; background: #ffffff; border-radius: 18px; padding: 6px; }
.subscriptions .visual img { max-width: 96%; max-height: 96%; }
.hardware .product-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; align-items: end; }
.hardware .product { width: 100%; min-width: 0; }
.hardware .visual { height: 390px; padding: 0; overflow: hidden; background: #ffffff; border-radius: 20px; }
.hardware .surface .visual { height: 445px; }
.hardware .visual img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.hardware figcaption { font-size: 40px; }
.product, .visual, .ambient { will-change: transform; }

/* Original packshots float on a single stage; no white product tiles. */
.subscriptions .visual{background:none;border-radius:0;padding:0;height:443px}
.visual .original-visual{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 16px 12px #0a1e3926)}
.hardware .product-strip{grid-template-columns:1.12fr 1fr 1fr;gap:35px;height:auto;flex:1;align-items:center}
.hardware .visual,.hardware .surface .visual{background:none;border-radius:0;height:335px;overflow:visible;padding:12px 5px}
.hardware figcaption{font-size:33px;line-height:1.15;min-height:76px}
.hardware .scene-content{gap:16px}
.motion-brands{display:flex;gap:26px;align-items:center;justify-content:space-between;min-height:62px;padding:10px 16px;border-top:1px solid var(--line)}
.motion-brands img{width:92px;max-height:38px;object-fit:contain}
:root[data-theme="dark"] .motion-brands img,:root[data-theme="navy"] .motion-brands img{filter:brightness(0) invert(1);opacity:.85}
.logo-panel{background:none;border-radius:0;padding:0}
.logo-panel img{mix-blend-mode:multiply}
:root[data-theme="dark"] .logo-panel img,:root[data-theme="navy"] .logo-panel img{filter:grayscale(1) invert(1);mix-blend-mode:screen}
.motion-brands{background:#eaf1fc;border-radius:14px;border:0;padding:14px 18px}
:root[data-theme="dark"] .motion-brands img,:root[data-theme="navy"] .motion-brands img{filter:none;opacity:1}
.motion-brands img[alt="amd"],:root[data-theme="dark"] .motion-brands img[alt="amd"]{filter:brightness(0)}