/* ============================================
   Hero Orbit Laboratory
   Feature-local styles; loaded by hero-lab.html only.
   ============================================ */

.hero-lab-page {
  background: #020504;
  color: #f4f7ef;
  overflow: hidden;
}

.hero-lab-page::selection {
  background: rgba(183, 255, 61, 0.3);
  color: #ffffff;
}

.hero-lab-skip-link {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  color: #071004;
  background: #b7ff3d;
  border-radius: var(--r-md);
  font-weight: var(--fw-bold);
  transform: translateY(-160%);
  transition: transform var(--t-fast);
}

.hero-lab-skip-link:focus {
  transform: translateY(0);
}

.hero-lab-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hero-lab {
  --hero-lab-accent: #b7ff3d;
  --hero-lab-accent-soft: rgba(183, 255, 61, 0.14);
  --hero-lab-line: rgba(183, 255, 61, 0.23);
  --hero-lab-text: #f4f7ef;
  --hero-lab-muted: #929b91;
  --hero-lab-surface: rgba(7, 13, 10, 0.72);
  --hero-lab-surface-strong: rgba(8, 15, 11, 0.92);
  --orbit-plane-tilt: 40deg;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 92px minmax(380px, 35vw) minmax(0, 1fr);
  grid-template-rows: 96px minmax(0, 1fr);
  width: 100%;
  min-height: 100svh;
  overflow: clip;
  background:
    radial-gradient(circle at 76% 43%, rgba(99, 175, 21, 0.1), transparent 34%),
    linear-gradient(118deg, #020404 0%, #030706 46%, #010302 100%);
}

.hero-lab-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-lab-backdrop::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 48%, rgba(0, 0, 0, 0.16)),
    radial-gradient(circle at center, transparent 36%, rgba(0, 0, 0, 0.44) 100%);
}

.hero-lab-cosmos {
  position: absolute;
  z-index: 0;
  inset: -8%;
  opacity: 0.34;
  background-image:
    radial-gradient(circle, rgba(207, 255, 130, 0.62) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(136, 223, 54, 0.42) 0 0.8px, transparent 1.3px),
    radial-gradient(circle, rgba(232, 255, 196, 0.24) 0 0.6px, transparent 1.1px);
  background-position:
    18px 34px,
    71px 12px,
    43px 82px;
  background-size:
    173px 149px,
    239px 211px,
    311px 277px;
  contain: paint;
  transform: translate3d(-1.5%, -1%, 0);
  animation: hero-lab-cosmos-drift 72s ease-in-out infinite alternate;
}

.hero-lab-nebula {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  contain: paint;
  transform: translate3d(0, 0, 0) scale(1);
}

.hero-lab-nebula--primary {
  top: -7%;
  right: -6%;
  width: min(84vw, 1260px);
  aspect-ratio: 1.38;
  opacity: 0.3;
  background:
    radial-gradient(ellipse at 48% 44%, rgba(142, 232, 43, 0.2) 0 8%, rgba(87, 166, 24, 0.1) 25%, rgba(28, 67, 13, 0.055) 47%, transparent 72%),
    radial-gradient(ellipse at 72% 30%, rgba(205, 255, 105, 0.09) 0 7%, rgba(107, 207, 34, 0.04) 34%, transparent 68%);
  animation: hero-lab-nebula-primary 30s ease-in-out infinite alternate;
}

.hero-lab-nebula--secondary {
  right: 24%;
  bottom: -30%;
  width: min(68vw, 1040px);
  aspect-ratio: 1.55;
  opacity: 0.2;
  background:
    radial-gradient(ellipse at 48% 50%, rgba(164, 255, 62, 0.13) 0 10%, rgba(83, 159, 24, 0.065) 31%, rgba(20, 59, 11, 0.03) 53%, transparent 74%),
    radial-gradient(ellipse at 25% 42%, rgba(180, 255, 79, 0.07), transparent 56%);
  animation: hero-lab-nebula-secondary 38s ease-in-out -11s infinite alternate;
}

.hero-lab-milky-way {
  position: absolute;
  z-index: 1;
  left: -28%;
  top: 36%;
  width: 156%;
  height: 24%;
  opacity: 0.13;
  background-image:
    radial-gradient(circle, rgba(224, 255, 190, 0.22) 0 0.7px, transparent 1.2px),
    radial-gradient(circle, rgba(139, 216, 75, 0.18) 0 0.6px, transparent 1.1px),
    radial-gradient(ellipse at 38% 54%, rgba(194, 240, 151, 0.13) 0 5%, rgba(102, 164, 61, 0.055) 25%, transparent 58%),
    linear-gradient(180deg, transparent 0, rgba(86, 139, 51, 0.04) 18%, rgba(176, 224, 132, 0.14) 46%, rgba(112, 174, 71, 0.085) 60%, rgba(58, 102, 35, 0.025) 80%, transparent 100%);
  background-position:
    17px 9px,
    63px 41px,
    20% center,
    center;
  background-size:
    97px 83px,
    151px 127px,
    66% 100%,
    100% 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  contain: paint;
  transform: translate3d(-1.5%, 0, 0) rotate(-13deg) scaleY(0.94);
  transform-origin: center;
  animation: hero-lab-milky-way-drift 128s ease-in-out -39s infinite alternate;
}

.hero-lab-planetoid {
  --planetoid-opacity-low: 0.055;
  --planetoid-opacity-high: 0.13;
  --planetoid-from-rotation: -8deg;
  --planetoid-to-rotation: 12deg;
  --planetoid-from-scale: 0.94;
  --planetoid-to-scale: 1.04;
  --planetoid-orbit-radius-x: 34%;
  --planetoid-orbit-radius-y: 22%;
  --planetoid-orbit-center-x: 50%;
  --planetoid-orbit-center-y: 50%;
  --planetoid-orbit-duration: 280s;
  --planetoid-orbit-delay: 0s;
  --planetoid-orbit-direction: normal;
  --planetoid-surface-duration: 46s;
  --planetoid-surface-delay: 0s;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--planetoid-opacity-low);
  offset-path: ellipse(
    var(--planetoid-orbit-radius-x)
    var(--planetoid-orbit-radius-y)
    at var(--planetoid-orbit-center-x)
    var(--planetoid-orbit-center-y)
  );
  offset-anchor: center;
  offset-rotate: 0deg;
  background:
    radial-gradient(circle at 34% 29%, rgba(218, 255, 145, 0.32) 0 2%, rgba(164, 224, 69, 0.1) 11%, transparent 27%),
    radial-gradient(circle at 50% 50%, rgba(1, 5, 2, 0.92) 0 14%, rgba(111, 172, 36, 0.3) 15% 38%, rgba(51, 88, 21, 0.28) 56%, rgba(5, 13, 6, 0.28) 72%, transparent 76%);
  contain: layout paint style;
  will-change: offset-distance, transform, opacity;
  animation-name:
    hero-lab-planetoid-orbit,
    hero-lab-planetoid-surface;
  animation-duration:
    var(--planetoid-orbit-duration),
    var(--planetoid-surface-duration);
  animation-timing-function:
    linear,
    ease-in-out;
  animation-delay:
    var(--planetoid-orbit-delay),
    var(--planetoid-surface-delay);
  animation-iteration-count:
    infinite,
    infinite;
  animation-direction:
    var(--planetoid-orbit-direction),
    alternate;
}

.hero-lab-planetoid::before,
.hero-lab-planetoid::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hero-lab-planetoid::before {
  inset: 18%;
  opacity: 0.56;
  background: repeating-conic-gradient(
    from 4deg,
    rgba(0, 4, 1, 0.78) 0 1.8deg,
    transparent 2.2deg 12deg
  );
  mask-image: radial-gradient(circle, transparent 0 43%, #000 47% 61%, transparent 65%);
}

.hero-lab-planetoid::after {
  inset: 6%;
  border: 1px solid rgba(190, 246, 101, 0.13);
  background: radial-gradient(circle at 37% 32%, rgba(227, 255, 180, 0.08), transparent 34%);
}

.hero-lab-planetoid--one {
  width: clamp(106px, 12vw, 176px);
  --planetoid-opacity-low: 0.045;
  --planetoid-opacity-high: 0.11;
  --planetoid-from-rotation: -16deg;
  --planetoid-to-rotation: 13deg;
  --planetoid-orbit-radius-x: 28%;
  --planetoid-orbit-radius-y: 16%;
  --planetoid-orbit-center-x: 48%;
  --planetoid-orbit-center-y: 31%;
  --planetoid-orbit-duration: 240s;
  --planetoid-orbit-delay: -83s;
  --planetoid-surface-duration: 63s;
  --planetoid-surface-delay: -18s;
}

.hero-lab-planetoid--two {
  width: clamp(72px, 8vw, 118px);
  --planetoid-opacity-low: 0.035;
  --planetoid-opacity-high: 0.085;
  --planetoid-from-rotation: 19deg;
  --planetoid-to-rotation: -11deg;
  --planetoid-from-scale: 0.9;
  --planetoid-to-scale: 1.08;
  --planetoid-orbit-radius-x: 34%;
  --planetoid-orbit-radius-y: 22%;
  --planetoid-orbit-center-x: 40%;
  --planetoid-orbit-center-y: 67%;
  --planetoid-orbit-duration: 330s;
  --planetoid-orbit-delay: -219s;
  --planetoid-orbit-direction: reverse;
  --planetoid-surface-duration: 81s;
  --planetoid-surface-delay: -52s;
}

.hero-lab-planetoid--three {
  width: clamp(138px, 16vw, 236px);
  --planetoid-opacity-low: 0.04;
  --planetoid-opacity-high: 0.095;
  --planetoid-from-rotation: -22deg;
  --planetoid-to-rotation: 9deg;
  --planetoid-from-scale: 0.96;
  --planetoid-to-scale: 1.03;
  --planetoid-orbit-radius-x: 27%;
  --planetoid-orbit-radius-y: 35%;
  --planetoid-orbit-center-x: 73%;
  --planetoid-orbit-center-y: 55%;
  --planetoid-orbit-duration: 420s;
  --planetoid-orbit-delay: -307s;
  --planetoid-surface-duration: 97s;
  --planetoid-surface-delay: -31s;
}

.hero-lab-planetoid.is-targeted {
  animation-play-state: paused;
}

.hero-lab-planetoid.is-impacted {
  will-change: offset-distance, transform, opacity, clip-path;
  animation-name:
    hero-lab-planetoid-orbit,
    hero-lab-planetoid-surface,
    hero-lab-planetoid-impact;
  animation-duration:
    var(--planetoid-orbit-duration),
    var(--planetoid-surface-duration),
    5200ms;
  animation-timing-function:
    linear,
    ease-in-out,
    cubic-bezier(0.22, 0.72, 0.24, 1);
  animation-delay:
    var(--planetoid-orbit-delay),
    var(--planetoid-surface-delay),
    0s;
  animation-iteration-count:
    infinite,
    infinite,
    1;
  animation-direction:
    var(--planetoid-orbit-direction),
    alternate,
    normal;
  animation-fill-mode:
    none,
    none,
    both;
  animation-play-state:
    paused,
    paused,
    running;
}

.hero-lab-planetoid-explosion {
  --impact-x: 50%;
  --impact-y: 50%;
  --impact-size: 220px;

  position: absolute;
  z-index: 4;
  left: var(--impact-x);
  top: var(--impact-y);
  display: block;
  width: var(--impact-size);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(249, 255, 237, 0.5) 0 2%, rgba(213, 255, 135, 0.42) 3% 5%, rgba(166, 244, 63, 0.16) 10%, transparent 31%),
    radial-gradient(circle, rgba(184, 255, 72, 0.1), transparent 62%);
  contain: layout paint style;
  transform: translate3d(-50%, -50%, 0) scale(0.08);
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-lab-planetoid-explosion::before,
.hero-lab-planetoid-explosion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
}

.hero-lab-planetoid-explosion::before {
  background: radial-gradient(
    circle,
    transparent 0 44%,
    rgba(226, 255, 178, 0.34) 44.5% 45.5%,
    rgba(163, 238, 64, 0.12) 46% 48%,
    transparent 49%
  );
}

.hero-lab-planetoid-explosion::after {
  background: repeating-conic-gradient(
    from 7deg,
    rgba(218, 255, 158, 0.38) 0 1.2deg,
    transparent 1.8deg 19deg
  );
  mask-image: radial-gradient(circle, transparent 0 36%, #000 39% 43%, transparent 47%);
}

.hero-lab-planetoid-explosion.is-active {
  animation: hero-lab-cosmic-explosion 3000ms cubic-bezier(0.16, 0.72, 0.24, 1) both;
}

.hero-lab-planetoid-explosion.is-active::before {
  animation: hero-lab-cosmic-shockwave 3000ms cubic-bezier(0.16, 0.72, 0.24, 1) both;
}

.hero-lab-planetoid-explosion.is-active::after {
  animation: hero-lab-cosmic-fragments 2600ms cubic-bezier(0.16, 0.72, 0.24, 1) both;
}

.hero-lab-grid {
  position: absolute;
  z-index: 2;
  right: -10%;
  bottom: -31%;
  width: 82%;
  height: 70%;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(183, 255, 61, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 255, 61, 0.11) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse at center, #000 5%, transparent 68%);
  transform: translate3d(-19px, -19px, 0) perspective(520px) rotateX(66deg) rotateZ(-8deg);
  transform-origin: center;
  will-change: transform;
  animation: hero-lab-grid-drift 24s linear infinite;
}

.hero-lab-particles {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.hero-lab-particle {
  position: absolute;
  left: var(--particle-left);
  top: var(--particle-top);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  opacity: 0;
  background: var(--hero-lab-accent);
  box-shadow:
    0 0 8px rgba(183, 255, 61, 0.85),
    0 0 22px rgba(183, 255, 61, 0.38);
  animation: hero-lab-particle-drift var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.hero-lab-comet-field {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  contain: layout paint style;
  pointer-events: none;
}

.hero-lab-comet {
  --comet-start-x: 85%;
  --comet-start-y: 8%;
  --comet-travel-x: -900px;
  --comet-travel-y: 560px;
  --comet-angle: 148deg;
  --comet-length: 150px;
  --comet-tail-height: 1.5px;
  --comet-head-size: 3.5px;
  --comet-scale: 1;
  --comet-end-scale: 1;
  --comet-opacity: 0.62;
  --comet-duration: 3200ms;

  position: absolute;
  left: var(--comet-start-x);
  top: var(--comet-start-y);
  width: var(--comet-length);
  height: var(--comet-tail-height);
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(157, 229, 72, 0.05) 18%,
    rgba(179, 244, 95, 0.16) 56%,
    rgba(207, 255, 139, 0.44) 88%,
    rgba(244, 255, 226, 0.76) 100%
  );
  transform-origin: right center;
  will-change: transform, opacity;
}

.hero-lab-comet::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 1px;
  top: 50%;
  height: calc(var(--comet-tail-height) * 4);
  border-radius: 999px;
  opacity: 0.52;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 226, 55, 0.025) 30%,
    rgba(183, 248, 92, 0.085) 72%,
    rgba(218, 255, 158, 0.18) 100%
  );
  transform: translateY(-50%);
}

.hero-lab-comet::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: var(--comet-head-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(239, 255, 213, 0.75);
  box-shadow:
    0 0 5px rgba(225, 255, 178, 0.5),
    0 0 12px rgba(177, 242, 75, 0.24);
  transform: translateY(-50%);
}

.hero-lab-comet.is-active {
  animation: hero-lab-comet-pass var(--comet-duration) cubic-bezier(0.2, 0.64, 0.36, 1) both;
}

.hero-lab-comet[data-depth="receding"].is-active {
  animation-name: hero-lab-comet-recede;
  animation-timing-function: cubic-bezier(0.18, 0.48, 0.38, 1);
}

.hero-lab-comet[data-depth="impact"].is-active {
  animation-name: hero-lab-comet-impact;
  animation-timing-function: linear;
}

.hero-lab-comet[data-depth="impact"]::after {
  background: radial-gradient(
    circle,
    rgba(244, 255, 225, 0.66) 0 22%,
    rgba(211, 255, 143, 0.3) 44%,
    rgba(177, 242, 75, 0.1) 62%,
    transparent 78%
  );
  box-shadow:
    0 0 4px rgba(225, 255, 178, 0.28),
    0 0 9px rgba(177, 242, 75, 0.14);
}

.hero-lab-header {
  grid-column: 2 / 4;
  grid-row: 1;
  position: relative;
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 54px);
  min-width: 0;
  padding: var(--sp-5) clamp(24px, 3vw, 54px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  transition:
    min-height 320ms ease,
    padding 320ms ease,
    background-color 320ms ease,
    border-color 320ms ease;
}

.hero-lab-header.is-scrolled {
  border-bottom-color: rgba(183, 255, 61, 0.12);
  background: rgba(3, 8, 5, 0.94);
}

.hero-lab-brand {
  display: inline-flex;
  align-items: center;
  width: 151px;
  border-radius: var(--r-sm);
}

.hero-lab-brand img {
  width: 100%;
  height: auto;
}

.hero-lab-brand:focus-visible,
.hero-lab-action:focus-visible,
.hero-lab-rail-button:focus-visible,
.hero-orbit-card:focus-visible,
.hero-lab-site-nav a:focus-visible,
.hero-lab-header-cta:focus-visible,
.hero-lab-menu-toggle:focus-visible,
.hero-lab-site-menu-nav a:focus-visible,
.hero-lab-site-menu-brand:focus-visible {
  outline: 2px solid var(--hero-lab-accent);
  outline-offset: 4px;
}

.hero-lab-site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 38px);
  min-width: 0;
}

.hero-lab-site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: #b6beb5;
  font-size: clamp(0.68rem, 0.72vw, 0.78rem);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: color 260ms ease;
}

.hero-lab-site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--hero-lab-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms ease;
}

.hero-lab-site-nav a:hover,
.hero-lab-site-nav a[aria-current="page"] {
  color: var(--hero-lab-text);
}

.hero-lab-site-nav a:hover::after,
.hero-lab-site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.hero-lab-site-nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hero-lab-accent);
  box-shadow: 0 0 10px rgba(183, 255, 61, 0.68);
  animation: hero-lab-status-pulse 2.5s ease-in-out infinite;
}

.hero-lab-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.hero-lab-theme-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.hero-lab-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-lab-language-control select {
  min-width: 52px;
  height: 40px;
  padding: 0 5px;
  border: 1px solid var(--hero-lab-line);
  border-radius: var(--r-sm);
  color: var(--hero-lab-text);
  background: var(--hero-lab-surface-strong);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.hero-lab-language-control select:focus-visible {
  outline: 2px solid var(--hero-lab-accent);
  outline-offset: 3px;
}

.hero-lab-theme-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--hero-lab-muted);
  background: transparent;
  cursor: pointer;
}

.hero-lab-theme-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-lab-theme-button:hover,
.hero-lab-theme-button.active {
  color: var(--hero-lab-accent);
  border-color: var(--hero-lab-line);
  background: var(--hero-lab-accent-soft);
}

.hero-lab-theme-button:focus-visible {
  outline: 2px solid var(--hero-lab-accent);
  outline-offset: 3px;
}

.hero-lab-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 174px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(183, 255, 61, 0.84);
  border-radius: var(--r-md);
  color: #071004;
  background: var(--hero-lab-accent);
  font-size: 0.73rem;
  font-weight: var(--fw-bold);
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    transform 260ms ease;
}

.hero-lab-header-cta:hover {
  border-color: #d3ff84;
  background: #c4ff60;
  transform: translateY(-2px);
}

.hero-lab-header-cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.hero-lab-menu-toggle {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--hero-lab-text);
  background: rgba(6, 12, 8, 0.72);
  transition:
    color 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    transform 260ms ease;
}

.hero-lab-menu-toggle:hover {
  border-color: rgba(183, 255, 61, 0.58);
  color: var(--hero-lab-accent);
  background: rgba(12, 23, 15, 0.9);
  transform: rotate(4deg);
}

.hero-lab-menu-icon,
.hero-lab-menu-icon::before,
.hero-lab-menu-icon::after {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition:
    transform 280ms ease,
    opacity 220ms ease;
}

.hero-lab-menu-icon {
  position: relative;
  display: block;
}

.hero-lab-menu-icon::before,
.hero-lab-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.hero-lab-menu-icon::before {
  transform: translateY(-5px);
}

.hero-lab-menu-icon::after {
  transform: translateY(5px);
}

.hero-lab-menu-toggle--close {
  display: grid;
}

.hero-lab-menu-toggle--close .hero-lab-menu-icon {
  background: transparent;
}

.hero-lab-menu-toggle--close .hero-lab-menu-icon::before {
  transform: rotate(45deg);
}

.hero-lab-menu-toggle--close .hero-lab-menu-icon::after {
  transform: rotate(-45deg);
}

.hero-lab-site-menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--hero-lab-text);
  background:
    radial-gradient(circle at 16% 16%, rgba(125, 214, 35, 0.12), transparent 28%),
    radial-gradient(circle at 88% 74%, rgba(73, 139, 20, 0.1), transparent 34%),
    #020504;
  overflow: auto;
}

.hero-lab-site-menu::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

.hero-lab-site-menu[open] {
  animation: hero-lab-menu-enter 420ms cubic-bezier(0.2, 0.72, 0.28, 1) both;
}

.hero-lab-site-menu-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-height: 100svh;
}

.hero-lab-site-menu-header,
.hero-lab-site-menu-content,
.hero-lab-site-menu-footer {
  width: min(100%, 1460px);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 78px);
}

.hero-lab-site-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 94px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.hero-lab-site-menu-brand {
  display: inline-flex;
  width: 151px;
  border-radius: var(--r-sm);
}

.hero-lab-site-menu-brand img {
  width: 100%;
  height: auto;
}

.hero-lab-site-menu-content {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(480px, 1.28fr);
  align-items: center;
  gap: clamp(56px, 9vw, 150px);
  padding-block: clamp(38px, 6vh, 82px);
}

.hero-lab-site-menu-intro {
  max-width: 420px;
}

.hero-lab-site-menu-kicker {
  margin-bottom: 22px;
  color: var(--hero-lab-accent);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-lab-site-menu-intro h2 {
  max-width: 380px;
  margin: 0;
  font-size: clamp(2.4rem, 4.4vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.hero-lab-site-menu-intro > p:not(.hero-lab-site-menu-kicker) {
  max-width: 360px;
  margin-top: 24px;
  color: var(--hero-lab-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.hero-lab-site-menu-intro .hero-lab-meta {
  justify-self: initial;
  margin-top: 40px;
}

.hero-lab-site-menu-nav {
  display: grid;
}

.hero-lab-site-menu-nav a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 18px;
  min-height: 88px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #c8cec7;
  transition:
    color 280ms ease,
    border-color 280ms ease,
    padding 280ms ease;
}

.hero-lab-site-menu-nav a:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.hero-lab-site-menu-nav a:hover,
.hero-lab-site-menu-nav a[aria-current="page"] {
  padding-inline: 12px;
  border-color: rgba(183, 255, 61, 0.34);
  color: var(--hero-lab-text);
}

.hero-lab-site-menu-index {
  color: #697169;
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
}

.hero-lab-site-menu-nav strong,
.hero-lab-site-menu-nav small {
  display: block;
}

.hero-lab-site-menu-nav strong {
  font-size: clamp(1.12rem, 1.7vw, 1.55rem);
  font-weight: var(--fw-semibold);
}

.hero-lab-site-menu-nav small {
  margin-top: 5px;
  color: #727b72;
  font-size: 0.72rem;
}

.hero-lab-site-menu-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 280ms ease;
}

.hero-lab-site-menu-nav a:hover svg,
.hero-lab-site-menu-nav a[aria-current="page"] svg {
  color: var(--hero-lab-accent);
  transform: translateX(5px);
}

.hero-lab-site-menu-nav a[aria-current="page"] .hero-lab-site-menu-index {
  color: var(--hero-lab-accent);
}

.hero-lab-site-menu-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  min-height: 92px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.hero-lab-site-menu-footer p {
  color: #858e85;
  font-size: 0.78rem;
}

.hero-lab-page.is-site-menu-open {
  overflow: hidden;
}

.hero-lab-meta {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: var(--sp-3);
  color: #788178;
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
}

.hero-lab-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-lab-accent);
  box-shadow: 0 0 13px rgba(183, 255, 61, 0.8);
  animation: hero-lab-status-pulse 2.5s ease-in-out infinite;
}

.hero-lab-meta-separator {
  width: 26px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.hero-lab-rail {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  border-right: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(2, 5, 4, 0.5);
  backdrop-filter: blur(16px);
}

.hero-lab-rail-label {
  position: absolute;
  top: 30px;
  color: #5f685f;
  font-size: 0.58rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hero-lab-rail-track {
  --active-slide-index: 0;
  --rail-slide-count: 5;
  --rail-sync-duration: 760ms;
  --rail-comet-duration: var(--rail-sync-duration);
  --rail-sync-easing: cubic-bezier(0.22, 0.72, 0.24, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.hero-lab-rail-button {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 108px;
  place-items: center;
  min-width: 44px;
  min-height: 108px;
  color: #697169;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  transition: color var(--rail-sync-duration) var(--rail-sync-easing);
}

.hero-lab-rail-button::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(183, 255, 61, 0.82));
  box-shadow: 0 0 6px rgba(183, 255, 61, 0.42);
  transform: translateY(-50%);
  transition: width var(--rail-sync-duration) var(--rail-sync-easing);
}

.hero-lab-rail-button:hover {
  color: #cbd2c9;
}

.hero-lab-rail-button.is-active {
  color: var(--hero-lab-accent);
}

.hero-lab-rail-button.is-active::after {
  width: 28px;
}

.hero-lab-rail-progress {
  position: absolute;
  z-index: 0;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  overflow: visible;
  background: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.hero-lab-rail-progress-fill {
  position: relative;
  display: block;
  width: 100%;
  height: calc(100% / var(--rail-slide-count));
  background: transparent;
  transform: translate3d(0, calc(var(--active-slide-index) * 100%), 0);
  transition: transform var(--rail-sync-duration) var(--rail-sync-easing);
  will-change: transform;
}

.hero-lab-rail-progress-fill::before,
.hero-lab-rail-progress-fill::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-lab-rail-progress-fill::before {
  top: 50%;
  bottom: auto;
  left: -0.5px;
  width: 2px;
  height: 32px;
  border-radius: var(--r-full);
  background: linear-gradient(
    180deg,
    rgba(183, 255, 61, 0.04),
    rgba(183, 255, 61, 0.56) 28%,
    rgba(207, 255, 121, 0.94) 50%,
    rgba(183, 255, 61, 0.56) 72%,
    rgba(183, 255, 61, 0.04)
  );
  box-shadow:
    0 0 4px rgba(183, 255, 61, 0.5),
    0 0 8px rgba(183, 255, 61, 0.16);
  transform: translateY(-50%);
  will-change: transform, opacity;
}

.hero-lab-rail-progress-fill::after {
  left: 50%;
  top: 50%;
  width: 8px;
  height: 52px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(183, 255, 61, 0.42),
    rgba(183, 255, 61, 0.16) 42%,
    transparent 74%
  );
  filter: blur(2.4px);
  transform: translate3d(-50%, -50%, 0) scaleY(0.72);
  will-change: transform, opacity;
}

.hero-lab-rail-track.is-rail-moving .hero-lab-rail-progress-fill::before {
  animation: hero-lab-rail-core-travel var(--rail-comet-duration) linear both;
}

.hero-lab-rail-track.is-rail-moving[data-rail-direction="forward"] .hero-lab-rail-progress-fill::after {
  top: auto;
  bottom: 50%;
  width: 10px;
  height: 104px;
  border-radius: 50% 50% 28% 28%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(183, 255, 61, 0.04) 20%,
    rgba(183, 255, 61, 0.18) 68%,
    rgba(215, 255, 137, 0.58)
  );
  transform-origin: 50% 100%;
  animation: hero-lab-rail-halo-forward var(--rail-comet-duration) linear both;
}

.hero-lab-rail-track.is-rail-moving[data-rail-direction="backward"] .hero-lab-rail-progress-fill::after {
  top: 50%;
  bottom: auto;
  width: 10px;
  height: 104px;
  border-radius: 28% 28% 50% 50%;
  background: linear-gradient(
    180deg,
    rgba(215, 255, 137, 0.58),
    rgba(183, 255, 61, 0.18) 32%,
    rgba(183, 255, 61, 0.04) 80%,
    transparent
  );
  transform-origin: 50% 0;
  animation: hero-lab-rail-halo-backward var(--rail-comet-duration) linear both;
}

@keyframes hero-lab-rail-core-travel {
  0%,
  100% {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
  }

  12.5%,
  87.5% {
    opacity: 0.99;
    transform: translateY(-50%) scaleY(0.94);
  }

  25%,
  75% {
    opacity: 0.97;
    transform: translateY(-50%) scaleY(0.77);
  }

  37.5%,
  62.5% {
    opacity: 0.95;
    transform: translateY(-50%) scaleY(0.51);
  }

  50% {
    opacity: 0.94;
    transform: translateY(-50%) scaleY(0.2);
  }
}

@keyframes hero-lab-rail-halo-forward {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scaleY(0.06);
  }

  12.5%,
  87.5% {
    opacity: 0.16;
    transform: translate3d(-50%, 0, 0) scaleY(0.38);
  }

  25%,
  75% {
    opacity: 0.34;
    transform: translate3d(-50%, 0, 0) scaleY(0.7);
  }

  37.5%,
  62.5% {
    opacity: 0.48;
    transform: translate3d(-50%, 0, 0) scaleY(0.92);
  }

  50% {
    opacity: 0.54;
    transform: translate3d(-50%, 0, 0) scaleY(1);
  }
}

@keyframes hero-lab-rail-halo-backward {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scaleY(0.06);
  }

  12.5%,
  87.5% {
    opacity: 0.16;
    transform: translate3d(-50%, 0, 0) scaleY(0.38);
  }

  25%,
  75% {
    opacity: 0.34;
    transform: translate3d(-50%, 0, 0) scaleY(0.7);
  }

  37.5%,
  62.5% {
    opacity: 0.48;
    transform: translate3d(-50%, 0, 0) scaleY(0.92);
  }

  50% {
    opacity: 0.54;
    transform: translate3d(-50%, 0, 0) scaleY(1);
  }
}

.hero-lab-copy {
  grid-column: 2;
  grid-row: 2;
  z-index: 10;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: clamp(34px, 4vh, 68px) clamp(30px, 3vw, 58px);
}

.hero-lab-copy-shell {
  width: min(100%, 650px);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.hero-lab-copy-panel {
  align-self: center;
  width: 100%;
  transition:
    opacity 240ms ease,
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-lab-copy-panel.is-leaving {
  opacity: 0;
  transform: translateY(-22px);
}

.hero-lab-copy-panel.is-entering {
  opacity: 0;
  transform: translateY(26px);
  transition: none;
}

.hero-lab-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: clamp(18px, 2.4vh, 30px);
  color: var(--hero-lab-accent);
  font-size: clamp(0.66rem, 0.8vw, 0.78rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
}

.hero-lab-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(183, 255, 61, 0.7);
}

.hero-lab-title {
  max-width: 700px;
  margin: 0;
  color: var(--hero-lab-text);
  font-size: clamp(2.7rem, 4.15vw, 5rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-wrap: balance;
}

.hero-lab-title span,
.hero-lab-title strong {
  display: block;
}

.hero-lab-title strong {
  color: var(--hero-lab-accent);
  font-weight: inherit;
  text-shadow: 0 0 34px rgba(183, 255, 61, 0.12);
}

.hero-lab-title span:empty {
  display: none;
}

.hero-lab-description {
  max-width: 570px;
  margin-top: clamp(20px, 2.7vh, 34px);
  color: #a7afa5;
  font-size: clamp(0.94rem, 1.08vw, 1.08rem);
  line-height: 1.75;
}

.hero-lab-value-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(24px, 3.4vh, 42px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
}

.hero-lab-value-item {
  min-width: 0;
  min-height: 104px;
  padding: 15px 14px;
  background: rgba(4, 9, 6, 0.9);
}

.hero-lab-value-index {
  display: block;
  margin-bottom: 12px;
  color: var(--hero-lab-accent);
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
}

.hero-lab-value-item strong,
.hero-lab-value-item small {
  display: block;
}

.hero-lab-value-item strong {
  overflow: hidden;
  color: #e8ece6;
  font-size: clamp(0.7rem, 0.83vw, 0.82rem);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  text-overflow: ellipsis;
}

.hero-lab-value-item small {
  margin-top: 5px;
  color: #697169;
  font-size: clamp(0.59rem, 0.7vw, 0.69rem);
  line-height: 1.45;
}

.hero-lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(25px, 3.6vh, 44px);
}

.hero-lab-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  transition:
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.hero-lab-action svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-lab-action--primary {
  justify-content: space-between;
  width: 243px;
  color: #071004;
  border-color: var(--hero-lab-accent);
  background: var(--hero-lab-accent);
  box-shadow: 0 12px 36px rgba(142, 224, 36, 0.15);
}

.hero-lab-action--primary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-lab-action--primary:hover {
  box-shadow: 0 15px 42px rgba(142, 224, 36, 0.25);
  transform: translateY(-2px);
}

.hero-lab-action--ghost {
  width: 52px;
  padding: 0;
  color: #c1c8be;
  background: rgba(7, 12, 9, 0.54);
}

.hero-lab-action--ghost:hover {
  color: #ffffff;
  border-color: rgba(183, 255, 61, 0.34);
  background: rgba(183, 255, 61, 0.06);
}

.hero-lab-action:disabled {
  cursor: default;
  opacity: 0.58;
}

.hero-lab-input-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #555d55;
  font-size: 0.68rem;
}

.hero-lab-input-hint span {
  color: #838c82;
  letter-spacing: 0.1em;
}

.hero-lab-stage {
  grid-column: 3;
  grid-row: 2;
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.hero-lab-stage::before {
  content: "";
  position: absolute;
  left: 4%;
  top: 7%;
  width: 1px;
  height: 86%;
  background: linear-gradient(transparent, rgba(183, 255, 61, 0.12), transparent);
}

.hero-lab-stage-glow {
  position: absolute;
  left: 51%;
  top: 51%;
  width: min(62vw, 830px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(141, 244, 29, 0.17) 0%, rgba(76, 158, 14, 0.08) 28%, transparent 66%);
  transform: translate(-50%, -50%);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: hero-lab-stage-glow 5.5s ease-in-out infinite;
}

.hero-orbit-system {
  --stage-pointer-x: 0px;
  --stage-pointer-y: 0px;

  position: relative;
  width: min(96%, 980px);
  height: min(78vh, 760px);
  min-height: 520px;
  transform: translate3d(var(--stage-pointer-x), var(--stage-pointer-y), 0);
  will-change: transform;
}

.hero-orbit-ring {
  position: absolute;
  left: 50%;
  top: 52%;
  border-radius: 50%;
  pointer-events: none;
}

.hero-orbit-navigation-plane {
  position: absolute;
  z-index: 3;
  inset: 0;
  transform: rotate(var(--orbit-plane-tilt));
  transform-origin: 50% 52%;
  pointer-events: none;
}

.hero-orbit-ring--navigation {
  width: var(--orbit-ring-width, 78%);
  height: var(--orbit-ring-height, 50%);
  border: 1px solid rgba(183, 255, 61, 0.26);
  box-shadow:
    inset 0 0 24px rgba(183, 255, 61, 0.025),
    0 0 24px rgba(183, 255, 61, 0.02);
  transform: translate(-50%, -50%);
  transition:
    border-color 700ms ease,
    box-shadow 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-orbit-ring--navigation::before,
.hero-orbit-ring--navigation::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hero-orbit-ring--navigation::before {
  inset: -7px;
  border: 1px dashed rgba(183, 255, 61, 0.09);
  animation: hero-lab-ring-spin 28s linear infinite;
}

.hero-orbit-ring--navigation::after {
  inset: 18%;
  border: 1px dotted rgba(183, 255, 61, 0.09);
  animation: hero-lab-ring-spin 34s linear reverse infinite;
}

.hero-orbit-ring--cross {
  width: 72%;
  height: 20%;
  border: 1px solid rgba(183, 255, 61, 0.24);
  box-shadow: 0 0 14px rgba(183, 255, 61, 0.08);
  transform: translate(-50%, -50%) rotate(-34deg);
  animation: hero-lab-cross-ring 13s ease-in-out infinite alternate;
}

.hero-orbit-ring--halo {
  width: 56%;
  height: 20%;
  border: 1px solid rgba(209, 255, 129, 0.16);
  box-shadow:
    inset 0 0 12px rgba(183, 255, 61, 0.025),
    0 0 12px rgba(183, 255, 61, 0.055);
  transform: translate(-50%, -50%) rotate(62deg);
  animation: hero-lab-halo-ring 16s ease-in-out infinite alternate;
}

.hero-orbit-satellite {
  --satellite-size: 5px;
  --satellite-orbit-duration: 24s;
  --satellite-orbit-delay: 0s;
  --satellite-orbit-direction: normal;
  --satellite-pulse-duration: 7.2s;
  --satellite-pulse-delay: 0s;
  --satellite-min-opacity: 0.14;
  --satellite-max-opacity: 0.48;
  --satellite-min-scale: 0.72;
  --satellite-max-scale: 1.32;

  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: var(--satellite-size);
  height: var(--satellite-size);
  border-radius: 50%;
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-rotate: 0deg;
  background: rgba(217, 255, 131, 0.82);
  box-shadow:
    0 0 5px rgba(217, 255, 131, 0.48),
    0 0 12px rgba(183, 255, 61, 0.18);
  will-change: offset-distance, transform, opacity;
  animation-name:
    hero-lab-satellite-orbit,
    hero-lab-satellite-pulse;
  animation-duration:
    var(--satellite-orbit-duration),
    var(--satellite-pulse-duration);
  animation-timing-function:
    linear,
    ease-in-out;
  animation-delay:
    var(--satellite-orbit-delay),
    var(--satellite-pulse-delay);
  animation-iteration-count:
    infinite,
    infinite;
  animation-direction:
    var(--satellite-orbit-direction),
    alternate;
}

.hero-orbit-ring--cross .hero-orbit-satellite:nth-child(1) {
  --satellite-size: 4px;
  --satellite-orbit-duration: 43s;
  --satellite-orbit-delay: -17s;
  --satellite-pulse-duration: 6.8s;
}

.hero-orbit-ring--cross .hero-orbit-satellite:nth-child(2) {
  --satellite-size: 8px;
  --satellite-orbit-duration: 61s;
  --satellite-orbit-delay: -39s;
  --satellite-orbit-direction: reverse;
  --satellite-pulse-duration: 9.3s;
  --satellite-pulse-delay: -3.1s;
  --satellite-min-opacity: 0.11;
  --satellite-max-opacity: 0.36;
}

.hero-orbit-ring--cross .hero-orbit-satellite:nth-child(3) {
  --satellite-size: 3px;
  --satellite-orbit-duration: 52s;
  --satellite-orbit-delay: -29s;
  --satellite-pulse-duration: 7.7s;
  --satellite-pulse-delay: -4.6s;
  --satellite-min-opacity: 0.16;
  --satellite-max-opacity: 0.42;
  --satellite-max-scale: 1.58;
}

.hero-orbit-ring--cross .hero-orbit-satellite:nth-child(4) {
  --satellite-size: 11px;
  --satellite-orbit-duration: 79s;
  --satellite-orbit-delay: -57s;
  --satellite-orbit-direction: reverse;
  --satellite-pulse-duration: 11.4s;
  --satellite-pulse-delay: -1.8s;
  --satellite-min-opacity: 0.08;
  --satellite-max-opacity: 0.29;
  --satellite-min-scale: 0.64;
  --satellite-max-scale: 1.18;
}

.hero-orbit-ring--halo .hero-orbit-satellite:nth-child(1) {
  --satellite-size: 5px;
  --satellite-orbit-duration: 37s;
  --satellite-orbit-delay: -11s;
  --satellite-orbit-direction: reverse;
  --satellite-pulse-duration: 6.1s;
  --satellite-min-opacity: 0.13;
  --satellite-max-opacity: 0.44;
}

.hero-orbit-ring--halo .hero-orbit-satellite:nth-child(2) {
  --satellite-size: 9px;
  --satellite-orbit-duration: 67s;
  --satellite-orbit-delay: -48s;
  --satellite-pulse-duration: 10.2s;
  --satellite-pulse-delay: -5.7s;
  --satellite-min-opacity: 0.09;
  --satellite-max-opacity: 0.33;
}

.hero-orbit-ring--halo .hero-orbit-satellite:nth-child(3) {
  --satellite-size: 3px;
  --satellite-orbit-duration: 47s;
  --satellite-orbit-delay: -34s;
  --satellite-orbit-direction: reverse;
  --satellite-pulse-duration: 5.6s;
  --satellite-pulse-delay: -2.4s;
  --satellite-min-opacity: 0.15;
  --satellite-max-opacity: 0.4;
  --satellite-max-scale: 1.7;
}

.hero-orbit-ring--halo .hero-orbit-satellite:nth-child(4) {
  --satellite-size: 7px;
  --satellite-orbit-duration: 73s;
  --satellite-orbit-delay: -23s;
  --satellite-pulse-duration: 12.1s;
  --satellite-pulse-delay: -7.3s;
  --satellite-min-opacity: 0.07;
  --satellite-max-opacity: 0.27;
  --satellite-min-scale: 0.68;
  --satellite-max-scale: 1.24;
}

.hero-orbit-energy {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  offset-path: ellipse(
    var(--orbit-radius-x, 39%)
    var(--orbit-radius-y, 25%)
    at 50% 52%
  );
  offset-rotate: 0deg;
  background: #d9ff83;
  box-shadow:
    0 0 6px #d9ff83,
    0 0 19px rgba(183, 255, 61, 0.85),
    0 0 42px rgba(183, 255, 61, 0.5);
  animation: hero-lab-energy-orbit 9s linear infinite;
}

.hero-orbit-energy--two {
  width: 4px;
  height: 4px;
  opacity: 0.72;
  animation-duration: 14s;
  animation-delay: -8s;
}

.hero-orbit-energy--one {
  --slide-progress-distance: 75%;

  offset-distance: var(--slide-progress-distance);
  animation: none;
}

.hero-orbit-energy--three {
  width: 10px;
  height: 10px;
  opacity: 0.42;
  animation-duration: 19s;
  animation-delay: -3s;
}

.hero-lab-kiwi {
  --kiwi-pointer-x: 0px;
  --kiwi-pointer-y: 0px;

  position: absolute;
  z-index: 5;
  left: 50%;
  top: 52%;
  width: min(66%, 670px);
  transform:
    translate3d(calc(-50% + var(--kiwi-pointer-x)), calc(-50% + var(--kiwi-pointer-y)), 0);
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}

.hero-lab-kiwi-float {
  position: relative;
  width: 100%;
  will-change: transform;
  animation: hero-lab-kiwi-float 6s ease-in-out infinite;
}

.hero-lab-kiwi-tilt {
  --kiwi-roll: 0deg;
  --kiwi-reaction-y: 0px;
  --kiwi-reaction-scale: 1;

  position: relative;
  width: 100%;
  transform:
    translate3d(0, var(--kiwi-reaction-y), 0)
    rotate(var(--kiwi-roll))
    scale(var(--kiwi-reaction-scale));
  transform-origin: center;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hero-lab-kiwi-tilt::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2% 6% 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(145, 243, 31, 0.17) 0 22%, rgba(94, 188, 24, 0.07) 48%, transparent 72%);
  transform: scale(0.96);
  animation: hero-lab-kiwi-aura 4.4s ease-in-out infinite;
}

.hero-lab-kiwi-aura {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 52%;
  width: 78%;
  height: 68%;
  border: 1px solid rgba(183, 255, 61, 0.19);
  border-radius: 50%;
  box-shadow:
    0 0 32px rgba(183, 255, 61, 0.1),
    inset 0 0 42px rgba(183, 255, 61, 0.05);
  transform: translate(-50%, -50%);
  animation: hero-lab-aura-ring 3.8s ease-out infinite;
}

.hero-lab-kiwi-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter:
    saturate(1.18)
    contrast(1.08)
    brightness(0.94)
    drop-shadow(0 23px 28px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 19px rgba(170, 255, 48, 0.24));
}

.hero-lab-kiwi-scan {
  position: absolute;
  z-index: 3;
  left: 14%;
  right: 14%;
  top: 16%;
  height: 20%;
  border-radius: 50%;
  opacity: 0.45;
  background: linear-gradient(180deg, transparent, rgba(223, 255, 175, 0.21), transparent);
  mix-blend-mode: screen;
  transform: rotate(-7deg);
  animation: hero-lab-kiwi-scan 4.8s ease-in-out infinite;
}

.hero-orbit-items {
  position: absolute;
  /* No stacking context: cards must straddle the kiwi's layer. */
  z-index: auto;
  inset: 0;
  pointer-events: none;
}

.hero-orbit-card {
  --slide-progress: 0;
  --orbit-x: 0px;
  --orbit-y: 0px;
  --orbit-scale: 0.86;
  --orbit-opacity: 0;
  --orbit-focus: 0;
  --orbit-card-radius: 14px;
  --orbit-card-padding: 12px 15px 12px 12px;
  --glass-pitch: 0deg;
  --glass-yaw: 0deg;
  --glass-light-x: 30%;
  --glass-light-y: 15%;

  position: absolute;
  left: 50%;
  top: 52%;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  width: clamp(168px, 14.2vw, 224px);
  min-height: 76px;
  padding: 0;
  color: #f3f6ef;
  text-align: left;
  border: 0;
  border-radius: var(--orbit-card-radius);
  opacity: 0;
  background: none;
  transform:
    translate3d(calc(-50% + var(--orbit-x)), calc(-50% + var(--orbit-y)), 0)
    scale(var(--orbit-scale));
  transform-origin: center;
  transition:
    opacity 560ms ease,
    color 420ms ease,
    border-color 260ms ease;
  pointer-events: auto;
  will-change: transform;
}

/* Keep orbit anchors/hit targets flat; only the glass face turns in depth. */
.hero-orbit-card-surface {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  align-items: center;
  justify-items: inherit;
  gap: inherit;
  min-width: 0;
  min-height: inherit;
  padding: var(--orbit-card-padding);
  border: 1px solid rgba(190, 230, 157, 0.34);
  border-right-color: rgba(145, 198, 116, 0.17);
  border-bottom-color: rgba(145, 198, 116, 0.2);
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(174, 217, 143, 0.16), rgba(131, 183, 109, 0.05) 48%, rgba(155, 207, 121, 0.1)),
    rgba(10, 28, 15, 0.66);
  box-shadow:
    inset 1px 1px 1px rgba(199, 234, 167, 0.17),
    inset -1px -1px 1px rgba(161, 210, 125, 0.08),
    2px 3px 0 rgba(112, 164, 93, 0.12),
    0 16px 30px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  transform: perspective(650px) rotateX(var(--glass-pitch)) rotateY(var(--glass-yaw));
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.hero-lab.is-ready .hero-orbit-card {
  opacity: var(--orbit-opacity);
}

.hero-lab.is-switching .hero-orbit-ring--navigation {
  border-color: rgba(183, 255, 61, 0.62);
  box-shadow:
    inset 0 0 34px rgba(183, 255, 61, 0.05),
    0 0 34px rgba(183, 255, 61, 0.1);
}

.hero-lab.is-switching .hero-lab-stage-glow {
  opacity: 1;
}

.hero-orbit-card-surface::before,
.hero-orbit-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-orbit-card-surface::before {
  z-index: 0;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at var(--glass-light-x) var(--glass-light-y), rgba(188, 229, 150, 0.16), transparent 66%),
    linear-gradient(116deg, transparent 18%, rgba(206, 237, 179, 0.045) 39%, transparent 41%);
  opacity: calc(0.5 + var(--orbit-focus) * 0.5);
}

.hero-orbit-card::after {
  z-index: 3;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--hero-lab-accent), transparent);
  transform: scaleX(var(--slide-progress));
  transform-origin: left center;
  transition:
    opacity 520ms ease,
    transform 180ms linear;
}

.hero-orbit-card:hover {
  color: #ffffff;
}

.hero-orbit-card:hover .hero-orbit-card-surface,
.hero-orbit-card:focus-visible .hero-orbit-card-surface,
.hero-orbit-card.is-active .hero-orbit-card-surface {
  border-color: rgba(195, 235, 152, 0.54);
  box-shadow:
    inset 1px 1px 1px rgba(203, 237, 169, 0.23),
    inset -1px -1px 1px rgba(166, 217, 126, 0.11),
    2px 3px 0 rgba(112, 164, 93, 0.16),
    0 18px 36px rgba(0, 0, 0, 0.3);
}

.hero-orbit-card.is-active {
  color: #ffffff;
}

.hero-orbit-card.is-active::after {
  opacity: 1;
}

.hero-orbit-card-ports {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.hero-orbit-card-ports::before,
.hero-orbit-card-ports::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  opacity: 0.84;
  background: var(--hero-lab-accent);
  box-shadow:
    0 0 8px rgba(183, 255, 61, 0.82),
    0 0 18px rgba(183, 255, 61, 0.42);
}

.hero-orbit-card-ports::before {
  transform: translate3d(
    calc(-50% + var(--orbit-port-start-x, -50%)),
    calc(-50% + var(--orbit-port-start-y, 0px)),
    0
  );
}

.hero-orbit-card-ports::after {
  transform: translate3d(
    calc(-50% + var(--orbit-port-end-x, 50%)),
    calc(-50% + var(--orbit-port-end-y, 0px)),
    0
  );
}

.hero-orbit-card-index {
  position: relative;
  z-index: 1;
  align-self: start;
  color: #c5e5a5;
  font-size: 0.55rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.hero-orbit-card-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--hero-lab-accent);
  border: 0;
  border-radius: 10px;
  background: none;
}

.hero-orbit-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-orbit-card-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hero-orbit-card-copy strong,
.hero-orbit-card-copy small {
  display: block;
}

.hero-orbit-card-copy strong {
  font-size: clamp(0.72rem, 0.88vw, 0.87rem);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

.hero-orbit-card-copy small {
  margin-top: 4px;
  overflow: hidden;
  color: #c7d2c1;
  font-size: clamp(0.57rem, 0.65vw, 0.66rem);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-lab-stage-caption {
  position: absolute;
  right: clamp(20px, 3vw, 54px);
  bottom: 27px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5f675f;
  font-size: 0.66rem;
}

.hero-lab-stage-caption-mark {
  position: relative;
  width: 20px;
  height: 30px;
  border: 1px solid #768075;
  border-radius: 10px;
}

.hero-lab-stage-caption-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: var(--hero-lab-accent);
  transform: translateX(-50%);
  animation: hero-lab-scroll-hint 1.8s ease-in-out infinite;
}

.hero-lab-stage-caption-separator {
  width: 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.hero-lab-live-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-lab-noscript {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: var(--sp-5);
  max-width: calc(100vw - 32px);
  padding: var(--sp-3) var(--sp-4);
  color: #071004;
  border-radius: var(--r-md);
  background: var(--hero-lab-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transform: translateX(-50%);
}

.hero-lab.is-paused *,
.hero-lab.is-paused *::before,
.hero-lab.is-paused *::after {
  animation-play-state: paused;
}

.hero-lab.is-paused .hero-lab-site-menu[open] {
  animation: none;
  opacity: 1;
  transform: none;
}

.hero-lab.is-stage-offscreen .hero-lab-stage *,
.hero-lab.is-stage-offscreen .hero-lab-stage *::before,
.hero-lab.is-stage-offscreen .hero-lab-stage *::after {
  animation-play-state: paused;
}

@keyframes hero-lab-grid-drift {
  from {
    transform: translate3d(-19px, -19px, 0) perspective(520px) rotateX(66deg) rotateZ(-8deg);
  }
  to {
    transform: translate3d(19px, 19px, 0) perspective(520px) rotateX(66deg) rotateZ(-8deg);
  }
}

@keyframes hero-lab-cosmos-drift {
  0% { opacity: 0.26; transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { opacity: 0.38; transform: translate3d(1.5%, 1%, 0) scale(1.025); }
}

@keyframes hero-lab-nebula-primary {
  0% { opacity: 0.24; transform: translate3d(-2%, -1%, 0) scale(0.97); }
  100% { opacity: 0.34; transform: translate3d(2.5%, 1.5%, 0) scale(1.035); }
}

@keyframes hero-lab-nebula-secondary {
  0% { opacity: 0.15; transform: translate3d(2%, 1%, 0) scale(0.96); }
  100% { opacity: 0.24; transform: translate3d(-2.5%, -1.5%, 0) scale(1.045); }
}

@keyframes hero-lab-milky-way-drift {
  0% {
    opacity: 0.09;
    transform: translate3d(-1.5%, 0, 0) rotate(-13deg) scaleY(0.94);
  }
  100% {
    opacity: 0.155;
    transform: translate3d(1.5%, -2%, 0) rotate(-11.5deg) scaleY(1.04);
  }
}

@keyframes hero-lab-planetoid-orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes hero-lab-planetoid-surface {
  0% {
    opacity: var(--planetoid-opacity-low);
    transform:
      rotate(var(--planetoid-from-rotation))
      scale(var(--planetoid-from-scale));
  }
  48% {
    opacity: var(--planetoid-opacity-high);
  }
  100% {
    opacity: calc((var(--planetoid-opacity-low) + var(--planetoid-opacity-high)) / 2);
    transform:
      rotate(var(--planetoid-to-rotation))
      scale(var(--planetoid-to-scale));
  }
}

@keyframes hero-lab-planetoid-impact {
  0%,
  12% {
    clip-path: circle(50% at 50% 50%);
  }

  24%,
  62% {
    clip-path: circle(0 at 50% 50%);
  }

  76% {
    clip-path: circle(8% at 50% 50%);
  }

  100% {
    clip-path: circle(50% at 50% 50%);
  }
}

@keyframes hero-lab-cosmic-explosion {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.08);
  }

  7% {
    opacity: 0.52;
  }

  18% {
    opacity: 0.58;
    transform: translate3d(-50%, -50%, 0) scale(0.34);
  }

  46% {
    opacity: 0.28;
    transform: translate3d(-50%, -50%, 0) scale(0.92);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.72);
  }
}

@keyframes hero-lab-cosmic-shockwave {
  0%,
  8% {
    opacity: 0;
    transform: scale(0.18);
  }

  18% {
    opacity: 0.34;
  }

  100% {
    opacity: 0;
    transform: scale(1.46);
  }
}

@keyframes hero-lab-cosmic-fragments {
  0%,
  10% {
    opacity: 0;
    transform: rotate(0deg) scale(0.22);
  }

  22% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform: rotate(34deg) scale(1.86);
  }
}

@keyframes hero-lab-particle-drift {
  0%, 100% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.6); }
  22% { opacity: 0.45; }
  70% { opacity: 0.16; }
  100% { transform: translate3d(var(--particle-drift), -76px, 0) scale(1.1); }
}

@keyframes hero-lab-comet-pass {
  0% {
    opacity: 0;
    transform:
      translate3d(0, 0, 0)
      rotate(var(--comet-angle))
      scale(var(--comet-scale));
  }
  6% {
    opacity: var(--comet-opacity);
  }
  78% {
    opacity: var(--comet-opacity);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--comet-travel-x), var(--comet-travel-y), 0)
      rotate(var(--comet-angle))
      scale(var(--comet-scale));
  }
}

@keyframes hero-lab-comet-recede {
  0% {
    opacity: 0;
    transform:
      translate3d(0, 0, 0)
      rotate(var(--comet-angle))
      scale(var(--comet-scale));
  }
  6% {
    opacity: var(--comet-opacity);
  }
  48% {
    opacity: calc(var(--comet-opacity) * 0.72);
  }
  76% {
    opacity: calc(var(--comet-opacity) * 0.3);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--comet-travel-x), var(--comet-travel-y), 0)
      rotate(var(--comet-angle))
      scale(var(--comet-end-scale));
  }
}

@keyframes hero-lab-comet-impact {
  0% {
    opacity: 0;
    transform:
      translate3d(0, 0, 0)
      rotate(var(--comet-angle))
      scale(var(--comet-scale));
  }

  5% {
    opacity: var(--comet-opacity);
  }

  72% {
    opacity: var(--comet-opacity);
  }

  84% {
    opacity: calc(var(--comet-opacity) * 0.58);
  }

  94% {
    opacity: calc(var(--comet-opacity) * 0.18);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--comet-travel-x), var(--comet-travel-y), 0)
      rotate(var(--comet-angle))
      scale(var(--comet-end-scale));
  }
}

@keyframes hero-lab-menu-enter {
  0% {
    opacity: 0;
    transform: scale(1.018);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hero-lab-status-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes hero-lab-stage-glow {
  0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes hero-lab-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes hero-lab-cross-ring {
  0% { transform: translate(-50%, -50%) rotate(-39deg) scaleX(0.96); }
  100% { transform: translate(-50%, -50%) rotate(-29deg) scaleX(1.04); }
}

@keyframes hero-lab-halo-ring {
  0% { transform: translate(-50%, -50%) rotate(55deg) scaleX(0.98); }
  100% { transform: translate(-50%, -50%) rotate(69deg) scaleX(1.03); }
}

@keyframes hero-lab-energy-orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes hero-lab-satellite-orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes hero-lab-satellite-pulse {
  from {
    opacity: var(--satellite-min-opacity);
    transform: scale(var(--satellite-min-scale));
  }
  to {
    opacity: var(--satellite-max-opacity);
    transform: scale(var(--satellite-max-scale));
  }
}

@keyframes hero-lab-kiwi-float {
  0%, 100% { transform: translate3d(0, -4px, 0); }
  50% { transform: translate3d(0, 7px, 0); }
}

@keyframes hero-lab-kiwi-aura {
  0%, 100% { opacity: 0.65; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.07); }
}

@keyframes hero-lab-aura-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.76); }
  24% { opacity: 0.65; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes hero-lab-kiwi-scan {
  0%, 18% { opacity: 0; transform: translateY(-20px) rotate(-7deg); }
  45% { opacity: 0.5; }
  78%, 100% { opacity: 0; transform: translateY(170px) rotate(-7deg); }
}

@keyframes hero-lab-scroll-hint {
  0% { opacity: 0; transform: translate(-50%, 0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 9px); }
}

/* Daylight material, scoped to the existing site theme contract. */
[data-theme="light"] .hero-lab-page {
  color: #1a291b;
  background: #f3f5ee;
}

[data-theme="light"] .hero-lab {
  --hero-lab-accent: #476c15;
  --hero-lab-accent-soft: rgba(88, 135, 31, 0.09);
  --hero-lab-line: rgba(62, 97, 33, 0.24);
  --hero-lab-text: #172419;
  --hero-lab-muted: #56634f;
  --hero-lab-surface: rgba(241, 247, 231, 0.75);
  --hero-lab-surface-strong: #edf3e5;
  color-scheme: light;
  background:
    radial-gradient(ellipse at 78% 46%, rgba(177, 204, 140, 0.36), transparent 46%),
    linear-gradient(115deg, #fafbf7, #edf1e7 68%, #e1e8d9);
}

[data-theme="light"] .hero-lab-backdrop::after {
  background: linear-gradient(90deg, rgba(250, 251, 247, 0.7), transparent 58%);
}

[data-theme="light"] .hero-lab-cosmos {
  background-image: radial-gradient(circle, rgba(65, 97, 33, 0.3) 0 0.7px, transparent 1px);
}

[data-theme="light"] .hero-lab-grid {
  opacity: 0.06;
  animation: none;
}

[data-theme="light"] .hero-lab-milky-way {
  opacity: 0.08;
  animation: none;
}

[data-theme="light"] .hero-lab-nebula { opacity: 0.1; animation: none; }

[data-theme="light"] .hero-lab-planetoid { filter: saturate(0.7) brightness(1.6); }

[data-theme="light"] .hero-lab-header {
  border-bottom-color: rgba(55, 83, 38, 0.1);
  background: rgba(247, 250, 240, 0.88);
}

[data-theme="light"] .hero-lab-header.is-scrolled {
  background: rgba(247, 250, 240, 0.97);
  border-bottom-color: var(--hero-lab-line);
}

[data-theme="light"] :is(.hero-lab-brand img, .hero-lab-site-menu-brand img) {
  filter: brightness(0.53) saturate(0.85);
}

[data-theme="light"] :is(.hero-lab-site-nav a, .hero-lab-description,
  .hero-lab-value-item small, .hero-lab-input-hint, .hero-lab-input-hint span,
  .hero-lab-stage-caption, .hero-lab-rail-label, .hero-lab-rail-button,
  .hero-lab-site-menu-index, .hero-lab-site-menu-nav small,
  .hero-lab-site-menu-footer p, .hero-lab-meta) {
  color: var(--hero-lab-muted);
}

[data-theme="light"] :is(.hero-lab-site-nav a:hover,
  .hero-lab-site-nav a[aria-current="page"], .hero-lab-value-item strong,
  .hero-lab-site-menu-nav a) { color: var(--hero-lab-text); }

[data-theme="light"] :is(.hero-lab-header-cta, .hero-lab-action--primary) {
  color: #f6f9ee;
  background: #1a2b19;
  border-color: #1a2b19;
  box-shadow: 0 8px 22px rgba(31, 58, 17, 0.1);
}

[data-theme="light"] :is(.hero-lab-header-cta:hover, .hero-lab-action--primary:hover) {
  background: #2c4422;
  border-color: #2c4422;
}

[data-theme="light"] :is(.hero-lab-menu-toggle, .hero-lab-action--ghost) {
  color: var(--hero-lab-text);
  border-color: var(--hero-lab-line);
  background: rgba(250, 253, 244, 0.65);
}

[data-theme="light"] :is(.hero-lab-menu-toggle:hover, .hero-lab-action--ghost:hover) {
  background: #e2ebd7;
  border-color: var(--hero-lab-accent);
}

[data-theme="light"] .hero-lab-site-menu {
  background: radial-gradient(ellipse at 15% 20%, #e2eccf, transparent 65%), #f4f7ee;
}

[data-theme="light"] .hero-lab-site-menu::backdrop { background: rgba(32, 48, 24, 0.38); }

[data-theme="light"] :is(.hero-lab-site-menu-nav a, .hero-lab-site-menu-footer) {
  border-color: var(--hero-lab-line);
}

[data-theme="light"] .hero-lab-rail {
  border-color: var(--hero-lab-line);
  background: rgba(246, 249, 239, 0.68);
}

[data-theme="light"] .hero-lab-rail-button.is-active {
  color: var(--hero-lab-accent);
  font-weight: var(--fw-bold);
}

[data-theme="light"] .hero-lab-rail-button:hover { color: #233d16; }
[data-theme="light"] .hero-lab-title strong { text-shadow: none; }

[data-theme="light"] .hero-lab-value-list {
  border-color: rgba(61, 88, 38, 0.12);
  background: rgba(61, 88, 38, 0.1);
}

[data-theme="light"] .hero-lab-value-item { background: #f0f4e9; }

[data-theme="light"] :is(.hero-lab-stage-caption-separator, .hero-lab-meta-separator) {
  background: var(--hero-lab-line);
}

[data-theme="light"] .hero-lab-stage-glow {
  background: radial-gradient(circle, rgba(133, 173, 80, 0.14), transparent 66%);
}

[data-theme="light"] :is(.hero-orbit-ring--navigation, .hero-orbit-ring--cross,
  .hero-orbit-ring--halo, .hero-lab-kiwi-aura) {
  border-color: rgba(77, 112, 43, 0.28);
  box-shadow: none;
}

[data-theme="light"] .hero-lab-kiwi-image {
  filter: saturate(0.95) contrast(1.02) brightness(1.02)
    drop-shadow(0 24px 24px rgba(46, 69, 29, 0.17));
}

[data-theme="light"] .hero-orbit-card { color: #23391e; }

[data-theme="light"] .hero-orbit-card-surface {
  border-color: rgba(95, 135, 66, 0.35);
  border-top-color: rgba(250, 255, 240, 0.85);
  background:
    linear-gradient(125deg, rgba(248, 255, 233, 0.6), rgba(196, 217, 174, 0.16) 54%, rgba(173, 198, 145, 0.32)),
    rgba(216, 231, 195, 0.42);
  box-shadow: inset 1px 1px 1px rgba(247, 255, 232, 0.65),
    2px 3px 0 rgba(95, 123, 66, 0.1), 0 16px 30px rgba(47, 77, 28, 0.12);
}

[data-theme="light"] :is(.hero-orbit-card:hover, .hero-orbit-card:focus-visible,
  .hero-orbit-card.is-active) .hero-orbit-card-surface {
  border-color: rgba(79, 118, 24, 0.65);
  box-shadow: inset 1px 1px 1px rgba(247, 255, 232, 0.8),
    2px 3px 0 rgba(95, 123, 66, 0.14), 0 18px 32px rgba(47, 77, 28, 0.16);
}

[data-theme="light"] :is(.hero-orbit-card-copy small, .hero-orbit-card-index) { color: #405932; }
[data-theme="light"] .hero-orbit-card-icon { color: #416c1b; }
[data-theme="light"] .hero-orbit-card-ports::before,
[data-theme="light"] .hero-orbit-card-ports::after { box-shadow: 0 0 8px rgba(97, 141, 44, 0.25); }

@media (max-width: 768px) {
  [data-theme="light"] .hero-orbit-card-surface {
    background: linear-gradient(125deg, #e9f1dc, #d7e5c5 55%, #cadbb7);
  }
}

@media (max-width: 1220px) {
  .hero-lab {
    grid-template-columns: 74px minmax(360px, 41vw) minmax(0, 1fr);
    grid-template-rows: 86px minmax(0, 1fr);
  }

  .hero-lab-header {
    padding-inline: 30px;
  }

  .hero-lab-site-nav {
    gap: 20px;
  }

  .hero-lab-title {
    font-size: clamp(2.55rem, 4.45vw, 4.2rem);
  }

  .hero-lab-copy {
    padding-inline: 34px;
  }

  .hero-lab-value-item {
    min-height: 98px;
    padding-inline: 11px;
  }

  .hero-orbit-system {
    width: 100%;
  }

  .hero-orbit-card {
    grid-template-columns: auto minmax(0, 1fr);
    width: clamp(158px, 16.7vw, 196px);
    min-height: 68px;
    --orbit-card-padding: 10px 12px;
  }

  .hero-orbit-card-index {
    display: none;
  }
}

@media (max-width: 980px) {
  .hero-lab {
    grid-template-columns: 64px minmax(330px, 43vw) minmax(0, 1fr);
  }

  .hero-lab-site-nav {
    display: none;
  }

  .hero-lab-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .hero-lab-menu-toggle {
    display: grid;
  }

  .hero-lab-site-menu-content {
    grid-template-columns: minmax(220px, 0.62fr) minmax(420px, 1.38fr);
    gap: 48px;
  }

  .hero-lab-value-list {
    grid-template-columns: 1fr;
  }

  .hero-lab-value-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    min-height: 54px;
    padding: 9px 12px;
  }

  .hero-lab-value-index {
    margin: 0;
  }

  .hero-lab-value-item small {
    display: none;
  }

  .hero-lab-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .hero-lab-action {
    min-height: 48px;
    padding-inline: 16px;
  }

  .hero-lab-action--primary {
    width: 100%;
  }

  .hero-lab-action--ghost {
    width: 48px;
  }

  .hero-orbit-card-copy small {
    display: none;
  }

  .hero-orbit-card {
    width: 154px;
    min-height: 60px;
  }

  .hero-orbit-card-icon {
    width: 34px;
    height: 34px;
  }
}

@media (max-height: 820px) and (min-width: 769px) {
  .hero-lab {
    grid-template-rows: 74px minmax(0, 1fr);
  }

  .hero-lab-header {
    padding-block: 12px;
  }

  .hero-lab-brand {
    width: 132px;
  }

  .hero-lab-copy {
    padding-block: 18px;
  }

  .hero-lab-eyebrow {
    margin-bottom: 12px;
  }

  .hero-lab-title {
    font-size: clamp(2.25rem, 4.05vw, 3.65rem);
    line-height: 1;
  }

  .hero-lab-description {
    margin-top: 14px;
    font-size: 0.86rem;
    line-height: 1.55;
  }

  .hero-lab-value-list {
    margin-top: 16px;
  }

  .hero-lab-value-item {
    min-height: 72px;
    padding-block: 9px;
  }

  .hero-lab-value-index {
    margin-bottom: 6px;
  }

  .hero-lab-value-item small {
    display: none;
  }

  .hero-lab-actions {
    margin-top: 18px;
  }

  .hero-lab-action {
    min-height: 44px;
  }

  .hero-lab-input-hint {
    display: none;
  }

  .hero-orbit-system {
    height: calc(100svh - 74px);
    min-height: 0;
  }

  .hero-lab-stage-caption {
    bottom: 12px;
  }
}

@media (max-width: 768px) {
  .hero-lab-grid {
    animation: none;
  }

  .hero-lab-particle:nth-child(n + 13) {
    display: none;
  }

  .hero-lab-stage-glow {
    opacity: 0.62;
  }

  .hero-lab-kiwi-scan {
    display: none;
  }

  .hero-orbit-card {
    backdrop-filter: none;
  }

  .hero-orbit-card-surface {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(125deg, #293f24, #142719 55%, #223a20);
  }

  .hero-lab-page {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .hero-lab {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    min-height: 100svh;
    overflow: clip;
  }

  .hero-lab-header {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: auto 1fr;
    position: sticky;
    top: 0;
    min-height: 72px;
    padding: 14px 20px;
    background: rgba(3, 8, 5, 0.74);
  }

  .hero-lab-header.is-scrolled {
    min-height: 64px;
    padding-block: 9px;
  }

  .hero-lab-brand {
    width: 128px;
  }

  .hero-lab-header-actions {
    grid-column: 2;
    justify-self: end;
  }

  .hero-lab-header > .hero-lab-header-actions .hero-lab-header-cta {
    display: none;
  }

  .hero-lab-site-menu-header,
  .hero-lab-site-menu-content,
  .hero-lab-site-menu-footer {
    padding-inline: 20px;
  }

  .hero-lab-site-menu-header {
    min-height: 74px;
  }

  .hero-lab-site-menu-brand {
    width: 128px;
  }

  .hero-lab-site-menu-content {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 34px;
    padding-block: 34px;
  }

  .hero-lab-site-menu-intro {
    max-width: 520px;
  }

  .hero-lab-site-menu-intro h2 {
    max-width: 520px;
    font-size: clamp(2.45rem, 10vw, 4.2rem);
  }

  .hero-lab-site-menu-intro .hero-lab-meta {
    margin-top: 24px;
    font-size: 0.56rem;
  }

  .hero-lab-site-menu-nav a {
    min-height: 78px;
  }

  .hero-lab-site-menu-footer {
    justify-content: space-between;
    min-height: 84px;
  }

  .hero-lab-rail {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    flex-direction: row;
    justify-content: stretch;
    gap: 0;
    height: 58px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .hero-lab-rail-label {
    display: none;
  }

  .hero-lab-rail-track {
    flex: 1;
    flex-direction: row;
    height: 100%;
  }

  .hero-lab-rail-button {
    flex: 1;
    min-height: 54px;
  }

  .hero-lab-rail-button.is-active {
    transform: none;
  }

  .hero-lab-rail-button::after {
    right: auto;
    left: 50%;
    top: calc(50% + 10px);
    bottom: 0;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--hero-lab-accent) 72%);
    transform: translateX(-50%) scaleY(0);
    transform-origin: 50% 100%;
    transition: transform var(--rail-sync-duration) var(--rail-sync-easing);
  }

  .hero-lab-rail-button.is-active::after {
    width: 2px;
    transform: translateX(-50%) scaleY(1);
  }

  .hero-lab-rail-progress {
    top: auto;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
  }

  .hero-lab-rail-progress-fill {
    width: calc(100% / var(--rail-slide-count));
    height: 100%;
    transform: translate3d(calc(var(--active-slide-index) * 100%), 0, 0);
  }

  .hero-lab-rail-progress-fill::before {
    top: -0.5px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 32px;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(183, 255, 61, 0.04),
      rgba(183, 255, 61, 0.56) 28%,
      rgba(207, 255, 121, 0.94) 50%,
      rgba(183, 255, 61, 0.56) 72%,
      rgba(183, 255, 61, 0.04)
    );
    transform: translateX(-50%);
  }

  .hero-lab-rail-progress-fill::after {
    width: 52px;
    height: 8px;
    transform: translate3d(-50%, -50%, 0) scaleX(0.72);
  }

  .hero-lab-rail-track.is-rail-moving .hero-lab-rail-progress-fill::before {
    animation-name: hero-lab-rail-core-travel-mobile;
  }

  .hero-lab-rail-track.is-rail-moving[data-rail-direction="forward"] .hero-lab-rail-progress-fill::after {
    right: 50%;
    left: auto;
    top: 50%;
    bottom: auto;
    width: 104px;
    height: 10px;
    border-radius: 50% 28% 28% 50%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(183, 255, 61, 0.04) 20%,
      rgba(183, 255, 61, 0.18) 68%,
      rgba(215, 255, 137, 0.58)
    );
    transform-origin: 100% 50%;
    animation-name: hero-lab-rail-halo-forward-mobile;
  }

  .hero-lab-rail-track.is-rail-moving[data-rail-direction="backward"] .hero-lab-rail-progress-fill::after {
    right: auto;
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 104px;
    height: 10px;
    border-radius: 28% 50% 50% 28%;
    background: linear-gradient(
      90deg,
      rgba(215, 255, 137, 0.58),
      rgba(183, 255, 61, 0.18) 32%,
      rgba(183, 255, 61, 0.04) 80%,
      transparent
    );
    transform-origin: 0 50%;
    animation-name: hero-lab-rail-halo-backward-mobile;
  }

  @keyframes hero-lab-rail-core-travel-mobile {
    0%,
    100% {
      opacity: 1;
      transform: translateX(-50%) scaleX(1);
    }

    12.5%,
    87.5% {
      opacity: 0.99;
      transform: translateX(-50%) scaleX(0.94);
    }

    25%,
    75% {
      opacity: 0.97;
      transform: translateX(-50%) scaleX(0.77);
    }

    37.5%,
    62.5% {
      opacity: 0.95;
      transform: translateX(-50%) scaleX(0.51);
    }

    50% {
      opacity: 0.94;
      transform: translateX(-50%) scaleX(0.2);
    }
  }

  @keyframes hero-lab-rail-halo-forward-mobile {
    0%,
    100% {
      opacity: 0;
      transform: translate3d(0, -50%, 0) scaleX(0.06);
    }

    12.5%,
    87.5% {
      opacity: 0.16;
      transform: translate3d(0, -50%, 0) scaleX(0.38);
    }

    25%,
    75% {
      opacity: 0.34;
      transform: translate3d(0, -50%, 0) scaleX(0.7);
    }

    37.5%,
    62.5% {
      opacity: 0.48;
      transform: translate3d(0, -50%, 0) scaleX(0.92);
    }

    50% {
      opacity: 0.54;
      transform: translate3d(0, -50%, 0) scaleX(1);
    }
  }

  @keyframes hero-lab-rail-halo-backward-mobile {
    0%,
    100% {
      opacity: 0;
      transform: translate3d(0, -50%, 0) scaleX(0.06);
    }

    12.5%,
    87.5% {
      opacity: 0.16;
      transform: translate3d(0, -50%, 0) scaleX(0.38);
    }

    25%,
    75% {
      opacity: 0.34;
      transform: translate3d(0, -50%, 0) scaleX(0.7);
    }

    37.5%,
    62.5% {
      opacity: 0.48;
      transform: translate3d(0, -50%, 0) scaleX(0.92);
    }

    50% {
      opacity: 0.54;
      transform: translate3d(0, -50%, 0) scaleX(1);
    }
  }

  .hero-lab-copy {
    grid-column: 1;
    grid-row: 3;
    align-items: start;
    padding: 46px 22px 20px;
  }

  .hero-lab-copy-shell {
    width: 100%;
    height: auto;
    display: block;
  }

  .hero-lab-eyebrow {
    margin-bottom: 18px;
  }

  .hero-lab-title {
    max-width: 650px;
    font-size: clamp(2.5rem, 10vw, 4.6rem);
  }

  .hero-lab-description {
    max-width: 610px;
  }

  .hero-lab-value-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-lab-value-item {
    display: block;
    min-height: 86px;
    padding: 12px;
  }

  .hero-lab-value-index {
    margin-bottom: 9px;
  }

  .hero-lab-actions {
    margin-top: 28px;
  }

  .hero-lab-stage {
    grid-column: 1;
    grid-row: 4;
    height: clamp(470px, 94vw, 650px);
    min-height: 470px;
    margin-top: 6px;
  }

  .hero-lab-stage::before {
    display: none;
  }

  .hero-orbit-system {
    width: min(100%, 720px);
    height: 100%;
    min-height: 0;
  }

  .hero-lab-stage-glow {
    width: min(105vw, 720px);
  }

  .hero-lab-kiwi {
    width: min(67%, 470px);
  }

  .hero-orbit-card {
    --orbit-card-radius: 11px;

    width: clamp(130px, 30vw, 164px);
    min-height: 56px;
    gap: 8px;
    --orbit-card-padding: 8px 10px;
  }

  .hero-orbit-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .hero-orbit-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .hero-orbit-card-copy strong {
    font-size: clamp(0.64rem, 2.25vw, 0.78rem);
  }

  .hero-lab-stage-caption {
    right: 18px;
    bottom: 14px;
  }

  .hero-lab-input-hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-lab-header {
    min-height: 66px;
    padding-inline: 16px;
  }

  .hero-lab-brand {
    width: 116px;
  }

  .hero-lab-menu-toggle {
    width: 42px;
    height: 42px;
  }

  .hero-lab-site-menu-header,
  .hero-lab-site-menu-content,
  .hero-lab-site-menu-footer {
    padding-inline: 16px;
  }

  .hero-lab-site-menu-brand {
    width: 116px;
  }

  .hero-lab-site-menu-intro h2 {
    font-size: clamp(2.2rem, 12vw, 3.35rem);
  }

  .hero-lab-site-menu-intro > p:not(.hero-lab-site-menu-kicker) {
    margin-top: 18px;
    font-size: 0.82rem;
  }

  .hero-lab-site-menu-intro .hero-lab-meta {
    gap: 8px;
    letter-spacing: 0.11em;
  }

  .hero-lab-site-menu-nav a {
    grid-template-columns: 30px minmax(0, 1fr) 22px;
    gap: 12px;
    min-height: 72px;
  }

  .hero-lab-site-menu-nav small {
    display: none;
  }

  .hero-lab-site-menu-footer {
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 118px;
    padding-block: 18px;
  }

  .hero-lab-site-menu-footer .hero-lab-header-cta {
    width: 100%;
  }

  .hero-lab-copy {
    padding: 38px 16px 16px;
  }

  .hero-lab-title {
    font-size: clamp(2.2rem, 11.5vw, 3.25rem);
    line-height: 1.04;
  }

  .hero-lab-description {
    margin-top: 18px;
    font-size: 0.9rem;
  }

  .hero-lab-value-list {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .hero-lab-value-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    min-height: 50px;
    padding: 8px 12px;
  }

  .hero-lab-value-index {
    margin: 0;
  }

  .hero-lab-value-item small {
    display: none;
  }

  .hero-lab-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 9px;
  }

  .hero-lab-action--primary {
    padding-inline: 14px;
  }

  .hero-lab-stage {
    height: 470px;
    min-height: 470px;
  }

  .hero-orbit-ring--navigation {
    width: var(--orbit-ring-width, 82%);
    height: var(--orbit-ring-height, 46%);
  }

  .hero-orbit-energy {
    offset-path: ellipse(
      var(--orbit-radius-x, 41%)
      var(--orbit-radius-y, 22%)
      at 50% 52%
    );
  }

  .hero-lab-kiwi {
    width: 76%;
  }

  .hero-orbit-card {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 104px;
    min-height: 62px;
    --orbit-card-padding: 8px 6px;
    text-align: center;
  }

  .hero-orbit-card-icon {
    width: 28px;
    height: 28px;
  }

  .hero-orbit-card-copy strong {
    font-size: 0.61rem;
  }

  .hero-lab-stage-caption {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit-card-surface {
    transform: none;
  }

  .hero-lab *,
  .hero-lab *::before,
  .hero-lab *::after {
    scroll-behavior: auto;
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
  }

  .hero-lab-grid {
    animation: none;
  }

  .hero-lab-kiwi,
  .hero-orbit-system {
    transition-duration: 1ms;
  }

  .hero-lab-kiwi {
    transform: translate3d(-50%, -50%, 0);
  }

  .hero-lab-kiwi-float,
  .hero-lab-kiwi-tilt {
    transform: none;
  }

  .hero-lab-kiwi-tilt {
    transition-duration: 1ms;
  }

  .hero-orbit-system {
    transform: translate3d(0, 0, 0);
  }
}