/* Local-only dual-stage hero. The approved production hero remains unchanged. */

.dual-stage-hero {
  --hero-stage-base: #01070e;
  --hero-progress: 0;
  --hero-definition-opacity: 1;
  --hero-value-opacity: 0;
  --hero-camera-scale: 1;
  --hero-camera-x: 0px;
  --hero-camera-y: 0px;
  --hero-grid-drift: 0px;
  --hero-depth-blur: 1.4px;
  --hero-space-expansion: 1;
  --hero-space-settle: 0;
  --hero-motion-scale: 1;
  --hero-pointer-x: 0px;
  --hero-pointer-y: 0px;
  --hero-system-reveal: 0;
  --hero-system-visual-reveal: 0;
  --hero-system-suppression: 1;
  --hero-field-response: 0;
  --hero-pulse-earphone: 0;
  --hero-pulse-earphone-opacity: 0;
  --hero-pulse-case: 0;
  --hero-pulse-case-opacity: 0;
  --hero-pulse-watch: 0;
  --hero-pulse-watch-opacity: 0;
  --hero-spark-earphone: 0;
  --hero-spark-case: 0;
  --hero-spark-watch: 0;
  --hero-response-earphone-progress: 0;
  --hero-response-earphone-sweep: 0;
  --hero-response-earphone-rim: 0;
  --hero-response-earphone-role: 0;
  --hero-response-earphone-settle: 0;
  --hero-response-earphone-material: 0;
  --hero-response-case-progress: 0;
  --hero-response-case-sweep: 0;
  --hero-response-case-rim: 0;
  --hero-response-case-role: 0;
  --hero-response-case-settle: 0;
  --hero-response-case-material: 0;
  --hero-response-watch-progress: 0;
  --hero-response-watch-sweep: 0;
  --hero-response-watch-rim: 0;
  --hero-response-watch-role: 0;
  --hero-response-watch-settle: 0;
  --hero-response-watch-material: 0;
  --hero-light-afterglow: 0;
  --hero-afterglow-earphone: 0;
  --hero-afterglow-case: 0;
  --hero-afterglow-watch: 0;
  --hero-device-convergence: 0;
  --hero-system-core-convergence: 0;
  --hero-base-convergence: 0;
  --hero-ambient-convergence: 0;
  --role-earphone: #48dcff;
  --role-case: #927fff;
  --role-watch: #ffd27f;
  --role-settled: #8fd9ff;
  --hero-copy-handoff: 0;
  --hero-exit: 0;
  --hero-scan-position: 36%;
  --hero-scan-opacity: 0;
  --hero-mask-edge: 0%;
  --hero-mask-edge-opacity: 0;
  min-height: 0;
  overflow: clip;
  background:
    radial-gradient(circle at 70% 47%, rgba(21, 61, 92, .22), transparent 34%),
    linear-gradient(112deg, #000308 0%, var(--hero-stage-base) 48%, #01050b 100%);
}

.dual-stage-hero::before {
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 2, 6, .76),
      transparent 31%,
      transparent 82%,
      rgba(0, 2, 6, .44)
    ),
    linear-gradient(90deg, transparent 49.92%, rgba(111, 174, 214, .05) 50%, transparent 50.08%),
    linear-gradient(180deg, transparent 49.92%, rgba(111, 174, 214, .045) 50%, transparent 50.08%);
  background-size: 100% 100%, 116px 100%, 100% 116px;
  opacity: .92;
}

.dual-stage-hero .site-header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 40;
  transform: translateX(-50%);
}

.dual-stage-track {
  position: relative;
  height: 250svh;
  min-height: 1900px;
}

.dual-stage-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 660px;
  overflow: hidden;
}

.dual-stage-layout {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(340px, .72fr) minmax(620px, 1.28fr);
  align-items: center;
  gap: clamp(18px, 2.2vw, 44px);
  padding-top: 82px;
  padding-bottom: 54px;
}

.dual-stage-copy {
  position: relative;
  z-index: 5;
  height: min(42vh, 390px);
  min-height: 310px;
  overflow: hidden;
  isolation: isolate;
}

.dual-stage-copy::after {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: var(--hero-mask-edge);
  z-index: 12;
  width: 1px;
  pointer-events: none;
  content: "";
  background: linear-gradient(
    180deg,
    transparent,
    rgba(176, 230, 255, .92) 20%,
    rgba(103, 193, 245, .78) 80%,
    transparent
  );
  box-shadow:
    0 0 12px rgba(117, 202, 249, .72),
    0 0 38px rgba(53, 143, 202, .48);
  opacity: var(--hero-mask-edge-opacity);
  transform: translateX(-50%);
}

.dual-stage-copy-panel {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  will-change: opacity, transform;
}

.dual-stage-copy-definition {
  opacity: var(--hero-definition-opacity);
  transform:
    translateY(calc(-50% + var(--hero-value-opacity) * -9px));
}

.dual-stage-copy-value {
  opacity: var(--hero-value-opacity);
  transform:
    translateY(calc(-50% + var(--hero-definition-opacity) * 10px));
}

.dual-stage-wordmark {
  margin: 0;
  color: #f6f8fb;
  font-size: clamp(53px, 4.6vw, 78px);
  font-weight: 290;
  line-height: .98;
  letter-spacing: .12em;
  white-space: nowrap;
}

.dual-stage-hero h1 {
  max-width: 590px;
  margin: clamp(20px, 2.1vw, 30px) 0 0;
  color: rgba(247, 249, 251, .96);
  font-size: clamp(29px, 2.35vw, 42px);
  font-weight: 520;
  line-height: 1.22;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.dual-stage-eyebrow {
  margin: 0 0 22px;
  color: #8ec9ed;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .2em;
}

.dual-stage-copy-value h2 {
  max-width: 590px;
  margin: 0 0 24px;
  color: #f5f8fb;
  font-size: clamp(40px, 3.65vw, 60px);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.dual-stage-copy-value > p:not(.dual-stage-eyebrow) {
  max-width: 590px;
  margin: 7px 0 0;
  color: rgba(224, 234, 242, .72);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 430;
  line-height: 1.58;
  letter-spacing: .01em;
}

.dual-stage-copy-value > p:last-child {
  color: rgba(244, 248, 251, .93);
}

.dual-stage-scene {
  position: relative;
  z-index: 2;
  width: min(100%, 1080px);
  margin: 0;
  justify-self: end;
  transform:
    translate3d(
      calc(
        var(--hero-pointer-x)
        + var(--hero-camera-x) * var(--hero-motion-scale)
      ),
      calc(
        var(--hero-pointer-y)
        + var(--hero-camera-y) * var(--hero-motion-scale)
      ),
      0
    )
    scale(
      calc(
        1
        + (var(--hero-camera-scale) - 1) * var(--hero-motion-scale)
      )
    );
  transform-origin: 57% 58%;
  will-change: transform;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 9%,
      #000 93%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 7%,
      #000 92%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 9%,
      #000 93%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 7%,
      #000 92%,
      transparent 100%
    );
  mask-composite: intersect;
}

.hero-spatial-depth-plane {
  position: absolute;
  inset: 3% 2% 1%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 49.87%,
      rgba(92, 165, 211, .14) 50%,
      transparent 50.13%
    ),
    linear-gradient(
      180deg,
      transparent 49.87%,
      rgba(92, 165, 211, .12) 50%,
      transparent 50.13%
    ),
    radial-gradient(
      ellipse 44% 16% at 50% 84%,
      rgba(80, 171, 228, .13),
      transparent 74%
    ),
    radial-gradient(
      ellipse 35% 29% at 52% 56%,
      rgba(44, 118, 171, .08),
      transparent 78%
    );
  background-size:
    104px 100%,
    100% 104px,
    100% 100%,
    100% 100%;
  -webkit-mask-image:
    radial-gradient(ellipse 68% 62% at 54% 58%, #000, transparent 79%);
  mask-image:
    radial-gradient(ellipse 68% 62% at 54% 58%, #000, transparent 79%);
  opacity:
    calc(
      .06
      var(--hero-field-response) * .17
      + var(--hero-ambient-convergence) * .12
    );
  transform:
    translate3d(
      calc(var(--hero-grid-drift) * -.45),
      calc(var(--hero-grid-drift) * .22),
      0
    )
    scale(
      calc(
        var(--hero-space-expansion)
        + var(--hero-field-response) * .018
      )
    );
  transform-origin: 52% 58%;
  filter: blur(var(--hero-depth-blur));
  mix-blend-mode: screen;
  will-change: opacity, transform, filter;
}

.dual-stage-scene::before,
.dual-stage-scene::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.dual-stage-scene::before {
  background:
    radial-gradient(
      circle at 51.5% 57%,
      rgba(1, 7, 14, .82) 0 7%,
      rgba(1, 7, 14, .5) 13%,
      transparent 27%
    );
  opacity: var(--hero-system-suppression);
}

.dual-stage-scene::after {
  background:
    radial-gradient(circle at 51.5% 57%, rgba(117, 203, 255, .16) 0 4%, rgba(42, 128, 190, .1) 12%, transparent 27%),
    radial-gradient(ellipse 30% 23% at 50% 85%, rgba(64, 157, 222, .13), transparent 74%),
    radial-gradient(circle at 52% 26%, rgba(78, 169, 225, .06), transparent 24%),
    radial-gradient(circle at 83% 50%, rgba(78, 169, 225, .055), transparent 23%);
  mix-blend-mode: screen;
  opacity: var(--hero-field-response);
  transform: scale(var(--hero-space-expansion));
  transform-origin: 52% 58%;
  will-change: opacity, transform;
}

.device-convergence-field,
.system-base-convergence,
.system-ambient-convergence {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

.device-convergence-field {
  opacity: var(--hero-device-convergence);
  transform:
    scale(
      calc(.94 + var(--hero-device-convergence) * .06)
    );
}

.device-convergence-earphone {
  background:
    radial-gradient(
      ellipse 31% 23% at 47.1% 26%,
      rgba(72, 220, 255, .16),
      rgba(72, 220, 255, .045) 42%,
      transparent 72%
    );
  transform-origin: 47.1% 26%;
}

.device-convergence-case {
  background:
    radial-gradient(
      ellipse 23% 20% at 32.7% 73.8%,
      rgba(146, 127, 255, .12),
      rgba(146, 127, 255, .035) 44%,
      transparent 74%
    );
  transform-origin: 32.7% 73.8%;
}

.device-convergence-watch {
  background:
    radial-gradient(
      ellipse 20% 31% at 79.4% 57.5%,
      rgba(255, 210, 127, .1),
      rgba(255, 210, 127, .028) 46%,
      transparent 74%
    );
  transform-origin: 79.4% 57.5%;
}

.system-base-convergence {
  background:
    radial-gradient(
      ellipse 38% 14% at 50% 84%,
      rgba(96, 187, 244, .18),
      rgba(60, 145, 205, .055) 48%,
      transparent 76%
    );
  opacity: var(--hero-base-convergence);
  transform:
    scale(
      calc(
        var(--hero-space-expansion)
        + var(--hero-space-settle) * .006
      )
    );
  transform-origin: 50% 84%;
}

.system-ambient-convergence {
  background:
    radial-gradient(
      ellipse 43% 29% at 52% 57%,
      rgba(76, 160, 216, .026),
      transparent 80%
    );
  opacity: var(--hero-ambient-convergence);
  transform: scale(var(--hero-space-expansion));
  transform-origin: 52% 57%;
}

.system-core-reference {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    radial-gradient(
      ellipse 11% 15.5% at 51.5% 57%,
      #000 0 56%,
      rgba(0, 0, 0, .96) 68%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse 11% 15.5% at 51.5% 57%,
      #000 0 56%,
      rgba(0, 0, 0, .96) 68%,
      transparent 100%
    );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: var(--hero-system-visual-reveal);
}

.system-core-reference-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .68;
  filter:
    saturate(calc(.72 + var(--hero-field-response) * .08))
    contrast(calc(.94 + var(--hero-field-response) * .025))
    brightness(calc(.84 + var(--hero-field-response) * .035));
}

.dual-stage-scene-image {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 142px);
  object-fit: contain;
  opacity: .68;
  filter:
    saturate(calc(.72 + var(--hero-field-response) * .08))
    contrast(calc(.94 + var(--hero-field-response) * .025))
    brightness(calc(.84 + var(--hero-field-response) * .035));
}

.device-material-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  color: var(--device-material-color);
  -webkit-mask-image: var(--device-material-mask);
  mask-image: var(--device-material-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: opacity;
}

.device-material-layer::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(
      ellipse 34% 30% at var(--device-material-origin),
      currentColor 0%,
      transparent 72%
    );
  opacity:
    calc(
      var(--device-material-role) * .2
      + var(--device-material-settle) * .44
    );
  mix-blend-mode: screen;
}

.device-material-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--device-material-progress);
  filter:
    blur(calc((1 - var(--device-material-progress)) * 1.2px))
    saturate(calc(.78 + var(--device-material-progress) * .3))
    contrast(calc(.93 + var(--device-material-progress) * .12))
    brightness(
      calc(
        .92
        + var(--device-material-progress) * .12
        + var(--hero-device-convergence) * .03
      )
    );
  will-change: opacity, filter;
}

.device-material-earphone {
  --device-material-progress: var(--hero-response-earphone-material);
  --device-material-role: var(--hero-response-earphone-role);
  --device-material-settle: var(--hero-response-earphone-settle);
  --device-material-color: var(--role-earphone);
  --device-material-origin: 47.1% 26%;
  --device-material-mask:
    radial-gradient(
      ellipse 37% 28% at var(--device-material-origin),
      #000 0 60%,
      rgba(0, 0, 0, .94) 70%,
      transparent 100%
    );
}

.device-material-case {
  --device-material-progress: var(--hero-response-case-material);
  --device-material-role: var(--hero-response-case-role);
  --device-material-settle: var(--hero-response-case-settle);
  --device-material-color: var(--role-case);
  --device-material-origin: 32.7% 73.8%;
  --device-material-mask:
    radial-gradient(
      ellipse 25% 24% at var(--device-material-origin),
      #000 0 55%,
      rgba(0, 0, 0, .92) 68%,
      transparent 100%
    );
}

.device-material-watch {
  --device-material-progress: var(--hero-response-watch-material);
  --device-material-role: var(--hero-response-watch-role);
  --device-material-settle: var(--hero-response-watch-settle);
  --device-material-color: var(--role-watch);
  --device-material-origin: 79.4% 57.5%;
  --device-material-mask:
    radial-gradient(
      ellipse 22% 36% at var(--device-material-origin),
      #000 0 56%,
      rgba(0, 0, 0, .92) 69%,
      transparent 100%
    );
}

.dual-stage-system-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: normal;
}

.system-pulse {
  fill: none;
  stroke: url("#systemPathStroke");
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: .105 .895;
  vector-effect: non-scaling-stroke;
  filter: url("#systemGlow");
}

.system-pulse-earphone {
  stroke-dashoffset: calc(1 - var(--hero-pulse-earphone));
  opacity: var(--hero-pulse-earphone-opacity);
}

.system-pulse-case {
  stroke-dashoffset: calc(1 - var(--hero-pulse-case));
  opacity: var(--hero-pulse-case-opacity);
}

.system-pulse-watch {
  stroke-dashoffset: calc(1 - var(--hero-pulse-watch));
  opacity: var(--hero-pulse-watch-opacity);
}

.system-signal-spark {
  fill: currentColor;
  stroke: rgba(245, 252, 255, .92);
  stroke-width: 1.2;
  filter: url("#systemGlow");
  opacity: var(--device-spark-opacity);
  transform:
    scale(
      calc(.55 + var(--device-spark-opacity) * .85)
    );
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  will-change: opacity, transform;
}

.system-signal-spark-earphone {
  --device-spark-opacity: var(--hero-spark-earphone);
  color: var(--role-earphone);
}

.system-signal-spark-case {
  --device-spark-opacity: var(--hero-spark-case);
  color: var(--role-case);
}

.system-signal-spark-watch {
  --device-spark-opacity: var(--hero-spark-watch);
  color: var(--role-watch);
}

.device-role-light {
  pointer-events: none;
  color: var(--device-role-color);
  --device-role-progress: 0;
  --device-role-sweep: 0;
  --device-rim-opacity: 0;
  --device-role-peak: 0;
  --device-settle: 0;
  --device-afterglow: 0;
}

.device-role-earphone {
  --device-role-color: var(--role-earphone);
  --device-role-progress: var(--hero-response-earphone-progress);
  --device-role-sweep: var(--hero-response-earphone-sweep);
  --device-rim-opacity: var(--hero-response-earphone-rim);
  --device-role-peak: var(--hero-response-earphone-role);
  --device-settle: var(--hero-response-earphone-settle);
  --device-afterglow: var(--hero-afterglow-earphone);
}

.device-role-case {
  --device-role-color: var(--role-case);
  --device-role-progress: var(--hero-response-case-progress);
  --device-role-sweep: var(--hero-response-case-sweep);
  --device-rim-opacity: var(--hero-response-case-rim);
  --device-role-peak: var(--hero-response-case-role);
  --device-settle: var(--hero-response-case-settle);
  --device-afterglow: var(--hero-afterglow-case);
}

.device-role-watch {
  --device-role-color: var(--role-watch);
  --device-role-progress: var(--hero-response-watch-progress);
  --device-role-sweep: var(--hero-response-watch-sweep);
  --device-rim-opacity: var(--hero-response-watch-rim);
  --device-role-peak: var(--hero-response-watch-role);
  --device-settle: var(--hero-response-watch-settle);
  --device-afterglow: var(--hero-afterglow-watch);
}

.device-role-halo,
.device-settle-halo {
  transform:
    scale(
      calc(.96 + var(--device-role-progress) * .04)
    );
  transform-box: fill-box;
  transform-origin: center;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

.device-role-halo {
  fill: currentColor;
  filter: url("#deviceRoleHaloBlur");
  opacity:
    calc(
      var(--device-role-peak) * .18
      + var(--device-afterglow) * .14
    );
}

.device-settle-halo {
  fill: var(--role-settled);
  filter: url("#deviceRoleHaloBlur");
  opacity:
    calc(
      var(--device-settle) * .8
      + var(--hero-device-convergence) * .08
    );
}

.device-rim-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: .28 .72;
  stroke-dashoffset: calc(1 - var(--device-role-sweep));
  filter: url("#deviceRoleRimGlow");
  opacity:
    calc(
      var(--device-rim-opacity) * .3
      + var(--device-afterglow) * .08
    );
  transform:
    scale(
      calc(.99 + var(--device-role-progress) * .01)
    );
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  will-change: opacity, transform;
}

.dual-stage-scan-light {
  position: absolute;
  top: 13%;
  bottom: 7%;
  left: var(--hero-scan-position);
  z-index: 3;
  width: 16%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(116, 203, 255, .025) 24%,
    rgba(156, 224, 255, .16) 49%,
    rgba(116, 203, 255, .035) 67%,
    transparent
  );
  filter: blur(9px);
  opacity: var(--hero-scan-opacity);
  transform: translateX(-50%) skewX(-8deg);
  mix-blend-mode: screen;
}

.dual-stage-beats {
  position: absolute;
  right: 0;
  bottom: 20px;
  z-index: 8;
  width: min(540px, 45vw);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 17px 0 0;
  list-style: none;
  color: rgba(196, 216, 231, .36);
  font-size: 10px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: .08em;
}

.hardware-spec-watch .metric-primary dd {
  font-size: clamp(38px, 3vw, 56px);
  overflow-wrap: normal;
  white-space: nowrap;
}

.story-result .story-result-line {
  display: block;
}

.dual-stage-beats::before {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: rgba(123, 190, 232, .18);
}

.dual-stage-beats li {
  position: relative;
  padding-top: 5px;
  text-align: center;
  transition:
    color 220ms ease,
    text-shadow 220ms ease;
}

.dual-stage-beats li::before {
  position: absolute;
  top: -17px;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(113, 190, 238, .5);
  content: "";
  background: #030a12;
  box-shadow: 0 0 0 rgba(113, 202, 255, 0);
  transform: translateX(-50%) rotate(45deg);
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.dual-stage-hero[data-hero-beat="perception"] .dual-stage-beats li:first-child,
.dual-stage-hero[data-hero-beat="connection"] .dual-stage-beats li:nth-child(-n + 2),
.dual-stage-hero[data-hero-beat="information"] .dual-stage-beats li:nth-child(-n + 3) {
  color: rgba(205, 226, 239, .58);
}

.dual-stage-hero[data-hero-beat="system"] [data-hero-beat-label="system"],
.dual-stage-hero[data-hero-beat="perception"] [data-hero-beat-label="perception"],
.dual-stage-hero[data-hero-beat="connection"] [data-hero-beat-label="connection"],
.dual-stage-hero[data-hero-beat="information"] [data-hero-beat-label="information"] {
  color: rgba(231, 246, 255, .96);
  text-shadow: 0 0 15px rgba(105, 198, 252, .42);
}

.dual-stage-hero[data-hero-beat="system"] [data-hero-beat-label="system"]::before,
.dual-stage-hero[data-hero-beat="perception"] [data-hero-beat-label="perception"]::before,
.dual-stage-hero[data-hero-beat="connection"] [data-hero-beat-label="connection"]::before,
.dual-stage-hero[data-hero-beat="information"] [data-hero-beat-label="information"]::before {
  border-color: rgba(199, 237, 255, .96);
  background: #78c8f8;
  box-shadow:
    0 0 10px rgba(111, 204, 255, .86),
    0 0 28px rgba(52, 148, 211, .46);
}

@media (max-width: 1180px) {
  .dual-stage-layout {
    grid-template-columns: minmax(310px, .7fr) minmax(520px, 1.3fr);
    gap: 8px;
  }

  .dual-stage-wordmark {
    font-size: clamp(48px, 5.1vw, 66px);
  }

  .dual-stage-hero h1 {
    font-size: clamp(27px, 2.75vw, 36px);
  }
}

@media (max-width: 900px) {
  .dual-stage-hero {
    --hero-motion-scale: .7;
  }

  .dual-stage-track {
    height: 235svh;
    min-height: 1750px;
  }

  .dual-stage-sticky {
    min-height: 620px;
  }

  .dual-stage-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 210px minmax(0, 1fr);
    align-content: center;
    gap: 0;
    padding-top: 72px;
    padding-bottom: 42px;
  }

  .dual-stage-copy {
    width: min(100%, 740px);
    height: 200px;
    min-height: 0;
    align-self: end;
  }

  .dual-stage-copy-panel {
    top: 50%;
  }

  .dual-stage-wordmark {
    font-size: clamp(45px, 9vw, 70px);
  }

  .dual-stage-hero h1 {
    max-width: 720px;
    margin-top: 16px;
    font-size: clamp(25px, 4.6vw, 35px);
  }

  .dual-stage-eyebrow {
    margin-bottom: 13px;
  }

  .dual-stage-copy-value h2 {
    max-width: 720px;
    margin-bottom: 14px;
    font-size: clamp(34px, 6.4vw, 49px);
  }

  .dual-stage-copy-value > p:not(.dual-stage-eyebrow) {
    max-width: 720px;
    margin-top: 3px;
    font-size: clamp(15px, 2.45vw, 18px);
  }

  .dual-stage-scene {
    width: min(100%, 760px);
    max-height: 50svh;
    justify-self: center;
    align-self: start;
  }

  .dual-stage-scene-image {
    max-height: 50svh;
  }

  .dual-stage-beats {
    bottom: 15px;
    width: min(430px, 62vw);
  }
}

@media (max-width: 640px) {
  .dual-stage-track {
    height: 225svh;
    min-height: 1650px;
  }

  .dual-stage-sticky {
    min-height: 600px;
  }

  .dual-stage-layout {
    grid-template-rows: 205px minmax(0, 1fr);
    padding-top: 68px;
    padding-bottom: 38px;
  }

  .dual-stage-copy {
    height: 195px;
  }

  .dual-stage-wordmark {
    font-size: clamp(38px, 12.3vw, 52px);
    letter-spacing: .08em;
  }

  .dual-stage-hero h1 {
    max-width: 350px;
    margin-top: 16px;
    font-size: clamp(24px, 7.4vw, 31px);
    line-height: 1.18;
  }

  .dual-stage-eyebrow {
    margin-bottom: 11px;
    font-size: 10px;
    letter-spacing: .13em;
  }

  .dual-stage-copy-value h2 {
    max-width: 350px;
    margin-bottom: 12px;
    font-size: clamp(31px, 9vw, 39px);
    line-height: 1.05;
  }

  .dual-stage-copy-value > p:not(.dual-stage-eyebrow) {
    max-width: 350px;
    font-size: 14px;
    line-height: 1.48;
  }

  .dual-stage-scene {
    width: calc(100% + 18px);
    max-height: 47svh;
    margin-left: -9px;
  }

  .dual-stage-scene-image {
    max-height: 47svh;
  }

  .dual-stage-beats {
    right: auto;
    bottom: 12px;
    left: 0;
    width: min(100%, 390px);
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dual-stage-hero {
    --hero-definition-opacity: 0 !important;
    --hero-value-opacity: 1 !important;
    --hero-camera-scale: 1 !important;
    --hero-camera-x: 0px !important;
    --hero-camera-y: 0px !important;
    --hero-grid-drift: 0px !important;
    --hero-depth-blur: .38px !important;
    --hero-space-expansion: 1.045 !important;
    --hero-space-settle: 1 !important;
    --hero-pointer-x: 0px !important;
    --hero-pointer-y: 0px !important;
    --hero-system-reveal: 1 !important;
    --hero-system-suppression: 0 !important;
    --hero-field-response: 1 !important;
    --hero-light-afterglow: 0 !important;
    --hero-afterglow-earphone: 0 !important;
    --hero-afterglow-case: 0 !important;
    --hero-afterglow-watch: 0 !important;
    --hero-spark-earphone: 0 !important;
    --hero-spark-case: 0 !important;
    --hero-spark-watch: 0 !important;
    --hero-device-convergence: 1 !important;
    --hero-system-core-convergence: 1 !important;
    --hero-base-convergence: 1 !important;
    --hero-ambient-convergence: 1 !important;
  }

  .dual-stage-track {
    height: auto;
    min-height: 0;
  }

  .dual-stage-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .dual-stage-layout {
    min-height: 100svh;
    grid-template-columns: minmax(320px, .72fr) minmax(580px, 1.28fr);
    padding-top: 102px;
    padding-bottom: 72px;
  }

  .dual-stage-copy {
    height: auto;
    min-height: 0;
    display: grid;
    gap: 56px;
    overflow: visible;
    transform: none;
  }

  .dual-stage-copy::after,
  .dual-stage-scan-light {
    display: none;
  }

  .system-pulse,
  .device-role-halo,
  .device-rim-path {
    display: none;
  }

  .device-material-image {
    opacity: 1;
    filter: none;
  }

  .device-material-layer::after {
    opacity: 0;
  }

  .device-settle-halo {
    opacity: .08;
  }

  .dual-stage-copy-panel {
    position: static;
    opacity: var(--hero-value-opacity);
    clip-path: none;
    transform: none;
  }

  .dual-stage-copy-definition {
    display: none;
  }

  .dual-stage-scene {
    opacity: 1;
    transform: none;
  }

  .dual-stage-beats {
    display: none;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .dual-stage-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 34px;
    padding-top: 94px;
    padding-bottom: 54px;
  }

  .dual-stage-copy {
    width: 100%;
    gap: 40px;
  }

  .dual-stage-scene,
  .dual-stage-scene-image {
    max-height: none;
  }
}