/* =============================================================
   BOUWHUIS MEDIA — HOMEPAGE-SECTIES
   Volgorde: hero · probleem · systeem · dashboard · voor wie ·
             ons werk · pakketten · faq · cta
   ============================================================= */

/* ============================================================
   1. HERO
   ============================================================ */

.hero {
  position: relative;
  padding-top: clamp(3.5rem, 2rem + 5vw, 7rem);
  padding-bottom: clamp(3rem, 2rem + 3.5vw, 5.5rem);
  overflow: hidden;
}

/* De enige gradient op de hele site: nauwelijks zichtbaar. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(27,79,224,.09), rgba(27,79,224,0) 70%);
  pointer-events: none;
}

.hero__inner { position: relative; text-align: center; max-width: 1000px; margin-inline: auto; }
.hero__inner .lead { max-width: 58ch; }

/* De kop is hier het beeld, dus fors groter dan elders op de site. */
.hero h1 {
  font-size: clamp(2.4rem, 1.15rem + 4.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.042em;
  font-weight: 650;
  margin-bottom: var(--space-4);
}

/* Product + prijs. Bewust kleiner dan de headline: ~68% ervan,
   zodat het één hiërarchie vormt in plaats van twee koppen. */
.hero__claim {
  font-size: clamp(1.3rem, .8rem + 2.05vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--brand);
  text-wrap: balance;
  margin-bottom: var(--space-5);
}

.hero .lead { margin-inline: auto; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* Drie groene pills onder de hero-tekst. Geen zinnen maar losse
   feiten, zodat je ze in één blik scant. */
.hero__usps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: var(--space-6);
}
.hero__usps li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .625rem 1rem;
  border-radius: var(--r-full);
  background: var(--positive-vlak);
  border: 1px solid var(--positive-rand);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hero__usps svg {
  flex-shrink: 0;
  color: var(--positive-diep);
}

/* Browservenster — nog in gebruik op /hoe-het-werkt */
.browser {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #DDE3EC; }
.browser__url {
  flex: 1;
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-full);
  padding: .2rem .75rem;
  max-width: 320px;
  margin-inline: auto;
}
.browser__body { background: var(--surface-2); }
.browser__body img { width: 100%; }

/* Vertrouwensstrip direct onder de hero */
.trust { padding-block: var(--space-8) var(--space-7); }
.trust__kop { margin-bottom: var(--space-6); }
.trust p {
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* Reviewscore. Verschijnt alleen als je hem invult in $socialproof. */
.trust__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.trust__score strong { color: var(--ink); font-weight: 650; }
.trust__sterren { display: inline-flex; gap: .08rem; color: var(--star); }

/* Maximaal drie zeer korte quotes, bewust klein gehouden */
.trust__quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.trust__quote { margin: 0; }
.trust__quote blockquote {
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -.01em;
}
.trust__quote figcaption {
  margin-top: .5rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-soft);
}
.trust__quote figcaption span {
  display: block;
  font-weight: 400;
  color: var(--ink-muted);
}

/* Doorlopende klantenbalk. Van rand tot rand, dus bewust buiten
   .container. De rij staat er twee keer in; zodra de eerste groep
   volledig weg is springt de animatie terug naar 0 en oogt het
   als een oneindige lus. */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-right: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.marquee__group li {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  font-weight: 650;
  letter-spacing: -.02em;
  color: #A9B2C2;
  white-space: nowrap;
  user-select: none;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ============================================================
   2. PROBLEEM
   ============================================================ */

.problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* Bewust geen kaarten meer: alleen een nummer en een regel. */
.problem__card {
  padding: var(--space-5) 0 0;
  border-top: 2px solid var(--brand-tint-2);
}
.problem__card .nr {
  display: block;
  font-size: var(--fs-micro); font-weight: 600; color: var(--brand);
  letter-spacing: var(--ls-label);
  margin-bottom: var(--space-3);
}
.problem__card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 24ch;
}

/* ============================================================
   6. ONS WERK — donker
   ============================================================ */

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.work-card {
  border: 1px solid var(--dark-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--dark-2);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.work-card:hover { border-color: rgba(255,255,255,.24); transform: translateY(-3px); }
.work-card__shot { aspect-ratio: 16/11; overflow: hidden; background: #16213B; }
.work-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--dark-line);
}
.work-card__meta strong { color: #fff; font-size: var(--fs-small); font-weight: 600; display: block; }
.work-card__meta span { font-size: var(--fs-micro); color: rgba(255,255,255,.45); }
.work-card__live {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 600; color: #6FE3AE;
  flex-shrink: 0;
}
.work-card__live i { width: 6px; height: 6px; border-radius: 50%; background: #6FE3AE; }

/* Alleen zichtbaar als je in $werk een 'resultaat' invult */
.work-card__resultaat {
  flex-shrink: 0;
  max-width: 45%;
  text-align: right;
  font-size: .7rem; font-weight: 600;
  color: #9FC0FF;
  line-height: 1.3;
}

/* De boodschap "bewezen basis, eigen uitstraling", compact onder het bewijs */
.work__punten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--dark-line);
}
.work__punt { display: flex; gap: .65rem; align-items: flex-start; }
.work__punt svg { color: #7FA4FF; flex-shrink: 0; margin-top: 3px; }
.work__punt strong { display: block; color: #fff; font-size: var(--fs-small); font-weight: 600; }
.work__punt span   { font-size: var(--fs-small); color: rgba(255,255,255,.5); }

.work__foot {
  margin-top: var(--space-7);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
}
.work__punten + .work__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--dark-line);
}
.work__foot p { font-size: var(--fs-small); color: rgba(255,255,255,.5); max-width: 52ch; }

/* ============================================================
   8. FAQ
   ============================================================ */

.faq { max-width: 800px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: flex-start; gap: var(--space-4);
  width: 100%; text-align: left;
  padding: var(--space-5) 0;
  font-size: var(--fs-lead); font-weight: 600; color: var(--ink);
  letter-spacing: -.018em; line-height: 1.4;
}
.faq__q .icon {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-muted);
  transition: all var(--t-base) var(--ease);
}
.faq__item.is-open .faq__q .icon { background: var(--brand); border-color: var(--brand); color: #fff; transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t-base) var(--ease); }
.faq__item.is-open .faq__a { max-height: 420px; }
.faq__a p { padding-bottom: var(--space-6); font-size: var(--fs-small); max-width: 68ch; }

/* ============================================================
   9. SLOT-CTA
   ============================================================ */

.cta-final { background: var(--dark); position: relative; overflow: hidden; }
.cta-final::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: min(1100px, 140vw); aspect-ratio: 1.6; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(27,79,224,.20), rgba(27,79,224,0) 68%);
  pointer-events: none;
}
.cta-final__inner { position: relative; text-align: center; max-width: 620px; margin-inline: auto; }
.cta-final h2 { color: #fff; margin-bottom: var(--space-4); }
.cta-final p { color: rgba(255,255,255,.62); font-size: var(--fs-lead); }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-7); }
.cta-final__meta {
  margin-top: var(--space-5);
  font-size: var(--fs-small); color: rgba(255,255,255,.42);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: center;
}

/* ============================================================
   3. DE SYSTEEMSECTIE — klikbare productdemo
   ------------------------------------------------------------
   Vijf panelen liggen op elkaar in dezelfde gridcel. Alleen de
   actieve is zichtbaar. Daardoor is de hoogte altijd die van het
   langste paneel en springt er niets bij het wisselen.
   ============================================================ */

.demo { max-width: 1080px; margin-inline: auto; }

/* --- De navigatie ------------------------------------------- */

.demo__nav {
  display: flex;
  gap: .25rem;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto var(--space-7);
  padding: .3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  /* Zelfde vorm als de knoppen, iets ruimer omdat dit de omlijsting is */
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.demo__tab {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .95rem;
  border-radius: var(--r-sm);   /* gelijk aan .btn */
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

/* Balkje dat volloopt zolang de demo vanzelf doorgaat.
   Zodra de bezoeker zelf klikt verdwijnt het. */
.demo__voortgang {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,.75);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}
.demo.is-lopend .demo__tab.is-active .demo__voortgang {
  opacity: 1;
  animation: demo-loop var(--demo-tijd, 6s) linear forwards;
}
@keyframes demo-loop {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.demo__tab:hover { color: var(--ink); background: var(--surface-2); }
.demo__tab.is-active {
  color: #fff;
  background: var(--brand);
  box-shadow: var(--shadow-brand);
}
.demo__tab.is-active:hover { color: #fff; background: var(--brand); }
.demo__tabnr {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: .68rem;
  background: var(--surface-3);
  color: var(--ink-muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.demo__tab.is-active .demo__tabnr { background: rgba(255,255,255,.22); color: #fff; }

/* --- De panelen -------------------------------------------- */

.demo__scherm { display: grid; }
@media (min-width: 901px) { .demo__scherm { min-height: 450px; } }
.demo__paneel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(1.75rem, 1rem + 3.5vw, 4rem);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              visibility var(--t-base) var(--ease);
}
.demo__paneel.is-active { opacity: 1; visibility: visible; transform: none; }

/* Op desktop krijgt iedere mock-up dezelfde hoogte, zodat het bij
   het wisselen echt hetzelfde scherm lijkt en er geen half lege
   kaart verschijnt. Het flexibele deel binnen de mock rekt mee. */
@media (min-width: 901px) {
  .demo__paneel { align-items: stretch; }
  .demo__visual { display: grid; }
  .demo__uitleg { align-self: center; }
  .demo__visual .mock { height: 100%; }

  .mock--browser, .mock--app, .mock--mail { display: flex; flex-direction: column; }
  .mock__site   { flex: 1; display: flex; flex-direction: column; }
  .site__hero   { flex: 1; }
  .lijst        { flex: 1; }
  .mail__body   { flex: 1; }
  .grafiek      { flex: 1; display: flex; flex-direction: column; }
  .grafiek__staven { flex: 1; height: auto; min-height: 80px; }
  .mock--review { align-content: center; }
}

.demo__stap {
  display: block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-3);
}
.demo__uitleg h3 {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  letter-spacing: var(--ls-head);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
.demo__uitleg p { font-size: var(--fs-body); color: var(--ink-soft); max-width: 40ch; }

.demo__meer { margin-top: var(--space-7); text-align: center; }

/* ------------------------------------------------------------
   De mock-ups. Allemaal HTML en CSS, dus geen beeldbestanden
   die je moet bijhouden en altijd scherp op elk scherm.
   ------------------------------------------------------------ */

.mock {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.mock .merk { width: 18px; height: 18px; }

/* Generieke grijze tekstbalkjes binnen de mock-ups */
.bar { display: block; border-radius: 4px; background: var(--surface-3); }
.bar--titel { height: 13px; width: 78%; background: #C3CBDA; margin-bottom: .45rem; }
.bar--regel { height: 7px; width: 92%; margin-bottom: .4rem; }
.bar--kort  { width: 54%; }

/* --- 1. Browsermockup --------------------------------------- */

.mock--browser { overflow: hidden; }
.mock__bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.mock__dots { display: flex; gap: .3rem; }
.mock__dots i { width: 8px; height: 8px; border-radius: 50%; background: #D6DDE9; }
.mock__url {
  flex: 1;
  padding: .25rem .6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: .68rem;
  color: var(--ink-muted);
  text-align: center;
}

.mock__site { padding: clamp(.9rem, .5rem + 1vw, 1.35rem); }
.site__top {
  display: flex; align-items: center; gap: var(--space-4);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line-soft);
}
.site__logo { width: 46px; height: 12px; border-radius: 3px; background: var(--ink); }
.site__nav { display: flex; gap: .55rem; margin-left: auto; }
.site__nav i { width: 26px; height: 6px; border-radius: 3px; background: #CBD3E0; }
.site__knop {
  padding: .3rem .6rem;
  border-radius: var(--r-xs);
  background: var(--brand);
  color: #fff;
  font-size: .62rem; font-weight: 600;
}
.site__hero {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--space-4);
  align-items: center;
  padding: clamp(.9rem, .5rem + 1vw, 1.4rem) 0;
}
.site__cta {
  display: inline-block;
  margin-top: .7rem;
  padding: .4rem .75rem;
  border-radius: var(--r-xs);
  background: var(--brand);
  color: #fff;
  font-size: .64rem; font-weight: 600;
}
.site__herobeeld {
  aspect-ratio: 4/3;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, #DCE6FF, #EEF2F8 60%, #E3E9F4);
}
.site__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.site__rij span {
  height: 40px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}

/* --- 2 en 5. Appmockup -------------------------------------- */

.mock--app { overflow: hidden; }
.mock__appbar {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.mock__appbar strong {
  font-size: var(--fs-micro);
  color: var(--ink);
  letter-spacing: -.01em;
  margin-right: auto;
}
.mock__pil {
  font-size: .68rem; font-weight: 600;
  color: var(--ink-muted);
  padding: .2rem .5rem;
  border-radius: var(--r-full);
}
.mock__pil.is-active { color: var(--brand-ink); background: var(--brand-tint); }

/* Aanvragenlijst */
.lijst { padding: .3rem .9rem .9rem; }
.lijst__rij {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .1rem;
}
.lijst__rij + .lijst__rij { border-top: 1px solid var(--line-soft); }
.lijst__punt {
  width: 7px; height: 7px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--line);
}
.lijst__rij.is-nieuw .lijst__punt {
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.lijst__naam {
  flex: 1; min-width: 0;
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink);
  line-height: 1.35;
}
.lijst__naam em {
  display: block;
  font-style: normal; font-weight: 400;
  font-size: .72rem; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kanaal {
  flex-shrink: 0;
  font-size: .64rem; font-weight: 600;
  padding: .18rem .45rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--ink-soft);
}
.kanaal--form { background: var(--brand-tint); color: var(--brand-ink); }
.kanaal--wa   { background: #E4F6EC; color: #1B7A4B; }
.kanaal--tel  { background: #FDF1DE; color: #9A6A15; }
.lijst__tijd { flex-shrink: 0; font-size: .68rem; color: var(--ink-muted); }

/* Melding over de lijst heen */
.toast {
  position: absolute;
  right: clamp(.6rem, .2rem + 1vw, 1.1rem);
  bottom: clamp(.6rem, .2rem + 1vw, 1.1rem);
  display: flex; align-items: center; gap: .6rem;
  max-width: 78%;
  padding: .6rem .8rem;
  background: var(--ink);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 30px rgba(10,16,32,.24);
}
.toast strong { display: block; font-size: .74rem; font-weight: 600; color: #fff; }
.toast em { font-style: normal; font-size: .68rem; color: rgba(255,255,255,.55); }
.toast__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--positive);
  color: #fff;
  display: grid; place-items: center;
}
.toast__icon svg { width: 11px; height: 11px; }

/* Dashboard */
.kpi {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.kpi__vak { background: var(--surface); padding: var(--space-4) var(--space-5); }
.kpi__label {
  display: block;
  font-size: .66rem; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .3rem;
}
.kpi__cijfer {
  display: flex; align-items: center; gap: .25rem;
  font-size: 1.3rem; font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
}
.kpi__cijfer svg { color: var(--star); }

.grafiek { padding: var(--space-5); }
.grafiek__label {
  display: block;
  font-size: .66rem; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.grafiek__staven {
  display: flex; align-items: flex-end; gap: clamp(.3rem, .1rem + .6vw, .55rem);
  height: 96px;
}
.grafiek__staven i {
  flex: 1;
  border-radius: 3px 3px 2px 2px;
  background: var(--brand-tint-2);
}
.grafiek__staven i:nth-last-child(-n+3) { background: var(--brand); }

/* --- 3. Mailmockup ------------------------------------------ */

.mock--mail { overflow: hidden; }
.mail__kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: .8rem .95rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.mail__afzender { font-size: var(--fs-micro); font-weight: 600; color: var(--ink); }
.mail__tijd { font-size: .68rem; color: var(--ink-muted); flex-shrink: 0; }
.mail__onderwerp {
  padding: .9rem .95rem .2rem;
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}
.mail__body { padding: .5rem .95rem 1rem; }
.mail__body p {
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: .5rem;
}
.mail__body .bar { margin-top: .9rem; }
.mail__groet { margin-top: .9rem; }

.flowlijn__kop {
  display: block;
  padding: .7rem .95rem .1rem;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: .66rem; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
}
.flowlijn { padding: .1rem .95rem .8rem; background: var(--surface-2); }
.flowlijn li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0;
  font-size: var(--fs-micro); font-weight: 600;
  color: var(--ink-soft);
}
.flowlijn li + li { border-top: 1px solid var(--line); }
.flowlijn li.is-done { color: var(--ink); }
.flowlijn em {
  margin-left: auto;
  font-style: normal; font-weight: 400;
  font-size: .68rem; color: var(--ink-muted);
}
.flowlijn__dot {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
}
.flowlijn__dot svg { width: 10px; height: 10px; }
.flowlijn__dot--wacht { background: transparent; border: 1.5px dashed var(--line); }

/* --- 4. Reviewmockup ---------------------------------------- */

.mock--review {
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  justify-items: center;
  gap: .55rem;
}
.bubbel, .review {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}
.bubbel__kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink);
  margin-bottom: .5rem;
}
.bubbel__kop em { font-style: normal; font-weight: 400; font-size: .68rem; color: var(--ink-muted); }
.bubbel p { font-size: var(--fs-micro); color: var(--ink-soft); line-height: 1.6; }
.bubbel__knop {
  display: inline-block;
  margin-top: .8rem;
  padding: .45rem .8rem;
  border-radius: var(--r-xs);
  background: var(--brand);
  color: #fff;
  font-size: .7rem; font-weight: 600;
}
.pijl { color: var(--ink-muted); opacity: .5; line-height: 0; }

.review__kop { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.review__avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-soft);
  display: grid; place-items: center;
  font-size: .66rem; font-weight: 600;
}
.review__wie {
  flex: 1;
  font-size: var(--fs-micro); font-weight: 600; color: var(--ink);
  line-height: 1.3;
}
.review__wie em { display: block; font-style: normal; font-weight: 400; font-size: .68rem; color: var(--ink-muted); }
.review__g {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: .74rem; font-weight: 700;
  color: #4285F4;
}
.review__sterren { display: flex; gap: .1rem; color: var(--star); margin-bottom: .45rem; }
.review p { font-size: var(--fs-micro); color: var(--ink-soft); line-height: 1.6; }

/* ============================================================
   3b. ONBOARDING — foto links, drie stappen rechts
   ============================================================ */

.onboard {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.onboard__beeld {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-lg);
}
.onboard__beeld img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.onboard__badge {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem .5rem .5rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-radius: var(--r-full);
  font-size: var(--fs-micro); font-weight: 600;
  color: var(--ink);
  box-shadow: 0 6px 22px rgba(10,16,32,.16);
}
.onboard__badge-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--positive);
  color: #fff;
  display: grid; place-items: center;
}
.onboard__badge-icon svg { width: 11px; height: 11px; }

.onboard__tekst .section-head { margin-bottom: 0; max-width: 46ch; }

.onboard__stappen { margin-top: var(--space-7); }
.onboard__stap { display: flex; gap: var(--space-4); }
.onboard__stap + .onboard__stap { margin-top: var(--space-5); }
.onboard__nr {
  position: relative;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid; place-items: center;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--brand);
}
.onboard__stap:not(:last-child) .onboard__nr::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  width: 1px; height: calc(var(--space-5) + 1px);
  background: var(--line);
}
.onboard__stap strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body); font-weight: 600;
  letter-spacing: -.015em;
  margin-bottom: .15rem;
}
.onboard__stap p { font-size: var(--fs-small); color: var(--ink-muted); max-width: 46ch; }

.onboard__meta {
  display: flex; flex-wrap: wrap;
  gap: .3rem .6rem;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}

/* ------------------------------------------------------------
   De klantflow — rustige rij van zes, boven de productvisual
   ------------------------------------------------------------ */

.chain {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  position: relative;
  max-width: 960px;
  margin-inline: auto;
}
.chain::before {
  content: "";
  position: absolute;
  top: 13px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, var(--line), var(--brand-tint-2), var(--line));
}
.chain__step { position: relative; text-align: center; padding-inline: .2rem; }
.chain__nr {
  position: relative; z-index: 1;
  width: 26px; height: 26px;
  margin: 0 auto .7rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 600;
  color: var(--brand);
}
.chain__label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
  text-wrap: balance;
  padding-inline: .15rem;
}

/* ------------------------------------------------------------
   Productvisual — één aanvraag door het hele systeem
   ------------------------------------------------------------ */

.sysview {
  max-width: 960px;
  margin: var(--space-7) auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sysview__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.sysview__bar .merk { width: 20px; height: 20px; }
.sysview__bar strong {
  font-size: var(--fs-micro);
  color: var(--ink);
  letter-spacing: -.01em;
  margin-right: auto;
}
.sysview__tab {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-muted);
  padding: .2rem .55rem;
  border-radius: var(--r-full);
}
.sysview__tab.is-active { color: var(--brand-ink); background: var(--brand-tint); }

.sysview__body { display: grid; grid-template-columns: 1.1fr 1fr; }

.sysview__lead {
  padding: clamp(1.25rem, .75rem + 1.5vw, 2rem);
  border-right: 1px solid var(--line-soft);
}
.sysview__leadtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.tag--new {
  font-size: .72rem; font-weight: 600;
  color: var(--brand-ink); background: var(--brand-tint);
  padding: .2rem .5rem; border-radius: var(--r-full);
}
.sysview__time { font-size: .72rem; color: var(--ink-muted); }

.sysview__naam { font-size: 1.35rem; letter-spacing: -.03em; margin-bottom: .2rem; }
.sysview__dienst { font-size: var(--fs-small); color: var(--ink-soft); }

.sysview__meta {
  display: grid;
  gap: .5rem;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.sysview__meta > div { display: flex; gap: var(--space-4); font-size: var(--fs-micro); }
.sysview__meta dt { width: 74px; flex-shrink: 0; color: var(--ink-muted); margin: 0; }
.sysview__meta dd { margin: 0; color: var(--ink); font-weight: 500; }

/* Statusspoor */
.track { margin-top: var(--space-5); }
.track__label {
  display: block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.track ol { display: flex; gap: var(--space-2); }
.track li {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .72rem; font-weight: 600;
  color: var(--ink-muted);
  padding-top: 0;
}
.track li.is-done, .track li.is-active { color: var(--ink); }
.track__dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  color: #fff;
}
.track li.is-done  .track__dot { background: var(--brand); border-color: var(--brand); }
.track li.is-done  .track__dot svg { width: 11px; height: 11px; }
.track li.is-active .track__dot {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.track li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 9.5px; left: 26px; right: 6px;
  height: 1.5px;
  background: var(--line);
}
.track li.is-done::after { background: var(--brand-tint-2); }

/* Automatische acties */
.sysview__auto {
  padding: clamp(1.25rem, .75rem + 1.5vw, 2rem);
  background: var(--surface-2);
}
.sysview__kop {
  display: block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
}
.events { display: grid; gap: .1rem; }
.events li {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .7rem 0;
}
.events li + li { border-top: 1px solid var(--line); }
.events__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  margin-top: 1px;
}
.events__icon svg { width: 11px; height: 11px; }
.events__icon--wait {
  background: transparent;
  border: 1.5px dashed var(--line);
}
.events strong {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.events li:not(.is-done) strong { color: var(--ink-soft); }
.events em {
  font-style: normal;
  font-size: .72rem;
  color: var(--ink-muted);
}

/* ============================================================
   6. ZO WERKT HET — vier stappen
   ============================================================ */

/* auto-fit, zodat dit blok net zo goed werkt met drie als met vier stappen */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-5);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, var(--line), var(--brand-tint-2), var(--line));
}
.step { position: relative; }
.step__nr {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  display: grid; place-items: center;
  font-size: var(--fs-small); font-weight: 600;
  margin-bottom: var(--space-5);
  transition: all var(--t-base) var(--ease);
}
.step:hover .step__nr {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}
.step h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.step p  { font-size: var(--fs-small); color: var(--ink-muted); max-width: 30ch; }

.steps__foot {
  margin-top: var(--space-7);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  max-width: 56ch;
  margin-inline: auto;
}

/* ============================================================
   7. SECTOREN
   ============================================================ */

/* Eén brede focuskaart, met daaronder de overige branches. */
.sectorblok { max-width: 1100px; margin-inline: auto; }

.sectorfocus {
  display: grid;
  grid-template-columns: 1.5fr 1fr;   /* ongeveer 60 / 40 */
  overflow: hidden;
  margin-bottom: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.sectorfocus:hover {
  border-color: #C6D4EE;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.sectorfocus .sectorkaart__beeld { aspect-ratio: auto; min-height: 320px; }
.sectorfocus .sectorkaart__beeld img { position: absolute; inset: 0; }
.sectorfocus:hover .sectorkaart__beeld img { transform: scale(1.03); }

.sectorfocus__tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.sectorfocus__label {
  display: inline-block;
  padding: .3rem .7rem;
  margin-bottom: var(--space-4);
  border-radius: var(--r-full);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: .7rem; font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.sectorfocus__tekst strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.sectorfocus__sub {
  display: block;
  margin-top: .3rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.sectorfocus__pitch {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  color: var(--ink-soft);
  max-width: 30ch;
}
.sectorfocus__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand);
}
.sectorfocus__link svg { transition: transform var(--t-base) var(--ease); }
.sectorfocus:hover .sectorfocus__link svg { transform: translateX(4px); }

/* De overige branches: drie gelijke, iets compactere kaarten. */
.sectoren {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
/* Beeldkaart per branche. Zolang er geen foto is tonen we een
   rustig merkvlak, zodat de kaart nooit leeg oogt. */
.sectorkaart {
  display: block;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.sectorkaart:hover {
  border-color: #D3DCEA;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sectorkaart__beeld {
  display: block;
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--surface-3);
}
.sectorkaart__beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.sectorkaart:hover .sectorkaart__beeld img { transform: scale(1.04); }

/* Zes rustige merkvlakken voor zolang de foto's er nog niet zijn */
.sectorkaart__beeld--1 { background: linear-gradient(145deg, #DCE6FF, #F2F6FF); }
.sectorkaart__beeld--2 { background: linear-gradient(145deg, #E4EEF6, #F4F8FB); }
.sectorkaart__beeld--3 { background: linear-gradient(145deg, #E8E6F6, #F5F4FC); }
.sectorkaart__beeld--4 { background: linear-gradient(145deg, #DEEDE7, #F1F8F5); }
.sectorkaart__beeld--5 { background: linear-gradient(145deg, #F0E9E1, #FAF6F2); }
.sectorkaart__beeld--6 { background: linear-gradient(145deg, #E2E7EE, #F4F6FA); }
.sectorkaart__beeld::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,32,0) 55%, rgba(10,16,32,.06));
}

/* Het branche-icoon, alleen zichtbaar zolang er geen foto is */
.sectorkaart__icoon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(52px, 26%, 76px);
  height: auto;
  color: var(--ink);
  opacity: .18;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.sectorkaart:hover .sectorkaart__icoon {
  opacity: .28;
  transform: translate(-50%, -50%) scale(1.04);
}

.sectorkaart__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.sectorkaart__voet strong {
  display: block;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.sectorkaart__voet em {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.sectorkaart__pijl {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-muted);
  background: var(--surface-2);
  transition: all var(--t-base) var(--ease);
}
.sectorkaart:hover .sectorkaart__pijl { background: var(--brand); color: #fff; }

/* ============================================================
   7b. KLANTREVIEWS
   Verschijnt alleen als $reviews in config/site.php gevuld is.
   ============================================================ */

.klantreviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  max-width: 1080px;
  margin-inline: auto;
}
.klantreview {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.klantreview__sterren {
  display: inline-flex; gap: .1rem;
  color: var(--star);
  margin-bottom: var(--space-4);
}
.klantreview blockquote {
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: auto;
}
.klantreview__resultaat {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--space-5);
  padding: .25rem .6rem;
  border-radius: var(--r-full);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: var(--fs-micro); font-weight: 600;
}
.klantreview figcaption {
  display: flex; align-items: center; gap: .7rem;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.klantreview figcaption img,
.klantreview__av {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
.klantreview__av {
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--ink-soft);
  font-size: var(--fs-micro); font-weight: 700;
}
.klantreview figcaption strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-small); font-weight: 600;
}
.klantreview figcaption em {
  font-style: normal;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}

/* ============================================================
   8. PRIJZEN — twee pakketten + Google Ads-callout
   ============================================================ */

.pakketten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  max-width: 940px;
  margin-inline: auto;
  /* Geen align-items: de kaarten rekken naar de hoogste van de twee.
     Op mobiel staan ze onder elkaar en houdt elke kaart zijn eigen hoogte. */
}

.pakket {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

/* Het aanbevolen pakket: rustige nadruk, geen geschreeuw. */
.pakket--top {
  position: relative;
  overflow: hidden;
  border-color: var(--brand);

  /* Alleen blauw, geen grijze schaduw eronder. */
  box-shadow: 0 2px 10px rgba(27,79,224,.12),
              0 20px 48px rgba(27,79,224,.20);

  /* Een spiegelende kaart heeft een oppervlak nodig. Puur wit kan
     geen wit licht weerkaatsen, dus krijgt deze kaart een nauwelijks
     zichtbare verloopachtergrond. Daar loopt de glans overheen. */
  background: linear-gradient(163deg, #FFFFFF 0%, #FBFCFF 48%, #F4F7FF 100%);
}

/* Korte glans die er elke acht seconden overheen loopt. */
.pakket--top::after {
  content: "";
  position: absolute;
  inset: -30% -55%;
  pointer-events: none;

  /* Zo ziet echte glans eruit: een smalle felle kern, met aan
     weerszijden een spoortje schaduw. Dat contrast maakt dat je oog
     het als weerkaatsend licht leest in plaats van als blauw vlak. */
  background: linear-gradient(
    102deg,
    rgba(27,79,224,0)     32%,
    rgba(27,79,224,.055)  41%,
    rgba(255,255,255,.26) 47%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.26) 53%,
    rgba(27,79,224,.055)  59%,
    rgba(27,79,224,0)     68%
  );
  transform: translateX(-100%);
  animation: glans 8s cubic-bezier(.35,0,.25,1) infinite;
}
@keyframes glans {
  0%   { transform: translateX(-100%); }
  11%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.pakket__badge {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 1;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: var(--brand);
  padding: .25rem .65rem;
  border-radius: var(--r-full);
}

.pakket__naam {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand);
}
.pakket__omschrijving {
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 34ch;
}

.pakket__prijs {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: var(--space-4);
}
.pakket__prijs .bedrag {
  font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.25rem);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.045em;
  line-height: 1;
}
.pakket__prijs .per { font-size: var(--fs-small); color: var(--ink-muted); }

.pakket__extra {
  display: block;
  margin-top: var(--space-2);
  font-size: .78rem;
  color: var(--ink-muted);
}
/* Op desktop mag deze regel niet afbreken. */
@media (min-width: 901px) {
  .pakket__extra { white-space: nowrap; }
}

/* De knop wordt naar beneden geduwd, zodat beide knoppen op
   dezelfde hoogte staan ook als de lijsten verschillen. */
.pakket .btn { margin-top: var(--space-6); position: relative; z-index: 1; }

.pakket__lijst {
  margin-top: var(--space-5);
  margin-bottom: auto;
  display: grid;
  gap: .7rem;
}
.pakket__lijst li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--ink);
}
.pakket__lijst svg { color: var(--brand); flex-shrink: 0; margin-top: 4px; }

/* Wat er níét bij zit: bewust rustig, geen rood. */
.pakket__lijst li.is-uit { color: var(--ink-muted); }
.pakket__lijst li.is-uit svg { color: #B9C1CE; }
.pakket__lijst li.is-uit + li:not(.is-uit) { color: var(--ink); }

/* --- Eén verwijzing naar de uitbreidingen --------------------- */

.extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  max-width: 940px;
  margin: var(--space-5) auto 0;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.extras__tekst strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .25rem;
}
.extras__tekst p {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  max-width: 62ch;
}
.extras .btn { flex-shrink: 0; }

/* Verwijzing onder een blok, gecentreerd (o.a. /hoe-het-werkt) */
.addons__foot { margin-top: var(--space-6); text-align: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1040px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); }
  .steps::before { display: none; }
  .chain { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-5); }
  .chain::before { display: none; }
}

@media (max-width: 900px) {
  .problem__grid { grid-template-columns: 1fr; }

  /* Systeemdemo: uitleg boven, visual eronder */
  .demo__paneel { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
  .demo__uitleg p { max-width: none; }

  /* Onboarding: foto boven de stappen */
  .onboard { grid-template-columns: 1fr; gap: var(--space-6); }
  .onboard__beeld img { aspect-ratio: 16/10; }
  .onboard__tekst .section-head { max-width: none; }

  .work__punten { grid-template-columns: 1fr; gap: var(--space-4); }
  .sectorfocus { grid-template-columns: 1fr; }
  .sectorfocus .sectorkaart__beeld { min-height: 0; aspect-ratio: 16/10; }
  .sysview__body { grid-template-columns: 1fr; }
  .sysview__lead { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .pakketten { grid-template-columns: 1fr; }
  .pakket__omschrijving, .pakket__extra { max-width: none; }
  .extras { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .extras__tekst p { max-width: none; }
}

/* Onder deze breedte schuift de demonavigatie horizontaal.
   Je kunt hem dus altijd bereiken zonder dat hij afbreekt. */
@media (max-width: 760px) {
  .demo__nav {
    width: auto;
    justify-content: flex-start;
    overflow-x: auto;
    border-radius: var(--r-md);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .demo__nav::-webkit-scrollbar { display: none; }
  .demo__tab { scroll-snap-align: center; }
  .demo__tabnr { display: none; }
}

@media (max-width: 620px) {
  .work__grid { grid-template-columns: 1fr; }
  .site__hero { grid-template-columns: 1fr; }
  .site__herobeeld { display: none; }
  .kpi { grid-template-columns: 1fr; }
  .kpi__vak { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
  .kpi__label { margin-bottom: 0; }
  .toast { position: static; max-width: none; margin: 0 .9rem .9rem; }
  .hero__actions .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; gap: var(--space-6); }
  .step p { max-width: none; }
  .chain { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
  .track ol { flex-direction: column; gap: .6rem; }
  .track li { flex-direction: row; align-items: center; }
  .track li:not(:last-child)::after { display: none; }
  .sectoren { grid-template-columns: 1fr; }
  .cta-final__actions .btn { width: 100%; }
}

/* ============================================================
   TIJDELIJKE PAGINA (in aanbouw)
   Verwijder dit blok zodra alle pagina's echt gebouwd zijn.
   ============================================================ */

.stub { padding-top: clamp(4rem, 2.5rem + 5vw, 7rem); position: relative; overflow: hidden; }
.stub::before {
  content: "";
  position: absolute; top: -40%; left: 50%;
  width: min(900px, 130vw); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(27,79,224,.08), rgba(27,79,224,0) 70%);
  pointer-events: none;
}
.stub__inner { position: relative; max-width: 640px; margin-inline: auto; text-align: center; }
.stub__inner h1 { margin-bottom: var(--space-5); }
.stub__inner .lead { margin-inline: auto; }

.stub__list {
  margin-top: var(--space-7);
  text-align: left;
  display: inline-grid;
  gap: .1rem;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.stub__list li {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .55rem 0;
  font-size: var(--fs-small);
  color: var(--ink);
}
.stub__list li + li { border-top: 1px solid var(--line-soft); }
.stub__list svg { color: var(--brand); flex-shrink: 0; margin-top: 3px; }

.stub__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-7);
}
.stub__meta { margin-top: var(--space-5); }
.stub__meta a { color: var(--brand); font-weight: 600; }

@media (max-width: 520px) {
  .stub__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pakket--top::after { animation: none; opacity: 0; }
}