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

/* === Custom properties === */
:root {
    --cyber1: #0056B3;
    --cyber2: #00A0E9;
    --cyber1-light: rgba(0, 86, 179, .08);
    --cyber2-light: rgba(0, 160, 233, .08);
    --bg: #eaeef4;
    --bg-warm: #f4f6fa;
    --bg-card: #ffffff;
    --text: #2a3340;
    --text-muted: #4a5563;
    --heading: #0a1628;
    --white: #ffffff;
    --border: #d8dee8;
    --shadow: 0 4px 8px rgba(0, 56, 179, .08), 0 8px 20px rgba(10, 22, 40, .08);
    --shadow-hover: 0 12px 32px rgba(0, 56, 179, .18), 0 8px 16px rgba(10, 22, 40, .12);
    --gradient-brand: linear-gradient(135deg, var(--cyber1), var(--cyber2));
    --gradient-deep: linear-gradient(135deg, #0a1628 0%, #0056B3 70%, #00A0E9 100%);
    --gradient-dark: linear-gradient(160deg, #0a1628 0%, #0d2a4f 100%);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;
}

/* === Matrix background === */
#matrix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .06;
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* === Base === */
/* Ruimte voor de scrollbar reserveren, ook als hij (nog) niet nodig is: zonder
   dit schuift de hele pagina zijwaarts zodra een modal 'm via overflow:hidden
   wegneemt. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cyber1); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cyber2); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--cyber2);
    outline-offset: 3px;
    border-radius: 4px;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }

/* === Branding === */
.cyber1 { color: var(--cyber1); }
.cyber2 { color: var(--cyber2); }

/* === Header === */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: box-shadow .3s var(--ease-out), background .3s var(--ease-out);
}
header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 56, 179, .08), 0 1px 4px rgba(0, 0, 0, .06);
    background: #fff;
}
/* Gescoped op de header: deze regel is voor de site-navigatie (vaste hoogte,
   logo links / links rechts). Ongescoped trof hij ELKE <nav> op de site, dus
   ook de inhoudsopgave van de privacyverklaring — die werd daardoor een rij
   flex-items van 4rem hoog en liep over. De header-nav is de enige andere
   <nav> in de site, dus dit is voor de rest van de pagina's identiek. */
header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}
.logo {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.logo-img {
    height: 2rem;
    width: auto;
}

/* === Nav links === */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.nav-links a {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .02em;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.nav-links a:hover {
    color: var(--cyber1);
    border-bottom-color: var(--cyber1);
}
.nav-links a[aria-current="page"],
.page-pakketten .nav-links .nav-pakketten,
.page-diensten .nav-links .nav-diensten,
.page-over .nav-links .nav-over,
.page-nis2 .nav-links .nav-nis2,
.page-faq .nav-links .nav-faq,
.page-mon .nav-links .nav-mon,
.page-awareness .nav-links .nav-awareness,
.page-intake .nav-links .nav-intake,
.page-compliance .nav-links .nav-compliance,
.page-webmon .nav-links .nav-webmon,
.page-mcz .nav-links .nav-mcz {
    color: var(--cyber1);
    border-bottom-color: var(--cyber2);
}
/* Klantportaal: knop-stijl, valt op tussen de tekstlinks */
.nav-links .nav-portal {
    padding: .5rem 1.1rem;
    border: 1.5px solid var(--cyber1);
    border-radius: 8px;
    color: var(--cyber1);
}
.nav-links .nav-portal:hover {
    background: var(--cyber1);
    border-color: var(--cyber1);
    color: #fff;
}
/* Slotje schuift in bij hover (externe, beveiligde omgeving) */
.nav-links .nav-portal::before,
footer .footer-portal::before {
    content: "🔒";
    display: inline-block;
    max-width: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    font-size: .85em;
    vertical-align: -1px;
    transition: max-width .25s var(--ease-out), margin-right .25s var(--ease-out), opacity .2s;
}
.nav-links .nav-portal:hover::before,
footer .footer-portal:hover::before {
    max-width: 1.4em;
    margin-right: .4em;
    opacity: 1;
}
.nav-links a[aria-current="page"]:hover,
.page-pakketten .nav-links .nav-pakketten:hover,
.page-diensten .nav-links .nav-diensten:hover,
.page-over .nav-links .nav-over:hover,
.page-nis2 .nav-links .nav-nis2:hover,
.page-faq .nav-links .nav-faq:hover,
.page-mon .nav-links .nav-mon:hover,
.page-awareness .nav-links .nav-awareness:hover,
.page-intake .nav-links .nav-intake:hover,
.page-compliance .nav-links .nav-compliance:hover,
.page-webmon .nav-links .nav-webmon:hover,
.page-mcz .nav-links .nav-mcz:hover {
    border-bottom-color: var(--cyber1);
}

/* === Diensten-uitklapmenu === */
/* display:flex laat de wrapper exact om de knop sluiten, zodat "Diensten"
   op dezelfde hoogte staat als de gewone menulinks (geen inline-strut). */
.nav-item { position: relative; display: flex; }
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .02em;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 2px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.nav-dropdown-toggle:hover {
    color: var(--cyber1);
    border-bottom-color: var(--cyber1);
}
/* "Diensten" oplichten wanneer je op een dienstenpagina bent. */
.page-diensten .nav-dropdown-toggle,
.page-mon .nav-dropdown-toggle,
.page-awareness .nav-dropdown-toggle,
.page-intake .nav-dropdown-toggle,
.page-compliance .nav-dropdown-toggle,
.page-webmon .nav-dropdown-toggle,
.page-mcz .nav-dropdown-toggle {
    color: var(--cyber1);
    border-bottom-color: var(--cyber2);
}
.nav-caret {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s var(--ease-out);
}
.nav-has-dropdown:hover .nav-caret,
.nav-has-dropdown:focus-within .nav-caret,
.nav-has-dropdown.is-open .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: .55rem;
    transform: translateX(-50%) translateY(6px);
    min-width: 230px;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 16px 38px rgba(0, 56, 179, .15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
    z-index: 1100;
}
/* Onzichtbare brug over de marge, zodat hover niet wegvalt tussen knop en menu. */
.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -.55rem;
    left: 0;
    right: 0;
    height: .55rem;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown,
.nav-has-dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
    display: block;
    padding: .55rem .8rem;
    font-size: .9rem;
    border-radius: 7px;
    border-bottom: 0;
    white-space: nowrap;
}
.nav-dropdown a:hover {
    background: var(--cyber1-light);
    color: var(--cyber1);
    border-bottom-color: transparent;
}
.nav-dropdown a[aria-current="page"],
.page-mon .nav-dropdown .nav-mon,
.page-awareness .nav-dropdown .nav-awareness,
.page-intake .nav-dropdown .nav-intake,
.page-compliance .nav-dropdown .nav-compliance,
.page-webmon .nav-dropdown .nav-webmon,
.page-mcz .nav-dropdown .nav-mcz {
    background: var(--cyber1-light);
    color: var(--cyber1);
    border-bottom-color: transparent;
}

/* === Hamburgerknop (alleen zichtbaar op mobiel, zie media query) === */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cyber1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bar {
    display: block;
    width: 26px;
    height: 2px;
    margin: 0 auto;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
/* Drie streepjes vormen een kruisje wanneer het menu open is. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* === Hero === */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80vh;
    padding: 6rem 0 3rem;
    background: var(--gradient-deep);
    position: relative;
    overflow: hidden;
    color: #fff;
}
.hero > .container { position: relative; z-index: 2; }
.hero-logo {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1.75rem;
}
.hero-logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 160, 233, .55), rgba(0, 86, 179, .25) 45%, transparent 70%);
    filter: blur(28px);
    z-index: 0;
    animation: hero-glow 5s ease-in-out infinite;
}
.hero-logo-img {
    position: relative;
    z-index: 1;
    width: clamp(110px, 18vw, 170px);
    height: auto;
    filter: drop-shadow(0 16px 36px rgba(0, 160, 233, .5));
    animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-glow {
    0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-logo::before,
    .hero-logo-img { animation: none; }
}
.hero h1 {
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
    min-height: 1.2em;
}
.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;
}
.typed-wrap {
    display: inline-grid;
    vertical-align: baseline;
    text-align: left;
}
.typed-wrap > .typed-sizer,
.typed-wrap > .typed-active {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
}
.typed-sizer {
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}
.typed-text {
    color: #fff;
}
.typed-caret {
    display: inline-block;
    width: .07em;
    height: .95em;
    background: var(--cyber2);
    margin-left: .08em;
    vertical-align: -0.08em;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(0, 160, 233, .85);
    animation: caret-blink 1s steps(2, start) infinite;
}
@keyframes caret-blink {
    50% { opacity: 0; }
}
.typed-wrap.is-typing .typed-caret { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .typed-caret { animation: none; opacity: 0; }
}
.tagline {
    margin-top: 1rem;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .04em;
}
.divider {
    width: 4.5rem;
    height: 3px;
    margin: 1.5rem auto;
    background: var(--cyber2);
    border-radius: 2px;
}
.subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .85);
    max-width: 36rem;
    margin: 0 auto .5rem;
}
.subtitle a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.subtitle a:hover { color: var(--cyber2); }
.hero .subtitle.punch {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cyber2);
    margin-bottom: 1.75rem;
}
.subtitle.punch {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cyber1);
    margin-bottom: 1.75rem;
}
.hero-accent {
    color: var(--cyber2);
    text-shadow: 0 0 28px rgba(0, 160, 233, .55);
}
.hero-microlink {
    margin-top: 1.25rem;
    font-size: .95rem;
}
.hero-microlink a {
    color: rgba(255, 255, 255, .75);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s;
}
.hero-microlink a:hover { color: #fff; }

/* === Reassurance band === */
.reassure {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 3.25rem 0;
}
.reassure .container {
    max-width: 960px;
}
.reassure-text,
.reassure-cta { max-width: 46rem; }
.reassure-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--heading);
    margin-bottom: 1.5rem;
}
.reassure-text a { color: var(--cyber1); text-decoration: underline; text-underline-offset: 2px; }
.reassure-text a:hover { color: var(--cyber2); }
.reassure-cta {
    display: inline-block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cyber1);
}
.reassure-cta:hover { color: var(--cyber2); }
.cta {
    display: inline-block;
    padding: .95rem 2.5rem;
    background: #fff;
    border: none;
    border-radius: 8px;
    color: var(--cyber1);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
    transition: background .2s, color .2s;
}
.cta:hover {
    background: var(--cyber2);
    color: #fff;
}

/* === Section headers === */
.section-header {
    text-align: left;
    margin-bottom: 2.5rem;
    position: relative;
}
.section-header h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}
.section-header p {
    max-width: 40rem;
    font-size: 1.05rem;
    color: var(--text-muted);
}

/* === Features === */
.features {
    padding: 5rem 0 6rem;
    background: var(--bg-warm);
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}
.card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-top: 4px solid var(--cyber1);
    border-radius: 12px;
    padding: 2.25rem 1.75rem;
    cursor: default;
}
.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--cyber1-light);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.card-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--cyber1);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.card h3 {
    color: var(--heading);
    font-size: 1.15rem;
    margin-bottom: .5rem;
}
.card p {
    font-size: .925rem;
    color: var(--text-muted);
    line-height: 1.7;
}

/* === Featured "kern" card + addons === */
.kern-card {
    position: relative;
    background: var(--gradient-deep);
    border-radius: 16px;
    padding: 2.5rem;
    color: #fff;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
    overflow: hidden;
    cursor: default;
}
.kern-card > * { position: relative; z-index: 1; }

.kern-tag {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
    font-weight: 700;
    z-index: 2;
}
.kern-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 24px;
    flex-shrink: 0;
}
.kern-icon svg {
    width: 48px;
    height: 48px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kern-body h3 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: .65rem;
    color: #fff;
    letter-spacing: -.01em;
}
.kern-body p {
    font-size: 1rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 1.5rem;
    max-width: 56ch;
    line-height: 1.7;
}

/* Divider between kern and addons */
.addons-divider {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 2.75rem auto;
    color: var(--text-muted);
}
.addons-divider::before,
.addons-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.addons-divider-plus {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cyber1);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.addons-divider-label {
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Addon cards: smaller, lighter, clearly secondary */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.addon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    cursor: default;
}
.addon-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--cyber2-light);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.addon-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--cyber1);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.addon-card h3 {
    color: var(--heading);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.addon-card p {
    font-size: .9rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
.addon-card .cta {
    margin-top: auto;
    align-self: flex-start;
    padding: .55rem 1.15rem;
    font-size: .875rem;
    background: transparent;
    color: var(--cyber1);
    border: 1px solid var(--border);
    box-shadow: none;
}
.addon-card .cta:hover {
    border-color: var(--cyber2);
}

/* === Onze Pakketten === */
.pakketten { padding: 5rem 0; background: var(--bg-warm); }
.package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}
.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.25rem 2rem;
    transition: border-color .2s;
}
.package-card:hover {
    border-color: var(--cyber2);
}
.package-card .addon-icon { margin-bottom: 1.25rem; }
.package-tag {
    display: block;
    color: var(--cyber1);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.package-card h3 {
    color: var(--heading);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .35rem;
}
.package-card .package-tagline {
    color: var(--text-muted);
    font-size: .9rem;
    margin-bottom: 1.25rem;
}
.package-features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.package-features li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    color: var(--text);
    line-height: 1.5;
}
.package-features li::before {
    content: '✓';
    flex-shrink: 0;
    color: var(--cyber1);
    font-weight: 700;
}
/* Titel + uitleg onder elkaar i.p.v. doorlopende tekst na een streepje,
   zodat de uitleg niet steeds op een andere x-positie begint. */
.package-features .feature-copy > strong {
    display: block;
    color: var(--text);
}
.package-features .feature-desc {
    display: block;
    color: var(--text-muted);
    font-size: .85rem;
    margin-top: .15rem;
}
.package-note {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}
.package-card .cta { margin-top: auto; align-self: flex-start; }
.pakket-tiers { padding: 5rem 0; background: var(--bg); }

/* === Waarom CYBERCYBER === */
.waarom {
    padding: 5rem 0;
    background: var(--gradient-dark);
    position: relative;
    overflow: hidden;
}
.waarom > .container { position: relative; z-index: 1; }
.waarom .section-header h2 { color: #fff; }
.waarom .section-header p { color: rgba(255, 255, 255, .65); }
.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
/* 7 items on 3 columns leaves an orphan in the last row — center it. */
.trust-grid .trust-item:nth-child(7) { grid-column: 2; }
.trust-item {
    text-align: left;
    padding: 2rem 1rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: default;
}
.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 0 1rem;
    background: var(--cyber1-light);
    border-radius: 14px;
}
.trust-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--cyber1);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.trust-item h3 {
    color: var(--heading);
    font-size: 1.05rem;
    margin-bottom: .35rem;
}
.trust-item p {
    font-size: .875rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* "Waarom"-banden (home, over ons, responsible disclosure): korte lijst i.p.v. kaartenraster */
.waarom-quote {
    margin: 0 0 3rem;
    max-width: 44rem;
}
.waarom-quote > p:first-child {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}
.waarom-quote-note {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .75);
    max-width: 36rem;
}
.waarom-list { border-top: 1px solid rgba(255, 255, 255, .15); }
.waarom-list > div {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.waarom-list dt {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.waarom-list dd {
    color: rgba(255, 255, 255, .75);
    line-height: 1.65;
    max-width: 40rem;
}
@media (max-width: 600px) {
    .waarom-list > div { grid-template-columns: 1fr; gap: .35rem; }
}

/* Pakketvergelijking op de homepage */
.package-compare tfoot td { padding: 1rem; }
.package-compare tfoot a { font-weight: 700; }

/* Founder credibility band inside the dark "waarom" section */
.ervaring-band {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 2.5rem;
    padding: 1.5rem 1.75rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(0, 160, 233, .25);
    border-left: 4px solid var(--cyber2);
    border-radius: 12px;
}
.ervaring-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(0, 160, 233, .15);
    border-radius: 14px;
}
.ervaring-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--cyber2);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ervaring-lead {
    color: var(--cyber2);
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: .3rem;
}
.ervaring-text {
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    line-height: 1.55;
}
.ervaring-text strong { color: #fff; }

/* === Onze aanpak === */
.aanpak {
    padding: 5rem 0;
    background: var(--bg-warm);
}
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    counter-reset: step;
}
.step {
    counter-increment: step;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.5rem 1.75rem 2.25rem;
    position: relative;
    cursor: default;
}
.step::before {
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--cyber1);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    border-radius: 50%;
    margin-bottom: 1.25rem;
}
.step h3 {
    color: var(--heading);
    font-size: 1.1rem;
    margin-bottom: .5rem;
}
.step p {
    font-size: .925rem;
    color: var(--text-muted);
    line-height: 1.7;
}

/* === Compliance frameworks === */
.frameworks {
    padding: 5rem 0;
    background: var(--bg);
}
.framework-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
    max-width: 600px;
}
.framework-item {
    text-align: center;
    padding: 1.75rem 1rem;
    background: var(--white);
    border-radius: 12px;
    border: 2px solid var(--border);
    cursor: default;
}
.framework-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cyber1);
    margin-bottom: .35rem;
    letter-spacing: .02em;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    transition: color .3s;
}
.framework-item p {
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
    transition: color .3s;
}
.framework-note {
    text-align: left;
    font-size: .95rem;
    color: var(--text-muted);
    max-width: 40rem;
    line-height: 1.6;
}

/* === Contact === */
.contact {
    padding: 5rem 0;
    background: var(--bg-warm);
    scroll-margin-top: 4rem;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 720px;
}
.contact-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s;
}
.contact-card:hover {
    border-color: var(--cyber2);
}
.contact-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--cyber1-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--cyber1);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.contact-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .15rem;
}
.contact-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cyber1);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* === Forms (contact + nieuwsbrief) === */
.form-card {
    max-width: 720px;
    margin: 2.5rem 0 0;
    padding: 2.25rem;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.form-card h3 {
    color: var(--heading);
    font-size: 1.35rem;
    margin: 0 0 .35rem;
}
.form-card .form-intro {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}
.form-group label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .4rem;
}
.form-group label .req { color: var(--cyber2); }
.form-group input,
.form-group textarea {
    font-family: var(--font);
    font-size: 1rem;
    color: var(--text);
    padding: .8rem 1rem;
    background: var(--bg-warm);
    border: 2px solid var(--border);
    border-radius: 8px;
    transition: border-color .25s, box-shadow .25s;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--cyber2);
    box-shadow: 0 0 0 3px var(--cyber2-light);
    background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 130px; }
/* Groter tekstveld zodra er een offerteaanvraag (voorbeeldberekening) in staat. */
.form-group textarea.textarea-offerte { min-height: 300px; }
.form-group.has-error input,
.form-group.has-error textarea { border-color: #c0392b; }
.field-error {
    color: #c0392b;
    font-size: .85rem;
    margin-top: .35rem;
    min-height: 1em;
}
/* Honeypot — verborgen voor mensen, zichtbaar voor bots */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.form-card .cta {
    color: var(--cyber1);
    cursor: pointer;
    margin-top: .5rem;
}
.form-card .cta:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}
.form-status {
    margin-top: 1rem;
    padding: .9rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    display: none;
}
.form-status.is-success {
    display: block;
    background: var(--cyber2-light);
    color: var(--cyber1);
    border: 1px solid var(--cyber2);
}
.form-status.is-error {
    display: block;
    background: rgba(192, 57, 43, .08);
    color: #c0392b;
    border: 1px solid #c0392b;
}
.form-status.is-info {
    display: block;
    background: rgba(0, 86, 179, .06);
    color: var(--cyber1);
    border: 1px solid var(--cyber2);
}
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
}

/* === Wachtrij-paneel (vast rechtsonder, inklapbaar) === */
.waitlist {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    width: 340px;
    max-width: calc(100vw - 2rem);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0, 32, 64, .24);
    overflow: hidden;
}
.waitlist-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .9rem 2.7rem .9rem 1.1rem; /* ruimte rechts voor het sluitkruisje */
    background: linear-gradient(135deg, var(--cyber1), var(--cyber2));
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}
.waitlist-bar-title {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.waitlist-bar-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
/* Sluitkruisje: verbergt het paneel en onthoudt die keuze (main.js). */
.waitlist-close {
    position: absolute;
    top: .58rem;
    right: .5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    opacity: .85;
    font-size: 1rem;
    line-height: 1;
    padding: .4rem .5rem;
    border-radius: 8px;
}
.waitlist-close:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.waitlist-chevron {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transform: rotate(0deg);
    transition: transform .3s ease;
}
.waitlist.is-collapsed .waitlist-chevron { transform: rotate(180deg); }
.waitlist-body {
    padding: 1.1rem;
    max-height: 70vh;
    overflow-y: auto;
}
.waitlist.is-ready .waitlist-body {
    transition: max-height .35s ease, padding .35s ease, opacity .25s ease;
}
.waitlist.is-collapsed .waitlist-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}
.waitlist-intro {
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.waitlist-optional-note {
    margin: 0 0 .85rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.form-group label .opt {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    opacity: .8;
}
.waitlist-form .form-group { margin-bottom: .85rem; }
.waitlist-form .cta {
    width: 100%;
    margin-top: .25rem;
    color: var(--cyber1);
    cursor: pointer;
}
.waitlist-form .cta:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}
.waitlist-form .form-status { margin-top: .85rem; font-size: .9rem; }
@media (max-width: 640px) {
    .waitlist {
        right: .75rem;
        bottom: .75rem;
        left: .75rem;
        width: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .waitlist .waitlist-body,
    .waitlist-chevron { transition: none; }
}

/* === Footer === */
footer {
    margin-top: auto;
    background: var(--heading);
    color: rgba(255, 255, 255, .7);
    border-top: 3px solid transparent;
    border-image: var(--gradient-brand) 1;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    padding: 3rem 0 2rem;
}
.footer-brand p {
    font-size: .9rem;
    line-height: 1.7;
    margin-top: .75rem;
    color: rgba(255, 255, 255, .55);
}
.footer-col h4 {
    color: #fff;
    font-size: .95rem;
    margin-bottom: .75rem;
}
.footer-col ul {
    list-style: none;
}
.footer-col li {
    margin-bottom: .4rem;
}
.footer-col a {
    color: rgba(255, 255, 255, .6);
    font-size: .875rem;
    transition: color .2s;
}
.footer-col a:hover {
    color: var(--cyber2);
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 1.25rem 0;
    text-align: center;
    font-size: .8rem;
    color: rgba(255, 255, 255, .4);
}
.footer-legal {
    margin-bottom: .35rem;
    color: rgba(255, 255, 255, .55);
}

/* === NIS2 self-assessment === */
.nis2-check { padding: 4rem 0; background: var(--bg-warm); }
.check-questions { max-width: 600px; margin: 0 auto; }
.check-question {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
    cursor: default;
}
.check-label { font-weight: 600; color: var(--heading); margin-bottom: .75rem; }
.check-hint { font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; line-height: 1.5; }
.check-options { display: flex; gap: .75rem; }
.check-btn {
    padding: .5rem 1.5rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.check-btn:hover { border-color: var(--cyber1); color: var(--cyber1); }
.check-btn.selected {
    border-color: var(--cyber1);
    background: var(--cyber1);
    color: #fff;
}
.check-result { max-width: 600px; margin: 1.5rem auto 0; }
.result-box {
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}
.result-box h3 { margin-bottom: .75rem; font-size: 1.15rem; }
.result-box p { margin-bottom: 1.25rem; color: var(--text-muted); }
.result-yes { background: rgba(0, 86, 179, .08); border: 2px solid var(--cyber1); }
.result-yes h3 { color: var(--cyber1); }
.result-maybe { background: rgba(245, 158, 11, .08); border: 2px solid #f59e0b; }
.result-maybe h3 { color: #b45309; }
.result-no { background: rgba(16, 185, 129, .08); border: 2px solid #10b981; }
.result-no h3 { color: #047857; }
.check-disclaimer {
    max-width: 600px;
    margin: 1.5rem auto 0;
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* === MCZ-subsidie === */
.mcz-stats { padding: 3rem 0; background: var(--bg); }
.mcz-check { padding: 4rem 0; background: var(--bg-warm); }
.mcz-explainer { padding: 5rem 0; background: var(--bg); }
.mcz-compare { padding: 5rem 0; background: var(--bg-warm); }
.mcz-steps { padding: 5rem 0; background: var(--bg); }

/* === NIS2 explainer === */
.nis2-explainer { padding: 5rem 0; background: var(--bg); }
.nis2-who { padding: 5rem 0; background: var(--bg-warm); }
.nis2-requirements { padding: 5rem 0; background: var(--bg); }
.nis2-cbw { padding: 5rem 0; background: var(--bg-warm); }
.nis2-help { padding: 5rem 0; background: var(--bg); }
.explainer-content { max-width: 640px; }
.explainer-content p { margin-bottom: 1rem; line-height: 1.8; }

/* === Responsible disclosure === */
.rules-list { margin: 0 0 1rem 1.25rem; }
.rules-list li { margin-bottom: .6rem; line-height: 1.8; }
.rules-list li::marker { color: var(--cyber2); }

/* === CTA block === */
.cta-block { margin-top: 2.5rem; }
.cta-block .cta:first-child { margin-left: 0; }
.hero .cta-block { text-align: center; }
.hero .cta-block .cta:first-child { margin-left: .5rem; }
.cta-block .cta { margin: 0 .5rem; }
.cta-secondary {
    background: transparent;
    color: var(--cyber1);
    border: 2px solid var(--cyber1);
    box-shadow: none;
}
.cta-secondary:hover {
    background: var(--cyber1);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 86, 179, .25);
}
/* Variant for use on dark hero/section backgrounds */
.cta.cta-on-dark {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: none;
}
.cta.cta-on-dark:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* === Stats bar === */
.mon-intro { padding: 5rem 0; background: var(--bg-warm); }
.mon-stats { padding: 3rem 0; background: var(--bg); }
.stats-bar {
    display: flex;
    justify-content: center;
    gap: 3rem;
    text-align: center;
}
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--cyber1);
    line-height: 1.2;
}
.stat-label { font-size: .85rem; color: var(--text-muted); max-width: 12rem; margin-top: .25rem; }

/* === Monitoring sections === */
.mon-target { padding: 5rem 0; background: var(--bg-warm); }
.mon-features { padding: 5rem 0; background: var(--bg); }
.mon-cta { padding: 5rem 0; background: var(--bg-warm); }

/* === Tier table === */
.mon-tiers { padding: 5rem 0; background: var(--bg); }
.tier-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tier-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.tier-table th,
.tier-table td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
}
.tier-table thead th {
    background: var(--heading);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .02em;
}
.tier-table thead th:first-child { width: 55%; }
.tier-table thead th:not(:first-child) { text-align: center; width: 22.5%; }
.tier-who {
    display: block;
    margin-top: .25rem;
    font-weight: 400;
    font-size: .75rem;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .75);
}
.tier-info {
    display: inline-flex;
    vertical-align: middle;
    margin-left: .35rem;
    color: rgba(255, 255, 255, .75);
    transition: color .15s ease;
}
.tier-info:hover, .tier-info:focus-visible { color: #fff; }
.tier-info svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tier-group td {
    font-weight: 700;
    color: var(--cyber1);
    background: var(--cyber1-light);
    font-size: .85rem;
    letter-spacing: .02em;
}
.tier-table td.tier-check { text-align: center; vertical-align: middle; color: var(--cyber1); font-weight: 700; }
.tier-table td.tier-cross { text-align: center; vertical-align: middle; color: var(--text-muted); }
.tier-table td.tier-option { text-align: center; vertical-align: middle; color: var(--cyber1); font-weight: 700; }
.tier-table tfoot td {
    border-bottom: none;
    background: var(--cyber1-light);
    font-weight: 600;
    vertical-align: middle;
}
.tier-price-cell { text-align: center; }
/* .tier-price is nu een <button> (opent de aanvraag-modal): knop-defaults weg,
   verder identiek oogpunt als de vroegere tekst, plus een duidelijke
   klik-affordance. */
.tier-price {
    display: inline-block;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--cyber1);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
    padding: 0;
}
.tier-price:hover, .tier-price:focus-visible { text-decoration-style: solid; }
.tier-note {
    max-width: 46rem;
    margin-top: 1.5rem;
    font-size: .9rem;
    color: var(--text-muted);
}

/* === Aanvraag prijsopgave (modal) === */
body.modal-open { overflow: hidden; }
.calc-modal {
    margin: auto; /* hercentreren: de globale reset (margin: 0) schakelt de UA-centrering van <dialog> uit */
    border: none;
    border-radius: 12px;
    padding: 0;
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    box-shadow: var(--shadow-hover);
}
@media (max-width: 480px) {
    .calc-modal { width: calc(100vw - 1rem); max-height: calc(100vh - 1.5rem); }
    .calc-inner { padding: 1.25rem; }
}
.calc-modal::backdrop { background: rgba(10, 22, 40, .55); }
.calc-inner { padding: 1.75rem; }
.calc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.calc-head h3 { color: var(--heading); }
.calc-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: .4rem .55rem;
    color: var(--text-muted);
    border-radius: 8px;
}
.calc-close:hover { background: var(--bg); color: var(--heading); }
.calc-packages {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .85rem 1rem;
    margin: 1rem 0;
}
.calc-packages legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }
.calc-choice {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .95rem;
    margin: .4rem 0;
    cursor: pointer;
}
.calc-choice input { margin-top: .2rem; accent-color: var(--cyber1); }
.calc-choice-sub {
    display: block;
    font-size: .875rem;
    color: var(--text-muted);
}
/* Labels even hoog houden zodat de invoervakken naast elkaar uitlijnen,
   ook als het computers-label over twee regels loopt. */
.calc-fields .form-group { margin-bottom: 0; }
.calc-fields .form-group label { flex: 1; }
/* Aantallen duidelijk herkenbaar als invulveld: witte achtergrond en een
   opvallende rand; de focus-stijl komt van .form-group input:focus. */
.calc-fields input[type="number"] {
    background: var(--white);
    border-color: var(--cyber2);
}
.calc-hint {
    display: block;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}
.calc-result {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: center;
    margin-top: 1.25rem;
}
.calc-msp-note { margin-top: .5rem; font-size: .85rem; color: var(--text-muted); }
.calc-total {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cyber1);
    line-height: 1.4;
}
.calc-total-sub {
    display: block;
    font-size: .85rem;
    font-weight: 400;
    color: var(--text-muted);
}
.calc-offerte {
    margin-top: 1.25rem;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    text-align: center;
}
.calc-offerte .cta {
    cursor: pointer;
    background: var(--cyber1);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 86, 179, .25);
}
.calc-offerte-note { margin-top: .6rem; font-size: .85rem; color: var(--text-muted); }

/* === EDR/MDR explainer === */
.mon-explainer { padding: 5rem 0; background: var(--bg-warm); }

/* === FAQ === */
.faq { padding: 5rem 0; background: var(--bg-warm); }
.faq-list { max-width: 720px; display: grid; gap: .75rem; }
/* Categoriekop boven een groep vragen (FAQ-pagina). */
.faq-group {
    max-width: 720px;
    margin: 2.5rem 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cyber1);
    letter-spacing: .01em;
}
.faq-group:first-of-type { margin-top: .5rem; }
.faq-a a {
    color: var(--cyber1);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.faq-a a:hover { color: var(--cyber2); }
.faq-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover { border-color: var(--cyber2); }
.faq-item[open] { border-color: var(--cyber1); box-shadow: var(--shadow-hover); }
.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    color: var(--heading);
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
    content: '+';
    color: var(--cyber1);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .25s var(--ease-out);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a {
    padding: 0 1.5rem 1.25rem;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: .95rem;
}
.faq-a p { margin-bottom: .75rem; }
.faq-a p:last-child { margin-bottom: 0; }

/* === Voor wie wij werken === */
.voor-wie {
    padding: 5rem 0;
    background: var(--bg);
}
.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}
.audience-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.25rem 1.75rem 2rem;
    cursor: default;
    overflow: hidden;
    transition: border-color .2s;
}
.audience-card:hover {
    border-color: var(--cyber2);
}
.audience-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--cyber1-light);
    border-radius: 12px;
    margin-bottom: 1.25rem;
}
.audience-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--cyber1);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.audience-card h3 {
    color: var(--heading);
    font-size: 1.2rem;
    margin-bottom: .55rem;
}
.audience-card h3 a {
    color: inherit;
}
.audience-card h3 a:hover {
    color: var(--cyber1);
}
.audience-card p {
    font-size: .95rem;
    color: var(--text-muted);
    line-height: 1.7;
}
.audience-note {
    margin-top: 2rem;
    font-size: .95rem;
    color: var(--text-muted);
}

/* === Over ons === */
.about-story { padding: 5rem 0; background: var(--bg-warm); }
.about-story .explainer-content { max-width: 720px; }
.about-story .explainer-content p { font-size: 1.05rem; }
.about-lead {
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--heading);
    font-weight: 600;
}
.about-lead .accent { color: var(--cyber1); }

.founders { padding: 5rem 0; background: var(--bg); }
.founder-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 760px;
}
.founder-card {
    background: #fff;
    border: 1px solid var(--border);
    border-top: 4px solid var(--cyber1);
    border-radius: 12px;
    padding: 2.25rem 1.75rem;
}
.founder-avatar {
    width: 72px;
    height: 72px;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cyber1);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .03em;
}
.founder-card h3 { color: var(--heading); font-size: 1.2rem; margin-bottom: .2rem; }
.founder-role { color: var(--cyber1); font-weight: 600; font-size: .9rem; margin-bottom: .9rem; }
.founder-card p { font-size: .95rem; color: var(--text-muted); line-height: 1.7; }
.founders-note {
    margin-top: 2rem;
    font-size: .95rem;
    color: var(--text-muted);
    max-width: 640px;
}

/* === Responsive === */
@media (max-width: 820px) {
    .addons-grid { grid-template-columns: 1fr; }
    .package-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid .trust-item:nth-child(7) { grid-column: auto; }
    .ervaring-band { flex-direction: column; align-items: flex-start; }
    .kern-card {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
    }
    .kern-tag { position: static; display: inline-block; margin-bottom: 1rem; }
}

@media (max-width: 600px) {
    .nav-links { gap: .75rem; }
    .nav-links a { font-size: .8rem; }
    .grid { grid-template-columns: 1fr; }
    .audience-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-grid .trust-item:nth-child(7) { grid-column: auto; }
    .steps { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .founder-grid { grid-template-columns: 1fr; }
    .framework-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .hero { padding: 5rem 0 3rem; min-height: 70vh; }
    .hero h1 { font-size: 2.5rem; }
    .hero-logo { margin-bottom: 1.25rem; }
    .hero-logo::before { width: 200px; height: 200px; }
    .stats-bar { flex-direction: column; gap: 1.5rem; }
    .cta-block .cta { display: block; margin: .5rem 0; max-width: 280px; }
    .hero .cta-block .cta, .hero .cta-block .cta:first-child { margin: .5rem auto; }
    .kern-body h3 { font-size: 1.4rem; }
    .addons-divider-label { display: none; }
}

/* === Mobiel hamburgermenu ===
   Progressive enhancement: de knop en het inklappen werken alleen met JS
   (vandaar de .has-js-gate). Zonder JS blijven de links gewoon zichtbaar. */
@media (max-width: 820px) {
    .has-js .nav-toggle { display: flex; }

    .has-js .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 24px rgba(0, 56, 179, .10);
        /* Ingeklapt: weggehaald uit de tab-volgorde én visueel verborgen. */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: max-height .35s var(--ease-out), opacity .25s var(--ease-out),
                    transform .3s var(--ease-out), visibility .35s;
    }
    .has-js header.nav-open .nav-links {
        max-height: 80vh;
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .has-js .nav-links a {
        display: block;
        padding: .85rem 1.5rem;
        font-size: 1rem;
        border-bottom: 0;
        border-left: 3px solid transparent;
        transition: background .2s, color .2s, border-color .2s;
    }
    .has-js .nav-links a:hover,
    .has-js .nav-links a[aria-current="page"],
    .has-js .page-over .nav-links .nav-over,
    .has-js .page-nis2 .nav-links .nav-nis2,
    .has-js .page-faq .nav-links .nav-faq,
    .has-js .page-mon .nav-links .nav-mon,
    .has-js .page-awareness .nav-links .nav-awareness,
    .has-js .page-intake .nav-links .nav-intake,
    .has-js .page-compliance .nav-links .nav-compliance,
    .has-js .page-mcz .nav-links .nav-mcz {
        background: var(--cyber1-light);
        border-bottom-color: transparent;
        border-left-color: var(--cyber2);
        color: var(--cyber1);
    }

    /* Diensten-uitklapmenu: inline binnen het mobiele menu i.p.v. zwevend. */
    .has-js .nav-item { width: 100%; }
    .has-js .nav-dropdown-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: .85rem 1.5rem;
        font-size: 1rem;
        border-bottom: 0;
        border-left: 3px solid transparent;
    }
    .has-js .page-mon .nav-dropdown-toggle,
    .has-js .page-awareness .nav-dropdown-toggle,
    .has-js .page-intake .nav-dropdown-toggle,
    .has-js .page-compliance .nav-dropdown-toggle {
        background: var(--cyber1-light);
        border-bottom-color: transparent;
        border-left-color: var(--cyber2);
        color: var(--cyber1);
    }
    .has-js .nav-caret { width: 16px; height: 16px; }
    .has-js .nav-dropdown {
        position: static;
        transform: none;
        min-width: 0;
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--bg-warm);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s var(--ease-out);
    }
    .has-js .nav-dropdown::before { display: none; }
    /* Neutraliseer de desktop-hoverstaat op touch. */
    .has-js .nav-has-dropdown:hover .nav-dropdown,
    .has-js .nav-has-dropdown:focus-within .nav-dropdown { transform: none; }
    .has-js .nav-has-dropdown.is-open .nav-dropdown { max-height: 60vh; }
    .has-js .nav-dropdown a { padding-left: 2.9rem; }

    /* Contact springt eruit als merk-knop onderaan het menu. */
    .has-js .nav-links .nav-contact {
        margin: .65rem 1.5rem .25rem;
        padding: .85rem 1.5rem;
        text-align: center;
        background: var(--cyber1);
        color: #fff;
        border-left: 0;
        border-radius: 8px;
        font-weight: 700;
        transition: background .2s;
    }
    .has-js .nav-links .nav-contact:hover {
        background: var(--cyber2);
        color: #fff;
        border-left-color: transparent;
    }

    /* Klantportaal als tweede knop onder Contact */
    .has-js .nav-links .nav-portal {
        margin: .5rem 1.5rem .25rem;
        padding: .8rem 1.5rem;
        text-align: center;
        border: 1.5px solid var(--cyber1);
        border-radius: 8px;
        font-weight: 700;
        letter-spacing: .03em;
        color: var(--cyber1);
    }
    .has-js .nav-links .nav-portal:hover {
        background: var(--cyber1);
        border-color: var(--cyber1);
        color: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-bar,
    .has-js .nav-links,
    .has-js .nav-links .nav-contact,
    .nav-links .nav-portal::before,
    footer .footer-portal::before { transition: none; }
}

/* === Privacyverklaring / juridische langleespagina === */
/* Lange leespagina: linksuitgelijnd en smal gezet voor leesbaarheid, i.p.v. de
   gecentreerde marketing-opmaak van de rest van de site. */
.page-privacy .hero { min-height: 56vh; }

.legal { padding: 4rem 0; background: var(--bg-warm); }
/* Elk blok hieronder zet zijn eigen max-width: de pagina heeft geen
   wrapper-element, de .container is 960px breed en de leeskolom 760px. */
.legal-status,
.legal-toc,
.legal-part,
.legal-chapter,
.legal-meta { overflow-wrap: break-word; }

/* Statusblok bovenaan: zolang de verklaring een concept is, moet dat met
   zoveel woorden bovenaan staan. */
.legal-status {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--cyber1);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.legal-status h2 { font-size: 1.1rem; color: var(--heading); margin-bottom: .5rem; }
.legal-status p { font-size: .95rem; line-height: 1.7; color: var(--text-muted); margin-bottom: .5rem; }
.legal-status p:last-child { margin-bottom: 0; }

/* Inhoudsopgave */
.legal-toc {
    display: block;
    height: auto;
    max-width: 760px;
    margin: 0 auto 3rem;
    padding: 1.5rem 1.75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.legal-toc h2 { font-size: 1.1rem; color: var(--heading); margin-bottom: .9rem; }
.legal-toc ol { margin: 0; padding-left: 2.5rem; }
.legal-toc ol li { margin-bottom: .35rem; line-height: 1.6; }
.legal-toc li::marker { color: var(--cyber2); font-weight: 700; }
.legal-toc .legal-toc-part {
    margin: 1.25rem 0 .5rem;
    font-weight: 700;
    color: var(--heading);
    font-size: .9rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.legal-toc .legal-toc-part:first-of-type { margin-top: 0; }
.legal-toc-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); }

/* Deel-scheiding (A: website, B: portaal, C: rechten) */
.legal-part {
    max-width: 760px;
    margin: 3.5rem auto 2rem;
    padding-top: 1.75rem;
    border-top: 2px solid var(--border);
}
.legal-part-label {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyber1);
    margin-bottom: .4rem;
}
.legal-part h2 { font-size: 1.6rem; font-weight: 800; color: var(--heading); letter-spacing: -.01em; }
.legal-part p { margin-top: .6rem; line-height: 1.75; color: var(--text-muted); }

/* Hoofdstukken */
.legal-chapter { max-width: 760px; margin: 0 auto 2.5rem; scroll-margin-top: 90px; }
.legal-chapter h3 {
    display: flex;
    gap: .6rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: .75rem;
    line-height: 1.35;
}
.legal-chapter h3 .legal-num {
    flex: 0 0 auto;
    color: var(--cyber2);
    font-variant-numeric: tabular-nums;
}
.legal-chapter h4 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cyber1);
    margin: 1.5rem 0 .5rem;
}
.legal-chapter p { margin-bottom: 1rem; line-height: 1.8; }
.legal-chapter ul,
.legal-chapter ol { margin: 0 0 1rem; padding-left: 1.6rem; }
.legal-chapter li { margin-bottom: .45rem; line-height: 1.75; }
.legal-chapter li::marker { color: var(--cyber2); }
.legal-chapter li > ul { margin-top: .45rem; }

/* Tabellen (bewaartermijnen, verwerkers) */
.legal-table .eu-flag { display: inline-block; width: 18px; height: 12px; margin-right: 0.35em; vertical-align: -1px; border-radius: 1px; }
.legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.25rem; }
.legal-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    font-size: .95rem;
}
.legal-table th,
.legal-table td {
    padding: .7rem .9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    line-height: 1.6;
}
.legal-table thead th {
    background: var(--cyber1-light);
    color: var(--heading);
    font-weight: 700;
    white-space: nowrap;
}
.legal-table tbody tr:last-child td { border-bottom: 0; }

/* Nog te bevestigen feit: expliciet gemarkeerd i.p.v. een gok opschrijven. */
.legal-check {
    display: inline-block;
    padding: .05rem .45rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    font-size: .85em;
    font-weight: 700;
    color: #92400e;
    white-space: nowrap;
}

.legal-chapter code {
    font-family: var(--mono);
    font-size: .9em;
    padding: .1rem .35rem;
    background: var(--cyber1-light);
    border-radius: 4px;
    word-break: break-all;
}

.legal-meta {
    max-width: 760px;
    margin: 3rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: .9rem;
    color: var(--text-muted);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .legal { padding: 3rem 0; }
    .legal-toc ol { padding-left: 1.9rem; }
    .legal-chapter ul,
    .legal-chapter ol { padding-left: 1.3rem; }
    .legal-status,
    .legal-toc { padding: 1.1rem 1.25rem; }
}