.hero__radar {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.hero__radar svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .radar-float { animation: radar-float 7s ease-in-out infinite; }
  .radar-sweep { transform-origin: 200px 200px; animation: radar-spin 7s linear infinite; }
  .radar-ping { animation: radar-ping 7s ease-out infinite; }
  .radar-node .radar-dot { animation: radar-dot-hit 7s ease-out infinite; }
  .radar-node .radar-num { animation: radar-num-hit 7s ease-out infinite; }

  .radar-node:nth-of-type(1) :is(.radar-ping, .radar-dot, .radar-num) { animation-delay: 0s; }
  .radar-node:nth-of-type(2) :is(.radar-ping, .radar-dot, .radar-num) { animation-delay: 1.75s; }
  .radar-node:nth-of-type(3) :is(.radar-ping, .radar-dot, .radar-num) { animation-delay: 3.5s; }
  .radar-node:nth-of-type(4) :is(.radar-ping, .radar-dot, .radar-num) { animation-delay: 5.25s; }

  @keyframes radar-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  @keyframes radar-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes radar-ping {
    0% { r: 13; opacity: .65; }
    20% { r: 34; opacity: 0; }
    100% { opacity: 0; }
  }

  @keyframes radar-dot-hit {
    0% { r: 12; }
    4% { r: 15; }
    14%, 100% { r: 12; }
  }

  @keyframes radar-num-hit {
    0% { fill: var(--cta-ink); }
    4% { fill: var(--dark-ink); }
    16%, 100% { fill: var(--cta-ink); }
  }
}

.radar-ring { fill: none; stroke: var(--dark-line); stroke-width: 1; }
.radar-ring.dashed { stroke-dasharray: 3 7; }
.radar-spoke { stroke: var(--dark-line); stroke-width: 1; }
.radar-center-disc { fill: var(--brand-mint-soft); stroke: var(--brand-mint); stroke-width: 1.5; filter: url(#radar-soft); }
.radar-center-num { font-size: 44px; font-weight: 800; fill: var(--brand-mint); font-family: var(--sans); }
.radar-center-sub { font-size: 12px; letter-spacing: .22em; fill: var(--dark-muted); font-family: var(--sans); text-transform: uppercase; }
.radar-node { cursor: pointer; }
.radar-node .radar-hit { fill: transparent; }
.radar-node .radar-dot { fill: var(--brand-mint); filter: url(#radar-glow); transition: r .2s; }
.radar-node .radar-num { fill: var(--cta-ink); font-size: 14px; font-weight: 800; font-family: var(--sans); pointer-events: none; }
.radar-node.amber .radar-dot { fill: var(--accent-amber); }
.radar-node:hover .radar-dot,
.radar-node:focus-visible .radar-dot { r: 15; }
.radar-node:focus-visible { outline: none; }
.radar-node:focus-visible .radar-ringlet { opacity: 1; }
.radar-ringlet { fill: none; stroke: var(--brand-mint); stroke-width: 1.5; opacity: 0; transition: opacity .2s; }
.radar-node.amber .radar-ringlet { stroke: var(--accent-amber); }
.radar-ping { fill: none; stroke: var(--brand-mint); stroke-width: 1.5; }
.radar-node.amber .radar-ping { stroke: var(--accent-amber); }
.radar-labels { position: absolute; inset: 0; pointer-events: none; }
.radar-lab {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  background: var(--dark-bg-2);
  border: 1px solid var(--dark-line);
  color: var(--dark-ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 13px;
  border-radius: 11px;
  text-align: center;
  text-decoration: none;
  transition: .18s;
  white-space: nowrap;
}
.radar-lab small { display: block; color: var(--dark-muted); font-weight: 400; font-size: .7rem; margin-top: 1px; }
.radar-lab .radar-step { color: var(--brand-mint); font-weight: 800; margin-right: 5px; }
.radar-lab.amber .radar-step { color: var(--accent-amber); }
.radar-lab:hover { border-color: var(--brand-mint); transform: translate(-50%, -50%) translateY(-2px); }
.radar-lab.amber:hover { border-color: var(--accent-amber); }
.radar-lab.top { left: 50%; top: -3%; }
.radar-lab.right { left: 104%; top: 50%; }
.radar-lab.bottom { left: 50%; top: 103%; }
.radar-lab.left { left: -4%; top: 50%; }