/* ==========================================================================
   hero.css
   The hero banner. Structural + static styles only — the entrance
   choreography lives in animations.css, and the ≥900px fluid scale-up
   lives in responsive.css (mobile-first).
   ========================================================================== */

.hero {
  background:
    radial-gradient(circle at top left, rgba(14, 165, 164, 0.24), transparent 32%),
    radial-gradient(circle at right, rgba(37, 99, 235, 0.22), transparent 28%),
    linear-gradient(rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.9)),
    url('../images/general.jpeg') center / cover;
  color: var(--color-on-dark);
  /* Mobile-first baseline (matches the original's own <900px values).
     A fluid clamp() takes over at wider viewports — see responsive.css. */
  padding-block: 6.25rem 5rem;
}

.hero .eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: #67e8f9;
  margin-bottom: 0.875rem;
}

.hero h1 {
  /* Mobile-first baseline; fluid clamp() takes over ≥900px in responsive.css */
  font-size: 2rem;
  line-height: 1.05;
  max-width: 48.75rem;
  margin-bottom: 1.125rem;
}

.hero p {
  max-width: 47.5rem;
  color: var(--color-on-dark-muted);
  margin-bottom: 1.875rem;
  font-size: clamp(0.92rem, 1.6vw + 0.6rem, 1rem);
}

.hero-actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}