/* Oifis — www.oifis.nl
 *
 * Blauw als rode draad, doorgetrokken uit de applicatie zelf: de balk bovenin het
 * gereedschap is #457BA2, en dat is hier de dragende kleur. Wie van de site naar een
 * schermafdruk kijkt, moet niet het gevoel hebben dat hij naar twee producten kijkt.
 *
 * Eén stijlblad, geen framework. De site is vier pagina's; een bouwstap ertussen zetten
 * kost meer dan hij oplevert, en statische bestanden zijn te hosten waar dan ook. */

:root {
    /* De kleuren van Oifis zelf, gemeten en niet gegokt.
       #457BA2 en #6EB0DC komen uit het logo — precies de twee blauwen die de applicatie
       ook in haar balk gebruikt. #24CDD5 is het turquoise dat op oifis.nl de knoppen en
       het actieve menu-item draagt, en #26313C is het donkere vlak.

       Een eerdere versie stond op #5192E1: dat was de vaakst voorkomende hex in de
       stylesheet van oifis.nl, maar die kleur staat nergens op het scherm. Kleuren tel je
       niet in een bestand, die lees je van de opgemaakte pagina af. */
    --blue: #457BA2;
    --blue-deep: #35617F;
    --blue-light: #6EB0DC;
    --blue-dark: #26313C;
    --blue-soft: #EDF4F9;
    --blue-line: #CFE0EC;

    --cyan: #24CDD5;
    --cyan-deep: #17A9AF;

    --ink: #26313C;
    --ink-soft: #5C6A77;
    --ink-faint: #8D9AA6;

    --paper: #FFFFFF;
    --ground: #F5F8FC;

    --gold: #C98A2E;
    --green: #3E8E5A;

    --radius: 12px;
    --radius-lg: 18px;
    --shadow: 0 1px 2px rgba(22, 34, 43, .06), 0 8px 24px rgba(22, 34, 43, .07);
    --shadow-lift: 0 2px 4px rgba(22, 34, 43, .07), 0 18px 48px rgba(22, 34, 43, .13);

    --wide: 1140px;
    --narrow: 720px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 16px/1.6 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* De width/height op de afdrukken staan er voor de plaatsreservering (zie Index.cshtml), maar
   een browser houdt de verhouding alleen aan als de hoogte hier op auto staat. Zonder deze regel
   wordt elke afdruk naar de kolombreedte geperst terwijl de hoogte op 2000px blijft staan. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: clamp(23px, 2.8vw, 31px); }
h3 { font-size: 18px; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 22px; }

.lead { font-size: 19px; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.center { text-align: center; }

/* ── Balk ──────────────────────────────────────────────────────────────────── */

.bar {
    background: var(--blue);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

.bar .wrap { display: flex; align-items: center; gap: 8px; height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.brand b { font-size: 19px; letter-spacing: -.01em; }
.brand span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }

.bar nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.bar nav a {
    color: #fff;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 15px;
    opacity: .9;
}

.bar nav a:hover { background: rgba(255, 255, 255, .14); opacity: 1; color: #fff; }
.bar nav a.on { background: var(--cyan); color: #10333A; opacity: 1; font-weight: 600; }

/* De taalkiezer. Drie codes achter een streepje, zodat hij bij de menu-items hoort maar er
   niet nog een menu-item bij lijkt te zijn. De taal waarin je staat, staat er ook in: een
   kiezer die alleen de andere talen toont, laat je raden waar je bent. */

.langs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .28);
}

.langs a,
.langs .lang-on {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
}

.langs a { opacity: .7; }
.langs a:hover { opacity: 1; background: rgba(255, 255, 255, .14); color: #fff; }
.langs .lang-on { opacity: 1; font-weight: 700; background: rgba(255, 255, 255, .18); }

@media (max-width: 720px) {
    .langs { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* ── Knoppen ───────────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn-primary { background: var(--cyan); color: #10333A; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--cyan-deep); color: #fff; transform: translateY(-1px); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.btn-quiet { background: var(--paper); color: var(--blue-deep); border-color: var(--blue-line); }
.btn-quiet:hover { background: var(--blue-soft); color: var(--blue-dark); }

.btn-wide { width: 100%; text-align: center; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero {
    background: linear-gradient(168deg, var(--blue-dark) 0%, var(--blue-deep) 48%, var(--blue) 100%);
    color: #fff;
    padding: 76px 0 0;
    overflow: hidden;
}

.hero h1 { color: #fff; max-width: 16ch; }
.hero .lead { color: rgba(255, 255, 255, .84); max-width: 52ch; font-size: 20px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.hero .actions .btn-primary { background: var(--cyan); color: #10333A; }
.hero .actions .btn-primary:hover { background: var(--cyan-deep); color: #fff; }

.hero-note { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .7); }

.hero-shot {
    margin: 54px auto -120px;
    max-width: 980px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    border: 1px solid rgba(255, 255, 255, .22);
    border-bottom: 0;
}

.after-hero { padding-top: 150px; }

/* ── Secties ───────────────────────────────────────────────────────────────── */

section { padding: 62px 0; }
section.tight { padding: 40px 0; }
section.on-paper { background: var(--paper); }

.eyebrow {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan-deep);
    font-weight: 700;
    margin: 0 0 10px;
}

.section-head { max-width: 62ch; margin-bottom: 34px; }

/* ── Modules ───────────────────────────────────────────────────────────────── */

.modules { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.module {
    background: var(--paper);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    padding: 22px;
}

.module h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.module h3 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); flex: none; }
.module p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ── Uitgelicht: tekst naast een schermafdruk ──────────────────────────────── */

.feature { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr 1.25fr; }
.feature + .feature { margin-top: 66px; }
.feature.flip .feature-words { order: 2; }

.feature ul { margin: 0; padding-left: 18px; color: var(--ink-soft); }
.feature li { margin-bottom: 7px; }

.shot {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    border: 1px solid var(--blue-line);
    background: var(--paper);
}

@media (max-width: 860px) {
    .feature { grid-template-columns: 1fr; gap: 22px; }
    .feature.flip .feature-words { order: 0; }
}

/* Een afdruk waar je op kunt klikken. De hint verschijnt pas bij aanwijzen: een label dat
   er altijd staat, leest na de derde module als ruis. */
[data-zoom] { cursor: zoom-in; position: relative; }

[data-zoom]::after {
    content: "Klik om te vergroten";
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(22, 34, 43, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

[data-zoom]:hover::after,
[data-zoom]:focus-visible::after { opacity: 1; }
[data-zoom]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.zoom {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(11, 22, 30, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 28px;
}

.zoom[hidden] { display: none; }

.zoom figure { margin: 0; max-width: 1500px; width: 100%; }

.zoom img {
    width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    background: #fff;
}

.zoom figcaption {
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    text-align: center;
    margin-top: 14px;
}

.zoom-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.zoom-close:hover { background: rgba(255, 255, 255, .2); }

/* ── Prijzen ───────────────────────────────────────────────────────────────── */

.plans { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }

/* Het pakket voor wie alleen werkt. Boven de vier kaarten en niet ertussen: een zzp'er is een
   andere lezer dan een bedrijf dat pakketten vergelijkt, en hij hoeft niet eerst langs drie
   teamprijzen. Een vijfde kolom zou bovendien allebei die lezers slechter bedienen — vijf
   kaarten van 240 passen niet naast elkaar, dus de vijfde valt alleen op een eigen regel. */

.solo {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    background: var(--paper);
    border: 1px solid var(--blue-line);
    border-left: 4px solid var(--cyan);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}

.solo h3 { margin: 2px 0 6px; font-size: 22px; }
.solo h3 small { font-size: 13px; font-weight: 500; color: var(--ink-faint); margin-left: 4px; }
.solo p { margin: 0 0 8px; }

/* Op één regel doorlopend, met puntjes ertussen: het zijn er vier en een opsomming onder
   elkaar zou dit blok net zo hoog maken als de kaarten eronder. */
.solo-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 14px;
    color: var(--ink-soft);
}

.solo-list li { display: flex; align-items: center; gap: 7px; }

.solo-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    flex: none;
}

@media (max-width: 720px) {
    .solo { grid-template-columns: 1fr; gap: 16px; }
    .solo-do .btn { width: 100%; }
}

/* Wat je los bij een pakket koopt. Bewust geen pakketkaarten: dit zijn geen keuzes waartussen
   je kiest maar dingen die je erbij pakt, en kaarten met knoppen eronder zouden suggereren
   dat je er één moet nemen. Vandaar een rustiger raster zonder rand per stuk.

   De ondergrens is 320 en niet 260 omdat het er zes zijn: bij 260 passen er vier op een rij en
   staan de laatste twee naast twee lege vakken, en die vakken laten de achtergrondkleur zien
   die hier de scheidingslijn is. Zes gaat op in drie, twee en één, dus bij elke breedte is de
   laatste rij vol. */

.addons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2px;
    background: var(--blue-line);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.addon { background: var(--paper); padding: 20px 22px; }
.addon h3 { margin: 0; font-size: 16px; }
.addon p { margin: 6px 0 0; }

/* Naam links, bedrag rechts, en het bedrag op de grondlijn van de naam: wie een prijslijst
   scant, leest de bedragen onder elkaar en de namen ernaast. */
.addon-top { display: flex; align-items: baseline; gap: 10px; }
.addon-top h3 { flex: 1; }

.addon-sum { font-size: 19px; font-weight: 700; color: var(--blue-dark); white-space: nowrap; }
.addon-sum small { font-size: 12px; font-weight: 500; color: var(--ink-faint); margin-left: 3px; }

/* Een onderdeel dat in dit pakket uitstaat maar los te koop is. Het streepje in de tabel
   blijft staan — het klopt — maar het is niet het einde van het gesprek. */
.matrix th.buyable::after {
    content: attr(data-buyable);
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cyan-ink, #15808A);
}

/* Vier naast elkaar op een breed scherm, twee bij twee daaronder. Smaller dan 240 wordt
   een pakketkaart onleesbaar: de som eronder past dan niet meer op één regel. */
.plans.four { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.plans.four .plan { padding: 26px 20px; }

/* Voor hoeveel mensen een pakket bedoeld is. Vlak onder de naam, want het is bij dit
   model het eerste waar iemand op kiest. */
.band {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--cyan-deep);
}

/* De enterprise-kaart heeft geen bedrag om mee te pronken, dus krijgt hij het donkere
   vlak: anders leest een kolom met "op aanvraag" als een kaart waar iets ontbreekt. */
.plan.enterprise { background: var(--blue-dark); border-color: var(--blue-dark); }
.plan.enterprise h3 { color: #fff; }
.plan.enterprise .band { color: var(--cyan); }
.plan.enterprise .muted, .plan.enterprise .what { color: rgba(255, 255, 255, .7); }
.plan.enterprise .sum { color: #fff; font-size: 21px; }
.plan.enterprise .row { border-top-color: rgba(255, 255, 255, .14); }
.plan.enterprise .example { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); }
.plan.enterprise li { color: rgba(255, 255, 255, .76); border-top-color: rgba(255, 255, 255, .1); }
.plan.enterprise li::before { border-color: var(--cyan); }
.plan.enterprise .btn-quiet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.plan.enterprise .btn-quiet:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.plan {
    background: var(--paper);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan.picked { border-color: var(--cyan); box-shadow: var(--shadow-lift); position: relative; }

.plan .tag {
    position: absolute;
    top: -13px;
    left: 24px;
    background: var(--cyan);
    color: #10333A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 12px;
    border-radius: 999px;
}

.plan h3 { margin-bottom: 4px; }
.plan .price { font-size: 38px; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 2px; }
.plan .price small { font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.plan .per { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; }

/* Twee bedragen onder elkaar: wat de omgeving kost, en wat een gebruiker kost. Als twee
   regels en niet als één opgeteld bedrag, want het zijn twee verschillende dingen — de
   omgeving betaal je één keer, de gebruikers tel je erbij. */
.twofold { margin: 16px 0 18px; }

.twofold .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--ground);
}

.twofold .row:first-child { border-top: 0; }
.twofold .what { color: var(--ink-soft); font-size: 14px; }
.twofold .sum { font-size: 25px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.twofold .sum small { font-size: 13px; font-weight: 400; color: var(--ink-soft); }

.twofold .example {
    margin-top: 10px;
    background: var(--blue-soft);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--blue-deep);
}

/* ── Welke module in welk pakket ───────────────────────────────────────────── */

.matrix-wrap { overflow-x: auto; }

.matrix {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    background: var(--paper);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    overflow: hidden;
}

.matrix th, .matrix td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--ground); }
.matrix thead th { background: var(--blue-soft); border-top: 0; font-size: 14px; color: var(--blue-dark); }
.matrix thead th small { display: block; font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.matrix thead th:not(:first-child), .matrix td:not(:first-child) { text-align: center; width: 130px; }
.matrix tbody th { font-weight: 600; font-size: 15px; }
.matrix tbody th small { display: block; font-weight: 400; color: var(--ink-faint); font-size: 13px; }
.matrix .yes { color: var(--green); font-weight: 700; }
.matrix .no { color: var(--ink-faint); }
.matrix tbody tr:hover { background: var(--ground); }

.plan ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 15px; }
.plan li { padding: 7px 0 7px 26px; position: relative; color: var(--ink-soft); border-top: 1px solid var(--ground); }
.plan li:first-child { border-top: 0; }
.plan li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: rotate(-45deg);
}
.plan li.off { color: var(--ink-faint); }
.plan li.off::before { border-color: var(--ink-faint); opacity: .45; }

.plan .btn { margin-top: auto; }

/* ── Formulier ─────────────────────────────────────────────────────────────── */

.card {
    background: var(--paper);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow);
}

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }

.field input, .field textarea, .field select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--blue-line);
    border-radius: 9px;
    background: var(--ground);
    font: inherit;
    color: var(--ink);
}

.field input:focus, .field textarea:focus, .field select:focus {
    outline: 2px solid var(--blue);
    outline-offset: -1px;
    background: var(--paper);
}

.field textarea { min-height: 96px; resize: vertical; }
.field .hint { font-size: 13px; color: var(--ink-faint); margin-top: 5px; }

.pair { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }

/* Een pagina die van boven naar beneden gelezen wordt in plaats van gescand: de
   privacyverklaring. Smal gehouden, want een regel van veertig woorden leest niemand uit, en
   dit is bij uitstek een tekst waarvan iemand moet kunnen zeggen dat hij hem heeft gelezen. */

.prose { max-width: 68ch; }
.prose h1 { margin-bottom: 6px; }
.prose h2 { font-size: 19px; margin: 34px 0 8px; }
.prose p { margin: 0 0 14px; line-height: 1.7; color: var(--ink-soft); }
.prose .lead { color: var(--ink); }
.prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); }
.prose li { margin-bottom: 6px; line-height: 1.7; }

/* Waar de interesse naar uitgaat. Tien vakjes in twee kolommen: een lijst van tien onder
   elkaar maakt het formulier twee keer zo lang en dat is precies wat een aanvraagformulier
   niet moet zijn. Niets is verplicht, dus er staat ook geen sterretje bij. */

.picks {
    border: 1px solid var(--blue-line);
    border-radius: 11px;
    padding: 16px 16px 12px;
    margin: 0 0 16px;
    background: var(--ground);
}

.picks legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 0 6px;
}

.picks .hint { font-size: 13px; color: var(--ink-faint); margin: 0 0 12px; }

.pick-grid { display: grid; gap: 7px 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .pick-grid { grid-template-columns: 1fr; } }

.pick-grid label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    padding: 3px 0;
}

.pick-grid input {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--blue);
    cursor: pointer;
}

.pick-grid label:hover span { color: var(--blue-dark); }

/* De honeypot: uit het zicht en uit de tabvolgorde, maar niet display:none —
   sommige bots vullen juist alles in wat verborgen is. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; font-size: 15px; }
.notice-ok { background: #E8F4EC; color: #1F5B37; border: 1px solid #BBDCC7; }
.notice-bad { background: #FBECEC; color: #8A2C2C; border: 1px solid #EBC6C6; }
.notice-info { background: var(--blue-soft); color: var(--blue-dark); border: 1px solid var(--blue-line); }

/* ── Blokken met nadruk ────────────────────────────────────────────────────── */

.strip {
    background: var(--blue-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 38px 34px;
    display: grid;
    gap: 24px;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
}

.strip h2 { color: #fff; margin-bottom: 6px; }
.strip p { color: rgba(255, 255, 255, .82); margin: 0; }
.strip .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.strip .btn-primary { background: var(--cyan); color: #10333A; }
.strip .btn-primary:hover { background: var(--cyan-deep); color: #fff; }

@media (max-width: 760px) {
    .strip { grid-template-columns: 1fr; }
    .strip .actions { justify-content: flex-start; }
}

.facts { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fact { background: var(--paper); border: 1px solid var(--blue-line); border-radius: var(--radius); padding: 20px; }
.fact b { display: block; font-size: 27px; letter-spacing: -.02em; margin-bottom: 2px; }
.fact span { color: var(--ink-soft); font-size: 14px; }

/* ── Een echt document, als vel papier ─────────────────────────────────────── */

.sample {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-top: 66px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-lg);
    padding: 34px;
}

.sample h3 { font-size: 24px; }
.sample .btn { margin-top: 6px; }

/* Het vel zelf: wit, met een schaduw eronder zodat het als papier leest en niet als
   nog een schermafdruk. */
.paper {
    background: #fff;
    border: 1px solid var(--blue-line);
    border-radius: 6px;
    box-shadow: var(--shadow-lift);
    overflow: hidden;
    max-width: 440px;
    margin: 0 auto;
}

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

/* ── Snelkoppelingen naar de modules ───────────────────────────────────────── */

.jump { display: flex; flex-wrap: wrap; gap: 8px; }

.jump a {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-line);
    color: var(--blue-deep);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.jump a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── Het werkproces: genummerde stappen ────────────────────────────────────── */

.process {
    background: var(--blue-dark);
    color: #fff;
}

.process h2, .process h3 { color: #fff; }
.process .eyebrow { color: var(--cyan); }
.process .lead { color: rgba(255, 255, 255, .78); }

.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.step {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    padding: 24px 22px;
}

.step .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cyan);
    color: var(--blue-dark);
    font-weight: 800;
    margin-bottom: 12px;
}

.step p { color: rgba(255, 255, 255, .76); margin: 0; font-size: 15px; }

/* ── Tellers ───────────────────────────────────────────────────────────────── */

.counters {
    background: linear-gradient(150deg, var(--blue-deep), var(--blue));
    color: #fff;
}

.counters .facts { gap: 0; }

.counters .fact {
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .2);
    border-radius: 0;
    text-align: center;
}

.counters .fact:first-child { border-left: 0; }
.counters .fact b { color: #fff; font-size: 34px; }
.counters .fact span { color: rgba(255, 255, 255, .78); }

/* ── Vragen ────────────────────────────────────────────────────────────────── */

.qa { border-top: 1px solid var(--blue-line); padding: 20px 0; }
.qa h3 { margin-bottom: 6px; }
.qa p { margin: 0; color: var(--ink-soft); }

/* ── Voet ──────────────────────────────────────────────────────────────────── */

footer { background: var(--blue-dark); color: rgba(255, 255, 255, .74); padding: 42px 0 30px; font-size: 15px; }
footer a { color: #fff; }
footer .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 26px; }
footer h4 { color: #fff; font-size: 14px; margin: 0 0 10px; letter-spacing: .04em; text-transform: uppercase; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 6px; }
footer .rule { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 18px; font-size: 13px; }

/* ── Het menu ──────────────────────────────────────────────────────────────── */
/* Uitklappen met <details>: werkt zonder script, met toetsenbord en op een telefoon. site.js
   doet alleen het dichtklappen van de andere en van een menu waar je naast klikt. */

.menu { position: relative; }

.menu summary {
    list-style: none;
    cursor: pointer;
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 15px;
    opacity: .9;
    user-select: none;
}

.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "▾"; font-size: 11px; margin-left: 6px; opacity: .75; }
.menu summary:hover, .menu[open] summary { background: rgba(255, 255, 255, .14); opacity: 1; }
.menu summary.on { background: rgba(255, 255, 255, .2); opacity: 1; font-weight: 600; }

.menu-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 290px;
    background: var(--paper);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: 8px;
    z-index: 30;
}

.bar nav .menu-list a {
    display: block;
    color: var(--ink);
    border-radius: 8px;
    padding: 9px 12px;
    opacity: 1;
    font-weight: 600;
}

.bar nav .menu-list a small {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 1px;
}

.bar nav .menu-list a:hover { background: var(--blue-soft); color: var(--blue-dark); }
.bar nav .menu-list a.on { background: var(--blue-soft); color: var(--blue-deep); }

/* Op een smal scherm past het menu niet naast het logo. Dan een eigen regel eronder, als rij
   die je opzij schuift, en klapt een kop uit over de volle breedte van het scherm. */
@media (max-width: 900px) {
    .bar .wrap { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; row-gap: 4px; }
    .bar nav { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .bar nav::-webkit-scrollbar { display: none; }
    .bar nav > * { flex: none; }
    .menu-list {
        position: fixed; left: 12px; right: 12px; top: 112px; min-width: 0;
        max-height: calc(100vh - 130px); overflow-y: auto;
    }
}

/* ── De kaarten per onderdeel ──────────────────────────────────────────────── */

.group-head { margin: 34px 0 14px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

/* Een uitsnede en geen verkleining: het hele scherm op 260 pixels breed is een grijze vlek, de
   linkerbovenhoek laat de kop en het begin van het werk zien. */
.tiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.tile {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: box-shadow .15s, transform .15s;
}

.tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); color: var(--ink); }
.tile-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--blue-line); background: var(--blue-soft); }
.tile-shot img { width: 185%; max-width: none; }
.tile-words { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.tile-words b { font-size: 16px; }
.tile-words span { font-size: 14px; color: var(--ink-soft); }
/* ── De pagina van een onderdeel ───────────────────────────────────────────── */

.topic-head {
    background: linear-gradient(168deg, var(--blue-dark) 0%, var(--blue-deep) 48%, var(--blue) 100%);
    color: #fff;
    padding: 46px 0 0;
    overflow: hidden;
}

.topic-head h1 { color: #fff; max-width: 22ch; }
.topic-head .lead { color: rgba(255, 255, 255, .86); max-width: 62ch; }
.topic-head .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 0; }
.topic-head:not(:has(.hero-shot)) { padding-bottom: 54px; }

.crumbs { font-size: 13px; margin: 0 0 18px; color: rgba(255, 255, 255, .7); display: flex; gap: 8px; }
.crumbs a { color: rgba(255, 255, 255, .85); }
.crumbs a:hover { color: #fff; }

.topic-intro { display: grid; gap: 40px; grid-template-columns: 1.2fr 1fr; align-items: start; }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 0 0 12px 30px; color: var(--ink-soft); }
.ticks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--cyan-deep);
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.topic-text { max-width: 68ch; }

.topic-price { display: grid; gap: 30px; grid-template-columns: 1fr auto; align-items: center; }
.topic-price h2 { margin-bottom: 10px; }
.topic-price .lead { margin-bottom: 6px; }
.topic-price-do { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 860px) {
    .topic-intro, .topic-price { grid-template-columns: 1fr; gap: 22px; }
    .topic-price-do { flex-direction: row; flex-wrap: wrap; }
}