/* =========================
   Base
   ========================= */
:root{
    --bg: #171717;
    --text: #ffffff;
    --muted: rgba(255,255,255,0.85);

    --glass-bg: rgba(255,255,255,0.06);
    --glass-brd: rgba(255,255,255,0.12);
    --glass-shadow: 0 0 35px rgba(0,255,160,0.08);

    --pill-bg: rgba(179, 164, 195, 0.12);
    --pill-bg-hover: rgba(240, 228, 255, 0.25);

    --accent: rgba(179, 43, 148, 0.20);
    --accent-hover: rgba(179, 43, 148, 0.28);

    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-pill: 999px;
}


#hero{
    position: relative;
    overflow: hidden;
}
#hero::before{
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
            -45deg,
            rgba(238,119,82,0.25),
            rgba(231,60,126,0.25),
            rgba(35,166,213,0.25),
            rgba(35,213,171,0.25)
    );

    background-size: 400% 400%;
    animation: gradient 20s ease infinite;

    z-index: 1;
    pointer-events: none;
}
@keyframes gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



*{ margin:0; padding:0; box-sizing:border-box; font-family:"Inter", sans-serif; }
body{ background: var(--bg); color: var(--text); overflow-x:hidden; }

/* =========================
   Hero layout
   ========================= */
#hero{
    position: relative;
    width: 100%;
    height: 100vh;              /* desktop: full screen hero */
    will-change: transform, opacity;
}

/* Top title */
.topbar{
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
    z-index: 20;
    white-space: nowrap;
}

/* Main hero content block (centered without transform conflicts) */
.hero-text{
    position: absolute;
    bottom: 12%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(920px, 92vw);
    text-align: center;
    z-index: 10;
}

/* Typography */
.hero-text h1{
    font-family: "Georgia", serif;
    font-size: 64px;
    line-height: 1.1;
}
.hero-text p{
    margin-top: 20px;
    font-size: 18px;
    opacity: 0.85;
}

/* =========================
   Navigation (desktop: left vertical)
   ========================= */
.nav-circle{
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 30;
}

.nav-circle a{
    display: inline-block;
    padding: 8px 20px;
    border-radius: 25px;
    background: var(--pill-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #e9def1;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: background .25s ease, transform .18s ease;
}

.nav-circle a:hover{
    background: var(--pill-bg-hover);
    transform: translateX(10px);
}

/* Hover preview (desktop only) */
.preview-box{
    display: none;
    position: fixed;
    top: 50%;
    left: 120px;
    transform: translateY(-50%);
    background: rgba(9,9,9,0.23);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 30px 50px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #faf3ff;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 8px 25px rgba(255,255,255,0.18);
    transition: 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}
.preview-box.show{
    display: block;
    opacity: 0.85;
    transform: translateY(-50%) translateX(10px);
}

/* =========================
   Glass cards
   ========================= */
@keyframes popup{
    0%{ transform: scale(0.92); opacity: 0; }
    100%{ transform: scale(1); opacity: 1; }
}

.glass-card{
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    padding: 2rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-brd);
    box-shadow: var(--glass-shadow);
    animation: popup 0.55s ease forwards;
    transform-origin: center;
}

.glass-card h1,
.glass-card h2,
.glass-card h3{
    margin-top: 0;
    color: rgba(242, 233, 255, 0.99);
    font-family: "Bodoni MT Poster Compressed";
}


/* =========================
   About / Contact layout
   ========================= */
.about-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.about-image img{
    max-width: 200px;
    border-radius: 50%;
}

.contact-text{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 450px;
}

.contact-info p{
    margin: 0.4rem 0;
    font-size: 16px;
    color: #e9def1;
}
.contact-info a{
    color: #e9def1;
    text-decoration: underline;
}

.social-icons{
    display: flex;
    gap: 20px;
    margin-top: 1rem;
}
.social-icons img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.2s ease;
}
.social-icons img:hover{
    transform: scale(1.1);
}

/* =========================
   Projects / Education items
   ========================= */
.diploma-item{
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.diploma-item:last-child{ border-bottom: none; }
.diploma-item h2{ color: #f3edf8; margin-bottom: 0.3rem; }
.diploma-item p{ opacity: 0.9; }

/* =========================
   Skills grid page
   ========================= */
.skills-grid{
    max-width: 1000px;
    margin: 4rem auto;
    text-align: center;
}

.skills-grid .grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.grid-item{
    background: rgba(255,255,255,0.06);
    padding: 1.8rem;
    border-radius: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 25px rgba(0,255,160,0.08);
    transition: 0.25s ease;
}

.grid-item:hover{
    transform: translateY(-5px);
    box-shadow: 0 0 35px rgba(255,255,255,0.15);
}

.grid-item img{ width: 55px; margin-bottom: 15px; }
.grid-item h3{ margin-bottom: 10px; font-size: 1.25rem; color: #f0e8ff; }
.grid-item p{ opacity: 0.85; font-size: 0.95rem; }

/* =========================
   Interests page
   ========================= */
.interests-card p{
    margin-top: 0.8rem;
    opacity: 0.9;
}

.interest-tags{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 1rem 0 1.2rem 0;
    justify-content: center;
}

.tag{
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 14px;
    opacity: 0.95;
}

.music-links{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

.pill-link{
    display: inline-block;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: #f0e8ff;
    background: var(--accent);
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform 0.2s ease, background 0.2s ease;
}
.pill-link:hover{
    transform: translateY(-2px);
    background: var(--accent-hover);
}

.embed-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 1rem;
}

.embed-card{
    background: rgba(255,255,255,0.06);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 1rem;
    text-align: left;
}

.embed-card h2{
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.embed-wrap iframe{
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 12px;
    display: block;
}

/* =========================
   Responsive
   Breakpoints:
   - Tablet: <= 900px
   - iPhone: <= 600px
   ========================= */

/* -------- Tablet (<=900px) -------- */
@media screen and (max-width: 900px){

    /* hero can grow when cards are tall (embeds etc.) */
    #hero{
        height: auto;
        min-height: 100vh;
        padding-bottom: 24px;
    }

    /* topbar smaller */
    .topbar{
        top: 14px;
        font-size: 12px;
        padding-top: 22px;
    }

    /* nav becomes top bar (no overlap, no fixed) */
    .nav-circle{
        position: relative;
        top: auto;
        left: 0;
        transform: none;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin: 14px auto 0;
        padding: 0 12px;
        z-index: 30;
    }

    .nav-circle a{
        font-size: 14px;
        padding: 8px 12px;
        border-radius: 12px;
        transform: none;
    }

    /* no hover-preview on touch */
    .preview-box{ display: none !important; }

    /* hero text becomes normal flow (prevents “overlap issues”) */
    .hero-text{
        position: relative;
        bottom: auto;
        margin: 18px auto 24px;
        width: min(920px, 92vw);
    }

    .hero-text h1{ font-size: 44px; }
    .hero-text p{ font-size: 16px; }

    /* about layout stacks */
    .about-flex{
        flex-direction: column;
        text-align: center;
    }

    .about-image img{ max-width: 140px; }

    /* interests embeds stack */
    .embed-grid{
        grid-template-columns: 1fr;
    }
}

/* -------- iPhone / Mobile (<=600px) -------- */
@media screen and (max-width: 600px){

    .topbar{
        font-size: 11px;
        padding-top: 18px;
    }

    /* nav: single row scrollable (cleaner than giant stacked buttons) */
    .nav-circle{
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
        gap: 10px;
    }
    .nav-circle::-webkit-scrollbar{ display:none; }
    .nav-circle{ scrollbar-width:none; }

    .nav-circle a{
        white-space: nowrap;
        border-radius: var(--radius-pill);
        padding: 9px 14px;
        font-size: 13px;
    }

    .hero-text h1{ font-size: 28px; }
    .hero-text p{ font-size: 13px; line-height: 1.45; }

    /* tighter cards */
    .glass-card{
        padding: 1.25rem;
        border-radius: 18px;
    }

    .about-image img{ max-width: 90px; }

    .contact-info p{ font-size: 12px; }
    .social-icons img{ width: 26px; height: 26px; }

    /* interests buttons full width */
    .music-links{
        flex-direction: column;
        align-items: stretch;
    }
    .pill-link{
        width: 100%;
        text-align: center;
    }

    /* embeds nice height */
    .embed-wrap iframe{
        height: 320px;
    }
}
/* =========================
   TABLET + MOBILE: nav onder elkaar + duwt content naar beneden
   ========================= */

/* Tablet en kleiner */
@media screen and (max-width: 900px) {

    /* Laat hero meegroeien (geen cut-off door 100vh) */
    #hero{
        height: auto;
        min-height: 100vh;
        padding-bottom: 24px;
    }

    /* Topbar blijft bovenaan maar in flow-gevoel */
    .topbar{
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        text-align: center;
        margin: 14px 0 10px;
        font-size: 12px;
    }

    /* NAV: in flow, onder elkaar, full width */
    .nav-circle{
        position: relative;
        top: auto;
        left: auto;
        transform: none;

        width: min(520px, 92vw);
        margin: 0 auto 18px;   /* duwt content naar beneden */
        padding: 0 12px;

        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;

        z-index: 30;
    }

    .nav-circle a{
        width: 100%;
        text-align: center;
        padding: 12px 14px;
        border-radius: 14px;

        font-size: 14px;
        background: rgba(255,255,255,0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }




    .nav-circle a:hover{
        transform: none; /* geen shift op touch */
    }

    .preview-box{
        display: none !important; /* preview uit op touch */
    }

    /* HERO CONTENT: ook in flow zetten zodat het onder nav komt */
    .hero-text{
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;

        width: min(920px, 92vw);
        margin: 0 auto 24px;
    }

    .hero-text h1{ font-size: 44px; }
    .hero-text p{ font-size: 16px; }
}

/* iPhone en kleiner: nog iets compacter */
@media screen and (max-width: 600px) {

    .nav-circle{
        width: 94vw;
        margin-bottom: 16px;
    }

    .nav-circle a{
        font-size: 14px;
        padding: 12px 12px;
        border-radius: 16px;
    }

    .hero-text h1{ font-size: 28px; }
    .hero-text p{ font-size: 13px; line-height: 1.45; }

    /* Interests links full width (handig op mobiel) */
    .music-links{
        flex-direction: column;
        align-items: stretch;
    }
    .pill-link{
        width: 100%;
        text-align: center;
    }

    /* embeds stacken (heb je al, maar safe) */
    .embed-grid{
        grid-template-columns: 1fr;
    }
}
/* =========================
   Hamburger toggle zonder je nav-classes te wijzigen
   (tablet + iphone)
   ========================= */

.nav-toggle { display: none; } /* standaard: uit op desktop */

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

    /* NAV in normale flow (duwt content naar beneden) */
    .nav-circle{
        position: relative;
        top: auto;
        left: auto;
        transform: none;

        width: min(520px, 92vw);
        margin: 0 auto 18px;
        padding: 0 12px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;

        /* voor animatie */
        overflow: hidden;
        max-height: 1000px;
        transition: max-height 0.35s ease;
    }

    /* Hamburger knop */
    .nav-toggle{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;

        width: 48px;
        height: 48px;
        align-self: center;

        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 14px;

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        cursor: pointer;
    }

    .nav-toggle span{
        height: 2px;
        width: 22px;
        background: #f0e8ff;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Links (de <a>'s) full width */
    .nav-circle a{
        width: 100%;
        text-align: center;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255,255,255,0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Geen preview op touch */
    .preview-box{ display: none !important; }

    /* ---------- INGEKLAPT ---------- */
    .nav-circle.collapsed{
        max-height: 68px; /* alleen knop zichtbaar */
    }

    .nav-circle.collapsed a{
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* ---------- UITGEKLAPT ---------- */
    .nav-circle a{
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* Hamburger -> X (als collapsed = menu dicht; wil je omgekeerd, zeg het) */
    .nav-circle.collapsed .nav-toggle span:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .nav-circle.collapsed .nav-toggle span:nth-child(2){
        opacity: 0;
    }
    .nav-circle.collapsed .nav-toggle span:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* iPhone iets compacter */
@media screen and (max-width: 600px){
    .nav-circle{ width: 94vw; }
}
/* =========================
   Desktop only: glass cards rechts uitlijnen
   ========================= */
@media screen and (min-width: 1200px) {

    /* card rechts op hero */
    .hero-text{
        left: auto;
        right: 60px;          /* afstand van de rechterrand */
        margin: 0;            /* geen auto-centering */
        text-align: left;     /* meestal mooier als hij rechts staat */
        width: min(820px, 46vw);
    }

    /* als je nav links hebt, geef wat extra ruimte zodat card niet te breed wordt */
    .hero-text.glass-card{
        max-width: 820px;
    }
}
/* =========================
   Desktop layout rules
   ========================= */
@media screen and (min-width: 1200px) {

    /* DEFAULT: cards rechts */
    .hero-text{
        left: auto;
        right: 60px;
        margin: 0;
        width: min(820px, 46vw);
        text-align: left;
    }

    /* -------------------------
       HOME: gecentreerd
       ------------------------- */
    body.home .hero-text{
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(960px, 60vw);
        text-align: center;
    }

    /* -------------------------
       SKILLS: gecentreerd
       ------------------------- */
    body.skills .hero-text{
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(960px, 60vw);
        text-align: center;
    }
}
/* =========================
   Hamburger linksboven (tablet + mobile)
   ========================= */

/* =========================
   Hamburger: glow only (geen border / geen glass)
   ========================= */
@media screen and (max-width: 900px) {

    .nav-toggle{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;

        width: 44px;
        height: 44px;
        align-self: flex-start;

        background: transparent;
        border: none;
        border-radius: 0;

        cursor: pointer;

        /* subtiele glow */
        filter:
                drop-shadow(0 0 6px rgba(255, 80, 200, 0.55))
                drop-shadow(0 0 14px rgba(255, 80, 200, 0.35));

        transition: filter 0.3s ease, transform 0.2s ease;
    }

    .nav-toggle:hover{
        filter:
                drop-shadow(0 0 10px rgba(255, 120, 220, 0.8))
                drop-shadow(0 0 22px rgba(255, 120, 220, 0.45));
    }

    .nav-toggle span{
        height: 2px;
        width: 22px;
        background: linear-gradient(
                90deg,
                #ff6bd5,
                #c77dff
        );
        border-radius: 2px;

        box-shadow:
                0 0 6px rgba(255, 100, 210, 0.8),
                0 0 12px rgba(255, 100, 210, 0.6);

        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* X animatie blijft */
    /* X tonen als menu OPEN is */
    .nav-circle:not(.collapsed) .nav-toggle span:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .nav-circle:not(.collapsed) .nav-toggle span:nth-child(2){
        opacity: 0;
    }
    .nav-circle:not(.collapsed) .nav-toggle span:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }

}
/* =========================
   Forceer: hamburger blijft altijd hamburger (geen X)
   ========================= */
@media screen and (max-width: 900px) {
    .nav-toggle span {
        transform: none !important;
        opacity: 1 !important;
    }
}
/* =========================
   CV page – desktop sizing fix
   ========================= */
/* =========================
   CV page – desktop fix (override layout)
   ========================= */
/* =========================
   CV PAGE – FIX DEFINITIEF
   ========================= */
/* =========================
   CV – kleiner & rechts (desktop)
   ========================= */
/* =========================
   CV – klein + midden rechts (desktop)
   ========================= */
@media screen and (min-width: 1200px){

    /* card: klein en rechts in het midden */
    body.cv .hero-text{
        position: absolute !important;

        right: 60px !important;
        left: auto !important;

        top: 50% !important;
        bottom: auto !important;

        transform: translateY(-50%) !important;

        width: 460px !important;       /* <- pas aan (420-520) */
        max-width: 460px !important;

        text-align: left !important;
    }

    /* PDF preview minder hoog */
    body.cv .embed-wrap iframe{
        height: 320px !important;      /* <- pas aan (260-360) */
    }

    /* card wat compacter */
    body.cv .glass-card{
        padding: 1.4rem !important;
    }

    /* titels iets kleiner zodat het niet "mega" lijkt */
    body.cv .hero-text h1{
        font-size: 48px !important;    /* <- pas aan */
        line-height: 1.05 !important;
    }

    body.cv .hero-text p{
        font-size: 15px !important;
    }
}

body{
    position: relative;
    background: #0f0f12; /* fallback */
}

body::before{
    content: "";
    position: fixed;
    inset: 0;

    background: linear-gradient(
            -45deg,
            rgba(120,40,80,0.22),
            rgba(60,20,90,0.22),
            rgba(20,60,90,0.22),
            rgba(20,80,60,0.22)
    );

    background-size: 400% 400%;
    animation: gradient 35s ease infinite;

    z-index: 0;
    pointer-events: none;
}
/* =========================
   Dark / Ultra-dim toggle button
   ========================= */
.dim-toggle{
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;

    padding: 10px 14px;
    border-radius: 999px;

    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;

    cursor: pointer;
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

.dim-toggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.11); }
.dim-toggle:active{ transform: translateY(0px); }

/* =========================
   Theme variables
   - Default = normal dark
   ========================= */
:root{
    --bg: #0f0f12;
    --glass-bg: rgba(255,255,255,0.06);
    --glass-brd: rgba(255,255,255,0.12);
    --glass-shadow: 0 0 35px rgba(0,255,160,0.08);

    /* gradient intensity */
    --grad-a: 0.22;
    --grad-b: 0.22;
    --grad-c: 0.22;
    --grad-d: 0.22;

    /* overall dim filter for background layer */
    --bg-dim: 1;
}

/* Gebruik je body::before gradient? Maak hem parametric */
body::before{
    /* laat je eigen gradient kleuren staan, enkel alpha variabel maken */
    background: linear-gradient(
            -45deg,
            rgba(120,40,80,var(--grad-a)),
            rgba(60,20,90,var(--grad-b)),
            rgba(20,60,90,var(--grad-c)),
            rgba(20,80,60,var(--grad-d))
    );

    filter: brightness(var(--bg-dim));
}

/* =========================
   Ultra-dim mode (night/focus)
   - No class changes needed, we toggle an attribute
   ========================= */
body[data-dim="1"]{
    /* donkerder basis */
    --bg: #08080b;

    /* glass minder “glowy” */
    --glass-bg: rgba(255,255,255,0.045);
    --glass-brd: rgba(255,255,255,0.10);
    --glass-shadow: 0 0 22px rgba(0,0,0,0.35);

    /* gradient veel subtieler */
    --grad-a: 0.10;
    --grad-b: 0.10;
    --grad-c: 0.10;
    --grad-d: 0.10;

    --bg-dim: 0.78;
}

/* button state (optioneel) */
body[data-dim="1"] .dim-toggle{
    opacity: 0.9;
    background: rgba(255,255,255,0.06);
}

/* Mobile: knop iets kleiner */
@media (max-width: 600px){
    .dim-toggle{
        top: 14px;
        right: 14px;
        padding: 9px 12px;
        font-size: 13px;
    }
}
/* =========================
   Fix: dim button lager op tablet & mobile
   ========================= */

/* Tablet */
@media screen and (max-width: 900px) {
    .dim-toggle {
        top: 50px;   /* schuift knop naar beneden */
    }
}

/* Mobile */
@media screen and (max-width: 600px) {
    .dim-toggle {
        top: 50px;   /* nog iets lager voor gsm */
    }
}
/* =========================
   Glass scroll arrow (centered)
   ========================= */

.scroll-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    text-decoration: none;
    color: white;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);

    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 10;
}

.scroll-arrow:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 0.25);
}
/* =========================
   Arrow positioning fix for tablet & mobile
   ========================= */




@media screen and (max-width: 900px) {
    .scroll-arrow {
       display: none;
    }
}