/* ── Hero ────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
  padding: 80px 0 100px;
  color: #fff;
  text-align: center;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; margin-bottom: .75rem; line-height: 1.15; }
.hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,.8); max-width: 520px; margin-bottom: 2.5rem; }
.hero-search-bar {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem; width: 100%; max-width: 820px;
  box-shadow: var(--shadow-lg);
}
.hero-search-fields { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.hero-select, .hero-input { flex: 1; min-width: 160px; }
.hero-search-btn { flex-shrink: 0; }

/* ── How it works ────────────────────────────────── */
.how-it-works { padding: 80px 0; background: var(--white); }
.section-title { text-align: center; font-size: 1.6rem; font-weight: 700; margin-bottom: 2.5rem; }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 768px) { .how-steps { grid-template-columns: 1fr; } }
.how-step { text-align: center; padding: 1.5rem; }
.how-step-icon {
  width: 70px; height: 70px; border-radius: 50%;
  background: #EFF6FF; color: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.how-step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.how-step p { color: var(--text-secondary); font-size: .9rem; }

/* ── Sports section ──────────────────────────────── */
.sports-section { padding: 60px 0; }
.sports-badges-grid { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.sport-badge-link { text-decoration: none; }
.sport-badge-link:hover .badge { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ── Stats ───────────────────────────────────────── */
.stats-section { padding: 60px 0; background: var(--bg); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary); }
.stat-label { font-size: .9rem; color: var(--text-secondary); margin-top: .25rem; }

/* ── CTA ─────────────────────────────────────────── */
.cta-section { background: var(--primary); padding: 70px 0; color: #fff; }
.cta-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; }
@media (max-width: 768px) { .cta-inner { grid-template-columns: 1fr; } .cta-divider { display: none; } }
.cta-block { text-align: center; }
.cta-block h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.cta-block p { color: rgba(255,255,255,.75); margin-bottom: 1.25rem; font-size: .95rem; }
.cta-divider { width: 1px; height: 80px; background: rgba(255,255,255,.25); }