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

body{

    font-family:Segoe UI,sans-serif;

    background:
    linear-gradient(
        180deg,
        #1a2332,
        #162030,
        #111827
    );

    color:white;

    min-height:100vh;
}

header{

    display:flex;
    justify-content:space-between;

    padding:25px 35px;

    background:#111827;

    border-bottom:2px solid #243244;
}

.header-left h1{

    color:#e8eeff;

    text-shadow:
    0 0 10px #3b82f6;
}

.subtitle{

    margin-top:6px;

    color:#bcd;

    font-size:15px;
}

.home-link{

    display:inline-block;

    margin-top:10px;

    color:#00eaff;

    text-decoration:none;

    font-weight:bold;
}

.home-link:hover{

    text-shadow:

    0 0 10px #00eaff,

    0 0 20px #00eaff;
}

.hex-menu{

    display:flex;

    gap:20px;
}

.hex{

    width:120px;

    height:120px;

    position:relative;

    background:#1f2937;

    clip-path:polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    cursor:pointer;

    animation:
        floatHex 4s ease-in-out infinite;

    transition:.35s;
}

.hex:hover{

    transform:

        translateY(-10px)

        scale(1.12);

    background:#2563eb;

    box-shadow:

        0 0 25px #3b82f6,

        0 0 60px #60a5fa,

        0 0 120px rgba(
            96,
            165,
            250,
            .55
        );
}

.hex span{

    padding:10px;

    font-weight:bold;

    font-size:13px;
}

@keyframes floatHex{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.hex::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:20px;

    background:

        radial-gradient(

            circle,

            rgba(
                0,
                234,
                255,
                .45
            ),

            transparent 70%

        );

    opacity:0;

    pointer-events:none;

    transition:.4s ease;
}

.hex:hover::before{

    opacity:1;

}
/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media screen and (max-width:768px){

    header{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .header-left{

        margin-bottom:25px;

    }

    .hex-menu{

        justify-content:center;

        flex-wrap:wrap;

        gap:12px;

    }

    .hex{

        width:90px;

        height:90px;

    }

    .hex span{

        font-size:11px;

    }

    .welcome-text h2{

        font-size:28px;

    }

    .welcome-image{

        width:90%;

        max-width:100%;

        height:auto;

    }

    .action-buttons{

        flex-direction:column;

        align-items:center;

    }

    .meldpunt-btn,
    .request-btn{

        width:250px;

    }

    #homepage-cards{

        flex-direction:column;

        align-items:center;

    }

    .kaart{

        width:90%;

        max-width:350px;

    }

    .kaart-popup-content{

        width:95%;

    }

}

/* =========================================
   PREMIUM PAGE TRANSITION
========================================= */

#dynamic-content{

    perspective:2000px;

    transform-style:preserve-3d;

    position:relative;

}

.page-enter{

    opacity:0;

    transform:

        translateY(25px)

        scale(.92);

    animation:

        premiumPageReveal

        1.4s

        cubic-bezier(
            .16,
            1,
            .3,
            1
        )

        forwards;

}

@keyframes premiumPageReveal{

    0%{

        opacity:0;

        transform:

            translateY(25px)

            scale(.92);

    }

    30%{

        opacity:.4;

    }

    70%{

        opacity:.8;

    }

    100%{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}