/* ================================================================
   HERO — the big banner at the top of the home page.
   The one deliberately bold move on the page: full-bleed brand
   gradient + the wave from the logo mark, carried at full scale.
   Everything downstream of it stays quiet on purpose.
   ================================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-deepwater), var(--color-primary-deep) 35%, var(--color-primary) 65%, var(--color-cyan));
  color: #fff;
  padding-block: clamp(48px, 5vw + 28px, 72px) clamp(40px, 4vw + 24px, 60px);
}
.hero-watermark {
  position: absolute;
  inset-block-start: -40px;
  inset-inline-end: -40px;
  width: 420px;
  max-width: 60vw;
  pointer-events: none;
}
/* No max-width override here on purpose: .container's own 1100px cap
   (shared/base.css) is what keeps this flush with the header logo and
   every other section's left edge. A narrower cap here would still
   inherit .container's margin-inline:auto and re-center itself in the
   middle of that space instead of hugging the shared left edge — the
   h1's clamp() and .hero-sub's own max-width already keep the text
   from stretching too wide without needing that. */
.hero-inner { position: relative; z-index: 1; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: var(--weight-label);
  opacity: 0.85;
  margin-block-end: 12px;
}
.hero h1 { font-size: clamp(2.2rem, 1.7rem + 2.5vw, 3.2rem); margin-block-end: 18px; }
.hero-sub { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem); opacity: 0.92; margin-block-end: 24px; max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }