/* Hero — Floating stage: narrower 16:9 video card floating on a navy band with soft blue radial fades */
.hero.hero-inset { width: 100%; aspect-ratio: auto; overflow: hidden; position: relative; padding: clamp(36px, 4.8vw, 64px) 0 clamp(44px, 5.4vw, 72px);
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(0,93,217,.30), transparent 70%),
    radial-gradient(40% 50% at 12% 15%, rgba(0,93,217,.16), transparent 70%),
    radial-gradient(40% 50% at 88% 90%, rgba(0,93,217,.16), transparent 70%),
    var(--navy, #06102C); }
.hero-b .hero-frame { position: relative; width: min(940px, 100% - 64px); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--navy-deep, #030816); isolation: isolate;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 0 0 7px rgba(0,93,217,.22), 0 30px 80px -24px rgba(0,93,217,.6); }
.hero-b .hero-frame::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 38%; height: 3px; transform: translateX(-50%); border-radius: 3px 3px 0 0; background: linear-gradient(90deg, transparent, #005DD9 20%, #F2A548 50%, #005DD9 80%, transparent); z-index: 4; pointer-events: none; }
.hero-b .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-b .sound-toggle { left: clamp(12px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); }
@media (max-width: 760px) {
  .hero.hero-inset { padding: 26px 0 30px; }
  .hero-b .hero-frame { width: calc(100% - 40px); border-radius: 16px; box-shadow: 0 0 0 4px rgba(255,255,255,.04), 0 0 0 5px rgba(0,93,217,.22), 0 20px 50px -20px rgba(0,93,217,.6); }
}