.systems-card {
  isolation: isolate;
  overflow: hidden;
}

.systems-card::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background: conic-gradient(from 180deg, transparent 0 34%, rgba(32,229,193,.09) 42%, transparent 50% 82%, rgba(47,125,246,.08) 90%, transparent 100%);
  animation: ambient-turn 18s linear infinite;
}

.radar {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(32,229,193,.035);
}

.scan-beam {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 82%, rgba(32,229,193,.18) 94%, transparent 100%);
  animation: radar-scan 5.5s linear infinite;
}

.orbit {
  animation: orbit-turn 8s linear infinite;
  box-shadow: 0 0 10px rgba(47,125,246,.12);
}

.o2 {
  animation-direction: reverse;
  animation-duration: 11s;
}

.core {
  position: relative;
  overflow: visible;
  animation: core-breathe 3s ease-in-out infinite;
}

.core::before,
.core::after {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px solid rgba(32,229,193,.34);
  border-radius: 50%;
  animation: core-wave 3s ease-out infinite;
}

.core::after {
  animation-delay: 1.5s;
}

.core span {
  position: relative;
  z-index: 2;
}

.data-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 15px var(--cyan);
  z-index: 4;
}

.node-a { animation: node-a 7s ease-in-out infinite; }
.node-b { animation: node-b 8.5s ease-in-out -2s infinite; }
.node-c { animation: node-c 10s ease-in-out -4s infinite; }

.system-status strong {
  font-size: 1.16rem;
  line-height: 1.35;
}

.signals {
  width: 86%;
  justify-content: space-between;
  gap: 8px;
}

.signals span {
  font-size: .52rem;
  white-space: nowrap;
}

@keyframes ambient-turn { to { transform: rotate(360deg); } }
@keyframes radar-scan { to { transform: rotate(360deg); } }
@keyframes orbit-turn { to { transform: rotate(395deg); } }
@keyframes core-breathe { 50% { transform: scale(1.07); box-shadow: 0 0 58px rgba(32,229,193,.38); } }
@keyframes core-wave { 0% { transform: scale(.72); opacity: 0; } 25% { opacity: .55; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes node-a { 0%,100% { transform: translate(-92px,-66px); opacity:.35; } 50% { transform: translate(103px,68px); opacity:1; } }
@keyframes node-b { 0%,100% { transform: translate(84px,-88px); opacity:.3; } 50% { transform: translate(-79px,93px); opacity:1; } }
@keyframes node-c { 0%,100% { transform: translate(-118px,18px); opacity:.3; } 50% { transform: translate(118px,-18px); opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  .systems-card::before,
  .scan-beam,
  .orbit,
  .core,
  .core::before,
  .core::after,
  .data-node { animation: none !important; }
}