/* Hero: headline, intro and calls to action, with a canvas stage for the animation.
   .hero--split puts the text on the left and the stage (globe) on the right from 901px up; below that it stacks. */

.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--teal) 20%, transparent), transparent); }
.hero__inner { position: relative; }
.hero__text { padding-top: clamp(20px, 3.5vw, 44px); }
.hero__sub { max-width: 52ch; margin: 0 0 26px; color: var(--muted); font-size: clamp(1.08rem, 1.7vw, 1.25rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__stage { position: relative; margin-top: clamp(8px, 2vw, 24px); }
.hero__stage canvas { display: block; width: 100%; height: clamp(320px, 37vw, 470px); }

@media (min-width: 901px) {
  .hero--split .hero__inner { display: flex; align-items: flex-start; min-height: clamp(520px, 42vw, 600px); }
  .hero--split .hero__text { position: relative; z-index: 1; width: 46%; padding-top: clamp(28px, 4vw, 56px); }
  .hero--split h1 { max-width: none; font-size: clamp(2.2rem, 3.7vw, 3.5rem); }
  .hero--split .hero__stage { position: absolute; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter); margin: 0; }
  .hero--split .hero__stage canvas { height: 100%; }
}
.hero + .section { padding-top: clamp(40px, 5vw, 64px); }   /* the hero already leaves air below the globe */
@media (max-width: 900px) { .hero__stage canvas { height: clamp(260px, 76vw, 420px); } }