/* ConnectSure bundle.css — auto-generated 2026-08-29T23:43:24Z, do not edit */

:root {
    /* === BRAND COLORS — "Connected Confidence" === */
    /* Multi-color identity inspired by Vast4G: vibrant, modern, trustworthy */

    /* Primary Blue — trust, technology, reliability */
    --color-blue-950: #0a1628;
    --color-blue-900: #0f1d36;
    --color-blue-800: #172e54;
    --color-blue-700: #1e40af;
    --color-blue-600: #2563eb;
    --color-blue-500: #3b82f6;
    --color-blue-400: #60a5fa;
    --color-blue-300: #93c5fd;
    --color-blue-200: #bfdbfe;
    --color-blue-100: #dbeafe;
    --color-blue-50: #eff6ff;

    /* Purple — innovation, premium, modern */
    --color-purple-900: #2e1065;
    --color-purple-800: #3b0764;
    --color-purple-700: #6d28d9;
    --color-purple-600: #7c3aed;
    --color-purple-500: #8b5cf6;
    --color-purple-400: #a78bfa;
    --color-purple-300: #c4b5fd;
    --color-purple-200: #ddd6fe;
    --color-purple-100: #ede9fe;

    /* Teal/Cyan — connectivity, speed, freshness */
    --color-teal-700: #0e7490;
    --color-teal-600: #0891b2;
    --color-teal-500: #06b6d4;
    --color-teal-400: #22d3ee;
    --color-teal-300: #67e8f9;
    --color-teal-200: #a5f3fc;
    --color-teal-100: #ecfeff;

    /* Green — uptime, success, reliability */
    --color-green-700: #047857;
    --color-green-600: #059669;
    --color-green-500: #10b981;
    --color-green-400: #34d399;
    --color-green-300: #6ee7b7;

    /* Orange — energy, attention, warmth */
    --color-orange-600: #ea580c;
    --color-orange-500: #f97316;
    --color-orange-400: #fb923c;

    /* Neutrals — warm-tinted for friendliness */
    --color-neutral-950: #09090b;
    --color-neutral-900: #18181b;
    --color-neutral-800: #27272a;
    --color-neutral-700: #3f3f46;
    --color-neutral-600: #52525b;
    --color-neutral-500: #71717a;
    --color-neutral-400: #a1a1aa;
    --color-neutral-300: #d4d4d8;
    --color-neutral-200: #e4e4e7;
    --color-neutral-100: #f4f4f5;
    --color-neutral-50: #fafafa;
    --color-white: #ffffff;

    /* === SEMANTIC ALIASES === */
    --color-primary: var(--color-blue-600);
    --color-primary-dark: var(--color-blue-700);
    --color-primary-light: var(--color-blue-400);
    --color-accent: var(--color-purple-600);
    --color-accent-light: var(--color-purple-400);
    --color-highlight: var(--color-teal-500);
    --color-success: var(--color-green-500);
    --color-warning: var(--color-orange-500);
    --color-text-muted: var(--color-neutral-500);
    --color-text-subtle: var(--color-neutral-400);
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;

    /* === GRADIENTS === */
    /* Hero: blue-to-purple sweep — signature look */
    --gradient-hero: linear-gradient(135deg, var(--color-blue-900) 0%, var(--color-blue-800) 30%, var(--color-purple-900) 70%, #1a0a3e 100%);
    --gradient-hero-vivid: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 50%, #0e7490 100%);

    /* Dark sections */
    --gradient-dark: linear-gradient(180deg, #0f172a 0%, #0c1222 100%);
    --gradient-dark-purple: linear-gradient(180deg, #131028 0%, #0f172a 100%);

    /* CTAs: vibrant blue-to-purple */
    --gradient-cta: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-purple-600) 100%);
    --gradient-cta-hover: linear-gradient(135deg, var(--color-blue-500) 0%, var(--color-purple-500) 100%);
    --gradient-cta-teal: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-teal-500) 100%);

    /* Accent lines */
    --gradient-fiber: linear-gradient(90deg, transparent, var(--color-teal-400), var(--color-purple-400), var(--color-blue-400), transparent);
    --gradient-rainbow-line: linear-gradient(90deg, var(--color-blue-500), var(--color-purple-500), var(--color-teal-400), var(--color-green-400));

    /* Glass effects */
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    --gradient-glass-hover: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 100%);
    --gradient-glass-light: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);

    /* Section backgrounds */
    --gradient-light-section: linear-gradient(180deg, #f5f3ff 0%, var(--color-white) 100%);
    --gradient-light-blue: linear-gradient(180deg, #eff6ff 0%, var(--color-white) 100%);
    --gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
                     radial-gradient(ellipse at 80% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
                     radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.06) 0%, transparent 50%);

    /* === SHADOWS === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.1);
    --shadow-glow-blue: 0 0 24px rgba(37, 99, 235, 0.25), 0 0 48px rgba(37, 99, 235, 0.1);
    --shadow-glow-purple: 0 0 24px rgba(124, 58, 237, 0.25), 0 0 48px rgba(124, 58, 237, 0.1);
    --shadow-glow-teal: 0 0 24px rgba(6, 182, 212, 0.25), 0 0 48px rgba(6, 182, 212, 0.1);
    --shadow-btn-primary: 0 2px 8px rgba(37, 99, 235, 0.3), 0 8px 24px rgba(124, 58, 237, 0.15);
    --shadow-btn-primary-hover: 0 4px 12px rgba(37, 99, 235, 0.4), 0 12px 32px rgba(124, 58, 237, 0.2);
    --shadow-inner-glow: inset 0 1px 0 rgba(255,255,255,0.06);
    --shadow-colored-card: 0 4px 20px rgba(124, 58, 237, 0.1), 0 1px 3px rgba(0,0,0,0.06);

    /* === BORDER RADIUS === */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-3xl: 36px;
    --radius-full: 9999px;

    /* === SPACING (4px base) === */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* === TYPOGRAPHY === */
    --font-display: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.9375rem; /* 15px */
    --text-md: 1rem;        /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
    --text-4xl: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
    --text-5xl: clamp(2rem, 4vw + 0.5rem, 3rem);
    --text-hero: clamp(2rem, 5vw + 1rem, 4.25rem);

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    --leading-none: 1;
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tighter: -0.04em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* === LAYOUT === */
    --container-max: 1200px;
    --container-wide: 1440px;
    --container-narrow: 680px;
    --header-height: 72px;
    --section-gap: clamp(40px, 6vw, 72px);   /* was 48-96px; pagina's werden 9000px hoog */

    /* === TRANSITIONS === */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;

    /* === Z-INDEX === */
    --z-base: 1;
    --z-above: 10;
    --z-header: 90;
    --z-overlay: 100;
    --z-modal: 1000;

    /* === WAVE 2 — BRANCHE ACCENTS === */
    --accent-zorg: var(--color-teal-500);
    --accent-horeca: var(--color-orange-500);
    --accent-juridisch: var(--color-purple-500);
    --accent-logistiek: var(--color-blue-600);
    --accent-productie: var(--color-orange-600);
    --accent-bouw: var(--color-neutral-600);

    --accent-zorg-bg: rgba(6, 182, 212, 0.18);
    --accent-horeca-bg: rgba(249, 115, 22, 0.18);
    --accent-juridisch-bg: rgba(139, 92, 246, 0.18);
    --accent-logistiek-bg: rgba(37, 99, 235, 0.18);
    --accent-productie-bg: rgba(234, 88, 12, 0.18);
    --accent-bouw-bg: rgba(82, 82, 91, 0.18);

    /* === WAVE 2 — CARD ACCENTS === */
    --card-accent-decision: var(--color-blue-500);
    --card-accent-coordination: var(--color-purple-500);
    --card-accent-capacity: var(--color-teal-500);

    /* === WAVE 2 — PATTERN OPACITIES === */
    --pattern-opacity-subtle: 0.04;
    --pattern-opacity-prominent: 0.08;

    /* === WAVE 2 — GLASS ON DARK === */
    --glass-bg-dark: rgba(255, 255, 255, 0.06);
    --glass-border-dark: rgba(255, 255, 255, 0.12);
    --glass-text-dark: var(--color-neutral-200);
    --glass-blur: blur(8px);
}

/* ============================================================
   BASE — Reset, Typography, Primitives
   ConnectSure "Connected Confidence"
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Skip-to-main link voor screen readers + keyboard users (WCAG) */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--color-blue-700);
    color: var(--color-white);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
    transition: top 200ms ease;
}
.skip-to-main:focus {
    top: 0;
    outline: 2px solid var(--color-purple-300);
    outline-offset: 2px;
}

/* main landmark — geen focus-outline want tabindex=-1 is alleen target voor skip-link */
main:focus { outline: none; }
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-neutral-700);
    background: var(--color-white);
    overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

a {
    color: var(--color-blue-600);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}
a:hover { color: var(--color-purple-600); }
a:focus-visible {
    outline: 2px solid var(--color-purple-400);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Universal focus-visible fallback voor alle interactieve elementen (WCAG 2.1 AA) */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-purple-400);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.25);
}

/* Hoge contrast variant op donkere achtergronden */
.section--dark button:focus-visible,
.hero button:focus-visible,
.hero input:focus-visible,
.page-hero button:focus-visible,
.pc-search-bar__group input:focus-visible,
.pc-lead__field input:focus-visible {
    outline: 2px solid var(--color-purple-200);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

::selection {
    background: rgba(124, 58, 237, 0.15);
    color: var(--color-blue-900);
}

/* --- Container --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-neutral-900);
    letter-spacing: var(--tracking-tight);
}
h1 {
    font-size: var(--text-hero);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-none);
}
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-500);
    font-weight: var(--weight-regular);
}

.text-muted { color: var(--color-neutral-400); }
.text-accent { color: var(--color-purple-500); }
.text-white { color: var(--color-white); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 13px var(--space-8);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--tracking-wide);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out-quart);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    isolation: isolate;
}
.btn:focus-visible {
    outline: 2px solid var(--color-purple-400);
    outline-offset: 3px;
}

.btn--primary {
    background: var(--gradient-cta);
    color: var(--color-white);
    box-shadow: var(--shadow-btn-primary);
}
.btn--primary:hover {
    background: var(--gradient-cta-hover);
    box-shadow: var(--shadow-btn-primary-hover);
    transform: translateY(-1px);
    color: var(--color-white);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
    background: transparent;
    color: var(--color-neutral-200);
    border: 1px solid rgba(255,255,255,0.2);
}
.btn--ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.35);
    color: var(--color-white);
}

.btn--secondary {
    background: rgba(255,255,255,0.06);
    color: var(--color-neutral-200);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
}
.btn--secondary:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    color: var(--color-white);
}

.btn--outline {
    background: transparent;
    color: var(--color-blue-600);
    border: 1.5px solid var(--color-blue-500);
}
.btn--outline:hover {
    background: var(--color-blue-600);
    color: var(--color-white);
    box-shadow: var(--shadow-glow-blue);
}

.btn--white {
    background: var(--color-white);
    color: var(--color-blue-700);
    box-shadow: var(--shadow-md);
}
.btn--white:hover {
    background: var(--color-neutral-50);
    color: var(--color-purple-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn--lg {
    padding: 16px var(--space-10);
    font-size: var(--text-base);
    border-radius: var(--radius-xl);
}
.btn--sm {
    padding: 8px var(--space-5);
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
}
.btn--full { width: 100%; }

/* --- Sections --- */
.section { padding-block: var(--section-gap); }

.section--dark {
    background: var(--gradient-dark);
    color: var(--color-neutral-300);
    position: relative;
    overflow: hidden;
}
.section--dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.2), rgba(124, 58, 237, 0.2), transparent);
}
.section--dark::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
    pointer-events: none;
}
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-white); }
.section--dark .lead { color: var(--color-neutral-400); }

.section--light {
    background: var(--gradient-light-section);
    position: relative;
}
.section--light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-neutral-200), transparent);
}
.section--mesh {
    background: var(--gradient-mesh), var(--color-white);
    position: relative;
}

.section__header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
}
.section__header h2 { margin-bottom: var(--space-4); }
.section__header--cta { margin-top: var(--space-8); margin-bottom: 0; }

.section__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-blue-700);
    margin-bottom: var(--space-5);
    padding: 6px 14px;
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-100);
    border-radius: var(--radius-full);
}
.section__label--purple {
    color: var(--color-purple-700);
    background: var(--color-purple-100);
    border-color: var(--color-purple-200);
}

.section--dark .section__label {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(147, 197, 253, 0.35);
    color: var(--color-blue-100);
}

/* --- Cards --- */
.card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-card);
    transition: all var(--duration-base) var(--ease-out-quart);
    border: 1px solid var(--color-neutral-100);
    position: relative;
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
    border-color: var(--color-neutral-200);
}

/* --- Grid --- */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Badge --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-full);
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple-600);
    border: 1px solid rgba(124, 58, 237, 0.12);
}

/* --- Rainbow Line (animated multi-color divider) --- */
.fiber-line,
.footer__rainbow-line {
    height: 2px;
    background: var(--gradient-rainbow-line);
    background-size: 300% 100%;
    animation: rainbowPulse 6s ease-in-out infinite;
    border-radius: var(--radius-full);
}
@keyframes rainbowPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Utility --- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Scroll reveal --- */
/* Content is visible by default (SEO-safe).
   JS adds .js-reveal-ready to <html>, which enables the hidden state.
   Without JS, everything stays visible. */
.js-reveal-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slower) var(--ease-out-expo),
                transform var(--duration-slower) var(--ease-out-expo);
}
.js-reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
    html { scroll-behavior: auto; }
}

/* --- Forced colors (high contrast mode) --- */
@media (forced-colors: active) {
    .text-gradient,
    [style*="background-clip"],
    [style*="-webkit-background-clip"] {
        background: none !important;
        -webkit-text-fill-color: currentColor !important;
        forced-color-adjust: none;
    }
}

/* ============================================================
   COMPONENTS — ConnectSure "Connected Confidence"
   Multi-color design system: blue + purple + teal + green
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    padding: var(--space-4) 0;
    transition: all var(--duration-base) var(--ease-out-quart);
}
.site-header.scrolled {
    background: rgba(9, 9, 11, 0.85);
    backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: var(--space-3) 0;
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* Brand mark with colored dots */
.header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}
.header__brand-mark {
    display: flex;
    gap: 3px;
    padding: 4px;
}
.header__brand-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}
.header__brand-dot--blue { background: var(--color-blue-500); }
.header__brand-dot--purple { background: var(--color-purple-500); }
.header__brand-dot--teal { background: var(--color-teal-500); }

.header__brand-text {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--color-white);
    letter-spacing: var(--tracking-tight);
}
.header__brand-text strong {
    font-weight: var(--weight-extrabold);
}
.header__logo { text-decoration: none; }

/* Nav */
.header__nav { flex: 1; display: flex; justify-content: center; }
.nav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    list-style: none;
}
.nav-list li a {
    display: block;
    padding: 8px 10px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-300);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) ease;
    text-decoration: none;
    white-space: nowrap;
}
.nav-list li a:hover,
.nav-list li.current-menu-item a {
    color: var(--color-white);
    background: rgba(255,255,255,0.08);
}

/* Dropdown menus (desktop) */
.nav-list .has-dropdown {
    position: relative;
}
.nav-list .has-dropdown > a::after {
    content: '\203A';
    display: inline-block;
    margin-left: 4px;
    font-size: 0.85em;
    transform: rotate(90deg);
    opacity: 0.5;
    transition: opacity var(--duration-fast) ease;
}
.nav-list .has-dropdown:hover > a::after {
    opacity: 1;
}
.nav-list .sub-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    padding: var(--space-2);
    background: rgba(15, 29, 54, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    list-style: none;
    z-index: 999;
}
.nav-list .has-dropdown:hover > .sub-menu,
.nav-list .has-dropdown:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-list .sub-menu li a {
    padding: 10px 14px;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    white-space: normal;
}
.nav-list .sub-menu li a:hover {
    background: rgba(37, 99, 235, 0.18);
    color: var(--color-white);
}

/* Header actions */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.header__phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-300);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}
.header__phone:hover { color: var(--color-white); }

.header__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: #25d366;
    color: var(--color-white);
    font-size: 18px;
    transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.header__whatsapp:hover {
    background: #1da851;
    transform: scale(1.08);
}

.btn--header {
    padding: 10px var(--space-6);
    font-size: var(--text-xs);
}

/* Hamburger */
.header__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}
.header__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: all var(--duration-base) var(--ease-out-quart);
}

/* Tablet — collapse nav to hamburger earlier */
@media (max-width: 1100px) {
    .header__toggle { display: flex; }
    .header__phone span { display: none; }

    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(9, 9, 11, 0.97);
        backdrop-filter: blur(24px);
        flex-direction: column;
        /* Met 21 items past het menu niet op een telefoonscherm. Bij
           justify-content:center verdwijnen de bovenste items buiten beeld
           zonder dat je erbij kunt; daarom bovenaan uitlijnen en laten scrollen. */
        justify-content: flex-start;
        align-items: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--duration-slow) var(--ease-out-expo),
                    visibility var(--duration-slow) var(--ease-out-expo);
        z-index: 99;
        /* Het submenu zet zelf visibility:visible en overschrijft daarmee de
           hidden van deze ouder. Zonder pointer-events:none blijven die links
           dus aanklikbaar terwijl het menu dicht is, en vangen ze de tik op de
           hamburgerknop af. */
        pointer-events: none;
    }
    .header__nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    /* De overlay bedekt het hele scherm, dus ook de hamburgerknop zelf. Zonder
       eigen stapelcontext ligt de sluitknop eronder en kun je het menu niet
       meer dicht krijgen. */
    .header__actions {
        position: relative;
        z-index: 100;
    }
    /* Ruimte bovenin zodat de menu-items niet achter de header vallen. */
    .header__nav {
        padding-top: 76px;
        padding-bottom: var(--space-12);
    }
    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        max-width: 480px;
        padding: var(--space-6) var(--space-4);
    }

    .nav-list > li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-list > li:last-child { border-bottom: none; }

    .nav-list > li > a {
        padding: var(--space-4) var(--space-2);
        font-size: var(--text-lg);
        font-weight: var(--weight-semibold);
        color: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: normal;
    }

    /* Arrow indicator for dropdown parents */
    .nav-list .has-dropdown > a::after {
        content: '\203A';
        display: inline-block;
        font-size: 1.2em;
        transform: rotate(90deg);
        opacity: 0.6;
    }

    /* Sub-menu: nested expanded list */
    .nav-list .sub-menu {
        position: static;
        display: flex;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        box-shadow: none;
        border: none;
        padding: 0 0 var(--space-3) var(--space-6);
        margin-top: 0;
        min-width: 0;
        gap: 4px;
    }
    .nav-list .sub-menu li a {
        font-size: var(--text-base);
        padding: var(--space-2) var(--space-4);
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        color: var(--color-neutral-300);
    }
    .nav-list .sub-menu li a:hover {
        color: var(--color-white);
        background: rgba(255,255,255,0.04);
    }

    /* Language switcher in mobile nav */
    .lang-switcher {
        margin-top: var(--space-6);
        justify-content: center;
        width: 100%;
    }

    .header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) {
        opacity: 0;
    }
    .header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}

/* Mobile — smaller text in overlay */
@media (max-width: 768px) {
    .header__whatsapp { width: 32px; height: 32px; font-size: 16px; }
    .btn--header { padding: 8px var(--space-4); }

    /* WCAG: minimum 14px voor mobile body-tekst */
    .footer__bottom-inner p,
    .footer__legal a,
    .footer__contact-items a,
    .footer__tagline,
    .footer__trust-item span,
    .footer__col a {
        font-size: 14px !important;
        line-height: var(--leading-relaxed);
    }

    /* WCAG: minimum 44px tap-target voor footer/header links */
    .footer__legal a,
    .footer__contact-items a,
    .header__phone {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
    }

    /* Mobile CTA bar: zorg dat WhatsApp button leesbaarder is (niet branded-pure-white) */
    .mobile-cta__btn--whatsapp {
        background: #0f7a6d !important;  /* WhatsApp-groen, donker genoeg voor 5,2:1 met witte tekst */
    }
    .mobile-cta__btn--contact {
        color: var(--color-neutral-700) !important;
    }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: var(--gradient-hero);
    overflow: hidden;
    isolation: isolate;
    max-width: 100vw;
    padding-top: calc(var(--header-height) + var(--space-16));
    padding-bottom: var(--space-16);
}

.hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero__gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
}
.hero__gradient-orb--blue {
    width: 600px; height: 600px;
    background: var(--color-blue-600);
    top: -200px; left: -100px;
    animation: orbFloat 20s ease-in-out infinite;
}
.hero__gradient-orb--purple {
    width: 500px; height: 500px;
    background: var(--color-purple-600);
    top: 50%; right: -150px;
    animation: orbFloat 25s ease-in-out infinite reverse;
}
.hero__gradient-orb--teal {
    width: 400px; height: 400px;
    background: var(--color-teal-500);
    bottom: -100px; left: 30%;
    animation: orbFloat 22s ease-in-out infinite 5s;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(30px, -40px); }
    50% { transform: translate(-20px, 30px); }
    75% { transform: translate(40px, 20px); }
}

.hero__grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 16px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-200);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
    letter-spacing: var(--tracking-wide);
}
.hero__badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-green-400);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero__content h1 {
    color: var(--color-white);
    margin-bottom: var(--space-6);
}
.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-neutral-300);
    line-height: var(--leading-relaxed);
    max-width: 520px;
    margin-bottom: var(--space-8);
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================================
   POSTCODE CHECKER v2 — Hero input + Results section
   ============================================================ */

/* --- Hero search bar --- */
.hero__postcode { margin-top: var(--space-6); max-width: 600px; }

.pc-intro {
    font-size: var(--text-sm);
    color: var(--color-neutral-300);
    margin-bottom: var(--space-3);
    font-weight: var(--weight-medium);
}

.pc-search-bar {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-2xl, 20px);
    padding: var(--space-1);
    transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.pc-search-bar:focus-within {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
}
.pc-search-bar__group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
}
.pc-search-bar__group i { color: var(--color-neutral-400); font-size: var(--text-lg); flex-shrink: 0; }
.pc-search-bar__group input {
    background: none; border: none;
    color: var(--color-white); font-family: var(--font-body); font-size: var(--text-base);
    padding: var(--space-2) 0; min-width: 0;
}
.pc-search-bar__group input:focus-visible {
    outline: 2px solid var(--color-primary, #1a365d);
    outline-offset: 2px;
}
.pc-search-bar__group input::placeholder { color: var(--color-neutral-500); }
.pc-search-bar__group--pc { flex: 1.5; }
.pc-search-bar__group--pc input { width: 100%; }
.pc-search-bar__group--nr { flex: 1; gap: var(--space-1); }
.pc-search-bar__group--nr input { width: 50px; }
.pc-search-bar__group--nr input:last-child { max-width: 50px; border-left: 1px solid rgba(255,255,255,0.08); padding-left: var(--space-2); }

.pc-search-bar__divider {
    width: 1px; height: 28px; background: rgba(255,255,255,0.12); flex-shrink: 0;
}

.pc-search-bar__btn {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(135deg, var(--color-blue-500), var(--color-purple-500));
    color: var(--color-white); border: none; border-radius: var(--radius-xl);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold);
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.pc-search-bar__btn:hover { opacity: 0.9; transform: translateY(-1px); }
.pc-search-bar__btn:active { transform: translateY(0); }

/* Trust strip under input */
.pc-trust-strip {
    display: flex; gap: var(--space-5); margin-top: var(--space-3);
    font-size: var(--text-xs); color: var(--color-neutral-400);
}
.pc-trust-strip span { display: flex; align-items: center; gap: var(--space-1); }
.pc-trust-strip i { color: var(--color-green-400); font-size: 14px; }

/* Input error */
.pc-input-error { margin-top: var(--space-2); font-size: var(--text-sm); color: #f87171; }
.pc-input-error[hidden] { display: none; }

/* Loading */
.pc-loading { padding: var(--space-4) 0; }
.pc-loading[hidden] { display: none; }
.pc-loading__bar {
    height: 4px; background: rgba(255,255,255,0.1);
    border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-3);
}
.pc-loading__fill {
    height: 100%; width: 0%; border-radius: var(--radius-full);
    background: var(--gradient-rainbow-line); background-size: 300% 100%;
    transition: width 0.5s ease; animation: rainbowPulse 2s linear infinite;
}
.pc-loading__status { font-size: var(--text-sm); color: var(--color-neutral-300); }

/* Error + Success (hero) */
.pc-error, .pc-success {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4); border-radius: var(--radius-xl);
    font-size: var(--text-sm); flex-wrap: wrap;
}
.pc-error[hidden], .pc-success[hidden] { display: none; }
.pc-error {
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #f87171;
}
.pc-error i { font-size: var(--text-xl); }
.pc-error span { flex: 1; }
.pc-success {
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2);
    color: var(--color-green-400); font-weight: var(--weight-semibold);
}

/* ============================================================
   RESULTS SECTION — Below hero, own section
   ============================================================ */
.pc-results-section {
    background: linear-gradient(180deg, var(--color-neutral-950, #09090b), var(--color-neutral-900, #171717));
    padding: var(--space-12) 0 var(--space-16);
    border-top: 1px solid rgba(255,255,255,0.04);
}
.pc-results-section[hidden] { display: none; }

/* Summary banner */
.pc-summary {
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-6);
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.15);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-8);
}
.pc-summary__icon {
    flex-shrink: 0; width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-green-500, #10b981), var(--color-teal-500, #14b8a6));
    color: var(--color-white); font-size: 1.75rem;
    box-shadow: 0 0 24px rgba(16,185,129,0.3);
}
.pc-summary__content { flex: 1; }
.pc-summary__content h3 {
    color: var(--color-white); font-size: var(--text-xl); font-weight: var(--weight-bold); margin: 0 0 var(--space-1);
}
.pc-summary__content p { color: var(--color-neutral-400); font-size: var(--text-sm); margin: 0; }
.pc-summary__stat { text-align: right; flex-shrink: 0; }
.pc-summary__stat strong {
    display: block; font-size: var(--text-2xl, 1.5rem); font-weight: var(--weight-bold);
    background: linear-gradient(135deg, var(--color-blue-400), var(--color-teal-400));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pc-summary__stat small { color: var(--color-neutral-500); font-size: var(--text-xs); }

/* Summary state variants */
.pc-summary--warning {
    background: rgba(245,158,11,0.06);
    border-color: rgba(245,158,11,0.2);
}
.pc-summary--warning .pc-summary__icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 0 24px rgba(245,158,11,0.3);
}
.pc-summary--error {
    background: rgba(239,68,68,0.06);
    border-color: rgba(239,68,68,0.2);
}
.pc-summary--error .pc-summary__icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 0 24px rgba(239,68,68,0.3);
}

/* Contact form success message */
.form-success,
.form-error {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    font-weight: var(--weight-semibold);
    text-align: center;
    line-height: var(--leading-snug);
}
/* green-400 op een lichte ondergrond was nauwelijks leesbaar; 700 haalt AA. */
.form-success {
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.25);
    color: var(--color-green-700);
}
.form-error {
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.25);
    color: var(--color-red-600);
    margin-bottom: var(--space-4);
}

/* Carrier cards grid */
.pc-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4); margin-bottom: var(--space-8);
}

.pc-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: all var(--duration-base) ease;
}
.pc-card--available {
    border-left: 3px solid var(--color-green-400, #34d399);
}
.pc-card--available:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
    border-left-color: var(--color-green-400);
}
.pc-card--unavailable {
    opacity: 0.4; border-left: 3px solid var(--color-neutral-700, #404040);
}

/* Card header */
.pc-card__header {
    display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4);
}
.pc-card__header i { color: var(--color-blue-400); font-size: var(--text-xl); }
.pc-card__logo { height: 28px; width: auto; border-radius: var(--radius-sm); flex-shrink: 0; }
.pc-card__name { color: var(--color-white); font-size: var(--text-base); flex: 1; }
.pc-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.pc-badge--green { background: rgba(16,185,129,0.12); color: var(--color-green-400); }
.pc-badge--green i { font-size: 13px; }
.pc-badge--neutral { background: rgba(255,255,255,0.06); color: var(--color-neutral-500); }
.pc-badge--purple { background: rgba(124, 58, 237, 0.14); color: var(--color-purple-300, #c4b5fd); }

/* Alternative card (own products: 5G/Starlink) — visually separated as alternative, not primary */
.pc-card--alternative {
    border-left-color: var(--color-purple-400, #a78bfa);
    background: linear-gradient(180deg, rgba(124,58,237,0.05), rgba(255,255,255,0.04));
}
.pc-card--alternative .pc-card__name { color: var(--color-purple-100, #ddd6fe); }

/* Offerte-only card (enterprise-only suppliers without consumer leverability) */
.pc-card--offerte-only {
    border-left-color: var(--color-blue-400, #60a5fa);
}
.pc-card__offerte-note {
    padding: var(--space-3) var(--space-4);
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: var(--radius-md);
    font-size: var(--text-sm); line-height: 1.5;
    color: var(--color-blue-200, #bfdbfe);
    display: flex; align-items: flex-start; gap: var(--space-2);
}
.pc-card__offerte-note i { font-size: 16px; flex-shrink: 0; margin-top: 2px; }

/* Speed bars */
.pc-card__speeds { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.pc-speed-row { display: flex; align-items: center; gap: var(--space-3); }
.pc-speed-row__label { width: 65px; font-size: var(--text-xs); color: var(--color-neutral-500); flex-shrink: 0; }
.pc-speed-row__bar {
    flex: 1; height: 6px; background: rgba(255,255,255,0.06);
    border-radius: var(--radius-full); overflow: hidden;
}
.pc-speed-row__fill {
    height: 100%; border-radius: var(--radius-full); transition: width 0.6s var(--ease-out-quart, ease);
}
.pc-speed-row__fill--down {
    background: linear-gradient(90deg, var(--color-blue-500), var(--color-teal-400));
}
.pc-speed-row__fill--up {
    background: linear-gradient(90deg, var(--color-purple-500), var(--color-blue-400));
}
.pc-speed-row__value {
    width: 72px; text-align: right; font-size: var(--text-sm);
    font-weight: var(--weight-bold); color: var(--color-white); flex-shrink: 0;
}

/* Tech rows — name + status + price per technology */
.pc-card__tech-list {
    display: flex; flex-direction: column; gap: var(--space-2);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: var(--space-3);
}
.pc-tech-row {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.pc-tech-pill {
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    background: rgba(255,255,255,0.06); color: var(--color-neutral-200);
    border: 1px solid rgba(255,255,255,0.06);
}
.pc-tech-status {
    font-size: 11px; color: var(--color-green-400, #34d399);
    font-weight: var(--weight-medium);
}
.pc-tech-price {
    margin-left: auto;
    font-size: 11px; color: var(--color-blue-300, #93c5fd);
    font-weight: var(--weight-semibold);
}

/* Enterprise speed note */
.pc-card__enterprise {
    margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
    background: rgba(124, 58, 237, 0.08); border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs); color: var(--color-purple-300, #c4b5fd);
    display: flex; align-items: center; gap: var(--space-2);
}
.pc-card__enterprise i { font-size: 14px; }

/* Copper shutdown warning */
.pc-card__copper-warn {
    margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
    background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs); color: #fbbf24;
    display: flex; align-items: center; gap: var(--space-2);
}
.pc-card__copper-warn i { font-size: 14px; }

/* ============================================================
   LEAD CAPTURE CARD — Glass card in results section
   ============================================================ */
.pc-lead {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pc-lead__header { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.pc-lead__icon {
    width: 48px; height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-blue-500), var(--color-purple-500));
    color: var(--color-white); font-size: var(--text-xl);
}
.pc-lead__header h3 { color: var(--color-white); font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.pc-lead__header p { color: var(--color-neutral-400); font-size: var(--text-sm); margin: 0; }

.pc-lead__benefits { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.pc-benefit {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--color-neutral-300);
}
.pc-benefit i { color: var(--color-green-400); font-size: 16px; flex-shrink: 0; }

.pc-lead__fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.pc-lead__field label {
    display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold);
    color: var(--color-neutral-400); margin-bottom: var(--space-2);
}
.pc-lead__field label span { font-weight: var(--weight-regular); }
.pc-lead__field input {
    width: 100%; padding: var(--space-3) var(--space-4);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg); color: var(--color-white);
    font-family: var(--font-body); font-size: var(--text-sm);
    transition: border-color var(--duration-fast) ease;
}
.pc-lead__field input:focus-visible {
    outline: 2px solid var(--color-primary, #1a365d);
    outline-offset: 2px;
}
.pc-lead__field input::placeholder { color: var(--color-neutral-600); }
.pc-lead__field input:focus { border-color: var(--color-blue-500); }

.pc-lead__submit {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(135deg, var(--color-blue-500), var(--color-purple-500));
    color: var(--color-white); border: none; border-radius: var(--radius-lg);
    font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold);
    cursor: pointer; transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.pc-lead__submit:hover { opacity: 0.92; transform: translateY(-1px); }
.pc-lead__submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.pc-lead__trust {
    margin-top: var(--space-4); text-align: center;
    font-size: var(--text-xs); color: var(--color-neutral-500);
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
}

/* Lead success state */
.pc-success--inline {
    padding: var(--space-6);
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.15);
    border-radius: var(--radius-xl);
}
.pc-success--inline i { font-size: 2rem; color: var(--color-green-400); flex-shrink: 0; }
.pc-success--inline strong { color: var(--color-white); font-size: var(--text-lg); display: block; margin-bottom: var(--space-1); }
.pc-success--inline p { color: var(--color-neutral-300); font-size: var(--text-sm); margin: 0; }

/* ============================================================
   RESPONSIVE — Postcode checker
   ============================================================ */
@media (max-width: 640px) {
    .pc-search-bar { flex-wrap: wrap; border-radius: var(--radius-xl); }
    .pc-search-bar__group--pc { flex: 1 1 100%; }
    .pc-search-bar__divider { display: none; }
    .pc-search-bar__group--nr { flex: 1; }
    .pc-search-bar__btn { flex: 0 0 auto; }
    .pc-search-bar__btn span { display: none; }

    .pc-trust-strip { gap: var(--space-3); flex-wrap: wrap; }
    .pc-summary { flex-direction: column; text-align: center; }
    .pc-summary__stat { text-align: center; }
    .pc-cards { grid-template-columns: 1fr; }
    .pc-lead__fields { grid-template-columns: 1fr; }
    .pc-lead { padding: var(--space-5); }
    .pc-lead__header { flex-direction: column; }
}

/* Hero card stack visual */
.hero__card-stack {
    position: relative;
    max-width: 440px;
    margin-inline: auto;
}

.hero__feature-card {
    border-radius: var(--radius-2xl);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    overflow: hidden;
}
.hero__feature-card--main {
    padding: var(--space-6);
}

.hero__feature-card-header {
    margin-bottom: var(--space-5);
}
.hero__feature-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-green-400);
    letter-spacing: var(--tracking-wide);
}
.hero__status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-green-400);
    animation: pulse 2s ease-in-out infinite;
}

.hero__feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.hero__feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all var(--duration-fast) ease;
}
.hero__feature-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}

.hero__feature-icon {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 18px;
    flex-shrink: 0;
    color: var(--color-white);
}
.hero__feature-icon--blue { background: rgba(37, 99, 235, 0.3); }
.hero__feature-icon--purple { background: rgba(124, 58, 237, 0.3); }
.hero__feature-icon--teal { background: rgba(6, 182, 212, 0.3); }

.hero__feature-item strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
}
.hero__feature-item > div span {
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}
.hero__feature-badge {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-100);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    white-space: nowrap;
}

.hero__feature-carriers {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.hero__feature-carriers span {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-500);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Floating stat cards */
.hero__float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    color: var(--color-white);
}
.hero__float-card i {
    font-size: 20px;
}
.hero__float-card strong {
    font-size: var(--text-md);
    font-weight: var(--weight-extrabold);
}
.hero__float-card span {
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}

.hero__float-card--1 {
    top: -16px; right: -24px;
    animation: floatCard 6s ease-in-out infinite;
}
.hero__float-card--1 i { color: var(--color-green-400); }

.hero__float-card--2 {
    bottom: -16px; left: -24px;
    animation: floatCard 6s ease-in-out infinite 3s;
}
.hero__float-card--2 i { color: var(--color-blue-400); }

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (max-width: 768px) {
    .hero { min-height: auto; padding-top: calc(var(--header-height) + var(--space-12)); padding-bottom: var(--space-12); }
    .hero__container { grid-template-columns: 1fr; gap: var(--space-12); }
    .hero__visual,
    .hero__network-visual { display: none; }
    .hero__subtitle { max-width: 100%; }
    .btn--header { display: none; }
    .header__phone span { display: none; }
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
    padding: var(--space-8) 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-100);
    position: relative;
    z-index: 5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.trust-bar__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.trust-bar__icon {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 20px;
    flex-shrink: 0;
}
.trust-bar__icon--blue { background: var(--color-blue-50); color: var(--color-blue-600); }
.trust-bar__icon--purple { background: var(--color-purple-100); color: var(--color-purple-600); }
.trust-bar__icon--teal { background: var(--color-teal-100); color: var(--color-teal-600); }
.trust-bar__icon--green { background: rgba(16, 185, 129, 0.08); color: var(--color-green-600); }

.trust-bar__item strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
}
.trust-bar__item span {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

@media (max-width: 768px) {
    .trust-bar__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.service-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
    transition: all var(--duration-base) var(--ease-out-quart);
    text-decoration: none;
    color: var(--color-neutral-700);
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    opacity: 1;
    transition: height var(--duration-base) ease;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    color: var(--color-neutral-700);
}
.service-card:hover::before { height: 4px; }

.service-card--blue::before { background: var(--gradient-cta); }
.service-card--purple::before { background: linear-gradient(90deg, var(--color-purple-500), var(--color-purple-400)); }
.service-card--teal::before { background: linear-gradient(90deg, var(--color-teal-500), var(--color-teal-400)); }
.service-card--green::before { background: linear-gradient(90deg, var(--color-green-500), var(--color-green-400)); }
.service-card--orange::before { background: linear-gradient(90deg, var(--color-orange-500), var(--color-orange-400)); }

.service-card__icon {
    width: 52px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 24px;
    margin-bottom: var(--space-5);
    background: var(--color-blue-50);
    color: var(--color-blue-600);
}
.service-card--purple .service-card__icon { background: var(--color-purple-100); color: var(--color-purple-600); }
.service-card--teal .service-card__icon { background: var(--color-teal-100); color: var(--color-teal-600); }
.service-card--green .service-card__icon { background: rgba(16, 185, 129, 0.08); color: var(--color-green-600); }
.service-card--orange .service-card__icon { background: rgba(249, 115, 22, 0.08); color: var(--color-orange-600); }

.service-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
    color: var(--color-neutral-900);
}
.service-card p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    flex: 1;
}

.service-card__price {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-blue-600);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-blue-50);
    border-radius: var(--radius-full);
    display: inline-block;
}
.service-card--purple .service-card__price { color: var(--color-purple-600); background: var(--color-purple-100); }
.service-card--teal .service-card__price { color: var(--color-teal-600); background: var(--color-teal-100); }
.service-card--green .service-card__price { color: var(--color-green-600); background: rgba(16, 185, 129, 0.08); }

.service-card__carriers,
.service-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-100);
}
.service-card__carriers span {
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    background: var(--color-neutral-50);
    border-radius: var(--radius-full);
    color: var(--color-neutral-600);
}
.service-card__meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

.service-card__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-600);
    transition: gap var(--duration-fast) ease;
}
.service-card:hover .service-card__link { gap: var(--space-3); color: var(--color-purple-600); }

@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SPLIT SECTION (two-column layouts)
   ============================================================ */
.split-section {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
    align-items: center;
}
.split-section--reverse {
    grid-template-columns: 0.9fr 1.1fr;
}
.split-section--reverse .split-section__visual { order: -1; }

@media (max-width: 768px) {
    .split-section,
    .split-section--reverse { grid-template-columns: 1fr; gap: var(--space-10); }
    .split-section--reverse .split-section__visual { order: 0; }
}

/* USP grid */
.usp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-8);
}
.usp-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.usp-item__icon {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 18px;
    flex-shrink: 0;
}
.usp-item__icon--blue { background: var(--color-blue-50); color: var(--color-blue-600); }
.usp-item__icon--purple { background: var(--color-purple-100); color: var(--color-purple-600); }
.usp-item__icon--teal { background: var(--color-teal-100); color: var(--color-teal-600); }
.usp-item__icon--green { background: rgba(16, 185, 129, 0.08); color: var(--color-green-600); }

.usp-item strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
}
.usp-item span {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

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

/* Stats stack */
.stats-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}
.stat-card {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: all var(--duration-base) var(--ease-out-quart);
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}
.stat-card__value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    margin-bottom: var(--space-2);
}
.stat-card__label {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

.stat-card--blue .stat-card__value { color: var(--color-blue-600); }
.stat-card--purple .stat-card__value { color: var(--color-purple-600); }
.stat-card--teal .stat-card__value { color: var(--color-teal-600); }
.stat-card--green .stat-card__value { color: var(--color-green-600); }

.stat-card--blue:hover { border-color: var(--color-blue-200); }
.stat-card--purple:hover { border-color: var(--color-purple-200); }
.stat-card--teal:hover { border-color: var(--color-teal-200); }
.stat-card--green:hover { border-color: var(--color-green-300); }

/* ============================================================
   STEPS / WERKWIJZE
   ============================================================ */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.step-card {
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all var(--duration-base) var(--ease-out-quart);
}
.step-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-3px);
}
.step-card__number {
    width: 52px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    margin-bottom: var(--space-5);
    color: var(--color-white);
}
.step-card__number--blue { background: rgba(37, 99, 235, 0.2); }
.step-card__number--purple { background: rgba(124, 58, 237, 0.2); }
.step-card__number--teal { background: rgba(6, 182, 212, 0.2); }
.step-card__number--green { background: rgba(16, 185, 129, 0.2); }

.step-card h4 { margin-bottom: var(--space-3); }
.step-card p {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}

@media (max-width: 768px) {
    .steps-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   TIMELINE (5G Bridge)
   ============================================================ */
.timeline {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: relative;
    padding-left: var(--space-8);
}
.timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-purple-400), var(--color-blue-400), var(--color-green-400));
    border-radius: var(--radius-full);
}
.timeline__step {
    display: flex;
    gap: var(--space-4);
    position: relative;
}
.timeline__marker {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    margin-left: -27px;
}
.timeline__marker--purple { background: var(--color-purple-500); box-shadow: 0 0 12px rgba(124, 58, 237, 0.4); }
.timeline__marker--blue { background: var(--color-blue-500); box-shadow: 0 0 12px rgba(37, 99, 235, 0.4); }
.timeline__marker--green { background: var(--color-green-500); box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }

.timeline__step strong {
    display: block;
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}
.timeline__step p {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}

/* Bridge visual */
.bridge-visual {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-neutral-100);
}
.bridge-visual__phase {
    flex: 1;
    text-align: center;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-neutral-50);
    transition: all var(--duration-base) ease;
}
.bridge-visual__phase--active {
    background: var(--color-purple-100);
}
.bridge-visual__icon {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 24px;
    margin: 0 auto var(--space-3);
}
.bridge-visual__icon--purple { background: var(--color-purple-600); color: var(--color-white); }
.bridge-visual__icon--blue { background: var(--color-blue-600); color: var(--color-white); }

.bridge-visual__phase strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}
.bridge-visual__phase span {
    font-size: var(--text-xs);
    color: var(--color-neutral-600);
}

.bridge-visual__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-neutral-300);
    flex-shrink: 0;
}
.bridge-visual__connector-line {
    width: 40px; height: 2px;
    background: var(--gradient-rainbow-line);
    border-radius: var(--radius-full);
}

@media (max-width: 480px) {
    .bridge-visual { flex-direction: column; }
    .bridge-visual__connector { transform: rotate(90deg); }
}

/* ============================================================
   TECH CARDS
   ============================================================ */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.tech-card {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
    transition: all var(--duration-base) var(--ease-out-quart);
}
.tech-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}
.tech-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.tech-card__header h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
}
.tech-card__badge {
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
}
.tech-card__badge--blue { background: var(--color-blue-50); color: var(--color-blue-700); }
.tech-card__badge--purple { background: var(--color-purple-100); color: var(--color-purple-700); }
.tech-card__badge--teal { background: var(--color-teal-100); color: var(--color-teal-700); }

.tech-card p {
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    margin-bottom: var(--space-5);
}
.tech-card__specs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-100);
}
.tech-card__specs div {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}
.tech-card__specs strong {
    color: var(--color-neutral-800);
}

@media (max-width: 768px) {
    .tech-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CASE STUDY
   ============================================================ */
.case-study__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
.case-study__card {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.case-study__card h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-md);
}
.case-study__card--challenge h4 i { color: var(--color-orange-400); }
.case-study__card--solution h4 i { color: var(--color-blue-400); }
.case-study__card--result h4 i { color: var(--color-green-400); }

.case-study__card ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.case-study__card li {
    font-size: var(--text-sm);
    padding-left: var(--space-4);
    position: relative;
    color: var(--color-neutral-300);
}
.case-study__card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-neutral-500);
}

.case-study__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.case-study__timeline div {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, 0.06);
    border-left: 3px solid var(--color-green-500);
}
.case-study__timeline strong {
    font-size: var(--text-sm);
    color: var(--color-green-400);
}
.case-study__timeline p {
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}

.case-study__quote {
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}
.case-study__quote blockquote {
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-neutral-200);
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}
.case-study__quote blockquote i {
    display: block;
    font-size: var(--text-3xl);
    color: var(--color-purple-400);
    margin-bottom: var(--space-3);
    font-style: normal;
}
.case-study__author strong {
    display: block;
    color: var(--color-white);
    font-size: var(--text-sm);
}
.case-study__author span {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

@media (max-width: 768px) {
    .case-study__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   AUDIENCE CARDS
   ============================================================ */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.audience-card {
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
    transition: all var(--duration-base) var(--ease-out-quart);
    text-align: center;
}
.audience-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}
.audience-card__icon {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 24px;
    margin: 0 auto var(--space-4);
}
.audience-card__icon--blue { background: var(--color-blue-50); color: var(--color-blue-600); }
.audience-card__icon--purple { background: var(--color-purple-100); color: var(--color-purple-600); }
.audience-card__icon--teal { background: var(--color-teal-100); color: var(--color-teal-600); }
.audience-card__icon--green { background: rgba(16, 185, 129, 0.08); color: var(--color-green-600); }

.audience-card h4 { margin-bottom: var(--space-3); }
.audience-card p {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}
a.audience-card--link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.audience-card__cta {
    margin-top: auto;
    padding-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    transition: color var(--duration-fast) ease;
}
.audience-card--link:hover .audience-card__cta { color: var(--color-accent); }
.audience-card__cta i { transition: transform var(--duration-fast) ease; }
.audience-card--link:hover .audience-card__cta i { transform: translateX(4px); }

@media (max-width: 768px) {
    .audience-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .audience-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CHECK LIST
   ============================================================ */
.check-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block: var(--space-4);
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-neutral-700);
}
.check-list li i {
    color: var(--color-green-500);
    font-size: var(--text-lg);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================================
   INTERNATIONAL CARD
   ============================================================ */
.international-card {
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
}
.international-card__flag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-neutral-100);
}
.international-card__nl {
    padding: var(--space-3) var(--space-5);
    font-weight: var(--weight-bold);
    background: var(--color-blue-50);
    color: var(--color-blue-700);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
}
.international-card__world {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xl);
    background: var(--color-purple-100);
    color: var(--color-purple-600);
    border-radius: var(--radius-md);
}
.international-card__flag i { color: var(--color-neutral-300); }
.international-card__checks {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.international-card__checks div {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
}
.international-card__checks i { color: var(--color-green-500); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.faq-item {
    border: 1px solid var(--color-neutral-100);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--duration-base) ease;
    background: var(--color-white);
}
.faq-item:hover { border-color: var(--color-neutral-200); }
.faq-item[open] {
    border-color: var(--color-blue-200);
    box-shadow: var(--shadow-sm);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-800);
    font-size: var(--text-base);
    list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question i {
    transition: transform var(--duration-base) var(--ease-out-quart);
    color: var(--color-neutral-400);
    flex-shrink: 0;
}
.faq-item[open] .faq-item__question i { transform: rotate(180deg); }

.faq-item__answer {
    padding: 0 var(--space-6) var(--space-5);
}
.faq-item__answer p {
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    line-height: var(--leading-relaxed);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-section { padding-block: var(--space-8); }

.cta-banner {
    position: relative;
    padding: var(--space-16) var(--space-12);
    border-radius: var(--radius-3xl);
    background: var(--gradient-hero-vivid);
    overflow: hidden;
    text-align: center;
}
.cta-banner__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cta-banner__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}
.cta-banner__orb--1 {
    width: 300px; height: 300px;
    background: var(--color-teal-400);
    top: -100px; right: -50px;
}
.cta-banner__orb--2 {
    width: 250px; height: 250px;
    background: var(--color-purple-400);
    bottom: -80px; left: -30px;
}

.cta-banner__content {
    position: relative;
    z-index: 2;
}
.cta-banner__content h3 {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}
.cta-banner__content p {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.8);
    margin-bottom: var(--space-8);
    max-width: 520px;
    margin-inline: auto;
    line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
    .cta-banner { padding: var(--space-12) var(--space-6); }
}

/* ============================================================
   CONTACT CARD
   ============================================================ */
.contact-card {
    border-radius: var(--radius-2xl);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-10);
    backdrop-filter: blur(16px);
}
.contact-card__grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--space-10);
}
.contact-card__info h3 { margin-bottom: var(--space-6); }
.contact-card__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.contact-card__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    transition: all var(--duration-fast) ease;
}
.contact-card__item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}
.contact-card__item-icon {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 20px;
    flex-shrink: 0;
}
.contact-card__item-icon--blue { background: rgba(37, 99, 235, 0.15); color: var(--color-blue-400); }
.contact-card__item-icon--purple { background: rgba(124, 58, 237, 0.15); color: var(--color-purple-400); }

.contact-card__item strong {
    display: block;
    color: var(--color-white);
    font-size: var(--text-sm);
}
.contact-card__item span {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}

.contact-card__promise {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.1);
}
.contact-card__promise i {
    color: var(--color-blue-400);
    font-size: var(--text-lg);
    flex-shrink: 0;
}
.contact-card__promise p {
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
    line-height: var(--leading-relaxed);
}

/* Contact form */
.contact-card__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Labels stonden op neutral-300, wat alleen werkt in een donker formulier.
   De contactpagina heeft een witte kaart; daar was het onleesbaar. Basis is nu
   donker, de lichte variant geldt binnen donkere secties. */
.form-group label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-700);
    letter-spacing: var(--tracking-wide);
}
.section--dark .form-group label,
.contact-card .form-group label {
    color: var(--color-neutral-300);
}
.form-optional {
    font-weight: var(--weight-regular);
    color: var(--color-neutral-500);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-white);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) ease;
}
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--color-primary, #1a365d);
    outline-offset: 2px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-neutral-600);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-blue-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a1a1aa' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.form-group select option {
    background: var(--color-neutral-900);
    color: var(--color-white);
}
.form-group textarea { resize: vertical; min-height: 80px; }

@media (max-width: 768px) {
    .contact-card__grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .contact-card { padding: var(--space-6); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--color-neutral-950);
    color: var(--color-neutral-400);
}
.footer__top {
    padding: var(--space-16) 0 var(--space-10);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: var(--space-10);
}
.footer__tagline {
    font-size: var(--text-sm);
    margin-top: var(--space-3);
    margin-bottom: var(--space-5);
    color: var(--color-neutral-400);
    max-width: 280px;
}
.footer__contact-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer__contact-items a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}
.footer__contact-items a:hover { color: var(--color-white); }

.footer__col h3,
.footer__col-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}
.footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer__col a {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}
.footer__col a:hover { color: var(--color-white); }

/* Footer trust strip (NIS2 / Schülski-IT / 5G Bridge) */
.footer__trust {
    padding: var(--space-8) 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}
.footer__trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}
.footer__trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.footer__trust-item i {
    font-size: 28px;
    color: var(--color-green-400);
    flex-shrink: 0;
    margin-top: 2px;
}
.footer__trust-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer__trust-item strong {
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.footer__trust-item span {
    color: var(--color-neutral-400);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
}
@media (max-width: 768px) {
    .footer__trust-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

/* Footer carriers */
.footer__carriers {
    padding: var(--space-6) 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer__carriers .container {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.footer__carriers-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-400);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    white-space: nowrap;
}
.footer__carriers-logos {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.footer__carriers-logos span {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-400);
    padding: 4px 12px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-full);
}
.footer__carriers-logos img {
    height: 24px;
    width: auto;
    opacity: 0.5;
    filter: brightness(0) invert(1);
    transition: opacity var(--duration-fast) ease;
}
.footer__carriers-logos img:hover { opacity: 0.8; }

.footer__rainbow-line { margin: 0; }

.footer__bottom { padding: var(--space-6) 0; }
.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}
.footer__bottom p {
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}
.footer__bottom a {
    color: var(--color-neutral-400);
    text-decoration: none;
}
.footer__bottom a:hover { color: var(--color-white); }
.footer__legal {
    display: flex;
    gap: var(--space-5);
}
.footer__legal a {
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}

@media (max-width: 768px) {
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .footer__brand { grid-column: 1 / -1; }
    .footer__bottom-inner { flex-direction: column; text-align: center; }
}

/* ============================================================
   PAGE HERO (Service pages)
   ============================================================ */
.page-hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-12));
    padding-bottom: var(--space-12);
    background: var(--gradient-hero);
    overflow: hidden;
}
.page-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.page-hero__container { position: relative; z-index: 2; }
.page-hero__content { max-width: 680px; }
.page-hero__content h1 {
    color: var(--color-white);
    margin-bottom: var(--space-5);
}
.page-hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-neutral-300);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
}
.page-hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================================
   PAGE HERO — decoratieve glow orbs (hero__glow--1 / --2)
   Aanwezig in 50+ page-templates; CSS ontbrak → lege divs.
   ============================================================ */
.hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero__glow--1 {
    top: -15%;
    left: -8%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle at center, var(--color-blue-500, #3b82f6), transparent 65%);
    filter: blur(90px);
    opacity: 0.2;
}
.hero__glow--2 {
    bottom: -20%;
    right: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle at center, #38a169, transparent 65%);
    filter: blur(80px);
    opacity: 0.15;
}

/* ============================================================
   PAGE HERO — stat-bar (.page-hero__stats / __stat / __meta)
   Gebruikt op datakaarten, geo, cloud-connect; CSS ontbrak.
   ============================================================ */
.page-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    align-items: center;
}
.page-hero__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.page-hero__stat strong {
    font-size: var(--text-base, 1rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-white, #fff);
    line-height: 1.2;
}
.page-hero__stat span {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-neutral-300, #d1d5db);
    line-height: 1.3;
}
/* Verticale divider tussen stats op desktop */
.page-hero__stat + .page-hero__stat {
    padding-left: var(--space-6);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 640px) {
    .page-hero__stat + .page-hero__stat {
        padding-left: 0;
        border-left: none;
    }
}

/* Meta-regel (postcode, label) in page-hero */
.page-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-neutral-300, #d1d5db);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full, 9999px);
    padding: var(--space-2) var(--space-4);
}
.page-hero__meta i {
    color: var(--color-teal-400, #2dd4bf);
    font-size: 1rem;
}

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content { padding-block: var(--space-16); }
.page-content h2 { margin-top: var(--space-12); margin-bottom: var(--space-5); }
.page-content h3 { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.page-content p,
.page-content li {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
}

/* ============================================================
   HIGHLIGHT FEATURES & PILLS & CARRIER TAGS
   ============================================================ */
.highlight-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.highlight-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-neutral-700);
}
.highlight-features li i {
    color: var(--color-green-500);
    font-size: var(--text-lg);
    flex-shrink: 0;
    margin-top: 2px;
}
.section--dark .highlight-features li { color: var(--color-neutral-300); }

.feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
}
.feature-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    background: var(--color-neutral-50);
    color: var(--color-neutral-600);
    border: 1px solid var(--color-neutral-100);
}

.carrier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.carrier-tag {
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    background: var(--color-neutral-50);
    color: var(--color-neutral-600);
    border: 1px solid var(--color-neutral-100);
}
.section--dark .carrier-tag {
    background: rgba(255,255,255,0.04);
    color: var(--color-neutral-400);
    border-color: rgba(255,255,255,0.08);
}

/* ============================================================
   POSTCODE CHECKER
   Lead-generation widget: glass card, rainbow progress bar,
   animated scan state, lead-capture form, success state.
   ============================================================ */

/* ---- Outer wrapper ---- */
.postcode-checker {
    position: relative;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    background: var(--gradient-glass-light);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    isolation: isolate;
}

/*
 * Gradient border via a pseudo-element: keeps border inside the border-box
 * so it does not affect layout sizing.
 */
.postcode-checker::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        135deg,
        var(--color-blue-500),
        var(--color-purple-500),
        var(--color-teal-400)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* ---- Input row ---- */
.postcode-checker__input {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    flex-wrap: wrap;
}

.postcode-checker__input input[type="text"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-900);
    background: var(--color-white);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-base) var(--ease-out-expo),
        box-shadow   var(--duration-base) var(--ease-out-expo);
}
.postcode-checker__input input[type="text"]:focus-visible {
    outline: 2px solid var(--color-primary, #1a365d);
    outline-offset: 2px;
}

.postcode-checker__input input[type="text"]:focus {
    border-color: var(--color-blue-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.postcode-checker__input input[type="text"].is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.postcode-checker__input input[type="text"]::placeholder {
    color: var(--color-neutral-400);
    font-weight: var(--weight-regular);
}

/* Inline validation error */
.pc-field-error {
    display: block;
    width: 100%;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: #dc2626;
}

/* ---- Loading panel ---- */
.postcode-checker__loading {
    text-align: center;
}

.pc-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) 0;
}

/* Spinner ring */
.pc-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--color-neutral-200);
    border-top-color: var(--color-blue-500);
    border-right-color: var(--color-purple-500);
    animation: pcws-spin 0.9s linear infinite;
}

@keyframes pcws-spin {
    to { transform: rotate(360deg); }
}

.pc-loading-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-800);
    margin: 0;
}

.pc-carrier-label {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    font-weight: var(--weight-medium);
    min-height: 1.4em;
    margin: 0;
    transition: opacity var(--duration-base) var(--ease-out-expo);
}

/* Progress bar */
.pc-progress-track {
    width: 100%;
    max-width: 360px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    overflow: hidden;
}

.pc-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    background: linear-gradient(
        90deg,
        var(--color-blue-500),
        var(--color-purple-500),
        var(--color-teal-400),
        var(--color-green-400)
    );
    background-size: 200% 100%;
    animation: pcws-shimmer 1.8s linear infinite;
    transition: width 0.1s linear;
}

@keyframes pcws-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ---- Result panel ---- */
.postcode-checker__result {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Check icon */
.pc-result-icon {
    display: flex;
    justify-content: center;
}

.pc-check-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-green-500), var(--color-teal-500));
    color: var(--color-white);
    font-size: 1.75rem;
    font-weight: var(--weight-bold);
    box-shadow: var(--shadow-glow-teal);
    animation: pcws-pop var(--duration-slow) var(--ease-spring) both;
}

@keyframes pcws-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    70%  { transform: scale(1.12); }
    100% { transform: scale(1);    opacity: 1; }
}

/* Result heading */
.pc-result-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    line-height: var(--leading-snug);
    text-align: center;
    margin: 0;
}

.pc-result-title strong {
    background: linear-gradient(135deg, var(--color-blue-600), var(--color-purple-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtitle */
.pc-result-sub {
    font-size: var(--text-base);
    color: var(--color-neutral-600);
    line-height: var(--leading-relaxed);
    text-align: center;
    margin: 0;
}

/* Carrier badge strip */
.pc-carrier-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.pc-carrier-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-700);
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-200);
}

.pc-carrier-badge::before {
    content: '\2713';
    color: var(--color-green-500);
}

/* ---- Lead form ---- */
.pc-lead-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-neutral-100);
}

.pc-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pc-form-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-700);
}

.pc-form-input {
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-neutral-900);
    background: var(--color-white);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-base) var(--ease-out-expo),
        box-shadow   var(--duration-base) var(--ease-out-expo);
}
.pc-form-input:focus-visible {
    outline: 2px solid var(--color-primary, #1a365d);
    outline-offset: 2px;
}

.pc-form-input:focus {
    border-color: var(--color-blue-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.pc-form-input.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.pc-form-input::placeholder {
    color: var(--color-neutral-400);
}

/* Submit button — extends .btn .btn--primary from earlier in this file */
.pc-submit-btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
}

.pc-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* Status message */
.pc-form-status {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
}

.pc-form-status--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ---- Success state ---- */
.pc-success-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    animation: pcws-fade-up var(--duration-slow) var(--ease-out-expo) both;
}

@keyframes pcws-fade-up {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

.pc-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-green-500), var(--color-teal-500));
    color: var(--color-white);
    font-size: 2rem;
    font-weight: var(--weight-bold);
    box-shadow: var(--shadow-glow-teal);
}

.pc-success-message p {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
    margin: 0;
    line-height: var(--leading-snug);
}

.pc-success-sub {
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-regular) !important;
    color: var(--color-neutral-500) !important;
}

/* ---- Dark section overrides ---- */
.section--dark .postcode-checker {
    background: rgba(15, 23, 42, 0.6);
}

.section--dark .postcode-checker__input input[type="text"],
.section--dark .pc-form-input {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: var(--color-white);
}

.section--dark .postcode-checker__input input[type="text"]::placeholder,
.section--dark .pc-form-input::placeholder {
    color: var(--color-neutral-500);
}

.section--dark .pc-loading-title,
.section--dark .pc-result-title {
    color: var(--color-white);
}

.section--dark .pc-result-sub {
    color: var(--color-neutral-400);
}

.section--dark .pc-form-label {
    color: var(--color-neutral-300);
}

.section--dark .pc-lead-form {
    border-top-color: rgba(255,255,255,0.08);
}

.section--dark .pc-carrier-badge {
    background: rgba(37,99,235,0.15);
    border-color: rgba(37,99,235,0.3);
    color: var(--color-blue-300);
}

/* ---- Responsive — mobile-first ---- */
@media (min-width: 480px) {
    .pc-lead-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }

    .pc-submit-btn,
    .pc-form-status {
        grid-column: 1 / -1;
    }
}

@media (min-width: 640px) {
    .postcode-checker {
        padding: var(--space-10) var(--space-12);
    }

    .postcode-checker__input {
        flex-wrap: nowrap;
    }

    .postcode-checker__input input[type="text"] {
        flex: 1 1 auto;
    }
}

/* ============================================================
   MOBILE STICKY CTA BAR
   ============================================================ */
.mobile-cta {
    display: none;
}
@media (max-width: 768px) {
    .mobile-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 90;
        background: var(--color-blue-950);
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
        transform: translateY(100%);
        transition: transform var(--duration-base) var(--ease-out-quart);
    }
    .mobile-cta.is-visible {
        transform: translateY(0);
    }
    .mobile-cta__btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-2);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        text-decoration: none;
        transition: background var(--duration-fast) ease;
    }
    .mobile-cta__btn i { font-size: 18px; }
    .mobile-cta__btn--phone {
        background: var(--gradient-cta);
        color: var(--color-white);
    }
    .mobile-cta__btn--whatsapp {
        background: #25d366;
        color: var(--color-white);
    }
    .mobile-cta__btn--contact {
        background: rgba(255,255,255,0.08);
        color: var(--color-neutral-300);
        border: 1px solid rgba(255,255,255,0.1);
    }
    /* Add bottom padding to body so content isn't hidden behind bar */
    body { padding-bottom: 64px; }
    /* Hide bar when at very top (hero has its own CTAs) */
}

/* ============================================================
   KEY FACTS — citable block voor AI-search (LLM extraction)
   ============================================================ */
.key-facts {
    margin: var(--space-12) auto;
    max-width: 900px;
    padding: var(--space-8) var(--space-8);
    background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-purple-50, #faf5ff) 100%);
    border: 1px solid var(--color-blue-100);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.key-facts::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue-500), var(--color-purple-500), var(--color-teal-500));
}
.key-facts__title {
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-blue-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.key-facts__title i {
    color: var(--color-blue-600);
    font-size: 1.2em;
}
.key-facts__list {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: var(--space-3) var(--space-6);
    margin: 0;
}
.key-facts__list dt {
    font-weight: var(--weight-semibold);
    color: var(--color-blue-800);
    font-size: var(--text-sm);
    padding: var(--space-1) 0;
}
.key-facts__list dd {
    margin: 0;
    color: var(--color-neutral-700);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    padding: var(--space-1) 0;
}
@media (max-width: 640px) {
    .key-facts__list {
        grid-template-columns: 1fr;
        gap: var(--space-1) 0;
    }
    .key-facts__list dt {
        padding-top: var(--space-3);
    }
    .key-facts__list dt:first-child {
        padding-top: 0;
    }
}

/* ============================================================
   PRICING MATRIX — glasvezel-kosten page
   ============================================================ */
.pricing-matrix-section {
    margin-top: var(--space-16);
}
.pricing-matrix-section + .pricing-matrix-section {
    margin-top: var(--space-12);
}
.pricing-matrix__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.pricing-matrix__title i {
    color: var(--color-blue-600);
}
.pricing-matrix__subtitle {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-6);
}
.pricing-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-neutral-200);
}
/* Op smalle schermen schuift de tabel horizontaal; zonder aanwijzing ziet
   niemand dat er kolommen buiten beeld staan. */
.pm-scroll-hint { display: none; }
@media (max-width: 900px) {
    .pm-scroll-hint {
        display: block;
        font-size: var(--text-xs);
        color: var(--color-neutral-500);
        margin-top: var(--space-2);
        font-style: italic;
    }
}
.pricing-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: var(--color-white);
}
.pricing-matrix thead tr {
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
}
.pricing-matrix thead th {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.pricing-matrix thead th:first-child {
    text-align: left;
    min-width: 160px;
    background: rgba(0,0,0,0.15);
}
.pricing-matrix thead th:last-child { border-right: none; }

/* Network group header row */
.pricing-matrix thead tr.pm-network-row th {
    background: rgba(255,255,255,0.08);
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
    padding: var(--space-2) var(--space-4);
}

.pricing-matrix tbody tr {
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background var(--duration-fast) ease;
}
.pricing-matrix tbody tr:last-child { border-bottom: none; }
.pricing-matrix tbody tr:hover { background: var(--color-blue-50); }
.pricing-matrix tbody td {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    color: var(--color-neutral-700);
    border-right: 1px solid var(--color-neutral-100);
}
.pricing-matrix tbody td:last-child { border-right: none; }
.pricing-matrix tbody td:first-child {
    text-align: left;
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
    background: var(--color-neutral-50);
    white-space: nowrap;
}
.pricing-matrix tbody td.pm-price {
    font-weight: var(--weight-medium);
    color: var(--color-blue-700);
}
.pricing-matrix tbody td.pm-price--best {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.04));
    color: var(--color-green-700);
    font-weight: var(--weight-bold);
    position: relative;
}
.pricing-matrix tbody td.pm-na {
    color: var(--color-neutral-400);
    font-size: 0.8rem;
}
/* Zebra stripe */
.pricing-matrix tbody tr:nth-child(even) td:first-child {
    background: #f5f7fa;
}

/* Citable facts block */
.pm-citable {
    margin: var(--space-12) 0;
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1px solid var(--color-blue-200);
    border-left: 4px solid var(--color-blue-500);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}
.pm-citable__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-4);
}
.pm-citable__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-6);
}
.pm-citable__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}
.pm-fact {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--color-blue-100);
    box-shadow: var(--shadow-sm);
}
.pm-fact__value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-blue-700);
    line-height: 1.1;
    margin-bottom: var(--space-1);
}
.pm-fact__label {
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    line-height: 1.4;
}
.pm-fact__source {
    font-size: 0.68rem;
    color: var(--color-neutral-400);
    margin-top: var(--space-2);
}

/* Budget decision box */
.pm-decision-box {
    background: var(--color-neutral-900);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-top: var(--space-12);
}
.pm-decision-box__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-white);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.pm-decision-box__title i { color: var(--color-teal-400); }

/* Vrije inhoud in het donkere keuzeblok: kop, tekst, lijst en links moeten
   licht zijn, anders staat donkere tekst op een donkere achtergrond. */
.pm-decision-box > h3 {
    color: var(--color-white);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
}
.pm-decision-box > p {
    color: rgba(255, 255, 255, 0.78);
    line-height: var(--leading-relaxed);
}
.pm-decision-box > p:last-child { margin-bottom: 0; }
.pm-decision-box a {
    color: var(--color-teal-400);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pm-decision-box a:hover { color: var(--color-white); }
.pm-decision-box .check-list li { color: rgba(255, 255, 255, 0.82); }
.pm-decision-box .check-list li strong { color: var(--color-white); }
.pm-decision-box .check-list i { color: var(--color-teal-400); }
.pm-profiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.pm-profile {
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.pm-profile__budget {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    margin-bottom: var(--space-1);
}
.pm-profile--zzp .pm-profile__budget { color: var(--color-green-400); }
.pm-profile--mkb .pm-profile__budget { color: var(--color-blue-400); }
.pm-profile--enterprise .pm-profile__budget { color: var(--color-purple-400); }
.pm-profile__name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}
.pm-profile__desc {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    line-height: 1.55;
    margin-bottom: var(--space-4);
}
.pm-profile__tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
}
.pm-profile--zzp .pm-profile__tag { background: rgba(16,185,129,0.15); color: var(--color-green-300); }
.pm-profile--mkb .pm-profile__tag { background: rgba(37,99,235,0.2); color: var(--color-blue-300); }
.pm-profile--enterprise .pm-profile__tag { background: rgba(124,58,237,0.2); color: var(--color-purple-300); }

.pm-disclaimer {
    margin-top: var(--space-6);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    text-align: center;
    padding: var(--space-4);
    background: var(--color-neutral-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
}
.pm-disclaimer i { margin-right: var(--space-1); }

/* One-time costs table — small, light */
.pm-onetime-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-top: var(--space-6);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-neutral-200);
}
.pm-onetime-table th {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: rgba(255,255,255,0.9);
    padding: var(--space-3) var(--space-5);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    text-align: left;
    letter-spacing: 0.04em;
}
.pm-onetime-table td {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-100);
    color: var(--color-neutral-700);
}
.pm-onetime-table td:first-child {
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
}
.pm-onetime-table tr:last-child td { border-bottom: none; }
.pm-onetime-table tr:hover td { background: var(--color-neutral-50); }

@media (max-width: 768px) {
    .pm-profiles { grid-template-columns: 1fr; gap: var(--space-4); }
    .pm-citable__facts { grid-template-columns: 1fr; }
    .pricing-matrix thead th { font-size: 0.65rem; padding: var(--space-2) var(--space-3); }
    .pricing-matrix tbody td { padding: var(--space-2) var(--space-3); font-size: 0.78rem; }
}

/* ============================================================
   HERO TRUST CHIPS + CARRIER STRIP — front-page
   ============================================================ */
.hero-usp-trio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}
.hero-usp-chip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    transition: all var(--duration-fast) ease;
    backdrop-filter: blur(8px);
    cursor: default;
}
a.hero-usp-chip {
    cursor: pointer;
}
a.hero-usp-chip:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-2px);
}
.hero-usp-chip__icon {
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    font-size: 1.1rem;
}
.hero-usp-chip__icon--blue { background: rgba(37,99,235,0.25); color: #93c5fd; }
.hero-usp-chip__icon--green { background: rgba(16,185,129,0.25); color: #6ee7b7; }
.hero-usp-chip__icon--purple { background: rgba(124,58,237,0.25); color: #c4b5fd; }
.hero-usp-chip__text {
    display: flex;
    flex-direction: column;
}
.hero-usp-chip__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
    line-height: 1.2;
}
.hero-usp-chip__sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.3;
    margin-top: 2px;
}
.hero-usp-chip__arrow {
    margin-left: var(--space-1);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
    align-self: center;
}

/* Carrier strip — below hero */
.carrier-strip {
    background: rgba(255,255,255,0.035);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: var(--space-5) 0;
}
.carrier-strip__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    justify-content: center;
}
.carrier-strip__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    flex-shrink: 0;
}
.carrier-strip__carriers {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}
/* De chip stond alleen goed op een donkere ondergrond; op een lichte sectie
   werd lichtgrijs op wit. Basis is nu licht, de donkere variant staat eronder. */
.carrier-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: 5px var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-700);
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}
.carrier-chip:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
}
.section--dark .carrier-chip,
.page-hero .carrier-chip,
.hero .carrier-chip {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
    color: var(--color-neutral-300);
}
.section--dark .carrier-chip:hover,
.page-hero .carrier-chip:hover,
.hero .carrier-chip:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
}
.carrier-chip__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.carrier-chip__dot--blue { background: var(--color-blue-400); }
.carrier-chip__dot--purple { background: var(--color-purple-400); }
.carrier-chip__dot--teal { background: var(--color-teal-400); }
.carrier-chip__dot--green { background: var(--color-green-400); }
.carrier-chip__dot--orange { background: #f97316; }
.carrier-chip__dot--red { background: #ef4444; }

@media (max-width: 768px) {
    .hero-usp-trio { gap: var(--space-3); }
    .hero-usp-chip { padding: var(--space-3) var(--space-4); }
    .hero-usp-chip__title { font-size: 0.8rem; }
    .carrier-strip__inner { gap: var(--space-4); }
    .carrier-strip__carriers { gap: var(--space-2); }
}

/* ============================================================
   SHARED PAGE COMPONENTS (urgency-block, steps-list, highlight-split,
   cta-inline, tech-card__title, prose, card--glass) — used across
   page-nis2-checklist, page-snel-zakelijk-internet, page-cloud-connect,
   page-datakaarten, page-overname-verbinding, page-voip-telefonie,
   page-zorg, page-logistiek, page-notaris-accountant,
   page-providers-vergelijken, page-5g-vs-starlink
   ============================================================ */

/* Glass card modifier */
.card--glass {
    background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(248,250,252,0.55));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235, 0.12);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.6);
}
.section--dark .card--glass {
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.06));
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--color-neutral-100);
}

/* Prose wrapper (long-form article text, e.g. NIS2, kennisbank H3 chapters) */
.prose {
    color: var(--color-neutral-700);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
}
.prose h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
}
.prose h4 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
}
.prose p + p { margin-top: var(--space-4); }
.prose ul, .prose ol {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }
.prose strong { color: var(--color-neutral-900); font-weight: var(--weight-semibold); }
.prose a {
    color: var(--color-blue-600);
    text-decoration: underline;
    text-decoration-color: rgba(37,99,235,0.25);
    text-underline-offset: 3px;
}
.prose a:hover { color: var(--color-purple-600); text-decoration-color: currentColor; }
.section--dark .prose {
    color: var(--color-neutral-300);
}
.section--dark .prose h3, .section--dark .prose h4, .section--dark .prose strong {
    color: var(--color-white);
}

/* Tech-card title (h3 inside tech-card) */
.tech-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-2);
    line-height: var(--leading-tight);
}
.section--dark .tech-card__title { color: var(--color-white); }

/* Urgency block — for NIS2, critical-info callouts */
.urgency-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--color-red-500);
    align-items: flex-start;
}
.urgency-block__icon {
    font-size: 48px;
    color: var(--color-red-500);
    line-height: 1;
    flex-shrink: 0;
}
.urgency-block__content { min-width: 0; }
.urgency-block__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-4);
    line-height: var(--leading-tight);
}
.urgency-item {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.12);
}
.urgency-item__number {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-red-600);
    line-height: 1.1;
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
}
.urgency-item__label {
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
    line-height: var(--leading-snug);
}

/* Steps list (4-stappenplan, roadmap, proces) */
.steps-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: relative;
}
.steps-list::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 44px;
    bottom: 44px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-blue-300), var(--color-purple-300), var(--color-teal-300));
    opacity: 0.35;
    z-index: 0;
}
.step-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-5);
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.step-item__number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-cta);
    color: var(--color-white);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-btn-primary);
    font-variant-numeric: tabular-nums;
}
.step-item__content {
    padding: var(--space-5) var(--space-6);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
}
.step-item__content h3,
.step-item__content h4 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-2);
    line-height: var(--leading-tight);
}
.step-item__content p {
    color: var(--color-neutral-600);
    line-height: var(--leading-relaxed);
}
.step-item__content p + p { margin-top: var(--space-3); }
.step-item__tech {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-purple-700);
    background: var(--color-purple-100);
    border-radius: var(--radius-full);
    letter-spacing: var(--tracking-wide);
}
.section--dark .step-item__content {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--color-neutral-200);
}
.section--dark .step-item__content h3,
.section--dark .step-item__content h4 { color: var(--color-white); }
.section--dark .step-item__content p { color: var(--color-neutral-300); }

/* Highlight split — hero-achtige intro met 2 kolommen content/visual */
.highlight-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}
.highlight-split__content h2 {
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-4);
}
.highlight-split__content p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
}
.highlight-split__content p + p { margin-top: var(--space-4); }
.highlight-split__visual {
    padding: var(--space-8);
    background: linear-gradient(135deg, var(--color-blue-50), var(--color-purple-100));
    border-radius: var(--radius-2xl, 24px);
    border: 1px solid var(--color-blue-100);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.highlight-split__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.highlight-split__visual > * { position: relative; z-index: 1; }
.section--dark .highlight-split__content h2 { color: var(--color-white); }
.section--dark .highlight-split__content p { color: var(--color-neutral-300); }
.section--dark .highlight-split__visual {
    background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.1));
    border-color: rgba(255,255,255,0.08);
}

/* Inline CTA — midden-in-pagina call to action */
.cta-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8);
    background: var(--gradient-cta);
    border-radius: var(--radius-xl);
    color: var(--color-white);
    box-shadow: var(--shadow-btn-primary);
    flex-wrap: wrap;
}
.cta-inline__text {
    flex: 1;
    min-width: 240px;
}
.cta-inline h3, .cta-inline__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-white);
    margin-bottom: var(--space-2);
    line-height: var(--leading-tight);
}
.cta-inline p, .cta-inline__subtitle {
    color: rgba(255,255,255,0.88);
    line-height: var(--leading-relaxed);
    margin: 0;
}
.cta-inline .btn--white,
.cta-inline .btn--secondary {
    background: var(--color-white);
    color: var(--color-blue-700);
    border: none;
}
.cta-inline .btn--white:hover {
    background: var(--color-blue-50);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 900px) {
    .urgency-block {
        grid-template-columns: 1fr;
        padding: var(--space-6);
    }
    .urgency-block__icon { font-size: 40px; }
    .highlight-split {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .highlight-split__visual { order: -1; }
    .cta-inline { text-align: center; }
    .cta-inline__text { min-width: 0; }
}
@media (max-width: 600px) {
    .steps-list::before { left: 18px; top: 40px; bottom: 40px; }
    .step-item {
        grid-template-columns: 40px 1fr;
        gap: var(--space-3);
    }
    .step-item__number {
        width: 36px;
        height: 36px;
        font-size: var(--text-base);
    }
    .step-item__content { padding: var(--space-4); }
    .urgency-block__title { font-size: var(--text-xl); }
    .urgency-item__number { font-size: var(--text-xl); }
}

/* Comparison table (providers-vergelijken, 5g-vs-starlink) */
.comparison-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-card);
    background: var(--color-white);
    margin: var(--space-6) 0;
}
.comparison-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.comparison-table thead {
    background: var(--gradient-cta);
    color: var(--color-white);
}
.comparison-table th {
    padding: var(--space-4) var(--space-3);
    text-align: left;
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.12);
}
.comparison-table th:last-child { border-right: none; }
.comparison-table td {
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-neutral-100);
    border-right: 1px solid var(--color-neutral-100);
    vertical-align: middle;
    line-height: var(--leading-snug);
    color: var(--color-neutral-700);
}
.comparison-table td:last-child { border-right: none; }
.comparison-table tbody tr:nth-child(even) { background: var(--color-neutral-50); }
.comparison-table tbody tr:hover { background: var(--color-blue-50); }
.comparison-table tr.is-connectsure,
.comparison-table tr.comparison-table__highlight {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02)) !important;
    font-weight: var(--weight-medium);
}
.comparison-table tr.is-connectsure td,
.comparison-table tr.comparison-table__highlight td {
    border-bottom: 2px solid var(--color-green-400);
}
.comparison-table__badge-yes {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-green-100, #d1fae5);
    color: var(--color-green-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.comparison-table__badge-no {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.comparison-table__hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
    margin-top: var(--space-2);
    font-style: italic;
}

/* Pricing card (snel-zakelijk-internet, datakaarten, etc) */
.pricing-card {
    position: relative;
    padding: var(--space-7);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: all var(--duration-base) var(--ease-out-quart);
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-blue-200);
}
.pricing-card--featured {
    border: 2px solid var(--color-blue-500);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
    transform: translateY(-4px);
}
.pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    background: var(--gradient-cta);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-btn-primary);
}
.pricing-card__type {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-700);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-3);
}
.pricing-card__price {
    font-size: var(--text-4xl, 2.25rem);
    font-weight: var(--weight-extrabold);
    color: var(--color-neutral-900);
    line-height: 1;
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
}
.pricing-card__price span,
.pricing-card__price small {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-500);
    margin-left: 4px;
}
.pricing-card__desc {
    color: var(--color-neutral-600);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-5);
}
.pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    flex: 1;
}
.pricing-card__features li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
}
.pricing-card__features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--color-green-500);
    font-weight: var(--weight-bold);
}
.pricing-card__footnote {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    line-height: var(--leading-snug);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-100);
}

/* Check-list voor compliance (NIS2 10 punten, checklist-achtige content) */
.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.check-list li,
.check-list__item {
    position: relative;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-6) + var(--space-4));
    background: var(--color-neutral-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-green-500);
    color: var(--color-neutral-700);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.check-list li::before {
    content: '\2713';
    position: absolute;
    left: var(--space-4);
    top: var(--space-3);
    color: var(--color-green-600);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
}

/* Tech-card __checklist-item, __suitability, __meta (NIS2-service-matrix, tech-variants) */
.tech-card__checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
}
.tech-card__checklist-item i {
    color: var(--color-green-500);
    flex-shrink: 0;
    margin-top: 3px;
}
.tech-card__suitability {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-blue-700);
    background: var(--color-blue-50);
    border-radius: var(--radius-full);
    margin-top: var(--space-3);
}
.tech-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-neutral-100);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

/* Split-section (variant van highlight-split met smaller visual) */
.split-section {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-12);
    align-items: center;
}
.split-section__content h2 {
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
    color: var(--color-neutral-900);
}
.split-section__content p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-700);
}
.split-section__visual {
    padding: var(--space-6);
    background: var(--color-neutral-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-100);
}
@media (max-width: 900px) {
    .split-section { grid-template-columns: 1fr; gap: var(--space-6); }
    .split-section__visual { order: -1; }
    .pricing-card--featured { transform: none; }
}

/* About-stat — auteurspagina */
/* Icoon links, daarnaast het getal met het label eronder. Als flex-rij stonden
   getal en label naast elkaar en liep het label buiten de kaart. */
.about-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icoon nummer"
        "icoon label";
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.about-stat__icon   { grid-area: icoon; }
.about-stat__number { grid-area: nummer; }
.about-stat__label  { grid-area: label; }
.about-stat__icon {
    font-size: 32px;
    color: var(--color-blue-600);
    flex-shrink: 0;
}
.about-stat__number {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-neutral-900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.about-stat__label {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-top: 2px;
}

/* ============================================================
   Lang Switcher — header language toggle (EN | NL)
   ============================================================ */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
}

.lang-switcher__active {
    color: var(--color-blue-600);
    cursor: default;
    letter-spacing: var(--tracking-wide);
}

.lang-switcher__sep {
    color: var(--color-neutral-300);
    font-weight: var(--weight-normal);
    user-select: none;
}

.lang-switcher__link {
    color: var(--color-neutral-500);
    text-decoration: none;
    letter-spacing: var(--tracking-wide);
    transition: color var(--transition-fast);
}

.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
    color: var(--color-blue-600);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.lang-switcher__link:focus-visible {
    outline: 2px solid var(--color-blue-400);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Hide lang switcher on pages without an alternate-language counterpart */
.lang-switcher:empty {
    display: none;
}

@media (max-width: 480px) {
    .lang-switcher {
        font-size: var(--text-xs);
    }
}

/* ============================================================
   HEADER SEARCH TOGGLE
   ============================================================ */
.header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    color: var(--color-neutral-200);
    font-size: 18px;
    cursor: pointer;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    flex-shrink: 0;
}
.header__search-toggle:hover,
.header__search-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--color-white);
}
.header__search-toggle:focus-visible {
    outline: 2px solid var(--color-blue-400);
    outline-offset: 2px;
}

/* ============================================================
   SEARCH OVERLAY — fullscreen modal met inline dropdown op desktop
   ============================================================ */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}
.search-overlay[hidden] { display: none; }

.search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 11, 0.75);
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.search-overlay__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    margin: 0 var(--space-4);
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    animation: search-panel-in 0.18s var(--ease-out-quart) both;
}
@keyframes search-panel-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.search-overlay__form { display: flex; flex-direction: column; }

.search-overlay__input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.search-overlay__icon {
    font-size: 20px;
    color: var(--color-neutral-400);
    flex-shrink: 0;
}
.search-overlay__input {
    flex: 1;
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-white);
    caret-color: var(--color-blue-400);
}
.search-overlay__input:focus-visible {
    outline: 2px solid var(--color-primary, #1a365d);
    outline-offset: 2px;
}
.search-overlay__input::placeholder { color: var(--color-neutral-500); }

.search-overlay__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-neutral-400);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.search-overlay__close:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-white); }
.search-overlay__close:focus-visible { outline: 2px solid var(--color-blue-400); outline-offset: 2px; }

/* Suggestions list */
.search-overlay__suggestions {
    list-style: none;
    padding: var(--space-2) 0;
    max-height: 340px;
    overflow-y: auto;
}
.search-overlay__suggestions:empty { display: none; }

.search-overlay__suggestion {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
}
.search-overlay__suggestion:hover,
.search-overlay__suggestion[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.06);
}
.search-overlay__suggestion__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.15);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--color-blue-400);
    flex-shrink: 0;
}
.search-overlay__suggestion__body {
    flex: 1;
    min-width: 0;
}
.search-overlay__suggestion__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-overlay__suggestion strong {
    color: var(--color-blue-300);
    font-weight: var(--weight-semibold);
}
.search-overlay__suggestion__type {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}
.search-overlay__suggestion-link {
    display: contents;
    text-decoration: none;
}

/* Divider + footer */
.search-overlay__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.search-overlay__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--gradient-primary, linear-gradient(135deg, #2563eb, #1d4ed8));
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity var(--duration-fast) ease;
}
.search-overlay__submit:hover { opacity: 0.88; }
.search-overlay__submit:focus-visible { outline: 2px solid var(--color-blue-400); outline-offset: 2px; }

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */

/* Hero */
.search-hero { padding: var(--space-16) 0 var(--space-12); text-align: center; }
.search-hero__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-300);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-4);
}
.search-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--weight-bold);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}
.search-hero__query { color: var(--color-blue-300); }
.search-hero__count {
    font-size: var(--text-base);
    color: var(--color-neutral-400);
    margin-bottom: var(--space-8);
}

/* Inline search form (reused by 404 too) */
.search-hero__form { max-width: 560px; margin: 0 auto; }
.search-hero__input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--duration-fast) ease;
}
.search-hero__input-wrap:focus-within {
    border-color: var(--color-blue-500);
    background: rgba(255, 255, 255, 0.08);
}
.search-hero__input-wrap > i {
    font-size: 18px;
    color: var(--color-neutral-400);
    flex-shrink: 0;
}
.search-hero__input {
    flex: 1;
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-white);
    caret-color: var(--color-blue-400);
}
.search-hero__input:focus-visible {
    outline: 2px solid var(--color-primary, #1a365d);
    outline-offset: 2px;
}
.search-hero__input::placeholder { color: var(--color-neutral-500); }
.search-hero__btn {
    padding: var(--space-2) var(--space-4);
    background: var(--color-blue-600);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) ease;
}
.search-hero__btn:hover { background: var(--color-blue-500); }

/* Filter tabs */
.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-neutral-100);
}
.search-filter {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-600);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--duration-fast) ease;
}
.search-filter:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
}
.search-filter--active {
    background: var(--color-blue-600);
    border-color: var(--color-blue-600);
    color: var(--color-white);
}

/* Results section */
.search-results-section {
    padding: var(--space-12) 0 var(--space-16);
    background: var(--color-neutral-50);
}
.search-result-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }

.search-result {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.search-result:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--color-blue-200);
}
.search-result__meta { margin-bottom: var(--space-2); }

/* Type badges */
.search-result__badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.search-result__badge--dienst    { background: rgba(37, 99, 235, 0.10);  color: #2563eb; }
.search-result__badge--kennisbank { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }
.search-result__badge--geo       { background: rgba(16, 185, 129, 0.10); color: #059669; }
.search-result__badge--vergelijking { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.search-result__badge--branche   { background: rgba(236, 72, 153, 0.10); color: #be185d; }

.search-result__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}
.search-result__title a {
    color: var(--color-neutral-900);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}
.search-result__title a:hover { color: var(--color-blue-600); }
.search-result__title mark,
.search-result__snippet mark {
    background: rgba(37, 99, 235, 0.12);
    color: var(--color-blue-700);
    border-radius: 3px;
    padding: 0 2px;
}
.search-result__snippet {
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    line-height: 1.65;
    margin-bottom: var(--space-3);
}
.search-result__url {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
    font-family: var(--font-mono, monospace);
}

/* Pagination */
.search-results__pagination { margin-top: var(--space-10); }

/* Empty state */
.search-empty {
    text-align: center;
    padding: var(--space-16) 0 var(--space-8);
}
.search-empty__icon {
    font-size: 56px;
    color: var(--color-neutral-300);
    margin-bottom: var(--space-4);
}
.search-empty__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-800);
    margin-bottom: var(--space-3);
}
.search-empty__text {
    font-size: var(--text-base);
    color: var(--color-neutral-500);
    max-width: 480px;
    margin: 0 auto var(--space-10);
}
.search-empty__popular { margin-bottom: var(--space-8); }
.search-empty__popular-label {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-4);
    text-align: left;
}
.search-popular-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}
.search-popular-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-neutral-700);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: all var(--duration-fast) ease;
}
.search-popular-list a:hover { border-color: var(--color-blue-300); color: var(--color-blue-700); background: var(--color-blue-50); }
.search-popular-list i { font-size: 14px; color: var(--color-blue-400); }
.search-popular-list__badge {
    margin-left: auto;
    padding: 1px 8px;
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
    background: var(--color-neutral-100);
    border-radius: var(--radius-full);
}
.search-empty__contact {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}
.search-empty__contact a { color: var(--color-blue-600); }

/* ============================================================
   404 ERROR PAGE
   ============================================================ */
.error-404-hero { min-height: 75vh; display: flex; align-items: center; padding: var(--space-16) 0; }
.error-404 { text-align: center; max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.error-404__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-full);
    color: #ef4444;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-6);
}
.error-404__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--weight-extrabold);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}
.error-404__text {
    font-size: var(--text-lg);
    color: var(--color-neutral-300);
    margin-bottom: var(--space-8);
    line-height: 1.65;
}

/* Suggestions from URI fragments */
.error-404__suggestions { margin-bottom: var(--space-8); }
.error-404__suggestions-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-300);
    margin-bottom: var(--space-4);
}
.error-404__suggestion-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.error-404__suggestion-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    color: var(--color-neutral-200);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: all var(--duration-fast) ease;
}
.error-404__suggestion-link:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.4);
    color: var(--color-white);
}
.error-404__suggestion-arrow { margin-left: auto; opacity: 0.5; }
.error-404__suggestion-link:hover .error-404__suggestion-arrow { opacity: 1; transform: translateX(3px); }

/* Search bar (reuses .search-hero__input-wrap) */
.error-404__search { max-width: 480px; margin: 0 auto var(--space-8); }

/* Action buttons */
.error-404__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Popular pages grid */
.error-404-popular {
    padding: var(--space-12) 0;
    background: var(--color-neutral-50);
}
.error-404-popular__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-8);
}
.error-404-popular__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--duration-fast) ease;
}
.error-404-popular__card:hover {
    border-color: var(--color-blue-300);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}
.error-404-popular__type {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.error-404-popular__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-800);
    line-height: 1.4;
    flex: 1;
}
.error-404-popular__arrow {
    font-size: 14px;
    color: var(--color-neutral-400);
    margin-top: auto;
    transition: transform var(--duration-fast) ease;
}
.error-404-popular__card:hover .error-404-popular__arrow { transform: translateX(3px); color: var(--color-blue-500); }

/* Contact strip */
.error-404-contact {
    padding: var(--space-10) 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-neutral-100);
}
.error-404-contact__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.error-404-contact__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.08);
    border-radius: var(--radius-lg);
    font-size: 26px;
    color: var(--color-blue-600);
    flex-shrink: 0;
}
.error-404-contact__content { flex: 1; min-width: 200px; }
.error-404-contact__content h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.error-404-contact__content p  { font-size: var(--text-sm); color: var(--color-neutral-500); }
.error-404-contact__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.error-404-contact__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: all var(--duration-fast) ease;
}
.error-404-contact__link--phone {
    background: var(--color-blue-600);
    color: var(--color-white);
}
.error-404-contact__link--phone:hover { background: var(--color-blue-700); }
.error-404-contact__link--email {
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
    border: 1px solid var(--color-neutral-200);
}
.error-404-contact__link--email:hover { background: var(--color-neutral-200); }

@media (max-width: 640px) {
    .error-404-contact__inner { flex-direction: column; text-align: center; align-items: center; }
    .error-404-popular__grid { grid-template-columns: 1fr 1fr; }
    .search-filters { gap: var(--space-2); }
    .search-overlay__panel { margin: 0 var(--space-3); }
    .search-overlay { padding-top: 60px; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-6);
    background: rgba(15, 29, 54, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xl);
    color: var(--color-neutral-200);
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    z-index: 9999;
    display: none;
    animation: cookieSlideUp 400ms var(--ease-out-quart);
}
.cookie-banner.is-visible { display: block; }
.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.cookie-banner__text {
    flex: 1;
    min-width: 240px;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}
.cookie-banner__text strong { color: var(--color-white); }
.cookie-banner__text a { color: var(--color-purple-300); text-decoration: underline; }
.cookie-banner__buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cookie-banner__btn {
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    border: none;
}
.cookie-banner__btn--reject {
    background: rgba(255,255,255,0.08);
    color: var(--color-neutral-200);
}
.cookie-banner__btn--reject:hover { background: rgba(255,255,255,0.14); }
.cookie-banner__btn--accept {
    background: var(--gradient-cta);
    color: var(--color-white);
}
.cookie-banner__btn--accept:hover { box-shadow: var(--shadow-glow-blue); }

@keyframes cookieSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 600px) {
    .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: var(--space-4); }
    .cookie-banner__buttons { width: 100%; }
    .cookie-banner__btn { flex: 1; }
}

/* ============================================================
   TRUST STRIP — over-ons KvK / onafhankelijkheid / wholesale
   ============================================================ */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
}
.trust-strip__item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.trust-strip__item i {
    font-size: 1.5rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.trust-strip__item strong {
    display: block;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 2px;
}
.trust-strip__item span {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* .visually-hidden utility — voor a11y skip-content in andere features */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   CSS HELPERS — DRY vervangers voor herhaalde inline-styles
   ============================================================ */

/* Lead text in dark/hero context */
.section--dark .lead,
.page-hero .lead,
.hero .lead { color: var(--color-neutral-400, #a1a1aa); }

/* Full-width button */
.btn--block { width: 100%; }

/* Gradient sweep text */
.text-gradient-sweep {
    background: var(--gradient-cta, linear-gradient(135deg, #38a169, #2f855a));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Icon color states */
.icon--negative { color: var(--color-red-400, #f87171); }
.icon--positive { color: var(--color-green-500, #10b981); }

/* Inline success tag */
.tag--success {
    background: var(--color-green-500, #10b981);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Highlighted row in comparison tables */
.comparison-table tr.tr--highlighted,
.comparison-table .tr--highlighted {
    background: linear-gradient(90deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02));
}

/* Carrier tag spacing inside cards */
.card .carrier-tag {
    display: inline-block;
    margin-top: var(--space-3);
}

/* Kennisbank icon color variants */
.kennisbank-card__icon--blue   { background: rgba(59,130,246,0.1); color: #1d4ed8; }
.kennisbank-card__icon--purple { background: rgba(147,51,234,0.1); color: #6b21a8; }
.kennisbank-card__icon--teal   { background: rgba(20,184,166,0.1); color: #0f766e; }
.kennisbank-card__icon--green  { background: rgba(16,185,129,0.1); color: #047857; }
.kennisbank-card__icon--orange { background: rgba(249,115,22,0.1); color: #c2410c; }

/* ============================================================
   CONTAINER NARROW — generic prose/legal pages
   ============================================================ */
.container--narrow {
    max-width: 760px;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* ============================================================
   PROSE — long-form content wrapper (page.php, single.php)
   Extends the existing .prose block with missing elements.
   ============================================================ */

/* h2 (not yet covered by existing .prose rules) */
.prose h2 {
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 1.875rem);
    font-weight: var(--weight-bold);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    color: var(--color-neutral-900);
}

/* blockquote */
.prose blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 4px solid var(--color-primary, #1a365d);
    background: var(--color-bg-light, #f7fafc);
    border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
    font-style: italic;
    color: var(--color-neutral-600);
}

/* inline code */
.prose code {
    background: var(--color-bg-light, #f7fafc);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* images */
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 16px);
    margin: var(--space-6) 0;
    display: block;
}

/* horizontal rule */
.prose hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: var(--space-8) 0;
}

/* tables */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
}
.prose th,
.prose td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    line-height: var(--leading-relaxed);
}
.prose th {
    background: var(--color-bg-light, #f7fafc);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
}

/* section--prose spacing override */
.section--prose { padding-block: var(--space-12); }

/* ============================================================
   POST META & BREADCRUMB (single.php)
   ============================================================ */
.post-breadcrumb {
    margin-bottom: var(--space-4);
}
.post-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}
.post-breadcrumb a:hover { color: var(--color-white); }

.post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid #e2e8f0;
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}
.post-meta__author,
.post-meta__date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ============================================================
   LEGAL PAGES — page-voorwaarden.php, page-privacy.php
   ============================================================ */
.legal-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    color: var(--color-neutral-500);
    font-size: var(--text-sm);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid #e2e8f0;
}

.legal-section {
    margin-bottom: var(--space-12);
}
.legal-section h2 {
    font-size: 1.375rem;
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
    color: var(--color-neutral-900);
    border-left: 4px solid var(--color-primary, #1a365d);
    padding-left: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    line-height: var(--leading-snug);
}
.legal-section h3 {
    font-size: 1.0625rem;
    font-weight: var(--weight-semibold);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    color: var(--color-neutral-800);
}
.legal-section p {
    margin-bottom: var(--space-4);
    line-height: 1.7;
    color: var(--color-neutral-700);
}

.legal-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--space-4);
}
.legal-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    line-height: 1.6;
    color: var(--color-neutral-700);
    font-size: var(--text-base);
}
.legal-list li i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-primary, #1a365d);
}
.legal-list--plain li i { color: var(--color-neutral-500); }

.legal-contact-block {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--color-bg-light, #f7fafc);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid #e2e8f0;
    line-height: 1.8;
}
.legal-contact-block p { margin-bottom: var(--space-2); color: var(--color-neutral-700); }
.legal-contact-block p:last-child { margin-bottom: 0; }

.legal-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    margin-top: var(--space-6);
    background: rgba(26, 54, 93, 0.04);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid rgba(26, 54, 93, 0.1);
}
.legal-callout > i {
    font-size: 1.5rem;
    color: var(--color-primary, #1a365d);
    margin-top: 2px;
}
.legal-callout p {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    line-height: 1.6;
}

/* ============================================================
   RESPONSIVE COMPARISON TABLE WRAPPER
   ============================================================ */
.comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-6) 0;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid #e2e8f0;
}
.comparison-table--responsive {
    min-width: 760px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.comparison-table--responsive thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg-light, #f7fafc);
    font-weight: 700;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 2px solid var(--color-primary, #1a365d);
    white-space: nowrap;
}
.comparison-table--responsive tbody td,
.comparison-table--responsive tbody th {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
    font-size: 0.9375rem;
}
.comparison-table--responsive tbody th {
    font-weight: 600;
    background: #fafbfc;
    position: sticky;
    left: 0;
    z-index: 1;
}
.comparison-table--responsive tbody tr:last-child td,
.comparison-table--responsive tbody tr:last-child th { border-bottom: 0; }

@media (max-width: 720px) {
    .comparison-table-wrapper::after {
        content: "\2190 Veeg horizontaal voor meer \2192";
        display: block;
        text-align: center;
        padding: var(--space-2);
        background: var(--color-bg-light);
        color: var(--color-text-muted);
        font-size: 0.8125rem;
        border-top: 1px solid #e2e8f0;
    }
}

/* Footnote below comparison table */
.comparison-table-footnote {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-top: var(--space-4);
}

/* ============================================================
   COMPARISON SUMMARY (mobile-first teaser above table)
   ============================================================ */
.comparison-summary {
    padding: var(--space-6);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}
.comparison-summary__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: #fff;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    border: 1px solid #e2e8f0;
}
.comparison-summary__item--highlight {
    border-color: var(--color-accent, #38a169);
    border-width: 2px;
}
.comparison-summary__item i {
    font-size: 1.5rem;
    color: var(--color-accent, #38a169);
}
.comparison-summary__item strong { font-weight: 700; }
.comparison-summary__item span {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}
.comparison-summary > p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* ============================================================
   HERO TITLE ACCENT — gradient text (replaces inline style)
   ============================================================ */
.hero__title-accent {
    background: linear-gradient(135deg, #38bdf8, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@media (forced-colors: active) {
    .hero__title-accent {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: currentColor;
    }
}

/* ============================================================
   WAVE 2 — FASE 1 (april 2026)
   12 component-varianten voor non-home pages.
   Mobile-first; gebruikt bestaande tokens uit variables.css.
   Toegepast door Agent H op page-templates (separate task).
   ============================================================ */

/* === 1. HERO--SERVICE === */
.hero--service { --hero-orb-blur: 80px; }
.hero--service .page-hero__bg::before,
.hero--service .page-hero__bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--hero-orb-blur));
    opacity: 0.45;
    pointer-events: none;
    will-change: transform;
}
.hero--service .page-hero__bg::before {
    inset: -10% auto auto -5%;
    width: min(480px, 60vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--color-blue-500), transparent 60%);
}
.hero--service .page-hero__bg::after {
    inset: auto -10% -20% auto;
    width: min(560px, 70vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--color-purple-600), transparent 60%);
}
.hero--service .page-hero__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
}
.hero--service__aside { width: 100%; max-width: 420px; margin-inline: auto; }
@media (min-width: 900px) {
    .hero--service .page-hero__container {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: var(--space-12);
    }
    .hero--service__aside { margin-inline: 0; }
}
@media (forced-colors: active) {
    .hero--service .page-hero__bg::before,
    .hero--service .page-hero__bg::after { display: none; }
}

/* === 2. HERO--BRANCHE === */
.hero--branche { --branche-accent: var(--color-blue-500); --branche-bg: rgba(37, 99, 235, 0.18); }
.hero--branche[data-branche="zorg"]      { --branche-accent: var(--accent-zorg);      --branche-bg: var(--accent-zorg-bg); }
.hero--branche[data-branche="horeca"]    { --branche-accent: var(--accent-horeca);    --branche-bg: var(--accent-horeca-bg); }
.hero--branche[data-branche="juridisch"] { --branche-accent: var(--accent-juridisch); --branche-bg: var(--accent-juridisch-bg); }
.hero--branche[data-branche="logistiek"] { --branche-accent: var(--accent-logistiek); --branche-bg: var(--accent-logistiek-bg); }
.hero--branche[data-branche="productie"] { --branche-accent: var(--accent-productie); --branche-bg: var(--accent-productie-bg); }
.hero--branche[data-branche="bouw"]      { --branche-accent: var(--accent-bouw);      --branche-bg: var(--accent-bouw-bg); }
.hero--branche .page-hero__bg::before {
    content: "";
    position: absolute;
    inset: -10% auto auto -10%;
    width: min(560px, 75vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--branche-bg), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
}
.hero--branche .section__label {
    background: color-mix(in srgb, var(--branche-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--branche-accent) 32%, transparent);
    color: var(--color-white);
}
.hero--branche .section__label i { color: var(--branche-accent); }
.hero--branche .hero--branche__divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--branche-accent), transparent);
    border-radius: var(--radius-full);
    margin-top: var(--space-6);
}
@media (forced-colors: active) {
    .hero--branche .page-hero__bg::before { display: none; }
}

/* === 3. HERO--GEO === */
.hero--geo .page-hero__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}
.hero--geo__aside { width: 100%; max-width: 360px; margin-inline: auto; }
.hero--geo__city-icon {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-2xl);
    background: var(--gradient-cta);
    display: grid;
    place-items: center;
    color: var(--color-white);
    font-size: 2rem;
    box-shadow: var(--shadow-glow-blue);
    margin-bottom: var(--space-4);
}
.hero--geo__city-icon i { font-size: 2.25rem; }
@media (min-width: 900px) {
    .hero--geo .page-hero__container {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--space-10);
    }
    .hero--geo__aside { margin-inline: 0; }
}

.hero--geo__context-card {
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    backdrop-filter: var(--glass-blur);
    color: var(--color-white);
}
.hero--geo__context-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}
.hero--geo__context-card dt {
    color: var(--color-neutral-400);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
}
.hero--geo__context-card dd {
    color: var(--color-white);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    margin: 0;
}
.hero--geo__context-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.hero--geo__context-card__title i {
    color: var(--color-teal-400);
    font-size: 1.1em;
}

/* === 4. HERO--KENNISBANK === */
.hero--kennisbank { padding-bottom: var(--space-8); }
.hero--kennisbank .page-hero__content { max-width: var(--container-narrow); }
.hero--kennisbank .page-hero__subtitle {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
}

/* === 5. ARTICLE-AUTHOR-STRIP === */
.article-author-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--glass-border-dark);
}
.article-author-strip__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--gradient-cta);
    display: grid;
    place-items: center;
    color: var(--color-white);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    flex-shrink: 0;
    overflow: hidden;
}
.article-author-strip__avatar img { width: 100%; height: 100%; object-fit: cover; }
.article-author-strip__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.article-author-strip__name {
    color: var(--color-white);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
}
.article-author-strip__name a { color: inherit; text-decoration: none; }
.article-author-strip__name a:hover { color: var(--color-purple-300); }
.article-author-strip__meta {
    color: var(--color-neutral-300);
    font-size: var(--text-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.article-author-strip__meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-author-strip__meta i { color: var(--color-blue-300); font-size: 1em; }
.article-author-strip--sticky {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-above);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: var(--glass-blur);
    border-top: none;
    border-bottom: 1px solid var(--color-neutral-100);
    padding: var(--space-3) var(--space-4);
    margin-top: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.article-author-strip--sticky .article-author-strip__name { color: var(--color-neutral-900); }
.article-author-strip--sticky .article-author-strip__meta { color: var(--color-neutral-500); }
.article-author-strip--sticky .article-author-strip__meta i { color: var(--color-blue-600); }
@media (prefers-reduced-motion: reduce) {
    .article-author-strip--sticky { position: static; }
}

/* === 6. DECISION-STRIP === */
.decision-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    position: relative;
    z-index: 3;
}
.decision-strip--lifted { margin-top: 0; }
@media (min-width: 900px) {
    .decision-strip--lifted { margin-top: calc(var(--space-12) * -1); }
}
.decision-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-neutral-100);
    border-top: 4px solid var(--card-accent, var(--card-accent-decision));
    transition: transform var(--duration-base) var(--ease-out-quart),
                box-shadow var(--duration-base) var(--ease-out-quart);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.decision-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.decision-card__profile {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-500);
}
.decision-card__advice {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    line-height: var(--leading-snug);
}
.decision-card__rationale {
    font-size: var(--text-base);
    color: var(--color-neutral-600);
    line-height: var(--leading-relaxed);
}
.decision-card__match {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-green-700);
    margin-top: auto;
}
.decision-card__match i { font-size: 1em; }
.decision-card--balanced { --card-accent: var(--card-accent-decision); }
.decision-card--coordination { --card-accent: var(--card-accent-coordination); }
.decision-card--capacity { --card-accent: var(--card-accent-capacity); }
@media (min-width: 768px) {
    .decision-strip { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

/* === 7. PROCESS-STRIP === */
.process-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    position: relative;
}
.process-strip__step {
    position: relative;
    z-index: 1;
    padding-left: var(--space-16);
}
.process-strip__number {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    border: 3px solid var(--color-blue-500);
    color: var(--color-blue-700);
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-card);
    z-index: 2;
}
.process-strip__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-2);
}
.process-strip__desc {
    color: var(--color-neutral-600);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.process-strip::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--gradient-fiber);
    z-index: 0;
}
@media (min-width: 900px) {
    .process-strip {
        grid-template-columns: repeat(var(--steps, 4), 1fr);
        gap: var(--space-6);
    }
    .process-strip__step {
        padding-left: 0;
        padding-top: var(--space-16);
        text-align: center;
    }
    .process-strip__number {
        left: 50%;
        transform: translateX(-50%);
        width: 64px;
        height: 64px;
        font-size: var(--text-2xl);
    }
    .process-strip::before {
        left: 8%;
        right: 8%;
        top: 32px;
        bottom: auto;
        width: auto;
        height: 2px;
    }
}
.section--dark .process-strip__number {
    background: var(--color-blue-900);
    border-color: var(--color-blue-400);
    color: var(--color-white);
}
.section--dark .process-strip__title { color: var(--color-white); }
.section--dark .process-strip__desc { color: var(--color-neutral-300); }
@media (forced-colors: active) {
    .process-strip::before { background: CanvasText; }
}

/* === 8. COORDINATION-CARD === */
.coordination-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(124, 58, 237, 0.06));
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
}
.coordination-card__header { margin-bottom: var(--space-6); }
.coordination-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-2);
}
.coordination-card__subtitle { color: var(--color-neutral-600); line-height: var(--leading-relaxed); }
.coordination-card__phases { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.coordination-phase {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border-left: 3px solid var(--card-accent-coordination);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.coordination-phase__week {
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--color-neutral-500);
    letter-spacing: var(--tracking-wider);
    font-weight: var(--weight-semibold);
}
.coordination-phase__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
}
.coordination-phase__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
}
.coordination-phase__split strong {
    color: var(--color-neutral-900);
    font-weight: var(--weight-semibold);
    margin-right: 4px;
}
@media (min-width: 768px) {
    .coordination-card { padding: var(--space-8); }
    .coordination-card__phases { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (min-width: 1024px) {
    .coordination-card__phases { grid-template-columns: repeat(4, 1fr); }
}
.section--dark .coordination-card {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(167, 139, 250, 0.08));
    border-color: rgba(147, 197, 253, 0.18);
}
.section--dark .coordination-card__title { color: var(--color-white); }
.section--dark .coordination-card__subtitle { color: var(--color-neutral-300); }
.section--dark .coordination-phase {
    background: var(--glass-bg-dark);
    border-color: var(--glass-border-dark);
    border-left-color: var(--color-purple-400);
}
.section--dark .coordination-phase__name { color: var(--color-white); }
.section--dark .coordination-phase__split { color: var(--color-neutral-300); }
.section--dark .coordination-phase__split strong { color: var(--color-white); }

/* === 9. CAPACITY-SIZING-CARD === */
.capacity-sizing-card {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-neutral-100);
    overflow: hidden;
}
.capacity-sizing-card__header {
    padding: var(--space-6);
    background: var(--gradient-cta);
    color: var(--color-white);
}
.capacity-sizing-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-white);
    margin-bottom: var(--space-2);
}
.capacity-sizing-card__intro {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.capacity-sizing-card__rows { display: flex; flex-direction: column; }
.capacity-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background var(--duration-fast) ease;
}
.capacity-row:last-child { border-bottom: none; }
.capacity-row:hover { background: var(--color-neutral-50); }
.capacity-row__speed {
    font-weight: var(--weight-bold);
    color: var(--color-blue-700);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xl);
}
.capacity-row__advice {
    color: var(--color-neutral-700);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.capacity-row__advice strong { color: var(--color-neutral-900); font-weight: var(--weight-semibold); }
.capacity-row__suitable {
    font-size: var(--text-sm);
    color: var(--color-green-700);
    font-weight: var(--weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.capacity-row__suitable i { font-size: 1em; }
@media (min-width: 720px) {
    .capacity-row {
        grid-template-columns: 120px minmax(0, 1fr) auto;
        gap: var(--space-6);
        align-items: center;
    }
    .capacity-row__speed { font-size: var(--text-2xl); }
}
@media (forced-colors: active) {
    .capacity-sizing-card__header {
        background: Highlight;
        color: HighlightText;
        forced-color-adjust: none;
    }
}

/* === 10. BRANCH-PATTERN-HEADER === */
.branch-pattern-header {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--pattern-opacity-subtle);
    background-repeat: repeat;
    background-size: 120px 120px;
    mix-blend-mode: screen;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.6) 1px, transparent 0);
    background-size: 20px 20px;
}
.branch-pattern-header--prominent { opacity: var(--pattern-opacity-prominent); }
.branch-pattern-header[data-branche="zorg"]      { background-image: radial-gradient(circle at 1px 1px, rgba(6, 182, 212, 0.7) 1.5px, transparent 0); background-size: 24px 24px; }
.branch-pattern-header[data-branche="horeca"]    { background-image: radial-gradient(circle at 1px 1px, rgba(249, 115, 22, 0.7) 1.5px, transparent 0); background-size: 24px 24px; }
.branch-pattern-header[data-branche="juridisch"] { background-image: radial-gradient(circle at 1px 1px, rgba(139, 92, 246, 0.7) 1.5px, transparent 0); background-size: 24px 24px; }
.branch-pattern-header[data-branche="logistiek"] { background-image: radial-gradient(circle at 1px 1px, rgba(37, 99, 235, 0.7) 1.5px, transparent 0); background-size: 24px 24px; }
.branch-pattern-header[data-branche="productie"] { background-image: radial-gradient(circle at 1px 1px, rgba(234, 88, 12, 0.7) 1.5px, transparent 0); background-size: 24px 24px; }
.branch-pattern-header[data-branche="bouw"]      { background-image: radial-gradient(circle at 1px 1px, rgba(161, 161, 170, 0.7) 1.5px, transparent 0); background-size: 24px 24px; }
@media (forced-colors: active) {
    .branch-pattern-header { display: none; }
}

/* === 11. GEO-PATTERN === */
.geo-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--pattern-opacity-prominent);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.55) 1px, transparent 0),
        radial-gradient(circle at 12px 12px, rgba(96, 165, 250, 0.35) 1.5px, transparent 0);
    background-size: 24px 24px, 48px 48px;
    background-position: 0 0, 0 0;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
}
.geo-pattern--subtle { opacity: var(--pattern-opacity-subtle); }
@media (forced-colors: active) {
    .geo-pattern { display: none; }
}

/* === 12. TIMELINE-STACK === */
.timeline-stack {
    position: relative;
    display: grid;
    gap: var(--space-8);
    padding-left: var(--space-8);
    list-style: none;
    margin: 0;
}
ol.timeline-stack { padding-inline-start: var(--space-8); }
.timeline-stack::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--gradient-fiber);
    z-index: 0;
}
.timeline-stack__item { position: relative; z-index: 1; }
.timeline-stack__dot {
    position: absolute;
    left: calc(var(--space-8) * -1 + 4px);
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--color-blue-500);
    border: 4px solid var(--color-white);
    box-shadow: var(--shadow-glow-blue);
}
.timeline-stack__date {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-neutral-500);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
}
.timeline-stack__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-2);
}
.timeline-stack__desc {
    color: var(--color-neutral-600);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
@media (min-width: 900px) {
    .timeline-stack {
        grid-template-columns: repeat(var(--items, 4), 1fr);
        padding-left: 0;
        gap: var(--space-6);
    }
    .timeline-stack::before {
        left: 8px;
        right: 8px;
        top: 8px;
        bottom: auto;
        width: auto;
        height: 2px;
    }
    .timeline-stack__item { padding-top: var(--space-6); }
    .timeline-stack__dot { left: 0; top: 0; }
}
.section--dark .timeline-stack__dot {
    background: var(--color-blue-400);
    border-color: var(--color-blue-900);
}
.section--dark .timeline-stack__title { color: var(--color-white); }
.section--dark .timeline-stack__desc { color: var(--color-neutral-300); }
.section--dark .timeline-stack__date { color: var(--color-neutral-400); }

/* === 13. FAQ-ACCORDION--STYLED === */
.faq-accordion--styled {
    display: grid;
    gap: var(--space-3);
    max-width: var(--container-narrow);
    margin-inline: auto;
}
.faq-accordion--styled .faq-accordion__item {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-base) var(--ease-out-quart),
                box-shadow var(--duration-base) var(--ease-out-quart),
                transform var(--duration-base) var(--ease-out-quart);
    overflow: hidden;
}
.faq-accordion--styled .faq-accordion__item:hover {
    border-color: var(--color-blue-200);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}
.faq-accordion--styled .faq-accordion__item[open] {
    border-color: var(--color-blue-300);
    box-shadow: var(--shadow-card-hover);
}
.faq-accordion--styled .faq-accordion__question {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5) var(--space-6);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-4);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}
.faq-accordion--styled .faq-accordion__question::-webkit-details-marker { display: none; }
.faq-accordion--styled .faq-accordion__question:focus-visible {
    outline: 2px solid var(--color-purple-400);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}
.faq-accordion--styled .faq-accordion__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-blue-50);
    color: var(--color-blue-600);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out-quart),
                background var(--duration-fast) ease;
}
.faq-accordion--styled .faq-accordion__icon::before {
    content: "+";
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    line-height: 1;
}
.faq-accordion--styled .faq-accordion__item[open] .faq-accordion__icon {
    transform: rotate(45deg);
    background: var(--color-blue-100);
}
.faq-accordion--styled .faq-accordion__answer {
    padding: 0 var(--space-6) var(--space-5);
    color: var(--color-neutral-600);
    line-height: var(--leading-relaxed);
}
.faq-accordion--styled .faq-accordion__answer p { margin-bottom: var(--space-3); }
.faq-accordion--styled .faq-accordion__answer p:last-child { margin-bottom: 0; }
.section--dark .faq-accordion--styled .faq-accordion__item {
    background: var(--glass-bg-dark);
    border-color: var(--glass-border-dark);
    backdrop-filter: var(--glass-blur);
}
.section--dark .faq-accordion--styled .faq-accordion__question { color: var(--color-white); }
.section--dark .faq-accordion--styled .faq-accordion__answer { color: var(--glass-text-dark); }
.section--dark .faq-accordion--styled .faq-accordion__icon {
    background: rgba(96, 165, 250, 0.18);
    color: var(--color-blue-200);
}
@media (prefers-reduced-motion: reduce) {
    .faq-accordion--styled .faq-accordion__item,
    .faq-accordion--styled .faq-accordion__icon,
    .decision-card,
    .capacity-row { transition: none; }
}

/* ============================================================
   WAVE-3 TRUST PAGES — author-hero, legal-hero
   ============================================================ */

/* === 14. AUTHOR-HERO === */
.author-hero .page-hero__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}
.author-hero__avatar-side {
    display: flex;
    justify-content: center;
}
.author-hero__avatar {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-full);
    background: var(--gradient-cta);
    display: grid;
    place-items: center;
    color: var(--color-white);
    font-size: var(--text-5xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.02em;
    box-shadow: var(--shadow-glow-blue);
    border: 4px solid var(--glass-border-dark);
    overflow: hidden;
    position: relative;
}
.author-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.author-hero__expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}
.author-hero__expertise-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-white);
    backdrop-filter: var(--glass-blur);
    line-height: 1.4;
}
.author-hero__expertise-tag i {
    color: var(--color-teal-400);
    font-size: 0.95em;
}
.author-hero__counter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
    border-radius: var(--radius-xl);
    backdrop-filter: var(--glass-blur);
    max-width: 480px;
}
.author-hero__counter-item {
    text-align: center;
    color: var(--color-white);
    text-decoration: none;
    transition: transform 0.2s ease;
}
.author-hero__counter-item:hover {
    transform: translateY(-2px);
}
.author-hero__counter-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-white);
    line-height: var(--leading-tight);
}
.author-hero__counter-label {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-neutral-400);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-1);
}
@media (min-width: 900px) {
    .author-hero .page-hero__container {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: var(--space-10);
    }
    .author-hero__avatar-side {
        justify-content: flex-start;
    }
}

/* === 15. LEGAL-HERO === */
.legal-hero {
    padding-top: calc(var(--header-height) + var(--space-12));
    padding-bottom: var(--space-8);
}
.legal-hero .page-hero__content h1 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}
.legal-hero .page-hero__subtitle {
    font-size: var(--text-base);
    margin-bottom: var(--space-5);
    max-width: 640px;
}
.legal-hero__updated-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-white);
    backdrop-filter: var(--glass-blur);
    margin-top: var(--space-2);
}
.legal-hero__updated-badge i {
    color: var(--color-teal-400);
    font-size: 1.05em;
}
.legal-hero__version {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-neutral-400);
    font-weight: var(--weight-semibold);
}

/* === 16. SUBGROUP-TITLE — sub-section grouping label === */
.subgroup-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-blue-700);
    margin: var(--space-8) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-blue-200);
}
.subgroup-title i {
    color: var(--color-purple-500);
    font-size: 1.1em;
}
.section--dark .subgroup-title {
    color: var(--color-blue-300);
    border-bottom-color: rgba(147, 197, 253, 0.25);
}
.section--dark .subgroup-title i { color: var(--color-purple-300); }

/* === 17. INFO-CALLOUT — inline note/tip card binnen prose === */
.info-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(124, 58, 237, 0.04));
    border-left: 4px solid var(--color-blue-500);
    border-radius: var(--radius-lg);
}
.info-callout__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--gradient-cta);
    color: var(--color-white);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.info-callout__icon i { font-size: 1.25rem; }
.info-callout__title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    margin: 0 0 var(--space-1);
    line-height: var(--leading-snug);
}
.info-callout__body {
    color: var(--color-neutral-700);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    margin: 0;
}
.info-callout--tip {
    border-left-color: var(--color-teal-500);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(6, 182, 212, 0.02));
}
.info-callout--tip .info-callout__icon { background: linear-gradient(135deg, var(--color-teal-500), var(--color-teal-600)); }
.info-callout--warning {
    border-left-color: var(--color-orange-500);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(249, 115, 22, 0.02));
}
.info-callout--warning .info-callout__icon { background: linear-gradient(135deg, var(--color-orange-500), var(--color-orange-600)); }
.info-callout--success {
    border-left-color: var(--color-green-500);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
}
.info-callout--success .info-callout__icon { background: linear-gradient(135deg, var(--color-green-500), var(--color-green-600)); }
@media (max-width: 540px) {
    .info-callout {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}
@media (forced-colors: active) {
    .info-callout { border: 1px solid CanvasText; border-left-width: 4px; }
}

/* ============================================================
   HERSTEL AUGUSTUS 2026
   Drie dingen die visueel misgingen:
   1. .check-list stond twee keer gedefinieerd. De tweede versie
      zette een ::before-vinkje bovenop het Phosphor-icoon dat al
      in de markup stond — dubbele vinkjes op elke regel.
   2. .tech-card__icon, __type, __desc, __link, __price en de
      variant --featured hadden nul CSS-regels, terwijl ruim
      veertig templates ze gebruiken. Vandaar de scheve koppen,
      niet-uitgelijnde voetteksten en ongestileerde iconen.
   3. .prose was te klein en te licht voor lange artikelen.
   ============================================================ */

/* ── 1. Check-list ─────────────────────────────────────────── */
.check-list {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.check-list li,
.check-list__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--color-neutral-700);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}
.check-list li > i,
.check-list__item > i {
    color: var(--color-green-500);
    font-size: 1.15em;
    flex-shrink: 0;
    margin-top: 0.12em;
    position: static;
}
/* Kruisjes en minpunten in dezelfde lijst: neutraal grijs, niet groen */
.check-list li > i.icon--negative,
.check-list li > i[class*="ph-x"],
.check-list li > i[class*="ph-minus"] {
    color: var(--color-neutral-400);
}
/* Alleen regels zonder eigen icoon krijgen nog een vinkje uit CSS */
.check-list li:not(:has(> i))::before {
    content: '\2713';
    color: var(--color-green-600);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
    position: static;
    left: auto;
    top: auto;
}
.check-list li:has(> i)::before { content: none; }

/* ── 2. Tech-card ──────────────────────────────────────────── */
.grid > .tech-card,
.tech-grid > .tech-card { height: 100%; }

.tech-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
}
.tech-card__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.tech-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-blue-50);
    color: var(--color-blue-600);
    font-size: var(--text-xl);
    line-height: 1;
}
.tech-card__type {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 2px;
}
.tech-card__title { margin-bottom: 0; }

.tech-card__desc {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
    margin: 0 0 var(--space-4);
}
.tech-card__desc:last-of-type { margin-bottom: var(--space-5); }

/* Voettekst onderaan, zodat kaarten naast elkaar op één lijn eindigen */
.tech-card__meta {
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-neutral-100);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}
.tech-card__price {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    line-height: 1.2;
}
.tech-card__price span {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--color-neutral-500);
}
.tech-card__suitability {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-50);
    color: var(--color-neutral-600);
    font-size: var(--text-xs);
    line-height: 1.4;
}
.tech-card__link {
    margin-top: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-600);
    text-decoration: none;
}
.tech-card__link:hover { color: var(--color-purple-600); gap: var(--space-3); }
.tech-card__link i { transition: transform var(--duration-fast) var(--ease-out-quart); }
.tech-card__link:hover i { transform: translateX(2px); }

/* Badge zweeft rechtsboven, zodat hij de kop niet omlaag duwt */
.tech-card__badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1;
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-full);
    background: var(--gradient-cta);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.tech-card--featured {
    border-color: var(--color-blue-200);
    box-shadow: var(--shadow-card-hover);
}
.tech-card--featured .tech-card__icon {
    background: var(--gradient-cta);
    color: var(--color-white);
}

/* Kleurvarianten van het icoon, zodat een rij kaarten niet monotoon wordt */
.tech-card:nth-of-type(2) .tech-card__icon { background: var(--color-purple-100); color: var(--color-purple-700); }
.tech-card:nth-of-type(3) .tech-card__icon { background: var(--color-teal-100); color: var(--color-teal-700); }
.tech-card--featured:nth-of-type(n) .tech-card__icon { background: var(--gradient-cta); color: var(--color-white); }

@media (max-width: 720px) {
    .tech-card__badge { position: static; align-self: flex-start; margin-bottom: var(--space-3); }
    .tech-card:has(> .tech-card__badge) { padding-top: var(--space-6); }
}

/* ── 3. Prose: leesbaarheid lange artikelen ────────────────── */
.section--prose { padding-block: var(--space-16); }

.prose {
    font-size: 1.0625rem;              /* 17px — 15px was te klein voor lopende tekst */
    line-height: 1.75;
    color: var(--color-neutral-800);
    max-width: 44rem;   /* ~80 tekens per regel */
    margin-inline: auto;
}
.prose > p:first-of-type {
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-6);
}
.prose p { margin: 0 0 var(--space-5); }
.prose p + p { margin-top: 0; }

.prose h2 {
    position: relative;
    margin-top: var(--space-14);
    margin-bottom: var(--space-4);
    padding-top: var(--space-6);
    font-size: clamp(1.4rem, 2vw + 0.6rem, 1.75rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-neutral-900);
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}
.prose h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--gradient-cta);
}
.prose h2:first-child { margin-top: 0; }

.prose h3 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}
.prose h4 { margin-top: var(--space-8); }

.prose ul, .prose ol { margin: var(--space-5) 0; padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
.prose li::marker { color: var(--color-blue-500); }
.prose ul ul, .prose ol ol { margin: var(--space-2) 0; }

.prose strong { color: var(--color-neutral-900); font-weight: var(--weight-semibold); }
.prose em { color: var(--color-neutral-700); }

.prose a {
    color: var(--color-blue-700);
    text-decoration-color: rgba(37, 99, 235, 0.4);
    text-decoration-thickness: 1.5px;
}

/* Tabellen: rand eromheen, zebra, scrollbaar op smal scherm */
.prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: var(--space-8) 0;
    border-collapse: collapse;
    font-size: var(--text-sm);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
}
.prose thead { background: var(--color-neutral-50); }
.prose th {
    background: transparent;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-neutral-600);
    border-bottom: 1px solid var(--color-neutral-200);
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
}
.prose td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-neutral-100);
    vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) { background: rgba(248, 250, 252, 0.6); }

.prose blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
    border: 0;
    border-left: 3px solid var(--color-blue-500);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(124, 58, 237, 0.05));
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-style: normal;
    color: var(--color-neutral-700);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
    height: 1px;
    border: 0;
    margin: var(--space-12) 0;
    background: linear-gradient(90deg, var(--color-neutral-200), transparent);
}

/* ── 4. Artikel-layout met inhoudsopgave ───────────────────── */
.artikel-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
}
@media (min-width: 1024px) {
    .artikel-layout--with-toc {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: var(--space-16);
    }
}
.artikel-layout .prose { margin-inline: 0; }

.artikel-toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-sm);
}
.artikel-toc__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-neutral-500);
}
.artikel-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.artikel-toc__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-neutral-600);
    text-decoration: none;
}
.artikel-toc__link:hover {
    background: var(--color-neutral-50);
    color: var(--color-neutral-900);
}
.artikel-toc__link.is-active {
    border-left-color: var(--color-blue-500);
    background: var(--color-blue-50);
    color: var(--color-blue-700);
    font-weight: var(--weight-medium);
}
@media (max-width: 1023px) {
    .artikel-toc { position: static; margin-bottom: var(--space-8); }
}

/* Kernpunten-blok boven het artikel */
.artikel-kernpunten {
    margin: 0 0 var(--space-10);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(124, 58, 237, 0.06));
    border: 1px solid var(--color-blue-100);
}
.artikel-kernpunten__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
}
.artikel-kernpunten ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.artikel-kernpunten li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-neutral-700);
}
.artikel-kernpunten li i { color: var(--color-blue-600); flex-shrink: 0; margin-top: 0.15em; }

/* Vervolgartikelen onderaan */
.artikel-verder {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-neutral-200);
}
.artikel-verder__title {
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
}
.artikel-verder__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}
.artikel-verder__card {
    display: block;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: box-shadow var(--duration-base) var(--ease-out-quart),
                transform var(--duration-base) var(--ease-out-quart);
}
.artikel-verder__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}
.artikel-verder__label {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 4px;
}
.artikel-verder__name {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-neutral-900);
}

/* ============================================================
   ONTBREKENDE COMPONENTEN — augustus 2026
   Een audit over de templates die live gaan leverde 56 classes op
   die wel in de markup staan maar nergens een CSS-regel hadden.
   Hele blokken werden daardoor als kale divs weergegeven. Hieronder
   staan ze alsnog, in dezelfde stijl als de rest van de site.
   ============================================================ */

/* ── Tech-card: kop uitlijnen bij een badge ────────────────── */
.tech-card:has(> .tech-card__badge) { padding-top: var(--space-6); }
.tech-card:has(> .tech-card__badge) .tech-card__header { padding-right: 92px; }
@media (max-width: 720px) {
    .tech-card:has(> .tech-card__badge) .tech-card__header { padding-right: 0; }
}

/* ── Tijdlijn (5G-backup, 5G zakelijk, overname) ───────────── */
.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-left: var(--space-8);
}
.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, var(--color-blue-300), var(--color-purple-300), var(--color-teal-300));
}
.timeline__item,
.timeline__step { position: relative; }
.timeline__item .timeline__marker,
.timeline__marker {
    position: absolute;
    left: calc(var(--space-8) * -1);
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-neutral-300);
    box-shadow: 0 0 0 4px var(--color-white);
}
.timeline__item--active > .timeline__marker,
.timeline__step--active > .timeline__marker,
.timeline__marker--blue { border-color: var(--color-blue-500); }
.timeline__item--success > .timeline__marker,
.timeline__step--success > .timeline__marker,
.timeline__marker--green { border-color: var(--color-green-500); }
.timeline__marker--purple { border-color: var(--color-purple-500); }

.timeline__body { min-width: 0; }
.timeline__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-2);
}
.timeline__item--active .timeline__label { color: var(--color-blue-600); }
.timeline__item--success .timeline__label { color: var(--color-green-600); }
.timeline__body p {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
}

/* ── Bridge-fasen (5G Bridge op 5G zakelijk) ───────────────── */
.bridge-phases {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-4);
}
.bridge-phase {
    flex: 1 1 200px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-sm);
}
.bridge-phase__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    color: var(--color-neutral-500);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
}
.bridge-phase--active { border-color: var(--color-blue-200); box-shadow: var(--shadow-card); }
.bridge-phase--active .bridge-phase__icon { background: var(--color-blue-50); color: var(--color-blue-600); }
.bridge-phase--success { border-color: var(--color-teal-200); box-shadow: var(--shadow-card); }
.bridge-phase--success .bridge-phase__icon { background: var(--gradient-cta); color: var(--color-white); }
.bridge-phase__title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-neutral-500);
}
.bridge-phase__tech {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    line-height: var(--leading-tight);
}
.bridge-phase__time { font-size: var(--text-sm); color: var(--color-neutral-500); }
.bridge-phase__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: var(--text-xl);
    color: var(--color-neutral-300);
}
@media (max-width: 720px) {
    .bridge-phase { max-width: none; }
    .bridge-phase__arrow { transform: rotate(90deg); }
}

/* ── Carrier-kaarten (glasvezel, 5G) ───────────────────────── */
.carriers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}
.carrier-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--duration-base) var(--ease-out-quart),
                transform var(--duration-base) var(--ease-out-quart);
}
.carrier-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.carrier-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.carrier-card__logo {
    display: grid;
    place-items: center;
    height: 34px;
    max-width: 120px;
    flex-shrink: 0;
}
.carrier-card__logo img, .carrier-card__logo svg { max-height: 100%; width: auto; }
.carrier-card__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    line-height: var(--leading-tight);
}
.carrier-card__desc,
.carrier-card > p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
    margin: 0 0 var(--space-3);
}
.carrier-card .check-list { margin-top: auto; }
.carrier-card--more {
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-neutral-50);
    border-style: dashed;
    border-color: var(--color-neutral-200);
    box-shadow: none;
}
.carrier-card--more:hover { transform: none; box-shadow: none; }

/* ── Meldingsbalk (xDSL koperafbouw) ───────────────────────── */
.notice-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    border-left: 4px solid var(--color-blue-500);
    box-shadow: var(--shadow-card);
}
.notice-banner__icon {
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-blue-500);
}
.notice-banner__content h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
}
.notice-banner__content p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
}
.notice-banner__content p:last-child { margin-bottom: 0; }
.notice-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.notice-banner--warning { border-left-color: var(--color-orange-500); }
.notice-banner--warning .notice-banner__icon { color: var(--color-orange-500); }
.section--warning { background: linear-gradient(180deg, #fffdf7, var(--color-white)); }
@media (max-width: 640px) {
    .notice-banner { grid-template-columns: 1fr; padding: var(--space-5); }
}

/* ── KvK-tabel ─────────────────────────────────────────────── */
.kvk-table {
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.kvk-table__row {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-neutral-100);
}
.kvk-table__row:last-child { border-bottom: 0; }
.kvk-table__row:nth-child(even) { background: rgba(248, 250, 252, 0.6); }
.kvk-table__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}
.kvk-table__label i { color: var(--color-blue-500); }
.kvk-table__value {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-900);
}
@media (max-width: 640px) {
    .kvk-table__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ── CTA-banner: binnenkant en knoppen ─────────────────────── */
.cta-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}
.cta-banner__inner .cta-banner__content { flex: 1 1 320px; }
.cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* ── Kleine, veelgebruikte elementen ───────────────────────── */
.card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-blue-50);
    color: var(--color-blue-600);
    font-size: var(--text-xl);
}
/* Een kaart met lichte achtergrond binnen een donkere sectie erft de witte
   koptekst van .section--dark, waardoor er wit op wit komt te staan. Glazen
   kaarten zijn wel bewust licht op donker en houden hun eigen kleuren. */
.section--dark .card:not(.card--glass) h2,
.section--dark .card:not(.card--glass) h3,
.section--dark .card:not(.card--glass) h4,
.section--dark .tech-card:not(.card--glass) h2,
.section--dark .tech-card:not(.card--glass) h3,
.section--dark .tech-card:not(.card--glass) h4 {
    color: var(--color-neutral-900);
}
.section--dark .card:not(.card--glass) p,
.section--dark .card:not(.card--glass) li,
.section--dark .tech-card:not(.card--glass) p,
.section--dark .tech-card:not(.card--glass) li {
    color: var(--color-neutral-700);
}

.card--highlight {
    border-color: var(--color-blue-200);
    box-shadow: var(--shadow-card-hover);
}

.section__footer-note,
.section__disclaimer,
.section__footnote {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 62rem;
    margin: var(--space-8) auto 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
}
.section__footer-note i,
.section__disclaimer i,
.section__footnote i {
    color: var(--color-blue-500);
    flex-shrink: 0;
    margin-top: 0.2em;
}
.section__subheader {
    max-width: 46rem;
    margin: 0 auto var(--space-8);
    text-align: center;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
}

.form-label__optional,
.form-optional {
    font-weight: var(--weight-regular);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

.contact-card__note,
.contact-card__usp,
.contact-card__trust {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-500);
}
.contact-card__usp {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    border-top: 0;
    padding-top: 0;
}

.check-list--compact { gap: var(--space-2); }
.check-list--compact li { font-size: var(--text-sm); }
.check-list--warning li > i { color: var(--color-orange-500); }

.cta-inline__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-white);
    font-size: var(--text-xl);
}
.cta-inline__content { min-width: 0; flex: 1 1 auto; }

.highlight-features--centered { justify-content: center; text-align: center; }
.highlight-features__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-3);
}

.disclaimer-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-50);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
}

.faq-item__caret {
    flex-shrink: 0;
    color: var(--color-neutral-400);
    transition: transform var(--duration-fast) var(--ease-out-quart);
}
.faq-item[open] .faq-item__caret,
.faq-item.is-open .faq-item__caret { transform: rotate(180deg); }

.contact-page__form-wrap { min-width: 0; }
.pc-lead__form { display: contents; }

/* ── Carrier-strip met echte logo's ────────────────────────── */
.carrier-strip__logo {
    height: 26px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter var(--duration-base) var(--ease-out-quart),
                opacity var(--duration-base) var(--ease-out-quart);
}
.carrier-strip__logo:hover { filter: none; opacity: 1; }
.carrier-strip__meer {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    align-self: center;
}
.section--dark .carrier-strip__logo,
.carrier-strip--dark .carrier-strip__logo { filter: brightness(0) invert(1); opacity: 0.55; }

/* Tekst die na een check-list volgt heeft eigen lucht nodig */
.check-list + .tech-card__desc,
.check-list + p { margin-top: var(--space-5); }

/* ============================================================
   RESTERENDE COMPONENTEN — augustus 2026, tweede ronde
   De audit (scripts/check-ongestyled-classes.py) vond na de eerste
   ronde nog 44 classes zonder CSS, verspreid over de pagina's die
   de komende weken gepubliceerd worden. Hieronder staan ze alsnog.
   ============================================================ */

/* ── Case study (homepage, business-internet, international) ── */
.case-study { margin-top: var(--space-4); }
.case-study__challenge,
.case-study__solution,
.case-study__result {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-sm);
}
.case-study__outcomes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.case-study__outcome {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    border-left: 3px solid var(--color-green-500);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-neutral-700);
}
.case-study__outcome strong { display: block; color: var(--color-neutral-900); margin-bottom: 2px; }

/* ── About-stats (netwerkbeveiliging, international, 5G) ────── */
.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* ── Highlight-split omgekeerd ─────────────────────────────── */
.highlight-split--reverse { direction: rtl; }
.highlight-split--reverse > * { direction: ltr; }
@media (max-width: 900px) {
    .highlight-split--reverse { direction: ltr; }
}

/* ── Bridge-tijdlijn (5G) ──────────────────────────────────── */
.bridge-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-left: var(--space-8);
    margin-top: var(--space-6);
}
.bridge-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, var(--color-blue-400), var(--color-teal-400));
}
.bridge-timeline__step { position: relative; }
.bridge-timeline__dot {
    position: absolute;
    left: calc(var(--space-8) * -1);
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-neutral-300);
    box-shadow: 0 0 0 4px var(--color-white);
}
.bridge-timeline__step--active > .bridge-timeline__dot { border-color: var(--color-blue-500); }
.bridge-timeline__step--success > .bridge-timeline__dot { border-color: var(--color-teal-500); }
.bridge-timeline__content strong {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}
.bridge-timeline__content p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
}
.section--dark .bridge-timeline__content strong { color: var(--color-white); }
.section--dark .bridge-timeline__content p { color: var(--color-neutral-300); }
.section--dark .bridge-timeline__dot { background: var(--color-neutral-900); box-shadow: 0 0 0 4px rgba(0,0,0,.35); }

/* ── Bridge-visual aanvullingen ────────────────────────────── */
.bridge-visual__arrow {
    display: grid;
    place-items: center;
    font-size: var(--text-xl);
    color: var(--color-neutral-300);
}
.bridge-visual__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-neutral-500);
}
.bridge-visual__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-green-600);
}

/* ── Quote-card (geo-pagina's) ─────────────────────────────── */
.quote-card {
    position: relative;
    padding: var(--space-8) var(--space-8) var(--space-8) var(--space-14);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(124, 58, 237, 0.05));
    border: 1px solid var(--color-blue-100);
}
.quote-card__mark {
    position: absolute;
    left: var(--space-6);
    top: var(--space-6);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-blue-300);
}
.quote-card__body {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-700);
}
.quote-card__body p:last-child { margin-bottom: 0; }
.quote-card--geo { max-width: 52rem; margin-inline: auto; }
@media (max-width: 640px) {
    .quote-card { padding: var(--space-6); }
    .quote-card__mark { position: static; display: block; margin-bottom: var(--space-2); }
}

/* ── Alert-balk ────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    border-left: 3px solid var(--color-neutral-300);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-neutral-700);
}
.alert > i { font-size: var(--text-lg); flex-shrink: 0; margin-top: 1px; color: var(--color-neutral-500); }
.alert strong { color: var(--color-neutral-900); margin-right: var(--space-1); }
.alert--info { background: var(--color-blue-50); border-left-color: var(--color-blue-500); }
.alert--info > i { color: var(--color-blue-600); }

/* ── Prijsblok binnen een tech-card ────────────────────────── */
.tech-card__pricing {
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-neutral-100);
}
.tech-card__price-note {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--color-neutral-500);
}

/* ── Carriers onder een service-blok ───────────────────────── */
.service-block__carriers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-100);
}
.service-block__carriers-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

/* ── Tags en chips ─────────────────────────────────────────── */
.card__tags,
.page-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.chip,
.tech-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-100);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-600);
}
.page-hero__chips .chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
}
.carrier-tags--large .carrier-tag { padding: 6px 14px; font-size: var(--text-sm); }

/* ── Vergelijkingstabel: typelabels ────────────────────────── */
.comparison-table__type-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
}
.comparison-table__type-label--featured::before,
.comparison-table__type-label--muted::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.comparison-table__type-label--featured::before { background: var(--color-blue-500); }
.comparison-table__type-label--muted::before { background: var(--color-neutral-300); }
.comparison-table__type-label--muted { color: var(--color-neutral-500); font-weight: var(--weight-regular); }
.td--highlight,
td.td--highlight { background: var(--color-blue-50); font-weight: var(--weight-medium); }

/* ── Inline CTA kleurvarianten ─────────────────────────────── */
.cta-inline--blue { background: linear-gradient(135deg, var(--color-blue-600), var(--color-blue-800)); }
.cta-inline--purple { background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-800)); }
.cta-inline--teal { background: linear-gradient(135deg, var(--color-teal-500), var(--color-blue-700)); }
.cta-inline--blue, .cta-inline--purple, .cta-inline--teal { color: var(--color-white); }
.cta-inline--blue .cta-inline__title,
.cta-inline--purple .cta-inline__title,
.cta-inline--teal .cta-inline__title { color: var(--color-white); }

/* ── Losse kop/subkop in een sectie (404, overig) ──────────── */
.section__title {
    font-size: clamp(1.4rem, 2vw + 0.6rem, 1.875rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-neutral-900);
    margin: 0 0 var(--space-2);
}
.section__subtitle {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
    margin: 0;
}
.section--dark .section__title { color: var(--color-white); }
.section--dark .section__subtitle { color: var(--color-neutral-300); }

/* ── Kaart met nadruk ──────────────────────────────────────── */
.card--featured {
    border-color: var(--color-blue-200);
    box-shadow: var(--shadow-card-hover);
    position: relative;
}

/* ── Prose op geo-pagina's ─────────────────────────────────── */
.prose--geo { max-width: 46rem; margin-inline: auto; }

/* ── Paginaspecifieke wrapper (geen opmaak nodig) ──────────── */
.page-glasvezel-vergelijken { display: block; }

/* ============================================================
   MOBIELE CORRECTIES — augustus 2026
   Uit de sitecontrole: de header liep op 375px tot 114px buiten
   het scherm, en veel klikbare elementen waren lager dan 32px.
   ============================================================ */

/* Header past niet op een telefoon met alle knoppen erin. De offerteknop en
   het zoekicoon vervallen daar; onderaan staat al een vaste balk met bellen,
   WhatsApp en contact. */
@media (max-width: 680px) {
    .header__actions { gap: var(--space-2); }
    .btn--header,
    .header__search-toggle { display: none; }
    .header__inner { gap: var(--space-2); }
    .header__brand-text { font-size: var(--text-md); }
}
@media (max-width: 380px) {
    .header__phone { display: none; }
}

/* Niets mag horizontaal buiten beeld vallen */
html, body { overflow-x: hidden; }
img, svg, video, table, pre { max-width: 100%; }

/* Tikdoelen: losse links in kaarten en navigatie groot genoeg om te raken */
@media (max-width: 900px) {
    .nav-list > li > a,
    .sub-menu a {
        display: block;
        min-height: 44px;
        line-height: 1.4;
        padding-block: var(--space-3);
    }
    .service-card__link,
    .tech-card__link,
    .kennisbank-card__link,
    .artikel-verder__card,
    .error-404__suggestion-link,
    .search-overlay__suggestion-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .footer__col a,
    .footer__legal a,
    .footer__contact-items a {
        display: inline-block;
        min-height: 32px;
        padding-block: var(--space-1);
    }
    .lang-switcher__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
    }
}

/* Losse verwijslinks onder een alinea zijn geen inline tekst maar knoppen in
   gebruik. Op een telefoon moeten die te raken zijn zonder in te zoomen. */
@media (max-width: 900px) {
    .highlight-split__content > p > a:only-child,
    .split-section__content > p > a:only-child,
    .section__header .lead > a:only-child,
    .cta-inline a,
    .contact-card__item,
    .header__logo,
    .footer__brand a,
    .kvk-table__value a,
    .legal-contact-block a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
    .contact-card__item { min-height: 48px; }
}

/* Laatste tikdoelen uit de sitecontrole: de terugknop en auteursnaam boven een
   artikel, de contactregels in de juridische blokken en de cookieknop. */
@media (max-width: 900px) {
    .post-breadcrumb a,
    .article-author-strip__name a,
    .legal-contact-block a,
    .legal-section a[href^="tel:"],
    .legal-section a[href^="mailto:"],
    .page-content a[href^="tel:"],
    .page-content a[href^="mailto:"] {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
    .prose > p > a:only-child { display: inline-flex; align-items: center; min-height: 40px; }
    .legal-section .btn--sm,
    .page-content .btn--sm { min-height: 40px; }
}

/*
Theme Name: ConnectSure
Theme URI: https://connectsure.nl
Author: Schülski-IT
Author URI: https://schulski-it.nl
Description: Zakelijk internet partner — glasvezel, 5G en FTTO voor bedrijven. Custom WordPress theme.
Version: 2.1.0
License: Proprietary
Text Domain: connectsure
Requires at least: 6.0
Requires PHP: 8.0
*/

/* Page-specific overrides loaded after components.css */

/* === GENERIC PAGE STYLES === */
.page-content {
    padding-block: var(--space-16);
}

.page-content .container {
    max-width: var(--container-narrow);
}

.page-content h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
}

.page-content h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.page-content p {
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}

.page-content ul,
.page-content ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }

.page-content li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-normal);
}

.page-content img {
    border-radius: var(--radius-xl);
    margin-block: var(--space-6);
}

.page-content blockquote {
    border-left: 3px solid var(--color-purple-500);
    padding-left: var(--space-6);
    margin-block: var(--space-6);
    font-style: italic;
    color: var(--color-neutral-600);
}

/* === WIDE PAGE LAYOUT === */
.page-content--wide .container {
    max-width: var(--container-max);
}

/* === KENNISBANK ARTIKEL LAYOUT === */

/*
 * Two-column layout: narrow article body + sticky TOC sidebar.
 * Falls back to single-column when no TOC is present.
 */
.kennisbank-artikel__layout {
    max-width: var(--container-narrow);
    margin-inline: auto;
}

.kennisbank-artikel__layout--with-toc {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--space-12);
    max-width: var(--container-max);
    align-items: start;
}

/* Reverse order on mobile: content first, TOC below */
@media (max-width: 900px) {
    .kennisbank-artikel__layout--with-toc {
        grid-template-columns: 1fr;
        max-width: var(--container-narrow);
    }
}

/* TOC sidebar */
.kennisbank-toc {
    order: 2; /* TOC always renders after article in source; CSS order puts it on right */
}

.kennisbank-toc__inner {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
}

.kennisbank-toc__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-neutral-900);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-neutral-100);
}

.kennisbank-toc__header i {
    color: var(--color-blue-600);
    font-size: 1rem;
}

.kennisbank-toc__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
}

.kennisbank-toc__item {
    line-height: 1;
}

.kennisbank-toc__item + .kennisbank-toc__item {
    margin-top: var(--space-1);
}

.kennisbank-toc__item--h3 {
    padding-left: var(--space-4);
}

.kennisbank-toc__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) ease;
    line-height: var(--leading-snug);
}

.kennisbank-toc__link:hover,
.kennisbank-toc__link.is-active {
    color: var(--color-blue-600);
    background: var(--color-blue-50);
}

.kennisbank-toc__cta {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-100);
    text-align: center;
}

.kennisbank-toc__cta p {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-3);
}

.kennisbank-toc__cta .btn {
    width: 100%;
    justify-content: center;
    font-size: var(--text-sm);
}

/* Article content area */
.kennisbank-artikel__content {
    order: 1;
    min-width: 0; /* prevent grid blowout */
}

/* Article meta footer */
.kennisbank-artikel__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-neutral-100);
}

.kennisbank-artikel__updated,
.kennisbank-artikel__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}

.kennisbank-artikel__updated i,
.kennisbank-artikel__tag i {
    color: var(--color-blue-400);
}

/* "Alle artikelen" link below related grid */
.kennisbank-artikel__all-link {
    text-align: center;
    margin-top: var(--space-8);
}

/* === KENNISBANK CATEGORIE NAV === */
.kennisbank-nav {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-100);
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-above);
    box-shadow: var(--shadow-sm);
}

.kennisbank-nav__list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-3) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kennisbank-nav__list::-webkit-scrollbar {
    display: none;
}

.kennisbank-nav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-neutral-600);
    text-decoration: none;
    border-radius: var(--radius-full);
    white-space: nowrap;
    border: 1px solid var(--color-neutral-200);
    transition: all var(--duration-fast) ease;
}

.kennisbank-nav__item:hover {
    color: var(--color-blue-600);
    border-color: var(--color-blue-200);
    background: var(--color-blue-50);
}

@media (max-width: 768px) {
    .kennisbank-nav {
        position: static; /* avoid double-sticky on mobile with header */
    }
}

/* === KENNISBANK GRID === */
.kennisbank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

.kennisbank-card {
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
    transition: all var(--duration-base) var(--ease-out-quart);
}

.kennisbank-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
    border-color: var(--color-blue-200);
}

.kennisbank-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: rgba(6, 182, 212, 0.08);
    color: var(--color-blue-600);
    font-size: 1.4rem;
    margin-bottom: var(--space-4);
}

.kennisbank-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.kennisbank-card p {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-4);
}

.kennisbank-card__link {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-blue-600);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.kennisbank-card__link:hover {
    gap: var(--space-2);
}

/* === PRICING TABLE === */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.pricing-card {
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: all var(--duration-base) var(--ease-out-quart);
}

.pricing-card--featured {
    border-color: var(--color-purple-400);
    box-shadow: var(--shadow-card), 0 0 0 1px var(--color-purple-400);
    position: relative;
}

.pricing-card--featured::before {
    content: 'Populair';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    background: var(--gradient-cta);
    color: var(--color-blue-950);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-full);
    letter-spacing: var(--tracking-wide);
}

.pricing-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.pricing-card__type {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-blue-600);
    margin-bottom: var(--space-3);
}

.pricing-card__price {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}

.pricing-card__price span {
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    color: var(--color-neutral-500);
}

.pricing-card__desc {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-6);
}

.pricing-card__features {
    text-align: left;
    margin-bottom: var(--space-6);
}

.pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
    border-bottom: 1px solid var(--color-neutral-100);
}

.pricing-card__features li:last-child {
    border-bottom: none;
}

.pricing-card__features li i {
    color: var(--color-green-500);
    margin-top: 2px;
    flex-shrink: 0;
}

/* === COMPARISON TABLE === */
.comparison-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    margin-block: var(--space-8);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-4) var(--space-6);
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-100);
}

.comparison-table thead th {
    background: var(--color-blue-900);
    color: var(--color-white);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.comparison-table thead th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

.comparison-table thead th:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
}

.comparison-table tbody tr:hover {
    background: var(--color-neutral-50);
}

.comparison-table tbody td:first-child {
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-900);
}

/* === 404 PAGE === */
.error-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-16);
}

.error-404__code {
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: var(--weight-extrabold);
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--space-4);
}

.error-404 h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}

.error-404 p {
    color: var(--color-neutral-500);
    margin-bottom: var(--space-8);
    max-width: 480px;
    margin-inline: auto;
}

/* === SEARCH RESULTS === */
.search-results {
    padding-block: var(--space-16);
}

.search-result-item {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-neutral-100);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item h3 a {
    color: var(--color-neutral-900);
    font-weight: var(--weight-semibold);
}

.search-result-item h3 a:hover {
    color: var(--color-blue-600);
}

.search-result-item .excerpt {
    color: var(--color-neutral-500);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

/* === OVER ONS PAGE === */
.team-member {
    text-align: center;
    padding: var(--space-8);
}

.team-member__photo {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    object-fit: cover;
    margin: 0 auto var(--space-4);
    border: 3px solid var(--color-purple-200);
}

.team-member__name {
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-1);
}

.team-member__role {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}

/* === CONTACT PAGE === */
.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
    align-items: start;
}

.contact-page__info h2 {
    margin-bottom: var(--space-4);
}

.contact-page__methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-100);
    text-decoration: none;
    color: inherit;
    transition: all var(--duration-base) var(--ease-out-quart);
}

.contact-method:hover {
    border-color: var(--color-blue-200);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.contact-method__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 22px;
    flex-shrink: 0;
}

.contact-method__icon--blue { background: var(--color-blue-50); color: var(--color-blue-600); }
.contact-method__icon--purple { background: var(--color-purple-100); color: var(--color-purple-600); }
.contact-method__icon--teal { background: var(--color-teal-100); color: var(--color-teal-600); }

.contact-method strong {
    display: block;
    font-size: var(--text-base);
    color: var(--color-neutral-900);
}

.contact-method span {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
}

.contact-method small {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
    margin-top: 2px;
}

.contact-page__promise {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-blue-50);
    margin-bottom: var(--space-6);
}

.contact-page__promise h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    margin-bottom: var(--space-4);
    color: var(--color-blue-700);
}

.contact-page__promise .check-list {
    margin: 0;
}

.contact-page__carriers {
    margin-top: var(--space-6);
}

.contact-page__carriers h4 {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-3);
}

.contact-page__form-card {
    padding: var(--space-10);
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-100);
    box-shadow: var(--shadow-lg);
}

.contact-page__form-card h2 {
    margin-bottom: var(--space-2);
}

.contact-page__form-card > p {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-6);
}

.contact-page__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Light-mode form fields */
.contact-page__form input,
.contact-page__form select,
.contact-page__form textarea {
    color: var(--color-neutral-900);
    background: var(--color-neutral-50);
    border-color: var(--color-neutral-200);
}

.contact-page__form input:focus,
.contact-page__form select:focus,
.contact-page__form textarea:focus {
    border-color: var(--color-blue-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background: var(--color-white);
}

.contact-page__form input::placeholder,
.contact-page__form textarea::placeholder {
    color: var(--color-neutral-400);
}

.contact-page__form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2371717a' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}

.contact-page__form select option {
    background: var(--color-white);
    color: var(--color-neutral-900);
}

.contact-page__disclaimer {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    text-align: center;
    margin-top: var(--space-2);
}

@media (max-width: 768px) {
    .contact-page-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .contact-page__form-card {
        padding: var(--space-6);
    }
}