html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

:root {
    --bg-dark: #0b1320; /* diep blauwgroen voor goede contrasten */
    --brand: #17c3b2; /* accentkleur */
    --brand-2: #ffd166; /* tweede accentkleur */
    --text: #eef2f7; /* primaire tekstkleur op donker */
    --muted: #c7cfda; /* secundaire tekstkleur */
    --card: #101a2b; /* kaartachtergrond */
    --ring: 0 0 0 3px rgba(23,195,178,.35);
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color: var(--text);
    background: var(--bg-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* HERO met beeldvullende achtergrond */
.hero {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    background: #000; /* fallback */
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('/images/achtergrond.png') center/cover no-repeat;
        filter: brightness(.65);
        transform: scale(1.025); /* subtiele crop */
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(6,10,18,.55) 0%, rgba(6,10,18,.6) 55%, rgba(6,10,18,.9) 100%), radial-gradient(60% 60% at 50% 10%, rgba(23,195,178,.28), transparent 60%);
        mix-blend-mode: normal;
    }

.hero-inner {
    position: relative;
    z-index: 1;
    padding: clamp(16px, 4vw, 48px);
    max-width: 1100px;
    margin-inline: auto;
}

.eyebrow {
    display: inline-block;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .82rem;
    background: rgba(23,195,178,.16);
    color: #d7fff9;
    padding: .35rem .6rem;
    border: 1px solid rgba(23,195,178,.45);
    border-radius: 999px;
}

h1 {
    font-size: clamp(2rem, 5vw + .5rem, 4rem);
    line-height: 1.1;
    margin: .75rem 0 1rem;
}

.lead {
    font-size: clamp(1.05rem, 1.2vw + .7rem, 1.35rem);
    color: var(--muted);
    max-width: 70ch;
    margin: 0 auto 1.25rem;
}

.cta {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .9rem 1.1rem;
    border-radius: 14px;
    transition: transform .08s ease, box-shadow .2s ease;
}

    .btn:focus-visible {
        outline: none;
        box-shadow: var(--ring);
    }

.btn-primary {
    background: var(--brand);
    color: #0a0f18;
}

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 32px rgba(23,195,178,.25);
    }

.btn-secondary {
    background: rgba(255,255,255,.12);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.22);
}

    .btn-secondary:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }

/* Info-secties */
.section {
    padding: clamp(36px, 6vw, 80px) clamp(16px, 5vw, 48px);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.grid {
    display: grid;
    gap: clamp(16px, 3vw, 28px);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: clamp(16px, 2.25vw, 24px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

    .card h3 {
        margin-top: .2rem;
        margin-bottom: .35rem;
        font-size: 1.2rem;
    }

.pill {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #0b1320;
    background: var(--brand-2);
    border-radius: 999px;
    padding: .2rem .55rem;
}

.muted {
    color: var(--muted);
}

.center {
    text-align: center;
}

/* Footer */
footer {
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    color: var(--muted);
}

    footer .brand {
        font-weight: 700;
        color: var(--text);
    }

/* Toegankelijkheid / motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    .hero::before {
        transform: none;
    }
}

/* === Hero styles (light theme) === */
.hero-outer {
    position: relative;
    min-height: 56vh;
    display: grid;
    align-items: end;
    background: #f8fafc;
}

    .hero-outer .lead {
        color: #3a485c !important; /* donkerder dan standaard Bootstrap-secondary */
    }

.hero-bg {
    position: absolute;
    inset: 0;
    background: url('/images/achtergrond.png') center/cover no-repeat;
    filter: brightness(0.9) saturate(1.02);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.55) 70%, rgba(255,255,255,0.9) 100%);
}


/* spacing helper for larger screens */
@media (min-width: 992px) {
    .py-lg-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}


/* Step pills in cards */
.step-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #e7f1ff;
    color: #0d6efd;
    font-weight: 700;
}


/* Card polish */
.card {
    border-radius: .9rem;
}

    .card .card-body {
        padding: 1.25rem 1.25rem;
    }


/* Better link appearance inside muted text */
.text-body-secondary a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: .06em;
}

    .text-body-secondary a:hover {
        text-decoration: none;
    }


/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .hero-bg {
        transform: scale(1.02);
        transition: transform 600ms ease;
    }

    .hero-outer:hover .hero-bg {
        transform: scale(1.04);
    }
}

/* ===== Palet en basis ===== */
:root {
    --brand: #0d6efd; /* Bootstrap primary */
    --brand-ink: #0a1a2b; /* donkere inktkleur tbv contrast */
    --surface: #ffffff;
    --surface-soft: #f6f8fb;
    --text: #1a1f2b;
    --muted: #697386;
}

/* Beter scrollen naar ankers achter navbar */
html {
    scroll-behavior: smooth;
}

.anchor-section {
    scroll-margin-top: 84px;
}

/* ===== HERO verbeteringen ===== */
.hero-outer {
    position: relative;
    min-height: 64vh; /* iets royaler, maar niet te hoog */
    display: grid;
    align-items: end;
    background: var(--surface-soft);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: url('/images/achtergrond.png') center top/cover no-repeat;
    /* iets meer “crop” voor krachtiger beeld */
    transform: scale(1.03);
    filter: brightness(0.92) saturate(1.02);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* sterkere onder-naar-boven gradient voor tekstcontrast */
    background: linear-gradient( to bottom, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.10) 38%, rgba(255,255,255,0.32) 60%, rgba(255,255,255,0.78) 85%, rgba(255,255,255,0.96) 100% );
}
/* hero copy centreren en max-breedte beperken voor mooie regelval */
.hero-outer .container {
    position: relative;
}

.hero-outer .col-12.col-lg-10 {
    max-width: 960px;
    margin-inline: auto;
}

/* Badge “Van Woo naar Doen” beter zichtbaar */
.badge.bg-primary-subtle {
    background: rgba(13,110,253,0.12) !important;
    color: #0b5ed7 !important;
    border: 1px solid rgba(13,110,253,0.35);
    backdrop-filter: blur(2px);
    transform: translateY(.2rem);
    opacity: .95;
}

/* H1 en lead: iets donkerder en meer schaduw voor leesbaarheid */
.display-5 {
    color: #21272e;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.lead {
    color: #3a485c !important;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

/* Hero-knoppen: meer contrast, betere focus en hover */
.btn.btn-primary.btn-lg {
    background: #14b8a6; /* teal als accent */
    border-color: #129e90;
    color: #062b2b;
}

    .btn.btn-primary.btn-lg:hover {
        background: #10a192;
        border-color: #0f8b80;
    }

    .btn.btn-primary.btn-lg:focus-visible,
    .btn.btn-outline-secondary.btn-lg:focus-visible {
        box-shadow: 0 0 0 .25rem rgba(20,184,166,.35);
    }

/* ===== Cards/secties ===== */
.card {
    border-radius: 1rem;
    border: 1px solid rgba(10,20,35,0.06);
    box-shadow: 0 4px 16px rgba(16,24,40,0.06);
    background: linear-gradient(180deg,#fff 0%, #fff 60%, #f9fbff 100%);
}

    .card .card-body {
        padding: 1.25rem 1.25rem;
    }

.step-pill {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: #e7f1ff;
    color: #0d6efd;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(13,110,253,.25);
}

/* Onderkopjes en secundaire tekst */
h2.h3.fw-bold {
    color: var(--text);
}

.text-body-secondary {
    color: var(--muted) !important;
}

/* ===== Responsiveness & motion ===== */
@media (min-width: 992px) {
    .py-lg-6 {
        padding-top: 5.5rem !important;
        padding-bottom: 5.5rem !important;
    }

    .hero-outer {
        min-height: 66vh;
    }
}

@media (max-width: 575.98px) {
    .display-5 {
        font-size: calc(1.9rem + .9vw);
    }

    .lead {
        font-size: 1.05rem;
    }
}

/* Respecteer reduced motion en zet de subtiele hero-zoom uit */
@media (prefers-reduced-motion: no-preference) {
    .hero-bg {
        transition: transform 600ms ease;
    }

    .hero-outer:hover .hero-bg {
        transform: scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg {
        transform: none !important;
        transition: none !important;
    }
}
@media (max-width: 576px) {
    .btn.btn-lg {
        padding: .65rem 1rem;
        font-size: 1rem;
        border-radius: .8rem;
    }
}
.hero-outer .btn-outline-primary {
    background: rgba(255,255,255,.75);
    border: 1px solid #0d6efd;
    color: #0d6efd;
}

    .hero-outer .btn-outline-primary:hover {
        background: #0d6efd;
        color: #fff;
    }