/* ========== HERO ========== */
/* The CTA's focus ring is drawn on this gradient, not on a flat colour, so it has
   to clear 3:1 against *every* visible stop — from #1a2a3a at the top-left to
   #89603d at the bottom-right corner (the #e67e22 stop sits at 150%, off-canvas).
   Worst case across that range: --accent-color-strong 1.06:1 (all but invisible,
   it nearly matches the corner), --secondary-color 2.46:1, white 5.52:1.
   White is the only one that passes, so the hero overrides the ring colour. */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--height-navbar);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--hero-gradient-mid-color) 50%, var(--accent-color) 150%);
  color: var(--white);
  --focus-ring-color: var(--white);
  text-align: center;
}

.hero-content h1 {
  color: var(--white);
  font-size: var(--font-size-hero-base);
  margin-bottom: var(--space-lg);
}

.hero-content p {
  color: var(--white-alpha-90);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}