/* M4X Digital: huisstijl M4X (zwart/wit, één groen accent #2FA864). Mobiel eerst. Geen externe bronnen: lettertypen, scripts en beelden komen van de eigen server. */
:root {
  color-scheme: light;
  --ink: #111111; --ink-2: #3a3a3a; --muted: #6b6b6b; --line: #dcdcdc; --line-2: #eeeeee;
  --paper: #ffffff; --bg: #f5f5f3; --grijs: #efefed; --accent: #2FA864; --accent-ink: #1B7A43;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1120px; --r: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(32px, 7vw, 56px); font-weight: 800; }
h2 { font-size: clamp(24px, 4.2vw, 34px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--ink); padding: 8px 12px; z-index: 50; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }

/* kop */
.kop { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.kop-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.merk { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; color: var(--ink); line-height: 1; }
.merk-m4x { font-weight: 800; font-size: 26px; letter-spacing: .02em; }
.merk-punt { width: 8px; height: 8px; background: var(--accent); display: inline-block; margin: 0 7px 0 3px; border-radius: 1px; }
.merk-sub { font-weight: 500; font-size: 18px; letter-spacing: .01em; color: var(--ink-2); }
.merk--licht, .merk--licht .merk-sub { color: #fff; }
.menuknop { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 15px; background: none; border: 1px solid var(--ink); border-radius: 3px; padding: 7px 12px; cursor: pointer; color: var(--ink); }
.menuknop-streep, .menuknop-streep::before, .menuknop-streep::after { display: block; width: 16px; height: 2px; background: var(--ink); position: relative; }
.menuknop-streep::before, .menuknop-streep::after { content: ""; position: absolute; left: 0; }
.menuknop-streep::before { top: -5px; } .menuknop-streep::after { top: 5px; }
.menu { display: none; width: 100%; }
.menu.open { display: block; }
.menu ul { list-style: none; margin: 0; padding: 4px 0 14px; display: grid; gap: 2px; }
.menu a { display: block; padding: 10px 4px; text-decoration: none; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line-2); }
.menu a[aria-current="page"] { color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.menu .menu-cta a { border: 0; margin-top: 8px; text-align: center; }

/* knoppen */
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.knop { display: inline-block; font: inherit; font-weight: 700; font-size: 16px; border-radius: 3px; padding: 12px 20px; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2; text-align: center; }
.knop--accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.knop--accent:hover { background: #55C585; color: var(--ink); }
.knop--zwart { background: var(--ink); color: #fff; }
.knop--zwart:hover { color: var(--accent); }
.knop--omlijnd { border-color: #fff; color: #fff; }
.knop--omlijnd:hover { background: #fff; color: var(--ink); }
.knop--omlijnd-donker { border-color: var(--ink); color: var(--ink); }
.verder { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--accent); }
.verder::after { content: " →"; }

/* held */
.held { background: var(--ink); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; }
.held::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--accent); }
.held h1 { max-width: 16ch; }
.held-lead { font-size: 18px; max-width: 58ch; color: #e6e6e6; }
.bovenregel { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-ink); margin-bottom: 12px; }
.held .bovenregel { color: var(--accent); }

/* secties */
.sectie { padding: 48px 0; }
.sectie--grijs { background: var(--grijs); }
.sectiekop { font-size: clamp(22px, 3.4vw, 28px); }
.paginakop { padding: 44px 0 32px; border-bottom: 1px solid var(--line); }
.paginakop h1 { border-bottom: 5px solid var(--accent); display: inline-block; padding-bottom: 6px; }
.lead { font-size: 19px; max-width: 62ch; color: var(--ink-2); }
.lead-klein { max-width: 70ch; color: var(--ink-2); }
.noot { font-size: 14px; color: var(--muted); }
.twee { display: grid; gap: 28px; }
.inpagina { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.inpagina a { text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; background: #fff; }
.inpagina a:hover { border-color: var(--ink); }

.blokken { display: grid; gap: 16px; }
.blok { border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; background: #fff; display: flex; flex-direction: column; }
.blok-nr { font-weight: 800; color: var(--accent-ink); font-size: 14px; letter-spacing: .08em; margin-bottom: 8px; }
.blok p { flex: 1; color: var(--ink-2); }

.tegels { display: grid; gap: 14px; margin-top: 18px; }
.tegel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.tegel p { margin: 0 0 .5em; color: var(--ink-2); font-size: 15px; }
.prijsregel { font-weight: 700; font-size: 14px; color: var(--ink); }
.tegel .prijsregel { color: var(--accent-ink); margin: 0; }

.lijst-vink { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 8px; }
.lijst-vink li { position: relative; padding-left: 26px; }
.lijst-vink li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--accent-ink); }
.kader { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 18px 18px 14px; align-self: start; }
.sectie--grijs .kader { background: #fff; }

.na-stappen { margin-top: 24px; }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.stappen li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.stappen h2, .stappen h3 { font-size: 20px; margin-bottom: 4px; }
.stappen p { margin: 0; color: var(--ink-2); }
.stap-nr { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--accent); font-weight: 800; font-size: 18px; border-radius: 3px; }

.band { padding: 44px 0; }
.band--zwart { background: var(--ink); color: #fff; border-top: 6px solid var(--accent); }
.band-in { display: grid; gap: 18px; align-items: center; }
.band h2 { font-size: clamp(22px, 3.4vw, 30px); }
.band p { margin: 0; color: #dcdcdc; }

.melding { border-left: 4px solid var(--accent); background: #eef8f2; padding: 12px 14px; border-radius: 3px; margin-top: 16px; font-size: 15px; }

/* pakketkaarten: zelfde opbouw als de M4X-offerte */
.kaarten { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.kaart { position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px 16px; display: flex; flex-direction: column; background: #fff; }
.kaart--aanbevolen { border: 2px solid var(--accent); box-shadow: 0 8px 24px -16px rgba(47,168,100,.9); }
.kaart--maatwerk { background: #fafafa; border-style: dashed; }
.label-aanbevolen { position: absolute; top: -11px; left: 14px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 2px; }
.kaart h3 { font-size: 19px; margin: 0 0 4px; }
.kaart .zin { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; }
.kaart .maand { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kaart .maand strong { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.kaart--maatwerk .maand strong { font-size: 26px; }
.kaart .maand span { color: var(--muted); font-size: 13px; }
.kaart .setup { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.vinkjes { list-style: none; margin: 0 0 14px; padding: 10px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 5px; font-size: 14px; }
.vinkjes li { display: flex; gap: 8px; align-items: baseline; }
.vinkjes .vink { width: 14px; flex: none; font-weight: 800; text-align: center; }
.vinkjes li.ja .vink { color: var(--accent-ink); }
.vinkjes li.nee { color: #6b6b6b; }  /* 5,3:1 op wit (WCAG AA) */
.vinkjes li.stuk .vink { color: var(--accent-ink); }
.vinkjes li small { color: var(--muted); font-size: 12px; margin-left: 2px; }
.kaart .termijnen { margin: -8px 0 12px; color: var(--muted); font-size: 12.5px; }
.stuk-noot { font-size: 12.5px; color: var(--ink-2); margin: -4px 0 14px; }
.kies { margin-top: auto; display: block; text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; background: #fff; border: 1px solid var(--ink); border-radius: 3px; padding: 9px 10px; color: var(--ink); }
.kaart--aanbevolen .kies { background: var(--ink); color: #fff; }
.kies:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.los h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: flex; gap: 8px; align-items: baseline; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; font-size: 14px; background: #fafafa; }
.chips b { font-weight: 700; white-space: nowrap; }

.tabel { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); }
.tabel th, .tabel td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tabel th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tabel .r { text-align: right; white-space: nowrap; }
@media (max-width: 719px) {
  .tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 10px; border-bottom: 1px solid var(--line-2); }
  .tabel td { border: 0; padding: 0; }
  .tabel td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; color: var(--muted); padding-top: 2px; }
}

/* voorbeelden */
.voorbeelden { display: grid; gap: 36px; }
.voorbeeld { display: grid; gap: 18px; align-items: center; }
.label-voorbeeld { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); background: var(--accent); padding: 3px 8px; border-radius: 2px; margin-bottom: 10px; }
.scherm { border: 1px solid #cfcfcf; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 16px 36px -24px rgba(0,0,0,.5); }
.scherm-balk { display: flex; gap: 6px; align-items: center; background: #ececec; padding: 8px 10px; font-size: 12px; color: var(--muted); }
.scherm-balk i { width: 10px; height: 10px; border-radius: 50%; background: #cfcfcf; display: inline-block; }
.scherm-balk span { margin-left: 8px; }
.scherm-in { padding: 16px; font-size: 14px; }
.mock-kop { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 12px; }
.mock-kop span { font-size: 12px; background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 2px; }
.mock-vraag { font-weight: 700; margin: 0 0 8px; }
.mock-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.mock-keuzes span { border: 1px solid var(--line); border-radius: 4px; padding: 10px; text-align: center; font-size: 13px; }
.mock-keuzes .aan { border: 2px solid var(--accent); font-weight: 700; }
.mock-stappen { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.mock-stappen span { background: var(--grijs); padding: 3px 8px; border-radius: 999px; }
.mock-stappen .aan { background: var(--ink); color: #fff; }
.mock-regel { display: flex; justify-content: space-between; border-top: 1px solid var(--line-2); padding: 6px 0; font-size: 13px; }
.mock-bord { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mock-bord div { background: var(--grijs); border-radius: 4px; padding: 8px; }
.mock-bord h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.mock-bord p { margin: 0 0 6px; background: #fff; border-left: 3px solid var(--accent); padding: 5px 6px; font-size: 12px; border-radius: 2px; }

/* positionering */
.held-sub { font-size: clamp(20px, 3.6vw, 28px); font-weight: 600; color: #fff; margin: 0 0 16px; max-width: 30ch; line-height: 1.3; }
.held-sub::before { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-bottom: 14px; }
.blok-sub { font-size: 14px; font-weight: 700; color: var(--muted); margin: -4px 0 10px; flex: none !important; }
.sectie--donker { background: #161616; color: #fff; }
.sectie--donker .lead-klein { color: #d6d6d6; }
.sectie--donker .noot { color: #bdbdbd; margin-top: 16px; }
.sectie--donker a { color: #fff; }
.kaarten-noot { margin: 18px 0 0; font-size: 15px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 3px; padding: 12px 14px; }

/* eigenaarsdashboard (mockup, fictieve cijfers) */
.dash-figuur { margin: 20px 0 0; }
.dash-figuur figcaption { font-size: 13px; color: #bdbdbd; margin-top: 10px; }
.dash { background: #fafafa; color: var(--ink); border-radius: 8px; padding: 14px; border-top: 4px solid var(--accent); font-size: 14px; }
.dash-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-kop b { display: block; font-size: 17px; }
.dash-kop span { font-size: 12px; color: var(--muted); }
.dash-kop .label-voorbeeld { color: var(--ink); margin: 0; }
.dash-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.dash-tegel { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; min-width: 0; }
.dash-tegel span { font-size: 12px; color: var(--muted); }
.dash-tegel b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.dash-tegel small { font-size: 11.5px; color: var(--muted); }
.dash-tegel--let { border-color: var(--accent); }
.dash-rij { display: grid; gap: 8px; margin-bottom: 8px; }
.dash-paneel { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; min-width: 0; }
.dash-paneel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.dash-paneel p { margin: 0; font-size: 13px; color: var(--ink-2); }
.dash-kanalen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-kanalen li { display: grid; grid-template-columns: 100px 1fr 24px; gap: 8px; align-items: center; font-size: 13px; }
.dash-kanalen b { text-align: right; }
.dash-balk { display: block; height: 10px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.dash-balk i { display: block; height: 100%; background: var(--ink); }
.dash-kanalen li:first-child .dash-balk i { background: var(--accent); }
.dash-balk .w100 { width: 100%; } .dash-balk .w84 { width: 84%; } .dash-balk .w68 { width: 68%; } .dash-balk .w56 { width: 56%; }
.dash-balk .w48 { width: 48%; } .dash-balk .w44 { width: 44%; } .dash-balk .w33 { width: 33%; } .dash-balk .w22 { width: 22%; }
.dash-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dash-tabel th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 0 4px 4px 0; }
.dash-tabel td { padding: 5px 4px 5px 0; border-top: 1px solid var(--line-2); vertical-align: middle; }
.dash-marge { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dash-marge .dash-balk { width: 40px; flex: none; }
.dash-marge.let-op .dash-balk i { background: var(--accent); }

/* over ons */
.gegevens { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.gegevens div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.gegevens dt { color: #b9b9b9; }
.gegevens dd { margin: 0; }
.gegevens--groot { font-size: 16px; }
.gegevens--groot dt { color: var(--muted); }

/* formulier */
.contactgegevens { align-self: start; }
.contactblok { align-self: start; }
.contactblok p { max-width: 62ch; }
.contactblok .knoppen { margin: 18px 0; }

.tekst { max-width: 760px; }
.tekst h2 { font-size: 22px; margin-top: 1.4em; }

/* voet */
.voet { background: #0b0b0b; color: #cfcfcf; padding: 40px 0 16px; font-size: 14px; }
.voet-in { display: grid; gap: 28px; }
.voet h2 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.voet a { color: #fff; text-decoration: none; }
.voet a:hover { color: var(--accent); }
.voet-merk p { margin-top: 12px; max-width: 34ch; }
.voet-onder a { display: inline-flex; align-items: center; min-height: 44px; }
.voet-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; border-top: 1px solid #2a2a2a; margin-top: 28px; padding-top: 14px; font-size: 13px; color: #9a9a9a; }

/* breder */
@media (min-width: 720px) {
  .blokken { grid-template-columns: repeat(3, 1fr); }
  .tegels { grid-template-columns: repeat(2, 1fr); }
  .twee { grid-template-columns: 1fr 1fr; gap: 40px; }
  .band-in { grid-template-columns: 1fr auto; }
  .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stappen--kort { grid-template-columns: repeat(2, 1fr); }
  .voet-in { grid-template-columns: 1.4fr 1fr 1.4fr; }
  .voorbeeld { grid-template-columns: 1.1fr 1fr; gap: 36px; }
  .mock-bord { grid-template-columns: repeat(4, 1fr); }
  .dash { padding: 18px; }
  .dash-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-rij { grid-template-columns: 1fr 1.2fr; }
  .dash-rij--klein { grid-template-columns: repeat(3, 1fr); }
  .held { padding: 88px 0 96px; }
  .sectie { padding: 72px 0; }
}
@media (min-width: 1000px) {
  .kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .kaart .zin { min-height: 4.5em; }
  .tegels { grid-template-columns: repeat(3, 1fr); }
  .stappen--kort { grid-template-columns: repeat(4, 1fr); }
  .twee--form { grid-template-columns: 1.5fr 1fr; }
}
/* menu op een rij pas als alles past naast het logo (7 items + knop) */
@media (min-width: 1220px) {
  .menuknop { display: none; }
  .menu, .menu.open { display: block; width: auto; }
  .menu ul { display: flex; align-items: center; gap: 2px; padding: 0; }
  .menu a { border: 0; padding: 8px 9px; font-size: 15px; }
  .menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); padding-left: 9px; }
  .menu .menu-cta a { margin: 0 0 0 8px; padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .kop, .menuknop, .band, .voet { display: none !important; }
}

/* ---------------------------------------------------------------- beeldlaag (iconen, illustraties, demo's) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.22em; flex: none; }
.ic--kop { color: var(--accent-ink); }
.icblok { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--ink); color: var(--accent); border-radius: 6px; flex: none; }
.icblok .ic { width: 24px; height: 24px; vertical-align: 0; }
.blok-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.blok-top .blok-nr { margin: 0; }
.kop-ic { display: block; margin-bottom: 14px; }
.kop-twee { display: grid; gap: 24px; align-items: center; }
.kop-twee .illu { margin: 0; max-width: 440px; }
.lijst-ic { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 12px; }
.lijst-ic li { display: flex; gap: 12px; align-items: center; }
.lijst-ic .icblok { width: 40px; height: 40px; }
.tegel .icblok { width: 40px; height: 40px; margin-bottom: 12px; }
.stap-ic { display: block; color: var(--accent-ink); margin-bottom: 6px; }
.stap-ic .ic { width: 28px; height: 28px; }
.band-ic { display: none; }
.inpagina--ic a { display: inline-flex; gap: 6px; align-items: center; }
.los h2 .ic { color: var(--accent-ink); }

.illu { margin: 22px 0 0; }
.illu img { display: block; width: 100%; height: auto; border-radius: 12px; }
.illu figcaption, .scherm-fig figcaption, .voorna-fig figcaption, .demo figcaption, .apparaten figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.illu figcaption { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.illu--klein { max-width: 340px; }
.sectie--grijs .illu img { border: 1px solid var(--line); }
.rechts { display: grid; gap: 22px; align-content: start; }
.rechts .illu, .rechts .scherm-fig { margin: 0; }
.tegels + .prijsregel { margin-top: 16px; }
.illu-paar { display: grid; gap: 16px; align-content: start; }
.illu-paar .illu, .branche .twee > .illu { margin: 0; }
figcaption .label-voorbeeld { margin: 0 6px 0 0; font-size: 10.5px; padding: 2px 6px; }

/* hero: laptop + telefoon met echte schermafdrukken van een concept (verzonnen bedrijf) */
.held-twee { display: grid; gap: 40px; align-items: center; }
.apparaten { margin: 0; }
.apparaten-in { position: relative; margin: 0 4% 26px 0; }
.laptop-scherm { border: 9px solid #3a3a3a; border-bottom-width: 12px; border-radius: 12px 12px 0 0; background: #000; overflow: hidden; aspect-ratio: 16 / 10; }
.laptop-scherm img, .telefoon-mock img, .scherm-tel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop-voet { height: 12px; margin: 0 -5%; background: #9a9a9a; border-top: 3px solid #cfcfcf; border-radius: 0 0 14px 14px; }
.telefoon-mock { position: absolute; right: -4%; bottom: -22px; width: 26%; aspect-ratio: 9 / 18; border: 5px solid #0b0b0b; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 14px 30px -10px rgba(0,0,0,.8), 0 0 0 1px #3a3a3a; }
.apparaten figcaption { color: #cfcfcf; }
.scherm-fig { margin: 22px 0 0; }
.scherm img { display: block; width: 100%; height: auto; }
.scherm-tel { margin: 0 auto; width: 100%; max-width: 270px; aspect-ratio: 9 / 17; border: 9px solid #111; border-radius: 28px; overflow: hidden; background: #000; }

/* demo: aanvraag-wizard op een telefoon */
.demo { margin: 0; }
.demo-twee { display: grid; gap: 28px; margin-top: 20px; align-items: start; }
.telefoon { width: 100%; max-width: 300px; margin: 0 auto; border: 10px solid #111; border-radius: 30px; background: #fff; box-shadow: 0 18px 40px -24px rgba(0,0,0,.6); }
.telefoon-in { padding: 16px 14px; height: 340px; overflow: hidden; font-size: 14px; }
.wz-kop { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--ink); padding-bottom: 6px; font-size: 13px; }
.wz-kop span { background: var(--accent); padding: 1px 8px; border-radius: 2px; font-weight: 700; font-size: 11px; }
.wz-voortgang { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0; margin: 10px 0 16px; font-size: 10.5px; text-align: center; }
.wz-voortgang li { border-top: 4px solid var(--line); padding-top: 4px; color: var(--muted); transition: border-color .3s; }
.wz-voortgang li.aan { border-color: var(--accent); color: var(--ink); font-weight: 700; }
.wz-stap { display: none; }
.wz-stap.aan { display: block; animation: wz-in .45s ease both; }
@keyframes wz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wz-vraag { font-weight: 700; font-size: 15px; margin: 0 0 12px; }
.wz-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wz-keuzes span { border: 1px solid var(--line); border-radius: 6px; padding: 14px 6px; text-align: center; font-size: 13px; transition: border-color .3s, background .3s; }
.wz-keuzes .gekozen { border: 2px solid var(--accent); font-weight: 700; background: #eef8f2; }
.wz-schuif { height: 8px; background: var(--line-2); border-radius: 4px; position: relative; margin: 28px 0 12px; }
.wz-schuif i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: var(--accent); border-radius: 4px; }
.wz-schuif i::after { content: ""; position: absolute; right: -9px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
.wz-waarde { font-size: 13px; color: var(--ink-2); }
.wz-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wz-fotos span { aspect-ratio: 1; display: grid; place-items: center; background: var(--grijs); border: 1px solid var(--line); border-radius: 4px; color: var(--accent-ink); }
.wz-veld { border: 1px solid var(--line); border-radius: 4px; padding: 8px; margin-bottom: 8px; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.wz-veld span { color: var(--muted); }
.wz-veld b { min-height: 1.2em; }
.wz-klaar .wz-vraag::before { content: "✓ "; color: var(--accent-ink); }
.wz-klaar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; }
.wz-klaar li { background: #eef8f2; border-left: 3px solid var(--accent); padding: 7px 9px; }

/* demo: aanvraag stroomt van kanaal naar planning */
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.flow-stap { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px; transition: border-color .3s, box-shadow .3s; }
.flow-stap small { grid-column: 2; color: var(--muted); font-size: 13px; }
.flow-ic { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--grijs); border-radius: 6px; transition: background .3s, color .3s; }
.flow-ic .ic { width: 22px; height: 22px; }
.flow-stap.aan { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.flow-stap.aan .flow-ic { background: var(--ink); color: var(--accent); }
.flow-kaart { grid-column: 1 / -1; margin-top: 10px; background: #eef8f2; border-left: 4px solid var(--accent); padding: 8px 10px; font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; animation: wz-in .45s ease both; }
.flow-kaart span { color: var(--ink-2); }
.demo-flow figcaption { margin-top: 12px; }

/* dashboard: balken groeien en getallen tellen op (alleen met JS en zonder reduced motion) */
.dash.anim .dash-balk i { transform: scaleX(0); transform-origin: left center; }
.dash.anim.speel .dash-balk i { transform: scaleX(1); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }

/* voor/na */
.voorna { display: grid; gap: 22px; margin-top: 20px; }
.voorna-fig { margin: 0; }
.voorna-fig > img { display: block; width: 100%; height: auto; border-radius: 8px; }
.meetpunten { width: 100%; border-collapse: collapse; margin-top: 26px; background: #fff; border: 1px solid var(--line); font-size: 15px; }
.meetpunten caption { text-align: left; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 8px; }
.meetpunten th, .meetpunten td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; font-weight: 500; }
.meetpunten thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.meetpunten thead th + th, .meetpunten td { text-align: center; width: 64px; }
.meetpunten .ic { width: 22px; height: 22px; stroke-width: 2.6; }
.mp-ja { color: var(--accent-ink); }
.mp-nee { color: #8a8a8a; }

/* pakketkaarten: beeld en termijnen */
.kaart-svg { display: block; width: 100%; height: auto; margin: 0 0 14px; background: var(--grijs); border-radius: 4px; }
.termijnbalk { display: flex; height: 18px; border-radius: 3px; overflow: hidden; margin: -6px 0 14px; font-size: 10px; font-weight: 700; line-height: 18px; }
.tb { font-style: normal; text-align: center; color: var(--ink); background: #d5f0e0; border-right: 2px solid #fff; }
.tb:first-child { background: var(--accent); }
.tb:nth-child(2) { background: #a9dcc0; }
.tb:last-child { border-right: 0; }
.tb20 { flex: 20; } .tb40 { flex: 40; } .tb60 { flex: 60; }
.termijnvoorbeeld { margin-top: 16px; }
.termijnvoorbeeld p { display: grid; gap: 4px; font-size: 14px; margin: 0 0 10px; }
.termijnvoorbeeld .termijnbalk { margin: 0; }

@media (min-width: 720px) {
  .band-in { grid-template-columns: auto 1fr auto; }
  .band-ic { display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--accent); border-radius: 8px; color: var(--accent); }
  .band-ic .ic { width: 34px; height: 34px; }
  .voorna { grid-template-columns: 1fr 1fr; align-items: start; }
  .demo-twee { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; }
}
@media (min-width: 1000px) {
  .held-twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; }
  .kop-twee { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wz-stap.aan, .flow-kaart { animation: none; }
  .dash.anim .dash-balk i { transform: none; transition: none; }
  .flow-stap, .flow-ic, .wz-voortgang li, .wz-keuzes span { transition: none; }
}
/* echte schermafdrukken en loops */
.loop { margin: 22px 0 0; }
.loop video { display: block; width: 100%; height: auto; background: #111; }
.tv { margin: 0 auto 26px; max-width: 1000px; }
.tv-scherm { border: 10px solid #111; border-bottom-width: 14px; border-radius: 8px; background: #000; overflow: hidden; box-shadow: 0 24px 44px -26px rgba(0,0,0,.8); aspect-ratio: 16 / 9; }
.tv-scherm img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tv-voet { width: 22%; height: 16px; margin: 0 auto; background: #3a3a3a; border-radius: 0 0 8px 8px; position: relative; }
.tv-voet::after { content: ""; position: absolute; left: -18%; right: -18%; bottom: -6px; height: 6px; background: #5a5a5a; border-radius: 3px; }
.tv figcaption, .loop figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; }
.sectie--donker .tv figcaption { color: #cfcfcf; }
.voorna-tabel { width: 100%; border-collapse: collapse; margin-top: 26px; background: #fff; border: 1px solid var(--line); font-size: 15px; }
.voorna-tabel caption { text-align: left; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 8px; }
.voorna-tabel th, .voorna-tabel td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); text-align: left; font-weight: 500; vertical-align: top; }
.voorna-tabel thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.voorna-tabel tbody th { font-weight: 700; width: 24%; }
.voorna-tabel .vn-nu { color: var(--muted); width: 32%; }
.voorna-tabel .vn-m4x { background: #eef8f2; }
.voorna-tabel .vn-m4x .ic { width: 18px; height: 18px; stroke-width: 2.8; color: #1B7A43; vertical-align: -3px; margin-right: 8px; }
@media (max-width: 640px) {
  .voorna-tabel { font-size: 15px; }
  .voorna-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .voorna-tabel tr, .voorna-tabel th, .voorna-tabel td { display: block; width: auto !important; }
  .voorna-tabel tbody tr { border-bottom: 1px solid var(--line); }
  .voorna-tabel th, .voorna-tabel td { border-bottom: 0; padding: 8px 12px; }
  .voorna-tabel tbody th { padding-top: 12px; }
  .voorna-tabel .vn-nu::before, .voorna-tabel .vn-m4x::before { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
  .voorna-tabel .vn-nu::before { content: "Vaak nu"; }
  .voorna-tabel .vn-m4x::before { content: "Met M4X"; }
}