/* Tablet en mobiel */
@media (max-width:900px){
.feature-grid{
        grid-template-columns:1fr;
    }
    .menu-toggle{
        display:flex;
    }

    .main-nav{
        display:none;
    }

    .site-header .btn{
        display:none;
    }

    .cards{
        grid-template-columns:1fr;
    }

.main-nav.open{
    display:block;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#ffffff;
    box-shadow:0 5px 15px rgba(0,0,0,.12);
}

.main-nav.open a{
    display:block;
    padding:15px 25px;
    color:#1f2937;
}

    .main-nav.open ul{
        display:flex;
        flex-direction:column;
        padding:2rem;
    }

    .hero-illustration{
        width:420px;
        margin:0 auto;
    }

}

/* Klein mobiel */
@media (max-width:768px){

    .cards{
        grid-template-columns:1fr;
    }

.feature-grid{
        grid-template-columns:1fr;
    }
    .site-header .container{
        flex-direction:row;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#ffffff;
        padding:20px 0;
        box-shadow:0 5px 15px rgba(0,0,0,.1);
    }


    nav a{
        display:block;
        padding:15px 25px;
        margin:0;
        color:#1f2937;   /* donkere tekst */
        text-decoration:none;
        font-weight:600;
    }

    nav a:hover{
        background:#f3f4f6;
        color:#2563eb;
    }
    
    .contact-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .contact-card{
        padding:25px;
    }
    
    .workflow-item{
        flex-direction:column;
        text-align:center;
    }

    .step{
        margin:0 auto;
    }

    .page-header h1{
        font-size:2.2rem;
    }
    
        .about-grid{
        grid-template-columns:1fr;
    }

    .about-image{
        order:-1;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }
    
    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-image{
        order:-1;          /* afbeelding boven de tekst */
        margin-bottom:30px;
    }

    .hero-illustration{
        width:340px;
        margin:0 auto;
    }

    .hero h1{
        font-size:2.3rem;
    }

    .hero .lead{
        font-size:1.1rem;
    }

}