/* Modern Variables */
    :root {
        --primary: #2563eb;
        --primary-dark: #1d4ed8;
        --secondary: #475569;
        --accent: #f59e0b;
        --text: #1e293b;
        --text-light: #64748b;
        --background: #f8fafc;
        --white: #ffffff;
        --header-height: 80px;
        --radius: 10px;
        --shadow: 0 4px 12px rgba(0,0,0,0.08);
        --shadow-hover: 0 8px 18px rgba(0,0,0,0.12);
        --transition: all 0.25s ease;
    }

    /* Base */
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        margin: 0;
        padding: 0;
        background-color: var(--background);
        color: var(--text);
        line-height: 1.6;
    }

    /* HEADER */
    header {
        background: var(--white);
        color: var(--text);
        padding: 0 24px;
        height: var(--header-height);
        position: sticky;
        top: 0;
        box-shadow: var(--shadow);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header .branding {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .site-logo {
        width: 120px;
        height: auto;
        display: block;
        transition: var(--transition);
    }

    .site-logo:hover {
        transform: scale(1.08);
    }

    h1 {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0;
    }

    /* NAVIGATION */
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 8px;
    }

    nav a {
        color: var(--text);
        text-decoration: none;
        padding: 10px 18px;
        border-radius: var(--radius);
        font-weight: 500;
        transition: var(--transition);
        position: relative;
    }

    nav a::after { 
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        height: 2px;
        background: var(--primary);
        width: 0%;
        transition: var(--transition);
    }

    nav a:hover::after {
        width: 100%;
    }

    nav a.active {
        color: var(--primary);
        background: rgba(37, 99, 235, 0.1);
        font-weight: 600;
    }

    /* MAIN */
    main {
        max-width: 1200px;
        margin: 40px auto;
        padding: 0 24px;
    }

    section {
        background: var(--white);
        padding: 32px;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        margin-bottom: 24px;
        transition: var(--transition);
    }

    section:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }

    /* HEADINGS */
    h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* TEXT */
    p {
        color: var(--text-light);
        margin-bottom: 1rem;
    }

    /* CARDS */
    article {
        background: var(--white);
        padding: 24px;
        border-radius: var(--radius);
        border: 1px solid #e2e8f0;
        transition: var(--transition);
    }

    article:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }

    /* FOOTER */
    footer {
        background: var(--white);
        color: var(--text-light);
        text-align: center;
        padding: 24px;
        border-top: 1px solid #e2e8f0;
        margin-top: 60px;
    }

    /* BUTTON */
    .button {
        display: inline-block;
        background: var(--primary);
        color: var(--white);
        padding: 12px 24px;
        border-radius: var(--radius);
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition);
    }

    .button:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
    }

    /* LIST */
    li {
        margin-bottom: 0.5rem;
        color: var(--text-light);
    }

    /* FORM */
    input, textarea, select {
        width: 100%;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: var(--radius);
        margin-bottom: 16px;
        font-family: inherit;
        transition: var(--transition);
    }

    input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }

    /* GRID */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
        margin-top: 24px;
    }

    /* SCOOTER REPARATIES */
    .content-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .left-photo {
        width: 350px;
        height: auto;
        border-radius: var(--radius);
        object-fit: cover;
    }

    .text-content {
        flex: 1;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        header {
            height: auto;
            padding: 16px 24px;
            flex-direction: column;
            gap: 16px;
        }

        nav ul {
            flex-wrap: wrap;
            justify-content: center;
        }

        .content-wrapper {
            flex-direction: column;
        }

        .left-photo {
            width: 100%;
        }
    }