/* =========================================================================
   zenthros.io — het design system van de live productiesite
   Live sinds 2026-08-21 op zenthros.io. Dit bestand bevat de design tokens
   en gedeelde vormtaal voor alle pagina's (index, laagpagina's, juridisch).

   Uitgangspunt uit het interview: spektakel is het lokmiddel, uitleg is
   de opbrengst. Alles wat de leesbaarheid aantast, valt af.
   ========================================================================= */

:root{
  /* --- grond --- */
  --void:#05070C;
  --void-2:#080B13;
  --panel:#0C111B;
  --panel-2:#111826;
  --edge:#1B2739;
  --edge-hot:#24405C;

  /* --- inkt --- */
  --ink:#DCE7F2;          /* 15,4:1 op --void */
  --ink-2:#8FA2B8;        /* 6,9:1  op --void */
  --ink-3:#6B7E93;        /* 4,8:1 gemeten op --void — was #5A6B80 (3,69:1, onder AA) */

  /* --- betekenis. Geen decoratie: dit IS de uitkomst. --- */
  --ok:#38F0C4;           /* toegewezen  (was --moss) */
  --no:#FF4D6D;           /* geweigerd   (was --rust) */
  --hot:#B57BFF;          /* aandacht    (was --indigo) */
  --wire:#3AD8E8;         /* systeemlijn, hologram-blauw */

  --ok-dim:rgba(56,240,196,.14);
  --no-dim:rgba(255,77,109,.14);
  --wire-dim:rgba(58,216,232,.16);

  /* --- ruimte: 4px-raster, gelijk aan de live site --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  --maxw:1120px;
  --mono: ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  /* regelbare vormtaal — de playground schrijft deze waarden */
  --glow:14px;
  --cut:10px;             /* afgeschuinde hoek */
  --scan:.035;            /* scanline-sterkte */
  --grid:.05;             /* rasterzichtbaarheid */


  /* --- typografie van de site. Stond tot 2026-08-22 in de <style> van
     index.html EN van juridisch.html, dus twee keer. Hier staat elke token
     precies een keer; laag.css definieert er bewust geen enkele. --- */
  --display:'Rajdhani',system-ui,-apple-system,'Segoe UI',sans-serif;
  --code:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --tekst:19px;        --regel:1.7;         --meet:52ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- achtergrond: raster + scanlines + vignet ----------
   Alle drie op ::before/::after van body, zodat geen enkel prototype
   er markup voor nodig heeft. pointer-events:none — ze vangen nooit klikken. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(58,216,232,var(--grid)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(58,216,232,var(--grid)) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,var(--scan)) 0 1px,
    transparent 1px 3px);
}

/* ---------- gedeelde chrome ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5);position:relative;z-index:1}

.protobar{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;gap:var(--s4);
  padding:9px var(--s5);
  background:rgba(5,7,12,.86);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--edge);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-2);
  flex-wrap:wrap;
}
@media (max-width:620px){
  .protobar{font-size:11px;gap:var(--s2);padding:8px var(--s4)}
  .protobar .spacer{display:none}
}
.protobar a{color:var(--wire);text-decoration:none;border-bottom:1px solid transparent}
.protobar a:hover,.protobar a:focus-visible{border-bottom-color:var(--wire)}
.protobar .tag{
  color:var(--void);background:var(--wire);padding:2px 8px;
  font-weight:700;letter-spacing:.1em;
}
.protobar .spacer{margin-left:auto}

.sitebar{
  display:flex;align-items:center;gap:var(--s5);
  height:62px;border-bottom:1px solid var(--edge);
  position:relative;z-index:1;
}
.mark{
  font-family:var(--mono);font-size:15px;letter-spacing:.14em;font-weight:700;
  text-decoration:none;color:var(--ink);white-space:nowrap;
  text-shadow:0 0 var(--glow) var(--wire-dim);
}
.mark b{color:var(--wire);font-weight:700}
.mark span{color:var(--ink-3);font-weight:400}
.sitebar nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.sitebar nav a{font-family:var(--mono);font-size:13px;color:var(--ink-2);text-decoration:none}
.sitebar nav a:hover{color:var(--wire)}
.portaal{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--ink-3);border:1px solid var(--edge);
  padding:6px 12px;white-space:nowrap;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}

/* Statusstrip (D48). Het AgenticOS en deze site zijn allebei nog in
   ontwikkeling; wat hier staat volgt de functionaliteit die af is. Staat
   boven de kopbalk EN in de voet.
   Bewust geen animatie: het aantal animaties op deze site staat op 0 en dat
   blijft zo (zie de budgettabel in de UX-spec). De stip is statisch. */
.stand{
  margin:0;padding:9px 0;border-bottom:1px solid var(--edge);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-2);
}
/* Geen display:flex hier: dan wordt de punt achter het verborgen staartstuk
   een eigen flex-item en komt hij los van het laatste woord te staan. */
.stand::before{
  content:'';display:inline-block;vertical-align:middle;
  width:7px;height:7px;border-radius:50%;margin-right:10px;
  background:var(--wire);box-shadow:0 0 8px var(--wire-dim);
}
.stand .rest{color:var(--ink-3)}
/* Op een smal scherm blijft in de KOP alleen "Volop in ontwikkeling." staan;
   daar is geen ruimte voor een hele zin naast het merk. */
@media (max-width:560px){ .stand .rest{display:none} }

/* Dezelfde strip in de voet: gecentreerd, zonder scheidingslijn, en daar
   blijft de hele zin ook op een telefoon staan - onderaan is er wel ruimte. */
.stand-voet{border-bottom:0;text-align:center;color:var(--ink-3)}
@media (max-width:560px){ .stand-voet .rest{display:inline} }

/* ---------- herbruikbare onderdelen ---------- */
.frame{
  position:relative;background:var(--panel);border:1px solid var(--edge);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.frame.hot{border-color:var(--edge-hot);box-shadow:0 0 var(--glow) var(--wire-dim)}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--wire);margin:0 0 var(--s3);
}
h1,h2,h3{line-height:1.12;margin:0}
h1{font-size:clamp(34px,7vw,64px);letter-spacing:-.02em;font-weight:600}
h2{font-size:clamp(24px,4vw,34px);letter-spacing:-.01em;font-weight:600}
h3{font-size:19px;font-weight:600}

.verdict{
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;
  padding:4px 11px;display:inline-block;text-transform:uppercase;
}
.verdict.ok{color:var(--ok);background:var(--ok-dim);box-shadow:0 0 var(--glow) var(--ok-dim)}
.verdict.no{color:var(--no);background:var(--no-dim);box-shadow:0 0 var(--glow) var(--no-dim)}

.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  color:var(--wire);background:transparent;border:1px solid var(--edge-hot);
  padding:9px 16px;cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.btn:hover{background:var(--wire-dim);color:var(--ink)}
.btn[aria-pressed="true"]{background:var(--wire);color:var(--void);border-color:var(--wire)}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--wire);outline-offset:3px;
}

.eerlijk{
  font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink-3);
  border-left:2px solid var(--edge-hot);padding-left:var(--s3);
}

footer.sitefoot{
  border-top:1px solid var(--edge);margin-top:var(--s9);
  padding:var(--s5) 0;display:flex;gap:var(--s5);flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
}


/* ---------- kopbalk op smalle schermen ----------
   Twee trappen, net als op de live site. De breedtes hieronder zijn GEMETEN
   tegen deze knoptekst ("PORTAAL · binnenkort"). Verandert die tekst, dan
   vervalt deze meting en moet je opnieuw meten. */
@media (max-width:780px){
  .sitebar nav a{display:none}
}
@media (max-width:620px){
  .portaal .straks{display:none}
}

/* ---------- toegankelijkheid ----------
   Eén plek waar ALLE beweging uitgaat. Elk prototype leunt hierop;
   geen enkel prototype mag zijn eigen animatie buiten dit blok om starten. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  body::after{display:none}
}