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

.rnd-hero-viz__halo {
  position: absolute;
  top: 50%;
  right: 4%;
  width: min(58vw, 860px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(16, 199, 255, 0.09), rgba(16, 199, 255, 0.025) 44%, transparent 70%);
  transform: translateY(-50%);
}

.rnd-hero-viz svg {
  position: absolute;
  top: 50%;
  right: max(1.5rem, calc((100vw - 1440px) / 2));
  width: min(58vw, 850px);
  height: min(84vh, 820px);
  transform: translateY(-48%);
  opacity: 0.94;
}

.rnd-hero-viz__boundary {
  fill: none;
  stroke: #9edcec;
  stroke-width: 1;
  stroke-dasharray: 3 10;
  opacity: 0.22;
}

.rnd-hero-viz__inputs circle,
.rnd-hero-viz__inputs rect {
  fill: rgba(4, 29, 48, 0.8);
  stroke: rgba(158, 220, 236, 0.55);
  stroke-width: 1.5;
}

.rnd-hero-viz__inputs path {
  fill: none;
  stroke: #9edcec;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rnd-hero-viz__tracks path {
  fill: none;
  stroke: url(#rnd-line);
  stroke-width: 1.5;
  stroke-dasharray: 5 8;
  animation: rnd-flow 12s linear infinite;
}

.rnd-hero-viz__packets circle {
  fill: #2dd4a0;
}

.rnd-packet--one { animation: rnd-packet-one 6.8s ease-in-out infinite; }
.rnd-packet--two { animation: rnd-packet-two 6.8s 1.1s ease-in-out infinite; }
.rnd-packet--three { animation: rnd-packet-three 6.8s 2.2s ease-in-out infinite; }

.rnd-hero-viz__field circle,
.rnd-hero-viz__field path {
  fill: none;
  stroke: #9edcec;
  stroke-width: 1;
  opacity: 0.16;
}

.rnd-hero-viz__field circle:nth-child(2) { opacity: 0.22; }
.rnd-hero-viz__field circle:nth-child(3) { opacity: 0.32; }

.rnd-hero-viz__sweep {
  transform-origin: 570px 360px;
  animation: rnd-scan 14s linear infinite;
}

.rnd-hero-viz__sweep path:last-child {
  fill: none;
  stroke: #10c7ff;
  stroke-width: 1.4;
  opacity: 0.68;
}

.rnd-hero-viz__chip > rect:first-child {
  stroke: rgba(45, 212, 160, 0.7);
  stroke-width: 1.5;
  filter: url(#rnd-glow);
}

.rnd-hero-viz__chip > rect:nth-child(2) {
  fill: rgba(2, 22, 43, 0.9);
  stroke: rgba(158, 220, 236, 0.35);
  stroke-width: 1;
}

.rnd-hero-viz__chip path {
  fill: none;
  stroke: #9edcec;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.68;
}

.rnd-hero-viz__checks circle {
  fill: rgba(4, 29, 48, 0.9);
  stroke: #2dd4a0;
  stroke-width: 1.4;
}

.rnd-hero-viz__checks path {
  fill: none;
  stroke: #2dd4a0;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rnd-hero-viz__checks g {
  animation: rnd-check 6s ease-in-out infinite;
}

.rnd-hero-viz__checks g:nth-child(2) { animation-delay: 1s; }
.rnd-hero-viz__checks g:nth-child(3) { animation-delay: 2s; }

@keyframes rnd-flow {
  to { stroke-dashoffset: -130; }
}

@keyframes rnd-scan {
  to { transform: rotate(360deg); }
}

@keyframes rnd-packet-one {
  0%, 10% { transform: translate(0, 0); opacity: 0; }
  18% { opacity: 1; }
  68% { transform: translate(160px, 76px); opacity: 1; }
  78%, 100% { transform: translate(160px, 76px); opacity: 0; }
}

@keyframes rnd-packet-two {
  0%, 10% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  68% { transform: translateX(156px); opacity: 1; }
  78%, 100% { transform: translateX(156px); opacity: 0; }
}

@keyframes rnd-packet-three {
  0%, 10% { transform: translate(0, 0); opacity: 0; }
  18% { opacity: 1; }
  68% { transform: translate(160px, -76px); opacity: 1; }
  78%, 100% { transform: translate(160px, -76px); opacity: 0; }
}

@keyframes rnd-check {
  0%, 32%, 100% { opacity: 0.32; }
  42%, 70% { opacity: 1; }
}

@media (min-width: 1024px) {
  .rnd-hub-hero-copy .hero-title,
  .rnd-hub-hero-copy .hero-subtitle {
    max-width: 48%;
  }
}

@media (max-width: 1023px) {
  .rnd-hero-viz svg {
    right: -22%;
    width: 88vw;
    opacity: 0.42;
  }

  .rnd-hero-viz__halo {
    right: -20%;
    width: 90vw;
  }
}

@media (max-width: 639px) {
  .rnd-hero-viz svg {
    top: 60%;
    right: -52%;
    width: 150vw;
    opacity: 0.24;
  }

  .rnd-hero-viz__halo {
    top: 64%;
    right: -58%;
    width: 150vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rnd-hero-viz * {
    animation: none !important;
  }

  .rnd-hero-viz__checks g {
    opacity: 0.8;
  }
}