.product-page { background: #010607; }
.product-page main { overflow: hidden; background: #010607; }

.product-hero {
  position: relative;
  min-height: clamp(540px, 68svh, 660px);
  overflow: hidden;
  isolation: isolate;
  background: #010607;
}

.product-hero::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 135px;
  background: linear-gradient(180deg, transparent, rgba(1, 6, 7, .63) 48%, #010607);
  content: "";
}

.product-hero__media,
.product-hero__shade,
.product-hero__mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-hero__media {
  z-index: -4;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transform-origin: 68% center;
  animation: productHeroDrift 20s ease-in-out infinite alternate;
}

.product-hero__shade {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(1,5,6,.99), rgba(1,5,6,.93) 30%, rgba(1,5,6,.55) 49%, rgba(1,5,6,.05) 77%),
    linear-gradient(180deg, rgba(1,5,6,.66), transparent 29%, transparent 64%, rgba(1,5,6,.91));
}

.product-hero__mist {
  z-index: -2;
  left: 36%;
  width: 49%;
  background: radial-gradient(ellipse at center, rgba(45,215,208,.12), transparent 68%);
  filter: blur(34px);
  opacity: .58;
  animation: productMist 8s ease-in-out infinite alternate;
}

.product-hero__content {
  display: flex;
  align-items: center;
  min-height: calc(clamp(540px, 68svh, 660px) - 82px);
  padding: 24px clamp(42px, 6.1vw, 88px) 58px;
}

.product-hero__content > div { max-width: 560px; }

.product-hero__eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  color: var(--teal-bright);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .22em;
}

.product-hero__eyebrow::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 13px rgba(91,221,215,.7);
  content: "";
}

.product-hero__eyebrow::after {
  position: absolute;
  top: 37px;
  left: 0;
  width: 66px;
  height: 1px;
  background: linear-gradient(90deg, var(--teal-bright), transparent);
  content: "";
}

.product-hero h1 {
  margin: 48px 0 17px;
  color: var(--white);
  font-size: clamp(2.65rem, 3.7vw, 3.45rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 6px 24px rgba(0,0,0,.72);
}

.product-hero__tagline {
  margin: 0;
  color: #72eee7;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.45;
}

.product-hero__copy {
  max-width: 520px;
  margin: 20px 0 0;
  color: #bac6c7;
  font-size: .88rem;
  line-height: 1.72;
}

.product-hero__button {
  width: 206px;
  height: 46px;
  margin-top: 28px;
  padding: 0 17px 0 20px;
  border: 1px solid rgba(91,221,215,.68);
  background: linear-gradient(135deg,rgba(43,188,184,.2),rgba(5,58,62,.21));
}

.product-hero__meta {
  position: absolute;
  bottom: 33px;
  left: clamp(42px,6.1vw,88px);
  margin: 0;
  color: rgba(198,213,214,.46);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .19em;
}

.product-hero__scroll {
  position: absolute;
  right: clamp(34px,4.8vw,70px);
  bottom: 26px;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(91,221,215,.36);
  border-radius: 50%;
  background: rgba(3,21,23,.5);
  transition: border-color .25s,background-color .25s,transform .25s;
}

.product-hero__scroll:hover,
.product-hero__scroll:focus-visible {
  border-color: var(--teal-bright);
  background: rgba(30,110,108,.25);
  transform: translateY(3px);
  outline: none;
}

.product-hero__scroll svg {
  width: 17px;
  fill: none;
  stroke: var(--teal-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.product-stream { position: relative; background: #010607; }

.product-section {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  scroll-margin-top: 82px;
  isolation: isolate;
  background: #010607;
}

.product-section::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: radial-gradient(ellipse 47% 64% at 26% 51%,rgba(22,173,170,.05),transparent 76%);
  content: "";
  pointer-events: none;
}

.product-section::after {
  position: absolute;
  z-index: -1;
  inset: -2px 0;
  background: linear-gradient(180deg,#010607 0%,transparent 15%,transparent 86%,#010607 100%);
  content: "";
  pointer-events: none;
}

.product-section__ambient {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 25%;
  width: 48vw;
  height: 220px;
  border-radius: 50%;
  background: rgba(44,216,208,.033);
  filter: blur(82px);
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.product-section__ambient--warm {
  background: linear-gradient(90deg,rgba(33,200,194,.03),rgba(182,128,44,.025));
}

.product-section__inner {
  display: grid;
  grid-template-columns: minmax(390px,.92fr) minmax(390px,1.08fr);
  gap: clamp(62px,7.5vw,118px);
  align-items: center;
  width: min(100% - 96px,1280px);
  min-height: 410px;
  margin: 0 auto;
  padding: 43px 0;
}

.product-section__media {
  position: relative;
  display: block;
  width: min(100%,520px);
  aspect-ratio: 1.58 / 1;
  overflow: hidden;
  justify-self: start;
  -webkit-mask-image: radial-gradient(ellipse 91% 88% at 50% 50%,#000 70%,rgba(0,0,0,.94) 83%,transparent 100%);
  mask-image: radial-gradient(ellipse 91% 88% at 50% 50%,#000 70%,rgba(0,0,0,.94) 83%,transparent 100%);
  filter: drop-shadow(0 19px 25px rgba(0,0,0,.32));
  transition: transform .5s cubic-bezier(.2,.72,.2,1),filter .5s ease;
}

.product-section__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.05),transparent 30%,transparent 68%,rgba(1,7,8,.24)),radial-gradient(circle at 78% 32%,rgba(80,235,227,.055),transparent 28%);
  content: "";
  pointer-events: none;
}

.product-section__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .91;
  transform: scale(1.01);
  transition: filter .7s,opacity .7s,transform 1.1s cubic-bezier(.2,.72,.2,1);
}

.product-section__media:hover img,
.product-section__media:focus-visible img {
  filter: saturate(1.05) brightness(1.035);
  opacity: .99;
  transform: scale(1.032);
}

.product-section__media:focus-visible { outline: 1px solid rgba(91,221,215,.52); outline-offset: 7px; }

.product-section__copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.product-section__kicker {
  margin: 0 0 24px;
  color: var(--teal-bright);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .22em;
}

.product-section__kicker::after {
  display: block;
  width: 58px;
  height: 1px;
  margin-top: 15px;
  background: linear-gradient(90deg,rgba(91,221,215,.9),transparent);
  box-shadow: 0 0 8px rgba(91,221,215,.15);
  content: "";
}

.product-section h2 {
  margin: 0;
  color: #edf3f3;
  font-size: clamp(1.75rem,2.3vw,2.25rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.product-section h2 a { transition: color .28s,text-shadow .28s; }
.product-section h2 em { display: block; margin-top: 3px; color: var(--teal-bright); font-style: normal; }
.product-section h2 a:hover,.product-section h2 a:focus-visible { color: var(--teal-bright); text-shadow: 0 0 20px rgba(91,221,215,.12); outline: none; }

.product-section h3 {
  margin: 22px 0 0;
  color: #e0e8e8;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.5;
}

.product-section__copy > p:not(.product-section__kicker):not(.product-section__meta) {
  max-width: 520px;
  margin: 16px 0 0;
  color: #a8b6b7;
  font-size: .82rem;
  line-height: 1.72;
}

.product-section__meta {
  margin: 26px 0 0;
  color: rgba(146,164,165,.36);
  font-size: .49rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.js .product-section__media,
.js .product-section__copy {
  opacity: 0;
  transition: opacity .85s ease,transform .9s cubic-bezier(.2,.72,.2,1);
}

.js .product-section__media { transform: translate3d(-24px,12px,0); }
.js .product-section__copy { transform: translate3d(24px,12px,0); }
.js .product-section.is-visible .product-section__media,
.js .product-section.is-visible .product-section__copy { opacity: 1; transform: none; }

@keyframes productHeroDrift {
  from { transform: scale(1.015) translate3d(0,0,0); }
  to { transform: scale(1.04) translate3d(-.4%,-.2%,0); }
}

@keyframes productMist {
  from { opacity: .44; transform: translate3d(-1.4%,0,0) scale(.97); }
  to { opacity: .68; transform: translate3d(1.4%,0,0) scale(1.03); }
}

@media (max-width: 1040px) {
  .product-section__inner {
    grid-template-columns: minmax(330px,.92fr) minmax(330px,1.08fr);
    gap: 48px;
    width: min(100% - 54px,940px);
  }
  .product-section__copy > p:not(.product-section__kicker):not(.product-section__meta) { font-size: .78rem; }
}

@media (max-width: 760px) {
  .product-hero { min-height: 650px; }
  .product-hero__media { object-position: 63% center; }
  .product-hero__shade { background: linear-gradient(90deg,rgba(1,5,6,.97),rgba(1,5,6,.75) 72%,rgba(1,5,6,.3)),linear-gradient(180deg,rgba(1,5,6,.58),transparent 28%,rgba(1,5,6,.93)); }
  .product-hero__content { min-height: 578px; padding: 20px 24px 66px; }
  .product-hero h1 { margin-top: 44px; font-size: clamp(2.45rem,12vw,3rem); }
  .product-hero__copy { max-width: 430px; font-size: .86rem; }
  .product-hero__meta { display: none; }
  .product-hero__scroll { right: 22px; bottom: 22px; }

  .product-section { min-height: auto; scroll-margin-top: 70px; }
  .product-section__inner {
    grid-template-columns: 1fr;
    gap: 27px;
    width: min(100% - 36px,620px);
    min-height: auto;
    padding: 56px 0 69px;
  }
  .product-section__media { width: 100%; aspect-ratio: 1.52 / 1; }
  .product-section__copy { max-width: 580px; padding: 0 8px; }
  .product-section h2 { font-size: clamp(1.8rem,8vw,2.2rem); }
  .product-section__ambient { left: 50%; width: 110vw; }
}

@media (prefers-reduced-motion: reduce) {
  .product-hero__media,.product-hero__mist { animation: none !important; }
  .js .product-section__media,.js .product-section__copy { opacity: 1; transform: none; transition: none; }
  .product-section__media img { transition: none; }
}

@media (max-width: 620px) {
  .product-hero { min-height: auto; padding-bottom: 0; }
  .product-hero__media { opacity: .78; object-position: 68% center; animation: none; transform: none; }
  .product-hero__shade { background: linear-gradient(90deg,rgba(1,5,6,.97),rgba(1,5,6,.8) 66%,rgba(1,5,6,.28)),linear-gradient(180deg,rgba(1,5,6,.48),transparent 34%,#010607 100%); }
  .product-hero__content { min-height: 570px; padding: 50px 22px 78px; }
  .product-hero h1 { margin: 42px 0 16px; font-size: clamp(2rem,10vw,2.65rem); line-height: 1.02; }
  .product-hero__copy { font-size: .83rem; line-height: 1.72; }
  .product-hero__button { width: 100%; max-width: 235px; }
  .product-hero__scroll { display: none; }

  .product-section__inner { width: calc(100% - 36px); gap: 24px; padding: 48px 0 62px; }
  .product-section__media { width: 100%; aspect-ratio: 1.45 / 1; justify-self: center; }
  .product-section__media img { filter: none !important; object-position: center; }
  .product-section__copy { width: 100%; padding: 0 4px; }
  .product-section__kicker { margin-bottom: 20px; }
  .product-section h2 { font-size: clamp(1.65rem,7.8vw,2.05rem); }
  .product-section h3 { margin-top: 17px; }
  .product-section__copy > p:not(.product-section__kicker):not(.product-section__meta) { font-size: .8rem; line-height: 1.72; }
}