.hero-showcase {
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  position: relative;
  width: 100%;
  height: clamp(760px, 100svh, 980px);
  min-height: 760px;
  overflow: hidden;
  isolation: isolate;
  background: #061725;
  color: #fff;
}
.hero-showcase::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 17, 29, .98) 0%, rgba(4, 17, 29, .94) 25%, rgba(4, 17, 29, .72) 41%, rgba(4, 17, 29, .18) 67%, rgba(4, 17, 29, .05) 100%),
    linear-gradient(180deg, rgba(4, 17, 29, .28), transparent 33%, transparent 68%, rgba(4, 17, 29, .74));
  content: "";
}
.hero-showcase::after {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 -150px 190px rgba(2, 10, 18, .28);
  content: "";
}
.hero-scenes, .hero-scene { position: absolute; inset: 0; }
.hero-scenes { z-index: 1; }
.hero-scene {
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background: #0b2234;
  transition: opacity .65s ease, visibility .65s ease;
}
.hero-scene.is-active { opacity: 1; visibility: visible; }
.hero-scene-art {
  display: block;
  opacity: 0;
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.hero-scene.is-active .hero-scene-art { opacity: 1; }
.hero-scene--lineup .hero-scene-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.035) translate3d(var(--hero-shift-x), var(--hero-shift-y), 0);
}
.hero-scene--lineup.is-active .hero-scene-art { transform: scale(1.01) translate3d(var(--hero-shift-x), var(--hero-shift-y), 0); }
.hero-scene--product {
  background:
    radial-gradient(circle at 72% 46%, rgba(49, 112, 151, .38), transparent 27%),
    linear-gradient(135deg, #071927 0%, #0b2639 52%, #15384c 100%);
}
.hero-scene--product::before {
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(rgba(130, 177, 204, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 177, 204, .14) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent 34%, #000 66%);
  content: "";
}
.hero-scene--product::after {
  position: absolute;
  right: 4vw;
  bottom: 12%;
  width: min(63vw, 1040px);
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .48), transparent 68%);
  transform: perspective(650px) rotateX(68deg);
  content: "";
}
.hero-scene--product .hero-scene-art {
  position: absolute;
  z-index: 2;
  top: 13%;
  right: 2.5%;
  width: min(64vw, 1020px);
  height: 72%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 38px 44px rgba(0, 0, 0, .42));
  transform: translate3d(calc(42px + var(--hero-shift-x)), var(--hero-shift-y), 0) scale(.97);
}
.hero-scene--product.is-active .hero-scene-art { transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0) scale(1); }
.hero-scene--product[data-series]::before { content: attr(data-series); color: rgba(182, 218, 237, .035); font: 800 clamp(18rem, 34vw, 36rem)/1 var(--display); letter-spacing: -.12em; }
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .34;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.5px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000, transparent 55%);
}
.hero-content {
  position: relative;
  z-index: 7;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 92px;
  padding-bottom: 124px;
}
.hero-copy { width: min(650px, 54vw); }
.hero-overline {
  margin: 0 0 18px;
  color: #8fc3e1;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .21em;
  text-transform: uppercase;
}
.hero-copy h1 {
  margin: 0;
  color: #fff;
  font: 700 clamp(4.2rem, 7.25vw, 7.8rem)/.83 var(--display);
  letter-spacing: -.075em;
  text-wrap: balance;
}
.hero-copy h1 span { display: block; }
.hero-copy h1 span:last-child { color: #e9f6fc; }
.hero-body { display: grid; gap: 11px; margin-top: 31px; }
.hero-scene-kicker {
  margin: 0;
  color: #ff5960;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-scene-copy { max-width: 52ch; margin: 0; color: rgba(255,255,255,.74); font-size: .98rem; line-height: 1.7; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.hero-button-secondary { border-color: rgba(255,255,255,.42); background: rgba(6,23,37,.28); color: #fff; backdrop-filter: blur(12px); }
.hero-button-secondary:hover { border-color: #fff; background: #fff; color: var(--navy-950); box-shadow: none; }
.hero-spec-rail {
  position: absolute;
  left: 0;
  bottom: 34px;
  display: flex;
  margin: 0;
  color: #fff;
}
.hero-spec-rail div { min-width: 150px; padding: 0 24px; border-left: 1px solid rgba(255,255,255,.22); }
.hero-spec-rail div:first-child { padding-left: 0; border-left: 0; }
.hero-spec-rail dt { color: rgba(255,255,255,.46); font-size: .55rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hero-spec-rail dd { margin: 3px 0 0; font: 600 .78rem var(--display); }
.hero-scene-tag {
  position: absolute;
  z-index: 8;
  top: 118px;
  right: max(28px, calc((100vw - 1240px) / 2));
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.76);
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 16px rgba(237,28,36,.8); }
.hero-gallery-nav {
  position: absolute;
  z-index: 9;
  right: max(28px, calc((100vw - 1240px) / 2));
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-gallery-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: rgba(6,23,37,.28);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.hero-gallery-arrow:hover { border-color: var(--red); background: var(--red); transform: translateY(-2px); }
.hero-gallery-dots { display: flex; gap: 6px; }
.hero-gallery-dot { position: relative; width: 30px; height: 4px; overflow: hidden; padding: 0; border: 0; background: rgba(255,255,255,.28); cursor: pointer; }
.hero-gallery-dot::after { position: absolute; inset: 0; background: #ff5960; content: ""; transform: scaleX(0); transform-origin: left; }
.hero-gallery-dot.is-active::after { animation: heroProgress 7.2s linear forwards; }
.hero-counter { min-width: 48px; color: rgba(255,255,255,.5); font-size: .58rem; font-weight: 700; letter-spacing: .08em; }
.hero-counter strong { color: #fff; }
.hero-catalog-link {
  position: absolute;
  z-index: 9;
  right: max(28px, calc((100vw - 1240px) / 2));
  bottom: 96px;
  color: rgba(255,255,255,.72);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}
.hero-catalog-link:hover { color: #fff; }
@keyframes heroProgress { to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .hero-showcase { height: min(820px, calc(100svh + 40px)); min-height: 720px; }
  .hero-showcase::before { background: linear-gradient(180deg, rgba(4,17,29,.62) 0%, rgba(4,17,29,.22) 32%, rgba(4,17,29,.32) 52%, rgba(4,17,29,.96) 74%); }
  .hero-content { justify-content: flex-end; padding-top: 100px; padding-bottom: 132px; }
  .hero-copy { width: min(100%, 670px); }
  .hero-copy h1 { font-size: clamp(3.7rem, 12vw, 6.2rem); }
  .hero-scene--lineup .hero-scene-art { object-position: 64% top; }
  .hero-scene--product .hero-scene-art { top: 9%; right: -8%; width: 112%; height: 49%; }
  .hero-scene--product::after { bottom: 43%; width: 100%; }
  .hero-scene-tag { display: none; }
  .hero-spec-rail { left: 0; bottom: 31px; }
  .hero-gallery-nav { right: 22px; bottom: 30px; }
  .hero-catalog-link { right: 22px; bottom: 91px; }
}
@media (max-width: 620px) {
  .hero-showcase { min-height: 730px; }
  .hero-content { width: calc(100% - 36px); padding-bottom: 132px; }
  .hero-copy h1 { font-size: clamp(3.05rem, 15.5vw, 4.45rem); }
  .hero-overline { font-size: .55rem; }
  .hero-scene-copy { max-width: 36ch; font-size: .82rem; line-height: 1.55; }
  .hero-cta .button { min-height: 44px; padding: 10px 14px; font-size: .58rem; }
  .hero-spec-rail { display: none; }
  .hero-gallery-nav { left: 18px; right: auto; bottom: 24px; gap: 8px; }
  .hero-gallery-arrow { width: 40px; height: 40px; }
  .hero-gallery-dot { width: 17px; }
  .hero-catalog-link { right: 18px; bottom: 84px; }
  .hero-scene--lineup .hero-scene-art { object-position: 64% top; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gallery-dot.is-active::after { animation: none; transform: scaleX(1); }
  .hero-scene-art { transition: opacity .2s ease; }
}