/* =============================================================
   Apex - publieke pagina's (index.php, routes.php, prijzen.php)
   Opgezet naar de landingsstijl van Atlas: dezelfde ruimteschaal, knoppen, topbalk,
   kaarten, prijskaarten en pop-ups, zodat de producten van Aresz familie van elkaar
   zijn. Daarbovenop wat alleen Apex heeft: de hero met een schermafbeelding, de
   beeld-en-tekstrijen, de zuilen van de drie routes en de fade-in.

   De hoofdkleur komt uit de platforminstellingen en staat in een klein inline
   :root-blok in de kop (_landing.php). Het magenta accent is de tweede kleur van
   de huisstijl van Aresz en staat hier vast.
   ============================================================= */

:root {
    /* De ruimte-, radius- en lijnschaal van het design system, gelijk aan Atlas. */
    --ruimte-1:        2px;
    --ruimte-2:        4px;
    --ruimte-3:        6px;
    --ruimte-4:        8px;
    --ruimte-5:       10px;
    --ruimte-6:       12px;
    --ruimte-7:       16px;
    --ruimte-8:       20px;
    --ruimte-9:       24px;
    --ruimte-10:      32px;
    --ruimte-11:      48px;
    --radius-2xs:      3px;
    --radius-md:      12px;
    --radius-pil:    999px;
    --lijn:            1px;
    --lijn-mid:      1.5px;

    /* Kleuren. --primary en --primary-dark zet de kop; dit is de terugval. */
    --primary:         #008080;
    --primary-dark:    #006e6e;
    --primary-a08:     color-mix(in srgb, var(--primary) 8%, transparent);
    --primary-a12:     color-mix(in srgb, var(--primary) 12%, transparent);
    --accent:          #b2047e;
    --accent-dark:     #93036a;
    --accent-a12:      rgba(178, 4, 126, .12);
    --licht:           #7fe0d4;   /* de lichte mint voor nadruk op donkere vlakken */
    --diep:            #06363a;   /* het diepe teal van de hero */

    /* Maten van de marketingsite: ruimer dan een werkscherm. */
    --land-max:        1160px;
    --land-pad:        1.25rem;
    --radius:          16px;
    --radius-sm:       10px;
    --shadow:          0 10px 40px rgba(16, 42, 48, .10);
    --shadow-zacht:    0 4px 18px rgba(16, 42, 48, .08);
    --shadow-scherm:   0 30px 70px rgba(6, 30, 34, .28), 0 8px 20px rgba(6, 30, 34, .12);
    --vak-y:           5rem;
    --hero-boven:      5rem;
    --hero-onder:      5.5rem;
    --kaart-min:       15rem;
    --prijskaart-min:  19rem;
    --prijs-groot:     2.6rem;
    --ink:             #1c2528;
    --muted:           #5c6b70;
    --bg:              #f7f9fa;
    --card:            #ffffff;
    --rand:            #d3dbde;
    --banner-hoogte:   0px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
    font-family: 'Outfit', system-ui, sans-serif;
    color: var(--ink); background: var(--bg); line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); }
.wrap { max-width: var(--land-max); margin: 0 auto; padding: 0 var(--land-pad); }

/* Lokaal: een smalle strook bovenaan, zoals in de app. */
.dev-banner {
    background: #f59e0b; color: #1c2528; text-align: center;
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: var(--ruimte-1) 0;
}

/* ---------- Fade-in ----------
   Mild: een korte opkomst van onderen. landing.js zet .js op <html> en .zichtbaar op elk
   element zodra het in beeld komt. Zonder JavaScript, of met "minder beweging" aan, staat
   alles er gewoon meteen. */
.js .fade { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .fade.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .fade { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Knoppen ---------- */
.btn {
    display: inline-flex; align-items: center; gap: var(--ruimte-4);
    padding: var(--ruimte-5) var(--ruimte-8); border-radius: var(--radius-pil);
    font-weight: 700; font-size: .95rem; font-family: inherit; line-height: 1.4;
    text-decoration: none; border: 0; cursor: pointer;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(178, 4, 126, .30); }
.btn-accent:hover { background: var(--accent-dark); box-shadow: 0 10px 26px rgba(178, 4, 126, .38); }
.btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: var(--lijn) solid rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: rgba(255, 255, 255, .22); }
.btn-lijn { background: var(--card); color: var(--primary); border: var(--lijn-mid) solid var(--primary); }
.btn-lijn:hover { background: var(--primary-a08); }
.btn-blok { width: 100%; justify-content: center; }

/* ---------- Topbalk ---------- */
.top {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
    border-bottom: var(--lijn) solid rgba(0, 0, 0, .06);
}
/* padding-BLOCK: .top-inner is ook een .wrap, die zorgt voor de zijmarge (les van Atlas). */
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-7); padding-block: var(--ruimte-6); }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* Het woordmerk (img/apex-logo.svg): alleen APEX, als vectorpad in teal, dus scherp op elk formaat.
   Overgetrokken uit het logo van Aresz; de kleur staat in het bestand zelf (fill). */
.brand-logo { height: 1.9rem; width: auto; display: block; }
/* De tabbladen en de acties (Inloggen, tandwiel) staan in aparte blokken: zo kunnen de
   tabbladen op een smal scherm naar een eigen regel in plaats van te verdwijnen. */
.tabs { display: flex; gap: var(--ruimte-8); align-items: center; font-size: .93rem; margin-left: auto; }
.tabs a { text-decoration: none; color: var(--muted); font-weight: 600; padding-block: var(--ruimte-2); white-space: nowrap; }
.tabs a:hover { color: var(--primary); }
.tabs a.actief { color: var(--ink); }
.tabs a.actief::after {
    content: ''; display: block; height: 2px; border-radius: var(--radius-2xs);
    background: var(--accent); margin-top: var(--ruimte-1);
}
/* Het tandwiel naar het beheer van Aresz: helemaal rechts, bescheiden. */
.top-acties { display: flex; align-items: center; gap: var(--ruimte-6); }
.beheer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.3rem; height: 2.3rem; border-radius: 50%;
    color: var(--muted); border: var(--lijn) solid var(--rand); background: var(--card);
    transition: color .15s ease, border-color .15s ease, transform .3s ease;
}
.beheer:hover { color: var(--primary); border-color: var(--primary); transform: rotate(45deg); }
.beheer svg { width: 17px; height: 17px; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(60rem 30rem at 85% 10%, rgba(127, 224, 212, .18), transparent 60%),
        radial-gradient(40rem 26rem at 10% 110%, rgba(178, 4, 126, .22), transparent 60%),
        linear-gradient(135deg, var(--diep) 0%, #0a5050 55%, var(--primary-dark) 100%);
}
/* Een zacht raster, als knipoog naar de matrix in de tool. */
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%);
}
.hero-inner {
    position: relative; z-index: 1; padding-block: var(--hero-boven) var(--hero-onder);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--ruimte-11); align-items: center;
}
.hero h1, .paginakop h1 {
    font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1;
    font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--ruimte-8);
}
.hero h1 em, .paginakop h1 em { font-style: normal; color: var(--licht); }
.hero p.lead, .paginakop p.lead { font-size: 1.12rem; opacity: .94; margin-bottom: var(--ruimte-10); max-width: 36rem; }
.hero-cta, .cta-blok { display: flex; gap: var(--ruimte-6); flex-wrap: wrap; }
.hero-kicker {
    display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--licht); margin-bottom: var(--ruimte-7);
}
.hero-punten { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ruimte-4) var(--ruimte-8); margin-top: var(--ruimte-9); font-size: .9rem; color: rgba(255, 255, 255, .82); }
.hero-punten li { display: flex; align-items: center; gap: var(--ruimte-3); }
.hero-punten svg { width: 16px; height: 16px; color: var(--licht); }

/* De schermafbeelding in de hero kantelt licht en komt recht bij hover. */
.hero-beeld { position: relative; perspective: 1600px; }
.hero-beeld .scherm { transform: rotateY(-7deg) rotateX(2deg); transform-origin: left center; transition: transform .6s ease; }
.hero-beeld:hover .scherm { transform: none; }

/* ---------- Kop van een tabblad (routes, prijzen) ---------- */
.paginakop {
    position: relative; overflow: hidden; color: #fff; padding-block: 4.5rem 4rem;
    background:
        radial-gradient(40rem 24rem at 90% 0%, rgba(127, 224, 212, .16), transparent 60%),
        radial-gradient(34rem 20rem at 0% 120%, rgba(178, 4, 126, .2), transparent 60%),
        linear-gradient(135deg, var(--diep) 0%, #0a5050 60%, var(--primary-dark) 100%);
}
.paginakop .wrap { position: relative; }
.paginakop p.lead { margin-bottom: 0; max-width: 44rem; }

/* ---------- Browserkader om een schermafbeelding ---------- */
.scherm {
    background: #fff; border-radius: var(--radius-sm); overflow: hidden;
    box-shadow: var(--shadow-scherm); border: var(--lijn) solid rgba(0, 0, 0, .06);
}
.scherm-balk { display: flex; gap: 6px; padding: 9px 12px; background: #eef2f3; border-bottom: var(--lijn) solid #e1e7e9; }
.scherm-balk span { width: 9px; height: 9px; border-radius: 50%; background: #d3dbde; }
.scherm-balk span:nth-child(1) { background: #f87171; }
.scherm-balk span:nth-child(2) { background: #fbbf24; }
.scherm-balk span:nth-child(3) { background: #34d399; }
.scherm img { width: 100%; height: auto; }

/* ---------- Secties ---------- */
.vak { padding: var(--vak-y) 0; }
.vak-grijs { background: linear-gradient(180deg, #eef5f5 0%, var(--bg) 100%); }
.vak-kop { max-width: 46rem; margin-bottom: var(--ruimte-11); }
.vak-kop.midden { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
    display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: var(--ruimte-4);
}
.vak h2 { font-size: clamp(1.55rem, 3.2vw, 2.1rem); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; margin-bottom: var(--ruimte-6); }
.vak p.sub { color: var(--muted); font-size: 1.04rem; }

/* ---------- Meten, vergelijken, groeien ---------- */
.kern-stappen { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-9); position: relative; }
/* Een stippellijn die de drie stappen verbindt. */
.kern-stappen::before {
    content: ""; position: absolute; top: 2.2rem; left: 16%; right: 16%; height: 0;
    border-top: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent);
}
.kern-stap { position: relative; text-align: center; padding: 0 var(--ruimte-7); }
.kern-icoon {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 4.4rem; height: 4.4rem; border-radius: 50%; margin-bottom: var(--ruimte-7);
    background: var(--card); color: var(--primary); box-shadow: var(--shadow-zacht);
    border: 2px solid var(--primary-a12);
}
.kern-icoon.accent { color: var(--accent); border-color: var(--accent-a12); }
.kern-icoon svg { width: 26px; height: 26px; }
.kern-nr {
    position: absolute; z-index: 2; top: -.2rem; left: calc(50% + 1.4rem);
    width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #fff;
    font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.kern-stap h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: var(--ruimte-3); }
.kern-stap p { color: var(--muted); font-size: .96rem; max-width: 19rem; margin: 0 auto; }

/* ---------- Beeld en tekst naast elkaar ---------- */
.toon {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
    gap: var(--ruimte-11); align-items: center; margin-bottom: 5rem;
}
.toon:last-child { margin-bottom: 0; }
.toon.omgekeerd { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); }
.toon.omgekeerd .toon-tekst { order: 2; }
.toon-label {
    display: inline-flex; align-items: center; gap: var(--ruimte-3);
    font-size: .8rem; font-weight: 800; letter-spacing: .04em;
    color: var(--primary); background: var(--primary-a12);
    padding: var(--ruimte-2) var(--ruimte-6); border-radius: var(--radius-pil); margin-bottom: var(--ruimte-7);
}
.toon-label.accent { color: var(--accent); background: var(--accent-a12); }
.toon-label svg { width: 14px; height: 14px; }
.toon h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; font-weight: 800; margin-bottom: var(--ruimte-6); }
.toon-tekst > p { color: var(--muted); margin-bottom: var(--ruimte-8); }
.toon-beeld .scherm { transition: transform .4s ease, box-shadow .4s ease; }
.toon-beeld .scherm:hover { transform: translateY(-4px); }

/* ---------- Kaartenraster ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kaart-min), 1fr)); gap: var(--ruimte-8); }
.kaart {
    background: var(--card); border-radius: var(--radius); padding: var(--ruimte-9);
    box-shadow: var(--shadow-zacht); border: var(--lijn) solid rgba(0, 0, 0, .04);
    transition: transform .2s ease, box-shadow .2s ease;
}
.kaart:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kaart-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: var(--radius-md); margin-bottom: var(--ruimte-7);
    background: var(--primary-a12); color: var(--primary);
}
.kaart-icoon svg { width: 20px; height: 20px; }
.kaart-icoon.accent { background: var(--accent-a12); color: var(--accent); }
.kaart h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: var(--ruimte-3); }
.kaart p { color: var(--muted); font-size: .94rem; }

/* ---------- Drie routes in het klein (startpagina) ---------- */
.mini-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-8); }
.mini-route {
    position: relative; display: block; text-decoration: none; color: var(--ink);
    background: var(--card); border-radius: var(--radius); padding: var(--ruimte-10) var(--ruimte-9) var(--ruimte-9);
    box-shadow: var(--shadow-zacht); border-top: 5px solid var(--route);
    transition: transform .2s ease, box-shadow .2s ease;
}
.mini-route:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mini-route-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: var(--radius-md); margin-bottom: var(--ruimte-7);
    background: color-mix(in srgb, var(--route) 12%, transparent); color: var(--route);
}
.mini-route-icoon svg { width: 22px; height: 22px; }
.mini-route h3 { font-size: 1.25rem; font-weight: 800; }
.mini-route p { color: var(--muted); margin-bottom: var(--ruimte-7); }
.mini-route-meer { display: inline-flex; align-items: center; gap: var(--ruimte-3); font-weight: 700; font-size: .9rem; color: var(--route); }
.mini-route-meer svg { width: 15px; height: 15px; transition: transform .2s ease; }
.mini-route:hover .mini-route-meer svg { transform: translateX(3px); }

/* ---------- Twee kolommen (achtergrond) ---------- */
.twee-kol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ruimte-11); align-items: center; }
.ticks-groot { gap: var(--ruimte-8) !important; }
.ticks-groot li { font-size: .98rem; }
.ticks-groot svg { width: 22px !important; height: 22px !important; color: var(--accent) !important; margin-top: 0 !important; }
.ticks-groot strong { color: var(--ink); }

/* ---------- Stappen ---------- */
.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kaart-min), 1fr)); gap: var(--ruimte-8); counter-reset: stap; margin-bottom: var(--ruimte-11); }
.stap { position: relative; padding-left: var(--ruimte-11); }
.stap::before {
    counter-increment: stap; content: counter(stap);
    position: absolute; left: 0; top: 0;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem;
}
.stap h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: var(--ruimte-2); }
.stap p { color: var(--muted); font-size: .94rem; }
#aanvragen .cta-blok, .cta-eind .cta-blok { justify-content: center; }
.cta-eind { text-align: center; max-width: 40rem; }
.cta-eind .sub { margin-bottom: var(--ruimte-10); }

/* ---------- Vinklijst ---------- */
.ticks { list-style: none; display: grid; gap: var(--ruimte-4); }
.ticks li { display: flex; align-items: flex-start; gap: var(--ruimte-5); color: #2c3a3f; }
.ticks svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: var(--ruimte-2); color: var(--primary); }

/* ---------- Overstapstrook ---------- */
.overstap { padding: 3rem 0; background: linear-gradient(120deg, #13262a 0%, #1c2f3a 100%); color: #fff; }
.overstap-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-9); flex-wrap: wrap; }
.overstap h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; margin-bottom: var(--ruimte-2); }
.overstap p { color: rgba(255, 255, 255, .74); font-size: .96rem; max-width: 44rem; }

/* ---------- De zuilen (routes.php) ----------
   Een raster van drie kolommen en drie rijen: de zuilen, het fundament dat onder alle
   drie doorloopt, en per zuil wat hij meet. Op een smal scherm wordt het een kolom en
   bepaalt `order` de volgorde: zuil, wat hij meet, volgende zuil. Het fundament staat
   dan als slot onderaan. */
.zuilen-vak { padding-top: 4rem; }
.zuilen {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--ruimte-10); align-items: end;
}
.zuil { grid-column: var(--kol); grid-row: 1; display: flex; flex-direction: column; align-items: center; scroll-margin-top: 6rem; }
.zuil-meet { grid-column: var(--kol); grid-row: 3; align-self: start; padding-top: var(--ruimte-10); }
.fundament { grid-column: 1 / -1; grid-row: 2; }

/* Het kapiteel: breder dan de schacht, met de naam en de vraag die de route beantwoordt. */
.zuil-kap {
    position: relative; width: 100%; text-align: center; color: #fff;
    background: linear-gradient(160deg, color-mix(in srgb, var(--route) 82%, #fff) 0%, var(--route) 60%);
    border-radius: var(--radius) var(--radius) var(--radius-2xs) var(--radius-2xs);
    padding: var(--ruimte-9) var(--ruimte-8) var(--ruimte-8);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--route) 30%, transparent);
}
/* De abacus: een smalle plaat onder het kapiteel, zoals bij een echte zuil. */
.zuil-kap::after {
    content: ""; position: absolute; left: 6%; right: 6%; bottom: -10px; height: 10px;
    background: color-mix(in srgb, var(--route) 70%, #000); border-radius: 0 0 var(--radius-2xs) var(--radius-2xs);
}
.zuil-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.4rem; height: 3.4rem; border-radius: 50%; margin-bottom: var(--ruimte-5);
    background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .45);
}
.zuil-icoon svg { width: 24px; height: 24px; }
.zuil-kap h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: var(--ruimte-1); }
.zuil-vraag { font-size: .92rem; opacity: .9; }

/* De schacht: vijf niveaus, naar boven toe voller van kleur. Smaller dan het kapiteel. */
.zuil-schacht {
    list-style: none; width: 80%; display: flex; flex-direction: column; gap: 3px;
    padding-top: 13px; position: relative;
}
/* Cannelures: verticale groeven over de hele schacht. */
.zuil-schacht::after {
    content: ""; position: absolute; inset: 13px 0 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .22) 18px 20px);
    mix-blend-mode: soft-light;
}
.niveau {
    display: flex; align-items: center; gap: var(--ruimte-5);
    padding: var(--ruimte-5) var(--ruimte-7); min-height: 3.1rem;
    font-size: .86rem; font-weight: 600; line-height: 1.25; color: var(--ink);
}
.niveau-nr {
    flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 800; background: rgba(255, 255, 255, .7); color: var(--route);
}
.niveau-1 { background: color-mix(in srgb, var(--route) 9%, #fff); }
.niveau-2 { background: color-mix(in srgb, var(--route) 18%, #fff); }
.niveau-3 { background: color-mix(in srgb, var(--route) 32%, #fff); }
.niveau-4 { background: color-mix(in srgb, var(--route) 62%, #fff); color: #fff; }
.niveau-5 { background: var(--route); color: #fff; }
.niveau-4 .niveau-nr, .niveau-5 .niveau-nr { background: rgba(255, 255, 255, .22); color: #fff; }

/* De voet: een brede plint met waar de route op gebaseerd is. */
.zuil-voet {
    width: 92%; margin-top: 3px; text-align: center;
    font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: color-mix(in srgb, var(--route) 80%, #000);
    background: color-mix(in srgb, var(--route) 14%, #fff);
    border-top: 3px solid color-mix(in srgb, var(--route) 40%, #fff);
    padding: var(--ruimte-4) var(--ruimte-6); border-radius: var(--radius-2xs);
}

/* Het fundament onder de drie zuilen: de werkwijze die ze delen. */
.fundament {
    display: flex; justify-content: center; gap: var(--ruimte-11); flex-wrap: wrap;
    background: linear-gradient(180deg, #2a3f54 0%, #1c2f3a 100%); color: #fff;
    border-radius: var(--radius-sm); padding: var(--ruimte-7) var(--ruimte-9);
    font-weight: 700; letter-spacing: .04em; margin-top: var(--ruimte-1);
    box-shadow: var(--shadow);
}
.fundament span { display: inline-flex; align-items: center; gap: var(--ruimte-4); }
.fundament svg { width: 18px; height: 18px; color: var(--licht); }

/* Wat een route meet. */
.zuil-tekst { color: var(--muted); font-size: .96rem; margin-bottom: var(--ruimte-8); }
.zuil-meet h3 {
    font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--route); margin-bottom: var(--ruimte-6);
}
.dimensies { list-style: none; display: grid; gap: var(--ruimte-4); }
.dimensies li {
    display: flex; align-items: center; gap: var(--ruimte-6);
    background: var(--card); border-radius: var(--radius-sm); padding: var(--ruimte-4) var(--ruimte-6);
    box-shadow: 0 1px 3px rgba(16, 42, 48, .06); border: var(--lijn) solid rgba(0, 0, 0, .04);
    font-weight: 600; font-size: .95rem; cursor: default;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dimensies li:hover { transform: translateX(3px); box-shadow: var(--shadow-zacht); }
.dimensie-icoon {
    flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--thema) 14%, #fff); color: var(--thema);
}
.dimensie-icoon svg { width: 18px; height: 18px; }

/* ---------- Prijskaarten ---------- */
.prijzen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--prijskaart-min), 1fr));
    gap: var(--ruimte-9); align-items: stretch; max-width: 56rem; margin: 0 auto;
}
.prijskaart {
    position: relative; display: flex; flex-direction: column;
    background: var(--card); border-radius: var(--radius); padding: var(--ruimte-10);
    box-shadow: var(--shadow-zacht); border: var(--lijn) solid rgba(0, 0, 0, .05);
}
.prijskaart.pro { border: 2px solid var(--accent); box-shadow: 0 16px 44px rgba(178, 4, 126, .16); }
.prijs-vlag {
    position: absolute; top: -.85rem; right: var(--ruimte-9);
    background: var(--accent); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; padding: var(--ruimte-2) var(--ruimte-6); border-radius: var(--radius-pil);
}
.prijskaart h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: var(--ruimte-2); }
.prijskaart .voor { color: var(--muted); font-size: .93rem; }
.prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ruimte-3); margin: var(--ruimte-7) 0 var(--ruimte-8); }
.prijs strong { font-size: var(--prijs-groot); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.prijs span { font-size: .9rem; color: var(--muted); }
.prijskaart .ticks { font-size: .94rem; align-content: start; flex: 1; }
.prijskaart .ticks svg { width: 16px; height: 16px; }
.prijs-voet-knop { margin-top: var(--ruimte-9); }
.prijs-voet { margin: var(--ruimte-9) auto 0; max-width: 56rem; color: var(--muted); font-size: .9rem; text-align: center; }

/* ---------- Apex Scan ----------
   Geen pakket maar een aanbieding, dus bewust een andere vorm dan de prijskaarten: een
   brede donkere strook met magenta accent. Op de startpagina schuift hij over de hero heen. */
.scan-vlag {
    display: inline-flex; align-items: center; gap: var(--ruimte-3);
    font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--accent); padding: var(--ruimte-2) var(--ruimte-6);
    border-radius: var(--radius-pil); margin-bottom: var(--ruimte-7);
}
.scan-vlag svg { width: 14px; height: 14px; }

.scan-aanbod {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--ruimte-11); align-items: center;
    max-width: 56rem; margin: var(--ruimte-11) auto 0; padding: var(--ruimte-11) var(--ruimte-10);
    border-radius: var(--radius); color: #fff; scroll-margin-top: 6rem;
    background:
        radial-gradient(30rem 18rem at 100% 0%, rgba(178, 4, 126, .35), transparent 65%),
        linear-gradient(135deg, var(--diep) 0%, #0a5050 100%);
    box-shadow: var(--shadow);
}
.scan-aanbod h2 { font-size: clamp(1.4rem, 2.8vw, 1.8rem); line-height: 1.2; font-weight: 800; margin-bottom: var(--ruimte-6); }
.scan-aanbod p { color: rgba(255, 255, 255, .85); margin-bottom: var(--ruimte-8); }
.scan-aanbod .ticks li { color: #fff; }
.scan-aanbod .ticks svg { color: var(--licht); }
.scan-prijs {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ruimte-2);
    background: rgba(255, 255, 255, .08); border: var(--lijn) solid rgba(255, 255, 255, .18);
    border-radius: var(--radius); padding: var(--ruimte-10) var(--ruimte-9);
}
.scan-prijs-label { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--licht); }
.scan-prijs strong { font-size: var(--prijs-groot); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.scan-prijs-plus { font-size: .9rem; color: rgba(255, 255, 255, .8); margin-bottom: var(--ruimte-7); }

.scan-strook-vak { position: relative; z-index: 2; margin-top: -3rem; }
.scan-strook {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ruimte-10); align-items: center;
    background: var(--card); border-radius: var(--radius); padding: var(--ruimte-10);
    box-shadow: 0 20px 50px rgba(6, 30, 34, .16); border-left: 6px solid var(--accent);
}
.scan-strook-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.6rem; height: 3.6rem; border-radius: var(--radius-md);
    background: var(--accent-a12); color: var(--accent);
}
.scan-strook-icoon svg { width: 28px; height: 28px; }
.scan-strook .scan-vlag { margin-bottom: var(--ruimte-4); }
.scan-strook h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.25; font-weight: 800; margin-bottom: var(--ruimte-3); }
.scan-strook p { color: var(--muted); font-size: .96rem; }
.scan-strook p strong { color: var(--accent); }
.scan-strook-actie { display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-4); text-align: center; }
.scan-strook-prijs { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.scan-strook-prijs small { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.scan-meer { display: inline-flex; align-items: center; gap: var(--ruimte-2); font-size: .86rem; font-weight: 700; text-decoration: none; }
.scan-meer svg { width: 14px; height: 14px; }
.scan-meer:hover { text-decoration: underline; }

/* De aanvraag-pop-up heeft twee varianten: een omgeving starten of een scan plannen. */
#modal-aanvraag .alleen-scan { display: none; }
#modal-aanvraag[data-soort="scan"] .alleen-scan { display: revert; }
#modal-aanvraag[data-soort="scan"] .alleen-start { display: none; }

/* ---------- Veelgestelde vragen ---------- */
.faq { display: grid; gap: var(--ruimte-5); max-width: 50rem; }
.faq details {
    background: var(--card); border-radius: var(--radius-sm); border: var(--lijn) solid rgba(0, 0, 0, .06);
    box-shadow: 0 1px 3px rgba(16, 42, 48, .05);
}
.faq summary {
    list-style: none; cursor: pointer; font-weight: 700; padding: var(--ruimte-7) var(--ruimte-9);
    display: flex; justify-content: space-between; align-items: center; gap: var(--ruimte-7);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--primary); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--ruimte-9) var(--ruimte-8); color: var(--muted); }

/* ---------- Formulier ---------- */
.veld { margin-bottom: var(--ruimte-7); }
label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: var(--ruimte-2); }
label .optie { font-weight: 400; color: var(--muted); }
input, textarea {
    width: 100%; padding: var(--ruimte-5) var(--ruimte-6); font: inherit; font-size: .95rem;
    border: var(--lijn) solid var(--rand); border-radius: var(--radius-sm); background: #fbfdfd; color: var(--ink);
}
input:focus, textarea:focus { outline: 2px solid var(--primary); border-color: transparent; }
textarea { resize: vertical; min-height: 5rem; }
.melding { border-radius: var(--radius-sm); padding: var(--ruimte-6) var(--ruimte-7); font-size: .9rem; margin-bottom: var(--ruimte-7); }
.melding-fout { background: #fdecec; color: #b3261e; }
.melding-goed { background: #e8f5ef; color: #0d6b45; }
.klein { font-size: .85rem; color: var(--muted); }

/* ---------- Footer ---------- */
.voet { padding: var(--ruimte-11) 0; background: var(--card); border-top: var(--lijn) solid rgba(0, 0, 0, .06); color: var(--muted); font-size: .9rem; }
.voet-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--ruimte-9); flex-wrap: wrap; }
.voet-logo { height: 1.4rem; width: auto; display: block; }
.voet p { margin-top: var(--ruimte-1); }
.voet nav { display: flex; gap: var(--ruimte-8); flex-wrap: wrap; }
.voet nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.voet nav a:hover { color: var(--primary); }

/* ---------- Pop-ups (inloggen, aanvragen, code kwijt) ---------- */
.modal-scrim {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(12, 28, 32, .55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: var(--ruimte-7);
    animation: scrim-in .2s ease;
}
.modal-scrim[hidden] { display: none; }
.modal {
    background: var(--card); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    width: 100%; max-width: 27rem; max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column; overflow: hidden;
    animation: modal-in .25s ease;
}
@keyframes scrim-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal, .modal-scrim { animation: none; } }
.modal-kop {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ruimte-7);
    padding: var(--ruimte-9) var(--ruimte-9) var(--ruimte-7);
}
.modal-kop h2 { font-size: 1.25rem; font-weight: 800; }
.modal-kop p { font-size: .9rem; color: var(--muted); margin-top: var(--ruimte-1); }
.modal-sluit {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
    border: 0; background: rgba(0, 0, 0, .05); color: var(--muted);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.modal-sluit:hover { background: rgba(0, 0, 0, .1); color: var(--ink); }
.modal-sluit svg { width: 16px; height: 16px; }
.modal-body { padding: 0 var(--ruimte-9) var(--ruimte-9); overflow-y: auto; }
.modal .btn-blok { margin-top: var(--ruimte-4); }
.modal-voet { margin-top: var(--ruimte-7); text-align: center; }
.link-knop {
    display: block; width: 100%; margin-top: var(--ruimte-6); padding: var(--ruimte-2) 0;
    background: none; border: 0; font: inherit; font-size: .88rem; font-weight: 600;
    color: var(--primary); cursor: pointer; text-align: center;
}
.link-knop:hover, .link-inline:hover { text-decoration: underline; }
.link-inline { background: none; border: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; padding: 0; }
.klaar { text-align: center; padding: var(--ruimte-4) 0 0; }
.klaar-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.4rem; height: 3.4rem; border-radius: 50%; margin-bottom: var(--ruimte-7);
    background: var(--primary-a12); color: var(--primary);
}
.klaar-icoon svg { width: 24px; height: 24px; }
.klaar h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: var(--ruimte-3); }
.klaar p { color: var(--muted); font-size: .94rem; margin-bottom: var(--ruimte-7); }

/* ---------- Smallere schermen ---------- */
@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-beeld { max-width: 40rem; }
    .hero-beeld .scherm { transform: none; }
    .toon, .toon.omgekeerd { grid-template-columns: 1fr; gap: var(--ruimte-10); margin-bottom: 4rem; }
    .toon.omgekeerd .toon-tekst { order: 0; }
    .twee-kol { grid-template-columns: 1fr; gap: var(--ruimte-10); }
    .scan-strook { grid-template-columns: auto minmax(0, 1fr); }
    .scan-strook-actie { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: var(--ruimte-7); }
    .scan-aanbod { grid-template-columns: 1fr; gap: var(--ruimte-10); }

    /* Zuilen onder elkaar: zuil, wat hij meet, volgende zuil. */
    .zuilen { grid-template-columns: 1fr; row-gap: 0; }
    .zuil, .zuil-meet, .fundament { grid-column: 1; grid-row: auto; order: var(--volgorde, 99); }
    .zuil { max-width: 26rem; width: 100%; margin: 0 auto; }
    .zuil-meet { max-width: 26rem; width: 100%; margin: 0 auto var(--ruimte-11); padding-top: var(--ruimte-9); }
    .fundament { order: 99; }
}
@media (max-width: 800px) {
    :root {
        --vak-y: 3.5rem; --land-pad: 1rem; --prijs-groot: 2.2rem;
        --hero-boven: 3.5rem; --hero-onder: 4rem;
    }
    .tabs { gap: var(--ruimte-6); font-size: .86rem; }
    .brand-logo { height: 1.6rem; }
    .kern-stappen, .mini-routes { grid-template-columns: 1fr; }
    .kern-stappen::before { display: none; }
    .overstap-inner { flex-direction: column; align-items: flex-start; }
    .voet-inner { flex-direction: column; align-items: flex-start; }
}
/* Nog smaller: de tabbladen krijgen een eigen regel onder het logo, Inloggen en het
   tandwiel blijven rechts bovenin. */
@media (max-width: 640px) {
    .scan-strook { grid-template-columns: 1fr; padding: var(--ruimte-9); gap: var(--ruimte-7); }
    .scan-strook-icoon { display: none; }
    .scan-aanbod { padding: var(--ruimte-10) var(--ruimte-9); }
    .top-inner { flex-wrap: wrap; row-gap: var(--ruimte-2); padding-bottom: 0; }
    .tabs { order: 3; width: 100%; margin-left: 0; justify-content: space-between; border-top: var(--lijn) solid rgba(0, 0, 0, .06); padding-block: var(--ruimte-3); }
    .tabs a::after { margin-top: 0; }
    .fundament { gap: var(--ruimte-7); }
}