/* The existing hero layout stays in place. Only its globe is replaced. */
#heroOrbBall.globe-interactive {
  --globe-x: 0px;
  --globe-y: 0px;
  outline-offset: 9px;
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
}

#heroOrbBall #heroOrbFx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.globe-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 15px 23px #28638e12);
}
.globe-fallback svg {
  width: 100%;
  height: 100%;
  display: block;
}
.globe-ready .globe-fallback {
  visibility: hidden;
}
.globe-orbit {
  position: absolute;
  inset: 3%;
  border: 1px dashed #9dbbd444;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.globe-orbit::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 13%;
  right: 13%;
  background: #8eb5d0;
  border-radius: 50%;
}
:root[data-motion-running] .globe-orbit {
  animation: globe-orbit-turn 85s linear infinite;
}
.globe-tag {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 6px 15px #1a4c7110;
  font-size: clamp(0.6rem, 1.3vw, 0.78rem);
  line-height: 1.8;
  pointer-events: none;
  transform: translate3d(var(--globe-x), var(--globe-y), 0);
}
.globe-tag > i {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
}
.globe-tag-one {
  top: 15%;
  right: -1%;
}
.globe-tag-two {
  top: 47%;
  left: -3%;
  transform: translate3d(calc(-1 * var(--globe-x)), calc(-1 * var(--globe-y)), 0);
}
.globe-tag-three {
  bottom: 14%;
  right: 6%;
}
.globe-tag-three > i {
  background: var(--gold);
}
:root[data-motion-running] #heroOrbBall.globe-interactive {
  cursor: grab;
}
:root[data-motion-running] #heroOrbBall.globe-interactive.is-dragging {
  cursor: grabbing;
}
:root[data-motion-paused] .globe-tag {
  transform: none !important;
}
@keyframes globe-orbit-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 600px) {
  .globe-tag {
    font-size: 0.64rem;
    padding: 5px 10px;
    gap: 6px;
  }
  .globe-tag-one {
    right: -3%;
  }
  .globe-tag-two {
    left: -5%;
  }
  .globe-tag-three {
    right: 1%;
  }
}
@media (max-height: 560px) {
  .globe-tag {
    font-size: 0.56rem;
    padding: 3px 7px;
    gap: 5px;
  }
  .globe-tag-one {
    top: 10%;
    right: -42%;
  }
  .globe-tag-two {
    top: 46%;
    left: -50%;
  }
  .globe-tag-three {
    bottom: 3%;
    right: -40%;
  }
  .globe-tag > i {
    width: 4px;
    height: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .globe-orbit {
    animation: none !important;
  }
  .globe-tag {
    transform: none !important;
  }
}