/* ============================================================
   koppelingmetbol.css — scoped under body[data-page="koppelingmetbol"]
   Layout only; kleuren/componenten komen uit base.css
   ============================================================ */

body[data-page="koppelingmetbol"] .kmb-hero { padding-block: clamp(3rem,8vw,6rem) clamp(2rem,5vw,3.5rem); }

body[data-page="koppelingmetbol"] .kmb-hero__headline {
  display: grid; gap: .1em; margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
}
body[data-page="koppelingmetbol"] .kmb-hero__line { display: block; }
body[data-page="koppelingmetbol"] .kmb-hero__line--accent { color: var(--accent); }

body[data-page="koppelingmetbol"] .kmb-hero__sub {
  max-width: 62ch; color: var(--gl-muted); margin: 0 0 1.75rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}
body[data-page="koppelingmetbol"] .kmb-hero__sub strong { color: var(--gl-fg); }

body[data-page="koppelingmetbol"] .kmb-hero__tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
body[data-page="koppelingmetbol"] .kmb-tag {
  padding: .35rem .85rem; border: 1px solid var(--gl-border); border-radius: 999px;
  font-size: .82rem; color: var(--gl-muted); background: rgba(255,255,255,.03);
}
body[data-page="koppelingmetbol"] .kmb-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3rem; }

/* ---- kerncijfers ---- */
body[data-page="koppelingmetbol"] .kmb-hero__nums {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem,3vw,2.5rem); padding: clamp(1.25rem,3vw,2rem);
}
body[data-page="koppelingmetbol"] .kmb-num { display: grid; gap: .2rem; }
body[data-page="koppelingmetbol"] .kmb-num__val {
  font-family: var(--gl-font-display); font-weight: 800; line-height: 1;
  font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--accent);
}
body[data-page="koppelingmetbol"] .kmb-num__unit { font-size: .6em; }
body[data-page="koppelingmetbol"] .kmb-num__label { font-size: .82rem; color: var(--gl-muted); max-width: 22ch; }
body[data-page="koppelingmetbol"] .kmb-num__divider { width: 1px; align-self: stretch; min-height: 42px; background: var(--gl-border); }

/* ---- typografie ---- */
body[data-page="koppelingmetbol"] .kmb-section-title { font-size: clamp(1.9rem,4.5vw,3.25rem); margin: 0 0 1.25rem; }
body[data-page="koppelingmetbol"] .kmb-section-title em { font-style: normal; }
body[data-page="koppelingmetbol"] .kmb-body { color: var(--gl-muted); max-width: 62ch; margin: 0 0 1rem; }
body[data-page="koppelingmetbol"] .kmb-body strong { color: var(--gl-fg); }
body[data-page="koppelingmetbol"] .kmb-modules__intro { margin-bottom: 2.5rem; }

/* ---- uitdaging ---- */
body[data-page="koppelingmetbol"] .kmb-challenge {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem,4vw,3.5rem); align-items: start;
}
body[data-page="koppelingmetbol"] .kmb-pain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
body[data-page="koppelingmetbol"] .kmb-pain { display: flex; gap: 1rem; padding: 1.1rem 1.25rem; }
body[data-page="koppelingmetbol"] .kmb-pain__icon {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: .75rem; border: 1px solid var(--gl-border); color: var(--accent);
}
body[data-page="koppelingmetbol"] .kmb-pain strong { display: block; font-family: var(--gl-font-display); margin-bottom: .2rem; }
body[data-page="koppelingmetbol"] .kmb-pain p { margin: 0; font-size: .92rem; color: var(--gl-muted); }

/* ---- modules ---- */
body[data-page="koppelingmetbol"] .kmb-module-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;
}
body[data-page="koppelingmetbol"] .kmb-module { padding: 1.5rem; }
body[data-page="koppelingmetbol"] .kmb-module__num {
  font-family: var(--gl-font-display); font-weight: 800; font-size: .8rem;
  letter-spacing: .12em; color: var(--accent);
}
body[data-page="koppelingmetbol"] .kmb-module__title { font-size: 1.35rem; margin: .35rem 0 .65rem; }
body[data-page="koppelingmetbol"] .kmb-module p { margin: 0; color: var(--gl-muted); font-size: .95rem; }
body[data-page="koppelingmetbol"] .kmb-module--accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--gl-border)); }
body[data-page="koppelingmetbol"] .kmb-module__meta {
  margin-top: .85rem !important; font-family: var(--gl-font-display); font-weight: 800;
  font-size: .85rem; color: var(--accent) !important;
}

/* ---- aanpak ---- */
body[data-page="koppelingmetbol"] .kmb-approach .gl-zigzag { margin-top: clamp(2rem,5vw,3.5rem); }
body[data-page="koppelingmetbol"] .kmb-step-visual {
  aspect-ratio: 4 / 3; display: grid; place-content: center; gap: .5rem; text-align: center;
  background:
    radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.04), transparent);
}
body[data-page="koppelingmetbol"] .kmb-step-visual__num {
  font-family: var(--gl-font-display); font-weight: 800; line-height: 1;
  font-size: clamp(3rem, 8vw, 5rem); color: color-mix(in srgb, var(--accent) 75%, #fff);
}
body[data-page="koppelingmetbol"] .kmb-step-visual__tag {
  font-family: var(--gl-font-display); font-weight: 800; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gl-muted);
}
body[data-page="koppelingmetbol"] .kmb-step-title { font-size: clamp(1.35rem,2.6vw,1.85rem); margin: 0 0 .75rem; }

/* ---- integraties ---- */
body[data-page="koppelingmetbol"] .kmb-int-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-top: 2rem;
}
body[data-page="koppelingmetbol"] .kmb-int { padding: 1.4rem; }
body[data-page="koppelingmetbol"] .kmb-int h3 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem;
}
body[data-page="koppelingmetbol"] .kmb-int ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
body[data-page="koppelingmetbol"] .kmb-int li { color: var(--gl-fg); font-size: .95rem; padding-left: 1rem; position: relative; }
body[data-page="koppelingmetbol"] .kmb-int li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
}

/* ---- prijsmodel ---- */
body[data-page="koppelingmetbol"] .kmb-price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; margin-top: 2rem;
}
body[data-page="koppelingmetbol"] .kmb-price { padding: 1.5rem; }
body[data-page="koppelingmetbol"] .kmb-price--wide { grid-column: span 2; }
body[data-page="koppelingmetbol"] .kmb-price__val {
  display: block; font-family: var(--gl-font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2rem, 4vw, 2.75rem); color: var(--accent);
}
body[data-page="koppelingmetbol"] .kmb-price__per {
  display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gl-muted); margin: .55rem 0 .85rem;
}
body[data-page="koppelingmetbol"] .kmb-price p { margin: 0; color: var(--gl-muted); font-size: .93rem; }
body[data-page="koppelingmetbol"] .kmb-disclaimer { margin-top: 1.5rem; font-size: .82rem; color: var(--gl-muted); }

/* ---- voor wie ---- */
body[data-page="koppelingmetbol"] .kmb-aud-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2rem;
}
body[data-page="koppelingmetbol"] .kmb-aud { padding: 1.5rem; }
body[data-page="koppelingmetbol"] .kmb-aud h3 { font-size: 1.25rem; margin: 0 0 .6rem; }
body[data-page="koppelingmetbol"] .kmb-aud p { margin: 0; color: var(--gl-muted); font-size: .95rem; }

body[data-page="koppelingmetbol"] .kmb-quote { margin: 3rem 0 0; padding: clamp(1.5rem,4vw,2.5rem); max-width: 62ch; }
body[data-page="koppelingmetbol"] .kmb-quote__text {
  font-family: var(--gl-font-display); font-weight: 500; line-height: 1.35;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin: 0 0 1rem;
}
body[data-page="koppelingmetbol"] .kmb-quote__footer { display: grid; gap: .15rem; }
body[data-page="koppelingmetbol"] .kmb-quote__name { font-style: normal; font-weight: 700; }
body[data-page="koppelingmetbol"] .kmb-quote__role { font-size: .85rem; color: var(--gl-muted); }

/* ---- CTA ---- */
body[data-page="koppelingmetbol"] .kmb-cta__card { padding: clamp(1.75rem,5vw,3.5rem); position: relative; overflow: hidden; }
body[data-page="koppelingmetbol"] .kmb-cta__card::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  top: -140px; right: -110px; filter: blur(40px); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 32%, transparent), transparent);
}
body[data-page="koppelingmetbol"] .kmb-cta__title { font-size: clamp(1.75rem,4vw,3rem); margin: 0 0 1rem; }
body[data-page="koppelingmetbol"] .kmb-cta__sub { color: var(--gl-muted); max-width: 58ch; margin: 0 0 1.75rem; }
body[data-page="koppelingmetbol"] .kmb-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; position: relative; z-index: 1; }

/* ---- volgende case ---- */
body[data-page="koppelingmetbol"] .kmb-next__inner { display: grid; gap: .75rem; justify-items: start; }
body[data-page="koppelingmetbol"] .kmb-next__link { display: inline-flex; align-items: baseline; gap: .75rem; }
body[data-page="koppelingmetbol"] .kmb-next__label {
  font-family: var(--gl-font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.5rem);
}
body[data-page="koppelingmetbol"] .kmb-next__arrow { color: var(--accent); font-size: 1.5rem; transition: transform .3s var(--gl-ease); }
body[data-page="koppelingmetbol"] .kmb-next__link:hover .kmb-next__arrow { transform: translateX(6px); }
body[data-page="koppelingmetbol"] .kmb-next__sub { color: var(--gl-muted); margin: 0; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  body[data-page="koppelingmetbol"] .kmb-challenge { grid-template-columns: 1fr; }
  body[data-page="koppelingmetbol"] .kmb-price--wide { grid-column: auto; }
  body[data-page="koppelingmetbol"] .kmb-num__divider { display: none; }
}