/* IVTO foresight-voorbeeld — component-CSS (scoped op .iv) */
  .iv{
    --inkt:#0B1020; --inkt-2:#0d1430; --paneel:#121a33; --paneel-2:#0f1730;
    --goud:#F6C945; --goud-zacht:rgba(246,201,69,.13); --goud-rand:rgba(246,201,69,.45);
    --krijt:#EAF0FF; --krijt-2:#c5cde6; --mist:#8b93ad; --mist-2:#6b748f;
    --lijn:rgba(255,255,255,.11); --lijn-2:rgba(255,255,255,.06);
    --tech:#5FD0E6; --planeet:#54C996; --samen:#F0876B; --macht:#A78BF0; --ruimte:#7C8FFF;
    --disp:'Fraunces',Georgia,'Times New Roman',serif;
    --body:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

    position:relative; isolation:isolate; overflow:hidden;
    background:
      radial-gradient(120% 90% at 12% -10%, #15203f 0%, rgba(21,32,63,0) 55%),
      radial-gradient(140% 120% at 100% 0%, #101a36 0%, rgba(16,26,54,0) 50%),
      linear-gradient(180deg,var(--inkt-2),var(--inkt));
    border:1px solid var(--lijn); border-radius:18px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
    color:var(--krijt-2); font-family:var(--body);
  }
  .iv *{ box-sizing:border-box; }
  .iv ::selection{ background:rgba(246,201,69,.22); color:#fff; }

  /* kop */
  .iv-head{ padding:clamp(20px,4vw,34px) clamp(20px,4vw,38px) 0; }
  .iv-eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--goud); opacity:.92; display:flex; align-items:center; gap:9px;
  }
  .iv-eyebrow::before{
    content:""; width:13px; height:13px; border-radius:3px;
    background:linear-gradient(140deg,var(--goud),#b88a1f); box-shadow:0 0 0 1px rgba(246,201,69,.3);
  }
  .iv-title{
    font-family:var(--disp); font-optical-sizing:auto; font-weight:500;
    font-size:clamp(1.55rem,3.4vw,2.35rem); line-height:1.1; letter-spacing:-.015em;
    color:var(--krijt); margin:.55rem 0 0; max-width:20ch;
  }
  .iv-lede{
    margin:.85rem 0 0; max-width:60ch; font-size:clamp(13.5px,1.5vw,15px);
    color:var(--krijt-2); line-height:1.62;
  }
  .iv-lede i, .iv-lede em{ font-family:var(--disp); font-style:italic; font-weight:500; color:var(--krijt); }
  .iv-strip{
    margin-top:1.1rem; display:flex; flex-wrap:wrap; align-items:center; gap:8px 4px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--mist);
  }
  .iv-strip span{ color:var(--krijt-2); }
  .iv-strip i{ color:var(--mist-2); font-style:normal; padding:0 2px; }

  /* tabs */
  .iv-tabs{
    display:flex; gap:6px; padding:clamp(16px,3vw,24px) clamp(20px,4vw,38px) 0;
    flex-wrap:wrap;
  }
  .iv-tab{
    appearance:none; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.03em;
    color:var(--mist); background:rgba(255,255,255,.035); border:1px solid var(--lijn-2);
    border-radius:9px; padding:9px 14px; display:flex; align-items:center; gap:8px;
    transition:border-color .16s, color .16s, background .16s;
  }
  .iv-tab:hover{ color:var(--krijt-2); border-color:var(--lijn); }
  .iv-tab .n{
    font-size:10px; min-width:17px; height:17px; padding:0 4px; border-radius:5px; display:grid; place-items:center;
    background:rgba(255,255,255,.06); color:var(--mist);
  }
  .iv-tab[aria-selected="true"]{
    color:#1a1205; background:var(--goud); border-color:var(--goud); font-weight:600;
  }
  .iv-tab[aria-selected="true"] .n{ background:rgba(0,0,0,.18); color:#1a1205; }
  .iv:focus-visible, .iv :focus-visible{ outline:2px solid var(--goud); outline-offset:2px; border-radius:8px; }

  /* speelvlak */
  .iv-stage{ padding:clamp(16px,3vw,22px) clamp(20px,4vw,38px) clamp(8px,2vw,14px); min-height:288px; }
  .iv-view{ display:none; }
  .iv-view.on{ display:block; }

  /* signaal-grid */
  .iv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(218px,1fr)); gap:12px; }
  .iv-card{
    text-align:left; cursor:pointer; font-family:var(--body);
    background:linear-gradient(180deg,var(--paneel),var(--paneel-2));
    border:1px solid var(--lijn-2); border-radius:13px; padding:15px 15px 13px;
    color:var(--krijt-2); display:flex; flex-direction:column; gap:7px; min-height:138px;
    transition:transform .16s, border-color .16s, box-shadow .16s;
  }
  .iv-card:hover{ transform:translateY(-3px); border-color:var(--lijn); box-shadow:0 14px 30px -18px rgba(0,0,0,.7); }
  .iv-card .code{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--mist-2); }
  .iv-card .ct{ font-family:var(--disp); font-optical-sizing:auto; font-weight:500; font-size:16px; line-height:1.2; color:var(--krijt); }
  .iv-card .cd{ font-size:12.5px; color:var(--krijt-2); line-height:1.5; opacity:.92; }
  .iv-card .dots{ margin-top:auto; display:flex; gap:5px; padding-top:6px; }
  .dot{ width:8px; height:8px; border-radius:50%; opacity:.95; }

  /* krachten-tegels */
  .iv-forces{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; }
  .iv-force{
    --c:var(--tech); text-align:left; cursor:pointer; font-family:var(--body);
    position:relative; overflow:hidden;
    background:linear-gradient(180deg,var(--paneel),var(--paneel-2));
    border:1px solid var(--lijn-2); border-radius:13px; padding:16px 15px 15px 18px;
    color:var(--krijt-2); display:flex; flex-direction:column; gap:6px; min-height:128px;
    transition:transform .16s, border-color .16s;
  }
  .iv-force::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
  .iv-force::after{
    content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%);
  }
  .iv-force:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 45%, var(--lijn)); }
  .iv-force .fk{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--c); }
  .iv-force .fn{ font-family:var(--disp); font-optical-sizing:auto; font-weight:500; font-size:19px; line-height:1.1; color:var(--krijt); }
  .iv-force .fe{ font-size:12.5px; color:var(--krijt-2); line-height:1.5; opacity:.92; }
  .iv-force .fmeta{ margin-top:auto; font-family:var(--mono); font-size:10px; color:var(--mist-2); padding-top:6px; }

  /* scenario-matrix */
  .iv-scen-wrap{ display:grid; gap:18px; }
  .iv-axisrow{ display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:stretch; }
  .iv-yaxis{ display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:4px 0; }
  .iv-yaxis .lab{
    font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist);
    writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  }
  .iv-yaxis .name{
    font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--mist-2);
    writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  }
  .iv-matrix{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
  .iv-quad{
    --c:var(--macht); position:relative; overflow:hidden; text-align:left; cursor:pointer; font-family:var(--body);
    background:var(--paneel-2);
    background:linear-gradient(155deg, color-mix(in srgb,var(--c) 12%, var(--paneel)), var(--paneel-2));
    border:1px solid var(--lijn-2); border-radius:13px; padding:15px 15px 14px; min-height:118px;
    color:var(--krijt-2); display:flex; flex-direction:column; gap:5px;
    transition:transform .16s, border-color .16s, box-shadow .16s;
  }
  .iv-quad:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 50%, var(--lijn)); box-shadow:0 16px 34px -20px rgba(0,0,0,.7); }
  .iv-quad .qt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--c) 70%, var(--krijt-2)); }
  .iv-quad .qn{ font-family:var(--disp); font-optical-sizing:auto; font-weight:500; font-size:17.5px; line-height:1.15; color:var(--krijt); }
  .iv-quad .qd{ font-size:12px; color:var(--krijt-2); line-height:1.48; opacity:.9; }
  .iv-quad .qarrow{ margin-top:auto; font-family:var(--mono); font-size:11px; color:var(--mist-2); padding-top:6px; }
  .iv-xaxis{ display:grid; grid-template-columns:34px 1fr; gap:10px; margin-top:-6px; }
  .iv-xaxis .row{ display:flex; align-items:center; justify-content:space-between; }
  .iv-xaxis .lab{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); }
  .iv-xaxis .name{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--mist-2); text-align:center; flex:1; }

  /* joker / gedeelde aanname */
  .iv-joker{
    border:1px solid var(--goud-rand); background:var(--goud-zacht); border-radius:12px;
    padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
  }
  .iv-joker .jicon{ font-family:var(--mono); font-size:18px; color:var(--goud); line-height:1; margin-top:1px; }
  .iv-joker .jt{ font-family:var(--disp); font-optical-sizing:auto; font-weight:500; font-size:14.5px; color:var(--krijt); }
  .iv-joker .jx{ font-size:12.5px; color:var(--krijt-2); line-height:1.55; margin-top:3px; }

  /* voet */
  .iv-foot{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
    padding:clamp(16px,3vw,20px) clamp(20px,4vw,38px) clamp(20px,4vw,30px);
    border-top:1px solid var(--lijn-2); margin-top:8px;
  }
  .iv-foot .note{ font-family:var(--mono); font-size:10.5px; color:var(--mist-2); line-height:1.5; max-width:52ch; }
  .iv-cta{
    appearance:none; cursor:pointer; font-family:var(--body); font-weight:600; font-size:13.5px;
    color:#1a1205; background:var(--goud); border:none; border-radius:10px; padding:11px 18px;
    text-decoration:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    transition:transform .14s, box-shadow .14s, background .14s;
  }
  .iv-cta:hover{ background:#fbe08a; transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(246,201,69,.7); }
  .iv-cta .arr{ font-family:var(--mono); }

  /* ───────────── detail-overlay (binnen het blok) ───────────── */
  .iv-overlay{
    position:absolute; inset:0; z-index:5; display:none;
    background:rgba(7,11,24,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  }
  .iv-overlay.on{ display:block; }
  .iv-panel{
    position:absolute; right:0; top:0; bottom:0; width:min(460px,92%);
    background:linear-gradient(180deg,#101831,#0c1226);
    border-left:1px solid var(--lijn); box-shadow:-30px 0 60px -30px rgba(0,0,0,.8);
    padding:clamp(22px,4vw,30px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
  }
  .iv-panel::-webkit-scrollbar{ width:6px; }
  .iv-panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }
  .iv-x{
    position:absolute; top:14px; right:16px; cursor:pointer; background:none; border:none;
    color:var(--mist); font-size:24px; line-height:1; padding:4px; transition:color .15s;
  }
  .iv-x:hover{ color:#fff; }
  .iv-d-kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
  .iv-d-title{ font-family:var(--disp); font-optical-sizing:auto; font-weight:500; font-size:clamp(1.3rem,2.6vw,1.6rem); line-height:1.12; letter-spacing:-.01em; color:var(--krijt); margin:.5rem 0 0; padding-right:24px; }
  .iv-d-sub{ font-size:13px; color:var(--krijt-2); margin-top:.5rem; line-height:1.55; }
  .iv-d-sec{ margin-top:1.25rem; }
  .iv-d-lab{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); margin-bottom:.45rem; }
  .iv-d-sec p{ margin:0; font-size:13.5px; line-height:1.62; color:var(--krijt-2); }
  .iv-d-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:1.25rem; }
  .iv-d-cols .iv-d-sec{ margin-top:0; }
  .iv-open{
    margin-top:1.25rem; border-left:2px solid var(--goud-rand); background:var(--goud-zacht);
    border-radius:0 8px 8px 0; padding:11px 14px;
  }
  .iv-open .iv-d-lab{ color:rgba(246,201,69,.9); }
  .iv-open p{ font-size:12.8px; line-height:1.55; color:var(--krijt-2); margin:0; }
  .iv-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:.5rem; }
  .iv-chip{
    cursor:pointer; font-family:var(--mono); font-size:11px; color:var(--krijt-2);
    background:rgba(255,255,255,.04); border:1px solid var(--lijn); border-radius:8px;
    padding:6px 10px; display:inline-flex; align-items:center; gap:7px;
    transition:border-color .15s, background .15s, transform .12s;
  }
  .iv-chip:hover{ background:rgba(255,255,255,.07); transform:translateY(-1px); }
  .iv-chip .cdot{ width:8px; height:8px; border-radius:50%; }
  .iv-chip.code{ color:var(--mist); }
  .iv-foot-note-panel{ margin-top:1.4rem; font-family:var(--mono); font-size:10px; color:var(--mist-2); line-height:1.5; border-top:1px solid var(--lijn-2); padding-top:12px; }

  /* mobiel: overlay als onderpaneel */
  @media (max-width:560px){
    .iv-panel{ left:0; right:0; top:auto; bottom:0; width:auto; max-height:86%; border-left:none; border-top:1px solid var(--lijn); border-radius:18px 18px 0 0; box-shadow:0 -30px 60px -30px rgba(0,0,0,.8); }
    .iv-d-cols{ grid-template-columns:1fr; }
    .iv-yaxis .lab, .iv-yaxis .name{ font-size:8.5px; }
  }

  /* entree-animaties */
  @keyframes iv-rise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
  @keyframes iv-panel-in{ from{ opacity:0; transform:translateX(18px);} to{ opacity:1; transform:none;} }
  @keyframes iv-panel-in-m{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }
  .iv-view.on .iv-card, .iv-view.on .iv-force, .iv-view.on .iv-quad{ animation:iv-rise .34s both; }
  .iv-overlay.on .iv-panel{ animation:iv-panel-in .26s cubic-bezier(.2,.7,.3,1) both; }
  @media (max-width:560px){ .iv-overlay.on .iv-panel{ animation:iv-panel-in-m .26s cubic-bezier(.2,.7,.3,1) both; } }
  @media (prefers-reduced-motion:reduce){
    .iv *{ animation:none !important; transition:none !important; }
  }

/* ── dynamische kleuren via klassen/CSSOM i.p.v. inline styles (strikte CSP) ── */
.iv *,.iv *::before,.iv *::after{ box-sizing:border-box; }
.iv .dot--tech{ background:var(--tech); }
.iv .dot--planeet{ background:var(--planeet); }
.iv .dot--samen{ background:var(--samen); }
.iv .dot--macht{ background:var(--macht); }
.iv .dot--ruimte{ background:var(--ruimte); }
.iv .iv-d-code{ font-family:var(--mono); color:var(--goud); }
.iv .cdot--inline{ display:inline-block; width:9px; height:9px; border-radius:50%; }
.iv .iv-d-sub--mono{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--mist); }
.iv .iv-d-kicker{ color:var(--mist); }