.hero-system {
  aspect-ratio: 1;
  overflow: visible;
  color: white;
  background:
    radial-gradient(ellipse at 52% 47%, rgba(75,99,255,.17), transparent 27%),
    radial-gradient(ellipse at 72% 30%, rgba(116,93,240,.12), transparent 35%);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.hero-system::before {
  content: "";
  position: absolute;
  inset: 5%;
  z-index: -2;
  opacity: .46;
  border-radius: 50%;
  background-image:
    linear-gradient(rgba(52,87,245,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,87,245,.1) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 25%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 0 25%, transparent 70%);
}

.hero-system::after {
  content: "NUTANIX AT THE CORE";
  left: 50%;
  top: 7%;
  translate: -50% 0;
  color: rgba(24,29,47,.46);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
  white-space: nowrap;
}

.hero-system .orbit {
  width: 72%;
  aspect-ratio: 1;
  left: 14%;
  top: 14%;
  right: auto;
  bottom: auto;
  z-index: 0;
  border: 1px solid rgba(52,87,245,.34);
  border-radius: 50%;
  box-shadow: inset 0 0 44px rgba(52,87,245,.035), 0 0 34px rgba(52,87,245,.035);
  animation: choice-orbit-forward 30s linear infinite;
}

.hero-system .orbit::before,
.hero-system .orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: satellite-depth 4.8s ease-in-out infinite alternate;
}

.hero-system .orbit::before {
  width: 12px;
  height: 12px;
  left: 13%;
  top: 5%;
  background: #485fff;
  box-shadow: 0 0 0 5px rgba(72,95,255,.1), 0 0 26px rgba(72,95,255,.72);
}

.hero-system .orbit::after {
  width: 8px;
  height: 8px;
  right: 9%;
  bottom: 13%;
  background: #6f61e8;
  box-shadow: 0 0 0 4px rgba(111,97,232,.1), 0 0 22px rgba(111,97,232,.68);
  animation-delay: -2.4s;
}

.hero-system .orbit-two {
  width: 48%;
  left: 26%;
  top: 26%;
  border-color: rgba(111,97,232,.25);
  animation: choice-orbit-reverse 22s linear infinite;
}

.hero-system .orbit-two::before {
  left: auto;
  right: 7%;
  top: 20%;
  width: 9px;
  height: 9px;
  background: #a59cff;
  box-shadow: 0 0 0 4px rgba(165,156,255,.11), 0 0 22px rgba(111,97,232,.62);
}

.hero-system .orbit-two::after {
  left: 10%;
  right: auto;
  bottom: 19%;
  width: 7px;
  height: 7px;
  background: #d7ff63;
  box-shadow: 0 0 0 4px rgba(215,255,99,.12), 0 0 22px rgba(150,190,35,.55);
}

.hero-system .system-core {
  inset: 33%;
  padding: 26px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  background: radial-gradient(circle at 30% 22%, rgba(137,151,255,.78), transparent 26%), linear-gradient(145deg, #4561ff 0%, #2539bd 56%, #111b68 100%);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 50%;
  box-shadow: 0 28px 80px rgba(39,60,194,.36), 0 0 0 12px rgba(52,87,245,.06), 0 0 0 28px rgba(52,87,245,.025);
  animation: core-breathe 5s ease-in-out infinite;
}

.hero-system .system-core::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
}

.hero-system .system-core::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  right: 22%;
  top: 17%;
  border-radius: 50%;
  background: #d7ff63;
  box-shadow: 0 0 18px rgba(215,255,99,.8);
}

.hero-system .system-core span,
.hero-system .system-core strong { position: relative; z-index: 1; }
.hero-system .system-core span { color: rgba(255,255,255,.72); }

.hero-system .outcome {
  min-width: 164px;
  border-color: rgba(52,87,245,.1);
  border-radius: 14px;
  background: linear-gradient(105deg,rgba(255,255,255,.62),rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
  color: rgba(11,13,18,.76);
  box-shadow: 0 10px 26px rgba(28,34,70,.045);
  animation: outcome-focus 12s ease-in-out infinite;
}

.hero-system .outcome b { color: #5267d8; font-weight: 800; }
.hero-system .outcome-one { left: 0; top: 26%; animation-delay: 0s; }
.hero-system .outcome-two { right: 0; top: 17%; animation-delay: 3s; }
.hero-system .outcome-three { right: 1%; bottom: 22%; animation-delay: 6s; }
.hero-system .outcome-four { left: 1%; bottom: 13%; animation-delay: 9s; }

@keyframes choice-orbit-forward {
  from { transform: rotate(-11deg); }
  to { transform: rotate(349deg); }
}

@keyframes choice-orbit-reverse {
  from { transform: rotate(17deg); }
  to { transform: rotate(-343deg); }
}

@keyframes satellite-depth {
  from { opacity: .45; transform: scale(.72); }
  to { opacity: 1; transform: scale(1.28); }
}

@keyframes core-breathe {
  0%,100% { transform: scale(1); box-shadow: 0 28px 80px rgba(39,60,194,.32), 0 0 0 12px rgba(52,87,245,.06), 0 0 0 28px rgba(52,87,245,.025); }
  50% { transform: scale(1.025); box-shadow: 0 34px 96px rgba(39,60,194,.42), 0 0 0 14px rgba(52,87,245,.075), 0 0 0 31px rgba(52,87,245,.032); }
}

@keyframes outcome-focus {
  0%,17% { transform: translateY(-3px) scale(1.018); border-color: rgba(101,88,238,.28); color: rgba(11,13,18,.84); box-shadow: 0 14px 34px rgba(51,61,132,.09),0 0 0 1px rgba(111,97,232,.055); }
  24%,100% { transform: none; border-color: rgba(52,87,245,.1); color: rgba(11,13,18,.76); box-shadow: 0 10px 26px rgba(28,34,70,.045); }
}

@media (max-width: 680px) {
  .hero-system .system-core { inset: 32%; padding: 12px; border-radius: 50%; }
  .hero-system .outcome { min-width: 146px; }
  .hero-system .outcome-one { left: 0; }
  .hero-system .outcome-two { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-system .orbit,
  .hero-system .system-core,
  .hero-system .outcome { animation: none !important; }
}