/* Component 14 — AI Revolution-archief 2026-10-12, aangepast voor Advantage Flows.
   Alleen #kloof.af-gap-component en zijn kinderen worden geraakt.
   De oorspronkelijke tokens/base/pages/glass/v2/lux-regels zijn hier zelfstandig en lokaal afgebakend. */
#kloof.af-gap-component {
  --af-gap-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;
  --af-gap-font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;
  --af-gap-font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --af-gap-bg:#04050a;
  --af-gap-bg-2:#0b0e16;
  --af-gap-ink:#eef3f9;
  --af-gap-ink-soft:#9ba7b5;
  --af-gap-ink-faint:#7e8a99;
  --af-gap-line:rgba(255,255,255,.09);
  --af-gap-line-strong:rgba(255,255,255,.2);
  --af-gap-accent:#aef5fd;
  --af-gap-accent-2:#66c6ff;
  --af-gap-accent-glow:rgba(102,198,255,.6);
  --af-gap-grad-text:linear-gradient(118deg,#c6faff 0%,#8fe2fb 45%,#6fb0ff 100%);
  --af-gap-glass-fill:rgba(20,28,42,.5);
  --af-gap-glass-border:rgba(174,245,253,.22);
  --af-gap-glass-hi:rgba(190,240,255,.55);
  --af-gap-shadow:0 34px 90px -34px rgba(0,0,0,.85);
  --af-gap-ease:cubic-bezier(.22,1,.36,1);
  --af-gap-section-pad:clamp(5rem,4rem + 8vw,11rem);
  --af-gap-gutter:clamp(1.25rem,.5rem + 4vw,5rem);
  --af-gap-maxw:1280px;
  --af-gap-font-eyebrow:clamp(.7rem,.66rem + .2vw,.8rem);
  --af-gap-font-small:clamp(.85rem,.82rem + .18vw,.95rem);
  position:relative;
  isolation:isolate;
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:var(--af-gap-section-pad) 0;
  background:var(--af-gap-bg);
  color:var(--af-gap-ink);
  font-family:var(--af-gap-font-sans);
  font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.011em;
  color-scheme:dark;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-margin-top:40px;
}
#kloof.af-gap-component *,
#kloof.af-gap-component *::before,
#kloof.af-gap-component *::after { box-sizing:border-box; }
#kloof.af-gap-component .af-gap-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
#kloof.af-gap-component .container { display:block; width:100%; max-width:var(--af-gap-maxw); margin:0 auto; padding:0 var(--af-gap-gutter); }
#kloof.af-gap-component .kloof__layout { display:grid; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; }
#kloof.af-gap-component .kloof__copy { min-width:0; }
#kloof.af-gap-component .eyebrow { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.6em; max-width:none; margin:0 0 1.1rem; padding:0; font-family:var(--af-gap-font-mono); font-size:var(--af-gap-font-eyebrow); font-weight:500; line-height:1.6; letter-spacing:.2em; text-transform:uppercase; color:var(--af-gap-ink-faint); }
#kloof.af-gap-component .eyebrow::before { content:""; width:1.6em; height:1px; background:var(--af-gap-accent-2); opacity:.9; flex:0 0 1.6em; }
#kloof.af-gap-component .node-index { font-family:var(--af-gap-font-mono); font-size:var(--af-gap-font-eyebrow); letter-spacing:.1em; color:var(--af-gap-accent); margin-right:.4em; }
#kloof.af-gap-component h2 { display:block; max-width:none; margin:0; padding:0; font-family:var(--af-gap-font-display); font-size:clamp(2.1rem,1.4rem + 3.2vw,4.3rem); font-weight:640; line-height:1.04; letter-spacing:-.035em; color:var(--af-gap-ink); text-wrap:balance; }
#kloof.af-gap-component h2 em { font-family:inherit; font-size:inherit; font-style:normal; font-weight:inherit; background:none; color:inherit; -webkit-text-fill-color:inherit; }
#kloof.af-gap-component .lw { display:inline-block; white-space:nowrap; }
#kloof.af-gap-component .lw__in { display:inline-block; padding:.24em .12em; margin:-.24em -.12em; }
#kloof.af-gap-component .lw__in--grad { background:var(--af-gap-grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
#kloof.af-gap-component .prose { margin-top:1.4rem; }
#kloof.af-gap-component .prose p { max-width:40ch; margin:0; padding:0; color:var(--af-gap-ink-soft); font-family:var(--af-gap-font-sans); font-size:clamp(1.2rem,1.02rem + .8vw,1.7rem); font-weight:400; line-height:1.6; letter-spacing:-.011em; }
#kloof.af-gap-component .infocard { min-width:0; margin:0; padding:clamp(1.4rem,1rem + 2vw,2.4rem); border-radius:28px; transform-origin:50% 50%; }
#kloof.af-gap-component .glass { position:relative; isolation:isolate; background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 60%),var(--af-gap-glass-fill); border:1px solid var(--af-gap-glass-border); -webkit-backdrop-filter:blur(26px) saturate(200%) brightness(1.06); backdrop-filter:blur(26px) saturate(200%) brightness(1.06); box-shadow:inset 0 1px 0 var(--af-gap-glass-hi),inset 0 -1px 1px rgba(0,0,0,.05),var(--af-gap-shadow); overflow:hidden; }
#kloof.af-gap-component .glass::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,var(--af-gap-glass-hi) 0%,rgba(174,245,253,.6) 22%,transparent 44%,transparent 58%,rgba(102,198,255,.4) 82%,rgba(174,245,253,.55) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2; }
#kloof.af-gap-component .glass::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; }
#kloof.af-gap-component .glass > * { position:relative; z-index:3; }
#kloof.af-gap-component .glass--refract > .glass-refract-layer { position:absolute; inset:-2px; z-index:0; border-radius:inherit; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); filter:url("#af-gap-liquid-refract"); opacity:.6; pointer-events:none; }
#kloof.af-gap-component .diverge { display:block; width:100%; max-width:100%; height:auto; overflow:visible; }
#kloof.af-gap-component .diverge .axis { stroke:var(--af-gap-line-strong); stroke-width:1; }
#kloof.af-gap-component .diverge .grid-line { stroke:var(--af-gap-line); stroke-width:1; }
#kloof.af-gap-component .diverge .lead-line { fill:none; stroke:var(--af-gap-accent); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 4px 10px var(--af-gap-accent-glow)); }
#kloof.af-gap-component .diverge .lag-line { fill:none; stroke:var(--af-gap-ink-faint); stroke-width:2.5; stroke-linecap:round; opacity:.7; }
#kloof.af-gap-component .diverge .gap-edge { stroke:var(--af-gap-accent); }
#kloof.af-gap-component .diverge .dot { fill:var(--af-gap-accent); filter:drop-shadow(0 0 8px var(--af-gap-accent-glow)); }
#kloof.af-gap-component .diverge .dot--lag { fill:var(--af-gap-ink-faint); filter:none; }
#kloof.af-gap-component .diverge .lbl { font-family:var(--af-gap-font-mono); font-size:11px; font-weight:400; letter-spacing:.06em; fill:var(--af-gap-ink-faint); text-transform:uppercase; }
#kloof.af-gap-component .diverge .lbl-lead { fill:var(--af-gap-accent); }
#kloof.af-gap-component .infocard__caption { display:flex; flex-direction:column; gap:1.1rem; margin:1.4rem 0 0; padding:0; font-size:var(--af-gap-font-small); color:var(--af-gap-ink-faint); }
#kloof.af-gap-component .gap-readout { display:block; font-family:var(--af-gap-font-display); font-size:clamp(2rem,1.4rem + 2.5vw,3.4rem); font-weight:560; color:var(--af-gap-ink); line-height:1; letter-spacing:-.035em; }
#kloof.af-gap-component .gap-readout small { display:block; margin-top:.6rem; font-family:var(--af-gap-font-mono); font-size:.85rem; font-weight:500; color:var(--af-gap-ink-faint); letter-spacing:.06em; line-height:1.6; }
#kloof.af-gap-component .infocard__note { max-width:58ch; margin:0; padding:1.1rem 0 0; border-top:1px solid var(--af-gap-line); font-family:var(--af-gap-font-sans); font-size:var(--af-gap-font-small); font-weight:400; color:var(--af-gap-ink-soft); line-height:1.65; letter-spacing:-.011em; text-wrap:pretty; }
#kloof.af-gap-component .infocard__note b { font-weight:600; color:var(--af-gap-ink); }
/* Baseline is always the drawn, readable end-state. Only JS adds these states. */
#kloof.af-gap-component .reveal { opacity:1; transform:none; filter:none; }
#kloof.af-gap-component[data-af-gap-motion] .kloof__copy.is-prepared .eyebrow,
#kloof.af-gap-component[data-af-gap-motion] .kloof__copy.is-prepared .prose { opacity:0; transform:translateY(22px); transition:opacity .75s var(--af-gap-ease),transform .75s var(--af-gap-ease); }
#kloof.af-gap-component[data-af-gap-motion] .kloof__copy.is-prepared h2 .lw__in { opacity:0; transform:translateY(.45em); filter:blur(8px); transition:opacity .75s var(--af-gap-ease) var(--wd,0s),transform .75s var(--af-gap-ease) var(--wd,0s),filter .75s var(--af-gap-ease) var(--wd,0s); }
#kloof.af-gap-component[data-af-gap-motion] .kloof__copy.is-prepared .prose { transition-delay:.12s; }
#kloof.af-gap-component[data-af-gap-motion] .kloof__copy.is-in .eyebrow,
#kloof.af-gap-component[data-af-gap-motion] .kloof__copy.is-in .prose,
#kloof.af-gap-component[data-af-gap-motion] .kloof__copy.is-in h2 .lw__in { opacity:1; transform:none; filter:none; }
@media (min-width:920px) { #kloof.af-gap-component .kloof__layout { grid-template-columns:.85fr 1.15fr; } }
@media (min-width:960px) { #kloof.af-gap-component .kloof__copy { align-self:start; } }
@media (max-width:767px) { #kloof.af-gap-component .glass { -webkit-backdrop-filter:blur(13px) saturate(170%); backdrop-filter:blur(13px) saturate(170%); } #kloof.af-gap-component[data-af-gap-motion] .kloof__copy.is-prepared h2 .lw__in { filter:none; } }
@media (max-width:420px) { #kloof.af-gap-component .eyebrow { font-size:.61rem; gap:.5em; letter-spacing:.13em; } #kloof.af-gap-component .infocard { padding:1.1rem; } #kloof.af-gap-component .gap-readout small { font-size:.7rem; } }
@supports not ((-webkit-background-clip:text) or (background-clip:text)) { #kloof.af-gap-component .lw__in--grad { -webkit-text-fill-color:currentColor; color:var(--af-gap-accent); } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { #kloof.af-gap-component .glass { background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 60%),var(--af-gap-bg-2); } }
@media (prefers-reduced-motion:reduce) { #kloof.af-gap-component *,#kloof.af-gap-component *::before,#kloof.af-gap-component *::after { animation:none!important; transition:none!important; } #kloof.af-gap-component .reveal,#kloof.af-gap-component .lw__in { opacity:1!important; transform:none!important; filter:none!important; } #kloof.af-gap-component .infocard { transform:none!important; } #kloof.af-gap-component .lead-line,#kloof.af-gap-component .lag-line { stroke-dashoffset:0!important; } #kloof.af-gap-component .gap-edge,#kloof.af-gap-component .dot,#kloof.af-gap-component .lbl { opacity:1!important; } }
@media print { #kloof.af-gap-component { break-inside:avoid; padding-block:2rem; -webkit-print-color-adjust:exact; print-color-adjust:exact; } #kloof.af-gap-component .reveal,#kloof.af-gap-component .lw__in { opacity:1!important; transform:none!important; filter:none!important; } #kloof.af-gap-component .infocard { transform:none!important; } #kloof.af-gap-component .lead-line,#kloof.af-gap-component .lag-line { stroke-dashoffset:0!important; } #kloof.af-gap-component .gap-edge,#kloof.af-gap-component .dot,#kloof.af-gap-component .lbl { opacity:1!important; } }
/* Uitlijning met de video en de kennismakingskaart van deze pagina. */
#kloof.af-gap-component .container{width:min(calc(100% - 64px),1088px);max-width:none;padding-inline:0}
@media(max-width:899px){#kloof.af-gap-component .container{width:min(calc(100% - 40px),680px)}}
@media(max-width:560px){#kloof.af-gap-component .container{width:calc(100% - 32px)}}