/* =============================================================================
   MDR Detailing - style.css
   Een bestand: design tokens, layout en componenten. Geen build, geen framework.
   Volgorde: tokens -> reset -> utilities -> componenten -> motion -> print.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design tokens
   Contrastverhoudingen in de commentaar zijn berekend, niet geschat.
   -------------------------------------------------------------------------- */
:root {
    /* --- Oppervlakken ----------------------------------------------------- */
    --surface-0: hsl(0 0% 4%);              /* pagina                         */
    --surface-1: hsl(0 0% 8%);              /* kaarten                        */
    --surface-2: hsl(0 0% 12%);             /* uitgelichte kaart              */
    --border-subtle: hsl(0 0% 100% / 0.10); /* decoratief, geen UI-contrast   */
    --border-strong: hsl(0 0% 45%);         /* 3.89:1 op --surface-1          */

    /* --- Tekst ------------------------------------------------------------ */
    --text-primary: hsl(0 0% 98%);          /* 18.97:1 op --surface-0         */
    --text-secondary: hsl(0 0% 72%);        /*  9.98:1 op --surface-0         */
    --text-muted: hsl(0 0% 58%);            /*  6.53:1 - enkel fine print     */
    --text-on-red: hsl(0 0% 100%);

    /* --- Detail-rood: vijf tinten, elk met precies een taak ---------------- */
    --red-400: hsl(0 88% 66%);   /* rode tekst OP een kaart. 5.14:1 op --surface-2 */
    --red-500: hsl(0 84% 55%);   /* accenten OP zwart. 4.71:1 op --surface-0  */
    --red-600: hsl(0 78% 46%);   /* knopvulling. wit erop = 5.4:1             */
    --red-hover: hsl(0 80% 50%); /* knop-hover. wit erop = 4.6:1              */
    --red-700: hsl(0 74% 38%);   /* rood op LICHT (print). 7.39:1 op wit      */
    --red-950: hsl(0 60% 12%);   /* grote decoratieve washes                  */
    --red-tint: hsl(0 84% 55% / 0.12);
    --grad-red: linear-gradient(135deg, var(--red-500), hsl(0 72% 42%));
    --grad-hero: radial-gradient(120% 85% at 50% 0%, var(--red-950) 0%, var(--surface-0) 58%);

    /* --- Focus ------------------------------------------------------------ */
    --focus-ring: var(--red-500);

    /* --- Typografie ------------------------------------------------------- */
    --font-display: "Outfit", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;

    --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
    --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
    --step-1:  clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
    --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
    --step-3:  clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);
    --step-4:  clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
    --measure: 62ch;

    /* --- Ruimte en layout ------------------------------------------------- */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --section-pad: clamp(3.5rem, 8vw, 7rem);
    --content-max: 75rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-h: 4rem;

    /* --- Vorm en diepte --------------------------------------------------- */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px hsl(0 0% 0% / 0.6), 0 12px 32px hsl(0 0% 0% / 0.45);
    --shadow-red: 0 0 0 1px hsl(0 84% 55% / 0.35), 0 10px 30px hsl(0 84% 55% / 0.18);

    /* --- Beweging --------------------------------------------------------- */
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 420ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* -----------------------------------------------------------------------------
   2. Reset en basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-md));
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100svh;
    background-color: var(--surface-0);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; }

p { text-wrap: pretty; }

ul, ol { list-style: none; padding: 0; }

a {
    color: inherit;
    text-decoration-color: hsl(0 84% 55% / 0.5);
    text-underline-offset: 0.2em;
}

img, svg { display: block; max-width: 100%; }

/* Focus: nergens een browser-default, nergens outline:none zonder vervanger. */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Aangepaste selectie en scrollbar, zodat niets naar de browser-default valt. */
::selection { background: var(--red-600); color: var(--text-on-red); }

html { scrollbar-color: var(--border-strong) var(--surface-0); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid var(--surface-0);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--red-600); }

/* -----------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Fixed, niet absolute: met absolute hangt de link aan het document en staat
   hij buiten beeld zodra de bezoeker gescrold heeft of via een anker binnenkomt. */
.skip-link {
    position: fixed;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 100;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--red-600);
    color: var(--text-on-red);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.container {
    width: min(100% - (var(--gutter) * 2), var(--content-max));
    margin-inline: auto;
}

.section { padding-block: var(--section-pad); }

.section__intro {
    max-width: var(--measure);
    margin-block-end: var(--space-xl);
}

.section__eyebrow {
    display: inline-block;
    margin-block-end: var(--space-sm);
    color: var(--red-500);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section__lead {
    margin-block-start: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--step-1);
}

/* De SVG-sprite met alle iconen. Staat bovenaan de body en mag niets innemen.
   Hier en niet als style-attribuut, want de CSP staat geen inline stijl toe. */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* De drie rode slashes uit het logo, als terugkerend motief. Decoratief. */
.slashes {
    display: flex;
    gap: 5px;
    width: max-content;
}
.slashes span {
    display: block;
    width: 16px;
    height: 4px;
    background: var(--red-500);
    transform: skewX(-24deg);
}
.slashes span:nth-child(2) { width: 24px; opacity: 0.75; }
.slashes span:nth-child(3) { width: 32px; opacity: 0.5; }

/* -----------------------------------------------------------------------------
   4. Knoppen
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

/* Hover licht bewust niet verder op: --red-500 met witte tekst haalt 4.2:1 en
   zakt door AA. De lift komt van transform en schaduw, niet van luminantie. */
.btn--primary {
    background-color: var(--red-600);
    color: var(--text-on-red);
}
.btn--primary:hover {
    background-color: var(--red-hover);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
}

.btn--ghost {
    border-color: var(--border-strong);
    background-color: transparent;
    color: var(--text-primary);
}
.btn--ghost:hover {
    border-color: var(--red-500);
    background-color: var(--red-tint);
    transform: translateY(-2px);
}

.btn:active { transform: translateY(0); }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* -----------------------------------------------------------------------------
   5. Header
   Geen mobiel menu: drie korte labels en een mark passen binnen 343px.
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border-subtle);
    background-color: hsl(0 0% 4% / 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    text-decoration: none;
}
.brand svg { width: 34px; height: 34px; flex-shrink: 0; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.brand__name b { color: var(--red-500); font-weight: 700; }

.site-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2.5vw, 1.75rem);
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-secondary);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--text-primary); }

.site-header .btn { padding-inline: var(--space-md); }

/* Twee aparte drempels, want de nav en de wordmark hebben niet dezelfde
   ruimte nodig. De nav valt als eerste weg; de wordmark haalt ruim 375px. */
@media (max-width: 39.99rem) {
    .site-nav { display: none; }
}
@media (max-width: 22rem) {
    .brand__name { display: none; }
}

/* -----------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(3rem, 9vw, 6rem) var(--section-pad);
    background-image: var(--grad-hero);
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-500), transparent);
    opacity: 0.4;
}

.hero__inner { max-width: 54rem; }

.hero__logo {
    width: clamp(6rem, 17vw, 8.5rem);
    height: auto;
    margin-block-end: var(--space-lg);
}

.hero h1 { margin-block-end: var(--space-md); }
/* Span, geen <em>: de kleur is vormgeving, geen klemtoon. <em> zou een
   schermlezer laten beklemtonen wat enkel rood hoort te zijn. */
.hero__region {
    display: block;
    color: var(--red-500);
}

.hero__tagline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Op smalle schermen moet de tagline op een regel blijven: een tweede regel
   die met een streepjesgroep begint, leest als een fout. */
@media (max-width: 29.99rem) {
    .hero__tagline {
        gap: var(--space-xs);
        font-size: 0.8125rem;
        letter-spacing: 0.14em;
    }
    .hero__tagline .slashes span { width: 10px; }
    .hero__tagline .slashes span:nth-child(2) { width: 14px; }
    .hero__tagline .slashes span:nth-child(3) { width: 18px; }
}

.hero__lead {
    max-width: var(--measure);
    margin-block-end: var(--space-xl);
    color: var(--text-secondary);
    font-size: var(--step-1);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-xl);
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.badges li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background-color: var(--surface-1);
    color: var(--text-secondary);
    font-size: var(--step--1);
}
.badges svg { width: 18px; height: 18px; color: var(--red-500); flex-shrink: 0; }

/* -----------------------------------------------------------------------------
   7. Tarieven
   Een gridregel dekt elke breakpoint: 375px -> 1 kolom, ~600px -> 2, ~1024px -> 3.
   -------------------------------------------------------------------------- */
.tier-group + .tier-group { margin-block-start: var(--space-2xl); }

.tier-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tier-group__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.tier-group__note {
    max-width: var(--measure);
    margin-block: calc(var(--space-lg) * -1 + var(--space-2xs)) var(--space-lg);
    color: var(--text-secondary);
    font-size: var(--step--1);
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-md);
}
.tier-grid--premium { max-width: 46rem; }

.tier {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-1);
    box-shadow: var(--shadow-card);
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.tier:hover {
    border-color: hsl(0 84% 55% / 0.4);
    transform: translateY(-4px);
}

.tier--featured {
    border-color: var(--red-500);
    background-color: var(--surface-2);
    box-shadow: var(--shadow-red);
}

.tier--ultimate::before {
    content: "";
    position: absolute;
    inset-inline: -1px;
    top: -1px;
    height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-image: var(--grad-red);
}

.tier__badge {
    align-self: flex-start;
    margin-block-end: var(--space-sm);
    padding: 0.125rem var(--space-sm);
    border-radius: var(--radius-pill);
    background-color: var(--red-tint);
    color: var(--red-400);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tier__icon {
    width: 40px;
    height: 40px;
    margin-block-end: var(--space-md);
    color: var(--red-500);
}

.tier__name { margin-block-end: var(--space-2xs); }

.tier__variant {
    display: block;
    margin-block-end: var(--space-md);
    color: var(--text-muted);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tier__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding-block-end: var(--space-md);
    margin-block-end: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1;
}
.tier__from {
    color: var(--text-muted);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tier__features {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
    color: var(--text-secondary);
    font-size: var(--step--1);
}
.tier__features li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--space-xs);
    align-items: start;
}
.tier__features svg {
    width: 16px;
    height: 16px;
    margin-block-start: 0.28em;
    color: var(--red-500);
    flex-shrink: 0;
}

.tier .btn { margin-block-start: auto; width: 100%; }

.extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-md);
    margin-block-start: var(--space-2xl);
}
.extras > div {
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
    border-left: 3px solid var(--red-500);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background-color: var(--surface-1);
}
.extras dt {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.extras dd {
    margin: var(--space-2xs) 0 0;
    color: var(--text-secondary);
}

.price-note {
    margin-block-start: var(--space-lg);
    color: var(--text-muted);
    font-size: var(--step--1);
}

/* -----------------------------------------------------------------------------
   8. Waarom
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-md);
}

.card {
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-1);
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.card:hover {
    border-color: hsl(0 84% 55% / 0.4);
    transform: translateY(-4px);
}
.card svg {
    width: 32px;
    height: 32px;
    margin-block-end: var(--space-md);
    color: var(--red-500);
}
.card h3 { font-size: var(--step-1); margin-block-end: var(--space-xs); }
.card p { color: var(--text-secondary); font-size: var(--step--1); }

/* -----------------------------------------------------------------------------
   9. Werkwijze
   -------------------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-lg);
    counter-reset: step;
}
.steps li {
    counter-increment: step;
    padding-block-start: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
}
.steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-block-end: var(--space-xs);
    color: var(--red-500);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 1;
}
.steps h3 { font-size: var(--step-1); margin-block-end: var(--space-2xs); }
.steps p { color: var(--text-secondary); font-size: var(--step--1); }

/* -----------------------------------------------------------------------------
   10. Contact - het enige conversiepunt van de site
   -------------------------------------------------------------------------- */
.contact {
    border-block: 1px solid var(--border-subtle);
    background-image: radial-gradient(90% 120% at 50% 100%, var(--red-950) 0%, var(--surface-0) 62%);
}

.channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-md);
}

/* Een enkel kanaal hoort geen derde van de breedte te vullen met twee lege
   kolommen ernaast. Geen raster dus, maar een kaart op leesbreedte. */
.channels--single { display: block; }
.channel--wide { max-width: 34rem; }
.channel--wide .channel__value { font-size: var(--step-2); }
.channel--wide .channel__hint { max-width: 44ch; margin-block-start: var(--space-xs); }

.channel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-height: 44px;
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--surface-1);
    text-decoration: none;
    transition: border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.channel:hover {
    border-color: var(--red-500);
    background-color: var(--surface-2);
    box-shadow: var(--shadow-red);
    transform: translateY(-4px);
}
.channel svg {
    width: 28px;
    height: 28px;
    margin-block-end: var(--space-sm);
    color: var(--red-500);
    transition: transform var(--dur-base) var(--ease-out);
}
.channel:hover svg { transform: scale(1.12); }

.channel__label {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.channel__value {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.channel__hint { color: var(--text-secondary); font-size: var(--step--1); }

/* -----------------------------------------------------------------------------
   10b. Cookiebanner
   Een balk onderaan, geen modale muur: de bezoeker mag de site lezen zonder
   eerst te kiezen. Er laadt toch niets tot hij aanvaardt, dus blokkeren voegt
   niets toe behalve ergernis. Weigeren en aanvaarden staan naast elkaar en
   krijgen dezelfde maat - een banner waarin weigeren moeilijker is, levert
   geen geldige toestemming op.
   -------------------------------------------------------------------------- */
.cookiebanner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    border-top: 1px solid var(--border-strong);
    background-color: hsl(0 0% 6% / 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -12px 40px hsl(0 0% 0% / 0.6);
}
.cookiebanner[hidden] { display: none; }

.cookiebanner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    width: min(100% - (var(--gutter) * 2), var(--content-max));
    margin-inline: auto;
    padding-block: var(--space-md);
}

.cookiebanner__title {
    margin-block-end: var(--space-2xs);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: 0;
}

.cookiebanner__text {
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: var(--step--1);
}
.cookiebanner__text a { color: var(--text-primary); }

.cookiebanner__inner > :first-child { flex: 1 1 24rem; }

.cookiebanner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    flex: 0 1 auto;
}
/* Gelijke breedte, zodat geen van beide knoppen de makkelijkere keuze lijkt. */
.cookiebanner__actions .btn { flex: 1 1 auto; min-width: 9.5rem; }

/* -----------------------------------------------------------------------------
   10c. Losse tekstpagina (privacy)
   -------------------------------------------------------------------------- */
.prose h1 { margin-block: var(--space-sm) var(--space-md); }
.prose h2 {
    margin-block: var(--space-xl) var(--space-sm);
    font-size: var(--step-2);
}
.prose p,
.prose table { max-width: var(--measure); }
.prose p { margin-block-end: var(--space-md); color: var(--text-secondary); }
.prose a { color: var(--text-primary); }
.prose a:hover { color: var(--red-500); }
.prose code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.9em;
}
.prose table {
    width: 100%;
    margin-block-end: var(--space-md);
    border-collapse: collapse;
    text-align: left;
}
.prose th,
.prose td {
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}
.prose th {
    width: 9rem;
    color: var(--text-primary);
    font-weight: 600;
}
.prose td { color: var(--text-secondary); }

@media (max-width: 34rem) {
    .prose th, .prose td { display: block; padding-inline: 0; }
    .prose th { width: auto; border-bottom: 0; padding-block-end: 0; }
}

/* -----------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    padding-block: var(--space-2xl) var(--space-xl);
    color: var(--text-secondary);
    font-size: var(--step--1);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-xl);
    padding-block-end: var(--space-xl);
    border-bottom: 1px solid var(--border-subtle);
}

.site-footer h2 {
    margin-block-end: var(--space-sm);
    color: var(--text-primary);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer li + li { margin-block-start: var(--space-2xs); }

.site-footer a {
    display: inline-block;
    padding-block: 0.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--red-500); text-decoration: underline; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block-start: var(--space-lg);
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   12. 404
   -------------------------------------------------------------------------- */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 100svh;
    padding: var(--gutter);
    text-align: center;
    background-image: var(--grad-hero);
}
.error-page__code {
    color: var(--red-500);
    font-family: var(--font-display);
    font-size: clamp(4rem, 18vw, 9rem);
    font-weight: 700;
    line-height: 1;
}
.error-page p { max-width: 38ch; color: var(--text-secondary); }

/* -----------------------------------------------------------------------------
   13. Beweging - reveal bij scroll, opgezet door site.js
   Zonder JS blijft alles gewoon zichtbaar: de klasse komt er dan nooit op.
   -------------------------------------------------------------------------- */
/* .is-armed wordt door site.js gezet, niet hier: stond de verborgen staat in de
   CSS, dan bleef de halve pagina onzichtbaar zodra dat bestand niet laadt. */
.js-reveal.is-armed {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}
.js-reveal.is-armed.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
    html { scroll-behavior: auto; }
    .js-reveal.is-armed { opacity: 1; transform: none; }
    .btn:hover,
    .card:hover,
    .tier:hover,
    .channel:hover { transform: none; }
    .channel:hover svg { transform: none; }
}

@media (prefers-contrast: more) {
    :root {
        --border-subtle: var(--border-strong);
        --text-secondary: hsl(0 0% 88%);
    }
}

/* -----------------------------------------------------------------------------
   14. Print - de klant stuurt de tarieven als PDF door
   Rood schakelt naar --red-700 (7.4:1 op wit) via een scoped override, zodat
   componenten geen variant-klassen nodig hebben.
   -------------------------------------------------------------------------- */
@media print {
    :root {
        --surface-0: #fff;
        --surface-1: #fff;
        --surface-2: #fff;
        --text-primary: #000;
        --text-secondary: #333;
        --text-muted: #555;
        --red-500: hsl(0 74% 38%);
        --border-subtle: #bbb;
        --shadow-card: none;
        --shadow-red: none;
        --grad-hero: none;
    }
    body { background: #fff; color: #000; font-size: 11pt; }
    .site-header,
    .hero__actions,
    .skip-link,
    .slashes,
    .tier .btn { display: none; }
    .js-reveal.is-armed { opacity: 1; transform: none; }
    .hero, .contact { background-image: none; }
    .tier-grid, .card-grid, .steps, .extras { grid-template-columns: 1fr; }
    .tier, .card, .extras > div, .channel { border: 1px solid #bbb; break-inside: avoid; }
    .section { padding-block: 1rem; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}