
.clients-globe {
  display: none;
  position: relative;
  width: 100%;
  height: 880px;
  margin-top: 24px;
  margin-bottom: 48px;
}

.clients.clients--globe {
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.clients.clients--globe .eyebrow { color: var(--red); }
.clients.clients--globe h2 { color: var(--text); }

[data-theme="dark"] .clients.clients--globe {
  background: radial-gradient(ellipse at 50% 38%, #161b22 0%, #0a0c10 72%);
}
[data-theme="dark"] .clients.clients--globe h2 { color: #ffffff; }

.clients.clients--globe .clients-globe { display: block; }
.clients.clients--globe .clients__ticker { display: none; }

.clients-globe canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 768px) {
  .clients-globe {
    height: 520px;
    margin-top: 16px;
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .clients-globe { height: 400px; }
}

.clients-globe.is-rings > canvas { display: none !important; }
.clients-globe:not(.is-rings) .clients-rings__scene { display: none; }

.clients-rings__scene { position: absolute; inset: 0; overflow: hidden; }

.clients-rings__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}
.clients-rings__ring--outer { --r: 132px; animation: cr-spin 60s linear infinite; }
.clients-rings__ring--inner { --r: 78px;  animation: cr-spin 46s linear infinite reverse; }

.clients-rings__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  margin: -29px;
  transform-origin: center center;
}
.clients-rings__fix,
.clients-rings__spin {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.clients-rings__ring--outer .clients-rings__spin { animation: cr-spin 60s linear infinite reverse; }
.clients-rings__ring--inner .clients-rings__spin { animation: cr-spin 46s linear infinite; }

.clients-rings__node a { display: grid; place-items: center; width: 100%; height: 100%; }
.clients-rings__node img { max-width: 100%; max-height: 100%; object-fit: contain; }

.clients-rings__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
}
.clients-rings__center img { width: 100%; height: 100%; object-fit: contain; }

@keyframes cr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .clients-rings__ring,
  .clients-rings__spin { animation: none !important; }
}

@media (max-width: 480px) {
  .clients-rings__ring--outer { --r: 112px; }
  .clients-rings__ring--inner { --r: 66px; }
  .clients-rings__node { width: 50px; height: 50px; margin: -25px; }
}
