.hero-orbit {
  width: min(60vw, 650px);
  height: min(60vw, 650px);
  right: 4vw;
}

.hero-orbit .orbit-dot {
  position: absolute;
  inset: 0;
  animation: dot-orbit 12s linear infinite;
}

.hero-orbit .orbit-dot b {
  position: absolute;
  right: 22%;
  top: 20%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 30px 9px rgba(97, 216, 185, .55);
  animation: pulse 2.4s ease-in-out infinite;
}

.hero-orbit .inner-orbit-dot {
  position: absolute;
  inset: 37%;
  animation: inner-dot-orbit 10s linear infinite;
}

.hero-orbit .inner-orbit-dot b {
  position: absolute;
  right: -6px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 24px 7px rgba(237, 174, 120, .52);
  transform: translateY(-50%);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes dot-orbit {
  to { rotate: 360deg; }
}

@keyframes inner-dot-orbit {
  to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit .orbit-dot,
  .hero-orbit .inner-orbit-dot { animation: none; }
}