.sy5862-live {
  --b02-orange: #ffd000;
  --b02-cyan: #2f87ff;
  --b02-blue: #07182d;
  --b02-blue-2: #030b16;
  --b02-paper: #f5f7f9;
}

.sy5862-hero { display: grid; grid-template-columns: .82fr 1.18fr; min-height: 720px; background: #04101f; color: #fff; }
.sy5862-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(68px, 8vw, 140px) clamp(32px, 7vw, 112px); }
.sy5862-hero-copy h1 { max-width: 760px; margin: 18px 0 26px; font-size: clamp(48px, 6.1vw, 98px); line-height: .93; }
.sy5862-hero-copy > p:not(.b02-eyebrow) { max-width: 660px; color: #d5dfeb; font-size: clamp(17px, 1.35vw, 22px); }
.sy5862-hero-copy small { max-width: 650px; margin-top: 26px; color: #92a0b2; }
.sy5862-hero .b02-text-link { color: #fff; }
.sy5862-hero-media { min-height: 720px; overflow: hidden; }
.sy5862-hero-media img { height: 100%; object-fit: cover; object-position: center; }

.sy5862-skus, .sy5862-scenes { padding: clamp(78px, 9vw, 145px) clamp(28px, 7vw, 120px); }
.sy5862-sku-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sy5862-sku-grid article { overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(4,16,31,.08); }
.sy5862-sku-grid article > img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.sy5862-sku-grid article > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 24px 28px 30px; }
.sy5862-sku-grid h3 { margin: 0; font-size: 28px; }
.sy5862-sku-grid p { grid-column: 2; color: var(--b02-muted); }
.sy5862-swatch { width: 20px; height: 20px; border: 1px solid rgba(21,32,42,.2); border-radius: 50%; }
.sy5862-swatch-yellow { background: #ffd000; }
.sy5862-swatch-blue { background: #1d5ed9; }

.sy5862-beams { padding: clamp(78px, 9vw, 145px) clamp(28px, 7vw, 120px); background: #061426; color: #fff; }
.sy5862-beams > img { max-width: 1500px; margin: 52px auto 0; border: 1px solid rgba(255,208,0,.35); }
.sy5862-modes { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(42px, 7vw, 120px); padding: clamp(78px, 9vw, 145px) clamp(28px, 7vw, 120px); background: #020912; color: #fff; }
.sy5862-mode-copy h2 { margin: 18px 0 24px; font-size: clamp(42px, 5.5vw, 78px); line-height: .98; }
.sy5862-mode-copy > p:not(.b02-eyebrow) { color: #aeb9c7; font-size: 18px; }
.sy5862-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.12); }
.sy5862-mode-grid article { min-height: 180px; padding: 30px; background: #07182d; }
.sy5862-mode-grid article:last-child { grid-column: 1 / -1; }
.sy5862-mode-grid span { display: block; margin-bottom: 32px; color: #ffd000; font-weight: 800; letter-spacing: .14em; }
.sy5862-mode-grid strong { display: block; margin-bottom: 10px; font-size: 24px; }
.sy5862-mode-grid small { color: #aeb9c7; }

.sy5862-feature-pair { padding: clamp(78px, 9vw, 145px) clamp(28px, 7vw, 120px); background: #eef1f4; }
.sy5862-feature-pair article { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1500px; margin: 0 auto 36px; background: #fff; }
.sy5862-feature-pair article:nth-child(even) img { order: 2; }
.sy5862-feature-pair article > img { height: 100%; max-height: 760px; object-fit: cover; }
.sy5862-feature-pair article > div { padding: clamp(38px, 6vw, 94px); }
.sy5862-feature-pair h2 { font-size: clamp(38px, 4.6vw, 68px); }

.sy5862-scenes { background: #f5f7f9; }
.sy5862-scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sy5862-scene-grid figure { margin: 0; overflow: hidden; background: #07182d; color: #fff; }
.sy5862-scene-grid img { aspect-ratio: 4 / 5; height: 100%; max-height: 660px; object-fit: cover; }
.sy5862-scene-grid figcaption { padding: 20px 22px; font-weight: 700; }

@media (max-width: 900px) {
  .sy5862-hero, .sy5862-modes, .sy5862-feature-pair article { grid-template-columns: 1fr; }
  .sy5862-hero { min-height: auto; }
  .sy5862-hero-copy { min-height: 610px; }
  .sy5862-hero-media { min-height: 520px; }
  .sy5862-feature-pair article:nth-child(even) img { order: 0; }
  .sy5862-scene-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .sy5862-hero-copy { min-height: auto; padding: 58px 24px; }
  .sy5862-hero-copy h1 { font-size: 46px; }
  .sy5862-hero-media { min-height: 440px; }
  .sy5862-sku-grid, .sy5862-mode-grid, .sy5862-scene-grid { grid-template-columns: 1fr; }
  .sy5862-mode-grid article:last-child { grid-column: auto; }
  .sy5862-feature-pair article > div { padding: 34px 24px 42px; }
}