:root{
    --bg:#0b1020;
    --card:#0f1724;
    --muted:#9aa4b2;
    --accent:#4f46e5;
    --accent-2:#06b6d4;
    --glass: rgba(255,255,255,0.04);
    --radius:12px;
    --nav-height:72px;
    --nav-height-scrolled:54px;
    --max-width:1100px;
    --gap:24px;
    --ff-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Reset and base */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:var(--ff-sans);
    background:linear-gradient(180deg,var(--bg),#071025 140%);
    color:#e6eef6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Video background */
.video-container{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.video-container video{width:100%;height:100%;object-fit:cover;filter:brightness(.35) saturate(.9)}

/* hide video on small screens to save bandwidth and avoid visual clutter */
@media (max-width:720px){
    .video-container{display:none}
}

/* make sure video sits behind the fixed nav */
.site-nav{z-index:90}

/* Navbar */
.site-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:linear-gradient(90deg, rgba(6,8,15,0.85), rgba(6,8,15,0.6));backdrop-filter:blur(10px);z-index:80;transition:height .18s ease,background .18s ease,box-shadow .18s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 0}
.brand{color:#fff;font-weight:800;text-decoration:none;font-size:18px;letter-spacing:0.6px}
.nav-links{display:flex;gap:14px;list-style:none;margin:0;padding:0;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:650;padding:8px 12px;border-radius:8px;transition:background .12s ease,color .12s ease}
.nav-links a:hover{color:var(--accent);background:rgba(255,255,255,0.02)}
.nav-links a.active{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.nav-links a:focus-visible{outline:3px solid rgba(79,70,229,.18);outline-offset:3px}
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:20px;padding:8px 10px;border-radius:8px}

/* Mobile overlay style when opened */
@media (max-width:720px){
    .nav-links{position:fixed;right:0;top:0;bottom:0;width:260px;background:linear-gradient(180deg,rgba(4,6,12,0.98),rgba(6,8,15,0.98));padding:28px;flex-direction:column;gap:16px;transform:translateX(120%);transition:transform .2s ease;box-shadow:-10px 0 30px rgba(2,6,23,.6)}
    .nav-links.show{transform:translateX(0)}
    .nav-toggle{display:block}
}

/* when nav open, dim the background slightly */
body.nav-open::before{content:'';position:fixed;inset:0;background:rgba(2,6,23,0.48);z-index:40}

.nav-toggle{cursor:pointer}
.nav-toggle:focus{outline:3px solid rgba(99,102,241,.18);outline-offset:3px}

/* for larger screens, ensure .nav-links.show doesn't break layout */
@media (min-width:721px){
    .nav-links.show{transform:none}
}
.container-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;width:100%}

/* ensure page content not overlapped by fixed nav */
body{padding-top:var(--nav-height)}

/* when scrolled, reduce nav and body padding */
body.nav-scrolled .site-nav{height:var(--nav-height-scrolled);box-shadow:0 6px 20px rgba(2,6,23,.5)}
body.nav-scrolled{padding-top:var(--nav-height-scrolled)}

/* Hero / header */
.text-container{min-height:62vh;display:flex;align-items:center;justify-content:center;text-align:left;padding:70px 20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);}
.hero{max-width:920px}
.hero h1{font-size:clamp(28px,4.5vw,48px);margin:0 0 12px;color:#fff;letter-spacing:-0.02em}
.hero p{color:var(--muted);font-size:clamp(16px,1.6vw,20px);margin:0 0 20px}
.hero .cta{display:inline-flex;gap:12px;align-items:center}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(79,70,229,.18);transition:transform .12s ease,box-shadow .12s ease}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:9px 14px}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(79,70,229,.2)}

/* Homepage hero grid */
.hero-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:center;padding:36px 0}
.hero-content h1{font-size:clamp(30px,5vw,48px);margin:0 0 8px}
.lead{font-size:18px;line-height:1.5;color:#e9f0fb;margin-bottom:10px}

.profile-card{background:linear-gradient(180deg,rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:14px;text-align:center;box-shadow:0 10px 30px rgba(2,6,23,.5)}
.profile-pic{width:110px;height:110px;border-radius:50%;object-fit:cover;margin-bottom:10px;border:3px solid rgba(255,255,255,0.05)}
.profile-card h3{margin:6px 0 2px}
.profile-links{display:flex;gap:10px;justify-content:center;margin-top:12px}
.small{font-size:13px}

@media (max-width:880px){
    .hero-grid{grid-template-columns:1fr;gap:18px;padding:24px 0}
    .profile-card{order:2}
}

/* Projects grid */
.projecten-container{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));padding:48px 20px;max-width:var(--max-width);margin:0 auto}
.project{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;align-items:stretch;transition:transform .2s ease,box-shadow .2s ease}
.project:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(2,6,23,.6)}
.project img{width:100%;height:160px;object-fit:cover;border-radius:10px}
.project .meta{display:flex;align-items:center;justify-content:space-between}
.project h2{margin:0;font-size:18px;color:#f3f7fb}
.project p{margin:0;color:var(--muted);font-size:14px}
.project .actions{display:flex;gap:10px;justify-content:flex-end}
.project .tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}

/* Social icons */
.social-media{position:fixed;right:12px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:40;opacity:.95}
.social-media a img{width:36px;height:36px;border-radius:8px;display:block;filter:grayscale(.1) contrast(.85);transition:transform .12s ease,filter .12s ease}
.social-media a img:hover{transform:translateY(-3px);filter:grayscale(0) saturate(1.05)}

/* Utilities */
.muted{color:var(--muted)}
.maxwide{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* Footer spacer for small screens */
main{padding-bottom:60px}

/* Responsive tweaks */
@media (max-width:720px){
    .social-media{right:12px;bottom:14px}
    .project img{height:140px}
    .text-container{padding:48px 16px}
    .nav-toggle{display:block}
    .nav-links{position:fixed;right:0;top:60px;background:linear-gradient(180deg,rgba(4,6,12,0.96),rgba(6,8,15,0.95));padding:18px;border-radius:8px;flex-direction:column;gap:12px;transform:translateX(120%);transition:transform .18s ease;min-width:200px}
    .nav-links.show{transform:translateX(0)}
    .nav-links a{display:block}
}

/* Profile grid on Overmij */
.profile-grid{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start;padding:36px 0}
.profile-aside{position:sticky;top:80px}
.profile-body h1{margin-top:0}

/* Skills & experience */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.skill{margin:12px 0}
.skill .label{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:6px}
.skill .bar{background:rgba(255,255,255,0.04);height:10px;border-radius:10px;overflow:hidden}
.skill .bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:60%}

@media (max-width:880px){
    .profile-grid{grid-template-columns:1fr}
    .profile-aside{position:static}
}

@media (max-width:880px){
    .profile-grid{grid-template-columns:1fr}
    .profile-aside{position:static}
}

@media (max-width:420px){
    .navbar a{margin:0 8px;font-size:14px}
    .hero p{font-size:15px}
    .project img{height:120px}
}

/* small accessibility focus styles */
.btn:focus{outline:3px solid rgba(99,102,241,.22);outline-offset:3px}

/* Modal styles (projects) */
#project-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60}
#project-modal .modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.6);display:flex;align-items:center;justify-content:center}
#project-modal .modal-card{position:relative;background:var(--card);color:#eaf2ff;padding:20px;border-radius:12px;max-width:720px;width:92%;box-shadow:0 20px 60px rgba(2,6,23,.7)}
#project-modal .modal-image{width:100%;height:260px;object-fit:cover;border-radius:8px;margin-bottom:12px}
#project-modal .modal-close{position:absolute;right:12px;top:8px;background:transparent;border:0;color:var(--muted);font-size:28px;cursor:pointer}
#project-modal .modal-actions{display:flex;justify-content:flex-end;margin-top:12px}

/* header spacing */
header{padding-top:20px;text-align:center}