/* =====================================================
   HERO SECTION BASE STYLES
   ===================================================== */

.hero {
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: var(--xxxl) var(--xl);
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  margin-bottom: var(--md);
}

.hero p {
  max-width: 900px;
  margin: 0 auto var(--xxl);
  color: #eef2f0;
  font-size: 1.15rem;
}

/* Stats Section (often appears with hero) */
.stats {
  background: var(--green-primary);
  color: white;
  padding: var(--xl) var(--md);
  overflow: hidden;
}

.stats-grid {
  display: flex;
  gap: var(--xxl);
  text-align: center;
  width: max-content;
  animation: statsMarquee 12s ease-in-out infinite alternate;
}

.stats-grid>div {
  flex: 0 0 auto;
  min-width: 320px;
}

.stats .number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
}

@keyframes statsMarquee {
  from {
    transform: translateX(-25%);
  }

  to {
    transform: translateX(25%);
  }
}