.hero[data-spotlight]::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: var(--spotlight-opacity, 0);
  background: radial-gradient(360px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(101, 244, 255, .18), transparent 68%);
  transition: opacity .4s ease;
}

.signal-orbit-section {
  position: relative;
  overflow: hidden;
  padding: 138px 0 128px;
  background: radial-gradient(ellipse at 68% 52%, rgba(11, 92, 143, .22), transparent 34%), linear-gradient(135deg, #051426, #071a31);
}

.signal-orbit-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(83, 225, 242, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 225, 242, .11) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, black 30%, black 78%, transparent);
}

.signal-orbit-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 80px; }
.signal-orbit-copy h2 { font-size: clamp(42px, 4.2vw, 68px); line-height: 1.04; letter-spacing: -.07em; margin: 16px 0 22px; }
.signal-orbit-copy p:not(.eyeline) { max-width: 480px; color: #abc0d7; font-size: 16px; line-height: 1.72; }
.signal-orbit { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; isolation: isolate; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .25)); --orbit-shift-x: 0px; --orbit-shift-y: 0px; }
.signal-orbit::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(59, 237, 249, .1), transparent 52%), conic-gradient(from 42deg, transparent 0 44%, rgba(28, 223, 242, .17) 45% 46%, transparent 47% 100%); transform: translate(var(--orbit-shift-x), var(--orbit-shift-y)); transition: transform .25s ease; }
.orbit-halo { position: absolute; inset: 6%; border: 1px solid rgba(74, 238, 249, .27); border-radius: 50%; box-shadow: 0 0 0 34px rgba(56, 206, 240, .035), 0 0 0 70px rgba(56, 206, 240, .02); animation: orbit-spin 18s linear infinite; }
.halo-two { inset: 19%; border-style: dashed; opacity: .72; animation-duration: 12s; animation-direction: reverse; }
.orbit-sweep { position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from 65deg, transparent 0 54%, rgba(89, 241, 247, .28) 60%, transparent 68%); mask-image: radial-gradient(circle, transparent 0 36%, black 38%); animation: orbit-spin 7s linear infinite; }
.orbit-core { position: absolute; z-index: 2; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 142px; height: 142px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 32% 25%, #164b67, #07182d 63%); border: 1px solid rgba(117, 250, 255, .68); box-shadow: 0 0 0 13px rgba(22, 221, 238, .065), 0 0 45px rgba(19, 217, 235, .24); }
.orbit-core::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(136, 255, 255, .18); border-radius: 50%; }
.orbit-core span { font-size: 46px; line-height: .8; font-weight: 800; letter-spacing: -.11em; color: #d9ffff; text-shadow: 0 0 18px rgba(54, 238, 247, .7); }
.orbit-core small { margin-top: 13px; color: #85dce8; font: 8px/1.1 var(--mono); letter-spacing: .14em; text-align: center; }
.orbit-signal { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; color: #cdeef3; font: 10px/1.25 var(--mono); letter-spacing: .08em; }
.orbit-signal i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(28, 222, 238, .12), 0 0 16px var(--cyan); animation: node-pulse 2.8s ease-in-out infinite; }
.orbit-signal b { font-weight: 500; color: #fff; }
.signal-radar { top: 8%; left: 11%; }.signal-hazard { top: 19%; right: 1%; }.signal-lightning { bottom: 17%; right: 4%; }.signal-forecast { bottom: 8%; left: 12%; }
.signal-hazard i { background: var(--red); box-shadow: 0 0 0 5px rgba(255, 88, 110, .12), 0 0 16px var(--red); animation-delay: -1.1s; }.signal-lightning i { background: #f5d45d; box-shadow: 0 0 0 5px rgba(245, 212, 93, .12), 0 0 16px #f5d45d; animation-delay: -1.8s; }.signal-forecast i { background: #89a8ff; box-shadow: 0 0 0 5px rgba(137, 168, 255, .12), 0 0 16px #89a8ff; animation-delay: -.5s; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes node-pulse { 50% { transform: scale(1.35); opacity: .55; } }

@media (max-width: 900px) { .signal-orbit-layout { grid-template-columns: 1fr; gap: 34px; }.signal-orbit-copy { max-width: 600px; }.signal-orbit-section { padding: 100px 0; } }
@media (max-width: 620px) { .signal-orbit { width: 105%; margin-left: -2.5%; }.orbit-core { width: 115px; height: 115px; }.orbit-core span { font-size: 37px; }.orbit-signal { font-size: 8px; }.signal-radar { left: 8%; }.signal-hazard { right: -2%; }.signal-lightning { right: 1%; }.signal-forecast { left: 8%; } }
@media (prefers-reduced-motion: reduce) { .hero[data-spotlight]::after { display: none; }.orbit-halo, .orbit-sweep, .orbit-signal i { animation: none; }.signal-orbit::before { transform: none; } }