:root {
    --bg: #e7e7e7;
    --surface: #151a21;
    --text: #e8edf2;
    --muted: #9aa8b2;
    --accent: #4da3ff;
    --accent-contrast: #06121e;
    --radius: 14px;
    --container: 1120px; /* begrens breedte op desktop, 100% op mobiel via max-width */
    --shadow: 0 8px 24px rgba(0,0,0,.25);
    font-size: 16px;
}

@font-face {
    font-family: SCGFont;
    src: url(assets/fonts/Magistral-Light.woff2);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
    line-height: 1.5;
}

/* Container en secties */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
    padding-top: clamp(24px, 4vw, 40px);
}

.section {
    padding-block: clamp(32px, 6vw, 96px);
}

/* Header-stapel — maak ze dunner op mobiel */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Bovenste smalle balk */
.upperheader {
    position: sticky;
    top: 0;
    background: #0a104c;
    backdrop-filter: saturate(1.2) blur(8px);
    z-index: 70;
    height: clamp(16px, 3.5vw, 20px);
    text-align: right;
    font-family: SCGFont;
    padding-right: clamp(8px, 2vw, 16px);
}

/* Subheader met logo */
.subheader {
    position: sticky;
    top: clamp(16px, 3.5vw, 20px); /* onder de upperheader */
    background: #e7e7e7;
    background-image: url("assets/img/SCGLogo.png");
    background-repeat: no-repeat;
    background-position: clamp(12px, 6vw, 53px) clamp(8px, 2.5vw, 20px);
    background-size: clamp(80px, 30vw, 180px);
    backdrop-filter: saturate(1.2) blur(8px);
    z-index: 60;
    height: clamp(64px, 18vw, 125px);
}

/* Banner */
.bannerheader {
    position: sticky;
    top: calc(clamp(16px, 3.5vw, 20px) + clamp(64px, 18vw, 125px)); /* stapel onder subheader */
    background-image: url("assets/img/banner.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-family: SCGFont;
    z-index: 50;
    min-height: clamp(120px, 30vw, 225px);
    animation: glow 2s infinite alternate;
}
@keyframes glow {
    to { text-shadow: 0 0 10px white; }
}

/* Tekst in de banner */
.innerheader {
    position: absolute;
    left: clamp(16px, 10vw, 150px);
    top: clamp(12px, 6vw, 40px);
    font-size: clamp(28px, 8vw, 80px);
    line-height: 1.05;
    color: #ffffff;
    max-width: 90%;
}

.Welcometext {
    font-family: Calibri, system-ui, sans-serif;
    color: #000000;
    font-size: clamp(14px, 3.6vw, 18px);
    margin-top: 8px;
    display: flex;
    justify-content: center;
}

/* Main section padding responsief */
.main-section {
    padding: clamp(12px, 3.5vw, 20px) clamp(16px, 5vw, 80px);
    position: relative;
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Logo tegels als achtergrond */
.container .screencom { background-image: url("assets/img/ScreenComLogo.png"); background-repeat: no-repeat; }
.container .teos      { background-image: url("assets/img/TEOSLogo.png");      background-repeat: no-repeat; }
.container .vxt       { background-image: url("assets/img/VXTLogo.png");       background-repeat: no-repeat; }
.container .tdm       { background-image: url("assets/img/TDMLogo.png");       background-repeat: no-repeat; }
.container .magicinfo { background-image: url("assets/img/MagicInfoLogo.png"); background-repeat: no-repeat; }

/* Grid: van 5 kolommen naar auto-fit minmax */
.grid {
    display: grid;
    gap: clamp(12px, 2vw, 24px);
}

/* gebruik auto-fit zodat het vanzelf wrapt op mobiel */
.grid--5 {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    max-width: 1200px;
    margin-inline: auto;
}

/* Kaarten */
.card {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.06);
    aspect-ratio: 16 / 9; /* houd verhouding ipv vaste hoogte */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background-position: center;
    background-size: 80%;
    transition: transform .2s ease;
}
.card:hover { transform: translateY(-2px); }

/* Body & footer — voorkom overlap op mobiel */
body {
    position: relative;
    min-height: 100vh;
}
.site-footer {
    background: #090c41;
    width: 100%;
    min-height: 120px;
    padding: clamp(16px, 4vw, 24px);
    color: #e8edf2;
}

/* Alleen “body::after” gebruiken op brede schermen waar footer absoluut moet zijn */
@media (min-width: 1024px) {
    .site-footer {
        position: absolute;
        bottom: 0;
    }
    body::after {
        content: '';
        display: block;
        height: 120px;
    }
}

/* ============ Breakpoints ============ */

/* Tablet */
@media (max-width: 1024px) {
    .innerheader {
        left: clamp(12px, 6vw, 40px);
        max-width: 85%;
    }
    .bannerheader {
        background-position: center;
    }
}

/* Mobiel */
@media (max-width: 768px) {
    :root { font-size: 15px; }

    .upperheader { padding-right: 12px; }

    .subheader {
        background-position: clamp(12px, 6vw, 24px) clamp(8px, 3vw, 12px);
        background-size: clamp(90px, 36vw, 150px);
    }

    .innerheader {
        position: relative;   /* niet absolute, zodat het kan flowen */
        left: 0;
        top: 0;
        padding: 32px 0px 0px 20px;
        text-align: left;
    }

    .main-section {
        padding: 16px;
    }

    .card {
        background-size: 70%;
    }
}

/* Klein-mobiel */
@media (max-width: 480px) {
    :root { font-size: 14px; }

    .grid--5 {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .card {
        background-size: 64%;
        border-radius: 12px;
    }
}