/* ============================================================================
   ceeme — ceeme-2026.css
   ENIGE BRON VAN WAARHEID voor de stijl van de redesign-2026.
   Laag 1 hieronder is letterlijk het goedgekeurde stijlblok van de homepage.
   Niets in laag 1 wijzigen zonder de homepage opnieuw pixel-voor-pixel te controleren.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   LAAG 1 — HOMEPAGE (goedgekeurd, ongewijzigd overgenomen uit index.html)
   --------------------------------------------------------------------------- */
:root{--ink:#17170F;--ink2:#3A3A31;--dim:#83837A;--cream:#F6F2E9;--paper:#FBF8F2;--line:#E2E2D8;--dline:rgba(246,242,233,.14);--accent:#C6892B;--violet:#6B3FD4}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Manrope',system-ui,-apple-system,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto;padding:0 30px}
a{color:inherit}
.eyebrow{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
h1{font-weight:800;letter-spacing:-.03em;line-height:1.0}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border-radius:12px;padding:14px 22px;text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s,color .18s;border:1.6px solid transparent;cursor:pointer;white-space:nowrap}
.btn-ink{background:var(--violet);color:var(--cream);box-shadow:0 10px 26px rgba(107,63,212,.28)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(107,63,212,.38)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:#fff;border-color:#d8d0be}
.btn.sm{padding:10px 16px;font-size:14px;border-radius:10px}

/* NAV */
header.nav{position:sticky;top:0;z-index:60;background:rgba(251,248,242,.82);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.solid{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:21px;letter-spacing:-.02em;text-decoration:none}
.brand img{width:30px;height:30px}
.menu{display:flex;align-items:center;gap:2px}
.mi{position:relative}
.mi>a{display:inline-flex;align-items:center;gap:5px;padding:0 15px;height:74px;color:var(--ink2);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .15s}
.mi>a:hover{color:var(--ink)}
.mi>a .chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
.mi:hover>a .chev{transform:rotate(180deg)}
.mega{position:fixed;top:64px;left:50%;transform:translateX(-50%) translateY(10px);opacity:0;visibility:hidden;transition:.2s;z-index:70;padding-top:12px}
.mi:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-inner{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(20,15,10,.16);padding:14px;display:flex;gap:12px}
.mcol{width:262px}.mcol+.mcol{border-left:1px solid var(--line);padding-left:12px}
.mcol .mh{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:4px 10px 6px}
.mcard{display:flex;gap:11px;padding:9px 10px;border-radius:11px;text-decoration:none;transition:background .15s}
.mcard:hover{background:var(--cream)}
.mcard .mic{width:36px;height:36px;border-radius:9px;background:#eee7d8;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mcard .mic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mcard b{display:block;font-size:13.5px;color:var(--ink);font-weight:700}
.mcard span{display:block;font-size:12px;color:var(--dim);margin-top:2px;line-height:1.35}
.plain{padding:0 15px;height:74px;display:inline-flex;align-items:center;color:var(--ink2);font-weight:600;font-size:15px;text-decoration:none}
.plain:hover{color:var(--ink)}
.nav .right{display:flex;align-items:center;gap:14px}
.nav .right .login{color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:600}
.navtoggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
.navtoggle svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media(max-width:1080px){
  .menu{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:6px 0;transform:translateY(-160%);transition:transform .3s;box-shadow:0 30px 60px rgba(0,0,0,.12);border-bottom:1px solid var(--line);max-height:calc(100vh - 74px);overflow:auto}
  .menu.open{transform:none}
  .mi>a,.plain{height:auto;padding:15px 30px;font-size:16px;border-bottom:1px solid var(--line)}
  .mi>a .chev{display:none}.mega{display:none}
  .nav .right .login{display:none}.navtoggle{display:block}
}

/* HERO */
.hero{position:relative;overflow:hidden;background:radial-gradient(60% 55% at 78% 20%,#fff,transparent 60%),linear-gradient(180deg,#FBF8F2,#F3ECE0)}
.hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center;min-height:calc(100vh - 74px);padding:40px 0 60px}
@media(max-width:940px){.hero .grid{grid-template-columns:1fr;min-height:0;padding:36px 0 50px;gap:6px}}
.hero h1{font-size:clamp(36px,4.7vw,60px);margin-top:20px;max-width:18ch;text-wrap:balance}
.hero h1 .l2{display:block}
.hero h1 .ac{color:var(--accent)}
.hero .lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink2);max-width:44ch;margin-top:22px;line-height:1.55}
.hero .cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.hero .trust{margin-top:24px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.hero .tagline{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.55;margin-top:2px}
.dotwrap{position:relative;width:100%;aspect-ratio:1/1;max-width:560px;margin-left:auto}
@media(max-width:940px){.dotwrap{max-width:380px;margin:6px auto 0}}
#dotcanvas{width:100%;height:100%;display:block}
.scrollhint{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}

h2{font-weight:800;letter-spacing:-.025em;line-height:1.08;font-size:clamp(30px,4vw,48px)}
h3{font-weight:700;letter-spacing:-.01em}
.ac{color:var(--accent)}
/* reveal (flow bij scrollen)
   ────────────────────────────────────────────────────────────────────────────────────────────────
   LET OP — deze drie regels stonden hier tot 9 augustus zónder `html.beweegt` ervoor, en dat was
   het duurste eigen doelpunt op de hele site: `.rv{opacity:0}` in de basis betekent dat de halve
   homepagina onzichtbaar is zolang er geen JavaScript draait. Een crawler die geen script uitvoert,
   las een pagina waarvan de bronnen, het product, het proces, de FAQ en het slot op nul stonden.

   Het is bovendien precies wat wij bij klanten als fout meten, op een site die adviseert leesbaar te
   zijn voor machines. Niemand zag het, want met JavaScript aan werkt het gewoon.

   De regel, uit docs/CEEME-WEBSITE-HERBOUW.md: ZONDER JAVASCRIPT VERANDERT ER NIETS AAN WAT ER STAAT.
   Verbergen mag alleen onder `html.beweegt`, en die klasse zet ceeme-beweging.js pas als hij draait.
   Dezelfde afspraak als bij .cmp-menu en .bw-in. scripts/test-zonderjs.mjs bewaakt het nu. */
html.beweegt .rv{opacity:0;transform:translateY(30px);transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
html.beweegt .rv.in{opacity:1;transform:none}
html.beweegt .rv.d1{transition-delay:.12s}html.beweegt .rv.d2{transition-delay:.26s}html.beweegt .rv.d3{transition-delay:.4s}
@media (prefers-reduced-motion: reduce){html.beweegt .rv{opacity:1;transform:none;transition:none}}
section.band{padding:112px 0}
.center{text-align:center;max-width:740px;margin:0 auto}
.center .eyebrow{color:var(--accent)}
.center h2{margin-top:14px}
.center .lead{font-size:clamp(16px,1.6vw,19px);color:var(--dim);margin:16px auto 0;line-height:1.6;max-width:60ch}
/* bronnen-bol (inkt) */
.sb{background:var(--ink);color:var(--cream);padding:112px 0 96px;text-align:center;overflow:hidden;position:relative}
.sb .glow2{position:absolute;left:50%;top:47%;width:700px;height:700px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(198,137,43,.16),transparent 66%);pointer-events:none}
.sb .eyebrow{color:var(--accent)}
.sb h2{margin-top:14px}.sb h2 .ac{color:var(--accent)}
.sb .lead{color:rgba(246,242,233,.74);max-width:660px;margin:18px auto 0;font-size:18px;line-height:1.6}
.sb-cats{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:20px;position:relative;z-index:3}
.sb-cats span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,242,233,.5);border:1px solid var(--dline);border-radius:999px;padding:6px 13px}
.sb-stage{position:relative;height:540px;margin:16px auto 0;max-width:960px;z-index:2}
#sb-sphere{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2}
.sb-node{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4);overflow:hidden;will-change:transform,opacity}
.sb-node img{width:23px;height:23px;object-fit:contain}
.sb-node img[src$=".svg"]{border-radius:5px}
@media(max-width:640px){.sb-stage{height:400px}}
/* product-preview (amzigo-stijl) */
.pv{padding:112px 0;background:linear-gradient(180deg,#FBF8F2,#F4EDE1);overflow:hidden}
.pv .grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
@media(max-width:940px){.pv .grid{grid-template-columns:1fr;gap:38px}}
.pv .eyebrow{color:var(--accent)}
.pv h2{margin-top:14px}.pv h2 .ac{color:var(--accent)}
.pv .lead{font-size:clamp(16px,1.6vw,19px);color:var(--dim);margin-top:18px;line-height:1.65;max-width:46ch}
.pv-list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.pv-list li{list-style:none;display:flex;gap:12px;align-items:flex-start;color:var(--ink2);font-size:15.5px;line-height:1.5}
.pv-list .ck{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--accent);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px}
.pv-list .ck svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pv-stage{position:relative}
.pv-stage:before{content:"";position:absolute;inset:-8% -6% -12% -6%;background:radial-gradient(60% 60% at 70% 40%,rgba(198,137,43,.22),transparent 70%);filter:blur(10px);z-index:0}
.pv-frame{position:relative;z-index:1;border-radius:16px;overflow:hidden;background:#0E0E09;border:1px solid rgba(22,21,15,.14);box-shadow:0 30px 70px rgba(22,21,15,.28),0 6px 18px rgba(22,21,15,.12)}
.pv-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0E0E09;border-bottom:1px solid rgba(246,242,233,.08)}
.pv-bar i{width:11px;height:11px;border-radius:50%;background:#2b3138;display:block}
.pv-bar .u{margin-left:12px;font-family:'Space Mono',monospace;font-size:11px;color:rgba(246,242,233,.4);letter-spacing:.02em}
.pv-frame img{display:block;width:100%;height:auto}
.pv-cap{margin-top:14px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:center}
/* proces (genummerd) */
.steps{margin-top:56px}
.step{display:grid;grid-template-columns:118px 1fr;gap:30px;padding:34px 0;border-top:1px solid var(--line);align-items:center}
.step:last-child{border-bottom:1px solid var(--line)}
@media(max-width:720px){.step{grid-template-columns:1fr;gap:14px;padding:26px 0}}
.step .sno{font-weight:800;font-size:clamp(40px,6vw,68px);letter-spacing:-.04em;color:#ece0c8;-webkit-text-stroke:1.2px var(--accent);line-height:1}
.step.in .sno{color:var(--accent);-webkit-text-stroke:0;transition:color .7s}
.step .sc{display:flex;gap:18px;align-items:flex-start}
.step .sic{width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step .sic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-size:22px}
.step p{color:var(--dim);margin-top:8px;font-size:15.5px;line-height:1.6;max-width:60ch}
/* ── DE PIJN — drie zinnen, genummerd, geen product erin (J70) ─────────────────────────────────
   Dezelfde genummerde vorm als .step hierboven, maar zonder icoon en zonder kader: een pijnzin
   hoort niet in een kaartje te staan, want dan leest hij als een feature. Het nummer is amber en
   groot, precies zoals .step .sno — dat is één accent per blok en dat is de regel. */
.pijn{background:linear-gradient(180deg,var(--paper),#F7F2E8)}
.pijn-lijst{max-width:940px;margin:56px auto 0;list-style:none}
.pijn-lijst li{display:grid;grid-template-columns:96px 1fr;gap:26px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.pijn-lijst li:last-child{border-bottom:1px solid var(--line)}
@media(max-width:720px){.pijn-lijst li{grid-template-columns:1fr;gap:8px;padding:22px 0}}
.pijn-no{font-family:'Space Mono',monospace;font-weight:700;font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;color:#ece0c8;-webkit-text-stroke:1.1px var(--accent);line-height:1}
.pijn-lijst li p{font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--ink);max-width:52ch}
.pijn-slot{max-width:940px;margin:38px auto 0;font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink2);font-weight:600}
/* De staving onder de pijn — de eerste van de twee sprongen naar de bron. Kleiner dan de zin
   erboven, want ze is een voetnoot met een deur erin: de claim staat boven, het bewijs achter
   de link, en het echte adres op de pagina daarachter. */
.pijn-staving{max-width:940px;margin:14px auto 0;font-size:15px;line-height:1.65;color:var(--dim)}
.pijn-staving a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:2px;white-space:nowrap}
.pijn-staving a:hover{color:#885700}

/* ── HET CIJFER — claim, afloop, uitweg. Elke stap zegt wat voor SOORT uitspraak het is (J65) ──
   De bronregel staat in Space Mono en klein: ze hoort erbij zoals een voetnoot erbij hoort, niet
   zoals een claim. Dat verschil is precies wat op de site van de concurrent ontbreekt, en het is
   alleen zichtbaar als de bron er ook uitziet als een bron. */
.cijfer{background:var(--ink);color:var(--cream)}
.cijfer .center .eyebrow{color:var(--accent)}
.cijfer h2 .ac{color:var(--accent)}
.cf-lijst{max-width:900px;margin:52px auto 0;list-style:none;counter-reset:cf}
.cf-stap{padding:28px 0;border-top:1px solid var(--dline)}
.cf-stap:last-child{border-bottom:1px solid var(--dline)}
.cf-soort{display:inline-block;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.cf-tekst{font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--cream);max-width:60ch}
.cf-bron{margin-top:14px;font-family:'Space Mono',monospace;font-size:12.5px;line-height:1.6;color:rgba(246,242,233,.56);max-width:70ch}
.cf-regel{max-width:900px;margin:34px auto 0;font-size:15.5px;line-height:1.65;color:rgba(246,242,233,.74);border-left:2px solid var(--accent);padding-left:18px}

/* ── HET BEZWAAR — twee antwoorden van de markt, dan het onze (J70, J62) ───────────────────────
   De derde kaart draagt `.op` en krijgt daarmee het inkt-vlak. Geen nieuwe kleur: het is hetzelfde
   omkeer-accent dat de productladder gebruikt voor `chosen`, en het label "Ons antwoord" staat er
   ook nog eens in woorden bij — kleur is nooit de enige drager (J71). */
.bz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
@media(max-width:900px){.bz-grid{grid-template-columns:1fr}}
.bz-kaart{border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;background:#fff}
.bz-kaart .bz-merk{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.bz-kaart h3{margin-top:12px;font-size:19px;line-height:1.3}
.bz-kaart p{margin-top:12px;color:var(--dim);font-size:15.5px;line-height:1.6}
.bz-kaart.op{background:var(--ink);border-color:var(--ink)}
.bz-kaart.op .bz-merk{color:var(--accent)}
.bz-kaart.op h3{color:var(--cream)}
.bz-kaart.op p{color:rgba(246,242,233,.76)}
.bz-telling{max-width:880px;margin:42px auto 0;text-align:center}
.bz-getal{font-size:clamp(18px,2vw,24px);line-height:1.45;font-weight:700;color:var(--ink);max-width:62ch;margin:0 auto}
.bz-bron{margin-top:12px;font-family:'Space Mono',monospace;font-size:12px;line-height:1.6;color:var(--dim);max-width:74ch;margin-left:auto;margin-right:auto}
.bz-dienst{max-width:760px;margin:44px auto 0;text-align:center;border-top:1px solid var(--line);padding-top:38px}
.bz-dienst h3{font-size:clamp(21px,2.4vw,28px);line-height:1.25}
.bz-dienst p{margin-top:14px;color:var(--dim);font-size:16.5px;line-height:1.65}
.bz-dienst .btn{margin-top:8px}

/* FAQ */
.faq{max-width:820px;margin:52px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:20px 4px}
.faq summary{font-weight:700;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:24px;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--dim);margin-top:13px;font-size:16px;line-height:1.65}
/* final cta */
.finalcta{padding:120px 0;text-align:center;background:linear-gradient(180deg,#FBF8F2,#F1E9DC)}
.finalcta h2{max-width:20ch;margin:14px auto 0;font-size:clamp(34px,5vw,60px)}
.finalcta h2 .ac{color:var(--accent)}
.finalcta .lead{color:var(--dim);max-width:50ch;margin:18px auto 0;font-size:18px}
.finalcta .cta{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
/* footer */
footer.ft{background:var(--ink);color:rgba(246,242,233,.6);padding:72px 0 36px;font-size:14px}
footer.ft .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media(max-width:820px){footer.ft .cols{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){footer.ft .cols{grid-template-columns:1fr}}
footer.ft .brand{color:var(--cream);margin-bottom:12px}
footer.ft .brand img{width:30px;height:30px}
footer.ft .tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:2px 0 12px}
footer.ft .about{max-width:32ch;color:rgba(246,242,233,.5);line-height:1.6}
footer.ft h4{color:var(--cream);font-size:13px;letter-spacing:.03em;margin-bottom:15px;font-weight:700}
footer.ft a{display:block;color:rgba(246,242,233,.6);text-decoration:none;margin-bottom:10px;transition:color .15s}
footer.ft a:hover{color:var(--accent)}
footer.ft .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:44px;padding-top:24px;border-top:1px solid rgba(246,242,233,.1);color:rgba(246,242,233,.4);font-size:13px}
footer.ft .base a{display:inline;margin:0}
.lang a{padding:2px 6px;border-radius:6px}.lang a.on{color:var(--cream);background:rgba(246,242,233,.1)}

/* ---------------------------------------------------------------------------
   LAAG 2 — APP-SCHERMEN (dashboard, admin, oneops)          variant C, 3-8-2026
   ---------------------------------------------------------------------------
   De site is warm papier + amber. De APP is inkt en warm grijs, met amber als
   ENIGE kleur — en die verschijnt alleen waar de klant iets moet doen.
   Reden (gemeten): amber #C6892B haalt 2,92:1 op licht. Als tekst of als knop
   met wit label zakt hij voor contrast. Door hem zeldzaam te maken werkt hij
   wél, en voelt de app rustig in plaats van bont.

   Geen rood in scores (regel uit de briefing + rood/groen is het slechtste paar
   voor kleurenblinden). Scores lopen door de neutrale trap van licht naar
   donker; het statuswoord, de balklengte en het doel-streepje dragen de
   betekenis. Rood bestaat alleen nog voor wat écht kapot is.
   --------------------------------------------------------------------------- */
:root{
  /* neutrale trap — hue 80°, tussen amber (73°) en papier (85°) */
  --n1:#FDFCFA; --n2:#F9F7F3; --n3:#F2EFEA; --n4:#EBE7E2;  --n5:#E4E0DA;  --n6:#DBD8D1;
  --n7:#D0CCC5; --n8:#BEB9B2; --n9:#918C84; --n10:#858079; --n11:#67635D; --n12:#221E18;
  /* oppervlakken — let op: in de app is WIT de kaart en n1 de bodem */
  --canvas:var(--n1); --sunken:var(--n2); --surface:#ffffff;
  /* randen als alpha: kloppen op wit én op n2 én op een gekleurd vlak */
  --bd-subtle:rgba(34,30,24,.08); --bd:rgba(34,30,24,.14); --bd-strong:rgba(34,30,24,.24);
  /* tekst */
  --tx:var(--n12); --tx2:var(--n11); --tx3:var(--n10); --tx-off:var(--n9);
  /* merk — amber alleen voor actie, aandacht en één merkmoment per scherm */
  --brand:#C6892B; --brand-surface:#F9EEE0; --brand-text:#885700; --brand-strong:#A06700;
  /* scores: de neutrale trap, van licht naar donker */
  --sc-low:#BEB9B2; --sc-mid:#858079; --sc-high:#221E18;
  --sc-low-bg:#F2EFEA; --sc-mid-bg:#F2EFEA; --sc-high-bg:#EBE7E2;
  --sc-low-tx:#67635D; --sc-mid-tx:#4A4741; --sc-high-tx:#221E18;
  /* rood — streng gerantsoeneerd: alleen écht kapot en onomkeerbaar */
  --danger:#B5584A; --danger-text:#9A4234; --danger-surface:#F8EAE6;
  --info:#0075BB; --info-text:#1F689D; --info-surface:#E6F2FD;
  /* STATUS — draait / staat stil / is kapot. Njusja 10 aug: "groen en rood mogen wel gebruikt
     worden: waar gepast!!!!". Dit is niet hetzelfde als de scores hierboven: een score is een
     oordeel over een getal en houdt de neutrale trap, een status is een toestand van een machine
     en mag een lampje hebben. Kleur is hier nooit de enige drager — zie .st-dot, dat klopt.
     Bron van de waarden: lib/paginavorm.js STATUS. Zie J71. */
  --st-loopt:#5B7B39; --st-loopt-tx:#46602C; --st-loopt-surface:#EFF2E5;
  --st-stuk:var(--danger); --st-stuk-tx:var(--danger-text); --st-stuk-surface:var(--danger-surface);
  --st-stil:var(--n8);  --st-stil-tx:var(--tx3);          --st-stil-surface:var(--n3);
  --track:var(--n5);
  --r-card:14px; --r-el:11px; --r-sm:9px;
}

/* --- 2a. de semantische klassen van ceeme.css op de app-waarden --- */
.app2026 .text-ink{color:var(--tx)!important}
.app2026 .text-inksoft{color:var(--tx2)!important}
.app2026 .text-muted{color:var(--tx3)!important}
.app2026 .text-creme{color:var(--cream)!important}
.app2026 .bg-creme{background-color:var(--sunken)!important}
.app2026 .bg-cremedeep{background-color:var(--n3)!important}
.app2026 .bg-ink{background-color:var(--n12)!important}
.app2026 .bg-inkdeep{background-color:#12100E!important}
.app2026 .border-line,.app2026 .border-line\/60{border-color:var(--bd)!important}
.app2026 .border-ink{border-color:var(--n12)!important}
/* alles wat vroeger 'lime'/teal was = de actie-amber */
.app2026 .bg-lime{background-color:var(--brand)!important;color:var(--n12)!important}
.app2026 .bg-lime\/5{background-color:rgba(198,137,43,.05)!important}
.app2026 .bg-lime\/10{background-color:rgba(198,137,43,.10)!important}
.app2026 .bg-lime\/15{background-color:var(--brand-surface)!important}
.app2026 .bg-lime\/25{background-color:rgba(198,137,43,.22)!important}
.app2026 .text-lime,.app2026 .text-teal{color:var(--brand-text)!important}
.app2026 .border-lime{border-color:var(--brand)!important}
.app2026 .border-lime\/30{border-color:rgba(198,137,43,.30)!important}
.app2026 .border-lime\/40{border-color:rgba(198,137,43,.40)!important}
.app2026 .ring-lime{--tw-ring-color:var(--brand)!important}
.app2026 .hover\:shadow-glow:hover{box-shadow:0 0 0 4px rgba(198,137,43,.14)!important}
.app2026 .font-display{font-family:'Manrope',system-ui,-apple-system,sans-serif}
.app2026 .font-mono{font-family:'Space Mono',monospace}
.app2026{font-family:'Manrope',system-ui,-apple-system,sans-serif;letter-spacing:0}

/* --- 2b. schil --- */
body.app2026{background:var(--canvas);color:var(--tx);-webkit-font-smoothing:antialiased}
.app2026 #dash{background:var(--canvas)}
.app2026 #dash main{background:var(--canvas)}
.app2026 #dash main>.sticky{background:rgba(253,252,250,.88);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--bd-subtle)}
/* kaarten: wit op de warme bodem, diepte uit lichtheid i.p.v. randen */
.app2026 #dash main .rounded-3xl{border-radius:18px}
.app2026 #dash main .rounded-2xl{border-radius:var(--r-card)}
.app2026 #dash main .rounded-xl{border-radius:var(--r-el)}
.app2026 #dash main .rounded-lg{border-radius:var(--r-sm)}
.app2026 #dash main .bg-white{background:var(--surface)}
.app2026 #dash main .shadow-soft{box-shadow:0 1px 2px rgba(22,21,15,.03),0 6px 20px rgba(22,21,15,.05)}
.app2026 #dash main .shadow-lift{box-shadow:0 14px 34px rgba(22,21,15,.09)}
/* de navigatie is bewust gedimd t.o.v. de inhoud (Linear-principe) */
.app2026 #dash>aside{background:var(--n12);color:var(--cream);border-right:1px solid rgba(246,242,233,.09);box-shadow:none}
.app2026 #dash>aside .text-creme{color:var(--cream)!important}
.app2026 #dash>aside [class*="text-creme/"]{color:rgba(246,242,233,.5)!important}
.app2026 #dash>aside .dash-nav{border-radius:var(--r-sm);color:rgba(246,242,233,.64)!important;font-weight:500;transition:background .16s,color .16s}
.app2026 #dash>aside .dash-nav:hover{background:rgba(246,242,233,.07);color:var(--cream)!important}
.app2026 #dash>aside .dash-nav.bg-lime{background:var(--brand)!important;color:var(--n12)!important;font-weight:700;box-shadow:none}
.app2026 #dash>aside .dash-nav.bg-lime:hover{background:var(--brand)!important;color:var(--n12)!important}
.app2026 #dash>aside .text-lime{color:var(--brand)!important}
.app2026 #dash>aside nav::-webkit-scrollbar{width:6px}
.app2026 #dash>aside nav::-webkit-scrollbar-thumb{background:rgba(246,242,233,.14);border-radius:99px}
/* donkere accentkaart */
.app2026 .tenq{background:var(--n12)!important;color:var(--cream)!important;border:1px solid rgba(246,242,233,.10)!important}
.app2026 .tenq .tq-k{font-family:'Space Mono',monospace;color:rgba(246,242,233,.5)}
.app2026 .tenq .tq-v{font-family:'Manrope',sans-serif;color:var(--cream)}
.app2026 .tenq .tq-v .teal{color:var(--brand)}
.app2026 .tenq .tq-s{color:rgba(246,242,233,.55)}
/* primaire knop = inkt met crème label, nooit amber (2,99:1 zakt) */
.app2026 #dash main button.bg-ink,.app2026 #dash main a.bg-ink{background:var(--n12);color:#fff;border-radius:var(--r-el)}
.app2026 :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.app2026 ::selection{background:rgba(198,137,43,.25);color:var(--n12)}
/* inlogkaart */
.app2026 #gate{background:var(--surface);border:1px solid var(--bd);border-radius:18px;box-shadow:0 24px 60px rgba(22,21,15,.09)}
.app2026 #gate input{border:1.4px solid var(--bd);border-radius:var(--r-el);background:#fff;color:var(--tx)}
.app2026 #gate input:focus{outline:none;border-color:var(--n12)}
.app2026 #gate button.bg-ink{background:var(--n12);color:#fff;border-radius:var(--r-el)}
.app2026 #gate .text-lime{color:var(--brand-text)!important}

/* --- 2c. stat-tile: vervangt de boogmeter --- */
.app2026 .stat{background:var(--surface);border:1px solid var(--bd-subtle);border-radius:var(--r-card);padding:13px 14px 14px}
.app2026 .stat .s-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.app2026 .stat .s-lab{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);line-height:1.3}
.app2026 .stat .s-word{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap;flex:none}
.app2026 .stat .s-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:5px}
.app2026 .stat .s-val{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1;font-family:'Manrope',sans-serif}
.app2026 .stat .s-val small{font-size:13px;font-weight:700;color:var(--tx3);margin-left:2px}
.app2026 .stat .s-d{font-size:12px;font-weight:700;margin-left:7px;white-space:nowrap}
.app2026 .stat .s-track{position:relative;height:7px;border-radius:99px;margin-top:11px;overflow:hidden;
  background:linear-gradient(to right,var(--n4) 0 39%,var(--n3) 39% 69%,var(--n2) 69% 100%)}
.app2026 .stat .s-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.app2026 .stat .s-goal{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--brand);border-radius:2px}
.app2026 .stat .s-scale{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:9px;color:var(--tx3);margin-top:4px}
.app2026 .stat .s-eng{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;font-weight:600}
.app2026 .stat .s-eng img{width:15px;height:15px;object-fit:contain}
.app2026 .statgrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* --- 2d. small multiples --- */
.app2026 .smgrid{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.app2026 .smp{border:1px solid var(--bd-subtle);border-radius:var(--r-sm);padding:7px 9px 4px;background:var(--surface)}
.app2026 .smp .smt{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.app2026 .smp .smt b{font-size:11.5px;font-weight:700}
.app2026 .smp .smt i{font-style:normal;font-family:'Space Mono',monospace;font-size:11px;color:var(--tx2)}

/* --- 2e. statuskleuren: rood alleen waar iets écht kapot is --- */
.app2026 .is-danger{color:var(--danger-text)}
.app2026 .is-danger-bg{background:var(--danger-surface);color:var(--danger-text)}
.app2026 .is-info-bg{background:var(--info-surface);color:var(--info-text)}
.app2026 .is-todo{background:var(--brand-surface);color:var(--n12)}
.app2026 .btn-danger{background:var(--danger);color:#fff;border-radius:var(--r-el);font-weight:700}

/* ontbrekende utilities die de markup al gebruikte maar niet in ceeme.css zaten */
.app2026 .pt-1{padding-top:.25rem}
.app2026 .pt-2{padding-top:.5rem}
.app2026 .pb-2{padding-bottom:.5rem}
.app2026 .list-decimal{list-style-type:decimal}
.app2026 .first\:mt-0:first-child{margin-top:0}
.app2026 .hover\:shadow-soft:hover{box-shadow:0 1px 2px rgba(22,21,15,.03),0 6px 20px rgba(22,21,15,.05)}
.app2026 .text-creme-sub{color:rgba(246,242,233,.5)}
/* J71 — deze twee regels zetten groen tot 10 augustus 2026 uit. Ze zijn weg omdat groen een
   STATUSkleur mag zijn. NB: ze deden minder dan het doc beweerde — dashboard.html draagt
   #5B7B39 65 keer, maar 62 daarvan zijn INLINE style-attributen waar geen enkele CSS-regel bij
   kan; alleen 2× .bg-[#5B7B39] en 1× .text-[#5B7B39] werden geneutraliseerd. En die ene was
   precies een statusstipje. Zie J75. */

/* --- 2e-bis. status: draait / staat stil / is kapot -----------------------------------------
   Kleur mag hier, maar nooit als ENIGE drager (AGENTS.md punt 4, aanvulling 10 augustus).
   Daarom draagt elk lampje drie dingen tegelijk: een tint, een KLOP, en een woord ernaast.
   Een kleurenblinde bezoeker leest de klop en het woord; wie reduced-motion aan heeft, leest de
   tint en het woord. Er is geen stand waarin er maar één signaal over is. */
.app2026 .st{display:inline-flex;align-items:center;gap:.45em;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.app2026 .st-dot{width:7px;height:7px;border-radius:999px;background:var(--st-stil);flex:none}
.app2026 .st-loopt{color:var(--st-loopt-tx)}
.app2026 .st-loopt .st-dot{background:var(--st-loopt);animation:st-klop 1.6s ease-in-out infinite}
.app2026 .st-stuk{color:var(--st-stuk-tx)}
.app2026 .st-stuk .st-dot{background:var(--st-stuk)}
.app2026 .st-stil{color:var(--st-stil-tx)}
.app2026 .st-pil{padding:.28em .7em;border-radius:999px;background:var(--st-stil-surface)}
.app2026 .st-loopt.st-pil{background:var(--st-loopt-surface)}
.app2026 .st-stuk.st-pil{background:var(--st-stuk-surface)}
@keyframes st-klop{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
@media(prefers-reduced-motion:reduce){
  .app2026 .st-loopt .st-dot{animation:none;box-shadow:0 0 0 3px var(--st-loopt-surface)}
}

/* vindbaarheidskaart: kaart links, zonelijst rechts */
.app2026 .map-split{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:1024px){ .app2026 .map-split{grid-template-columns:1.9fr 1fr} }

/* --- 2f. mobiele navigatie --- */
.app2026 .dashbar{display:none}
@media(max-width:900px){
  .app2026 #dash{flex-direction:column}
  .app2026 .dashbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:70;
    height:56px;box-sizing:border-box;padding:0 16px;background:var(--n12);color:var(--cream);
    border-bottom:1px solid rgba(246,242,233,.10)}
  .app2026 .dashbar .bt{margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:none;border:0;
    color:var(--cream);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;cursor:pointer;padding:9px 10px;border-radius:var(--r-sm)}
  .app2026 .dashbar .bt:hover{background:rgba(246,242,233,.10)}
  .app2026 .dashbar .bt svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .app2026 #dash>aside{position:fixed;inset:56px 0 auto 0;width:100%;height:auto;max-height:calc(100vh - 56px);
    overflow:auto;padding:8px 12px 20px;transform:translateY(-102%);
    transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:60;box-shadow:0 30px 60px rgba(0,0,0,.35)}
  .app2026 #dash>aside.open{transform:none}
  .app2026 #dash>aside>a:first-of-type{display:none}
  .app2026 #dash>aside nav{overflow:visible}
  .app2026 #dash>aside .dash-nav{padding:11px 12px;font-size:14.5px}
  .app2026 #dash main>.sticky{position:static;height:auto;padding:14px 16px 12px;display:block;
    background:var(--canvas);backdrop-filter:none;-webkit-backdrop-filter:none}
  .app2026 #dash main>.sticky>div:last-child{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .app2026 #dash main>.sticky h1{font-size:26px}
  .app2026 #dash main{min-width:0;overflow-x:hidden}
  .app2026 #views,.app2026 #detail{padding:16px 14px}
  .app2026 #views [class*="grid-cols-["],.app2026 #detail [class*="grid-cols-["]{grid-template-columns:1fr!important}
  .app2026 #views .flex>*,.app2026 #detail .flex>*{min-width:0}
}
@media(prefers-reduced-motion:reduce){ .app2026 #dash>aside{transition:none} }
.app2026 .stat .s-lab{display:inline-flex;align-items:center;gap:6px}
.app2026 .s-ico{width:14px;height:14px;object-fit:contain;flex:none;display:inline-block}

/* het merkmoment: één amberkleurig vlak met het kerngetal (inkt op amber = 5,54:1) */
.app2026 .hero-brand{background:var(--brand);color:var(--n12);border-radius:var(--r-card);padding:20px 22px 22px}
.app2026 .hero-brand .hb-k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(34,30,24,.62)}
.app2026 .hero-brand .hb-v{font-size:62px;font-weight:800;letter-spacing:-.035em;line-height:1;margin-top:10px}
.app2026 .hero-brand .hb-v small{font-size:19px;font-weight:700;color:rgba(34,30,24,.55);margin-left:3px}
.app2026 .hero-brand .hb-s{font-size:15.5px;font-weight:700;margin-top:9px;line-height:1.25}
.app2026 .hero-brand .hb-d{font-family:'Space Mono',monospace;font-size:11px;color:rgba(34,30,24,.62);margin-top:7px}
.app2026 .stat .s-eng b{font-weight:700;color:var(--tx)}
.app2026 .hero-row{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:1024px){ .app2026 .hero-row{grid-template-columns:290px 1fr} }

/* zijbalk: groepen die openklappen bij klik */
.app2026 .navgrp{margin-top:2px}
.app2026 .navgrp-h{width:100%;display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:8px 11px;border-radius:9px;color:rgba(246,242,233,.86);font:600 13.5px 'Manrope',sans-serif;text-align:left}
.app2026 .navgrp-h:hover{background:rgba(246,242,233,.07)}
.app2026 .navgrp-h .chev{width:0;height:0;border-left:5px solid rgba(246,242,233,.45);border-top:4px solid transparent;border-bottom:4px solid transparent;flex:none;transition:transform .18s}
.app2026 .navgrp.open .navgrp-h .chev{transform:rotate(90deg)}
.app2026 .navgrp-h .n{margin-left:auto;font-family:'Space Mono',monospace;font-size:10px;color:rgba(246,242,233,.38)}
.app2026 .navgrp-b{display:none;padding:1px 0 4px 10px;margin-left:6px;border-left:1px solid rgba(246,242,233,.10)}
.app2026 .navgrp.open .navgrp-b{display:block}

/* ── Het productluik: een meting in plaats van een screenshot ─────────────────────────────────
   Hier stond /product-preview.jpg, 93 kB nagemaakt scherm. Njusja: "je mag wel die ene slechte
   afbeelding weghalen en iets anders toevoegen indien beter."

   Wat er nu staat is beter om drie redenen. Het weegt niets. Het schaalt scherp op elk scherm.
   En een crawler LEEST de klantvraag, het antwoord en de reden waarom je er niet in staat — dat
   is precies het verhaal van de pagina, nu ook voor een machine. Een foto van datzelfde verhaal
   is voor een AI een leeg vlak. */
.pvl { padding: 20px 22px 22px; background: #fff }
.pvl-q { padding-bottom: 16px; border-bottom: 1px solid rgba(23,23,15,.09) }
.pvl-tag { display: inline-block; font-family: "Space Mono", ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: #A8721F; background: rgba(198,137,43,.1);
  border-radius: 999px; padding: 4px 9px }
.pvl-q p { margin: 9px 0 5px; font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; color: #17170F;
  line-height: 1.35 }
.pvl-meta { font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px; color: #83837A }
.pvl-a { margin: 14px 0 0 }
.pvl-r { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(23,23,15,.06) }
.pvl-r b { font-size: 13.5px; font-weight: 600; color: #3A3A31 }
.pvl-r em { font-style: normal; font-family: "Space Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: #83837A }
.pvl-r em.w { color: #17170F; font-weight: 700 }
/* De eigen regel is de enige die opvalt. Dat is het hele punt van de sectie: jij staat er niet. */
.pvl-r.jij { background: rgba(198,137,43,.07); margin: 0 -10px; padding: 9px 10px; border-radius: 7px;
  border-bottom-color: transparent }
.pvl-r.jij b { color: #17170F; font-weight: 800 }
.pvl-r em.n { color: #A8721F; font-weight: 700 }
.pvl-w { margin: 15px 0 7px; font-family: "Space Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: #83837A }
.pvl-g { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px }
.pvl-g li { position: relative; padding-left: 15px; font-size: 12.5px; color: #3A3A31; line-height: 1.45 }
.pvl-g li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: #C6892B }
.pvl-l { display: flex; align-items: center; gap: 8px; margin-top: 17px; padding-top: 14px;
  border-top: 1px solid rgba(23,23,15,.09); font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #83837A; flex-wrap: wrap }
.pvl-l i { font-style: normal; color: rgba(23,23,15,.25) }
.pvl-l .op { color: #17170F; font-weight: 700; border-bottom: 2px solid #C6892B; padding-bottom: 1px }
@media (max-width: 520px) { .pvl { padding: 16px } .pvl-r.jij { margin: 0 -6px; padding: 9px 6px } }