:root{
  --bg:#080c15;
  --bg2:#0d1424;
  --panel:#111b30;
  --panel2:#0d172a;
  --line:#243f69;
  --text:#eef4ff;
  --muted:#a9bedf;
  --accent:#ff9f1c;
  --accent2:#4cb7ff;
  --good:#58d98e;
  --build:#f2c14e;
  --shadow:0 20px 60px rgba(0,0,0,.36);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top,#18294e 0,#0b1020 36%,#070b14 100%);line-height:1.65}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:min(1180px,calc(100% - 30px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(7,11,20,.84);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{font-size:1.55rem;font-weight:800;letter-spacing:.2px;text-transform:none}
.brand .accent{color:var(--accent)}
.main-nav{display:flex;gap:10px;flex-wrap:wrap}
.main-nav a{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:.94rem}
.main-nav a:hover,.main-nav a.active{background:linear-gradient(90deg,rgba(76,183,255,.13),rgba(255,159,28,.13));border-color:rgba(255,255,255,.18)}
.hero{padding:44px 0 20px;position:relative}
.hero:before{content:'';position:absolute;inset:0;background:url('assets/images/achtergronden-voor-headers-en-knoppen.png') center/cover no-repeat;opacity:.17;pointer-events:none;mix-blend-mode:screen}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:24px;align-items:center;position:relative}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:.9rem;color:#dfe9ff}
.hero h1{font-size:clamp(2rem,4vw,3.9rem);line-height:1.05;margin:14px 0 12px}
.hero p{font-size:1.06rem;color:var(--muted);max-width:66ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:14px;font-weight:800;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#ff6f00);color:#111521}
.btn.secondary{background:linear-gradient(135deg,#15335f,#101f38)}
.btn.ghost{background:rgba(255,255,255,.04)}
.panel{background:linear-gradient(180deg,rgba(17,27,48,.95),rgba(13,23,42,.95));border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:var(--shadow)}
.hero-visual{overflow:hidden}
.hero-visual img{width:100%;aspect-ratio:16/10;object-fit:cover}
section{padding:22px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}
.section-head h2{margin:0;font-size:1.8rem}
.section-head p{margin:6px 0 0;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{padding:18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);text-align:center}
.stat strong{display:block;font-size:1.9rem}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(18,27,49,.98),rgba(13,21,37,.98));border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.media{position:relative;background:#09101d}
.media img{aspect-ratio:16/10;object-fit:cover;width:100%}
.media.cover{background-size:cover;background-position:center;min-height:220px}
.media.cover .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,15,.1),rgba(5,8,15,.62))}
.badges{position:absolute;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}
.badge{padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:800;border:1px solid rgba(255,255,255,.12)}
.badge.live{background:rgba(88,217,142,.14);color:#beffd8}
.badge.build{background:rgba(242,193,78,.18);color:#ffe4a9}
.badge.tag{background:rgba(76,183,255,.16);color:#def1ff}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{margin:0;font-size:1.18rem}
.card-body p{margin:0;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.mini-btn{padding:10px 12px;border-radius:12px;background:#14213d;border:1px solid rgba(255,255,255,.08);font-size:.9rem;font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-box,.copy-box{padding:18px}
.info-box h3,.copy-box h3{margin:0 0 8px}
.info-box p,.info-box li,.copy-box p,.copy-box li{color:var(--muted)}
.info-box ul,.copy-box ul{margin:10px 0 0;padding-left:18px}
.callout{padding:24px;border-radius:24px;background:linear-gradient(135deg,rgba(76,183,255,.12),rgba(255,159,28,.11));border:1px solid rgba(255,255,255,.08)}
.visual-band{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.08);min-height:220px;box-shadow:var(--shadow)}
.visual-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.visual-band .content{position:relative;padding:22px;max-width:48ch;background:linear-gradient(90deg,rgba(7,11,20,.86),rgba(7,11,20,.18))}
.page-hero{padding:26px 0 12px}
.page-hero .panel{padding:24px;position:relative;overflow:hidden}
.page-hero .panel.has-bg:before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;pointer-events:none}
.page-hero h1{margin:0 0 8px;font-size:2.2rem;position:relative}
.page-hero p{margin:0;color:var(--muted);max-width:74ch;position:relative}
.breadcrumbs{color:var(--muted);font-size:.92rem;margin-bottom:10px;position:relative}
.project-layout{display:grid;grid-template-columns:1.03fr .97fr;gap:24px;align-items:start}
.project-layout .panel{overflow:hidden}
.project-layout img{aspect-ratio:16/10;object-fit:cover;width:100%}
.project-copy{padding:20px}
.project-copy h1{margin:0 0 10px;font-size:2.1rem}
.project-copy p{color:var(--muted)}
.link-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.table-like{display:grid;gap:12px}
.row{display:grid;grid-template-columns:1.3fr .8fr 2fr;gap:12px;padding:14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.row strong{font-size:1rem}
.status-pill{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.status-pill:before{content:'';width:10px;height:10px;border-radius:50%;display:inline-block}
.status-pill.live:before{background:var(--good)}
.status-pill.build:before{background:var(--build)}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.thumb{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.thumb img{aspect-ratio:16/10;object-fit:cover;width:100%}
.thumb .meta{padding:14px}
.thumb h3{margin:0 0 6px;font-size:1rem}
.thumb p{margin:0;color:var(--muted);font-size:.95rem}
.footer{padding:38px 0 50px;margin-top:26px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.small-note{font-size:.92rem;color:var(--muted)}
@media (max-width:960px){
  .hero-grid,.two-col,.three-col,.project-layout,.footer-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .main-nav{display:none}
}
@media (max-width:640px){
  .container{width:min(100% - 20px,1180px)}
  .stats{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr}
}