.globe-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(360px, 1.22fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(20px, 2.5vw, 36px);
  margin-bottom: 20px;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 70% 50%, #163056 0%, #0c1a32 46%, #06101f 88%);
  border: 1px solid #31425b;
  border-radius: 20px;
  box-shadow: 0 22px 58px #0713282d;
}

.globe-copy { position: relative; z-index: 1; }
.globe-kicker { color: #eac474; font-size: 13px; letter-spacing: .14em; font-weight: 800; }
.globe-stage { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: center; isolation: isolate; }
.globe-stage::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: #dbb5682b; filter: blur(44px); z-index: -1; }
.globe-stage::after { content: ""; position: absolute; inset: 7%; border: 2px solid #d4aa57b8; border-radius: 50%; box-shadow: 0 0 25px #dbb5684f, inset 0 0 21px #f4ca6833; pointer-events: none; }
.globe-stage img, .globe-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe-stage img { object-fit: contain; }
.globe-stage canvas { opacity: 0; pointer-events: none; }
.globe-stage canvas.ready { opacity: 1; }
.globe-stage [hidden] { display: none !important; }

@media (max-width: 860px) {
  .globe-hero { grid-template-columns: 1fr; text-align: center; padding: 24px; }
  .hero-actions { justify-content: center; }
}

@media (max-width: 560px) {
  .globe-hero { padding: 20px 14px; border-radius: 14px; }
}