.title-bar {
  background: #0f1c7d;
  color: #fff;
  text-align: center;
  padding: 18px 14px;
  border-radius: 12px;
  margin: 16px 0 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.title-bar h1 {
  margin: 0;
}
/* ===== Unieke sport-stijl ===== */
:root{
  --sport-blue: #1a3cff;     /* koningsblauw */
  --sport-lime: #a7ff4b;     /* neon-lime accent */
  --ink: #10131a;
  --muted: #ffffff;
  --card: #ffffff;
  --ring: rgba(16,19,26,.08);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(26,60,255,.12), transparent 55%),
    radial-gradient(1200px 400px at 90% 110%, rgba(167,255,75,.12), transparent 55%),
    #f7f8fa;
}

/* HERO */
.sport-hero{
  position: relative;
  background:
    linear-gradient(135deg, rgba(26,60,255,.92), rgba(16,25,88,.95)),
    url("https://images.unsplash.com/photo-1517649763962-0c623066013b?q=80&w=1600&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  color:#fff;
  padding: 72px 18px;
  overflow:hidden;
}
.sport-hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(500px 250px at 85% -10%, rgba(167,255,75,.35), transparent 60%);
  pointer-events:none;
}
.hero-inner{
  max-width: 1100px; margin:0 auto;
}
.sport-hero h1{
  margin:0 0 8px; font-size: clamp(28px, 5vw, 44px); font-weight:800;
}
.sport-hero p{
  margin:0; max-width: 760px; line-height:1.7; opacity:.95;
}
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.chip{
  background: #dfe1e224;
  border:1px solid rgba(84, 35, 35, 0.35);
  color:#fff; padding:8px 12px; border-radius:999px; font-weight:600;
}

/* WRAP */
.sport-wrap{ max-width:1100px; margin: 28px auto 60px; padding: 0 18px; }

/* FEATURE RIJEN */
.feature{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 26px;
  align-items: center;
  background: var(--card);
  border:1px solid var(--ring);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 18px;
  margin-bottom:24px;
}
.feature:nth-child(even){
  grid-template-columns: 1fr 1.1fr;
}
.feature:nth-child(even) .feature-media{ order:2; }
.feature:nth-child(even) .feature-content{ order:1; }

.feature-media img{
  width:100%; height: 280px;
  object-fit: cover; border-radius: 14px;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}
.feature-content h2{
  margin: 6px 0 10px;
  font-size: clamp(20px, 2.8vw, 28px);
  color: var(--sport-blue);
  font-weight:800;
}
.feature-content p{ color: var(--muted); line-height:1.7; margin:0 0 10px; }
.bullets{ margin: 0 0 12px 18px; color: var(--muted); }
.bullets li{ margin: 6px 0; }

/* Buttons */
.btn-ghost{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:2px solid var(--sport-blue);
  color: var(--sport-blue);
  text-decoration:none; font-weight:700;
  transition: .15s ease;
}
.btn-ghost:hover{
  background: var(--sport-blue); color:#fff; transform: translateY(-1px);
}

.btn-solid{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--sport-blue), #0e2bd6);
  color:#fff; text-decoration:none; font-weight:800;
  box-shadow: 0 12px 28px rgba(26,60,255,.25);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn-solid:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(26,60,255,.35);
}

/* CTA */
.cta{
  text-align:center;
  background: linear-gradient(135deg, rgba(14, 19, 49, 0.08), rgba(167,255,75,.10));
  border:1px dashed rgba(26,60,255,.35);
  border-radius:16px;
  padding: 24px 18px;
  margin-top: 36px;
}
.cta h3{ margin:0 0 6px; font-size: clamp(20px, 3.2vw, 26px); }
.cta p{ margin:0 0 14px; color:var(--muted); }

/* Responsive */
@media (max-width: 900px){
  .feature{
    grid-template-columns:1fr;
  }
  .feature-media img{ height: 220px; }
}

/* Afbeeldingen in mooie vakken */
.image-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.image-card img {
  width: 100%;
  height: 260px;   /* vaste hoogte, kun je aanpassen */
  object-fit: cover;
  display: block;
}