/* from 4.html */

        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --primary: #3b82f6;
            --primary-light: #60a5fa;
            --primary-dark: #2563eb;
            --secondary: #8b5cf6;
            --accent: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-card: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-light: #94a3b8;
            --border: #e2e8f0;
            --shadow: rgba(0, 0, 0, 0.05);
            --gradient-main: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
            --gradient-hover: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #db2777 100%);
        }

        [data-theme="dark"] {
            --bg-primary: #0f172a;
            --bg-secondary: #1e293b;
            --bg-card: #1e293b;
            --text-primary: #f1f5f9;
            --text-secondary: #cbd5e1;
            --text-light: #94a3b8;
            --border: #334155;
            --shadow: rgba(0, 0, 0, 0.2);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            transition: background 0.3s ease, color 0.3s ease;
            overflow-x: hidden;
        }

        /* Geanimeerde Achtergrond */
        .animated-background {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
        }

        .gradient-mesh {
            position: absolute; inset: 0;
            background:
                radial-gradient(circle at 25% 75%, rgba(59,130,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 75% 25%, rgba(139,92,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 45% 45%, rgba(236,72,153,.06) 0%, transparent 60%),
                radial-gradient(circle at 65% 75%, rgba(16,185,129,.06) 0%, transparent 60%);
            animation: meshMove 30s ease-in-out infinite;
            will-change: background;
        }

        @keyframes meshMove {
            0%,100% { background:
                radial-gradient(circle at 25% 75%, rgba(59,130,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 75% 25%, rgba(139,92,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 45% 45%, rgba(236,72,153,.06) 0%, transparent 60%),
                radial-gradient(circle at 65% 75%, rgba(16,185,129,.06) 0%, transparent 60%);
            }
            25% { background:
                radial-gradient(circle at 75% 25%, rgba(59,130,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 25% 75%, rgba(139,92,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 65% 75%, rgba(236,72,153,.06) 0%, transparent 60%),
                radial-gradient(circle at 45% 45%, rgba(16,185,129,.06) 0%, transparent 60%);
            }
            50% { background:
                radial-gradient(circle at 65% 75%, rgba(59,130,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 45% 45%, rgba(139,92,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 75% 25%, rgba(236,72,153,.06) 0%, transparent 60%),
                radial-gradient(circle at 25% 75%, rgba(16,185,129,.06) 0%, transparent 60%);
            }
            75% { background:
                radial-gradient(circle at 45% 45%, rgba(59,130,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 65% 75%, rgba(139,92,246,.08) 0%, transparent 60%),
                radial-gradient(circle at 25% 75%, rgba(236,72,153,.06) 0%, transparent 60%),
                radial-gradient(circle at 75% 25%, rgba(16,185,129,.06) 0%, transparent 60%);
            }
        }

        /* 🦫 Bevers (vervanging voor bubbels) */
        .beaver {
            position: fixed;
            font-size: clamp(28px, 3.2vw, 48px);
            filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
            opacity: .9;
            z-index: 9999;
            pointer-events: none;
            animation: float 12s ease-in-out infinite;
            will-change: transform, opacity;
        }

        /* Kleine bever deeltjes i.p.v. particles */
        .beaver-particle {
            position: absolute;
            font-size: 18px;
            opacity: .65;
            animation: particleFloat 20s linear infinite;
            will-change: transform, opacity;
        }

        @keyframes float {
            0%   { transform: translateY(100vh) translateX(0) rotate(0deg) scale(1); opacity: 0; }
            10%  { opacity: .9; }
            90%  { opacity: .9; }
            100% { transform: translateY(-20vh) translateX(20px) rotate(360deg) scale(1.05); opacity: 0; }
        }

        @keyframes particleFloat {
            0%   { opacity: 0; transform: translateY(100vh) translateX(0) rotate(0deg); }
            5%   { opacity: 1; }
            50%  { opacity: .9; transform: translateY(50vh) translateX(20px) rotate(180deg); }
            95%  { opacity: 1; }
            100% { opacity: 0; transform: translateY(-10vh) translateX(-20px) rotate(360deg); }
        }

        [data-theme="dark"] .gradient-mesh {
            background:
                radial-gradient(circle at 25% 75%, rgba(59,130,246,.12) 0%, transparent 60%),
                radial-gradient(circle at 75% 25%, rgba(139,92,246,.12) 0%, transparent 60%),
                radial-gradient(circle at 45% 45%, rgba(236,72,153,.10) 0%, transparent 60%),
                radial-gradient(circle at 65% 75%, rgba(16,185,129,.10) 0%, transparent 60%);
        }

        /* Navigatie, hero, secties — overgenomen uit origineel */
        .navbar { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--border); padding: 1rem 0; z-index: 1000; backdrop-filter: blur(15px); transition: all .3s ease; }
        [data-theme="dark"] .navbar { background: rgba(15,23,42,.95); }
        .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5rem; font-weight: 800; background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: .5rem; }
        .nav-center { display: flex; gap: 2rem; list-style: none; align-items: center; }
        .nav-center a { color: var(--text-primary); text-decoration: none; font-weight: 500; transition: all .3s; position: relative; }
        .nav-center a:hover { color: var(--primary); }
        .nav-center a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--gradient-main); transition: width .3s; }
        .nav-center a:hover::after { width: 100%; }
        .nav-right { display: flex; gap: 1rem; align-items: center; }
        .dashboard-btn { background: var(--gradient-main); color: #fff; padding: .75rem 1.5rem; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .95rem; transition: all .3s; box-shadow: 0 4px 12px rgba(59,130,246,.3); display: flex; align-items: center; gap: .5rem; position: relative; overflow: hidden; }
        .dashboard-btn:hover { background: var(--gradient-hover); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59,130,246,.4); }
        .dashboard-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition: left .5s; }
        .dashboard-btn:hover::before { left: 100%; }
        .theme-toggle { position: relative; width: 65px; height: 32px; background: var(--gradient-main); border-radius: 32px; cursor: pointer; border: none; box-shadow: 0 4px 12px rgba(59,130,246,.3); transition: all .3s; }
        .theme-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(59,130,246,.4); }
        .theme-toggle-slider { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background: #fff; border-radius: 50%; transition: transform .3s; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
        [data-theme="dark"] .theme-toggle-slider { transform: translateX(33px); }

        .hero { margin-top: 70px; padding: 6rem 2rem; background: var(--gradient-main); position: relative; overflow: hidden; }
        .hero::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%); animation: rotate 30s linear infinite; }
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .hero-content { max-width: 1200px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
        .hero h1 { font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; color: #fff; margin-bottom: 1.5rem; text-shadow: 0 4px 12px rgba(0,0,0,.2); animation: slideInDown .8s ease; }
        @keyframes slideInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
        .hero p { font-size: 1.25rem; color: rgba(255,255,255,.95); max-width: 700px; margin: 0 auto 2rem; animation: slideInUp .8s ease .2s both; line-height: 1.7; }
        @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: slideInUp .8s ease .4s both; }
        .btn { padding: .875rem 2rem; border-radius: 12px; font-weight: 600; text-decoration: none; transition: all .3s; display: inline-block; border: 2px solid transparent; }
        .btn-primary { background: #fff; color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
        .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
        .btn-secondary { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(10px); }
        .btn-secondary:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }

        .features { padding: 5rem 2rem; background: var(--bg-secondary); }
        .container { max-width: 1200px; margin: 0 auto; }
        .section-header { text-align: center; margin-bottom: 4rem; }
        .section-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .section-subtitle { color: var(--text-secondary); font-size: 1.125rem; }
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
        .feature-card { background: var(--bg-card); border-radius: 16px; padding: 2rem; box-shadow: 0 1px 3px var(--shadow); transition: all .3s; border: 1px solid var(--border); position: relative; overflow: hidden; }
        .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-main); transform: scaleX(0); transition: transform .3s; }
        .feature-card:hover::before { transform: scaleX(1); }
        .feature-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px var(--shadow); }
        .feature-icon { width: 56px; height: 56px; background: var(--gradient-main); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 12px rgba(59,130,246,.2); }
        .feature-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; color: var(--text-primary); }
        .feature-description { color: var(--text-secondary); line-height: 1.6; }

        .api-section { padding: 5rem 2rem; background: var(--bg-primary); }
        .api-intro { max-width: 800px; margin: 0 auto 3rem; text-align: center; padding: 2rem; background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border); }
        .api-intro h3 { color: var(--primary); margin-bottom: 1rem; font-size: 1.5rem; }
        .api-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
        .api-card { background: var(--bg-card); border: 2px solid var(--border); padding: 1.5rem; border-radius: 12px; transition: all .3s; cursor: pointer; position: relative; overflow: hidden; }
        .api-card::before { content: ''; position: absolute; inset: 0; background: var(--gradient-main); opacity: 0; transition: opacity .3s; }
        .api-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 8px 20px var(--shadow); }
        .api-card:hover::before { opacity: .05; }
        .api-name { font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; position: relative; z-index: 1; }
        .api-description { font-size: .875rem; color: var(--text-secondary); position: relative; z-index: 1; }

        .faq { padding: 5rem 2rem; background: var(--bg-secondary); }
        .faq-container { max-width: 900px; margin: 0 auto; }
        .faq-item { background: var(--bg-card); border-radius: 12px; margin-bottom: 1rem; border: 1px solid var(--border); overflow: hidden; transition: all .3s; }
        .faq-item:hover { box-shadow: 0 4px 12px var(--shadow); }
        .faq-question { padding: 1.5rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-primary); transition: all .3s; }
        .faq-question:hover { color: var(--primary); background: var(--bg-secondary); }
        .faq-arrow { transition: transform .3s; color: var(--primary); }
        .faq-item.active .faq-arrow { transform: rotate(180deg); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s, padding .3s; color: var(--text-secondary); padding: 0 1.5rem; line-height: 1.7; }
        .faq-item.active .faq-answer { max-height: 800px; padding: 0 1.5rem 1.5rem; }

        .footer { padding: 3rem 2rem; background: var(--bg-card); text-align: center; border-top: 1px solid var(--border); color: var(--text-secondary); position: relative; z-index: 2; }

        @media (max-width: 768px) {
            .nav-center { display: none; }
            .nav-right { gap: .5rem; }
            .dashboard-btn { padding: .625rem 1.25rem; font-size: .9rem; }
            .features-grid, .api-grid { grid-template-columns: 1fr; }
            .hero h1 { font-size: 2.5rem; }
            .beaver { opacity: .75; }
            .beaver-particle { display: none; }
        }
    

/* Theme toggle styles (menu) */
.theme-toggle { border: 0; background: transparent; cursor: pointer; padding: 0; margin-left: .5rem; display:inline-flex; align-items:center; }
.theme-toggle-track { width: 44px; height: 24px; border-radius: 9999px; display:inline-flex; align-items:center; justify-content:center; background: #e5e7eb; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
html[data-theme="dark"] .theme-toggle-track, html.dark-theme .theme-toggle-track, body.dark-theme .theme-toggle-track { background: #334155; }
.theme-toggle-icon { font-size: 14px; line-height: 1; }


/* Base text colors for readability */
body { color: #0f172a; }
html[data-theme="dark"] body, html.dark-theme body, body.dark-theme { color: #e6eefc; }
a { color: #1d4ed8; }
html[data-theme="dark"] a, html.dark-theme a, body.dark-theme a { color: #93c5fd; }

/* Navbar above hero */
.navbar { position: relative; z-index: 50; }

/* Firefox */
.theme-slider input[type="range"]::-moz-range-track{ height:18px; border-radius:999px; background:#e5e7eb; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.theme-slider input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#111827; border:2px solid white; box-shadow:0 1px 2px rgba(0,0,0,.2); }
html[data-theme="dark"] .theme-slider input[type="range"]::-moz-range-track,
html.dark-theme .theme-slider input[type="range"]::-moz-range-track,
body.dark-theme .theme-slider input[type="range"]::-moz-range-track { background:#334155; }
html[data-theme="dark"] .theme-slider input[type="range"]::-moz-range-thumb,
html.dark-theme .theme-slider input[type="range"]::-moz-range-thumb,
body.dark-theme .theme-slider input[type="range"]::-moz-range-thumb { background:#f8fafc; border-color:#111827; }