.home-banner {
  --banner-pointer-x: 0;
  --banner-pointer-y: 0;
  --banner-crossfade: 1200ms;
  --banner-primary: var(--accent);
  --banner-secondary: var(--accent-2);
  --banner-glow: var(--green-glow);
  position: relative;
  min-height: clamp(260px, 25vw, 320px);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid rgba(80, 224, 176, 0.24);
  border-radius: 18px;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 48%, rgba(0, 80, 64, 0.26), transparent 29%),
    radial-gradient(circle at 69% 52%, rgba(48, 192, 192, 0.13), transparent 34%),
    linear-gradient(118deg, #000606 0%, #001412 54%, #000908 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px rgba(80, 224, 176, 0.12),
    0 24px 70px rgba(0, 0, 0, 0.28);
}

.home-banner::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 8, 18, 0.98) 0%, rgba(4, 8, 18, 0.74) 38%, transparent 72%),
    radial-gradient(circle at 22% 36%, rgba(80, 224, 176, 0.08), transparent 30%);
}

.home-banner::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 42px rgba(80, 224, 176, 0.08);
}

.home-banner-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.045;
  filter: grayscale(1) sepia(1) hue-rotate(105deg) saturate(1.8) brightness(0.7);
  mix-blend-mode: screen;
}

.home-banner-grid {
  position: absolute;
  inset: -38% -8% -48% 35%;
  z-index: 0;
  opacity: 0.25;
  transform: perspective(640px) rotateX(65deg) translate3d(calc(var(--banner-pointer-x) * -5px), calc(var(--banner-pointer-y) * -5px), 0);
  transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(80, 224, 176, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 224, 176, 0.13) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000 18%, transparent 72%);
}

.home-banner-copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: min(58%, 760px);
  min-height: clamp(260px, 25vw, 320px);
  padding: clamp(34px, 4.2vw, 62px);
}

.home-banner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin-bottom: 14px;
  color: var(--banner-primary);
  font-family: "SFMono-Regular", "Segoe UI Mono", "Consolas", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-shadow: 0 0 18px rgba(80, 224, 176, 0.62);
}

.home-banner-kicker::before {
  width: 25px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--banner-primary));
  box-shadow: 0 0 10px var(--banner-primary);
}

.home-banner h1 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 100%;
  margin: 0;
  color: #f4fbff;
  font-size: clamp(28px, 3.15vw, 48px);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 5px 26px rgba(0, 0, 0, 0.46);
}

.home-banner h1::after {
  position: absolute;
  inset: -5% -12%;
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent 35%, rgba(168, 248, 255, 0.42) 50%, transparent 65%);
  animation: banner-scan 7s ease-in-out infinite;
}

.home-banner h1 strong {
  margin-top: 5px;
  color: transparent;
  font-weight: inherit;
  background: linear-gradient(90deg, #ffffff 0%, #b9f7e2 42%, var(--banner-primary) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 13px rgba(92, 228, 255, 0.21));
}

.home-banner-copy p {
  margin: 16px 0 0;
  color: rgba(202, 225, 244, 0.66);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.home-banner-switcher {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 12;
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(122, 227, 255, 0.16);
  border-radius: 999px;
  background: rgba(5, 12, 27, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
}

.home-banner-switcher button {
  min-height: 28px;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  color: rgba(197, 222, 240, 0.58);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  background: transparent;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.home-banner-switcher button[aria-pressed="true"] {
  color: #eafdff;
  background: linear-gradient(135deg, rgba(80, 224, 176, 0.24), rgba(48, 192, 192, 0.24));
  box-shadow: inset 0 0 0 1px rgba(121, 237, 255, 0.2), 0 0 18px rgba(52, 210, 255, 0.12);
}

.home-banner-switcher button:focus-visible {
  outline: 2px solid #78efff;
  outline-offset: 2px;
}

.home-banner-stage,
.home-banner-panel {
  position: absolute;
  inset: 0;
}

.home-banner-panel {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform: perspective(900px) translate3d(14px, 0, -30px) rotateY(-1.5deg) scale(0.985);
  transition:
    opacity var(--banner-crossfade) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--banner-crossfade) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.home-banner-panel.is-active {
  opacity: 1;
  transform: perspective(900px) translate3d(0, 0, 0) rotateY(0) scale(1);
}

.banner-core {
  position: absolute;
  top: 52%;
  right: clamp(20px, 4.7vw, 78px);
  width: clamp(190px, 24vw, 330px);
  aspect-ratio: 1;
  transform: translate3d(calc(var(--banner-pointer-x) * 10px), calc(-50% + var(--banner-pointer-y) * 8px), 0);
  filter: drop-shadow(0 0 28px rgba(50, 215, 255, 0.14));
  transition: transform 0.18s ease-out;
  perspective: 900px;
  transform-style: preserve-3d;
}

.banner-core-crystal {
  position: absolute;
  inset: 27%;
  z-index: 5;
  border: 1px solid rgba(202, 255, 237, 0.54);
  border-radius: 28%;
  transform: translateZ(34px) rotateX(58deg) rotateZ(45deg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 26%),
    linear-gradient(315deg, rgba(80, 224, 176, 0.25), rgba(0, 80, 64, 0.08) 56%, rgba(48, 192, 192, 0.2));
  box-shadow:
    inset 12px 12px 22px rgba(255, 255, 255, 0.08),
    inset -12px -12px 22px rgba(0, 80, 64, 0.38),
    0 18px 32px rgba(0, 0, 0, 0.42),
    0 0 38px rgba(80, 224, 176, 0.18);
  backdrop-filter: blur(6px);
  animation: banner-crystal-tilt 6s ease-in-out infinite;
}

.banner-core-crystal::before,
.banner-core-crystal::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.banner-core-crystal::before {
  inset: 11%;
  border: 1px solid rgba(80, 224, 176, 0.35);
  border-radius: 22%;
}

.banner-core-crystal::after {
  inset: -30% 42%;
  transform: rotate(-18deg);
  background: linear-gradient(180deg, transparent, rgba(224, 255, 245, 0.75), transparent);
  animation: banner-chip-sweep 4.4s ease-in-out infinite;
}

.banner-core-neural {
  position: absolute;
  inset: 38%;
  z-index: 6;
  border-radius: 50%;
  transform: translateZ(66px);
  background: radial-gradient(circle, #f1fff9 0 8%, var(--banner-primary) 18%, rgba(48, 192, 192, 0.36) 38%, transparent 72%);
  box-shadow: 0 0 18px var(--banner-primary), 0 0 48px rgba(80, 224, 176, 0.46);
  animation: banner-neural-energy 2.7s ease-in-out infinite;
}

.banner-core-orbit {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 28%;
  border: 1px solid rgba(80, 224, 176, 0.5);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.banner-core-orbit-back {
  top: 35%;
  z-index: 1;
  transform: translateZ(-55px) rotateX(68deg) rotateZ(-12deg);
  opacity: 0.52;
}

.banner-core-orbit-front {
  top: 53%;
  z-index: 10;
  transform: translateZ(74px) rotateX(72deg) rotateZ(10deg);
  border-color: rgba(201, 255, 236, 0.72);
  filter: drop-shadow(0 0 8px rgba(80, 224, 176, 0.62));
  clip-path: inset(50% 0 0);
}

.banner-depth-particle {
  position: absolute;
  z-index: 12;
  border-radius: 50%;
  background: #d8fff2;
  box-shadow: 0 0 12px var(--banner-primary), 0 0 24px rgba(80, 224, 176, 0.62);
  animation: banner-depth-drift 4.8s ease-in-out infinite;
}

.depth-particle-one { top: 12%; right: 12%; width: 9px; height: 9px; filter: blur(1px); }
.depth-particle-two { bottom: 18%; left: -4%; width: 15px; height: 15px; filter: blur(3px); animation-delay: -1.2s; }
.depth-particle-three { top: 46%; right: -9%; width: 6px; height: 6px; animation-delay: -2.4s; }
.depth-particle-four { bottom: -8%; left: 54%; width: 20px; height: 20px; filter: blur(5px); animation-delay: -3.6s; }

.banner-core-aura {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80, 224, 176, 0.24), rgba(48, 192, 192, 0.1) 39%, transparent 68%);
  animation: banner-core-pulse 4.2s ease-in-out infinite;
}

.banner-core-ring {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(99, 237, 255, 0.54);
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(58, 218, 255, 0.05), 0 0 18px rgba(48, 210, 255, 0.08);
  animation: banner-core-spin 16s linear infinite;
}

.banner-core-ring::before,
.banner-core-ring::after {
  position: absolute;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: #99f7ff;
  box-shadow: 0 0 5px #99f7ff, 0 0 16px #4adfff;
}

.banner-core-ring::before { top: 9%; left: 20%; }
.banner-core-ring::after { right: 3%; bottom: 31%; width: 5px; height: 5px; }

.banner-core-ring-one {
  border-style: dashed;
  border-color: rgba(93, 225, 255, 0.36);
}

.banner-core-ring-two {
  inset: 19%;
  border-color: rgba(48, 192, 192, 0.68);
  animation-direction: reverse;
  animation-duration: 11s;
}

.banner-core-ring-two::before { top: auto; bottom: 3%; left: 42%; background: #a9f5dc; box-shadow: 0 0 14px var(--banner-primary); }

.banner-core-ring-three {
  inset: 31%;
  border-radius: 30%;
  transform: rotate(45deg);
  animation-duration: 8s;
}

.banner-core-chip {
  position: absolute;
  z-index: 8;
  inset: 34%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(132, 244, 255, 0.58);
  border-radius: 23%;
  transform: rotate(45deg);
  background: linear-gradient(145deg, rgba(7, 27, 22, 0.97), rgba(0, 8, 8, 0.98));
  box-shadow: inset 0 0 24px rgba(72, 215, 255, 0.12), 0 0 50px rgba(75, 221, 255, 0.35);
  animation: banner-core-pulse 3.4s ease-in-out infinite;
}

.banner-core-chip::before {
  position: absolute;
  inset: 7%;
  content: "";
  border: 1px solid rgba(126, 233, 255, 0.15);
  border-radius: 19%;
}

.banner-core-chip b {
  z-index: 2;
  color: #b7faff;
  font-size: clamp(26px, 3.3vw, 46px);
  font-weight: 850;
  transform: rotate(-45deg);
  text-shadow: 0 0 9px var(--banner-primary), 0 0 25px rgba(48, 192, 192, 0.72);
}

.banner-core-chip i {
  position: absolute;
  inset: -30% 46%;
  transform: rotate(-25deg);
  background: linear-gradient(180deg, transparent, rgba(171, 250, 255, 0.8), transparent);
  animation: banner-chip-sweep 3.4s ease-in-out infinite;
}

.banner-core-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9df8ff;
  box-shadow: 0 0 6px #9df8ff, 0 0 14px #37dfff;
  animation: banner-particle-float 4s ease-in-out infinite;
}

.particle-one { top: 4%; left: 46%; }
.particle-two { top: 24%; right: 3%; animation-delay: -0.8s; }
.particle-three { right: 15%; bottom: 8%; animation-delay: -1.7s; }
.particle-four { bottom: 3%; left: 31%; animation-delay: -2.4s; }
.particle-five { top: 42%; left: 0; animation-delay: -3s; }
.particle-six { top: 16%; left: 17%; animation-delay: -1.2s; }

@keyframes banner-core-spin {
  to { rotate: 360deg; }
}

@keyframes banner-core-pulse {
  50% { scale: 1.06; filter: brightness(1.25); }
}

@keyframes banner-scan {
  0%, 75% { translate: -140% 0; opacity: 0; }
  82% { opacity: 0.9; }
  100% { translate: 240% 0; opacity: 0; }
}

@keyframes banner-chip-sweep {
  0%, 55% { translate: -260% 0; opacity: 0; }
  68% { opacity: 0.8; }
  88%, 100% { translate: 260% 0; opacity: 0; }
}

@keyframes banner-particle-float {
  50% { translate: 0 -9px; scale: 1.6; opacity: 0.55; }
}

.banner-pipeline {
  position: absolute;
  top: 54%;
  right: clamp(12px, 3.2vw, 52px);
  width: min(49%, 630px);
  aspect-ratio: 2.22;
  transform: translate3d(calc(var(--banner-pointer-x) * 8px), calc(-50% + var(--banner-pointer-y) * 6px), 0);
  transition: transform 0.18s ease-out;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.pipeline-glass-shell {
  position: absolute;
  inset: 11% 18% 9% 27%;
  z-index: 0;
  border: 1px solid rgba(80, 224, 176, 0.18);
  border-radius: 28px;
  transform: translateZ(-45px) rotateY(-8deg) rotateX(4deg);
  background: linear-gradient(135deg, rgba(80, 224, 176, 0.08), rgba(0, 8, 8, 0.04) 55%, rgba(48, 192, 192, 0.08));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}

.pipeline-beam {
  position: absolute;
  z-index: 2;
  left: 49%;
  width: 42%;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(80, 224, 176, 0), var(--banner-primary), rgba(48, 192, 192, 0));
  box-shadow: 0 0 8px var(--banner-primary), 0 0 18px rgba(80, 224, 176, 0.46);
  animation: pipeline-beam-pulse 1.8s ease-in-out infinite;
}

.pipeline-beam-one { top: 42%; transform: translateZ(26px) rotate(-15deg); }
.pipeline-beam-two { top: 50%; transform: translateZ(48px); animation-delay: -0.6s; }
.pipeline-beam-three { top: 58%; transform: translateZ(12px) rotate(15deg); animation-delay: -1.2s; }

.pipeline-reflection {
  position: absolute;
  right: 1%;
  bottom: -12%;
  z-index: 0;
  width: 30%;
  height: 24%;
  border-radius: 50%;
  transform: rotateX(72deg) translateZ(-30px);
  background: radial-gradient(ellipse, rgba(80, 224, 176, 0.24), transparent 68%);
  filter: blur(9px);
  opacity: 0.58;
}

.banner-pipeline::before {
  position: absolute;
  inset: 8% -4%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(26, 217, 255, 0.11), transparent 66%);
  filter: blur(13px);
}

.pipeline-node,
.pipeline-output {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(80, 238, 255, 0.45);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(7, 30, 24, 0.95), rgba(0, 9, 9, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), inset 0 0 22px rgba(42, 214, 255, 0.05), 0 0 28px rgba(52, 217, 255, 0.13);
}

.pipeline-node::after,
.pipeline-output::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.3;
  background-image: linear-gradient(rgba(101, 230, 255, 0.18) 1px, transparent 1px);
  background-size: 100% 9px;
  mask-image: linear-gradient(90deg, transparent, #000, transparent);
}

.pipeline-path {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(68, 232, 255, 0.75));
}

.pipeline-path path {
  fill: none;
  stroke: rgba(87, 239, 255, 0.62);
  stroke-width: 2;
  stroke-dasharray: 5 12;
  animation: pipeline-flow 1.4s linear infinite;
}

.pipeline-input {
  top: 37%;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 15%;
  height: 27%;
  padding: 12px 11px;
}

.pipeline-input-icon {
  position: absolute;
  top: 6px;
  left: 10px;
  color: #9af7ff;
  font-size: 12px;
  text-shadow: 0 0 10px #45e2ff;
}

.pipeline-input i {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d9fff2, var(--banner-primary));
  box-shadow: 0 0 8px rgba(82, 229, 255, 0.66);
  animation: pipeline-bars 1.2s ease-in-out infinite;
}

.pipeline-input i:nth-of-type(1) { height: 8px; }
.pipeline-input i:nth-of-type(2) { height: 14px; animation-delay: -0.35s; }
.pipeline-input i:nth-of-type(3) { height: 10px; animation-delay: -0.7s; }

.pipeline-ai {
  top: 33%;
  left: 36%;
  display: grid;
  place-items: center;
  width: 20%;
  aspect-ratio: 1;
  border-color: rgba(80, 224, 176, 0.72);
  transform: rotate(45deg);
  animation: pipeline-node-pulse 2.8s ease-in-out infinite;
}

.pipeline-ai::before {
  position: absolute;
  inset: 10%;
  content: "";
  border: 1px solid rgba(104, 234, 255, 0.2);
  border-radius: 9px;
}

.pipeline-ai span,
.pipeline-ai b {
  z-index: 2;
  transform: rotate(-45deg);
}

.pipeline-ai span {
  color: #c4fbff;
  font-size: clamp(20px, 2.5vw, 38px);
  font-weight: 900;
  line-height: 0.8;
  text-shadow: 0 0 18px #4de2ff;
}

.pipeline-ai b {
  margin-top: -42%;
  color: rgba(174, 226, 245, 0.56);
  font-size: 6px;
  letter-spacing: 0.16em;
}

.pipeline-output {
  right: 0;
  width: 22%;
  height: 25%;
  padding: 8px;
  animation: pipeline-float 4s ease-in-out infinite;
}

.pipeline-output-one { top: 1%; transform: translateZ(-12px) rotateY(-8deg) scale(0.9); }
.pipeline-output-two { top: 37.5%; transform: translateZ(56px) rotateY(-5deg) scale(1.04); animation-delay: -0.7s; }
.pipeline-output-three { bottom: 1%; transform: translateZ(8px) rotateY(-7deg) scale(0.94); animation-delay: -1.4s; }

.pipeline-output span {
  position: relative;
  z-index: 2;
  display: block;
  width: 63%;
  height: 100%;
  border-radius: 7px;
  background:
    radial-gradient(circle at 72% 26%, rgba(202, 255, 237, 0.82) 0 4%, transparent 5%),
    linear-gradient(145deg, rgba(80, 224, 176, 0.48), rgba(0, 80, 64, 0.22));
  box-shadow: inset 0 0 0 1px rgba(161, 244, 255, 0.18);
}

.pipeline-output i {
  position: absolute;
  top: 12px;
  right: 8px;
  width: 22%;
  height: 3px;
  border-radius: 2px;
  background: var(--banner-primary);
  box-shadow: 0 8px rgba(48, 192, 192, 0.34), 0 16px rgba(80, 224, 176, 0.18), 0 0 8px var(--banner-primary);
}

@keyframes pipeline-flow {
  to { stroke-dashoffset: -17; }
}

@keyframes pipeline-node-pulse {
  50% { box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 0 45px rgba(65, 239, 255, 0.4); }
}

@keyframes pipeline-float {
  50% { translate: 0 -6px; filter: brightness(1.18); }
}

@keyframes pipeline-bars {
  50% { height: 18px; filter: brightness(1.4); }
}

@keyframes banner-crystal-tilt {
  50% { transform: translateZ(42px) rotateX(54deg) rotateZ(48deg); filter: brightness(1.15); }
}

@keyframes banner-neural-energy {
  50% { transform: translateZ(74px) scale(1.16); filter: brightness(1.25); }
}

@keyframes banner-depth-drift {
  50% { translate: calc(var(--banner-pointer-x) * 12px) -14px; scale: 1.25; opacity: 0.55; }
}

@keyframes pipeline-beam-pulse {
  0%, 100% { opacity: 0.28; filter: brightness(0.8); }
  50% { opacity: 1; filter: brightness(1.35); }
}

.home-banner.is-banner-paused *,
.home-banner.is-banner-paused *::before,
.home-banner.is-banner-paused *::after {
  animation-play-state: paused !important;
}

@media (max-width: 980px) {
  .home-banner-copy {
    width: 61%;
    padding: 36px;
  }

  .home-banner h1 {
    font-size: clamp(25px, 3.7vw, 38px);
  }

  .banner-core {
    right: 2%;
    width: clamp(185px, 29vw, 280px);
  }

  .banner-pipeline {
    right: 1.5%;
    width: 47%;
  }
}

@media (max-width: 760px) {
  .home-banner {
    min-height: 420px;
  }

  .home-banner::before {
    background: linear-gradient(180deg, rgba(4, 8, 18, 0.98) 0%, rgba(4, 8, 18, 0.76) 38%, transparent 76%);
  }

  .home-banner-grid {
    inset: 32% -40% -46%;
  }

  .home-banner-copy {
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-height: 0;
    padding: 28px 24px 0;
    text-align: center;
  }

  .home-banner-kicker {
    margin-bottom: 10px;
  }

  .home-banner h1 {
    align-items: center;
    width: auto;
    font-size: clamp(25px, 7.6vw, 34px);
  }

  .home-banner-copy p {
    margin-top: 10px;
    font-size: 10px;
  }

  .home-banner-stage {
    inset: 142px 0 44px;
  }

  .banner-core {
    top: 49%;
    right: 50%;
    width: min(59vw, 235px);
    transform: translate3d(calc(50% + var(--banner-pointer-x) * 6px), calc(-50% + var(--banner-pointer-y) * 5px), 0);
  }

  .banner-pipeline {
    top: 48%;
    right: 4%;
    width: 92%;
  }

  .home-banner-switcher {
    top: auto;
    right: auto;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 440px) {
  .home-banner {
    min-height: 390px;
  }

  .home-banner-copy {
    padding-inline: 16px;
  }

  .home-banner-kicker {
    font-size: 8px;
  }

  .home-banner h1 {
    font-size: 24px;
  }

  .home-banner-stage {
    top: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-banner *,
  .home-banner *::before,
  .home-banner *::after {
    animation: none !important;
    transition: none !important;
  }

  .banner-core,
  .banner-pipeline {
    --banner-pointer-x: 0;
    --banner-pointer-y: 0;
  }
}

/* Borderless floating 3D hero */
.home-banner {
  height: clamp(230px, 20vw, 260px);
  min-height: 0;
  margin-top: calc(-1 * var(--page-y));
  margin-right: calc(-1 * var(--page-x));
  margin-bottom: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  isolation: auto;
  background:
    radial-gradient(ellipse 58% 118% at 22% 46%, rgba(0, 104, 82, 0.22) 0%, rgba(0, 67, 55, 0.11) 46%, transparent 78%),
    radial-gradient(ellipse 48% 112% at 82% 46%, rgba(0, 94, 78, 0.13) 0%, rgba(0, 51, 46, 0.07) 48%, transparent 78%);
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.24) 10px, #000 52px),
    linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.86) 84%, rgba(0, 0, 0, 0.42) 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.24) 10px, #000 52px),
    linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.86) 84%, rgba(0, 0, 0, 0.42) 92%, transparent 100%);
  mask-composite: intersect;
}

.home-banner::before {
  inset: -12% -4%;
  background: radial-gradient(ellipse 46% 80% at 26% 48%, rgba(80, 224, 176, 0.08), transparent 74%);
  -webkit-mask-image: none;
  mask-image: none;
}

.home-banner::after {
  inset: auto -3% -1px;
  z-index: 4;
  height: 42%;
  border-radius: 0;
  content: "";
  background: linear-gradient(180deg, transparent 0%, rgba(0, 19, 18, 0.08) 52%, rgba(0, 13, 13, 0.34) 100%);
  box-shadow: none;
  filter: none;
  mix-blend-mode: normal;
}

.home-banner-fallback {
  opacity: 0.018;
  mask-image: linear-gradient(90deg, #000, transparent 74%);
}

.home-banner-copy {
  width: min(54%, 700px);
  min-height: 100%;
  padding: clamp(22px, 3vw, 42px) clamp(18px, 3.8vw, 58px);
}

.home-banner h1 {
  font-size: clamp(28px, 3vw, 44px);
}

.home-banner-stage,
.home-banner-panel {
  overflow: hidden;
}

.banner-artwork {
  position: absolute;
  top: 50%;
  right: -3%;
  bottom: auto;
  z-index: 2;
  width: min(70%, 920px);
  height: 100%;
  object-fit: contain;
  object-position: right center;
  opacity: 1;
  transform: translate3d(calc(var(--banner-pointer-x) * 13px), calc(-50% + var(--banner-pointer-y) * 4px), 0);
  filter: saturate(1.1) contrast(1.06) brightness(1.04) drop-shadow(0 16px 22px rgba(0, 0, 0, 0.24));
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.32) 10%, #000 27%, #000 92%, rgba(0, 0, 0, 0.86) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.32) 10%, #000 27%, #000 92%, rgba(0, 0, 0, 0.86) 100%);
  transition: transform 260ms ease-out, filter 600ms ease;
  pointer-events: none;
  user-select: none;
}

.banner-artwork-matrix {
  right: -1%;
  width: min(72%, 960px);
  height: 142%;
}

.banner-core,
.banner-pipeline {
  z-index: 4;
  opacity: 0.26;
  mix-blend-mode: screen;
}

.banner-core {
  right: clamp(28px, 8vw, 128px);
  width: clamp(160px, 19vw, 250px);
}

.banner-pipeline {
  right: 3%;
  width: min(48%, 600px);
}

#page-home > .home-layout {
  position: relative;
  z-index: 10;
  margin-top: -22px;
}

@media (max-width: 760px) {
  .home-banner {
    height: clamp(300px, 82vw, 340px);
    min-height: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px);
  }

  .home-banner::before {
    background: radial-gradient(ellipse at 60% 70%, rgba(0, 80, 64, 0.28), transparent 54%);
    mask-image: radial-gradient(ellipse 90% 100% at 58% 56%, #000 0 58%, transparent 100%);
  }

  .home-banner-copy {
    align-items: flex-start;
    width: 100%;
    padding: 22px 18px 0;
    text-align: left;
  }

  .home-banner h1 {
    align-items: flex-start;
    font-size: clamp(25px, 7.2vw, 32px);
  }

  .home-banner-stage {
    inset: 104px -18px 0;
  }

  .banner-artwork,
  .banner-artwork-matrix {
    top: 58%;
    right: -30%;
    bottom: auto;
    width: 128%;
    height: 115%;
    object-fit: contain;
    object-position: right center;
    transform: translate3d(calc(var(--banner-pointer-x) * 13px), calc(-50% + var(--banner-pointer-y) * 9px), 0);
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 84%, transparent 100%);
  }

  .banner-core {
    width: min(48vw, 190px);
  }

  .banner-pipeline {
    right: -2%;
    width: 76%;
  }

  #page-home > .home-layout {
    margin-top: -18px;
  }
}

@media (max-width: 440px) {
  .home-banner {
    height: clamp(300px, 82vw, 340px);
    min-height: 0;
  }
}

/* Allow the desktop hero to escape the page padding at the top and right. */
@media (min-width: 721px) {
  body.home-page-active #page-home.active:has(.home-workflow-selector:not([hidden])) {
    overflow: visible;
  }
}