/* ===========================================================
   Identix.org — homepage-voorstel
   Tokens 1:1 overgenomen uit /ds/styles.css (de stijlgids).
   Alles hieronder gebruikt uitsluitend die tokens.
   De stijlgids kent geen dark mode; deze pagina dus ook niet.
   =========================================================== */
:root{--max:1120px}
*{box-sizing:border-box}
body{margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); text-wrap:balance}
h1{font-size:clamp(44px,4.8vw,58px); line-height:1.06; letter-spacing:-.015em} h2{font-size:28px; line-height:1.2} h3{font-size:21px; line-height:1.2}
p{margin:0}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--color-blue); outline-offset:2px; border-radius:var(--radius-sm)}
.mono{font-family:var(--font-mono); font-feature-settings:"zero" 1}
.tnum{font-variant-numeric:tabular-nums}

/* — brandband: 4 px huissignatuur uit de stijlgids — */
.brandband.on-navy{background:linear-gradient(to right, var(--color-sky), var(--color-accent-2-400) 50%, var(--color-accent-2-200))}
.brandband{height:4px; flex:none; background:linear-gradient(to right, var(--color-sky), var(--color-blue) 50%, var(--color-navy))}

/* — knoppen — */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--control-h); padding:0 var(--space-4); border:1px solid transparent;
  border-radius:var(--radius-md); font-family:var(--font-body); font-size:15px; font-weight:600;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease}
.btn-primary{background:var(--color-navy); border-color:var(--color-navy); color:#fff}
.btn-primary:hover{background:var(--color-accent-700); border-color:var(--color-accent-700)}
.btn-secondary{border-color:var(--color-divider-strong); background:var(--color-surface); color:var(--color-text)}
.btn-secondary:hover{border-color:var(--color-blue); color:var(--color-accent-2-700)}
.btn-ghost{color:var(--color-blue); padding-inline:var(--space-2); background:none}
.btn-ghost:hover{color:var(--color-accent-2-700)}
.btn-sm{min-height:var(--control-h-sm); font-size:14px; padding:0 var(--space-3)}

/* — HTTP-method badge — */
.method{display:inline-flex; align-items:center; justify-content:center; min-width:62px;
  padding:2px 8px; font-family:var(--font-mono); font-size:12px; font-weight:600;
  border-radius:var(--radius-sm); color:#fff; background:var(--method-other)}
.method.get{background:var(--method-get)}

/* — tags & status — */
.tag{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; font-size:12.5px;
  font-weight:600; border-radius:var(--radius-sm); background:var(--color-neutral-200); color:var(--color-neutral-800)}
.tag-quiet{background:transparent; border:1px solid var(--color-divider); color:var(--color-text-muted); font-weight:400;
  font-family:var(--font-mono); font-size:11.5px}
.status-dot{width:10px; height:10px; flex:none; border-radius:50%; background:var(--color-neutral-400)}
.tag.is-live{background:var(--color-success-bg); color:var(--color-success)}
.tag.is-live .status-dot{background:var(--color-success)}
.tag.is-soon{background:var(--color-info-bg); color:var(--color-accent-2-700)}
.tag.is-soon .status-dot{background:var(--color-accent-2-400)}

/* — kaarten & panelen — */
.card{display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md)}
.panel{background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md)}
.stat{display:grid; gap:2px; padding:var(--space-4); background:var(--color-surface);
  border:1px solid var(--color-divider); border-left:4px solid var(--color-sky); border-radius:var(--radius-md)}


/* — logo-slot voor broninstanties —
   In productie: vervang de <span class="bronlogo-fb"> door
   <img src="/ds/assets/bronnen/{slug}.svg" alt=""> — zelfde maat, zelfde tint. */
.bronlogo{width:34px; height:34px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-accent-100); border:1px solid var(--color-divider); border-radius:var(--radius-sm); overflow:hidden}
.bronlogo img{width:100%; height:100%; object-fit:contain; padding:4px;
  filter:grayscale(1) brightness(.35) sepia(1) hue-rotate(175deg) saturate(3)}
.bronlogo-fb{font-family:var(--font-heading); font-weight:700; font-size:11px; letter-spacing:.02em;
  color:var(--color-navy); line-height:1; text-align:center}
.bronlogo.lg{width:56px; height:56px}
.bronlogo.lg .bronlogo-fb{font-size:15px}
.bronlogo.sm{width:26px; height:26px; border-radius:var(--radius-sm)}
.bronlogo.sm .bronlogo-fb{font-size:9px}

/* — layout — */
.band{border-top:1px solid var(--color-divider); background:var(--color-bg)}
.band.alt{background:var(--color-surface-2)}
/* kop en footer volgen hetzelfde .wrap-raster (1120/28) als de inhoud */
.band-inner{max-width:1120px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1fr}
.rail{border-bottom:1px solid var(--color-divider); padding:var(--space-8) 0 var(--space-4);
  display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap}
.rail-sticky{}
.rail-band{width:28px; height:4px; margin-bottom:var(--space-3); background:linear-gradient(to right,
  var(--color-sky), var(--color-blue) 50%, var(--color-navy))}
.rail-code{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-muted)}
.rail-title{font-size:14px; color:var(--color-text); margin-top:var(--space-1); line-height:1.35; font-weight:600}
.rail-count{font-family:var(--font-mono); font-size:11.5px; color:var(--color-blue); margin-top:var(--space-2)}
.body-col{padding:var(--space-6) 0 var(--space-12); min-width:0}
@media (max-width:920px){
  .band-inner{grid-template-columns:1fr}
  .rail{border-right:0; border-bottom:1px solid var(--color-divider); padding:var(--space-4) 0 var(--space-3);
    display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap}
  .rail-sticky{position:static; display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap}
  .rail-band{margin-bottom:0} .rail-title,.rail-count{margin-top:0}
  .body-col{padding:var(--space-6) 0 var(--space-8)}
}
.eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-blue)}
h2.sec{font-size:clamp(26px,3.1vw,36px); margin:var(--space-3) 0 var(--space-3); letter-spacing:-.012em}
.sec-lead{color:var(--color-text-muted); max-width:64ch; font-size:16.5px}
.note{font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-muted); margin-top:var(--space-3); line-height:1.6}

/* header: van onze eigen site-laag */
/* — hero — */
.hero{background:var(--color-surface); border-bottom:1px solid var(--color-divider); position:relative; overflow:hidden}
#field{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero-grid{position:relative; max-width:1120px; margin:0 auto; padding:var(--space-12) 28px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-12); align-items:start}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr; gap:var(--space-8); padding:var(--space-8) 28px}}
.hero h1{font-size:clamp(34px,4.6vw,54px); line-height:1.08; letter-spacing:-.022em; margin-top:var(--space-4); color:var(--color-navy)}
.hero h1 .thin{font-weight:300; color:var(--color-blue)}
.hero-lead{margin-top:var(--space-4); font-size:18px; color:var(--color-text-muted); max-width:54ch}
.hero-cta{display:flex; gap:var(--space-3); margin-top:var(--space-6); flex-wrap:wrap}
.hero-proof{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-6)}

/* — codepaneel (stijlgids: .code-block op accent-900) — */
.code-block{border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(9,29,51,.68);
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  box-shadow:0 44px 110px rgba(9,29,51,.38), 0 8px 22px rgba(13,44,71,.18),
    inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06)}
.code-head{display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border-bottom:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.code-head .m{font-family:var(--font-mono); font-size:11px; color:#eaf3fb; letter-spacing:.06em; text-transform:uppercase}
#hxBody::after{content:"▌"; color:var(--color-sky); animation:cursorKnipper 1.1s steps(1) infinite}
@keyframes cursorKnipper{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){#hxBody::after{animation:none}}
.dot-live{width:8px; height:8px; border-radius:50%; background:#5fd08a; box-shadow:0 0 0 0 rgba(95,208,138,.55); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(95,208,138,0)}100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}}
.code-req{display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-mono); font-size:13px;
  padding:var(--space-3); color:#eaf2fb; border-bottom:1px solid rgba(255,255,255,.10); overflow-x:auto; white-space:nowrap}
.code-body{font-family:var(--font-mono); font-size:12.4px; line-height:1.65; color:#d5e6f6;
  background:rgba(9,29,51,.35);
  padding:var(--space-3) var(--space-4) 20px; max-height:392px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(143,202,231,.35) transparent}
.code-body::-webkit-scrollbar{width:5px}
.code-body::-webkit-scrollbar-thumb{background:rgba(143,202,231,.35); border-radius:99px}
.code-body::-webkit-scrollbar-track{background:transparent}
.code-body pre{margin:0}
.j-k{color:#8fcae7} .j-s{color:#b7d7a8} .j-n{color:#f0b47a} .j-c{color:#6b8299} .j-nl{color:#c9a0dc}
.code-foot{display:flex; gap:var(--space-4); padding:var(--space-2) var(--space-3); border-top:1px solid rgba(255,255,255,.18);
  background:linear-gradient(0deg,rgba(255,255,255,.08),rgba(255,255,255,0));
  font-family:var(--font-mono); font-size:11px; color:#d9e8f7; flex-wrap:wrap}
.tabs{display:flex; gap:var(--space-4); padding:12px var(--space-4) 0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; border-bottom:1px solid rgba(255,255,255,.16)}
.tabs::-webkit-scrollbar{display:none}
/* huisstijl-tabs op donker glas: tekst met onderstreep-accent — géén pills */
.tab{font-family:var(--font-body); font-size:13px; font-weight:600; padding:8px 2px 10px; white-space:nowrap;
  color:rgba(207,224,244,.72); cursor:pointer; border:0; border-bottom:2px solid transparent;
  background:none; transition:color .16s ease, border-color .16s ease}
.tab:hover{color:#fff}
.tab[aria-selected="true"]{color:#fff; border-bottom-color:var(--color-sky)}


/* — slot-uitnodiging: donkere afsluiting, versmolten met de footer — */
.slotband{position:relative; overflow:hidden; text-align:center; color:#e8f1f9;
  background:linear-gradient(180deg,#091d33 0%, #10305a 72%, #154273 100%);
  padding:50px var(--space-6) 54px}
.slotband::before{content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(to right, var(--color-sky), var(--color-blue) 50%, var(--color-navy))}
.slotband>*{position:relative}
.slotband h2{color:#fff; font-size:clamp(28px,3.4vw,40px); font-weight:300; letter-spacing:-.01em}
.slotband .slot-sub{color:rgba(232,241,249,.72); max-width:56ch; margin:var(--space-3) auto 0; font-size:16px}
.slotband .hero-cta{justify-content:center; margin-top:28px}
.slotband .btn-tekst{color:var(--color-sky)}
/* de footer sluit er naadloos op aan */
footer.site-footer{margin-top:0}
.btn-tekst{font-family:var(--font-heading); font-weight:600; font-size:14.5px; color:var(--color-blue); text-decoration:none; align-self:center}
.btn-tekst::after{content:" →"; transition:transform .16s ease; display:inline-block}
.btn-tekst:hover::after{transform:translateX(3px)}

/* — telbord — */
.telbord{background:rgba(9,29,51,.68);
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.10);
  color:#e8f1f9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 -6px 20px rgba(9,29,51,.10)}
.telstat{position:relative; background:rgba(13,40,72,.92);
  border:1px solid rgba(255,255,255,.22); border-radius:14px;
  padding:12px 18px 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(9,29,51,.30)}
.tel-grid{max-width:1120px; margin:0 auto; padding:20px 28px; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.tel-num{font-family:var(--font-heading); font-weight:300; font-size:clamp(22px,2.2vw,28px);
  line-height:1.1; letter-spacing:-.015em; color:#fff}
.tel-lab{font-size:12px; color:rgba(207,224,244,.85); margin-top:2px; font-weight:600}
.tel-sub{font-family:var(--font-mono); font-size:11px; color:rgba(143,202,231,.65); margin-top:3px; letter-spacing:.01em}
@media (max-width:940px){.tel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tel-grid{grid-template-columns:1fr}}

/* — doelgroepen — */
.aud-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3)}
@media (max-width:1120px){.aud-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.aud-grid{grid-template-columns:1fr}}
/* compacte tweede rij: commerciële sectoren, minder hoog */
.aud-grid.compact{grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:var(--space-3)}
@media (max-width:1120px){.aud-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.aud-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
.aud.compact{padding:16px 18px; gap:7px}
.aud.compact h3{font-size:15px}
.aud.compact p{font-size:12.75px; line-height:1.45}
.aud.compact .aud-ep{font-size:10.5px}
.aud.compact .aud-link{font-size:12px}
.aud{display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md);
  border-top:4px solid var(--color-sky); transition:border-color .15s ease, background .15s ease}
.aud:hover{border-color:var(--color-divider); border-top-color:var(--color-blue); background:var(--color-accent-100)}
.aud-ico{width:26px; height:26px; color:var(--color-navy)}
.aud h3{font-size:18px}
.aud p{font-size:14px; color:var(--color-text-muted); line-height:1.5}
.aud ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--space-1)}
.aud li{font-size:13.5px; color:var(--color-text-muted); padding-left:16px; position:relative}
.aud li::before{content:"›"; position:absolute; left:2px; color:var(--color-blue); font-weight:700}
.aud .aud-ep{display:flex; align-items:center; gap:var(--space-2); margin-top:auto; padding-top:var(--space-2);
  font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-muted); min-width:0}
.aud .aud-ep span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.aud-link{font-size:14px; font-weight:600; color:var(--color-blue)}

/* — explorer — */
.exp-controls{display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-top:var(--space-6)}
/* — filterpaneel: één kaart, gelabelde groepen, zoek erboven — */
.exp-paneel{margin-top:var(--space-6); background:#fff; border:1px solid var(--color-divider);
  border-radius:12px; padding:14px 16px 12px; display:grid; gap:12px}
.exp-zoekrij{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--color-divider)}
.exp-zoekrij .exp-search{margin-left:0; flex:1 1 240px; max-width:480px; border:1px solid var(--color-divider-strong);
  border-radius:8px; padding:6px 10px}
.exp-totaal{margin-left:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--color-text-muted); white-space:nowrap}
.exp-groep{display:flex; align-items:flex-start; gap:12px; min-width:0}
.exp-lbl{flex:none; width:52px; padding-top:8px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--color-text-muted)}
.exp-chips{display:flex; gap:6px; flex-wrap:wrap; min-width:0}
.exp-groepen-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;
  border-top:1px solid var(--color-divider); padding-top:12px}
@media (max-width:820px){.exp-groepen-2{grid-template-columns:1fr}}
.fchip{font-family:var(--font-body); font-size:13.5px; font-weight:600; border:1px solid var(--color-divider-strong);
  background:var(--color-surface); color:var(--color-text-muted); border-radius:var(--radius-md);
  height:var(--control-h-sm); padding:0 var(--space-3); cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.fchip:hover{border-color:var(--color-blue); color:var(--color-accent-2-700)}
.fchip[aria-pressed="true"]{background:var(--color-navy); border-color:var(--color-navy); color:#fff}
.fchip .cnt{font-family:var(--font-mono); font-size:11px; opacity:.7}
.exp-search{margin-left:auto; display:flex; align-items:center; gap:var(--space-2);
  border:1px solid var(--color-divider-strong); background:var(--color-surface); border-radius:var(--radius-md);
  height:var(--control-h-sm); padding:0 var(--space-3); min-width:240px}
.exp-search input{border:0; background:none; outline:none; font-family:var(--font-mono); font-size:12.5px;
  color:var(--color-text); width:100%}
.src-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:var(--space-3); margin-top:var(--space-4)}
.src{display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3) var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md);
  border-left:4px solid var(--color-sky); transition:border-left-color .15s ease}
.src:hover{border-left-color:var(--color-blue)}
.src-top{display:flex; align-items:center; gap:var(--space-3); min-width:0}
.src-name{font-family:var(--font-heading); font-weight:600; font-size:16px; line-height:1.25}
.src-holder{font-family:var(--font-mono); font-size:11px; color:var(--color-text-muted)}
.src-ep{display:flex; align-items:center; gap:var(--space-2); min-width:0}
.src-ep code{font-family:var(--font-mono); font-size:11.5px; color:var(--color-accent-2-700);
  background:var(--color-accent-2-100); border-radius:var(--radius-sm); padding:3px 6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.src-meta{display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:auto}
.empty{grid-column:1/-1; font-family:var(--font-mono); font-size:13px; color:var(--color-text-muted); padding:var(--space-8) 0}
.longtail{margin-top:var(--space-3); display:flex; gap:var(--space-6); align-items:center; flex-wrap:wrap;
  padding:var(--space-4) var(--space-6); background:var(--color-surface);
  border:1px solid var(--color-divider); border-left:4px solid var(--color-navy); border-radius:var(--radius-md)}
.longtail .big{font-family:var(--font-heading); font-weight:700; font-size:34px; line-height:1;
  letter-spacing:-.02em; color:var(--color-navy)}

/* — bronnenwand (logo's) — */
.wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:var(--space-3); margin-top:var(--space-4)}
.wall-item{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md);
  transition:border-color .15s ease}
.wall-item:hover{border-color:var(--color-blue)}
.wall-item span{min-width:0}
.wall-item .n{display:block; font-family:var(--font-heading); font-weight:600; font-size:14.5px; line-height:1.2}
.wall-item .w{display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--color-text-muted); margin-top:2px}

/* — fan-out — */
.fan{margin-top:var(--space-4); padding:var(--space-4); background:var(--color-surface);
  border:1px solid var(--color-divider); border-radius:var(--radius-md); overflow-x:auto}
.fan svg{display:block; min-width:680px; width:100%; height:auto}
.svg-lbl{font-family:var(--font-mono); font-size:11px; fill:var(--color-text)}
.svg-lbl-s{font-family:var(--font-mono); font-size:9.6px; fill:var(--color-text-muted)}
.svg-box{fill:var(--color-surface-2); stroke:var(--color-divider-strong)}
.svg-acc{fill:var(--color-accent-2-100); stroke:var(--color-blue)}
.svg-line{stroke:var(--color-divider-strong); fill:none}
.svg-line-acc{stroke:var(--color-blue); fill:none; stroke-dasharray:4 4}
.dienst-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:var(--space-3); margin-top:var(--space-4)}
.dienst{display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-3) var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md)}
.dienst h4{font-size:15.5px}
.dienst p{font-size:13.5px; color:var(--color-text-muted); line-height:1.45}
.dienst .ep{font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-muted); margin-top:var(--space-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dienst .brn{display:flex; align-items:center; gap:6px; margin-top:var(--space-1); flex-wrap:wrap}

/* — standaard — */
.std{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:var(--space-6); margin-top:var(--space-4); align-items:start}
@media (max-width:940px){.std{grid-template-columns:1fr}}
.rules{background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md); overflow:hidden}
.rule-row{display:flex; gap:var(--space-3); padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--color-divider); border-left:4px solid transparent; cursor:pointer; transition:background .15s, border-left-color .15s}
.rule-row:first-child{border-top:0}
.rule-row:hover,.rule-row.on{background:var(--color-accent-100); border-left-color:var(--color-blue)}
.rule-key{font-family:var(--font-mono); font-size:11.5px; color:var(--color-blue); min-width:74px; padding-top:3px}
.rule-row h4{font-size:16px} .rule-row p{font-size:13.8px; color:var(--color-text-muted); line-height:1.5}
#envPre .ln{display:block; padding:0 4px; margin:0 -4px; border-radius:var(--radius-sm); transition:background .18s}
#envPre .ln.hl{background:rgba(143,202,231,.20); box-shadow:inset 0 0 0 1px rgba(143,202,231,.45)}

/* — proberen — */
.try{gap:40px; align-items:start; display:grid; grid-template-columns:264px minmax(0,1fr); margin-top:var(--space-4);
  border:1px solid var(--color-divider); border-radius:var(--radius-md); overflow:hidden}
@media (max-width:860px){.try{grid-template-columns:1fr}}
/* api-lijst: afgeronde kaart als evenwicht naast het glass-paneel */
.try-list{background:var(--color-surface); border:1px solid var(--color-divider);
  border-radius:18px; overflow:hidden;
  box-shadow:0 8px 26px rgba(9,29,51,.06)}
.try-item{display:flex; align-items:center; gap:var(--space-3); padding:11px var(--space-4);
  border-top:1px solid var(--color-divider); border-left:3px solid transparent; cursor:pointer;
  transition:background .14s ease, border-color .14s ease}
.try-item:first-child{border-top:0}
.try-item:hover{background:#f2f7fc; border-left-color:var(--color-sky)}
.try-item[aria-selected="true"]{background:#eaf3fb; border-left-color:var(--color-blue)}
.try-item .t{display:block; font-weight:600; font-size:13.5px; line-height:1.3; color:var(--color-navy)}
.try-item .e{font-family:var(--font-mono); font-size:10.5px; color:var(--color-text-muted);
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.try-pane{display:flex; flex-direction:column; min-width:0;
  border-radius:18px; border:1px solid rgba(255,255,255,.28);
  background:rgba(9,29,51,.68);
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  box-shadow:0 30px 80px rgba(9,29,51,.32), 0 6px 18px rgba(13,44,71,.16),
    inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06);
  overflow:hidden}
.try-pane .code-body{flex:0 0 auto}

/* — dekking — */
.ladder-legend{display:flex; gap:var(--space-6); flex-wrap:wrap; font-size:13px; color:var(--color-text-muted);
  margin-top:var(--space-2); margin-bottom:var(--space-6)}
.ladder-legend span{display:inline-flex; align-items:center; gap:var(--space-2)}
.ladder-legend i{width:10px; height:10px; border-radius:var(--radius-sm); display:inline-block}
.road-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3)}
@media (max-width:1080px){.road-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.road-grid{grid-template-columns:1fr}}
.road-col{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md)}
.road-col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--space-2)}
.road-col li{display:flex; align-items:center; gap:var(--space-2); font-size:13.5px; color:var(--color-text-muted)}
.road-col li b{display:block; color:var(--color-text); font-weight:600; font-size:13.8px; line-height:1.25}
.road-col li .s{display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--color-text-muted)}

/* — afsluiting & voet — */
.closer{background:var(--color-navy); color:#fff}
.closer-in{max-width:1120px; margin:0 auto; padding:var(--space-12) 28px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-8); align-items:center}
@media (max-width:860px){.closer-in{grid-template-columns:1fr; padding:var(--space-8) var(--space-6)}}
.closer h2{font-size:clamp(24px,3vw,34px); letter-spacing:-.015em; max-width:24ch}
.closer p{color:var(--color-accent-300); margin-top:var(--space-2); max-width:52ch}
.closer .btn-secondary{background:transparent; border-color:rgba(255,255,255,.45); color:#fff}
.closer .btn-secondary:hover{background:rgba(255,255,255,.10); border-color:#fff; color:#fff}
.closer .btn-primary{background:#fff; border-color:#fff; color:var(--color-navy)}
.closer .btn-primary:hover{background:var(--color-accent-100); border-color:var(--color-accent-100); color:var(--color-navy)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}


.promise{display:flex; gap:var(--space-3); align-items:flex-start; margin-top:var(--space-6);
  padding:var(--space-4); background:var(--color-surface); border:1px solid var(--color-divider);
  border-left:4px solid var(--color-blue); border-radius:var(--radius-md)}
.promise svg{color:var(--color-blue); flex:none; margin-top:2px}
.promise p{font-size:15px; color:var(--color-text-muted); line-height:1.55}
.promise b{color:var(--color-text)}
.meter{display:flex; gap:2px; height:var(--control-h); border-radius:var(--radius-md);
  overflow:hidden; margin-top:var(--space-6)}
.meter .seg{display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:12px; font-weight:500; color:#fff; white-space:nowrap}
.meter .seg.live{background:var(--color-success)}
.meter .seg.soon{background:var(--color-accent-2-400); color:var(--color-accent-2-900)}
.dek-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3)}
@media (max-width:900px){.dek-grid{grid-template-columns:1fr}}
.dek-grid .road-col ul{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:var(--space-2)}


.aud-cijfers{display:flex; gap:22px; flex-wrap:wrap; margin-top:2px;
  padding-top:10px; border-top:1px dashed var(--color-divider)}
.aud-cijfers b{display:block; font-family:var(--font-heading); font-weight:300;
  font-size:22px; color:var(--color-navy); letter-spacing:-.01em}
.aud-cijfers span{font-size:11px; color:var(--color-text-muted)}

.hero-logos{margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--color-divider)}
.hero-logos .lbl{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-navy); font-weight:700; white-space:nowrap;
  background:var(--color-navy); color:#fff; padding:3px 10px; border-radius:6px}



/* zoekveld bij de api-lijst: zelfde kaartvorm */
#proberen .exp-search{border:1px solid var(--color-divider); border-radius:10px;
  padding:7px 10px; background:#fff}

/* — technologie-landschap: protocol-bars — */
.tech-bar{display:grid;grid-template-columns:100px 1fr 36px;gap:10px;align-items:center}
.tech-bar .tl{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--color-navy);
  text-transform:uppercase;letter-spacing:.04em;text-align:right}
.tech-bar .tr{height:22px;border-radius:6px;background:var(--color-navy);
  min-width:4px;transition:width .8s cubic-bezier(.2,.7,.3,1)}
.tech-bar .tn{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);text-align:right}