/* A decorative holographic Earth. Geometry stays inside a stable square. */
.hero-earth .earth-visual { min-width: 0; min-height: 0; padding: 0; margin: 0; width: 100%; }
.hero-earth .hero-grid { gap: 26px; padding-top: 54px; padding-bottom: 42px; }
.hero-earth .motion-network { opacity: .32; }
.earth-scene { position: relative; isolation: isolate; aspect-ratio: 1; width: 100%; margin: 0; }
.earth-space { position: absolute; inset: 0; pointer-events: none; }
.earth-space::before {
  content: ''; position: absolute; inset: 8% 2% 14%; z-index: -1;
  background:
    linear-gradient(#71dcf54d, #71dcf54d) left top / 21px 1px no-repeat,
    linear-gradient(#71dcf54d, #71dcf54d) left top / 1px 21px no-repeat,
    linear-gradient(#71dcf54d, #71dcf54d) right top / 21px 1px no-repeat,
    linear-gradient(#71dcf54d, #71dcf54d) right top / 1px 21px no-repeat,
    linear-gradient(#71dcf530, #71dcf530) left bottom / 21px 1px no-repeat,
    linear-gradient(#71dcf530, #71dcf530) left bottom / 1px 21px no-repeat,
    linear-gradient(#71dcf530, #71dcf530) right bottom / 21px 1px no-repeat,
    linear-gradient(#71dcf530, #71dcf530) right bottom / 1px 21px no-repeat;
}
.earth-fallback, .earth-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.earth-canvas { opacity: 0; }
.earth-scene[data-earth-ready=true] .earth-canvas { opacity: 1; }
.earth-scene[data-earth-ready=true] .earth-fallback { visibility: hidden; }
.earth-topline {
  position: absolute; inset: 3% 6% auto; display: flex; align-items: center; justify-content: space-between;
  gap: 15px; font-size: 9px; font-weight: 600; letter-spacing: .15em; color: #a5d5ff;
}
.earth-topline>span:last-child { color: #88a3c2; font-size: 8px; letter-spacing: .12em; }
.earth-status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #71dcf5; box-shadow: 0 0 9px #71dcf580; }
.earth-caption { position: absolute; bottom: 3%; left: 8%; right: 8%; text-align: center; }
.earth-caption>span { display: block; font-size: 8px; font-weight: 500; letter-spacing: .18em; color: #88a3c2; margin-bottom: 8px; }
.earth-caption>strong { display: block; font-size: clamp(14px, 1.2vw, 17px); font-weight: 500; letter-spacing: -.2px; color: #c4edff; }
.earth-caption>strong::before, .earth-caption>strong::after { content: ''; display: inline-block; width: 22px; height: 1px; vertical-align: middle; margin: 0 11px; background: #71dcf54d; }
@media (min-width: 1500px) { .earth-scene { max-width: 590px; margin-inline: auto; } }
@media (max-width: 1100px) { .hero-earth .hero-grid { gap: 12px; } .earth-topline { font-size: 8px; letter-spacing: .1em; } }
@media (max-width: 800px) {
  .hero-earth .hero-grid { grid-template-columns: 1fr; gap: 16px; padding-top: 46px; padding-bottom: 22px; }
  .hero-earth .earth-visual { width: min(100%, 470px); margin-inline: auto; }
  .earth-topline { font-size: 9px; }
  .earth-caption>strong { font-size: 16px; }
}
@media (max-width: 480px) {
  .hero-earth .hero-grid { padding-top: 38px; gap: 12px; }
  .earth-topline { font-size: 7px; gap: 6px; }
  .earth-topline>span:last-child { font-size: 6px; }
  .earth-caption>span { font-size: 6.5px; letter-spacing: .12em; margin-bottom: 5px; }
  .earth-caption>strong { font-size: 13px; }
  .earth-caption>strong::before, .earth-caption>strong::after { width: 12px; margin-inline: 7px; }
}
@media (forced-colors: active) {
  .earth-scene[data-earth-ready=true] .earth-fallback { visibility: visible; }
  .earth-canvas, .earth-space::before { display: none; }
  .earth-topline, .earth-topline>span:last-child, .earth-caption>span, .earth-caption>strong { color: CanvasText; }
}