/* ---------- hero: the crossing ---------- */

.hero {
  /* the copy's rhythm: the sub-line stays close to the headline, the actions
     stand apart from the message, the intake gauge stays near the actions */
  --hero-gap-sub: clamp(26px, 2.6vw, 38px);
  --hero-gap-act: clamp(40px, 4.4vw, 64px);
  --hero-gap-note: clamp(28px, 2.8vw, 40px);
  /* phones: the scene takes what the first screen (browser bars shown, svh)
     leaves after the nav and about 340px of copy down to the button */
  --hero-scene-phone: clamp(224px, calc(100svh - var(--nav-h) - 340px), 380px);
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(110% 90% at 66% 46%, #0d0e0f 0%, #040404 72%);
}
.hero-gl,
.hero-hud { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-hud { pointer-events: none; }
.hero.no-webgl {
  background-image: radial-gradient(rgba(233, 234, 234, 0.22) 1px, transparent 1.3px);
  background-size: 22px 22px;
}
/* the scene frames itself beside the copy's measured right edge (js/sections/hero.js) */
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: var(--nav-h); padding-bottom: clamp(16px, 4vh, 48px); pointer-events: none; }
.hero-content { max-width: 34rem; pointer-events: auto; }

/* three lines at every width: "Your company's / safe passage to / being AI-native." */
.display {
  max-width: 8.4em;
  font-size: clamp(2.375rem, 4.4vw, 4.25rem);
  font-weight: 480;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.hero-sub {
  margin-top: var(--hero-gap-sub);
  max-width: 26em;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: balance;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: var(--hero-gap-act); }
.hero .intake-note { margin-top: var(--hero-gap-note); }

/* 760 to 1099px: the scene takes its own block under the copy */
@media (max-width: 1099px) {
  .hero { display: block; min-height: 0; padding-bottom: min(60vh, 540px); }
  /* the headline has the full width here, so it sets one step larger */
  .display { font-size: clamp(2.375rem, 5.4vw, 3.5rem); }
  .hero-gl,
  .hero-hud { top: auto; height: min(60vh, 540px); }
  .hero-inner { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 72px)); padding-bottom: clamp(48px, 7vw, 72px); }
}

/* phones: the scene sits above the copy, directly under the nav */
@media (max-width: 760px) {
  .hero { --hero-gap-sub: 20px; --hero-gap-act: 28px; --hero-gap-note: 24px; padding-bottom: 0; }
  .hero-gl,
  .hero-hud { top: var(--nav-h); bottom: auto; height: var(--hero-scene-phone); }
  .hero-inner { padding-top: calc(var(--nav-h) + var(--hero-scene-phone) + 20px); padding-bottom: 64px; }
}

@media (max-width: 560px) {
  .hero-actions .text-link { margin: 0 auto; }
}

/* phones on their side: the copy beside the scene, as on wide screens
   (hero.js frames the ship in the water right of the copy), sized so the
   headline and the button fit the short screen */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 600px) and (max-width: 1099px) {
  .hero { --hero-gap-sub: 14px; --hero-gap-act: 20px; --hero-gap-note: 18px; display: flex; min-height: 100svh; padding-bottom: 0; }
  .hero-gl,
  .hero-hud { top: 0; bottom: auto; height: 100%; }
  .hero-inner { padding-top: var(--nav-h); padding-bottom: 12px; }
  .hero-content { max-width: min(400px, 50vw); }
  .display { font-size: clamp(2rem, 4.6vw, 2.375rem); }
  .hero-sub { font-size: 16px; }
  .hero-actions { gap: 12px 24px; }
}