:root {
  --bg: #0d0f17;
  --bg-alt: #161a25;
  --bg-alt2: #1e2430;
  --text: #ebf0fa;
  --text-muted: #98a2b3;
  --accent: #6b46ff;
  --accent-rgb: 107 70 255;
  --accent-gradient: linear-gradient(135deg,#6b46ff,#8646ff 35%,#b146ff 70%,#ff46d7);
  --danger: #ff4666;
  --warning: #ffb347;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 24px;
  --shadow-sm: 0 2px 4px -1px rgba(0 0 0 / 0.4);
  --shadow: 0 6px 20px -4px rgba(0 0 0 / 0.55),0 2px 4px -1px rgba(0 0 0 / 0.4);
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb)/0.4),0 0 0 1.5px var(--accent);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  background: radial-gradient(circle at 25% 15%, #151b27, var(--bg) 60%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg { display:block; max-width:100%; }

/* Layout */
.container { width: min(1200px, 100% - 2.4rem); margin-inline:auto; }
.flex { display:flex; }
.center-y { align-items:center; }
.between { justify-content:space-between; }
.gap-s { gap:.75rem; }
.gap-m { gap:1.25rem; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter: blur(12px) saturate(1.4); background:linear-gradient(90deg,rgba(13 15 23 / 0.85),rgba(13 15 23 / 0.55)); border-bottom:1px solid rgba(255 255 255 / 0.06); }
.brand { font-weight:600; display:flex; align-items:center; gap:.75rem; letter-spacing:.5px; }
.brand-logo { height:42px; width:auto; display:block; aspect-ratio:auto; filter:drop-shadow(0 4px 10px rgba(0 0 0 / .5)); }
.logo-circle { display:none; }
.brand-text { font-size:1.05rem; background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

.main-nav { position:relative; }
.main-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; }
.main-nav a { text-decoration:none; color:var(--text-muted); font-weight:500; font-size:.92rem; position:relative; padding:.85rem .2rem; display:inline-block; }
.main-nav a:after { content:""; position:absolute; left:0; right:0; bottom:.4rem; height:2px; background:var(--accent-gradient); scale:0 1; transition:.35s cubic-bezier(.65,.05,.36,1); transform-origin: left; border-radius:2px; }
.main-nav a:hover,.main-nav a:focus-visible { color:var(--text); }
.main-nav a:hover:after,.main-nav a:focus-visible:after,.main-nav a[aria-current='page']:after { scale:1 1; }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:.75rem; color:var(--text); }
.nav-toggle .bars { width:26px; height:2px; background:currentColor; position:relative; display:block; }
.nav-toggle .bars:before,.nav-toggle .bars:after { content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; transition:.4s; }
.nav-toggle .bars:before { top:-7px; }
.nav-toggle .bars:after { top:7px; }
.nav-toggle[aria-expanded='true'] .bars { background:transparent; }
.nav-toggle[aria-expanded='true'] .bars:before { rotate:45deg; top:0; }
.nav-toggle[aria-expanded='true'] .bars:after { rotate:-45deg; top:0; }

/* Buttons */
.btn { --btn-bg:var(--accent); --btn-color:#fff; --btn-shadow:0 4px 18px -4px rgba(var(--accent-rgb)/.65); cursor:pointer; border:none; font:600 .9rem/1 'Inter',sans-serif; padding:.85rem 1.15rem; border-radius:var(--radius-m); display:inline-flex; align-items:center; gap:.5rem; position:relative; text-decoration:none; letter-spacing:.25px; background:var(--btn-bg); color:var(--btn-color); box-shadow:var(--btn-shadow); transition:background .35s,box-shadow .35s,translate .35s; }
.btn:hover { translate:0 -2px; }
.btn:active { translate:0 0; }
.btn.primary { background:var(--accent-gradient); }
.btn.ghost { background:rgba(255 255 255 / 0.05); box-shadow:none; color:var(--text); }
.btn.outline { background:transparent; border:1px solid rgba(var(--accent-rgb)/.5); box-shadow:none; }
.btn.outline:hover { background:rgba(var(--accent-rgb)/.12); }

/* Hero */
.hero { position:relative; padding: clamp(4rem, 10vh, 8rem) 0 4rem; overflow:hidden; }
.hero .lead { font-size:1.15rem; max-width:680px; line-height:1.5; }
.status-card { margin-top:1.5rem; background:var(--bg-alt); border:1px solid rgba(255 255 255 / .06); padding:1rem 1.25rem; border-radius:var(--radius-l); display:flex; flex-direction:column; gap:.5rem; box-shadow:var(--shadow-sm); font-size:.9rem; position:relative; }
.status-card .tag { margin-left:.35rem; }
.pulse-dot { width:12px; height:12px; border-radius:50%; background:var(--danger); position:absolute; top:1rem; right:1.25rem; box-shadow:0 0 0 0 rgba(255 70 102 / .6); animation:pulse 1.9s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(255 70 102 / .6); } 80% { box-shadow:0 0 0 18px rgba(255 70 102 / 0); } 100% { box-shadow:0 0 0 0 rgba(255 70 102 / 0); } }

.notify-form { margin-top:2.25rem; max-width:620px; }
.inline-form { display:flex; gap:.75rem; }
.inline-form input { flex:1; background:var(--bg-alt2); border:1px solid rgba(255 255 255 / .12); border-radius:var(--radius-m); padding:.9rem 1rem; color:var(--text); font:500 .95rem 'Inter',sans-serif; }
.inline-form input:focus-visible { outline:none; box-shadow:var(--focus-ring); border-color:var(--accent); }
.form-help { font-size:.7rem; margin:.4rem 0 0; }
.form-message { margin-top:.7rem; font-size:.8rem; font-weight:600; }
.form-message.success { color:#4ade80; }
.form-message.error { color:var(--danger); }

.shape-blur { position:absolute; width:820px; aspect-ratio:1/1; background:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb)/.55),rgba(var(--accent-rgb)/0) 70%); top:-120px; left:50%; translate:-50% 0; filter:blur(60px) saturate(1.8); opacity:.55; pointer-events:none; }

/* Sections */
.section { padding:4rem 0; position:relative; }
.section.alt { background:linear-gradient(145deg,var(--bg-alt) 0%, var(--bg) 100%); }
.section h2 { margin:0 0 1.5rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); letter-spacing:.5px; }

/* Timeline */
.updates-timeline { display:grid; gap:1.5rem; position:relative; }
.update { background:var(--bg-alt); border:1px solid rgba(255 255 255 / .06); padding:1.25rem 1.35rem 1.15rem; border-radius:var(--radius-l); box-shadow:var(--shadow-sm); position:relative; }
.update h3 { margin:0 0 .5rem; font-size:1.05rem; }
.update time { display:block; margin-top:.7rem; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; color:var(--text-muted); }

/* Focus list (voortgang zonder percentages) */
.focus-list { list-style:none; margin:1.5rem 0 1rem; padding:0; display:grid; gap:.65rem; max-width:620px; }
.focus-list li { background:var(--bg-alt); border:1px solid rgba(255 255 255 / .05); padding:.75rem 1rem; border-radius:var(--radius-m); font-size:.85rem; font-weight:500; letter-spacing:.4px; display:flex; align-items:center; gap:.6rem; position:relative; }
.focus-list li:before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent-gradient); box-shadow:0 0 0 1px rgba(var(--accent-rgb)/.5),0 0 0 6px rgba(var(--accent-rgb)/.15); }

/* (Merch sectie verwijderd) */

/* Tags */
.tag { --tag-bg:rgba(var(--accent-rgb)/.15); --tag-color:var(--accent); display:inline-flex; align-items:center; gap:.35rem; background:var(--tag-bg); color:var(--tag-color); padding:.35rem .6rem; font:600 .65rem/1 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.7px; border-radius:30px; box-shadow:0 0 0 1px rgba(var(--accent-rgb)/.4); }
.tag.danger { --tag-bg:rgba(255 70 102 / .15); --tag-color:var(--danger); box-shadow:0 0 0 1px rgba(255 70 102 / .4); }
.tag.warning { --tag-bg:rgba(255 179 71 / .18); --tag-color:var(--warning); box-shadow:0 0 0 1px rgba(255 179 71 / .4); }

/* Suggesties / Contact */
.contact-grid { display:grid; gap:1.7rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:1.25rem; }
.contact-grid h3 { margin:0 0 .5rem; font-size:1rem; }

/* Footer */
.site-footer { background:var(--bg-alt); border-top:1px solid rgba(255 255 255 / .08); padding:3rem 0 3.5rem; margin-top:4rem; position:relative; }
.footer-inner { display:grid; gap:2rem; align-items:start; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.footer-links a { color:var(--text-muted); text-decoration:none; font-size:.75rem; }
.footer-links a:hover { color:var(--text); }
.footer-meta { display:grid; gap:.35rem; font-size:.6rem; letter-spacing:.5px; text-transform:uppercase; }
.footer-logo { height:34px; width:auto; vertical-align:middle; margin-right:.4rem; filter:drop-shadow(0 4px 10px rgba(0 0 0 / .6)); }

/* Accessibility */
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:6px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Utilities */
.muted { color:var(--text-muted); }
.small { font-size:.75rem; }

/* Animations Prefers-Reduced */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Responsive */
@media (max-width:860px) {
  .main-nav ul { position:absolute; right:0; top:100%; background:var(--bg-alt); flex-direction:column; width:220px; padding:.75rem 0; border:1px solid rgba(255 255 255 / .08); border-radius:var(--radius-m); box-shadow:var(--shadow); opacity:0; visibility:hidden; translate:0 10px; transition:.35s; }
  .main-nav ul.show { opacity:1; visibility:visible; translate:0 0; }
  .nav-toggle { display:inline-flex; }
  .inline-form { flex-direction:column; }
  .hero { padding:5.5rem 0 3.5rem; }
}