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

body{
    font-family:Arial, Helvetica, sans-serif;
}

/* HERO */
.hero{
    min-height:100vh;
    position:relative;
    overflow:hidden;

    background-image:url("../img/bas-bg-dt-size.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* Zachte overlay voor leesbaarheid */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(20,90,150,0.18) 0%,
            rgba(255,255,255,0.35) 45%,
            rgba(255,255,255,0.35) 55%,
            rgba(230,120,40,0.18) 100%
        );
    z-index:1;
}

/* LOGO */
.top-logo{
    position:absolute;
    top:24px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    display:flex;
    justify-content:center;
    z-index:3;
}

.top-logo img{
    width:min(620px, 88vw);
    height:auto;
    display:block;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,0.12));
}

/* HERO CONTENT */
.hero-content{
    position:relative;
    z-index:3;
    text-align:center;
    max-width:820px;
    padding:2rem;
    margin-top:8rem;

    animation:heroFadeUp 1s ease-out both;
}

.hero-content h1{
    font-size:clamp(2rem, 4vw, 4.2rem);
    line-height:1.1;
    color:#123f6b;
    margin-bottom:1rem;
    text-shadow:0 2px 10px rgba(255,255,255,0.35);
}

.hero-content p{
    font-size:clamp(1rem, 1.5vw, 1.3rem);
    color:#3f3f3f;
    margin-bottom:2rem;
}

/* BUTTONS */
.hero-buttons{
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
}

.btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:190px;
    padding:15px 28px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    color:#fff;
    letter-spacing:0.2px;

    transform:translateY(0);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        filter 0.25s ease;

    overflow:hidden;
}

/* Glanslaag */
.btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0) 100%
    );
    transform:skewX(-20deg);
    transition:left 0.7s ease;
}

.btn:hover::before{
    left:140%;
}

.btn:hover{
    transform:translateY(-4px) scale(1.02);
}

.btn:active{
    transform:translateY(-1px) scale(0.99);
}

/* IT knop */
.btn-it{
    background:#165a92;
    box-shadow:
        0 10px 24px rgba(22,90,146,0.28),
        0 0 0 rgba(22,90,146,0.0);
    animation:itPulse 3s ease-in-out infinite;
}

.btn-it:hover{
    background:#0f4c7c;
    box-shadow:
        0 14px 28px rgba(22,90,146,0.36),
        0 0 22px rgba(50,145,255,0.32);
}

/* Klus knop */
.btn-klus{
    background:#e97b2c;
    box-shadow:
        0 10px 24px rgba(233,123,44,0.28),
        0 0 0 rgba(233,123,44,0.0);
    animation:klusPulse 3s ease-in-out infinite 1.2s;
}

.btn-klus:hover{
    background:#d66a1d;
    box-shadow:
        0 14px 28px rgba(233,123,44,0.36),
        0 0 22px rgba(255,165,66,0.32);
}

/* ANIMATIES */
@keyframes heroFadeUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes itPulse{
    0%, 100%{
        box-shadow:
            0 10px 24px rgba(22,90,146,0.22),
            0 0 0 rgba(50,145,255,0);
    }
    50%{
        box-shadow:
            0 12px 28px rgba(22,90,146,0.34),
            0 0 18px rgba(50,145,255,0.22);
    }
}

@keyframes klusPulse{
    0%, 100%{
        box-shadow:
            0 10px 24px rgba(233,123,44,0.22),
            0 0 0 rgba(255,165,66,0);
    }
    50%{
        box-shadow:
            0 12px 28px rgba(233,123,44,0.34),
            0 0 18px rgba(255,165,66,0.22);
    }
}

/* MOBIEL */
@media (max-width:768px) {
.hero {
        background-image: url("../img/bas-bg-mb-size.png");
        background-size: cover;
        background-position: center;
    }
}