/* (Inter @import verwijderd — DM Sans is al geladen via header.php) */

    :root {
        --primary-color: #388e3c;
        --primary-hover: #2e7d32;
        --accent-glow: rgba(56, 142, 60, 0.4);
        --bg-light: #f1f8e9;
        --text-dark: #2e3b32;
        --glass-bg: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(56, 142, 60, 0.2);
    }

    .hero-modern,
    .main-container {
        font-family: 'DM Sans', system-ui, sans-serif;
        color: var(--text-dark);
    }

    body {
        background: var(--bg-light);
        overflow-x: hidden;
    }

    body.dark {
        --bg-light: #1b261b;
        --text-dark: #e8f5e9;
        --glass-bg: rgba(30, 40, 30, 0.6);
        --glass-border: rgba(129, 199, 132, 0.1);
    }

    .loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: transparent;
        z-index: 9999;
    }

    .loader .bar {
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #ffd54f, #ffb300);
        box-shadow: 0 0 10px rgba(255, 179, 0, .7);
        animation: load 1s cubic-bezier(.4, 0, .2, 1) forwards, fadeout .5s ease 1s forwards;
    }

    @keyframes load {
        from {
            width: 0%
        }

        to {
            width: 100%
        }
    }

    @keyframes fadeout {
        from {
            opacity: 1
        }

        to {
            opacity: 0;
            visibility: hidden
        }
    }

    .hero-modern {
        position: relative;
        height: calc(100vh - 56px);
        /* 56px = Bootstrap navbar hoogte */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-size: cover;
        background-position: center;
        color: white;
        padding: 80px 20px;
        overflow: hidden;
    }


    .hero-content {
        max-width: 600px;
        /* optional, keeps content from stretching too wide */
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 15px;
        text-shadow: 0 4px 20px rgba(0, 0, 0, .5);
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        font-weight: 300;
        opacity: .9;
        margin-bottom: 30px;
        max-width: 600px;
    }

    .btn-modern {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 32px;
        background: var(--primary-color);
        color: white;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        border-radius: 50px;
        transition: all .3s ease;
        box-shadow: 0 4px 15px var(--accent-glow);
        border: 1px solid rgba(255, 255, 255, .1);
    }

    .btn-modern:hover {
        background: var(--primary-hover);
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 25px var(--accent-glow);
        color: white;
    }

    .main-container {
        max-width: 1200px;
        margin: 60px auto;
        padding: 0 20px;
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
    }

    .glass-card {
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 8px 32px rgba(46, 125, 50, .05);
        transition: transform .3s ease, box-shadow .3s ease;
    }

    .glass-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(46, 125, 50, .15);
    }

    .glass-card h3 {
        color: var(--primary-color);
        font-weight: 800;
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 1.5rem;
    }

    body.dark .glass-card h3 {
        color: #81c784;
    }

    .separator-spacing {
        height: 60px;
    }

    .section-title {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 30px;
        text-align: center;
        color: var(--primary-color);
        position: relative;
    }

    .section-title::after {
        content: '';
        display: block;
        width: 60px;
        height: 4px;
        background: #81c784;
        margin: 10px auto 0;
        border-radius: 2px;
    }

    /* ── Swiper carousel ── */
    .carousel-swiper-wrap {
        padding: 10px 0 30px;
    }

    .carousel-swiper .swiper-slide {
        width: 300px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(46, 125, 50, .12);
        cursor: pointer;
    }

    .carousel-swiper .swiper-slide img {
        width: 100%;
        height: 210px;
        object-fit: cover;
        display: block;
    }

    /* coverflow shadow override */
    .carousel-swiper .swiper-slide-shadow-left,
    .carousel-swiper .swiper-slide-shadow-right {
        border-radius: 16px;
    }

    /* Reset gap left by header.php container */
    .container.mt-4 {
        display: none !important;
    }

    body>.container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes scaleUp {
        from {
            transform: scale(.95)
        }

        to {
            transform: scale(1)
        }
    }

    /* viewer */
    .viewer {
        position: fixed;
        inset: 0;
        background: rgba(10, 25, 12, .85);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        opacity: 0;
        animation: fadeIn .3s forwards;
    }

    .viewer img {
        max-width: 90vw;
        max-height: 80vh;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
        transform: scale(.95);
        animation: scaleUp .3s forwards;
    }

    .viewertext {
        color: white;
        margin-top: 20px;
        font-size: 1.2rem;
        font-weight: 600;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    }

    .close-viewer {
        position: absolute;
        top: 30px;
        right: 40px;
        font-size: 40px;
        color: #aed581;
        cursor: pointer;
        transition: transform .2s;
    }

    .close-viewer:hover {
        transform: rotate(90deg) scale(1.1);
        color: white;
    }

    @media (max-width: 768px) {
        .hero-title {
            font-size: 2.5rem;
        }
    }

    .scroll-down {
        position: absolute;
        bottom: 48px;
        /* was 28px */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-decoration: none;
        cursor: pointer;
        animation: scroll-bounce 1.8s ease-in-out infinite;
        filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
    }

    .scroll-down span {
        font-size: 11px;
        color: #A7FF00;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.8;
    }

    @keyframes scroll-bounce {

        0%,
        100% {
            transform: translateX(-50%) translateY(0);
            opacity: 0.75;
        }

        50% {
            transform: translateX(-50%) translateY(10px);
            opacity: 1;
        }
    }

    html {
        scroll-behavior: smooth;
    }