/* MKB Versnellers, hoofdsite. Gedeeld door alle pagina's. */
:root {
  --navy-900: #0a1a2f; --navy-800: #0e2238; --navy-700: #12304b;
  --accent: #2179b0; --accent-600: #1a6391; --accent-soft: rgba(33,121,176,.12);
  --secondary: #5fa8c9;
  --white: #fff; --paper: #f5f6f8; --steel-50: #eef1f5; --steel-100: #e3e8ef;
  --steel-200: #cfd6e0; --steel-400: #94a3b4; --steel-500: #6b7787;
  --ink: #16202c; --ink-soft: #45525f;
  --success: #1f9d57; --danger: #d4513b;
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 14px 40px rgba(10,26,47,.10);
  --wrap: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-head); color: var(--navy-900); letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
h1 { font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h2 { font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-weight: 600; font-size: 1.15rem; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 0; }
.section.paper { background: var(--paper); }
.section.navy { background: var(--navy-900); color: var(--steel-200); }
.section.navy h2, .section.navy h3 { color: var(--white); }
.kicker { display: inline-block; font: 600 .78rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.navy .kicker, .hero .kicker { color: var(--secondary); }
.streep { width: 48px; height: 5px; border-radius: 3px; background: var(--accent); margin-bottom: 22px; }
.kop { max-width: 720px; margin-bottom: 56px; }
.kop p { margin-top: 18px; color: var(--ink-soft); font-size: 1.1rem; }
.navy .kop p { color: var(--steel-200); }
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font: 600 1rem/1 var(--font-body); padding: 17px 26px; border-radius: 10px; text-decoration: none; border: 1.5px solid transparent; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--accent); color: var(--white); box-shadow: 0 12px 30px rgba(33,121,176,.28); }
.btn-primary:hover { background: var(--accent-600); }
.btn-ghost { color: var(--white); border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { border-color: rgba(255,255,255,.6); }
.btn-sm { padding: 12px 18px; font-size: .92rem; }
.icoon { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Hero */
.hero { background: radial-gradient(1200px 600px at 85% -10%, var(--navy-700), transparent 60%), var(--navy-900); color: var(--steel-200); padding: 96px 0 112px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hero h1 { color: var(--white); }
.hero .lead { font-size: 1.2rem; margin: 26px 0 38px; max-width: 560px; }
.hero .knoppen { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .klein { margin-top: 28px; font-size: .92rem; color: var(--steel-400); }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } }

.schema { position: relative; background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 28px; padding: 30px; }
.schema-label { font: 600 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-400); margin-bottom: 14px; }
.losse { display: flex; flex-wrap: wrap; gap: 8px; }
.losse span { font-size: .85rem; color: var(--steel-200); border: 1px dashed rgba(255,255,255,.22); border-radius: 8px; padding: 7px 11px; }
.pijl { display: flex; justify-content: center; padding: 18px 0; color: var(--secondary); }
.systeem { background: var(--white); border-radius: 20px; padding: 20px; color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.systeem-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.systeem-top strong { font-family: var(--font-head); font-size: 1rem; color: var(--navy-900); }
.eenmalig { font-size: .75rem; font-weight: 600; color: var(--success); background: rgba(31,157,87,.10); border-radius: 8px; padding: 5px 9px; }

/* Rekenhulp: huren tegenover eenmalig */
.reken { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.velden { display: grid; gap: 22px; }
.veld label { display: flex; justify-content: space-between; font-weight: 600; color: var(--navy-900); margin-bottom: 10px; }
.veld output { color: var(--accent); font-family: var(--font-head); }
.veld input[type=range] { width: 100%; accent-color: var(--accent); }
.uitkomst { background: var(--navy-900); border-radius: 28px; padding: 40px; color: var(--steel-200); }
.uitkomst .bedrag { font: 800 clamp(2.2rem, 5vw, 3.4rem)/1.05 var(--font-head); color: var(--white); letter-spacing: -0.02em; margin: 10px 0 6px; }
.balken { margin-top: 30px; display: grid; gap: 10px; }
.balk { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; font-size: .88rem; }
.balk .spoor { height: 12px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; }
.balk .vul { height: 100%; background: var(--danger); border-radius: 6px; transition: width .25s; }
.uitkomst .noot { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); font-size: .95rem; }
.uitkomst .noot strong { color: var(--white); }
@media (max-width: 900px) { .reken { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 600px) { .uitkomst { padding: 28px 22px; border-radius: 20px; } }
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.modules div { background: var(--paper); border-radius: 10px; padding: 12px 10px; font-size: .8rem; font-weight: 600; color: var(--navy-900); }
.modules div span { display: block; height: 4px; width: 26px; border-radius: 3px; background: var(--accent); margin-bottom: 9px; }
.regels { margin-top: 12px; display: grid; gap: 6px; }
.regels i { display: block; height: 9px; border-radius: 5px; background: var(--steel-50); }
.regels i:nth-child(1) { width: 92%; } .regels i:nth-child(2) { width: 78%; } .regels i:nth-child(3) { width: 85%; }

/* Keuzehulp */
.keuze { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; }
.keuze-kaart { border: 1px solid var(--steel-100); border-radius: 22px; padding: 40px; display: flex; flex-direction: column; }
.keuze-kaart.hoofd { background: var(--navy-900); border-color: var(--navy-900); color: var(--steel-200); }
.keuze-kaart.hoofd h3 { color: var(--white); }
.keuze-kaart.hoofd .kicker { color: var(--secondary); }
.keuze-kaart h3 { font-size: 1.45rem; margin-bottom: 14px; }
.keuze-kaart > p { color: var(--ink-soft); }
.keuze-kaart.hoofd > p { color: var(--steel-200); }
.keuze-kaart ul { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
.keuze-kaart li { position: relative; padding-left: 26px; }
.keuze-kaart li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 4px; border-radius: 3px; background: var(--accent); }
.keuze-kaart .btn { margin-top: auto; align-self: flex-start; }
.btn-licht { color: var(--navy-900); border-color: var(--steel-200); }
.btn-licht:hover { border-color: var(--navy-900); }
@media (max-width: 900px) { .keuze { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .keuze-kaart { padding: 28px 22px; } }

/* Herkenning */
.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kaart { background: var(--white); border: 1px solid var(--steel-100); border-radius: 20px; padding: 32px; }
.paper .kaart { border-color: transparent; box-shadow: var(--shadow); }
.kaart .icoon { color: var(--accent); margin-bottom: 22px; }
.kaart h3 { margin-bottom: 12px; }
.kaart p { color: var(--ink-soft); }
@media (max-width: 900px) { .drie { grid-template-columns: 1fr; } }

/* Wat we bouwen */
.zes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--steel-100); border: 1px solid var(--steel-100); border-radius: 22px; overflow: hidden; }
.tegel { background: var(--white); padding: 34px 30px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; transition: background .15s; }
.tegel:hover { background: var(--paper); }
.tegel .icoon { color: var(--accent); }
.tegel p { color: var(--ink-soft); font-size: .97rem; }
.tegel .meer { margin-top: auto; padding-top: 8px; color: var(--accent); font-weight: 600; font-size: .92rem; }
@media (max-width: 900px) { .zes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .zes { grid-template-columns: 1fr; } }

/* Pakket vervangen */
.vervang { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.pakketten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pakketten a { display: flex; justify-content: space-between; align-items: center; background: var(--white); border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--navy-900); font-weight: 600; box-shadow: var(--shadow); }
.pakketten a span { color: var(--accent); font-size: .88rem; font-weight: 600; }
.vervang ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.vervang li { display: flex; gap: 12px; color: var(--ink-soft); }
.vervang li .icoon { width: 22px; height: 22px; color: var(--success); flex: none; margin-top: 2px; }
@media (max-width: 900px) { .vervang { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 460px) { .pakketten { grid-template-columns: 1fr; } }

/* Werkwijze */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: stap; }
.stap { position: relative; background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 30px 26px; }
.stap::before { counter-increment: stap; content: "0" counter(stap); font: 700 .9rem var(--font-head); color: var(--secondary); display: block; margin-bottom: 26px; }
.stap h3 { margin-bottom: 10px; }
.stap p { font-size: .96rem; }
.stap .tag { display: inline-block; margin-top: 18px; font-size: .8rem; font-weight: 600; color: var(--white); background: rgba(255,255,255,.08); border-radius: 8px; padding: 6px 10px; }
@media (max-width: 960px) { .stappen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stappen { grid-template-columns: 1fr; } }

/* Zekerheden */
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.zeker .icoon { color: var(--accent); width: 30px; height: 30px; margin-bottom: 18px; }
.zeker h3 { margin-bottom: 10px; }
.zeker p { color: var(--ink-soft); font-size: .97rem; }
@media (max-width: 960px) { .vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vier { grid-template-columns: 1fr; } }

/* Cases (placeholder) */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-leeg { border: 2px dashed var(--steel-200); border-radius: 20px; padding: 32px; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--steel-500); }
.case-leeg strong { color: var(--ink-soft); font-family: var(--font-head); margin-bottom: 6px; }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }

/* Motorkap */
.motor { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--steel-100); border-radius: 20px; overflow: hidden; border: 1px solid var(--steel-100); }
.feiten div { background: var(--white); padding: 24px; }
.feiten strong { display: block; font-family: var(--font-head); color: var(--navy-900); margin-bottom: 6px; }
.feiten span { color: var(--ink-soft); font-size: .93rem; }
@media (max-width: 900px) { .motor { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 460px) { .feiten { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--steel-100); padding: 22px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font: 600 1.08rem var(--font-head); color: var(--navy-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 14px; color: var(--ink-soft); }

/* CTA */
.cta { background: var(--navy-900); border-radius: 28px; padding: 72px 56px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.cta h2 { color: var(--white); }
.cta p { color: var(--steel-200); margin-top: 16px; font-size: 1.08rem; }
.cta .rechts { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta .rechts small { color: var(--steel-400); font-size: .88rem; }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; padding: 48px 28px; } }

/* Footer */
.footer { background: var(--navy-900); color: var(--steel-200); padding: 72px 0 36px; font-size: .94rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; }
.footer h4 { font: 600 .78rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-400); margin: 0 0 16px; }
.footer a { color: var(--steel-200); text-decoration: none; display: block; margin-bottom: 10px; }
.footer a:hover { color: var(--white); }
.footer .los { margin-top: 18px; font-size: .88rem; color: var(--steel-400); }
.footer .los a { display: inline; color: var(--steel-200); text-decoration: underline; }
.footer-onder { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.10); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--steel-400); font-size: .85rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .section { padding: 72px 0; }
  .hero { padding: 64px 0 80px; }
  .kop { margin-bottom: 40px; }
  .kaart, .tegel { padding: 26px 22px; }
  .schema { padding: 20px; border-radius: 20px; }
  .modules { grid-template-columns: 1fr 1fr; }
}

/* Strook naar de AI-training, onder de keuzehulp */
.strook { margin-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 26px; border-radius: 16px; background: var(--paper); color: var(--ink); text-decoration: none; }
.strook:hover { background: var(--steel-50); }
.strook-label { font: 600 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 7px 10px; }
.strook > span:nth-child(2) { flex: 1 1 320px; color: var(--ink-soft); }
.strook-pijl { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* AI-training op de homepage */
.training-blok { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.training-blok h2 { margin-bottom: 20px; }
.training-lead { font-size: 1.1rem; }
.training-noot { margin: 22px 0 32px; padding-left: 16px; border-left: 4px solid var(--accent); border-radius: 2px; font-size: .95rem; color: var(--steel-200); }
.mini-programma { list-style: none; padding: 0; margin: 0; counter-reset: blok; display: grid; gap: 10px; }
.mini-programma li { counter-increment: blok; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 16px 18px; }
.mini-programma li::before { content: "0" counter(blok); grid-row: span 2; font: 700 .9rem var(--font-head); color: var(--secondary); padding-top: 2px; }
.mini-programma strong { color: var(--white); font-family: var(--font-head); font-weight: 600; }
.mini-programma span { font-size: .9rem; color: var(--steel-400); }
@media (max-width: 900px) { .training-blok { grid-template-columns: 1fr; gap: 40px; } }

/* Huidige pagina in het menu */

/* AI-training: kaart "In het kort" */
.kort-kaart { background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 28px; padding: 30px; }
.kort-kaart dl { margin: 0; display: grid; gap: 16px; }
.kort-kaart dl div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.kort-kaart dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.kort-kaart dt { font-weight: 600; color: var(--steel-400); font-size: .9rem; }
.kort-kaart dd { margin: 0; color: var(--white); }

/* AI-training: dagprogramma */
.programma { list-style: none; padding: 0; margin: 0; max-width: 860px; }
.programma li { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--steel-100); }
.programma li:last-child { border-bottom: 1px solid var(--steel-100); }
.programma .tijd { font: 700 1.05rem var(--font-head); color: var(--accent); padding-top: 2px; }
.programma h3 { margin-bottom: 8px; }
.programma p { color: var(--ink-soft); }
.programma .pauze { padding: 14px 0; }
.programma .pauze .tijd, .programma .pauze p { color: var(--steel-500); font-weight: 500; font-size: .95rem; }
@media (max-width: 560px) { .programma li { grid-template-columns: 1fr; gap: 6px; } }

/* AI-training: uitleg MCP */
.uitleg { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.uitleg-tekst { display: grid; gap: 18px; font-size: 1.08rem; }
@media (max-width: 900px) { .uitleg { grid-template-columns: 1fr; gap: 28px; } }

.vervolg { margin-top: 28px; text-align: center; color: var(--ink-soft); }

/* AI-training: skills en koppelingen naast elkaar */
.twee-uitleg { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.uitleg-kaart { background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 22px; padding: 34px; display: grid; gap: 14px; align-content: start; }
.uitleg-kaart h3 { font-size: 1.35rem; }
.uitleg-label { font: 600 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); }
.skill-voorbeeld { margin: 6px 0 0; background: var(--navy-900); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 18px 20px; overflow-x: auto; font: 500 .85rem/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--steel-200); }
.samen { margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); }
.samen strong { color: var(--white); }
@media (max-width: 900px) { .twee-uitleg { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .uitleg-kaart { padding: 26px 22px; } .skill-voorbeeld { white-space: pre-wrap; } }

/* Automatiseringen per branche */
.status { display: inline-block; vertical-align: 2px; margin-left: 6px; font: 600 .68rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--steel-500); background: var(--steel-50); border-radius: 6px; padding: 4px 6px; }
.status.live { color: var(--success); background: rgba(31,157,87,.10); }
.branche-uit { display: block; padding: 7px 0; color: var(--steel-500); font-weight: 600; font-size: .92rem; }
.footer-uit { display: block; color: var(--steel-400); font-size: .88rem; }
.kies-label { margin-top: auto; font-weight: 600; color: var(--navy-900); margin-bottom: 10px; }
.branches { display: flex; flex-wrap: wrap; gap: 8px; }
.branche-chip { display: inline-flex; align-items: center; border: 1.5px solid var(--steel-200); border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: .92rem; color: var(--navy-900); text-decoration: none; }
a.branche-chip:hover { border-color: var(--accent); }
.branche-chip.uit { color: var(--steel-500); border-style: dashed; }
.branche-noot { margin-top: 12px; font-size: .85rem; color: var(--steel-500); }

/* Branchekleuren, letterlijk uit de huisstijl. Alleen als aanwijzer, nooit als vlak. */
.theme-bouw { --accent: #ff6a1a; --accent-600: #e85d10; --accent-soft: rgba(255,106,26,.12); }
.theme-groothandel { --accent: #16a34a; --accent-600: #13883e; --accent-soft: rgba(22,163,74,.12); }
.theme-retail { --accent: #7c3aed; --accent-600: #6d28d9; --accent-soft: rgba(124,58,237,.12); }
.theme-horeca { --accent: #f43f5e; --accent-600: #e11d48; --accent-soft: rgba(244,63,94,.12); }
.theme-transport { --accent: #e0a100; --accent-600: #946b00; --accent-soft: rgba(224,161,0,.14); }

/* In het menu houden ook de branches die nog niet live zijn hun kleur, wel wat zachter. */
.item[class*="theme-"] .item-icoon { background: var(--accent-soft); color: var(--accent-600); }
a.item[class*="theme-"]:hover .item-icoon { background: var(--accent); color: var(--white); }
.item.uit[class*="theme-"] .item-icoon { opacity: .75; }
.item.uit[class*="theme-"] strong { color: var(--ink-soft); }

.status { display: inline-flex; align-items: center; gap: 6px; }
.stip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kleurstip { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

.branche-regel { display: flex !important; align-items: center; gap: 10px; }
.branche-regel.uit { color: var(--steel-500); padding: 9px 0; font-weight: 500; }

.branche-chip { gap: 8px; }
.branche-chip.uit { border-style: solid; border-color: var(--steel-100); }
a.branche-chip:hover { border-color: var(--accent); }

.fnav { display: flex !important; align-items: center; gap: 9px; margin-bottom: 10px; }
.fnav .kleurstip { width: 8px; height: 8px; }
.fnav small { color: var(--steel-400); font-size: .8rem; }
.fnav-bouw { color: #ff8f52 !important; }
.fnav-groothandel { color: #4ade80; }
.fnav-retail { color: #a78bfa; }
.fnav-horeca { color: #fb7185; }
.fnav-transport { color: #f0c14b; }
a.fnav:hover { color: var(--white) !important; }

/* ---------- Rekentool: uitleg en bronnen ---------- */
.veld-uitleg { margin-top: 8px; font-size: .85rem; color: var(--ink-soft); }
.bronnen { margin-top: 40px; border-top: 1px solid var(--steel-100); padding-top: 20px; font-size: .92rem; color: var(--ink-soft); }
.bronnen summary { cursor: pointer; font-weight: 600; color: var(--navy-900); }
.bronnen p { margin-top: 12px; max-width: 820px; }
.bronnen ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; max-width: 920px; }
.bron-datum { font-size: .82rem; color: var(--steel-500); }

/* ---------- Pakket vervangen: logo bij de naam ---------- */
.pakket-naam { display: inline-flex; align-items: center; gap: 10px; }
.pakket-naam svg { width: 20px; height: 20px; flex: none; }

/* ---------- Subpaginas ---------- */
.hero-sub { padding: 72px 0 88px; }
.hero-sub h1 { font-size: clamp(2rem, 3.8vw, 3rem); }
.lead-breed { max-width: 760px; }
.kruimels { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; font-size: .86rem; }
.kruimels li { color: var(--steel-400); display: inline-flex; align-items: center; gap: 8px; }
.kruimels li + li::before { content: "/"; color: var(--steel-500); }
.kruimels a { color: var(--steel-200); text-decoration: none; }
.kruimels a:hover { color: var(--white); }

/* Logo-tegels: echte merklogos in een kleur, of de naam als er geen logobestand is */
.logo-tegel { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; background: var(--white); border: 1px solid var(--steel-100); border-radius: 12px; color: var(--navy-900); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.logo-tegel svg { width: 22px; height: 22px; flex: none; }
.logo-tegel.tekst { font-weight: 500; color: var(--ink-soft); white-space: normal; height: auto; min-height: 52px; padding: 10px 16px; }
.vervangt-kaart { background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 28px; padding: 30px; }
.logo-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.logo-rij .logo-tegel { width: 100%; }
.logo-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.logo-raster .logo-tegel { width: 100%; }

/* Wat het systeem doet: drie kolommen, icoon links, tekst rechts */
.functies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.functie { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.functie .item-icoon { width: 44px; height: 44px; border-radius: 12px; }
.functie .item-icoon svg { width: 22px; height: 22px; }
.functie h3 { font-size: 1.05rem; margin: 2px 0 6px; }
.functie p { color: var(--ink-soft); font-size: .96rem; }

/* Op maat: kop links, lijst rechts */
.op-maat { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.maat-lijst { list-style: none; padding: 0; margin: 0; }
.maat-lijst li { position: relative; padding: 18px 0 18px 32px; border-bottom: 1px solid rgba(255,255,255,.10); font-size: 1.08rem; color: var(--white); }
.maat-lijst li::before { content: ""; position: absolute; left: 0; top: calc(18px + .62em); width: 16px; height: 4px; border-radius: 3px; background: var(--accent); }
.maat-lijst li:first-child { padding-top: 0; }
.maat-lijst li:first-child::before { top: .62em; }
.eerlijk { margin-top: 32px; background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 26px; }
.eerlijk .paneel-kop { color: var(--secondary); }
.eerlijk h3 { margin: 4px 0 10px; }

/* Andere onderdelen */
.andere-kop { margin: 4px 0 28px; }
.andere { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ander { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--steel-100); border-radius: 14px; text-decoration: none; color: var(--navy-900); font-weight: 600; font-size: .92rem; transition: border-color .15s, background .15s; }
.ander svg { width: 22px; height: 22px; flex: none; stroke: var(--accent); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ander:hover { border-color: var(--accent); background: var(--paper); }

/* Merkvermelding */
.merk-noot { padding: 0 0 48px; }
.merk-noot p { font-size: .82rem; color: var(--steel-500); max-width: 820px; }

/* Overzichtspagina: zes kaarten van gelijke hoogte */
.systeem-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.systeem-kaart { display: flex; flex-direction: column; gap: 14px; padding: 32px; border: 1px solid var(--steel-100); border-radius: 22px; text-decoration: none; color: inherit; background: var(--white); transition: border-color .15s, box-shadow .15s, transform .15s; }
.systeem-kaart:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-3px); }
.systeem-kaart .item-icoon { width: 48px; height: 48px; border-radius: 12px; }
.systeem-kaart .item-icoon svg { width: 24px; height: 24px; }
.systeem-kaart h3 { font-size: 1.25rem; }
.systeem-kaart p { color: var(--ink-soft); }
.vervangt-mini { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--steel-100); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.vervangt-label { width: 100%; font: 600 .72rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); }
.mini-logo { display: inline-flex; color: var(--navy-900); }
.mini-logo svg { width: 20px; height: 20px; }
.mini-naam { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.systeem-kaart .meer { color: var(--accent); font-weight: 600; font-size: .95rem; }

@media (max-width: 1100px) { .andere { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .functies, .systeem-raster { grid-template-columns: 1fr 1fr; }
  .op-maat { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .functies, .systeem-raster, .logo-rij { grid-template-columns: 1fr; }
  .andere { grid-template-columns: 1fr; }
  .vervangt-kaart { padding: 22px; border-radius: 20px; }
  .systeem-kaart { padding: 26px 22px; }
}

/* Subpagina: tekstkolom breder dan de kaart */
.hero-sub .hero-grid { grid-template-columns: 1.3fr .7fr; gap: 56px; }
@media (max-width: 960px) { .hero-sub .hero-grid { grid-template-columns: 1fr; } }
.logo-rij .logo-tegel, .logo-raster .logo-tegel { justify-content: center; text-align: center; }
.vervangt-mini { align-content: flex-start; gap: 8px; margin-top: 0; }
.vervangt-mini .mini-naam { border: 1px solid var(--steel-100); border-radius: 8px; padding: 5px 9px; background: var(--paper); }

/* Overzicht: alle kaarten in een rij delen hetzelfde raster, zodat titels, lijnen en links op een lijn staan */
@supports (grid-template-rows: subgrid) {
  .systeem-kaart { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; }
}

/* ---------- AI-training: drie formaten ---------- */
.formaten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.formaat { display: flex; flex-direction: column; gap: 14px; padding: 32px; border: 1px solid var(--steel-100); border-radius: 22px; background: var(--white); }
@supports (grid-template-rows: subgrid) {
  .formaat { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 14px; }
}
.formaat.uitgelicht { background: var(--navy-900); border-color: var(--navy-900); color: var(--steel-200); box-shadow: var(--shadow); }
.formaat h3 { font-size: 1.4rem; }
.formaat.uitgelicht h3 { color: var(--white); }
.formaat-label { font: 600 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.formaat.uitgelicht .formaat-label { color: var(--secondary); }
.formaat-duur { font-weight: 600; color: var(--navy-900); }
.formaat.uitgelicht .formaat-duur { color: var(--white); }
.formaat-voor { color: var(--ink-soft); font-size: .95rem; }
.formaat-voor strong { display: block; font: 600 .72rem/1.6 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); }
.formaat.uitgelicht .formaat-voor { color: var(--steel-200); }
.formaat.uitgelicht .formaat-voor strong { color: var(--steel-400); }
.formaat-lijst { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--steel-100); display: grid; gap: 10px; align-content: start; }
.formaat.uitgelicht .formaat-lijst { border-color: rgba(255,255,255,.12); }
.formaat-lijst li { position: relative; padding-left: 24px; }
.formaat-lijst li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 4px; border-radius: 3px; background: var(--accent); }
.formaat-mee { background: var(--paper); border-radius: 14px; padding: 16px 18px; font-size: .93rem; color: var(--ink-soft); }
.formaat.uitgelicht .formaat-mee { background: var(--navy-800); color: var(--steel-200); }
.formaat-kop { font-weight: 600; color: var(--navy-900); margin-bottom: 4px; }
.formaat.uitgelicht .formaat-kop { color: var(--white); }
.formaat-prijs { font: 700 1.05rem var(--font-head); color: var(--navy-900); align-self: end; }
.formaat.uitgelicht .formaat-prijs { color: var(--white); }
.formaat .btn { justify-self: start; align-self: start; }
.formaat.uitgelicht .btn-licht { color: var(--white); }
.formaat-noot { margin-top: 32px; max-width: 820px; color: var(--ink-soft); font-size: .97rem; }

/* Programma: tussenkoppen per formaat */
.programma .programma-kop { padding: 18px 0 0; border-top: 0; }
.programma .programma-kop + li { border-top: 1px solid var(--steel-100); }
.formaat-tag { display: inline-block; font: 600 .74rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 7px 10px; }
.formaat-tag.uitgelicht { color: var(--white); background: var(--navy-900); }

/* Voorbereiding: vier genummerde stappen op een lichte achtergrond */
.stappen-licht { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: voor; }
.stappen-licht li { counter-increment: voor; background: var(--white); border-radius: 20px; padding: 28px 24px; box-shadow: var(--shadow); }
.stappen-licht li::before { content: "0" counter(voor); display: block; font: 700 .9rem var(--font-head); color: var(--accent); margin-bottom: 18px; }
.stappen-licht h3 { margin-bottom: 8px; }
.stappen-licht p { color: var(--ink-soft); font-size: .95rem; }

@media (max-width: 960px) {
  .formaten { grid-template-columns: 1fr; }
  .formaat { grid-row: auto; display: flex; }
  .stappen-licht { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .stappen-licht { grid-template-columns: 1fr; }
  .formaat { padding: 26px 22px; }
}

/* Kleine iconen naast tekst mogen niet krimpen */
.menu-knop svg, .paneel-cta svg, .bel svg, .pakket-naam svg, .logo-tegel svg, .mini-logo svg, .ander svg { flex: none; max-width: none; }

/* Pakket vervangen: officiele logo's, allemaal even hoog en links uitgelijnd */
.pakket-logo { height: 24px; width: auto; max-width: 132px; object-fit: contain; object-position: left center; }

/* Strook naar nieuwe systemen, onder de tegels van Wat we bouwen */
.nieuw-strook { margin-top: 24px; display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 22px 26px; border: 1px solid var(--steel-100); border-radius: 18px; text-decoration: none; color: var(--navy-900); transition: border-color .15s, background .15s; }
.nieuw-strook:hover { border-color: var(--accent); background: var(--paper); }
.nieuw-strook .item-icoon { width: 44px; height: 44px; border-radius: 12px; }
.nieuw-strook strong { display: block; font-family: var(--font-head); font-size: 1.08rem; margin-bottom: 4px; }
.nieuw-strook small { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 700px) { .nieuw-strook { grid-template-columns: 44px 1fr; } .nieuw-strook .strook-pijl { grid-column: 2; } }

/* Werkwijze: nummer, titel, tekst en label per rij op dezelfde hoogte */
@supports (grid-template-rows: subgrid) {
  .stap { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
  .stap::before { margin-bottom: 14px; }
  .stap .tag { margin-top: 10px; align-self: end; justify-self: start; }
}
.stappen { position: relative; }

/* Footer onderregel */
.footer-onder a { display: inline; color: var(--steel-200); text-decoration: underline; margin: 0; }

/* Overzicht Wat we bouwen: nieuw systeem als brede kaart bovenaan */
.nieuw-kaart { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; padding: 44px; margin-bottom: 56px; background: var(--navy-900); border-radius: 28px; color: var(--steel-200); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.nieuw-kaart:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.nieuw-kaart .kicker { color: var(--secondary); }
.nieuw-kaart h2 { color: var(--white); margin-bottom: 16px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.nieuw-kaart p { margin-bottom: 22px; }
.nieuw-kaart .meer { color: var(--white); font-weight: 600; }
.nieuw-kaart ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.nieuw-kaart li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; color: var(--white); font-weight: 600; }
.nieuw-kaart li svg { width: 22px; height: 22px; flex: none; stroke: var(--secondary); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.raster-kop { margin-bottom: 20px; }
@media (max-width: 900px) { .nieuw-kaart { grid-template-columns: 1fr; padding: 30px 24px; } }

/* Andere onderdelen: zes stuks, drie per rij */
.andere { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .andere { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .andere { grid-template-columns: 1fr; } }

/* Logo's optisch even zwaar: hoge beeldmerken iets groter, platte woordmerken iets kleiner */
.logo-salesforce { height: 38px; }
.logo-hubspot { height: 24px; }
.logo-afas { height: 46px; max-width: 150px; }
.logo-exact { height: 19px; }
.logo-carerix { height: 22px; }
.logo-teamleader { height: 21px; }
.logo-simplicate { height: 30px; }
.logo-excel { height: 26px; }
.pakket-merk { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy-900); }
.pakketten a { min-height: 64px; }

/* Footer: logo als een geheel, icoon naast de naam */
.footer .merk { display: flex; margin-bottom: 18px; }
.footer .footer-uit { margin-top: 2px; font-size: .82rem; }

/* ================= UI/UX-upgrade (ui-ux-pro-max) ================= */

/* Naar de inhoud: alleen zichtbaar bij toetsenbordgebruik */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy-900); color: var(--white); padding: 12px 18px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }

/* Zichtbare focusrand voor toetsenbordgebruikers, ook op donkere vlakken */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .navy :focus-visible, .footer :focus-visible, .cta :focus-visible,
.uitkomst :focus-visible, .formaat.uitgelicht :focus-visible, .keuze-kaart.hoofd :focus-visible, .nieuw-kaart:focus-visible,
.paneel-intro :focus-visible, .skip-link:focus-visible { outline-color: var(--secondary); }
.menu-knop:focus-visible, .nav-link:focus-visible { outline-offset: 6px; }

/* Contrast: tekst moet minimaal 4,5:1 halen */
.eenmalig, .status.live { color: #13753f; }
.uitkomst .kicker { color: var(--secondary); }
.strook-label, .strook-pijl { color: var(--accent-600); }
.paper a:not(.btn):not(.item):not(.ander):not(.systeem-kaart), .vervolg a { color: var(--accent-600); }

/* Typografie: evenwichtige koppen, geen losse woorden onderaan alinea's */
h1, h2, h3 { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }
.kicker, .paneel-kop, .formaat-label, .uitleg-label, .vervangt-label, .schema-label { font-size: max(.78rem, 12px); }
.status { font-size: max(.72rem, 12px); }

/* Klikbaar is ook zichtbaar klikbaar */
summary, .menu-knop, .hamburger, a, button { cursor: pointer; }
.item.uit, .branche-chip.uit, .branche-regel.uit { cursor: default; }

/* Aanraken op mobiel: ruimere regels in het mobiele menu en de footer */
@media (max-width: 1100px) { .mobiel a, .mobiel .branche-regel { padding: 11px 0; } }
@media (max-width: 600px) { .footer a { padding: 4px 0; } }

/* Rustige fade-in van koppen en kaartgroepen. Zonder JavaScript is alles direct zichtbaar. */
.js .onthul { opacity: 0; transform: translateY(12px); transition: opacity .4s ease-out, transform .4s ease-out; }
.js .onthul.zichtbaar { opacity: 1; transform: none; }

/* Minder beweging als de bezoeker dat in zijn systeem heeft ingesteld */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .onthul { opacity: 1; transform: none; }
  .systeem-kaart:hover, .nieuw-kaart:hover { transform: none; }
}

/* AI-training: derde uitlegkaart over de volle breedte, en de programma's in twee groepen */
.uitleg-breed { grid-column: 1 / -1; }
.programma-groepen { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.programma-groepen .paneel-kop { margin-bottom: 14px; }
.programma-groepen .logo-raster { grid-template-columns: 1fr 1fr; }
.programma-groepen .logo-tegel { justify-content: center; }
.programma-noot { margin-top: 28px; font-size: .82rem; color: var(--steel-500); }
@media (max-width: 900px) { .programma-groepen { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .programma-groepen .logo-raster { grid-template-columns: 1fr; } }

/* Trainingsprijzen */
.formaat-prijs { display: grid; gap: 2px; align-self: start; align-content: start; font: inherit; }
.formaat-prijs strong { font: 800 1.9rem/1.1 var(--font-head); letter-spacing: -0.02em; color: var(--navy-900); margin-bottom: 4px; }
.formaat-prijs span { font-size: .9rem; color: var(--ink-soft); }
.formaat.uitgelicht .formaat-prijs strong { color: var(--white); }
.formaat.uitgelicht .formaat-prijs span { color: var(--steel-200); }
.traject { margin-top: 24px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 26px 30px; border: 1px solid var(--steel-100); border-left: 5px solid var(--accent); border-radius: 18px; background: var(--paper); }
.traject h3 { margin: 6px 0 6px; font-size: 1.25rem; }
.traject p { color: var(--ink-soft); }
.inbegrepen { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; color: var(--ink-soft); font-size: .95rem; }
.inbegrepen li { position: relative; padding-left: 24px; }
.inbegrepen li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 4px; border-radius: 3px; background: var(--accent); }
.training-prijs { margin: -14px 0 24px; color: var(--white); font-weight: 600; }
@media (max-width: 700px) { .traject { grid-template-columns: 1fr; } .traject .btn { justify-self: start; } }

/* ================= Gelijk met de live site (assets/css/styles.css van mkbversnellers.nl) ================= */
:root { --ease: cubic-bezier(.22, .61, .36, 1); --anthracite: #161b22; }

/* Knoppen: rond, Sora, tillen iets op bij hover */
.btn { font: 600 .98rem/1 var(--font-head); padding: 14px 26px; border-radius: 999px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.btn-sm { padding: 10px 18px; font-size: .92rem; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost, .btn-licht { border-width: 1.6px; }
.btn-ghost:hover, .btn-licht:hover { transform: translateY(-2px); }

/* Header: 70 pixels, net als live */
.header-binnen { height: 70px; }
@media (max-width: 1100px) { .mobiel.open { max-height: calc(100vh - 70px); } }

/* Ruimte tussen blokken: zoals live */
.section { padding: clamp(48px, 5.5vw, 76px) 0; }
.kop { margin-bottom: clamp(28px, 3.5vw, 44px); }
.hero { padding: 80px 0 56px; }
.hero-sub { padding: 64px 0 72px; }

/* Labels boven koppen: Sora, ruim gespatieerd */
.kicker, .formaat-label, .uitleg-label { font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .14em; }
.hero .kicker { color: #9fd0e6; }

/* Kop: kleurverloop en een subtiel raster op de achtergrond, zoals live */
.hero { position: relative; background: radial-gradient(125% 120% at 78% -10%, #16344f 0%, #0e2339 46%, #0a1a2f 100%); }
.hero::before { content: ""; position: absolute; inset: -20% -10% 0; opacity: .10; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 65%); }
.hero > .wrap { position: relative; }
.hero .lead { color: #bcc8d6; }
.tekst-licht { color: var(--secondary); }
.vinkjes { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #dbe4ee; font-size: .95rem; font-weight: 500; }
.vinkjes li { display: inline-flex; align-items: center; gap: 8px; }
.vinkjes li::before { content: ""; width: 14px; height: 8px; border-left: 2px solid var(--secondary); border-bottom: 2px solid var(--secondary); transform: rotate(-45deg) translateY(-2px); }
.hero .klein { margin-top: 14px; }
.hero-rij { margin: 56px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: .9rem; color: var(--steel-400); }
.hero-rij .rij-item { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-family: var(--font-head); font-weight: 600; }
.hero-rij .rij-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); }

/* Veelgestelde vragen: elke vraag in een eigen kader */
.faq details { background: var(--white); border: 1px solid var(--steel-100); border-radius: 14px; padding: 20px 22px; margin-bottom: 10px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq details:hover { border-color: var(--steel-200); }
.faq details[open] { box-shadow: 0 2px 10px rgba(10,26,47,.06); }
.faq details p { margin-top: 12px; }

/* Afsluitend blok: gecentreerd, kleurverloop */
.cta { display: block; text-align: center; background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); border-radius: 22px; padding: clamp(34px, 5vw, 56px); }
.cta p { max-width: 620px; margin-left: auto; margin-right: auto; }
.cta .rechts { align-items: center; margin-top: 26px; }

/* Footer: antraciet, kolomkoppen wit in Sora */
.footer { background: var(--anthracite); color: #aeb9c5; padding: 58px 0 26px; }
.footer h4 { font: 700 .9rem/1.12 var(--font-head); letter-spacing: .04em; color: var(--white); }
.footer-onder { color: #8b97a4; }

/* Fade-in: zelfde tempo als live */
.js .onthul { transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }

@media (max-width: 600px) {
  .section { padding: 48px 0; }
  .hero { padding: 56px 0 44px; }
  .hero-rij { margin-top: 40px; }
}

/* Programma kort: ochtend en middag naast elkaar */
.programma-kort { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.programma-kort ol { list-style: none; padding: 0; margin: 16px 0 0; }
.programma-kort li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--steel-100); }
.programma-kort .tijd { font: 700 1rem var(--font-head); color: var(--accent); padding-top: 1px; }
.programma-kort h3 { font-size: 1.02rem; margin: 0 0 2px; }
.programma-kort p { color: var(--ink-soft); font-size: .93rem; }
.programma-lunch { margin-top: 18px; font-size: .9rem; color: var(--steel-500); }
@media (max-width: 800px) { .programma-kort { grid-template-columns: 1fr; gap: 28px; } }

/* Mobiel: grotere aanraakvlakken */
.faq details { padding: 0; }
.faq summary { padding: 20px 22px; min-height: 48px; align-items: center; }
.faq details p { margin: 0; padding: 0 22px 20px; }
.bronnen summary { display: inline-block; padding: 10px 0; }
.kruimels a { display: inline-block; padding: 6px 0; }
.strook-label { font-size: max(.78rem, 12px); }

/* ---------- Pagina Pakket vervangen ---------- */
.pakket-snel { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pakket-snel span { color: var(--steel-400); font-size: .9rem; margin-right: 4px; }
.pakket-snel a { color: var(--white); text-decoration: none; font: 600 .9rem var(--font-head); padding: 8px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.pakket-snel a:hover { border-color: var(--white); background: rgba(255,255,255,.06); }
.stappen-vijf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: overstap; }
.overstap { counter-increment: overstap; border-top: 3px solid var(--accent); padding-top: 18px; }
.overstap::before { content: "0" counter(overstap); display: block; font: 700 .9rem var(--font-head); color: var(--accent); margin-bottom: 10px; }
.overstap h3 { margin-bottom: 8px; }
.overstap p { color: var(--ink-soft); font-size: .95rem; }
.vier-kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vier-kaarten .kaart h3 { margin-bottom: 8px; }
.pakket-lijst { display: grid; gap: 0; }
.pakket-blok { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--steel-100); scroll-margin-top: 90px; }
.pakket-blok:last-child { border-bottom: 1px solid var(--steel-100); }
.pakket-kop { display: flex; align-items: center; gap: 10px; font: 600 1rem var(--font-head); color: var(--navy-900); padding-top: 4px; }
.pakket-tekst { display: grid; gap: 10px; max-width: 760px; }
.pakket-tekst h3 { font-size: 1.25rem; }
.pakket-tekst p { color: var(--ink-soft); }
.pakket-tekst p strong { color: var(--navy-900); }
.pakket-feit { background: var(--paper); border-radius: 12px; padding: 12px 16px; font-size: .93rem; }
.pakket-feit a { color: var(--accent-600); }
.pakket-meer a { color: var(--accent-600); font-weight: 600; }
.pakket-blok:target { background: linear-gradient(90deg, var(--accent-soft), transparent 60%); }
@media (max-width: 960px) { .stappen-vijf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .vier-kaarten, .stappen-vijf { grid-template-columns: 1fr; }
  .pakket-blok { grid-template-columns: 1fr; gap: 14px; }
}
.pakket-blok { align-items: start; }
.pakket-kop { align-self: start; min-height: 40px; }
/* Effen basiskleur onder de kleurverlopen */
.hero, .cta { background-color: var(--navy-900); }

/* Training: wat je leert, drie korte blokken */
.leer-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.leer { background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.leer h3 { font-size: 1.2rem; }
@media (max-width: 900px) { .leer-drie { grid-template-columns: 1fr; } }

/* Veelgestelde vragen: twee kolommen naast elkaar */
.faq { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
.faq details { margin-bottom: 0; }
@media (max-width: 800px) { .faq { grid-template-columns: 1fr; } }

/* Kaart "Vervangt vaak" in de kop van systeempagina's: rustige lijst in plaats van witte blokjes */
.vervangt-kaart { padding: 28px 30px; }
.vv-lijst { list-style: none; margin: 4px 0 0; padding: 0; }
.vv-lijst li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--white); font: 600 1rem/1.35 var(--font-head); }
.vv-beeld { flex: none; width: 12px; height: 22px; display: grid; place-items: center; color: rgba(255,255,255,.72); }
.vv-beeld svg { width: 20px; height: 20px; max-width: none; }
.vv-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); opacity: .8; }
.vv-straks { margin: 18px 0 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(95,168,201,.12); border: 1px solid rgba(95,168,201,.28); color: var(--white); font: 600 .95rem/1.35 var(--font-head); }
.vv-straks svg { flex: none; width: 20px; height: 20px; stroke: var(--secondary); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Per pakket als kaarten (Sam, 14-10: "niet alles onder elkaar"). De acht
   pakketten stonden als lange zuil over de volle breedte, met veel wit ernaast.
   Nu twee naast elkaar, met de link onderaan zodat een rij gelijk eindigt. */
.pakket-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pakket-blok { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 32px; border: 1px solid var(--steel-100); border-radius: 22px; background: var(--white); }
.pakket-blok:last-child { border-bottom: 1px solid var(--steel-100); }
.pakket-kop { padding-top: 0; min-height: 32px; }
.pakket-tekst { display: flex; flex-direction: column; gap: 10px; max-width: none; flex: 1; }
.pakket-meer { margin-top: auto; padding-top: 6px; }
.pakket-blok:target { background: var(--white); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pakket-naast { margin-top: 32px; color: var(--ink-soft); }
@media (max-width: 900px) { .pakket-lijst { grid-template-columns: 1fr; } .pakket-blok { padding: 26px 22px; } }

/* Tweede uitgelichte route op Wat we bouwen, licht in plaats van navy. */
.nieuw-kaart.licht { background: var(--paper); border: 1px solid var(--steel-100); color: var(--ink-soft); }
.nieuw-kaart.licht .kicker { color: var(--accent-600); }
.nieuw-kaart.licht h2, .nieuw-kaart.licht .meer { color: var(--navy-900); }
.nieuw-kaart.licht li { background: var(--white); border-color: var(--steel-100); color: var(--navy-900); }
.nieuw-kaart.licht li svg { stroke: var(--accent); }

/* De zin boven de kaarten was piepklein; nu een tussenkop. */
.raster-kop { margin: 8px 0 24px; font: 600 1.35rem/1.3 var(--font-head); color: var(--navy-900); letter-spacing: 0; text-transform: none; }