/* =========================================================
   YellowQ — Merkgids stylesheet
   De Meetlat: score-balken als signatuur
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* Teal / ink familie (verankerd op logo-teal #2d4a4e) */
  --ink:        #15292b;   /* diepste teal, bijna-zwart — tekst & diepe panelen */
  --teal:       #234a4e;   /* primair merk-teal */
  --teal-2:     #356b70;   /* mid */
  --teal-3:     #5d8589;   /* zacht */
  --teal-line:  #c3d4d3;   /* lijnen op teal-vlakken */

  /* Signaalgeel (logo-geel #EAAA00) */
  --geel:       #eaaa00;   /* het merk-accent, de score-kleur */
  --geel-hi:    #ffc21e;   /* highlight / gloed */
  --geel-soft:  #f6e6b8;   /* zacht vlak */

  /* Papier / warme neutralen (vervangt de slappe crème) */
  --paper:      #f4efe7;   /* hoofd-achtergrond */
  --paper-2:    #faf6ef;   /* lichter */
  --bone:       #e9e1d3;   /* lijn / low-contrast vlak */
  --bone-2:     #ddd2bf;
  --white:      #ffffff;

  /* Functioneel + conceptueel duo */
  --goed:       #1f8a5b;   /* "in één keer goed" */
  --goed-bg:    #e3f1e8;
  --correctie:  #d8593e;   /* "correctiecultuur" / fout */
  --correctie-bg:#f7e3dc;

  /* Type */
  --display: 'Archivo', system-ui, sans-serif;
  --text:    'Archivo', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Maat */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --r:   14px;   /* standaard radius — strak, niet bubbelig */
  --r-lg:22px;

  --shadow:   0 2px 4px rgba(21,41,43,.04), 0 18px 44px rgba(21,41,43,.07);
  --shadow-lg:0 4px 10px rgba(21,41,43,.06), 0 36px 90px rgba(21,41,43,.13);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-weight:420;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--geel);color:var(--ink)}
img{display:block;max-width:100%}

/* ---------- TYPOGRAFIE ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:760;line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
.display{
  font-family:var(--display);font-weight:820;
  font-size:clamp(3rem, 9vw, 7.5rem);
  line-height:.92;letter-spacing:-.035em;
}
.h-xl{font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:.98;letter-spacing:-.03em}
.h-lg{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.025em}
.h-md{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.08;letter-spacing:-.02em}
p{text-wrap:pretty}
.lead{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5;font-weight:440;color:var(--teal)}
.muted{color:var(--teal-2)}
em{font-style:normal;color:var(--geel);font-weight:inherit}

/* mono "meet-laag": labels, data, kickers */
.kicker{
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal-2);
  display:inline-flex;align-items:center;gap:.6rem;
}
.kicker::before{
  content:"";width:26px;height:2px;background:var(--geel);display:inline-block;
}
.kicker.no-tick::before{display:none}
.mono{font-family:var(--mono)}
.data{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{position:relative}
.band{padding:clamp(72px,11vw,150px) 0}
.band-tight{padding:clamp(48px,7vw,90px) 0}
.divider{height:1px;background:var(--bone);border:0}

/* ruler / tick baseline pattern */
.ruler{
  height:18px;width:100%;
  background-image:repeating-linear-gradient(90deg,
    var(--bone-2) 0 1px, transparent 1px 24px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ruler.tall{
  background-image:
    repeating-linear-gradient(90deg, var(--teal-3) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--bone-2) 0 1px, transparent 1px 24px);
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--bone);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.nav img{height:26px;flex-shrink:0}
.nav .links{display:flex;gap:clamp(.55rem,1.1vw,1.05rem);flex-wrap:nowrap}
.nav .links a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal-2);text-decoration:none;transition:color .2s;white-space:nowrap;
}
.nav .links a:hover{color:var(--ink)}
.nav .ver{flex-shrink:0}
@media(max-width:1180px){.nav .ver{display:none}}
@media(max-width:980px){.nav .links{display:none}}

/* ---------- SCORE-BALKEN (signatuur) ---------- */
.bars{display:flex;align-items:flex-end;gap:6px;height:64px}
.bars span{width:9px;border-radius:3px;background:var(--teal);display:block}
.bars span.y{background:var(--geel)}
.bars span.l{background:var(--teal-3)}
.bars.lg{gap:10px;height:120px}
.bars.lg span{width:15px;border-radius:5px}
.bars.sm{gap:4px;height:34px}
.bars.sm span{width:6px;border-radius:2px}

/* full-bleed bar field used as decoration */
.barfield{display:flex;align-items:flex-end;gap:14px;height:100%}
.barfield span{flex:1;border-radius:8px 8px 0 0;display:block}

/* ---------- CARDS / PANELS ---------- */
.card{background:var(--white);border:1px solid var(--bone);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow)}
.panel{background:var(--ink);color:var(--paper);border-radius:var(--r-lg)}
.panel h1,.panel h2,.panel h3,.panel h4{color:var(--paper)}
.panel .kicker{color:var(--geel)}
.panel .muted{color:var(--teal-3)}
.on-teal{background:var(--teal)}

.grid{display:grid;gap:clamp(16px,2vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- SWATCHES ---------- */
.swatch{border-radius:var(--r);overflow:hidden;border:1px solid var(--bone);background:var(--white)}
.swatch .chip{height:128px;display:flex;align-items:flex-end;padding:.85rem}
.swatch .meta{padding:.8rem .9rem 1rem}
.swatch .name{font-weight:700;font-size:.98rem}
.swatch .hex{font-family:var(--mono);font-size:.78rem;color:var(--teal-2);margin-top:.15rem}
.swatch .use{font-size:.8rem;color:var(--teal-2);margin-top:.5rem;line-height:1.4}
.chip .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border-radius:6px;background:rgba(255,255,255,.18);color:#fff}

/* ---------- DO / DONT ---------- */
.dd{border-radius:var(--r);overflow:hidden;border:1px solid var(--bone);background:var(--white)}
.dd .vis{height:150px;display:flex;align-items:center;justify-content:center;background:var(--paper-2);border-bottom:1px solid var(--bone)}
.dd .lab{padding:.7rem 1rem;font-size:.86rem;display:flex;gap:.5rem;align-items:flex-start}
.dd .ic{font-family:var(--mono);font-weight:700;flex-shrink:0}
.dd.ok .ic{color:var(--goed)} .dd.no .ic{color:var(--correctie)}

/* ---------- MEETKADER (fotoframe) ---------- */
.meetkader{position:relative;border-radius:4px 4px 4px 22px;overflow:hidden;background:var(--ink)}
.meetkader img{width:100%;height:100%;object-fit:cover;display:block}
.meetkader .tick{
  position:absolute;left:0;right:0;bottom:0;height:12px;
  background:repeating-linear-gradient(90deg,var(--geel) 0 2px,transparent 2px 14px);
}
.meetkader .cap{
  position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.5rem;
  background:var(--geel);color:var(--ink);padding:.4rem .8rem;
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;border-radius:0 12px 0 0;
}
.meetkader.duotone img{filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity}
.meetkader.duotone{background:var(--teal)}

/* badges / pills */
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .8rem;border-radius:50px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.04em}
.pill-y{background:var(--geel-soft);color:#7a5a00}
.pill-g{background:var(--goed-bg);color:var(--goed)}
.pill-r{background:var(--correctie-bg);color:var(--correctie)}
.pill-t{background:var(--teal-line);color:var(--teal)}

/* keten schakels */
.keten{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.schakel{flex:1;min-width:150px;background:var(--white);border:1px solid var(--bone);padding:1.3rem;position:relative}
.schakel:first-child{border-radius:var(--r) 0 0 var(--r)}
.schakel:last-child{border-radius:0 var(--r) var(--r) 0}
.schakel .lt{font-family:var(--display);font-weight:820;font-size:2.4rem;line-height:1;color:var(--teal)}
.schakel .nm{font-weight:700;margin-top:.4rem;font-size:.96rem}
.schakel .ds{font-size:.8rem;color:var(--teal-2);margin-top:.3rem;line-height:1.45}
.schakel .pc{font-family:var(--mono);font-weight:700;color:var(--geel);margin-top:.7rem;font-size:1.05rem}
.timesx{display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:var(--teal-3);font-size:1.3rem;padding:0 .2rem;align-self:center}
@media(max-width:760px){.schakel{border-radius:var(--r)!important}}

/* footnote / source */
.src{font-family:var(--mono);font-size:.7rem;color:var(--teal-3);letter-spacing:.02em}

/* utility */
.stack-sm > * + *{margin-top:.6rem}
.stack > * + *{margin-top:1.1rem}
.stack-lg > * + *{margin-top:2rem}
.center{text-align:center}
.teal-text{color:var(--teal)}
.maxw-prose{max-width:62ch}
.fullbleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* ---------- COVER: stijgende score-grafiek ---------- */
.cover{position:relative;overflow:hidden}
.cover-grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,64px);align-items:center;
  padding-top:clamp(64px,10vw,128px);padding-bottom:clamp(56px,8vw,108px);
}
@media(max-width:840px){.cover-grid{grid-template-columns:1fr;align-items:start}}
.riser{
  display:flex;align-items:flex-end;gap:clamp(7px,1.4vw,15px);
  height:clamp(230px,30vw,360px);
  border-bottom:2px solid rgba(255,255,255,.16);
}
.riser .b{flex:1;border-radius:7px 7px 0 0;background:var(--teal-2);position:relative}
.riser .b.dim{background:var(--correctie);opacity:.85}
.riser .b.mid{background:var(--teal-3)}
.riser .b.peak{background:var(--geel)}
.riser .b .vlabel{
  position:absolute;top:-1.7rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.72rem;font-weight:700;white-space:nowrap;
}
.riser-axis{display:flex;justify-content:space-between;margin-top:.7rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--teal-3)}

/* cover: mens-foto + verloop + lijn */
.cover-photo{position:relative;border-radius:18px 18px 18px 42px;overflow:hidden;aspect-ratio:4/3.1;background:#0d1819;box-shadow:0 30px 70px rgba(0,0,0,.38)}
.cover-photo>img{width:100%;height:100%;object-fit:cover;display:block}
.cover-photo .g{position:absolute;inset:0;background:
  linear-gradient(118deg,#15292b 0%,rgba(21,41,43,.55) 36%,rgba(21,41,43,.05) 70%),
  linear-gradient(to top,rgba(13,24,26,.92) 0%,rgba(13,24,26,.30) 38%,transparent 66%)}
.cover-photo svg{position:absolute;left:0;right:0;bottom:0;width:100%}
@media(max-width:840px){.cover-photo{aspect-ratio:16/10}}

/* ---------- VORMTAAL motieven ---------- */
.motif{border-radius:var(--r);overflow:hidden;border:1px solid var(--bone);background:var(--white)}
.motif .vis{height:200px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.motif .body{padding:1.2rem 1.3rem 1.4rem}
.motif .body h4{font-size:1.05rem}
.motif .body p{font-size:.88rem;color:var(--teal-2);margin-top:.35rem;line-height:1.5}
/* graph-paper raster */
.rasterfill{position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 28px);}
.rasterfill.dark{background-image:
    repeating-linear-gradient(0deg, rgba(21,41,43,.07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(21,41,43,.07) 0 1px, transparent 1px 28px);}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.5rem;border-radius:10px;
  font-family:var(--text);font-weight:700;font-size:.92rem;border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s;line-height:1}
.btn-y{background:var(--geel);color:var(--ink)}
.btn-y:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(234,170,0,.32)}
.btn-t{background:var(--ink);color:var(--paper)}
.btn-t:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--teal);color:var(--teal)}
.btn-ghost:hover{background:var(--teal);color:var(--paper)}
.btn .ar{font-family:var(--mono);font-weight:600}

/* line icons */
.ico{width:30px;height:30px;stroke:var(--teal);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* mini score-track (Scan) */
.bartrack{flex:1;height:6px;border-radius:3px;background:var(--bone);margin:0 .6rem;overflow:hidden;display:block}
.bartrack i{display:block;height:100%;background:var(--geel);border-radius:3px}

/* ---------- ICOONSET ---------- */
.icogrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:860px){.icogrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.icogrid{grid-template-columns:repeat(3,1fr)}}
.icotile{display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:1.1rem .4rem;border:1px solid var(--bone);border-radius:12px;background:var(--white);transition:border-color .2s,transform .2s}
.icotile:hover{border-color:var(--teal-3);transform:translateY(-2px)}
.icotile svg{width:30px;height:30px;stroke:var(--teal);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icotile span{font-size:.68rem;color:var(--teal-2);font-family:var(--mono);letter-spacing:.02em;text-align:center;line-height:1.2}

/* ---------- FOTO: prompts & treatments ---------- */
.prompt{background:var(--ink);color:var(--paper);border-radius:12px;padding:1.15rem 1.25rem;
  font-family:var(--mono);font-size:.8rem;line-height:1.6;border:1px solid #28484b}
.prompt .lbl{color:var(--geel);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.55rem}
.prompt.base{border-color:var(--geel);background:#102123}
.q-cut{position:relative;aspect-ratio:1/1}
.q-cut .ring{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--ink)}
.q-cut .ring img{width:100%;height:100%;object-fit:cover;display:block}
.q-tail{position:absolute;right:3%;bottom:7%;width:36%;height:13.5%;
  background:var(--geel);border:5px solid var(--paper);border-radius:50px;
  transform:rotate(-45deg);transform-origin:center}
.fb{position:relative;border-radius:4px 4px 4px 18px;overflow:hidden}
.fb img{width:100%;height:100%;object-fit:cover;display:block}
.fb .grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,41,43,.82) 0%,rgba(21,41,43,.1) 45%,transparent 70%)}
.fb .ov{position:absolute;left:1rem;right:1rem;bottom:.9rem;color:var(--paper)}
.fb .ov .rule{height:6px;background:repeating-linear-gradient(90deg,var(--geel) 0 2px,transparent 2px 13px);margin-bottom:.5rem}

/* ---------- HET BEELDSYSTEEM ---------- */
/* A · scorebalk-voet (primair) */
.shot{position:relative;border-radius:8px;overflow:hidden;background:var(--ink)}
.shot>img{width:100%;height:100%;object-fit:cover;display:block}
.foot{position:absolute;left:0;right:0;bottom:0;background:var(--ink);display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem}
.foot.goed{background:var(--goed)}
.foot .eqbars{display:flex;align-items:flex-end;gap:3px;height:22px;flex-shrink:0}
.foot .eqbars i{width:5px;border-radius:2px;display:block;background:var(--geel)}
.foot.goed .eqbars i{background:#fff}
.foot .cap{font-family:var(--mono);color:var(--paper);font-size:.72rem;letter-spacing:.05em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot .score{font-family:var(--mono);color:var(--geel);font-weight:700;font-size:.84rem;flex-shrink:0}
.foot.goed .cap,.foot.goed .score{color:#fff}
/* C · teal duotoon */
.duo{filter:url(#duoTeal)}

/* foto + verloop (modern, echt) */
.wash{position:absolute;inset:0;background:linear-gradient(118deg,rgba(13,28,30,.85) 0%,rgba(35,74,78,.30) 48%,rgba(35,74,78,0) 82%)}
.brand-grad{background:linear-gradient(125deg,#2d6b6f 0%,#15292b 100%)}

/* het Vooruit-kader: kaart helt, foto-pixels recht */
.dyn{transform:skewX(-8deg);overflow:hidden;position:relative;background:var(--ink)}
.dyn .ph{overflow:hidden}
.dyn .ph>img{width:100%;height:100%;object-fit:cover;display:block;transform:skewX(8deg) scale(1.2)}
.dyn .sb{background:var(--ink);padding:.7rem 1.15rem .85rem}
.dyn .sbi{transform:skewX(8deg);display:flex;align-items:center;gap:.7rem}
.dyn .sb .eqbars{display:flex;align-items:flex-end;gap:3px;height:20px;flex-shrink:0}
.dyn .sb .eqbars i{width:5px;border-radius:2px;background:var(--geel);display:block}
.dyn .sb .cap{font-family:var(--mono);color:var(--paper);font-size:.7rem;letter-spacing:.05em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dyn .sb .score{font-family:var(--mono);color:var(--geel);font-weight:700;font-size:.82rem;white-space:nowrap;flex-shrink:0}
.r-bl{border-radius:14px 14px 14px 30px}
.r-br{border-radius:14px 14px 30px 14px}

/* ---------- INTERFACE: telefoon-app ---------- */
.phone{width:266px;max-width:100%;background:#0d1819;border-radius:34px;padding:9px;box-shadow:var(--shadow-lg)}
.phone .screen{background:var(--white);border-radius:27px;overflow:hidden;position:relative}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38%;height:18px;background:#0d1819;border-radius:0 0 12px 12px;z-index:4}
.app-hd{background:var(--teal);color:var(--paper);padding:1.5rem 1rem .95rem}
.app-hd .wo{font-family:var(--mono);font-size:.84rem;font-weight:600}
.app-hd .cl{font-size:.74rem;color:var(--teal-3);margin-top:.15rem}
.app-hd .st{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;background:var(--geel);color:var(--ink);font-weight:700;padding:.18rem .5rem;border-radius:5px;display:inline-block;margin-top:.6rem}
.app-bd{padding:.85rem 1rem .2rem}
.app-row{display:flex;justify-content:space-between;gap:.5rem;font-size:.74rem;padding:.32rem 0;border-bottom:1px solid var(--bone)}
.app-row .k{color:var(--teal-2);font-family:var(--mono);font-size:.64rem;letter-spacing:.04em}
.chk{display:flex;align-items:center;gap:.55rem;font-size:.76rem;padding:.3rem 0}
.chk .b{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--bone-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.62rem}
.chk.done .b{background:var(--goed);border-color:var(--goed);color:#fff}
.chk.done{color:var(--ink)} .chk.todo{color:var(--teal-3)}
.app-act{display:flex;gap:.5rem;padding:.85rem 1rem 1.1rem}
.app-act .btn{flex:1;justify-content:center;padding:.62rem;font-size:.78rem;border-radius:9px}

/* ---------- INTERFACE: desktop ---------- */
.win{border-radius:12px;overflow:hidden;border:1px solid var(--bone);box-shadow:var(--shadow-lg);background:var(--white)}
.win .bar{background:var(--paper-2);border-bottom:1px solid var(--bone);display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem}
.win .dots{display:flex;gap:6px}
.win .dots i{width:11px;height:11px;border-radius:50%;background:var(--bone-2);display:block}
.win .url{font-family:var(--mono);font-size:.7rem;color:var(--teal-2);background:var(--white);border:1px solid var(--bone);border-radius:7px;padding:.25rem .8rem;flex:1;max-width:300px}
.dash-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;padding:1rem 1.3rem;border-bottom:1px solid var(--bone)}
.tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.tbl th{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-3);text-align:left;padding:.7rem 1.3rem;border-bottom:1px solid var(--bone)}
.tbl td{padding:.65rem 1.3rem;border-bottom:1px solid var(--bone);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .act{display:flex;gap:.4rem}
.iconbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--bone);background:var(--white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.iconbtn svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.y{background:var(--geel);border-color:var(--geel)} .iconbtn.y svg{stroke:var(--ink)}

/* ---------- DATATAAL ---------- */
.bench{display:flex;flex-direction:column;gap:.7rem}
.benchrow{display:grid;grid-template-columns:max-content 1fr 50px;align-items:center;gap:.8rem}
.benchrow .bl{font-family:var(--mono);font-size:.72rem;color:var(--teal-2);letter-spacing:.04em;white-space:nowrap}
.benchtrack{height:13px;border-radius:7px;background:var(--bone);position:relative;overflow:visible}
.benchtrack i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:var(--geel);display:block}
.benchtrack i.g{background:var(--goed)} .benchtrack i.r{background:var(--correctie)}
.benchavg{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.benchrow .bv{font-family:var(--mono);font-weight:700;font-size:.82rem;text-align:right}
.bignum{font-family:var(--display);font-weight:820;line-height:.88;letter-spacing:-.03em}

/* ---------- APP-ICOON ---------- */
.appicon{width:104px;height:104px;border-radius:24px;background:var(--teal);display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:0 20px 26px;box-shadow:var(--shadow)}
.appicon i{width:10px;border-radius:3px;background:var(--paper);display:block}
.appicon i.y{background:var(--geel)}
.appicon.alt{background:var(--ink)}
.appicon.lite{background:var(--geel)}
.appicon.lite i{background:var(--ink)} .appicon.lite i.y{background:var(--teal)}

/* ---------- SOCIAL ---------- */
.sq{aspect-ratio:1/1}

/* ---------- BEWEGING ---------- */
@media (prefers-reduced-motion: no-preference){
  .anim-line{stroke-dasharray:760;stroke-dashoffset:760;animation:om-draw 1.7s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes om-draw{to{stroke-dashoffset:0}}
  .anim-pop{animation:om-pop .5s .9s ease backwards}
  @keyframes om-pop{from{transform:scale(0);opacity:0}}
}