/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-xl) 0;
}
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -160px;
  width: 480px;
  height: 480px;
  background: var(--color-bg-warm);
  border-radius: 58% 42% 55% 45% / 45% 52% 48% 55%;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.hero-tekst .overline {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}
.hero-tekst h1 { margin-bottom: var(--space-md); }
.hero-tekst > p {
  font-size: 18px;
  color: var(--color-text-light);
  max-width: 460px;
  margin-bottom: var(--space-lg);
}
.hero-acties { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.hero-beeld { position: relative; max-width: 480px; }
.hero-beeld img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.hero-beeld::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.5;
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
  .hero-beeld { justify-self: end; width: 100%; }
}

/* USP strip */
.usp-strip { padding: var(--space-lg) 0; }
.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.usp {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}
.usp svg { width: 28px; height: 28px; color: var(--color-primary); }
.usp h3 { font-size: 1.02rem; font-weight: 600; }
.usp p { font-size: 15px; color: var(--color-text-light); margin: 0; }

@media (min-width: 900px) {
  .usp-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
}

/* Behandelingen slider/grid */
.behandelingen-grid {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-sm);
}
.behandelingen-grid::-webkit-scrollbar { display: none; }

.behandeling-card {
  flex: 0 0 calc(85vw - var(--space-lg));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.behandeling-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.behandeling-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.behandeling-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.behandeling-card:hover .behandeling-card__media img { transform: scale(1.05); }

.behandeling-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.behandeling-card__body h3 { font-size: 1.15rem; }
.behandeling-card__body p { font-size: 15px; color: var(--color-text-light); margin: 0; flex: 1; }
.behandeling-card__prijs { font-size: 14px; color: var(--color-text-muted); }

@media (min-width: 640px) {
  .behandelingen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
  }
  .behandeling-card { flex: unset; }
}
@media (min-width: 1024px) {
  .behandelingen-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Sfeerblok */
.sfeer-inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.sfeer-beeld img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.sfeer-tekst h2 { margin-bottom: var(--space-md); }
.sfeer-tekst p { color: var(--color-text); }
.sfeer-tekst .btn { margin-top: var(--space-sm); }

@media (min-width: 900px) {
  .sfeer-inner { grid-template-columns: 0.9fr 1.1fr; }
  .sfeer-beeld { order: 1; }
  .sfeer-tekst { order: 2; }
}

/* Natuurlijk blok */
.natuurlijk {
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.natuurlijk h2 { margin-bottom: var(--space-md); }
.natuurlijk ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.natuurlijk li { display: flex; gap: var(--space-sm); align-items: baseline; }
.natuurlijk li::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-light); transform: translateY(-2px); }
@media (min-width: 900px) {
  .natuurlijk { grid-template-columns: 1.1fr 0.9fr; padding: var(--space-xl); }
}
.natuurlijk-beeld img,
.natuurlijk-beeld video { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-bg-warm); }

/* Locatieblok */
.locatie-grid { display: grid; gap: var(--space-lg); }
.locatie-info h2 { margin-bottom: var(--space-md); }
.locatie-info address { font-style: normal; margin-bottom: var(--space-md); }
.locatie-info a { color: var(--color-primary); }
.locatie-kaart iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) {
  .locatie-grid { grid-template-columns: 1fr 1.2fr; align-items: start; }
}