:root{
    --bg: #0b2a36;
    --bg2:#0e3a4a;
    --primary:#ff7a00;
    --ink:#0e2a34;
    --text:#54707b;
    --muted:#5e7d89;
    --card:#ffffff;
    --max:1200px;
    --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);scroll-behavior: smooth;}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

span, p {
    line-height: 1.5em;
}

/* Layout helpers */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,3vw,24px)}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.one{grid-template-columns: 1fr}
.two{grid-template-columns:1fr}
.three{grid-template-columns:1fr}
@media(min-width:768px){.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}}

ul li {
    color: #54707b;
    line-height: 1.5em;
}

ol li {
    color: #54707b;
    line-height: 1.5em;
}

.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:#000;font-weight:700;border:0;border-radius:999px;padding:.9rem 1.25rem;box-shadow:0 6px 14px rgba(0,0,0,.15);transition:.2s}
.btn:hover{transform:translateY(-1px);filter:saturate(1.1)}
.btn.alt{background:#fff;color:#0e2a34;border:2px solid #e8eef1}

.chip{display:inline-block;font-size:.75rem;font-weight:700;color:#3b6a7a;background:#eaf2f5;border:1px solid #dbe7ec;border-radius:999px;padding:.25rem .6rem}

header{background:#fff;border-bottom:1px solid #e7eef2}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:60px;height:auto}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:#355b68;font-weight:600;}
.text-white {color:#fff}
.muted {
    font-size: 15px;
    font-weight: 300;
}

.contentMain{
    font-size: 18px !important;
}
/* Hero */
.hero{height: 460px; position:relative;isolation:isolate;color:#fff;background:radial-gradient(at bottom left, #012A3D 29%, #0F2B64C7 98%)}
.hero .wrap{padding:clamp(0px,6vw,44px) 0}
.hero h1{font-size:clamp(2rem,3.8vw,3.25rem);line-height:1.1;margin:0 0 12px}
.hero p{color:#cfe3ea;max-width:52ch;margin:0 0 24px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* Section base */
section{padding:clamp(15px,5vw,15px) 0}
h2{font-size:clamp(1.4rem,2.2vw,2rem);margin:0 0 10px}
.eyebrow{letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#5a7f8d;font-size:.8rem}
.lead{color:#54707b}

/* Cards */
.card{background:var(--card);border:1px solid #e8eef1;border-radius:var(--radius);padding:clamp(16px,2vw,20px);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.notice{background:#fff7ed;border:1px solid #ffe2c2;border-radius:12px;padding:14px}
.success{background:#e9f4ef;border:1px solid #c3e3d1;border-radius:12px;padding:14px;color:#1d7a53}

/* Checklist */
.check li{display:grid;padding-left: 45px; padding-top: 8px; gap:10px;align-items:start}
.check li::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#e9f4ef;color:#1d7a53;font-weight:900}

/* CTA bar */
.cta-bar{background:radial-gradient(at bottom left, #012A3D 29%, #0F2B64C7 98%);color:#fff}

footer{background:#061920;color:#b6c9cf;padding:32px 0;border-top:1px solid #0d3542}
footer img {
    width: 60px;
    height: 60px;
}

/* Lists */
ul{margin:0;padding-left:18px}
.cols{columns:1}
@media(min-width:992px){.cols{columns:2;column-gap:28px}}

/* Utilities */
.muted{color:#6d8892}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
.mt-0{margin-top:0}
.center{text-align:center}
.right{text-align:right}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    line-height: 1.5;
}

ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,122,0,0.25);
}
/* ===== Mobile Polish ===== */
@media (max-width: 768px) {

    .heroContent {
        max-width: 90%;
        text-align: center;
    }

    .cta-bar .container {
        max-width: 90%;
        text-align: center;
    }

    /* globale ritmes */
    .container { padding-inline: 16px; }
    section { padding: 28px 0; }
    .grid { gap: 16px; }

    /* header & menu */
    .brand img { width: 128px; }
    .nav { align-items: center; gap: 8px; }
    .menu {
        flex-wrap: wrap;
        gap: 10px;
        font-size: 16px !important;
        line-height: 1;
    }

    /* hero */
    .hero .wrap { padding: 32px 0; }
    .hero h1 { font-size: clamp(1.6rem, 6vw, 2rem); }
    .hero p { font-size: 0.95rem; }
    .cta-row { gap: 10px; }
    .btn { padding: .8rem 1rem; }
    /* Wil je knoppen full-width? uncomment:
    .cta-row .btn { width: 100%; justify-content: center; } */

    /* cards */
    .card {
        border-radius: 12px;
        padding: 14px;
        box-shadow: 0 1px 0 rgba(0,0,0,.04);
    }

    /* lijsten: luchtiger en zonder “springerige” bullets */
    ul { padding-left: 0; }
    ul li {
        list-style: none;
        position: relative;
        padding-left: 22px;
        margin-bottom: 10px;
    }
    ul li::before {
        content: "";
        position: absolute;
        left: 0; top: .6em;
        width: 8px; height: 8px;
        background: var(--primary);
        border-radius: 50%;
    }

    /* kolommen altijd stapelen (fallback, ook als je later iets mist) */
    .two, .three { grid-template-columns: 1fr !important; }

    /* CTA-bar tekst leesbaarder */
    .cta-bar h2 { font-size: 1.35rem; }
    .cta-bar p  { font-size: .95rem; }

    /* kleine marges tussen stacked sections */
    .container + .container { margin-top: 0; }
}

/* iets kleinere telefoons */
@media (max-width: 420px) {
    .brand img { width: 110px; }
    .menu { gap: 8px; font-size: 13px; }
    .btn { padding: .75rem .9rem; }
}

.removeBorder {
    border: none !important;
    box-shadow: none !important;
}

.indent {
    padding-left: 50px; padding-right: 50px;
}

.top-10 {
    margin-top: 10px !important;
}

.top-20 {
    margin-top: 20px !important;
}

.top-30 {
    margin-top: 30px !important;
}

.bottom-10 {
    margin-bottom: 10px !important;
}

.bottom-20 {
    margin-bottom: 20px !important;
}

.bottom-30 {
    margin-bottom: 30px !important;
}

ol li:not(:last-child) {
    margin-bottom: 15px;
}

.jump-in {
    animation: jump-in 0.6s ease;
    padding-left: 15px;
}