*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --white: #ffffff; --off: #f5f6f8; --border: #e2e4e8; --border-mid: #c8ccd2;
  --text: #14181f; --text-2: #333a44; --text-3: #4d5561; --muted: #6b7280;
  --blue: #0067b8; --blue-hover: #005397; --blue-light: #eef6fc; --blue-mid: #cbe3f6;
  --ink: #0a0e14;
  --font: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
}
/* scroll-padding-top = navhoogte (52px) + lucht. Zonder dit landt elke #anker precies ónder de
   vaste nav, waardoor de titel van de sectie (en na het claimen: de bevestigingsmelding) onzichtbaar is. */
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
body { background: var(--white); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
svg.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ── NAV ── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 52px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 28px; transition: box-shadow .2s; }
.nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.nav-logo-sq { width: 22px; height: 22px; background: var(--blue); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 3px; flex-shrink: 0; }
.nav-logo-sq span { background: white; border-radius: 1px; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.btn-nav-ghost { font-family: var(--font); font-size: 13.5px; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 7px 12px; }
.btn-nav-ghost:hover { color: var(--text); }
.btn-nav-primary { font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--white); background: var(--blue); border: none; cursor: pointer; padding: 8px 16px; border-radius: 3px; }
.btn-nav-primary:hover { background: var(--blue-hover); }
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.lang-switch .lang-opt { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-3); text-decoration: none; padding: 6px 9px; line-height: 1; transition: background .15s, color .15s; }
.lang-switch .lang-opt + .lang-opt { border-left: 1px solid var(--border); }
.lang-switch .lang-on { background: var(--blue); color: var(--white); }
.lang-switch .lang-opt:not(.lang-on):hover { background: var(--blue-light); color: var(--blue); }
.lang-switch-drawer { margin-top: 12px; width: 100%; justify-content: center; }
.lang-switch-drawer .lang-opt { flex: 1; text-align: center; padding: 10px; font-size: 13px; }
.nav-burger { display: flex; background: none; border: 1px solid var(--border); border-radius: 4px; width: 38px; height: 34px; cursor: pointer; align-items: center; justify-content: center; color: var(--text); }
.nav-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ── DRAWER (hamburgermenu op ALLE breedtes — topbalk toont bewust geen losse links meer) ── */
.drawer-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(10,14,20,.4); opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 301; width: min(88vw, 380px); background: var(--white); transform: translateX(100%); transition: transform .24s ease; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.14); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.drawer-close { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 6px; }
.drawer-close svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.drawer-body { overflow-y: auto; padding: 8px 0; flex: 1; }
.drawer-item { display: block; text-decoration: none; padding: 14px 20px; border-bottom: 1px solid var(--off); }
.drawer-item:hover { background: var(--blue-light); }
.drawer-item-t { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 9px; }
.drawer-item-t .ico { width: 17px; height: 17px; color: var(--blue); }
.drawer-item-d { font-size: 12.5px; color: var(--muted); margin-top: 3px; padding-left: 26px; line-height: 1.45; }
.drawer-cta { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.drawer-cta button { font-family: var(--font); font-size: 14px; font-weight: 600; padding: 12px; border-radius: 4px; cursor: pointer; border: 1px solid var(--blue); }
.drawer-cta .d-primary { background: var(--blue); color: #fff; }
.drawer-cta .d-ghost { background: #fff; color: var(--blue); }

/* ── HERO ── */
.hero { position: relative; height: 92vh; min-height: 560px; max-height: 860px; overflow: hidden; margin-top: 52px; background: linear-gradient(135deg, #00101f 0%, #001a35 45%, #002850 100%); }
.hero-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.3) 100%); }
.hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 80px 72px; max-width: 820px; }
.hero-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 16px; }
.hero-headline { font-size: clamp(34px,4.6vw,56px); font-weight: 300; line-height: 1.08; color: var(--white); letter-spacing: -.015em; margin-bottom: 18px; }
.hero-headline strong { font-weight: 700; }
.hero-sub { font-size: clamp(15px,1.6vw,18px); font-weight: 300; color: rgba(255,255,255,.82); max-width: 560px; line-height: 1.6; margin-bottom: 30px; }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-hero-primary { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--white); background: var(--blue); border: none; cursor: pointer; padding: 13px 26px; border-radius: 3px; }
.btn-hero-primary:hover { background: var(--blue-hover); }
.btn-hero-outline { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--white); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.6); cursor: pointer; padding: 13px 24px; border-radius: 3px; }
.btn-hero-outline:hover { background: rgba(255,255,255,.18); }

/* ── SECTIONS ── */
.section { padding: 68px 80px; max-width: 1280px; margin: 0 auto; }
.section-label { font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.section-title { font-size: clamp(26px,3.2vw,40px); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; color: var(--text); margin-bottom: 14px; }
.section-title strong { font-weight: 700; }
.section-body { font-size: 16px; font-weight: 300; color: var(--text-3); max-width: 600px; line-height: 1.65; }
.section-gray { background: var(--off); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ── METRICS ── */
.metrics-strip { background: var(--ink); }
.metrics-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; }
.metric { flex: 1; min-width: 180px; padding: 34px 44px; border-right: 1px solid rgba(255,255,255,.08); }
.metric:last-child { border-right: none; }
.metric-num { font-size: 40px; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 8px; letter-spacing: -.03em; }
.metric-desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5; }

/* ── DONE-FOR-YOU ── */
.wsio-dfy-steps { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--border); background: var(--white); margin: 30px 0 34px; }
.wsio-dfy-step { padding: 26px 24px; border-right: 1px solid var(--border); }
.wsio-dfy-step:last-child { border-right: 0; }
.wsio-dfy-step-num { display: inline-block; font-size: 13px; font-weight: 700; color: var(--white); background: var(--blue); width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 3px; margin-bottom: 14px; }
.wsio-dfy-step h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.wsio-dfy-step p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.wsio-dfy-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.wsio-dfy-cta { font-family: var(--font); display: inline-block; background: var(--blue); color: var(--white); font-size: 15px; font-weight: 600; padding: 12px 26px; border: 1px solid var(--blue); border-radius: 3px; cursor: pointer; }
.wsio-dfy-cta:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.wsio-dfy-cta-note { font-size: 14px; color: var(--muted); margin: 0; }
.wsio-dfy-cta-note strong { color: var(--text); font-weight: 600; }
.dfy-opt { margin-top: 8px; }
.dfy-opt + .dfy-opt { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--border); }
.dfy-opt-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.dfy-opt-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; }
.dfy-opt-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; color: var(--text); }
.dfy-self { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--border); padding: 24px 28px; }
.dfy-self-text h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.dfy-self-text p { font-size: 14px; color: var(--muted); max-width: 560px; line-height: 1.55; }
.dfy-self .wsio-dfy-cta { flex-shrink: 0; }

/* ── CAPABILITIES ── */
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid var(--border); margin-top: 40px; }
.cap-cell { padding: 32px 30px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cap-cell:nth-child(3n) { border-right: none; }
.cap-cell:nth-last-child(-n+3) { border-bottom: none; }
.cap-ico { width: 42px; height: 42px; border-radius: 5px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cap-cell h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.cap-cell p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.cap-note { font-size: 13px; color: var(--muted); margin-top: 18px; }

/* ── CAPX: zelfspelende functieverkenner (tegels + detailpaneel) ── */
.capx { margin-top: 40px; }
.capx-tiles { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; border: 1px solid var(--border); border-bottom: none; }
.capx-tile { position: relative; font-family: var(--font); background: var(--white); border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 10px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: background .18s, box-shadow .18s; }
.capx-tile:nth-child(6n) { border-right: none; }
.capx-tile:hover { background: var(--blue-light); }
.capx-tile.active { background: var(--blue-light); box-shadow: inset 0 -3px 0 var(--blue); }
.capx-num { position: absolute; top: 7px; left: 9px; font-size: 10.5px; font-weight: 700; color: var(--border-mid); transition: color .18s; }
.capx-tile.active .capx-num { color: var(--blue); }
.capx-tile.seen .capx-num { color: var(--blue-mid); }
.capx-tico { color: var(--text-3); transition: color .18s; }
.capx-tico .ico { width: 24px; height: 24px; }
.capx-tile.active .capx-tico { color: var(--blue); }
.capx-tname { font-size: 12.5px; font-weight: 600; color: var(--text-3); line-height: 1.25; }
.capx-tile.active .capx-tname { color: var(--blue); }

.capx-panel { border: 1px solid var(--border); background: var(--white); padding: 26px 30px 0; position: relative; }
.capx-panel.in .capx-plist { animation: capxIn .34s ease both; }
@keyframes capxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.capx-phead { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.capx-pico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 5px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.capx-pico .ico { width: 24px; height: 24px; }
.capx-plabel { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.capx-ptitle { font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.2; }
.capx-psub { font-size: 14px; font-weight: 300; color: var(--text-3); margin-top: 3px; }
.capx-pin { margin-left: auto; flex-shrink: 0; font-family: var(--font); font-size: 12px; color: var(--text-3); background: none; border: 1px solid var(--border); border-radius: 3px; padding: 6px 12px; cursor: pointer; }
.capx-pin:hover { border-color: var(--blue); color: var(--blue); }
.capx-plist { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 32px; padding: 22px 0 26px; }
.capx-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; }
.capx-ck { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--blue-light); display: grid; place-items: center; margin-top: 1px; }
.capx-ck svg { width: 11px; height: 11px; stroke: var(--blue); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.capx-item b { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.capx-item span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.capx-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--off); }
.capx-progress i { display: block; height: 100%; width: 0; background: var(--blue); }
@media (max-width: 1000px) {
  .capx-tiles { grid-template-columns: repeat(4,1fr); }
  .capx-tile:nth-child(6n) { border-right: 1px solid var(--border); }
  .capx-tile:nth-child(4n) { border-right: none; }
  .capx-plist { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 560px) {
  .capx-tiles { grid-template-columns: repeat(3,1fr); }
  .capx-tile:nth-child(4n) { border-right: 1px solid var(--border); }
  .capx-tile:nth-child(3n) { border-right: none; }
  .capx-panel { padding: 20px 18px 0; }
  .capx-pin { display: none; }
}
@media (prefers-reduced-motion: reduce) { .capx-panel.in .capx-plist { animation: none; } }

/* ── BOARDCONTROL (static, factual — no live theater) ── */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.loop-card { background: var(--white); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.05); }
.loop-head { background: var(--off); border-bottom: 1px solid var(--border); padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; }
.loop-head-t { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.loop-head-b { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 3px 8px; text-transform: uppercase; letter-spacing: .05em; }
.loop-steps { padding: 8px 0; }
.loop-step { display: flex; gap: 15px; padding: 16px 20px; border-bottom: 1px solid var(--off); }
.loop-step:last-child { border-bottom: none; }
.loop-step-ico { width: 38px; height: 38px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--blue-light); color: var(--blue); }
.loop-step-ico .ico { width: 19px; height: 19px; }
.loop-step h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.loop-step p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.loop-step-n { font-size: 11px; font-weight: 700; color: var(--border-mid); margin-left: auto; align-self: flex-start; }
.bc-facts { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--border); border-top: none; }
.bc-fact { padding: 16px; border-right: 1px solid var(--border); text-align: center; }
.bc-fact:last-child { border-right: none; }
.bc-fact-n { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1; margin-bottom: 5px; }
.bc-fact-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; line-height: 1.4; }
.bc-points { list-style: none; margin: 22px 0 0; }
.bc-points li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-2); line-height: 1.5; }
.bc-points li:last-child { border-bottom: none; }
.bc-points .ico { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.bc-points strong { color: var(--text); font-weight: 600; }

/* ── INTEGRATIONS (real partners — the honest social proof) ── */
.intg-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; border: 1px solid var(--border); margin-top: 40px; }
.intg-cell { padding: 30px 32px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.intg-cell:nth-child(2n) { border-right: none; }
.intg-cell:nth-last-child(-n+2) { border-bottom: none; }
.intg-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.intg-ico { width: 40px; height: 40px; border-radius: 5px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.intg-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.intg-name { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.intg-cell p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.intg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.intg-tag { font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--off); border: 1px solid var(--border); border-radius: 3px; padding: 3px 9px; }
.intg-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.intg-foot { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

/* ── AI INFRA (dark section) ── */
.infra-section { background: var(--ink); border-top: 1px solid #1c222c; border-bottom: 1px solid #1c222c; }
.infra-inner { max-width: 1280px; margin: 0 auto; padding: 68px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.infra-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4d9fff; margin-bottom: 16px; }
.infra-title { font-size: clamp(26px,2.8vw,38px); font-weight: 300; line-height: 1.15; color: white; margin-bottom: 18px; letter-spacing: -.01em; }
.infra-title strong { font-weight: 700; }
.infra-body { font-size: 15px; font-weight: 300; color: #9aa3af; line-height: 1.7; margin-bottom: 18px; }
.infra-body strong { color: #d5dae0; font-weight: 600; }
.infra-specs { list-style: none; }
.infra-specs li { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid #1c222c; font-size: 14px; color: #c3c9d2; }
.infra-specs li:last-child { border-bottom: none; }
.infra-specs .ico { width: 18px; height: 18px; color: #4d9fff; flex-shrink: 0; margin-top: 2px; }
.prov-panel { background: #10151d; border: 1px solid #1c222c; border-radius: 6px; overflow: hidden; }
.prov-panel-h { padding: 14px 18px; border-bottom: 1px solid #1c222c; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7482; }
.prov-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #1c222c; }
.prov { background: #10151d; padding: 13px 16px; font-size: 13px; color: #c3c9d2; display: flex; align-items: center; gap: 9px; }
.prov b { width: 6px; height: 6px; border-radius: 50%; background: #4d9fff; flex-shrink: 0; }
.prov.preferred { color: #fff; font-weight: 600; }
.prov.preferred b { background: #f55036; }
.prov-foot { padding: 12px 18px; font-size: 11.5px; color: #5b6470; border-top: 1px solid #1c222c; }

/* ── ORDERFLOW (donkere band) ──
   De verbindingslijn is GEEN getekend diagram op vaste coördinaten, maar een ::before per kolom die
   met de layout meeloopt. Daardoor klopt hij per definitie op elke breedte: desktop = horizontale rail
   door het midden van de bollen, mobiel = verticale rail langs de bollen. Niets te herberekenen. */
.oflow-section { background: var(--ink); border-top: 1px solid #1c222c; border-bottom: 1px solid #1c222c; }
.oflow-inner { max-width: 1280px; margin: 0 auto; padding: 68px 80px; }
.oflow-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #1c222c; background: #10151d; border-radius: 999px; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4d9fff; margin-bottom: 16px; }
.oflow-badge i { width: 7px; height: 7px; border-radius: 50%; background: #4d9fff; }
.oflow-title { font-size: clamp(26px,2.8vw,38px); font-weight: 300; line-height: 1.15; color: #fff; letter-spacing: -.01em; margin-bottom: 14px; }
.oflow-title strong { font-weight: 700; }
.oflow-lead { font-size: 15px; font-weight: 300; color: #9aa3af; line-height: 1.7; max-width: 640px; }
.oflow-lead strong { color: #d5dae0; font-weight: 600; }
.oflow { margin-top: 42px; }
.oflow-chips { text-align: center; }
.oflow-cap { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5b6470; margin-bottom: 12px; }
.oflow-chiprow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.oflow-chip { display: inline-flex; align-items: center; gap: 8px; background: #10151d; border: 1px solid #1c222c; border-radius: 4px; padding: 9px 14px; font-size: 13px; color: #c3c9d2; }
.oflow-chip b { width: 6px; height: 6px; border-radius: 50%; background: #4d9fff; flex-shrink: 0; }
.oflow-stem { width: 2px; height: 28px; background: #1c222c; margin: 0 auto; }
.oflow-track { display: grid; grid-template-columns: repeat(4,1fr); }
.oflow-col { position: relative; background: none; border: none; font-family: var(--font); cursor: pointer; padding: 0 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.oflow-col::before { content: ''; position: absolute; top: 30px; left: 0; right: 0; height: 2px; background: #1c222c; z-index: 0; transition: background .3s; }
.oflow-col:first-child::before { left: 50%; }
.oflow-col:last-child::before { right: 50%; }
.oflow-col.done::before, .oflow-col.active::before { background: #4d9fff; }
.oflow-dot { position: relative; z-index: 1; flex-shrink: 0; width: 62px; height: 62px; border-radius: 50%; background: #10151d; border: 1px solid #1c222c; display: grid; place-items: center; color: #6b7482; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.oflow-dot .ico { width: 26px; height: 26px; }
.oflow-col.done .oflow-dot { border-color: #4d9fff; color: #4d9fff; }
.oflow-col.active .oflow-dot { background: #4d9fff; border-color: #4d9fff; color: #fff; box-shadow: 0 0 0 6px rgba(77,159,255,.14); }
.oflow-meta { margin-top: 12px; }
.oflow-step { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #5b6470; }
.oflow-name { display: block; font-size: 14.5px; font-weight: 600; color: #c3c9d2; margin-top: 3px; transition: color .2s; }
.oflow-col.active .oflow-name { color: #fff; }
.oflow-who { display: inline-block; margin-top: 9px; font-size: 11.5px; color: #6b7482; background: #10151d; border: 1px solid #1c222c; border-radius: 3px; padding: 4px 9px; transition: color .2s, border-color .2s; }
.oflow-col.active .oflow-who { color: #4d9fff; border-color: #2b3542; }
.oflow-panel { margin-top: 36px; background: #10151d; border: 1px solid #1c222c; border-radius: 6px; overflow: hidden; }
.oflow-phead { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #1c222c; }
.oflow-pico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 5px; background: #4d9fff; color: #fff; display: grid; place-items: center; }
.oflow-pico .ico { width: 22px; height: 22px; }
.oflow-plabel { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #4d9fff; margin-bottom: 4px; }
.oflow-ptitle { font-size: 19px; font-weight: 700; color: #fff; line-height: 1.2; }
.oflow-psub { font-size: 13.5px; font-weight: 300; color: #9aa3af; margin-top: 3px; }
.oflow-pin { margin-left: auto; flex-shrink: 0; font-family: var(--font); font-size: 12px; color: #9aa3af; background: none; border: 1px solid #1c222c; border-radius: 3px; padding: 6px 12px; cursor: pointer; }
.oflow-pin:hover { border-color: #4d9fff; color: #4d9fff; }
.oflow-plist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; padding: 8px 24px 20px; }
.oflow-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; }
.oflow-ck { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(77,159,255,.14); display: grid; place-items: center; margin-top: 1px; }
.oflow-ck svg { width: 10px; height: 10px; stroke: #4d9fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oflow-item b { display: block; font-size: 13.5px; font-weight: 600; color: #d5dae0; margin-bottom: 2px; }
.oflow-item span { font-size: 13px; font-weight: 300; color: #8b94a1; line-height: 1.55; }
.oflow-progress { height: 2px; background: #1c222c; }
.oflow-progress i { display: block; height: 100%; width: 0; background: #4d9fff; }
.oflow-panel.in .oflow-plist { animation: capxIn .34s ease both; }
.oflow-after { margin-top: 30px; }
@media (max-width: 900px) {
  .oflow-inner { padding: 52px 24px; }
  .oflow-track { grid-template-columns: 1fr; }
  .oflow-col { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 9px 0; }
  .oflow-col::before { top: 0; bottom: 0; left: 30px; right: auto; width: 2px; height: auto; }
  .oflow-col:first-child::before { top: 50%; left: 30px; }
  .oflow-col:last-child::before { bottom: 50%; top: 0; right: auto; }
  /* De stam moet op de rail uitkomen (x=31), niet in het midden bungelen: een lijn die niets verbindt
     is precies de fout die we hier niet maken. */
  .oflow-stem { margin: 0 0 0 30px; }
  .oflow-meta { margin-top: 0; }
  .oflow-plist { grid-template-columns: 1fr; }
  .oflow-panel { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) { .oflow-panel.in .oflow-plist { animation: none; } }

/* ── PAKKETTEN ── */
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border: 1px solid var(--border); background: var(--white); }
.pk-card { position: relative; padding: 32px 28px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.pk-card:last-child { border-right: none; }
.pk-card-hl { background: var(--blue-light); }
.pk-tag { position: absolute; top: 0; right: 0; background: var(--blue); color: var(--white); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; }
.pk-name { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.pk-desc { font-size: 13.5px; font-weight: 300; color: var(--text-3); line-height: 1.5; margin-bottom: 20px; min-height: 40px; }
.pk-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; }
.pk-amount { font-size: 40px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1; }
.pk-per { font-size: 14px; font-weight: 300; color: var(--text-3); }
.pk-list { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.pk-list li { font-size: 14px; font-weight: 300; color: var(--text-3); padding: 7px 0; border-bottom: 1px solid var(--border); }
.pk-list li strong { font-weight: 600; color: var(--text); }
.pk-btn { font-family: var(--font); font-size: 14px; font-weight: 600; padding: 11px 16px; border-radius: 3px; cursor: pointer; width: 100%; background: var(--white); color: var(--blue); border: 1px solid var(--blue); }
.pk-btn:hover { background: var(--blue-light); }
.pk-btn-primary { background: var(--blue); color: var(--white); }
.pk-btn-primary:hover { background: var(--blue-hover); }
.pk-compare { margin-top: 34px; overflow-x: auto; }
.pk-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); min-width: 520px; }
.pk-table th, .pk-table td { text-align: left; font-size: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pk-table thead th { font-weight: 600; color: var(--text); background: var(--blue-light); font-size: 13px; }
.pk-table tbody td { font-weight: 300; color: var(--text-3); }
.pk-table tbody td:first-child { color: var(--text); }
.pk-table tbody tr:last-child td { border-bottom: none; }
.pk-yes { color: var(--blue) !important; font-weight: 600 !important; }
.pk-foot { font-size: 13px; font-weight: 300; color: var(--text-3); line-height: 1.6; margin-top: 14px; max-width: 640px; }
@media (max-width: 860px) {
  .pk-grid { grid-template-columns: 1fr; }
  .pk-card { border-right: none; border-bottom: 1px solid var(--border); }
  .pk-card:last-child { border-bottom: none; }
  .pk-desc { min-height: 0; }
}

/* ── LIFETIME ── */
.lt-card { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; border: 1px solid var(--border); background: var(--white); margin-top: 40px; }
.lt-left { padding: 34px 36px; border-right: 1px solid var(--border); }
.lt-right { padding: 34px 30px; background: #fbfcfd; }
.lt-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.lt-badge { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 5px 10px; background: var(--white); }
.lt-badge-hot { background: var(--blue); border-color: var(--blue); color: #fff; }
.lt-name { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.lt-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.lt-amount { font-size: 48px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1; }
.lt-was { font-size: 19px; font-weight: 300; color: var(--muted); text-decoration: line-through; }
.lt-per { font-size: 13.5px; color: var(--text-3); }
.lt-body { font-size: 14.5px; font-weight: 300; color: var(--text-3); line-height: 1.65; margin-bottom: 20px; }
.lt-body strong { font-weight: 600; color: var(--text-2); }
.lt-meter { border: 1px solid var(--border); border-radius: 3px; padding: 13px 15px; background: var(--off); margin-bottom: 18px; }
.lt-meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-3); margin-bottom: 9px; }
.lt-meter-top b { color: var(--blue); font-weight: 700; }
.lt-bar { height: 6px; background: var(--blue-mid); border-radius: 3px; overflow: hidden; }
.lt-bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.lt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lt-form input, .lt-form textarea { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--white); border: 1px solid var(--border-mid); border-radius: 3px; padding: 10px 12px; width: 100%; }
.lt-form input:focus, .lt-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.lt-form .lt-wide { grid-column: 1 / -1; }
.lt-form textarea { resize: vertical; min-height: 62px; }
.lt-submit { grid-column: 1 / -1; font-family: var(--font); font-size: 14.5px; font-weight: 600; background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: 3px; padding: 12px 20px; cursor: pointer; transition: background .15s; }
.lt-submit:hover { background: var(--blue-hover); }
.lt-fine { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 12px; }
.lt-flash { border: 1px solid var(--border); border-left: 3px solid var(--blue); background: var(--blue-light); color: var(--text-2); font-size: 13.5px; padding: 11px 14px; border-radius: 3px; margin-bottom: 16px; }
.lt-flash.err { border-left-color: #b3261e; background: #fdeceb; }

/* ── FAQ ── */
.faq-list { max-width: 760px; margin-top: 30px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 2px; font-size: 15.5px; font-weight: 600; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .18s; margin-top: -4px; }
.faq-item[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq-item summary:hover { color: var(--blue); }
.faq-a { padding: 0 2px 18px; max-width: 640px; }
.faq-a p { font-size: 14.5px; font-weight: 300; color: var(--text-3); line-height: 1.7; }
.faq-a a { color: var(--blue); }
.faq-foot { margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.faq-foot a { color: var(--blue); }

/* ── TOEGANG (aanvraagformulier, gesloten testfase) ── */
.acc-card { max-width: 560px; margin-top: 30px; background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 24px; }
.acc-card .lt-fine a { color: var(--blue); }
.lt-closed { border: 1px solid var(--border); background: var(--off); color: var(--text-3); font-size: 14px; padding: 14px 16px; border-radius: 3px; }
.lt-inc-h { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.lt-inc { list-style: none; }
.lt-inc li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.lt-inc li:last-child { border-bottom: none; }
.lt-inc svg { width: 15px; height: 15px; stroke: var(--blue); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 3px; }
.lt-byok { margin-top: 16px; border: 1px solid var(--border); border-radius: 3px; padding: 13px 15px; background: var(--white); }
.lt-byok b { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.lt-byok span { font-size: 12.5px; font-weight: 300; color: var(--text-3); line-height: 1.6; }
@media (max-width: 900px) {
  .lt-card { grid-template-columns: 1fr; }
  .lt-left { border-right: none; border-bottom: 1px solid var(--border); padding: 26px 22px; }
  .lt-right { padding: 26px 22px; }
  .lt-form { grid-template-columns: 1fr; }
  .lt-amount { font-size: 40px; }
}

/* ── SECURITY ── */
.security-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; border: 1px solid var(--border); margin-top: 40px; }
.sec-item { padding: 28px 22px; border-right: 1px solid var(--border); }
.sec-item:last-child { border-right: none; }
.sec-ico { width: 38px; height: 38px; border-radius: 5px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sec-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.sec-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ── FINALE ── */
.finale-wrap { background: var(--blue); padding: 72px 80px; }
.finale-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.finale-title { font-size: clamp(26px,2.8vw,38px); font-weight: 300; color: var(--white); line-height: 1.2; letter-spacing: -.01em; }
.finale-title strong { font-weight: 700; }
.finale-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.btn-finale-white { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--blue); background: var(--white); border: 1px solid var(--white); cursor: pointer; padding: 13px 26px; border-radius: 3px; }
.btn-finale-white:hover { background: #f0f0f0; }
.btn-finale-outline { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--white); background: rgba(255,255,255,.12); border: 1.5px solid var(--white); cursor: pointer; padding: 13px 26px; border-radius: 3px; }
.btn-finale-outline:hover { background: rgba(255,255,255,.24); }

/* ── FOOTER ── */
.footer { background: var(--ink); color: #9aa3af; }
.footer-main { max-width: 1280px; margin: 0 auto; padding: 56px 80px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand-logo { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer-brand-logo .nav-logo-sq { width: 20px; height: 20px; }
.footer-brand p { font-size: 13px; color: #7b8390; line-height: 1.6; max-width: 300px; }
.footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c3c9d2; margin-bottom: 14px; }
.footer-col a, .footer-col span { display: block; font-size: 13.5px; color: #8b93a0; text-decoration: none; padding: 6px 0; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #1c222c; }
.footer-bottom-inner { max-width: 1280px; margin: 0 auto; padding: 20px 80px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: 12px; color: #6b7482; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { font-size: 12px; color: #8b93a0; text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .split, .infra-inner { grid-template-columns: 1fr; gap: 36px; }
  .nav-actions { display: none; }
  .section { padding: 48px 24px; }
  .infra-inner { padding: 48px 24px; }
  .hero-content { padding: 0 24px 44px; }
  .finale-wrap { padding: 48px 24px; }
  .footer-main { padding: 44px 24px 32px; grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom-inner { padding: 18px 24px; }
  .metric { padding: 26px 28px; }
}
@media (max-width: 680px) {
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .cap-cell { border-right: 1px solid var(--border) !important; }
  .cap-cell:nth-child(2n) { border-right: none !important; }
  .wsio-dfy-steps { grid-template-columns: 1fr; }
  .wsio-dfy-step { border-right: none; border-bottom: 1px solid var(--border); }
  .wsio-dfy-step:last-child { border-bottom: 0; }
  .intg-grid { grid-template-columns: 1fr; }
  .intg-cell { border-right: none !important; }
  .security-row { grid-template-columns: 1fr 1fr; }
  .sec-item { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .prov-list { grid-template-columns: 1fr; }
  .metric { min-width: 50%; border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 440px) {
  nav { padding: 0 14px; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap-cell { border-right: none !important; }
  .security-row { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .finale-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .finale-actions { width: 100%; }
  .finale-actions button { flex: 1; }
}

/* ===== enterprise done-for-you (use-case tabs) ===== */
.wsio-ent { margin-top: 30px; }
.wsio-ent-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.wsio-ent-tab { font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--text-3); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; padding: 11px 16px; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.wsio-ent-tab:hover { color: var(--text); }
.wsio-ent-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.wsio-ent-panel { display: none; }
.wsio-ent-panel.active { display: block; }
.wsio-ent-head h3 { font-size: clamp(20px,2.4vw,28px); font-weight: 300; letter-spacing: -.015em; color: var(--text); margin-bottom: 10px; line-height: 1.2; }
.wsio-ent-head h3 strong { font-weight: 700; }
.wsio-ent-head .lead { font-size: 15.5px; font-weight: 300; color: var(--text-3); max-width: 640px; line-height: 1.6; margin-bottom: 16px; }
.wsio-ent-head .lead strong { font-weight: 600; color: var(--text); }
.wsio-ent-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.wsio-ent-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); background: var(--white); border: 1px solid var(--border); border-radius: 3px; padding: 6px 11px; }
.wsio-ent-chip b { font-weight: 700; color: var(--text); }
.wsio-ent-chip .k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.wsio-ent-chip.lead-chip { background: var(--blue-light); border-color: var(--blue-mid); }
.wsio-ent-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.wsio-ent-console { background: var(--white); border: 1px solid var(--border); padding: 22px 22px 20px; display: flex; flex-direction: column; }
.wsio-ent-ct { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wsio-ent-ct .lbl { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.wsio-ent-ct .busy { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); background: var(--blue-light); border: 1px solid var(--blue-mid); border-radius: 3px; padding: 3px 9px; }
.wsio-ent-ct .busy i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: wsioBlink 1.6s ease-in-out infinite; }
@keyframes wsioBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
.wsio-ent-progh { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.wsio-ent-pct { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--text); line-height: 1; }
.wsio-ent-pct .u { font-size: 15px; color: var(--blue); }
.wsio-ent-st { font-size: 12px; color: var(--muted); text-align: right; }
.wsio-ent-track { height: 6px; border-radius: 3px; background: var(--off); border: 1px solid var(--border); overflow: hidden; }
.wsio-ent-fill { height: 100%; width: 0; background: var(--blue); border-radius: 3px; transition: width .1s linear; }
.wsio-ent-metric { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.wsio-ent-metric b { color: var(--text); font-weight: 700; }
.wsio-ent-metric .bar2 { flex: 1; height: 3px; background: var(--off); border-radius: 3px; overflow: hidden; }
.wsio-ent-metric .bar2 i { display: block; height: 100%; width: 0; background: var(--blue-mid); transition: width .1s linear; }
.wsio-ent-tasks { list-style: none; margin: 16px 0 0; padding: 0; }
.wsio-ent-tasks li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; opacity: .4; transition: opacity .3s; }
.wsio-ent-tasks li.done { opacity: 1; }
.wsio-ent-ck { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-mid); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.wsio-ent-tasks li.done .wsio-ent-ck { background: var(--blue); border-color: var(--blue); }
.wsio-ent-ck svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s .1s; }
.wsio-ent-tasks li.done .wsio-ent-ck svg { opacity: 1; }
.wsio-ent-tt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.wsio-ent-tt span { font-size: 12px; color: var(--muted); }
.wsio-ent-replay { align-self: flex-start; margin-top: 16px; font-family: var(--font); font-size: 12px; color: var(--text-3); background: none; border: 1px solid var(--border); border-radius: 3px; padding: 7px 13px; cursor: pointer; }
.wsio-ent-replay:hover { border-color: var(--blue); color: var(--blue); }
.wsio-ent-preview { display: flex; flex-direction: column; gap: 10px; }
.wsio-ent-browser { flex: 0 0 auto; background: var(--white); border: 1px solid var(--border); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.wsio-ent-bar { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--border); background: var(--off); }
.wsio-ent-bar .dots { display: flex; gap: 5px; }
.wsio-ent-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-mid); display: block; }
.wsio-ent-url { margin-left: 4px; font-size: 11.5px; color: var(--muted); background: var(--white); border: 1px solid var(--border); border-radius: 3px; padding: 3px 10px; flex: 1; }
.wsio-ent-url b { color: var(--text); }
.wsio-ent-live { position: absolute; top: 48px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff; background: var(--blue); border-radius: 3px; padding: 4px 10px; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; }
.wsio-ent-browser.live .wsio-ent-live { opacity: 1; transform: none; }
.wsio-ent-shop { padding: 16px; filter: grayscale(1) opacity(.5); transition: filter .7s; }
.wsio-ent-browser.live .wsio-ent-shop { filter: none; }
.wsio-ent-shophero { border: 1px solid var(--border); background: var(--blue-light); padding: 16px; margin-bottom: 12px; }
.wsio-ent-shophero .k { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.wsio-ent-shophero h4 { font-size: 18px; font-weight: 700; color: var(--text); margin: 5px 0 0; }
.wsio-ent-g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.wsio-ent-pc { border: 1px solid var(--border); }
.wsio-ent-pc .img { height: 58px; background: var(--blue-light); }
.wsio-ent-pc:nth-child(2) .img { background: #eaf3ea; }
.wsio-ent-pc:nth-child(3) .img { background: #f3eef8; }
.wsio-ent-pc .pb { padding: 8px 9px; }
.wsio-ent-pc .nm { height: 7px; width: 76%; background: var(--border-mid); border-radius: 2px; margin-bottom: 5px; }
.wsio-ent-pc .nm.s { width: 50%; }
.wsio-ent-pc .pr { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.wsio-ent-pc .pr b { font-size: 12px; color: var(--text); }
.wsio-ent-pc .pr .add { width: 22px; height: 22px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 13px; }
.wsio-ent-cap { font-size: 12px; color: var(--muted); text-align: center; }
.wsio-ent-cap b { color: var(--blue); }
/* Datablok onder de preview — vult wat eerst leeg wit was met concrete inhoud. */
.wsio-ent-moves { flex: 1; background: var(--white); border: 1px solid var(--border); padding: 14px 16px 12px; display: flex; flex-direction: column; }
.wsio-ent-moves-h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.wsio-ent-moves-h .lbl { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.wsio-ent-moves-h .cnt { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--blue); }
.wsio-ent-moves ul { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.wsio-ent-moves li { display: flex; align-items: center; gap: 8px; padding: 5px 0; opacity: .38; transition: opacity .3s; }
.wsio-ent-moves li.done { opacity: 1; }
.mv-ck { flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border-mid); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.wsio-ent-moves li.done .mv-ck { background: var(--blue); border-color: var(--blue); }
.mv-ck svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s .1s; }
.wsio-ent-moves li.done .mv-ck svg { opacity: 1; }
.mv-t { min-width: 0; }
.mv-t b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.mv-t span { font-size: 11px; color: var(--muted); }
.wsio-ent-give { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.wsio-ent-give .gv { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.wsio-ent-give .k { flex: 0 0 72px; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); padding-top: 1px; }
@media (max-width: 640px) { .wsio-ent-moves ul { grid-template-columns: 1fr; } }
.wsio-ent-trust { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; }
.wsio-ent-tchip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); background: var(--white); border: 1px solid var(--border); border-radius: 3px; padding: 7px 12px; }
.wsio-ent-tchip svg { width: 13px; height: 13px; stroke: var(--blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wsio-ent-tchip b { color: var(--text); font-weight: 600; }
.wsio-ent-integr { margin-top: 12px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wsio-ent-integr .lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wsio-ent-integr .sep { color: var(--border-mid); }
@media (max-width: 760px) { .wsio-ent-stage { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .wsio-ent-fill, .wsio-ent-shop, .wsio-ent-live, .wsio-ent-metric .bar2 i { transition: none; }
  .wsio-ent-ct .busy i { animation: none; }
}