/* The diagram has fixed labels and three independent circular orbits. */
.tech-visual {
  --orbit-blue: #1589b8;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 510px);
  height: auto;
  min-width: 0;
  margin: 0 auto;
  transform: none;
  isolation: isolate;
}

.orbit-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #deeff5 0%, #edf6f8 34%, #f8faf900 68%);
}

.orbit-drawing { display: block; width: 100%; height: 100%; overflow: visible; }
.orbit-ring { fill: none; stroke: #82bcd0; stroke-width: 1.5; }
.orbit-ring-middle { stroke: #a0cbd8; }
.orbit-ring-inner { stroke: #b4d4de; fill: #e4f1f54d; }
.orbit-satellite { transform-origin: 50% 50%; transform-box: view-box; }
.orbit-satellite-one { animation: wellness-orbit-turn 24s linear infinite; animation-delay: -3s; }
.orbit-satellite-two { animation: wellness-orbit-turn 32s linear infinite reverse; animation-delay: -13s; }
.orbit-satellite-three { animation: wellness-orbit-turn 19s linear infinite; animation-delay: -10s; }
.orbit-trail { fill: none; stroke: var(--orbit-blue); stroke-width: 2.5; stroke-linecap: round; opacity: .5; }
.orbit-trail-middle { stroke: #42aec9; opacity: .6; }
.orbit-trail-inner { stroke: #4c9cba; opacity: .45; }
.orbit-point { fill: var(--orbit-blue); stroke: var(--paper); stroke-width: 4; filter: drop-shadow(0 0 7px #1589b84d); }
.orbit-point-middle { fill: #42aec9; }
.orbit-point-inner { fill: #77acbf; }

.orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  aspect-ratio: 1;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
  background: linear-gradient(145deg, #2aa5cb, #08749f);
  color: #fff;
  box-shadow: 0 12px 35px #1487b12b, 0 0 0 9px #ffffffa6;
  font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: 2px;
}
.orbit-core::before {
  content: '';
  position: absolute;
  inset: -17px;
  border: 1px solid #39a3c45c;
  border-radius: inherit;
  animation: wellness-core-breathe 5s ease-in-out infinite;
}
.orbit-core span { font-size: .58em; font-weight: 500; letter-spacing: 5px; padding-left: 5px; }

.orbit-label {
  position: absolute;
  z-index: 1;
  padding: 9px 14px;
  border: 1px solid #d1e4eb;
  border-radius: 30px;
  background: #fbfdfdf5;
  box-shadow: 0 5px 20px #1c607008;
  color: #365a67;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .65px;
  white-space: nowrap;
}
.orbit-label-one { top: 8%; left: 48%; }
.orbit-label-two { top: 63%; left: 0; }
.orbit-label-three { right: 0; top: 78%; }
.orbit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: center;
  min-height: 44px;
  margin-top: -9px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #526c76;
  font-size: 14px;
  line-height: 1.5;
  transition: color .2s, background .2s;
}
.orbit-toggle:hover { color: var(--orbit-blue); background: #e7f1f4; }
.orbit-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.orbit-toggle .orbit-play-icon { display: none; }
.is-paused .orbit-toggle .orbit-play-icon { display: block; }
.is-paused .orbit-toggle .orbit-pause-icon { display: none; }
.is-paused .orbit-satellite, .is-paused .orbit-core::before,
.is-offscreen .orbit-satellite, .is-offscreen .orbit-core::before { animation-play-state: paused; }

@keyframes wellness-orbit-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes wellness-core-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.09); opacity: 1; } }

@media (max-width: 1150px) { .orbit-label { font-size: 13px; padding: 8px 11px; } }
@media (max-width: 900px) {
  .tech-visual { width: min(100%, 480px); height: auto; margin: 0 auto 15px; transform: none; }
  .orbit-label { font-size: 14px; padding: 9px 13px; }
  .orbit-core { font-size: 29px; }
}
@media (max-width: 400px) {
  .orbit-label { font-size: 12px; padding: 7px 10px; letter-spacing: .3px; }
  .orbit-core { font-size: 24px; }
  .orbit-core::before { inset: -12px; }
  .orbit-label-three { top: 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-satellite-one { transform: rotate(45deg); }
  .orbit-satellite-two { transform: rotate(210deg); }
  .orbit-satellite-three { transform: rotate(300deg); }
  .orbit-toggle { display: none; }
}