.hero-dgm .card {
  fill: rgba(247, 248, 249, 0.065);
  stroke: rgba(247, 248, 249, 0.19);
  stroke-width: 1;
}

.hero-dgm .name {
  fill: rgba(247, 248, 249, 0.92);
  font-family: Archivo, Arial, sans-serif;
  font-size: 11.4px;
  font-weight: 700;
}

.hero-dgm .sub {
  fill: rgba(247, 248, 249, 0.6);
  font-family: Archivo, Arial, sans-serif;
  font-size: 9.6px;
  font-weight: 500;
}

.hero-dgm .wire {
  fill: none;
  stroke: rgba(247, 248, 249, 0.17);
  stroke-width: 1;
}

.hero-dgm .flow {
  fill: none;
  stroke: url(#redFlow);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-dasharray: 6 11;
  animation: heroFlowDash 4s linear infinite;
}

.hero-dgm .flow.alt {
  animation-duration: 5.4s;
  animation-direction: reverse;
  opacity: 0.62;
}

.hero-dgm .flow-right {
  fill: none;
  stroke: url(#redFlow);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-dasharray: 7 11;
  animation: heroFlowDash 3.2s linear infinite;
  opacity: 0.95;
  filter: url(#softGlow);
}

.hero-dgm .flow-right.alt {
  animation-duration: 4.4s;
  animation-direction: reverse;
  opacity: 0.78;
}

.hero-dgm .w {
  fill: none;
  stroke: rgba(247, 248, 249, 0.74);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-dgm .gridline {
  fill: none;
  stroke: rgba(247, 248, 249, 0.19);
  stroke-width: 0.72;
}

.hero-dgm .accent {
  fill: none;
  stroke: #ff2632;
  stroke-width: 1.35;
  stroke-linecap: round;
  filter: url(#softGlow);
}

.hero-dgm .orbit {
  fill: none;
  stroke: rgba(255, 38, 50, 0.22);
  stroke-width: 0.8;
  stroke-dasharray: 3 7;
  transform-box: fill-box;
  transform-origin: center;
  animation: heroSpin 16s linear infinite;
}

.hero-dgm .orbit.alt {
  animation-direction: reverse;
  animation-duration: 22s;
  stroke: rgba(247, 248, 249, 0.12);
}

.hero-dgm .node {
  fill: #ff2632;
  filter: url(#softGlow);
  animation: heroPulse 2.2s ease-in-out infinite;
}

.hero-dgm .node.d1 {
  animation-delay: 0.7s;
}

.hero-dgm .node.d2 {
  animation-delay: 1.4s;
}

.hero-dgm .process {
  fill: #f4fbf9;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.35px;
}

.hero-dgm .outcome {
  fill: #f4fbf9;
  font-family: Archivo, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.hero-dgm .data-bead {
  fill: #ff2632;
  filter: url(#softGlow);
  opacity: 0.95;
}

.hero-dgm .rname {
  fill: rgba(247, 248, 249, 0.92);
  font-family: Archivo, Arial, sans-serif;
  font-size: 10.8px;
  font-weight: 700;
}

.hero-dgm .rsub {
  fill: rgba(247, 248, 249, 0.56);
  font-family: Archivo, Arial, sans-serif;
  font-size: 8.1px;
  font-weight: 500;
}

.hero-dgm .buildPulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: heroBuildPulse 2.8s ease-in-out infinite;
}

.hero-dgm .scanVert {
  animation: heroScanVert 3.8s ease-in-out infinite;
}

.hero-dgm .floorGlow {
  animation: heroFloorGlow 3s ease-in-out infinite;
}

@keyframes heroFlowDash {
  to {
    stroke-dashoffset: -36;
  }
}

@keyframes heroSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes heroPulse {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 1;
  }
}

@keyframes heroBuildPulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@keyframes heroScanVert {
  0%,
  100% {
    opacity: 0;
    transform: translateY(-38px);
  }

  50% {
    opacity: 0.85;
    transform: translateY(36px);
  }
}

@keyframes heroFloorGlow {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.72;
  }
}

/* Mobile spacing */
@media (max-width: 768px) {
  .hero-dgm {
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(-30px);
    margin-bottom: -30px;
  }
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-dgm .flow,
  .hero-dgm .flow-right,
  .hero-dgm .orbit,
  .hero-dgm .node,
  .hero-dgm .buildPulse,
  .hero-dgm .scanVert,
  .hero-dgm .floorGlow {
    animation: none !important;
  }
}