:root{
  /* ============================================================
     Byzantium design tokens — thema: "WaldJS forest"
     https://byzantium.steefan.nl/tokens
     ============================================================ */
  /* brand-schaal (thema-override: WaldJS-rood) */
  --byz-brand-100:#FFD6DB;
  --byz-brand-200:#FFA8B1;
  --byz-brand-300:#FF6B7A;
  --byz-brand-400:#FF3347;
  --byz-brand-500:#E01D32;
  --byz-brand-600:#B01225;
  /* spacing */
  --byz-space-1:.25rem;--byz-space-2:.5rem;--byz-space-3:.75rem;--byz-space-4:1rem;
  --byz-space-5:1.25rem;--byz-space-6:1.5rem;--byz-space-8:2rem;--byz-space-10:2.5rem;
  --byz-space-12:3rem;--byz-space-16:4rem;--byz-space-20:5rem;--byz-space-24:6rem;
  /* typografie */
  --byz-text-xs:.75rem;--byz-text-sm:.875rem;--byz-text-base:1rem;--byz-text-lg:1.125rem;
  --byz-text-xl:1.25rem;--byz-text-2xl:1.5rem;--byz-text-3xl:1.875rem;--byz-text-4xl:2.25rem;
  --byz-font-sans:'Puffin Display Soft','Baloo 2',system-ui,sans-serif; /* thema-override */
  --byz-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --byz-font-script:'grafolita-script',cursive;
  /* motion */
  --byz-duration-fast:100ms;--byz-duration-normal:200ms;--byz-duration-slow:300ms;--byz-duration-slower:500ms;
  --byz-ease-default:cubic-bezier(.4,0,.2,1);
  --byz-ease-out:cubic-bezier(0,0,.2,1);
  --byz-ease-bounce:cubic-bezier(.34,1.56,.64,1);
  /* schaduwen */
  --byz-shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --byz-shadow-md:0 4px 12px rgba(0,0,0,.3);
  --byz-shadow-lg:0 12px 32px rgba(0,0,0,.4);
  --byz-shadow-xl:0 24px 64px rgba(0,0,0,.5);
  /* z-index */
  --byz-z-base:0;--byz-z-raised:10;--byz-z-sticky:1020;--byz-z-overlay:1030;
  --byz-z-modal:1100;--byz-z-toast:1200;--byz-z-tooltip:1453;

  /* == thema-aliassen (WaldJS) == */
  --wit:#FFFFFF;
  --rood:var(--byz-brand-400);
  --groen:#023B2D;
  --groen-donker:#01271D;
  --groen-diep:#013024;
  --groen-licht:#0A5240;
  --kaart:rgba(255,255,255,0.055);
  --rand:rgba(255,255,255,0.12);
  --wit-zacht:rgba(255,255,255,0.72);
  --font:var(--byz-font-sans);
  --mono:var(--byz-font-mono);
  --script:var(--byz-font-script);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font);background-color:var(--groen);color:var(--wit);line-height:1.6;overflow-x:hidden}
::selection{background:var(--rood);color:var(--wit)}
h1,h2,h3,h4,header p.sub,.sectiekop p{text-wrap:balance}

/* ---------- taal ---------- */
[data-lang="nl"] .en{display:none !important}
[data-lang="en"] .nl{display:none !important}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:var(--byz-z-sticky);display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--byz-space-5);padding:var(--byz-space-3) 6vw;background:transparent;border-bottom:none;transition:background var(--byz-duration-slower) var(--byz-ease-default)}
/* overdag: donkere glasbalk zodat witte links & logo leesbaar blijven */
body.dag nav{background:rgba(2,59,45,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;justify-self:start}
nav .brand svg{width:100px;height:100px}
nav ul{display:flex;gap:var(--byz-space-6);list-style:none;align-items:center}
nav ul.links-kant{justify-content:center}
nav ul.rechts-kant{justify-content:flex-end}
nav ul a{color:var(--wit-zacht);text-decoration:none;font-weight:600;font-size:var(--byz-text-sm);transition:color var(--byz-duration-normal) var(--byz-ease-default)}
nav ul a:hover{color:var(--wit)}
.lang-switch{
  display:flex;
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 0 rgba(0,0,0,.16),
    0 10px 18px rgba(0,0,0,.12);
}
.lang-switch button{
  background:none;
  border:none;
  color:var(--wit-zacht);
  font-family:var(--font);
  font-weight:700;
  font-size:.8rem;
  padding:5px 12px;
  cursor:pointer;
  transition:
    transform var(--byz-duration-fast) var(--byz-ease-out),
    background var(--byz-duration-fast) var(--byz-ease-out),
    color var(--byz-duration-fast) var(--byz-ease-out),
    box-shadow var(--byz-duration-fast) var(--byz-ease-out);
}
.lang-switch button:hover{color:var(--wit);background:rgba(255,255,255,.06)}
.lang-switch button:focus-visible{
  outline:none;
  position:relative;
  z-index:1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    0 0 0 3px rgba(127,216,190,.28),
    0 0 0 6px rgba(255,51,71,.22);
}
.lang-switch button.actief{
  background:linear-gradient(180deg,#FF5B6C 0%, #FF3347 58%, #D91A31 100%);
  color:var(--wit);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -2px 0 rgba(120,0,18,.22);
}
.btn{
  display:inline-block;
  position:relative;
  background:linear-gradient(180deg,#FF5B6C 0%, #FF3347 58%, #D91A31 100%);
  color:var(--wit);
  text-decoration:none;
  font-weight:700;
  padding:var(--byz-space-2) var(--byz-space-5);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  transition:
    transform var(--byz-duration-fast) var(--byz-ease-out),
    box-shadow var(--byz-duration-fast) var(--byz-ease-out),
    filter var(--byz-duration-fast) var(--byz-ease-out);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(120,0,18,.25),
    0 6px 0 rgba(122,10,24,.55),
    0 12px 24px rgba(255,51,71,.32);
}
.btn::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:8%;
  height:46%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
  pointer-events:none;
}
.btn:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -3px 0 rgba(120,0,18,.22),
    0 11px 0 rgba(122,10,24,.55),
    0 24px 38px rgba(255,51,71,.42);
  filter:saturate(1.08) brightness(1.03);
}
.btn:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(120,0,18,.22),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 3px 0 rgba(122,10,24,.45),
    0 8px 16px rgba(255,51,71,.28);
}
.btn:focus-visible{
  outline:none;
  transform:translateY(-4px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(120,0,18,.25),
    0 10px 0 rgba(122,10,24,.55),
    0 22px 34px rgba(255,51,71,.36),
    0 0 0 4px rgba(127,216,190,.26),
    0 0 0 8px rgba(255,51,71,.2);
}
.btn.ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:2px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 0 rgba(255,255,255,.08),
    0 12px 24px rgba(0,0,0,.16);
}
.btn.ghost:hover{
  transform:translateY(-5px) scale(1.02);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 10px 0 rgba(255,255,255,.08),
    0 22px 34px rgba(0,0,0,.24);
  filter:brightness(1.05);
}
.btn.ghost:focus-visible{
  transform:translateY(-4px) scale(1.02);
}

/* ---------- vaste 3D-achtergrond ---------- */
#bos3d{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
#scrim{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%, rgba(1,30,23,.62), rgba(1,25,19,.9));opacity:0;transition:opacity .25s linear}

/* ---------- hero ---------- */
header{position:relative;text-align:center;padding:var(--byz-space-24) 6vw;height:100vh;min-height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center}
header>*{position:relative;z-index:2}
header .logo svg{width:min(300px,60vw);height:auto;filter:drop-shadow(0 12px 40px rgba(0,0,0,.35))}
header h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.15;margin:28px auto 16px;max-width:800px;text-transform:uppercase;letter-spacing:.02em}
header h1 em{font-style:normal;color:var(--rood);font-family:var(--script);font-weight:400;font-size:4rem;text-transform:none;letter-spacing:normal}
header p.sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--wit-zacht);max-width:640px;margin:0 auto 34px}
header .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- secties ---------- */
section{padding:var(--byz-space-24) 6vw;max-width:1150px;margin:0 auto;position:relative}
section.vol{max-width:none;padding-left:0;padding-right:0}
.sectiekop{text-align:center;margin-bottom:var(--byz-space-16)}
.sectiekop .tag{color:var(--rood);font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:normal;font-size:1.2rem}
.sectiekop h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;margin-top:8px;text-transform:uppercase;letter-spacing:.03em}
.sectiekop p{color:var(--wit-zacht);max-width:600px;margin:12px auto 0}
.sectiekop::after{content:"";display:block;width:140px;height:24px;margin:20px auto 0;opacity:.9;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 24'><path d='M8 12 H132' stroke='%23FF3347' stroke-width='1.6' stroke-linecap='round' fill='none'/><g fill='%237FD8BE'><ellipse cx='34' cy='7' rx='8' ry='3.2' transform='rotate(-28 34 7)'/><ellipse cx='54' cy='17' rx='8' ry='3.2' transform='rotate(28 54 17)'/><ellipse cx='72' cy='6' rx='8' ry='3.2' transform='rotate(-28 72 6)'/><ellipse cx='90' cy='18' rx='8' ry='3.2' transform='rotate(28 90 18)'/><ellipse cx='108' cy='7' rx='8' ry='3.2' transform='rotate(-28 108 7)'/></g></svg>") no-repeat center/contain}

/* ---------- varens (botanische decoratie) ---------- */
svg.varen{position:absolute;width:210px;height:300px;opacity:.15;pointer-events:none;z-index:1;overflow:visible}
svg.varen.links{left:1.5vw;bottom:-10px}
svg.varen.rechts{right:1.5vw;bottom:-10px;transform:scaleX(-1)}
@media(max-width:900px){svg.varen{display:none}}

/* ---------- code ---------- */
.codeblok{
  position:relative;
  background:
    linear-gradient(180deg,rgba(10,61,48,.98),rgba(1,39,29,.98)),
    var(--groen-donker);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
  text-align:left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 7px 0 rgba(0,0,0,.18),
    0 18px 34px rgba(0,0,0,.22);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.codeblok::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 24%);
  pointer-events:none;
}
.codeblok:hover{
  transform:translateY(-3px);
  border-color:rgba(255,51,71,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 9px 0 rgba(90,16,28,.16),
    0 22px 38px rgba(0,0,0,.26);
}
.codeblok:focus-within{
  border-color:#7FD8BE;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 9px 0 rgba(10,82,64,.24),
    0 22px 38px rgba(0,0,0,.26),
    0 0 0 4px rgba(127,216,190,.16);
}
.codeblok .titel{
  display:flex;
  align-items:center;
  gap:var(--byz-space-2);
  padding:var(--byz-space-2) var(--byz-space-4);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  font-family:var(--mono);
  font-size:var(--byz-text-xs);
  color:var(--wit-zacht);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.codeblok .titel .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FF8A96 0%,#FF3347 58%,#B01225 100%);
  opacity:.95;
  box-shadow:0 0 8px rgba(255,51,71,.4);
}
.codeblok pre{
  padding:var(--byz-space-4) var(--byz-space-5);
  overflow-x:auto;
  font-family:var(--mono);
  font-size:var(--byz-text-sm);
  line-height:1.7;
  background:
    radial-gradient(circle at top left,rgba(127,216,190,.06),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));
}
.c-k{color:#7FD8BE}      /* keywords */
.c-s{color:#FFB3BC}      /* strings */
.c-c{color:rgba(255,255,255,.45);font-style:italic} /* comments */
.c-t{color:#FF7A89}      /* tags */
.c-p{color:#A8E6CF}      /* props/attrs */

/* ---------- quick start ---------- */
.qs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--byz-space-6)}

/* ---------- kaarten ---------- */
/* Byzantium 12-koloms grid: 3 kaarten boven (span 4), 2 onder (span 6) */
.kaarten{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--byz-space-5)}
.kaarten .kaart{grid-column:span 4}
.kaarten .kaart:nth-child(4),.kaarten .kaart:nth-child(5){grid-column:span 6}
@media(max-width:900px){
  .kaarten .kaart{grid-column:span 6}
  .kaarten .kaart:nth-child(5){grid-column:span 12}
}
@media(max-width:560px){.kaarten .kaart{grid-column:span 12 !important}}
.kaart{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:var(--byz-space-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 0 rgba(0,0,0,.12),
    0 14px 28px rgba(0,0,0,.16);
  transition:
    transform var(--byz-duration-normal) var(--byz-ease-bounce),
    border-color var(--byz-duration-normal) var(--byz-ease-default),
    box-shadow var(--byz-duration-normal) var(--byz-ease-default);
}
.kaart:hover{
  transform:translateY(-5px);
  border-color:var(--rood);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 7px 0 rgba(90,16,28,.18),
    0 18px 32px rgba(0,0,0,.2);
}
.kaart:focus-within{
  border-color:#7FD8BE;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 7px 0 rgba(10,82,64,.26),
    0 18px 32px rgba(0,0,0,.2),
    0 0 0 4px rgba(127,216,190,.18);
}
.kaart .icoon{font-size:1.9rem;margin-bottom:12px;display:block}
.kaart h3{font-size:1.15rem;margin-bottom:6px}
.kaart h3 span.term{color:var(--rood)}
.kaart p{color:var(--wit-zacht);font-size:.92rem}

/* ---------- split ---------- */
/* Byzantium 12-koloms grid: twee helften van span 6 */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--byz-space-12);align-items:center}
.split>*{grid-column:span 6}
.split .tekst h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800;margin-bottom:14px;text-transform:uppercase;letter-spacing:.03em}
.split .tekst h2 .tag{display:block;color:var(--rood);font-family:var(--script);font-weight:400;font-size:1.2rem;letter-spacing:normal;text-transform:none;margin-bottom:8px}
.split .tekst p{color:var(--wit-zacht);margin-bottom:12px}
@media(max-width:820px){.split{grid-template-columns:minmax(0,1fr)}.split>*{grid-column:auto}}

/* ---------- tabellen ---------- */
table{width:100%;border-collapse:collapse;background:var(--kaart);border-radius:16px;overflow:hidden}
th,td{padding:var(--byz-space-3) var(--byz-space-4);text-align:left;border-bottom:1px solid var(--rand);font-size:var(--byz-text-sm)}
th{background:var(--groen-donker);font-weight:700}
tr:last-child td{border-bottom:none}
td code{font-family:var(--mono);font-size:.82rem;color:#FFB3BC;background:rgba(0,0,0,.25);padding:2px 8px;border-radius:6px}

/* ---------- benchmarks ---------- */
.bench{background:rgba(1,48,36,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--rand);border-radius:24px;padding:var(--byz-space-16) 6vw;max-width:1150px;margin:0 auto;box-shadow:var(--byz-shadow-lg)}
.bench-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--byz-space-8);margin-top:var(--byz-space-10)}
.staafgroep h3{font-size:1rem;margin-bottom:4px}
.staafgroep .metric{color:var(--wit-zacht);font-size:.82rem;margin-bottom:16px;display:block}
.staaf{margin-bottom:14px}
.staaf .label{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:5px}
.staaf .label b{font-weight:700}
.staaf .label .waarde{font-family:var(--mono);color:var(--wit-zacht)}
.balk{height:12px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.balk i{display:block;height:100%;border-radius:999px;background:rgba(255,255,255,.35)}
.staaf.wald .balk i{background:var(--rood)}
.staaf.wald .label b{color:var(--rood)}
.bench .disclaimer{margin-top:32px;font-size:.78rem;color:rgba(255,255,255,.45);text-align:center}

/* ---------- roadmap ---------- */
.roadmap{list-style:none;position:relative;max-width:640px;margin:0 auto}
.roadmap::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--rand)}
.roadmap li{position:relative;padding:0 0 26px 52px}
.roadmap li::before{content:"";position:absolute;left:7px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--groen-licht);border:3px solid var(--groen)}
.roadmap li.done::before{background:var(--rood)}
.roadmap li.bezig::before{background:var(--wit);box-shadow:0 0 0 4px rgba(255,51,71,.4)}
.roadmap li b{display:block;font-size:1.02rem}
.roadmap li span.oms{color:var(--wit-zacht);font-size:.9rem}
.badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.05em;padding:2px 10px;border-radius:999px;margin-left:8px;vertical-align:middle}
.badge.klaar{background:rgba(255,255,255,.12);color:var(--wit)}
.badge.nu{background:var(--rood);color:var(--wit)}

/* ---------- CLI ---------- */
/* Byzantium 12-koloms grid: 2×2 — elk commando span 6 */
.cli-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--byz-space-4);max-width:820px;margin:0 auto}
.cli-kaart{
  grid-column:span 6;
  background:linear-gradient(180deg,rgba(7,54,43,.96),rgba(1,39,29,.98));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:var(--byz-space-5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 5px 0 rgba(0,0,0,.18),
    0 12px 24px rgba(0,0,0,.18);
}
.cli-kaart:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 7px 0 rgba(90,16,28,.16),
    0 16px 28px rgba(0,0,0,.22);
}
@media(max-width:560px){.cli-kaart{grid-column:span 12}}
.cli-kaart code{font-family:var(--mono);color:var(--rood);font-weight:600;font-size:.95rem}
.cli-kaart p{color:var(--wit-zacht);font-size:.88rem;margin-top:8px}

/* ---------- packages ---------- */
.pkg{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.pkg span{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:9px 20px;
  font-family:var(--mono);
  font-size:.85rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 4px 0 rgba(0,0,0,.12),
    0 10px 18px rgba(0,0,0,.12);
  transition:transform .2s, box-shadow .2s, border-color .2s, color .2s;
}
.pkg span:hover{
  transform:translateY(-2px);
  border-color:rgba(255,51,71,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 6px 0 rgba(90,16,28,.12),
    0 14px 20px rgba(0,0,0,.16);
}
.pkg span b{color:var(--rood);font-weight:600}

/* ---------- hamburger & mobiel menu ---------- */
.hamburger{display:none;background:none;border:none;color:var(--wit);font-size:1.7rem;cursor:pointer;padding:4px 10px;justify-self:start}
#mobielmenu{position:fixed;inset:0;background:rgba(1,32,25,.97);z-index:var(--byz-z-modal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--byz-space-8);opacity:0;pointer-events:none;transition:opacity var(--byz-duration-slow) var(--byz-ease-default)}
#mobielmenu.open{opacity:1;pointer-events:auto}
#mobielmenu a{color:var(--wit);text-decoration:none;font-size:1.35rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#mobielmenu .sluit{position:absolute;top:20px;right:24px;background:none;border:none;color:var(--wit);font-size:2rem;cursor:pointer}
@media(max-width:760px){.hamburger{display:block}}

/* ---------- GitHub-stats ---------- */
.gh-stats{display:none;gap:1rem 1.5rem;justify-content:center;flex-wrap:wrap;margin-top:var(--byz-space-10);color:var(--wit-zacht);font-size:var(--byz-text-sm)}
.gh-stats.zichtbaar{display:flex}
.gh-stats span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .65rem;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(1,39,29,.42));
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 4px 0 rgba(0,0,0,.14),
    0 10px 20px rgba(0,0,0,.12);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.gh-stats span:hover{
  transform:translateY(-2px);
  border-color:rgba(255,51,71,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 6px 0 rgba(90,16,28,.14),
    0 14px 24px rgba(0,0,0,.16);
}
.gh-stats b{color:var(--wit)}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq details{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  margin-bottom:12px;
  padding:18px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 0 rgba(0,0,0,.12),
    0 12px 24px rgba(0,0,0,.14);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.faq details:hover{
  border-color:var(--rood);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 7px 0 rgba(90,16,28,.16),
    0 16px 28px rgba(0,0,0,.18);
}
.faq details:focus-within{
  border-color:#7FD8BE;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 7px 0 rgba(10,82,64,.2),
    0 16px 28px rgba(0,0,0,.18),
    0 0 0 4px rgba(127,216,190,.18);
}
.faq summary{cursor:pointer;font-weight:700;font-size:1rem;list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::before{content:"🌱";transition:transform .25s}
.faq details[open] summary::before{transform:rotate(90deg) scale(1.15)}
.faq details p{color:var(--wit-zacht);margin-top:var(--byz-space-3);font-size:var(--byz-text-sm)}

/* ---------- kopieerknop ---------- */
.codeblok .titel .kopieer{
  margin-left:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  color:var(--wit-zacht);
  font-family:var(--font);
  font-size:.72rem;
  font-weight:700;
  padding:3px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 3px 0 rgba(0,0,0,.18);
}
.codeblok .titel .kopieer:hover{border-color:var(--rood);color:var(--wit);transform:translateY(-1px)}
.codeblok .titel .kopieer:focus-visible{
  outline:none;
  border-color:#7FD8BE;
  color:var(--wit);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 3px 0 rgba(0,0,0,.18),
    0 0 0 3px rgba(127,216,190,.22),
    0 0 0 6px rgba(255,51,71,.14);
}
.codeblok .titel .kopieer.ok{
  background:linear-gradient(180deg,#FF5B6C 0%, #FF3347 58%, #D91A31 100%);
  border-color:var(--rood);
  color:var(--wit);
}

/* ---------- terminal in hero ---------- */
.terminal{
  width:min(480px,88vw);
  margin:var(--byz-space-20) auto 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 10px 0 rgba(0,0,0,.2),
    0 26px 48px rgba(0,0,0,.28);
  text-align:left;
}
.terminal pre{
  min-height:118px;
  text-shadow:0 0 10px rgba(127,216,190,.08);
}
.term-cursor::after{content:"▊";animation:knipper 1s steps(1) infinite;color:var(--rood)}
@keyframes knipper{50%{opacity:0}}
.term-uit{color:var(--wit-zacht)}
.plant-hint{margin-top:18px;font-size:.8rem;color:rgba(255,255,255,.45)}

/* ---------- groeibalk (scroll-voortgang) ---------- */
#groeibalk{position:fixed;top:0;left:0;height:4px;width:0%;z-index:var(--byz-z-toast);background:linear-gradient(90deg,var(--groen-licht),#7FD8BE);border-radius:0 99px 99px 0}
#groeiblad{display:none}

/* ---------- cursor-vuurvliegje ---------- */
#cursorvlieg{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:var(--byz-z-tooltip);opacity:0;transition:opacity var(--byz-duration-slower) var(--byz-ease-default);background:radial-gradient(circle,#FFE9C0 0%,rgba(255,205,135,.55) 45%,rgba(255,205,135,0) 70%);box-shadow:0 0 14px 5px rgba(255,215,150,.45)}

/* ---------- dag/nacht-knop ---------- */
.dagnacht{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:50%;
  width:36px;
  height:36px;
  cursor:pointer;
  font-size:1.05rem;
  line-height:1;
  color:var(--wit);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 0 rgba(0,0,0,.2),
    0 10px 18px rgba(0,0,0,.12);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.dagnacht:hover{
  border-color:var(--rood);
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 5px 0 rgba(90,16,28,.18),
    0 12px 20px rgba(0,0,0,.16);
}
.dagnacht:focus-visible{
  outline:none;
  border-color:#7FD8BE;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 0 rgba(0,0,0,.2),
    0 10px 18px rgba(0,0,0,.12),
    0 0 0 3px rgba(127,216,190,.24),
    0 0 0 6px rgba(255,51,71,.16);
}

/* ---------- playground ---------- */
.pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.pg-editor{
  width:100%;
  min-height:340px;
  background:transparent;
  border:none;
  color:var(--wit);
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.7;
  padding:18px 20px;
  resize:vertical;
  outline:none;
  display:block;
  box-sizing:border-box;
}
.pg-editor:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(127,216,190,.22);
  background:linear-gradient(180deg,rgba(127,216,190,.035),rgba(255,255,255,0));
}
.pg-preview{
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(250,250,245,.98)),
    #FAFAF5;
  color:var(--groen);
  border-radius:18px;
  padding:30px;
  overflow:auto;
  font-family:var(--font);
  border:1px solid rgba(2,59,45,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 7px 0 rgba(2,59,45,.08),
    0 18px 30px rgba(2,59,45,.12);
}
.pg-preview h1{margin-bottom:10px}
.pg-preview ul{margin:10px 0 0 22px}
@media(max-width:820px){.pg-grid{grid-template-columns:1fr}}

/* ---------- vergelijking ---------- */
.vergelijk td:nth-child(n+2),.vergelijk th:nth-child(n+2){text-align:center}
.vergelijk .ja{color:#7FD8BE;font-weight:800}
.vergelijk .nee{color:rgba(255,255,255,.35)}
.vergelijk .deels{color:var(--rood);font-weight:700;font-size:.8rem}

/* ---------- changelog / groeidagboek ---------- */
.changelog{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.log-kaart{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:24px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 0 rgba(0,0,0,.12),
    0 14px 26px rgba(0,0,0,.16);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.log-kaart:hover{
  border-color:var(--rood);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 7px 0 rgba(90,16,28,.16),
    0 18px 32px rgba(0,0,0,.2);
}
.log-kaart:focus-within{
  border-color:#7FD8BE;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 7px 0 rgba(10,82,64,.2),
    0 18px 32px rgba(0,0,0,.2),
    0 0 0 4px rgba(127,216,190,.18);
}
.log-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.log-kop .versie{background:var(--rood);color:var(--wit);font-weight:700;font-size:.78rem;padding:3px 12px;border-radius:999px;font-family:var(--mono)}
.log-kop .versie.aankomend{background:transparent;border:1.5px dashed var(--rood);color:var(--rood)}
.log-kop h3{font-size:1.02rem;text-transform:uppercase;letter-spacing:.03em}
.log-kop .datum{margin-left:auto;color:rgba(255,255,255,.4);font-size:.8rem}
.log-kaart ul{list-style:none;color:var(--wit-zacht);font-size:var(--byz-text-sm)}
.log-kaart li{padding-left:22px;position:relative;margin-bottom:6px}
.log-kaart li::before{content:"🌱";position:absolute;left:0;font-size:.72rem;top:3px}

/* ---------- footer ---------- */
.footer-bos{line-height:0;margin-top:90px}
.footer-bos svg{width:100%;height:72px;display:block}
footer{
  background:
    radial-gradient(circle at top center,rgba(127,216,190,.08),transparent 32%),
    linear-gradient(180deg,rgba(8,56,44,.96),rgba(1,39,29,1));
  padding:var(--byz-space-16) 6vw var(--byz-space-8);
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 -8px 24px rgba(0,0,0,.16);
}
.footer-grid{
  max-width:1150px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--byz-space-12);
  position:relative;
  z-index:2;
}
.footer-grid .kolom,
.footer-merk{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 0 rgba(0,0,0,.14),
    0 16px 28px rgba(0,0,0,.16);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.footer-grid .kolom:hover,
.footer-merk:hover{
  transform:translateY(-3px);
  border-color:rgba(255,51,71,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 8px 0 rgba(90,16,28,.12),
    0 20px 32px rgba(0,0,0,.18);
}
.footer-merk svg{height:70px;width:auto;margin-bottom:16px}
.footer-merk p{color:var(--wit-zacht);font-size:.9rem;max-width:320px}
.footer-grid h4{font-size:var(--byz-text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--rood);margin-bottom:var(--byz-space-4)}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:11px}
.footer-grid .kolom a{
  color:var(--wit-zacht);
  text-decoration:none;
  font-weight:600;
  font-size:var(--byz-text-sm);
  transition:
    color var(--byz-duration-normal) var(--byz-ease-default),
    padding-left var(--byz-duration-normal) var(--byz-ease-default),
    text-shadow var(--byz-duration-normal) var(--byz-ease-default);
}
.footer-grid .kolom a:hover{
  color:var(--wit);
  padding-left:4px;
  text-shadow:0 0 12px rgba(127,216,190,.18);
}
.footer-grid .kolom a:focus-visible{
  outline:none;
  color:var(--wit);
  border-radius:8px;
  box-shadow:
    0 0 0 3px rgba(127,216,190,.22),
    0 0 0 6px rgba(255,51,71,.14);
}
.gh-link{display:inline-flex;align-items:center;gap:8px}
.gh-link svg{width:16px;height:16px;fill:currentColor;flex:none}
.footer-onder{
  max-width:1150px;
  margin:var(--byz-space-12) auto 0;
  padding:var(--byz-space-6) 20px 0;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--byz-space-3);
  flex-wrap:wrap;
  color:rgba(255,255,255,.45);
  font-size:var(--byz-text-xs);
  position:relative;
  z-index:2;
}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:32px}.footer-onder{justify-content:center;text-align:center}}

@media(max-width:760px){
  nav ul li.verberg{display:none}
  header{padding-top:60px}
}

@media(max-width:430px){
  nav{
    grid-template-columns:auto 1fr auto auto;
    gap:8px;
    padding:10px 14px;
  }
  nav .brand{justify-self:start}
  nav .brand svg{width:66px;height:66px}
  nav ul{gap:8px}
  nav ul.links-kant{display:none}
  nav ul.rechts-kant{justify-content:flex-end}
  nav ul.rechts-kant li:nth-child(1),
  nav ul.rechts-kant li:nth-child(2),
  nav ul.rechts-kant li:last-child{display:none}
  .hamburger{display:block;justify-self:end;padding:4px 8px;font-size:1.45rem}
  .dagnacht{width:32px;height:32px;font-size:.92rem}
  .lang-switch button{font-size:.72rem;padding:4px 8px}

  header{
    min-height:620px;
    height:auto;
    padding:92px 18px 54px;
  }
  header .logo svg{width:min(220px,68vw)}
  header h1{
    font-size:clamp(1.85rem,10vw,2.45rem);
    line-height:1.08;
    margin:18px auto 12px;
  }
  header h1 em{font-size:clamp(2.6rem,12vw,3.4rem)}
  header p.sub{font-size:1rem;margin-bottom:24px}
  header .cta{gap:10px}
  .gh-stats{margin-top:2.75rem;gap:.85rem .75rem}
  .gh-stats span{width:auto}
  .btn{width:100%;max-width:280px;text-align:center;padding:10px 18px}
  .terminal{width:100%;margin-top:42px}

  section{padding:72px 18px}
  section.vol{padding-left:18px;padding-right:18px}
  .sectiekop{margin-bottom:42px}
  .sectiekop h2{font-size:1.55rem;line-height:1.14}
  .sectiekop p{font-size:.95rem}
  .sectiekop .tag,.split .tekst h2 .tag{font-size:1.05rem}

  .qs-grid,.bench-grid{grid-template-columns:minmax(0,1fr)}
  .split{gap:32px}
  .kaart,.cli-kaart,.log-kaart,.faq details{padding:20px}
  .codeblok pre{padding:14px 16px;font-size:.78rem}
  .codeblok .titel{padding:8px 12px}

  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  table th,
  table td{
    padding:10px 12px;
    font-size:.78rem;
  }

  .bench{padding:48px 18px;border-radius:18px}
  .pkg{justify-content:stretch}
  .pkg span{
    width:100%;
    border-radius:18px;
    padding:12px 16px;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .pkg span b{
    display:block;
    margin-bottom:2px;
  }
  .pg-editor{min-height:280px;font-size:.78rem;padding:14px 16px}
  .pg-preview{padding:20px}
  .log-kop .datum{margin-left:0;width:100%}
  .footer-bos{margin-top:40px}
  footer{padding:48px 18px 32px}
}