:root{
  --ink:#0A0C11;
  --panel:#12151D;
  --panel-2:#171B24;
  --line:#242A35;
  --line-soft:#1B2029;
  --text:#E7EAEE;
  --muted:#8890A0;
  --muted-2:#5F6675;
  --accent:#5E7CFF;
  --accent-dim:#5E7CFF33;
  --live:#7FE6C9;
  --pilot:#F2B84B;
  --concept:#4A5062;
  --radius:2px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
::selection{background:var(--accent); color:#0A0C11;}

.display{font-family:'Space Grotesk', sans-serif;}
.mono{font-family:'IBM Plex Mono', monospace;}

a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* ---------- TOPBAR (eenvoudige subpagina-nav) ---------- */
.topbar{
  position:sticky; top:0; z-index:999;
  background:rgba(10,12,17,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.topbar-logo{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:16px;
  letter-spacing:0.02em; color:var(--text);
}
.topbar-logo .logo-sub{
  font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:11px;
  color:var(--muted-2); margin-left:6px; letter-spacing:0.06em;
}
.topbar-links{ display:flex; align-items:center; gap:28px; }
.topbar-links a{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted);
  letter-spacing:0.03em; transition:color .15s ease;
}
.topbar-links a:hover{ color:var(--text); }
.topbar-links a.is-active{ color:var(--accent); }
.topbar-cta{
  background:var(--accent); color:var(--ink); border-radius:4px;
  padding:0 16px; height:36px; font-family:'IBM Plex Mono', monospace;
  font-size:12.5px; font-weight:600; letter-spacing:0.03em;
  display:inline-flex; align-items:center;
}
.topbar-toggle{
  display:none; height:36px; width:36px; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; cursor:pointer; background:none; border:none;
}
.topbar-toggle-line{ width:20px; height:1.5px; background:var(--text); transition:transform .2s ease, opacity .2s ease; }
.topbar-toggle.open .topbar-toggle-line:first-child{ transform:translateY(3.5px) rotate(45deg); }
.topbar-toggle.open .topbar-toggle-line:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
@media(max-width:760px){
  .topbar-links{
    position:absolute; top:64px; left:0; right:0; background:var(--panel);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start;
    gap:0; max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .topbar-links.open{ max-height:320px; }
  .topbar-links a{ padding:14px 20px; width:100%; }
  .topbar-links .topbar-cta{ margin:8px 20px 16px; }
  .topbar-toggle{ display:flex; }
  .wrap{ padding:0 20px; }
}

/* ---------- SECTION SHELL ---------- */
section{padding:72px 0; border-bottom:1px solid var(--line-soft);}
@media(max-width:760px){ section{ padding:48px 0; } }
.section-head{margin-bottom:40px; max-width:640px;}
.section-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.1em;
  color:var(--accent); margin-bottom:14px;
}
h1{font-size:clamp(28px, 4.5vw, 44px); font-weight:600; letter-spacing:-0.01em; line-height:1.15;}
h2{font-size:clamp(22px, 3vw, 28px); font-weight:600; letter-spacing:-0.01em;}
.section-sub{color:var(--muted); margin-top:14px; font-size:15.5px;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius);
  font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.03em;
  border:1px solid var(--line);
  transition:all .15s ease; cursor:pointer;
}
.btn-primary{background:var(--accent); color:var(--ink); border-color:var(--accent); font-weight:600;}
.btn-primary:hover, .btn-primary:active{background:#7691FF;}
.btn-ghost{color:var(--text); background:none;}
.btn-ghost:hover, .btn-ghost:active{border-color:var(--muted); background:var(--panel);}

/* ---------- NIEUWS: overzicht ---------- */
.news-hero{ padding-top:56px; }
.news-hero .section-sub{ max-width:600px; }
.news-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media(max-width:760px){ .news-grid{ grid-template-columns:1fr; } }
.news-card{
  background:var(--panel); padding:28px; display:flex; flex-direction:column; gap:12px;
  transition:background-color .15s ease;
}
.news-card:hover{ background:var(--panel-2); }
.news-card-meta{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; color:var(--muted-2);
}
.news-tag{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em;
  padding:3px 8px; border-radius:3px; border:1px solid var(--line);
}
.news-tag.live{color:var(--live); border-color:var(--live);}
.news-tag.pilot{color:var(--pilot); border-color:var(--pilot);}
.news-tag.concept{color:var(--muted-2); border-color:var(--line);}
.news-card-title{
  font-family:'Space Grotesk', sans-serif; font-size:20px; font-weight:600; line-height:1.3;
}
.news-card:hover .news-card-title{ color:var(--accent); }
.news-card-desc{ color:var(--muted); font-size:14.5px; }
.news-card-more{
  margin-top:auto; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--accent);
}

/* ---------- NIEUWS: artikel ---------- */
.article-hero{ padding-top:56px; padding-bottom:40px; }
.article-meta{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.04em; color:var(--muted-2);
}
.article-sector{ color:var(--muted); font-size:15.5px; margin-top:16px; }
.article-body{ max-width:720px; padding-top:0; padding-bottom:56px; }
.article-body p{ color:var(--text); font-size:16px; margin-bottom:20px; }
.article-body p.lead{ color:var(--muted); font-size:17.5px; }
.article-body h2{ margin:40px 0 16px; }
.article-body ul{ margin:0 0 20px 20px; color:var(--text); }
.article-body li{ margin-bottom:8px; }
.article-back{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px; margin-bottom:24px;
}
.article-back:hover{ color:var(--accent); }
.article-cta{
  border-top:1px solid var(--line-soft); padding-top:32px; margin-top:8px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line-soft);
  padding:28px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
footer .f-left{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted-2);}
footer .f-right{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted-2); display:flex; gap:20px; flex-wrap:wrap;}
footer a:hover{color:var(--text);}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ---------- COOKIEBANNER ---------- */
.cookie-banner{
  position:fixed; left:24px; bottom:24px; z-index:1000;
  width:380px; max-width:calc(100vw - 48px);
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
  padding:22px 24px;
  opacity:0; transform:translateY(14px) scale(0.98); transform-origin:bottom left;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  pointer-events:none; overflow:hidden;
}
.cookie-banner::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent 75%);
}
.cookie-banner.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.cookie-banner[hidden]{ display:none; }
.cookie-banner-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.12em;
  color:var(--accent); display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.cookie-banner-eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.cookie-banner-title{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16.5px;
  color:var(--text); margin-bottom:8px; letter-spacing:-0.01em;
}
.cookie-banner-text{ color:var(--muted); font-size:13.5px; line-height:1.6; margin-bottom:20px; }
.cookie-banner-actions{ display:flex; gap:10px; }
.cookie-banner .btn{
  flex:1 1 0; justify-content:center; padding:11px 14px; font-size:12px;
  appearance:none; -webkit-appearance:none; cursor:pointer;
}
.cookie-banner button.btn{ background-color:transparent; }
.cookie-banner .btn-primary{ background-color:var(--accent); }
@media(max-width:600px){
  .cookie-banner{
    left:12px; right:12px; bottom:12px; width:auto; max-width:none;
    padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  }
}