/* ===== CSS THEMA VARIABELEN ===== */
 
        body { font-family: 'Source Sans 3', sans-serif; background-color: #f0f7ff; }
        h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Montserrat', sans-serif; }
        html { scroll-behavior: smooth; overflow-y: scroll !important; }

        /* Thema hulpklassen */
        .bg-accent       { background-color: var(--accent-500); }
        .bg-accent-600   { background-color: var(--accent-600); }
        .text-accent     { color: var(--accent-500); }
        .text-accent-400 { color: var(--accent-400); }
        .text-accent-600 { color: var(--accent-600); }
        .border-accent   { border-color: var(--accent-500); }

        .bg-accent-gradient {
            background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
        }
        .bg-accent-gradient-light {
            background: linear-gradient(135deg, var(--accent-400), var(--accent-500));
        }
        .text-accent-gradient {
            background: linear-gradient(135deg, var(--accent-400), var(--accent-300));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .text-hero-gradient {
            background: linear-gradient(135deg, var(--accent-400), var(--accent-300), var(--accent-400));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .text-section-gradient {
            background: linear-gradient(135deg, var(--accent-500), var(--accent-400));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .shadow-accent   { box-shadow: 0 10px 25px rgba(var(--accent-rgb-500), 0.3); }
        .shadow-accent-lg { box-shadow: 0 20px 40px rgba(var(--accent-rgb-500), 0.35); }
        .hover-shadow-accent:hover { box-shadow: 0 20px 40px rgba(var(--accent-rgb-500), 0.4); }
        .bg-accent-10 { background-color: rgba(var(--accent-rgb-500), 0.1); }
        .bg-accent-20 { background-color: rgba(var(--accent-rgb-500), 0.2); }
        .border-accent-30 { border-color: rgba(var(--accent-rgb-500), 0.3); }

        /* Nav hover */
        .nav-link:hover { color: var(--accent-600); }
        .nav-link:hover .nav-underline { width: 75%; }
        .nav-underline {
            position: absolute; bottom: 0; left: 50%;
            width: 0; height: 4px;
            background: linear-gradient(to right, var(--accent-400), var(--accent-300));
            transform: translateX(-50%);
            transition: width 0.3s ease;
            border-radius: 9999px;
        }
        .nav-link:hover .nav-bg { background-color: var(--accent-50); }

        /* CTA Button */
        .cta-button {
            position: relative; overflow: hidden;
            transition: all 0.3s ease;
        }
        .cta-button::after {
            content: ''; position: absolute;
            top: 50%; left: 50%;
            width: 300%; height: 300%;
            background: rgba(255,255,255,0.3);
            transform: translate(-50%,-50%) scale(0);
            border-radius: 50%;
            transition: transform 0.5s ease;
        }
        .cta-button:hover::after { transform: translate(-50%,-50%) scale(1); }
        .cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
        .cta-button:active { transform: translateY(0); box-shadow: 0 5px 10px rgba(0,0,0,0.2); }

        /* Mobile menu */
        #mobile-menu {
            max-height: 85dvh; overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding-bottom: env(safe-area-inset-bottom);
            scrollbar-width: thin;
        }

        /* Scroll Reveal */
        .reveal { opacity: 0; transform: translateY(35px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }

        /* Glow pulse */
        @keyframes glow-pulse {
            0%, 100% { box-shadow: 0 0 20px rgba(var(--accent-rgb-500), 0.15); }
            50%       { box-shadow: 0 0 40px rgba(var(--accent-rgb-500), 0.3); }
        }
        .animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

        /* Hero entrance */
        @keyframes hero-slide-up   { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
        @keyframes hero-slide-left { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
        .hero-animate-1 { animation: hero-slide-left 0.8s 0.2s cubic-bezier(0.22,1,0.36,1) both; }
        .hero-animate-2 { animation: hero-slide-up  0.8s 0.4s cubic-bezier(0.22,1,0.36,1) both; }
        .hero-animate-3 { animation: hero-slide-up  0.8s 0.6s cubic-bezier(0.22,1,0.36,1) both; }
        .hero-animate-4 { animation: hero-slide-up  0.8s 0.8s cubic-bezier(0.22,1,0.36,1) both; }

        /* Scroll indicator */
        .scroll-indicator { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:100; animation: bounce 2s infinite; }
        .scroll-arrow { display:inline-block; width:40px; height:40px; background:white; border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; }
        .scroll-arrow:hover { background:#f0f0f0; transform:scale(1.1); }
        .scroll-arrow svg { width:24px; height:24px; fill:#333; }
        @keyframes bounce {
            0%,20%,50%,80%,100% { transform:translateY(0) translateX(-50%); }
            40% { transform:translateY(-20px) translateX(-50%); }
            60% { transform:translateY(-10px) translateX(-50%); }
        }

        /* Card hover */
        .card-hover { transition: all 0.5s cubic-bezier(0.22,1,0.36,1); }
        .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(var(--accent-rgb-500), 0.12); }

        /* Stat card */
        .stat-card { transition: all 0.5s cubic-bezier(0.22,1,0.36,1); }
        .stat-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(var(--accent-rgb-500), 0.3); }
        .stat-card:hover .stat-icon { transform: scale(1.1) rotate(6deg); }

        /* Float */
        @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
        .animate-float { animation: float 3s ease-in-out infinite; }

        /* Water drop */
        @keyframes water-drop {
            0%   { transform:translateY(-20px) scale(0); opacity:0; }
            50%  { transform:translateY(0) scale(1); opacity:0.6; }
            100% { transform:translateY(20px) scale(0.5); opacity:0; }
        }
        .water-drop {
            position:absolute; width:8px; height:12px;
            background: linear-gradient(180deg, rgba(var(--accent-rgb-400),0.4), rgba(var(--accent-rgb-400),0.1));
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            animation: water-drop 3s ease-in-out infinite;
        }
        .water-drop:nth-child(1) { top:15%; left:10%; animation-delay:0s; }
        .water-drop:nth-child(2) { top:25%; right:15%; animation-delay:0.8s; width:6px; height:9px; }
        .water-drop:nth-child(3) { bottom:35%; left:8%; animation-delay:1.6s; width:10px; height:15px; }
        .water-drop:nth-child(4) { bottom:20%; right:12%; animation-delay:2.4s; width:5px; height:8px; }

        /* Modal */
        .modal-animate { animation: modalFadeIn 0.3s ease-out; }
        @keyframes modalFadeIn { from { opacity:0; transform:translateY(-20px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }

        /* Process step */
        .process-icon { transition: all 0.3s ease; }
        .process-step:hover .process-icon { transform: scale(1.1) rotate(6deg); }

        /* Testimonial */
        .testimonial-card { transition: all 0.5s cubic-bezier(0.22,1,0.36,1); }
        .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(var(--accent-rgb-500), 0.1); }

        /* Form focus */
        .form-input:focus {
            border-color: var(--accent-500) !important;
            background-color: #fff;
            box-shadow: 0 0 0 4px rgba(var(--accent-rgb-500), 0.1);
        }

        /* Slide down */
        @keyframes slideDown { from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }
        #offerte-notification > div > div { animation: slideDown 0.5s cubic-bezier(0.34,1.56,0.64,1); }
        @media (max-width:768px) { .bg-opacity-95 { background-color: rgba(15,23,42,0.98); } }
		
		/* Overschrijf de groene alert styling */
.swal2-html-container .bg-green-50 {
    background-color: var(--accent-50) !important;
}
.swal2-html-container .border-green-200 {
    border-color: var(--accent-200) !important;
}
.swal2-html-container .text-green-800,
.swal2-html-container .text-green-600 {
    color: var(--accent-700) !important;
}
.swal2-html-container .border-green-100 {
    border-color: var(--accent-100) !important;
}
.swal2-html-container .bg-green-100 {
    background-color: var(--accent-100) !important;
}