/* ============================================================
       Brainmap website prototype v3
       - All copy redone (brutal teen-direct voice)
       - Real podcast audio (3 episodes)
       - 6 CSS hover mini-demos per tool card
       - Drag-and-drop "probeer 't zelf" fake-extraction widget
       - Tighter subject clusters in the brain
       - 3D mouse parallax on the brain canvas
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    /* Belt+braces overflow-x clip: white-zone 3D rotateX laat de panel rechts en
       links uit het viewport steken (scrollW > vw). overflow-x:hidden op
       html + body voorkomt horizontal scrollbar op alle browsers. */
    html { overflow-x: hidden; }
    body {
      background: #04061f;
      color: rgba(255,255,255,0.94);
      font-family: 'Poppins', system-ui, -apple-system, sans-serif;
      line-height: 1.5;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
    }
    /* Main is the 3D perspective container -- clip its overflow zodat
       de white-zone tilt geen layout-overflow geeft. */
    main { overflow-x: clip; }
    /* Jetze v10 2026-05-18: HOMEPAGE BG MATCH SUBPAGES.
       Eerdere wrapper-aanpak gaf "layers stacked" feeling. Echte fix:
       1) Body bg LIGHT (#FAFAFB) zoals subpages -> rounded corners van
          final-cta tonen DIE light kleur in de corner-triangles, exact
          zoals tarieven page.
       2) Cosmos + brain-bg blijven position:fixed maar FADE NAAR opacity 0
          zodra de white-zone in beeld komt (JS-controlled inline opacity).
          Daardoor zijn de cosmos/brain alleen zichtbaar in de hero+reel+
          science zone (light-zone) en NIET in de white-zone + final-cta +
          footer area.
       3) Geen wrapper meer nodig -> geen extra visual layer. */
    body.homepage-prototype {
      background: #FAFAFB;
    }
    /* Default opacity 1 -- JS controleert het based on scroll position */
    body.homepage-prototype .cosmos,
    body.homepage-prototype .brain-bg {
      transition: opacity .25s ease-out;
    }

    /* Cursor glow override voor homepage. Jetze-feedback v5 2026-05-18:
       glow moet zichtbaar zijn op ZOWEL dark cosmos als op de witte zone.
       - Screen blend werkt op donker (additief) maar verdwijnt op wit.
       - Multiply werkt op wit (gedimd orange) maar zwart-uit op donker.
       Oplossing: GEEN mix-blend-mode meer, een directe orange-alpha
       gradient die zichtbaar is op beide backgrounds (lager alpha zodat
       hij niet opdringerig is). */
    body.homepage-prototype .cursor-glow {
      /* Jetze v12 2026-05-18: glow wat subtieler. Alpha 0.18 -> 0.09 en
         0.06 -> 0.025, size iets kleiner zodat het minder opdringerig is. */
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(255,102,1,0.09), rgba(255,102,1,0.025) 40%, transparent 65%);
      mix-blend-mode: normal;
      z-index: 6;
    }

    /* ── Cosmic backdrop ──────────────────────────────────────── */
    .cosmos {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(1400px circle at 18% 110%, rgba(255,102,1,0.22), transparent 55%),
        radial-gradient(1200px circle at 82% -10%, rgba(43,91,255,0.25), transparent 55%),
        radial-gradient(1000px circle at 95% 80%, rgba(184,115,255,0.18), transparent 55%),
        radial-gradient(900px circle at 5% 40%, rgba(40,194,142,0.10), transparent 55%),
        linear-gradient(135deg, #04061f 0%, #08102f 55%, #050B22 100%);
    }
    .cosmos::before {
      content: ''; position: absolute; inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
      opacity: 0.06; mix-blend-mode: overlay;
    }

    /* ── Brain canvas (sticky behind content, 3D-parallax wrapper) ── */
    .brain-bg {
      position: fixed; inset: 0; z-index: 1; pointer-events: none;
      perspective: 1200px;
    }
    .brain-bg canvas {
      width: 100%; height: 100%; display: block;
      transition: transform .25s cubic-bezier(.2,.8,.2,1);
      transform-origin: 50% 55%;
      will-change: transform;
    }
    /* Lighter vignette so the brain reads more present in the hero.
       Was 0.55 → now 0.28; bottom-fade also relaxed so subjects don't
       disappear into the dark before the science section. */
    .brain-bg::after {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 75% 55% at 50% 50%, transparent 40%, rgba(4,6,31,0.28) 85%),
        linear-gradient(180deg, rgba(4,6,31,0.30) 0%, transparent 14%, transparent 84%, rgba(4,6,31,0.62) 100%);
    }

    /* ── Layout ───────────────────────────────────────────────── */
    main {
      position: relative;
      z-index: 2;
      /* Sets up the 3D viewing context so the .white-zone tilt + scale
         transforms below feel like real perspective, not just a 2D shear. */
      perspective: 2000px;
      perspective-origin: 50% 0%;
    }
    /* Jetze v6 2026-05-18: alle prototype-element rules gescoped tot
       INSIDE <main>. Voorheen waren `section/h1/h2/h3/p` site-wide
       element-selectors die ook de footer en final-cta-section raakten
       (footer-intro <p> kreeg margin: 16px 0 wat 32px verschil gaf met
       subpages). Nu blijven footer + final-cta-section onaangetast. */
    main section {
      min-height: 100vh;
      padding: 96px 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    main .wrap { max-width: 980px; margin: 0 auto; width: 100%; }

    /* ── Type ─────────────────────────────────────────────────── */
    main h1, main h2, main h3 { margin: 0; line-height: 1.05; letter-spacing: -0.028em; }
    main h1 { font-size: clamp(44px, 7.6vw, 92px); font-weight: 500; color: #fff; }
    main h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 500; line-height: 1.08; }
    main h3 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; }
    main p { margin: 16px 0; font-size: clamp(16px, 1.4vw, 18px); color: rgba(255,255,255,0.78); }
    .eyebrow {
      display: inline-block;
      font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.20em;
      color: rgba(255,255,255,0.55);
      padding: 6px 14px;
      /* No backdrop-filter — the eyebrow appears in 5 sections and
         each blur recomputes the underlying canvas on every brain frame.
         Solid-ish background reads almost identical, costs nothing. */
      background: rgba(20,28,68,0.65);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 999px;
      margin-bottom: 24px;
    }
    .lead {
      font-size: clamp(17px, 1.6vw, 20px);
      max-width: 600px; margin: 24px auto 0;
      color: rgba(255,255,255,0.72);
    }
    .serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }

    /* Gradient headline accent — always wears the handwritten Instrument
       Serif italic so titles like "Grow your brain.", "wetenschap" and
       "op één plek." share the same editorial voice. */
    .grad {
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.01em;
      background: linear-gradient(135deg, #FFD9B7 0%, #FF6601 45%, #B873FF 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }

    /* ── CTA ──────────────────────────────────────────────────── */
    .cta {
      display: inline-flex; align-items: center; gap: 10px;
      margin-top: 36px;
      padding: 16px 28px;
      background: #FF6601; color: #fff;
      border-radius: 14px;
      font-weight: 600; font-size: 16px;
      text-decoration: none;
      box-shadow: 0 18px 40px -12px rgba(255,102,1,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset;
      transition: transform .15s ease, filter .15s ease;
    }
    .cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
    .cta-sub { display: block; margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,0.5); }

    /* ── HERO ─────────────────────────────────────────────────────
       New layout: text lives in the TOP 40% of the viewport; the brain
       occupies the bottom 60% (its centre is dynamically pushed down
       when we're at the top of the page — see the brain script). This
       gives the brain real room to breathe instead of sitting under
       the headline.                                                    */
    .hero {
      min-height: 100vh;
      padding: 72px 24px 32px;
      justify-content: flex-start;          /* push content to top */
    }
    .hero .wrap {
      margin-top: 24px;
      /* Wide enough to fit "Maak samenvattingen." on a single line at
         the headline's font-size, so the cycling word doesn't reflow
         the line when it gets long. */
      max-width: 1180px;
    }
    .hero h1 {
      font-family: 'Instrument Serif', 'Poppins', serif;
      font-weight: 400;
      font-size: clamp(42px, 7vw, 92px);
      line-height: 1.0; letter-spacing: -0.02em;
    }
    .hero h1 .line1 { display: block; color: rgba(255,255,255,0.94); }
    .hero h1 .line2 { display: block; margin-top: 0.12em; }
    .hero .lead { max-width: 540px; }
    .hero .cta-sub { color: rgba(255,255,255,0.6); }

    /* ═══════════════════════════════════════════════════════════
       LIGHT ZONE (wrapper for hero + reel + science)
       Transparent in dark mode — cosmos backdrop + brain canvas
       (both position: fixed) show through underneath. Renamed away
       from "light" but kept the class for stability with all the
       existing child selectors that target .light-zone p / etc.
       ═══════════════════════════════════════════════════════════ */
    /* DARK MODE — the .light-zone wrapper is transparent so the
       cosmos backdrop + main brain canvas (both fixed underneath)
       show through. Sections inside it use the existing dark-mode
       styles (white text on cosmos). */
    .light-zone {
      position: relative;
      z-index: 2;
      background: transparent;
    }
    .light-zone > section { position: relative; z-index: 2; }

    /* HERO — uses bold Poppins for "Maak X.", italic serif gradient
       for "Grow your brain." Inherits dark-mode colours from the
       global .hero rules — only structural overrides below. */
    .hero-light {
      min-height: 100vh;
      padding: 96px 24px 32px;
      justify-content: center;
      position: relative;
    }
    .hero-light h1 {
      font-family: 'Poppins', system-ui, -apple-system, sans-serif;
      font-weight: 500;
      font-size: clamp(40px, 6.4vw, 86px);
      line-height: 1.04;
      letter-spacing: -0.030em;
    }
    .hero-light h1 .line1 { color: rgba(255,255,255,0.96); }
    .hero-light h1 .line2 { color: rgba(255,255,255,0.96); margin-top: 0.06em; }
    .hero-light h1 .serif {
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.005em;
    }
    /* Kill the [ ] brackets — clean cycling word with just a cursor */
    .hero-light .cycle::before,
    .hero-light .cycle::after { display: none; }
    .hero-light .cycle-text {
      background: none;
      -webkit-background-clip: border-box;
      background-clip: border-box;
      -webkit-text-fill-color: rgba(255,255,255,0.96);
      color: rgba(255,255,255,0.96);
    }
    .hero-light .cursor { background: #FF6601; width: 4px; }
    .hero-light .lead {
      color: rgba(255,255,255,0.72);
      max-width: 660px;
      font-size: clamp(16px, 1.4vw, 18px);
      line-height: 1.55;
      margin-top: 36px;
    }

    /* ── Eyebrow pill with Dutch flag — dark glass variant ───── */
    .eyebrow-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 18px;
      background: rgba(20,28,68,0.45);
      border: 1px solid rgba(255,102,1,0.35);
      border-radius: 999px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.16em;
      color: rgba(255,255,255,0.88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      margin-bottom: 32px;
    }
    .eyebrow-flag {
      font-size: 14px;
      line-height: 1;
    }

    /* ── CTA group: primary + ghost side by side ─────────────── */
    .cta-group {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 36px;
      justify-content: center;
    }
    .cta-group .cta { margin-top: 0; }
    .cta.cta-primary { background: #FF6601; color: #fff; }
    .cta.cta-ghost {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.94);
      border: 1.5px solid rgba(255,255,255,0.16);
      box-shadow: none;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .cta.cta-ghost:hover {
      background: rgba(255,255,255,0.12);
      filter: none;
      transform: translateY(-2px);
    }

    /* ─── REEL SECTION — parallax reveal ────────────────────── */
    /* The reel "lifts" from below the fold as the user scrolls.
       Inside, .reel-stage holds the reel at full target size; we
       apply scale + translateY via JS based on scroll position. */
    .reel-section {
      /* 180vh = ~80vh of "sticky hold" after the reel docks at the top
         — enough for the viewer to start watching the reel loop before
         it starts to scroll away. */
      min-height: 180vh;
      padding: 0 24px 96px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      position: relative;
    }
    .reel-stage {
      position: sticky;
      /* Docks closer to the vertical centre of the viewport (was 6vh).
         Combined with the reel's ~70vh inner height, this centres the
         video both top and bottom when fully scrolled into view. */
      top: 14vh;
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      transform: translateY(30vh) scale(0.55);
      transform-origin: 50% 50%;
      transition: none;
      will-change: transform;
    }
    .reel-stage .reel-wrap {
      margin: 0;
      width: min(1200px, 94vw);            /* bigger than before (was 1040 / 92vw) */
    }

    /* ═══════════════════════════════════════════════════════════
       WHITE ZONE — opaque white panel that covers everything below
       the science section. Reveal recipe:
         1. Parallax translateY (panel "rises" to meet the viewport)
         2. Colored aurora glow above the panel during the approach
         3. Thin brand-rainbow stripe along the panel's top edge
         4. Spring-ish overshoot at dock for a "settle" feel
       Reveal intensity is driven by the --reveal CSS variable, set
       by the JS at the bottom of the file based on scroll position.
       ═══════════════════════════════════════════════════════════ */
    .white-zone {
      --reveal: 0;            /* 0 = docked / 1 = peak approach */
      position: relative;
      z-index: 3;
      /* Witte panel met subtiele orange/blue/purple wash. */
      background:
        radial-gradient(900px circle at 12% 6%,  rgba(255,102,1,0.045), transparent 55%),
        radial-gradient(1000px circle at 88% 14%, rgba(43,91,255,0.040), transparent 55%),
        radial-gradient(800px circle at 50% 50%,  rgba(184,115,255,0.025), transparent 60%),
        radial-gradient(900px circle at 18% 86%, rgba(255,102,1,0.035), transparent 55%),
        radial-gradient(900px circle at 86% 92%, rgba(91,168,255,0.030), transparent 55%),
        linear-gradient(180deg, #FBFBFE 0%, #FFFFFF 30%, #FCFBFA 100%);
      /* Jetze v11 2026-05-18: rounded top corners 48px terug, matchend
         met de final-cta-section style op subpages. Geeft een visuele
         "card emerging from dark cosmos" effect: het hero/science-deel
         flowt over in een rounded white panel. */
      border-radius: 48px 48px 0 0;
      box-shadow: 0 -24px 60px -10px rgba(0,0,0,0.40);
      color: #0E1547;
      will-change: transform;
      margin-top: 320px;
      transform-origin: 50% 0%;
    }
    /* Subtle dot-grid overlay - barely-there texture om "pure-wit-leegte"
       te breken. Layered via :before pseudo-element zodat het op alle
       white-zone secties valt. Stays under section content (z-index 0). */
    .white-zone:before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(rgba(14,21,71,0.04) 1px, transparent 1px);
      background-size: 28px 28px;
      background-position: 0 0;
      mask-image: radial-gradient(ellipse 80% 100% at 50% 35%, #000 35%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 35%, #000 35%, transparent 75%);
      opacity: 0.7;
      z-index: 0;
    }
    /* Zorg dat sections boven de dot-grid komen */
    .white-zone > section { z-index: 1; }
    /* Aurora glow weggehaald (Jetze v7 2026-05-18: creëerde zichtbare
       horizontale gradient-edge boven de white-zone). */
    /* Editorial type ladder for the white-zone — lighter weight than the
       hero (which uses 700) so the bottom half reads more publication-
       confident, less promo-y. Tracks tighter to keep crisp lines. */
    .white-zone h1,
    .white-zone h2,
    .white-zone h3 {
      color: #0E1547;
      font-weight: 500;
      letter-spacing: -0.028em;
    }
    .white-zone h2 { line-height: 1.08; }
    .white-zone h3 { font-weight: 600; }
    .white-zone p   { color: rgba(14,21,71,0.66); }
    .white-zone .closer { color: #0E1547; }
    .white-zone .lead   { color: rgba(14,21,71,0.62); }
    .white-zone .grad   {
      background: linear-gradient(135deg, #FF8533 0%, #FF6601 45%, #6E4DD8 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .white-zone .serif  { color: inherit; }

    /* ── HERO EXPLAINER REEL ──────────────────────────────────────
       Sits below the CTA. 16:9 glass card containing a self-running
       canvas reel that explains the whole product in ~20s.        */
    .reel-wrap {
      position: relative;
      width: min(720px, 92vw);
      max-width: 100%;
      margin: 56px auto 0;
      aspect-ratio: 16 / 9;
      border-radius: 22px;
      background: #02041a;
      /* Stacked layers — drop shadow for elevation + a soft on-brand
         double aurora glow (peach + purple) that pulses gently in sync
         with the .reel-wrap::after layer below. The hairline inset gives
         the edge a subtle glass-rim. */
      box-shadow:
        0 40px 90px -28px rgba(0,0,0,0.75),
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 80px -10px rgba(255,102,1,0.30),
        0 0 110px -15px rgba(184,115,255,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    /* Outer aurora halo — sits behind the reel-wrap (z:-1) and breathes
       slowly. Gives the frame a "powered up" feel without obscuring the
       content. */
    .reel-wrap::before {
      content: '';
      position: absolute;
      inset: -36px;
      border-radius: 36px;
      background:
        radial-gradient(60% 60% at 18% 40%, rgba(255,102,1,0.35), transparent 70%),
        radial-gradient(60% 60% at 82% 60%, rgba(184,115,255,0.30), transparent 70%),
        radial-gradient(70% 80% at 50% 110%, rgba(91,168,255,0.18), transparent 70%);
      filter: blur(28px);
      opacity: 0.85;
      z-index: -1;
      pointer-events: none;
      animation: reel-aurora 9s ease-in-out infinite;
    }
    @keyframes reel-aurora {
      0%, 100% { opacity: 0.70; transform: scale(1); }
      50%      { opacity: 0.95; transform: scale(1.04); }
    }
    /* Top-edge highlight — gives the reel a subtle "lit from above" feel
       that reads like a real display, not just a flat rectangle. */
    .reel-wrap::after {
      content: '';
      position: absolute;
      top: 0; left: 8%; right: 8%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
      pointer-events: none;
      z-index: 6;
    }
    .reel-wrap > canvas,
    .reel-wrap > .reel-caption-slot {
      border-radius: 22px;
    }
    .reel-wrap > canvas { overflow: hidden; }
    /* Clip the canvas to the rounded border — needed because we removed
       overflow:hidden from .reel-wrap so the aurora ::before can spill out. */
    .reel-wrap {
      isolation: isolate;        /* keep ::before z-index contained */
    }
    .reel-wrap > canvas {
      /* Round the canvas itself via clip-path so the inner edges follow
         the wrapper's radius without re-introducing overflow:hidden on
         the wrapper. */
      clip-path: inset(0 round 22px);
    }
    .reel-wrap canvas {
      width: 100%; height: 100%;
      display: block;
    }
    .reel-caption-slot {
      position: absolute;
      left: 0; right: 0; bottom: 18px;
      display: flex; justify-content: center;
      pointer-events: none;
      padding: 0 18px;
    }
    /* The reel caption lives inside .light-zone, so the
       `.light-zone p { color: navy }` rule would otherwise turn this
       white text into dark navy on a dark backdrop — invisible. The
       higher-specificity selector below pins it back to white. */
    .reel-caption,
    .light-zone .reel-caption {
      margin: 0;
      font-family: 'Poppins', system-ui, -apple-system, sans-serif;
      font-size: 17px; font-weight: 600; letter-spacing: -0.008em;
      color: rgba(255,255,255,0.96);
      text-align: center;
      padding: 8px 16px;
      background: rgba(2,4,16,0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 999px;
      box-shadow: 0 8px 30px -10px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.08);
      animation: reel-cap-in .55s cubic-bezier(.2,.8,.2,1) both;
      max-width: 88%;
    }
    @keyframes reel-cap-in {
      from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
      to   { opacity: 1; transform: translateY(0);   filter: blur(0);  }
    }
    @media (max-width: 600px) {
      .reel-wrap { margin-top: 36px; }
      .reel-caption { font-size: 14px; padding: 6px 12px; }
    }

    /* Reel-controls — floating top-right of the reel: mute toggle (always
       visible) + restart (only after the reel has finished its 1x play). */
    .reel-controls {
      position: absolute;
      top: 14px; right: 14px;
      display: flex;
      gap: 8px;
      z-index: 5;
    }
    .reel-mute,
    .reel-restart {
      position: static;
      width: 34px; height: 34px;
      padding: 0;
      border-radius: 50%;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.88);
      cursor: pointer;
      display: grid; place-items: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background .15s ease, transform .35s cubic-bezier(.4,1.6,.6,1), color .15s ease, opacity .25s ease;
    }
    .reel-mute:hover {
      background: rgba(255,102,1,0.22);
      color: #fff;
    }
    .reel-restart:hover {
      background: rgba(255,102,1,0.22);
      color: #fff;
      transform: rotate(-90deg);
    }
    .reel-mute svg,
    .reel-restart svg { display: block; }
    /* Mute-icon toggling: default = muted (X over speaker), pressed = on (waves) */
    .reel-mute .reel-mute-icon { grid-area: 1 / 1; }
    .reel-mute .reel-mute-icon--on { display: none; }
    .reel-mute[aria-pressed="true"] .reel-mute-icon--off { display: none; }
    .reel-mute[aria-pressed="true"] .reel-mute-icon--on { display: block; }
    /* Restart-button: hidden tijdens playback, fade-in als reel ended */
    .reel-wrap .reel-restart {
      opacity: 0;
      pointer-events: none;
    }
    .reel-wrap.reel-ended .reel-restart {
      opacity: 1;
      pointer-events: auto;
    }

    .cycle {
      /* Jetze 2026-05-18: slot reflowt nu mee met de woord-breedte (was
         min-width: 14ch met text-align: left). Hierdoor staat de hele
         h1-regel ALTIJD visueel gecentreerd in de section, ongeacht of
         het cyclende woord 7 of 14 chars lang is. CLS-tradeoff: kleine
         layout-shift bij elke cycle-overgang (woord groeit/krimpt) maar
         in de hero boven de fold valt dit binnen acceptable Web Vitals
         (geen scroll-relevante content eronder). */
      display: inline-block;
      position: relative;
      vertical-align: baseline;
      padding: 0 0.06em;
      white-space: nowrap;
    }
    .cycle-visible {
      display: inline-block;
      white-space: nowrap;
    }
    .cycle::before, .cycle::after {
      content: '';
      display: inline-block;
      width: 0.16em; height: 0.78em;
      vertical-align: middle;
      transform: translateY(-0.06em);
      opacity: 0.5;
    }
    .cycle::before {
      border-left: 2px solid #FFB87A;
      border-top: 2px solid #FFB87A;
      border-bottom: 2px solid #FFB87A;
      margin-right: 0.18em;
      border-radius: 3px 0 0 3px;
    }
    .cycle::after {
      border-right: 2px solid #FFB87A;
      border-top: 2px solid #FFB87A;
      border-bottom: 2px solid #FFB87A;
      margin-left: 0.18em;
      border-radius: 0 3px 3px 0;
    }
    .cycle-text {
      display: inline-block;
      background: linear-gradient(135deg, #FFD9B7 0%, #FF6601 45%, #B873FF 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .cursor {
      display: inline-block;
      width: 3px; height: 0.82em;
      background: #FFB87A;
      margin-left: 2px;
      vertical-align: middle;
      transform: translateY(-0.06em);
      animation: blink 1s steps(2) infinite;
    }
    /* Sits inside the cycle slot, RIGHT after the cursor — so it moves
       with the typed word instead of staying pinned at the slot's edge. */
    .cycle-period {
      display: inline-block;
      margin-left: 2px;
      color: inherit;
    }
    @keyframes blink { 50% { opacity: 0; } }

    .scroll-hint {
      position: absolute; bottom: 28px; left: 50%;
      transform: translateX(-50%);
      font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      animation: bounce 2.4s ease-in-out infinite;
    }
    @keyframes bounce {
      0%,100% { transform: translate(-50%, 0); opacity: 0.4; }
      50%     { transform: translate(-50%, 8px); opacity: 0.85; }
    }

    /* ── Section: Eerlijk ─────────────────────────────────────── */
    .eerlijk h2 {
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic; font-weight: 400;
      font-size: clamp(40px, 7vw, 84px);
    }
    .pains {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }
    .pain {
      padding: 28px 24px;
      background: rgba(20,28,68,0.40);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 18px;
      text-align: left;
    }
    .pain-num {
      display: inline-block;
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic;
      font-size: 14px; color: #FFB87A;
      margin-bottom: 12px;
    }
    .pain-line {
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic;
      font-size: clamp(17px, 1.6vw, 20px);
      line-height: 1.35;
      color: rgba(255,255,255,0.88);
      margin: 0 0 10px;
    }
    .pain-sub {
      font-size: 13.5px;
      color: rgba(255,255,255,0.50);
      margin: 0;
    }
    @media (max-width: 760px) { .pains { grid-template-columns: 1fr; } }
    .closer {
      margin-top: 56px;
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 600;
      color: #fff;
    }

    /* ── Section: Probeer 't zelf (drag-and-drop) ────────────── */
    .try-it h2 {
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic; font-weight: 400;
    }
    .drop {
      margin: 48px auto 0;
      max-width: 720px;
      min-height: 320px;
      padding: 32px;
      border: 2px dashed rgba(255,255,255,0.18);
      border-radius: 22px;
      background: rgba(14,20,55,0.40);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .drop:hover { border-color: rgba(255,102,1,0.45); background: rgba(20,28,68,0.55); }
    .drop.is-over { border-color: #FF6601; background: rgba(255,102,1,0.08); transform: scale(1.02); }
    .drop.is-processing { border-style: solid; border-color: rgba(255,102,1,0.35); }
    .drop-ico {
      width: 64px; height: 64px;
      display: grid; place-items: center;
      border-radius: 16px;
      background: rgba(255,102,1,0.12);
      color: #FFB87A;
      margin-bottom: 18px;
    }
    .drop-title { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 6px; }
    .drop-sub { font-size: 13.5px; color: rgba(255,255,255,0.55); margin: 0; }
    .drop-fakebtn {
      margin-top: 18px;
      padding: 10px 18px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      font-size: 13px; font-weight: 600;
      color: rgba(255,255,255,0.78);
      pointer-events: none;
    }
    .drop-extracted {
      display: none;
      width: 100%;
      flex-direction: column;
      gap: 12px;
    }
    .drop.is-done .drop-content { display: none; }
    .drop.is-done .drop-extracted { display: flex; }
    .extracted-file {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.04);
      border-radius: 12px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.82);
    }
    .extracted-file-ico {
      width: 28px; height: 28px;
      display: grid; place-items: center;
      background: rgba(255,102,1,0.15);
      color: #FFB87A;
      border-radius: 8px;
      flex-shrink: 0;
    }
    .extracted-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .extracted-label {
      font-size: 11.5px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-top: 6px;
    }
    .concepts {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 4px;
    }
    .concept {
      padding: 8px 14px;
      background: rgba(20,28,68,0.6);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      font-size: 13.5px; font-weight: 500;
      color: rgba(255,255,255,0.86);
      opacity: 0;
      transform: translateY(8px) scale(0.95);
      animation: concept-pop .55s cubic-bezier(.2,.8,.2,1) forwards;
    }
    .concept .dot {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      margin-right: 8px;
      vertical-align: middle;
    }
    @keyframes concept-pop {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .drop-reset {
      margin-top: 18px;
      padding: 8px 16px;
      background: transparent;
      border: 0;
      color: rgba(255,255,255,0.4);
      font-family: inherit; font-size: 13px;
      cursor: pointer;
    }
    .drop-reset:hover { color: rgba(255,255,255,0.85); text-decoration: underline; }

    /* ── Section: Tools with hover mini-demos ─────────────────── */
    .tools {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }
    .tool {
      padding: 22px 22px 0;
      /* Solid-ish background — no backdrop-filter. 6 of these on screen
         all blurring the moving canvas behind them was the single biggest
         scroll-frame cost in v5. Higher opacity gives almost identical
         visual weight without re-blurring per frame. */
      background: rgba(14,20,55,0.88);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 18px;
      text-align: left;
      transition: transform .2s ease, border-color .2s ease;
      overflow: hidden;
      cursor: pointer;
    }
    .tool:hover { transform: translateY(-4px); border-color: rgba(255,102,1,0.32); }
    .tool-ico {
      width: 40px; height: 40px;
      display: grid; place-items: center;
      border-radius: 10px;
      background: rgba(255,102,1,0.12);
      color: #FFB87A;
      font-size: 22px;
      margin-bottom: 16px;
    }
    .tool h3 { font-size: 18px; margin-bottom: 6px; color: #fff; }
    .tool p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,0.66); }
    .tool-demo {
      margin: 18px -22px 0;
      padding: 18px;
      height: 96px;
      background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.32));
      border-top: 1px solid rgba(255,255,255,0.05);
      position: relative;
      overflow: hidden;
    }
    @media (max-width: 900px) { .tools { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .tools { grid-template-columns: 1fr; } }

    /* ── Tool demos (CSS-only animations) ───────────────────── */

    /* Samenvatting — lines type out */
    .demo-summary { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
    .demo-summary .line {
      height: 5px; border-radius: 999px;
      background: linear-gradient(90deg, #B873FF, #FF6601);
      transform: scaleX(0); transform-origin: left center;
      transition: transform .8s cubic-bezier(.2,.8,.2,1);
    }
    .tool:hover .demo-summary .line:nth-child(1) { transform: scaleX(0.9); transition-delay: 0.05s; }
    .tool:hover .demo-summary .line:nth-child(2) { transform: scaleX(0.7); transition-delay: 0.25s; }
    .tool:hover .demo-summary .line:nth-child(3) { transform: scaleX(0.95); transition-delay: 0.45s; }
    .tool:hover .demo-summary .line:nth-child(4) { transform: scaleX(0.5); transition-delay: 0.65s; }

    /* Flashcards — card flips */
    .demo-cards { display: flex; align-items: center; justify-content: center; height: 100%; perspective: 600px; }
    .demo-cards .card {
      width: 80px; height: 60px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform .8s cubic-bezier(.2,.8,.2,1);
    }
    .tool:hover .demo-cards .card { transform: rotateY(180deg); }
    .demo-cards .face {
      position: absolute; inset: 0;
      border-radius: 8px;
      backface-visibility: hidden;
      display: grid; place-items: center;
      font-weight: 600; font-size: 13px;
      box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5);
    }
    .demo-cards .front {
      background: linear-gradient(135deg, #2a3068, #1a2050);
      color: rgba(255,255,255,0.86);
      border: 1px solid rgba(255,255,255,0.10);
    }
    .demo-cards .back {
      background: linear-gradient(135deg, #FF6601, #FFB87A);
      color: #fff;
      transform: rotateY(180deg);
    }

    /* Toets — multiple choice with checkmark */
    .demo-quiz { display: flex; flex-direction: column; gap: 6px; }
    .demo-quiz .opt {
      height: 14px;
      background: rgba(255,255,255,0.07);
      border-radius: 7px;
      position: relative;
      overflow: hidden;
    }
    .demo-quiz .opt::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 100%;
      background: linear-gradient(90deg, #28C28E, rgba(40,194,142,0));
      transform: scaleX(0); transform-origin: left;
      transition: transform .6s cubic-bezier(.2,.8,.2,1);
    }
    .tool:hover .demo-quiz .opt:nth-child(2)::before { transform: scaleX(0.95); transition-delay: 0.4s; }
    .demo-quiz .opt:nth-child(2)::after {
      content: '';
      position: absolute; right: 8px; top: 50%;
      width: 10px; height: 10px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
      background-repeat: no-repeat;
      background-size: contain;
      transform: translateY(-50%) scale(0);
      transition: transform .3s ease;
      transition-delay: 0.9s;
    }
    .tool:hover .demo-quiz .opt:nth-child(2)::after { transform: translateY(-50%) scale(1); }

    /* Vraag — chat bubble typing */
    .demo-chat { display: flex; flex-direction: column; gap: 6px; height: 100%; justify-content: flex-end; }
    .demo-chat .bubble {
      max-width: 80%;
      padding: 7px 11px;
      border-radius: 12px;
      font-size: 11.5px;
      line-height: 1.3;
      opacity: 0; transform: translateY(6px);
      transition: opacity .35s ease, transform .35s ease;
    }
    .demo-chat .you {
      align-self: flex-end;
      background: rgba(255,255,255,0.10);
      color: rgba(255,255,255,0.86);
    }
    .demo-chat .ai {
      align-self: flex-start;
      background: linear-gradient(135deg, #FF6601, #B873FF);
      color: #fff;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .demo-chat .ai .dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: #fff;
      animation: chat-dot 1.2s ease-in-out infinite;
    }
    .demo-chat .ai .dot:nth-child(2) { animation-delay: .15s; }
    .demo-chat .ai .dot:nth-child(3) { animation-delay: .30s; }
    @keyframes chat-dot {
      0%,100% { opacity: 0.35; transform: translateY(0); }
      50%     { opacity: 1;    transform: translateY(-2px); }
    }
    .tool:hover .demo-chat .you { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
    .tool:hover .demo-chat .ai  { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }

    /* Podcast — equalizer bars */
    .demo-eq { display: flex; align-items: flex-end; gap: 5px; justify-content: center; height: 100%; }
    .demo-eq .bar {
      width: 6px; height: 8px;
      border-radius: 3px;
      background: linear-gradient(180deg, #FFB87A, #FF6601);
      animation: eq-pulse 1.2s ease-in-out infinite;
      animation-play-state: paused;
    }
    .tool:hover .demo-eq .bar { animation-play-state: running; }
    .demo-eq .bar:nth-child(1) { animation-delay: 0.0s; }
    .demo-eq .bar:nth-child(2) { animation-delay: 0.15s; }
    .demo-eq .bar:nth-child(3) { animation-delay: 0.05s; }
    .demo-eq .bar:nth-child(4) { animation-delay: 0.25s; }
    .demo-eq .bar:nth-child(5) { animation-delay: 0.10s; }
    .demo-eq .bar:nth-child(6) { animation-delay: 0.20s; }
    .demo-eq .bar:nth-child(7) { animation-delay: 0.0s; }
    .demo-eq .bar:nth-child(8) { animation-delay: 0.15s; }
    .demo-eq .bar:nth-child(9) { animation-delay: 0.30s; }
    @keyframes eq-pulse {
      0%,100% { height: 8px; }
      50%     { height: 44px; }
    }

    /* Mindmap — branches drawing */
    .demo-mm { position: relative; height: 100%; }
    .demo-mm svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .demo-mm path {
      fill: none;
      stroke: url(#mmgrad);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-dasharray: 80;
      stroke-dashoffset: 80;
      transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1);
    }
    .tool:hover .demo-mm path { stroke-dashoffset: 0; }
    .tool:hover .demo-mm path:nth-child(2) { transition-delay: 0.15s; }
    .tool:hover .demo-mm path:nth-child(3) { transition-delay: 0.30s; }
    .tool:hover .demo-mm path:nth-child(4) { transition-delay: 0.45s; }
    .demo-mm .node {
      position: absolute;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #FF6601;
      box-shadow: 0 0 8px rgba(255,102,1,0.6);
      opacity: 0; transform: scale(0);
      transition: opacity .25s ease, transform .25s ease;
    }
    .tool:hover .demo-mm .node { opacity: 1; transform: scale(1); }
    .tool:hover .demo-mm .node:nth-child(6) { transition-delay: 0.4s; }
    .tool:hover .demo-mm .node:nth-child(7) { transition-delay: 0.55s; }
    .tool:hover .demo-mm .node:nth-child(8) { transition-delay: 0.7s; }
    .tool:hover .demo-mm .node:nth-child(9) { transition-delay: 0.85s; }
    .demo-mm .node-center {
      background: #fff;
      width: 10px; height: 10px;
      box-shadow: 0 0 10px rgba(255,255,255,0.7);
      opacity: 1 !important; transform: scale(1) !important;
    }

    /* ── Section: Podcast ─────────────────────────────────────── */
    .podcast-card {
      margin-top: 48px;
      padding: 28px;
      background: linear-gradient(135deg, rgba(255,102,1,0.10), rgba(184,115,255,0.10));
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 22px;
      text-align: left;
      max-width: 580px;
      margin-left: auto; margin-right: auto;
      backdrop-filter: blur(12px);
    }
    .pc-row { display: flex; align-items: center; gap: 16px; }
    .pc-cover {
      width: 72px; height: 72px;
      border-radius: 14px;
      background: linear-gradient(135deg, #FF6601, #FFB87A);
      display: grid; place-items: center;
      font-size: 30px;
      flex-shrink: 0;
      box-shadow: 0 12px 24px -8px rgba(255,102,1,0.45);
    }
    .pc-meta { flex: 1; min-width: 0; }
    .pc-title { font-weight: 600; color: #fff; font-size: 15px; }
    .pc-sub { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 2px; }
    .pc-play {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: #FF6601;
      display: grid; place-items: center;
      cursor: pointer; border: 0;
      color: #fff;
      transition: transform .15s ease, filter .15s ease;
      box-shadow: 0 8px 22px -6px rgba(255,102,1,0.6);
    }
    .pc-play:hover { transform: scale(1.06); filter: brightness(1.08); }
    .pc-bar {
      margin-top: 18px;
      height: 4px;
      background: rgba(255,255,255,0.10);
      border-radius: 999px;
      overflow: hidden;
      cursor: pointer;
    }
    .pc-bar > span {
      display: block; height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #FF6601, #B873FF);
      border-radius: 999px;
      transition: width .12s linear;
    }
    .pc-times {
      display: flex; justify-content: space-between;
      margin-top: 6px;
      font-size: 11px; color: rgba(255,255,255,0.5);
      font-variant-numeric: tabular-nums;
    }
    .pc-tabs {
      display: flex; gap: 8px; margin-top: 18px;
      justify-content: center;
    }
    .pc-tab {
      padding: 8px 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 999px;
      font-family: inherit; font-size: 12px; font-weight: 500;
      color: rgba(255,255,255,0.68);
      cursor: pointer;
      transition: all .15s ease;
    }
    .pc-tab:hover { color: #fff; background: rgba(255,255,255,0.08); }
    .pc-tab.active {
      background: rgba(255,102,1,0.18);
      border-color: rgba(255,102,1,0.4);
      color: #FFB87A;
    }

    /* ── Section: Science ─────────────────────────────────────── */
    .pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }
    .pillar {
      padding: 26px 22px;
      text-align: left;
      /* No backdrop-filter — see .tool note. */
      background: rgba(14,20,55,0.85);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 18px;
    }
    .pillar-tag {
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #B873FF;
      margin-bottom: 12px;
    }
    .pillar h3 { font-size: 17px; color: #fff; margin-bottom: 8px; }
    .pillar p { font-size: 14px; color: rgba(255,255,255,0.65); margin: 0; }
    @media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }

    /* Voorheen was hier een global `footer { font-size: 13px; color:
       rgba(255,255,255,0.35); padding: 48px 24px; ... }` rule voor de
       oude prototype mini-footer ("Brainmap. Gemaakt met te veel
       cafeïne") die we al lang geleden verwijderden. Die regel was dode
       code die de NIEUWE standaard .footer-section visueel kleiner +
       grijzer maakte dan op subpages (Jetze v5 feedback 2026-05-18:
       "footer is nog steeds verkeerd"). Verwijderd: standaard footer
       erft nu zoals het hoort van styles.css. */

    /* ── Progress indicator ───────────────────────────────────── */
    .progress {
      position: fixed; top: 0; left: 0;
      height: 3px; width: 0;
      background: linear-gradient(90deg, #FF6601, #B873FF);
      z-index: 100;
      transition: width 0.12s linear;
    }

    /* ════════════════════════════════════════════════════════════
       WHITE-ZONE LIGHT-MODE SECTIONS
       Shared design language for the bottom-of-page experience:
       orbit · tools-tabs · podcast · CTA-strip · tarieven · FAQ ·
       nieuwsbrief · final-CTA · footer. All on pure white with
       soft borders, subtle shadows, and our orange/peach/purple
       brand ladder.
       ════════════════════════════════════════════════════════════ */
    .white-zone {
      --wz-ink:        #0E1547;
      --wz-ink-2:      rgba(14,21,71,0.72);
      --wz-ink-3:      rgba(14,21,71,0.52);
      --wz-ink-4:      rgba(14,21,71,0.36);
      --wz-line:       rgba(14,21,71,0.09);
      --wz-line-soft:  rgba(14,21,71,0.05);
      --wz-card:       #FFFFFF;
      --wz-card-soft:  #FAFBFD;
      --wz-card-tint:  #F4F6FB;
      --wz-orange:     #FF6601;
      --wz-orange-2:   #FFB87A;
      --wz-purple:     #B873FF;
      --wz-purple-2:   #6E4DD8;
      --wz-shadow-sm:  0 2px 8px rgba(14,21,71,0.04);
      --wz-shadow-md:  0 8px 32px -8px rgba(14,21,71,0.08);
      --wz-shadow-lg:  0 24px 60px -20px rgba(14,21,71,0.18);
    }

    /* Sections inside the white-zone are content-sized, not full-height,
       so the new bottom-of-page experience flows naturally instead of
       turning into 9 × 100vh of scroll. Generous vertical rhythm — these
       sections sit on the same white background, so spacing IS the only
       structural separator.
       The global `section` rule sets `align-items: center` which collapses
       wide grid children (tools-grid, pricing-grid) to their content width
       — override to `stretch` so grids span the full available width. */
    .white-zone section {
      min-height: auto;
      /* Jetze-feedback v3 2026-05-18: nog steeds te veel whitespace; nu 72px
         (van 96px) zodat secties echt tegen elkaar staan zonder benauwd. */
      padding: 72px 24px;
      align-items: stretch;
    }
    .white-zone .wrap { max-width: 1100px; margin: 0 auto; width: 100%; }
    @media (max-width: 760px) {
      .white-zone section { padding: 56px 20px; }
    }

    /* ── Eyebrow override (dark→light) ──────────────────────────── */
    .white-zone .eyebrow {
      background: var(--wz-card-tint);
      border: 1px solid var(--wz-line);
      color: var(--wz-ink-3);
    }

    /* ── Section heading shared layout ──────────────────────────── */
    .wz-section-head {
      max-width: 760px;
      margin: 0 auto 48px;
      text-align: center;
    }
    .wz-section-head h2 { margin-bottom: 14px; }
    .wz-section-head .lead { margin-top: 18px; }
    /* Wider variant for the tools section heading — gives the headline
       room to breathe on a single line at desktop width. */
    .wz-section-head-wide { max-width: 960px; }

    /* ── CTA buttons (light + dark variants on white-zone) ──────── */
    .wz-btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 24px;
      border-radius: 12px;
      font-family: inherit;
      font-weight: 600; font-size: 15px;
      text-decoration: none;
      border: 0; cursor: pointer;
      transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
      white-space: nowrap;
    }
    .wz-btn-primary {
      background: var(--wz-orange);
      color: #fff;
      box-shadow: 0 12px 28px -8px rgba(255,102,1,0.45),
                  inset 0 0 0 1px rgba(255,255,255,0.12);
    }
    .wz-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
    .wz-btn-ghost {
      background: #fff;
      color: var(--wz-ink);
      border: 1px solid var(--wz-line);
    }
    .wz-btn-ghost:hover {
      background: var(--wz-card-tint);
      transform: translateY(-2px);
    }
    .wz-btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 14px; }
    .wz-btn-arrow {
      width: 14px; height: 14px;
      flex-shrink: 0;
    }

    /* ════════════════════════════════════════════════════════════
       1. ORBIT — "Bouw je toetsweek op één plek"
       3 concentric rings of competitor logos rotating around the
       Brainmap mark. Inner ring 20s, middle 35s reverse, outer 50s.
       Icons counter-rotate so they stay upright. CSS-only.
       ════════════════════════════════════════════════════════════ */
    .wz-orbit-section { padding-top: 180px; padding-bottom: 160px; }
    .wz-orbit-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 64px;
      align-items: center;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
    }
    .wz-orbit-text { text-align: left; }
    .wz-orbit-text h2 { margin-bottom: 20px; }
    .wz-orbit-text .lead { margin: 0 0 32px; text-align: left; max-width: 460px; }
    @media (max-width: 880px) {
      .wz-orbit-grid { grid-template-columns: 1fr; gap: 56px; }
      .wz-orbit-text { text-align: center; }
      .wz-orbit-text .lead { margin-left: auto; margin-right: auto; }
    }

    .wz-orbit-canvas {
      --r1: 110px;
      --r2: 170px;
      --r3: 230px;
      position: relative;
      width: 100%;
      max-width: 520px;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
    }
    @media (max-width: 540px) {
      .wz-orbit-canvas { --r1: 80px; --r2: 120px; --r3: 160px; }
    }
    .wz-orbit-center {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 84px; height: 84px;
      border-radius: 22px;
      background: #fff;
      display: grid; place-items: center;
      /* Jetze-feedback 2026-05-18 v3: orange/pink glow weg, alleen het logo
         zelf, met een subtiele neutrale schaduw voor depth. */
      box-shadow:
        0 12px 32px -10px rgba(14,21,71,0.18),
        0 0 0 6px rgba(255,255,255,0.95),
        0 0 0 7px rgba(14,21,71,0.06);
      z-index: 4;
    }
    .wz-orbit-center img {
      width: 60px; height: 60px;
      object-fit: contain;
    }
    .wz-orbit-ring {
      position: absolute; top: 50%; left: 50%;
      width: 0; height: 0;
      border-radius: 50%;
      transform-origin: center;
      animation: wz-orbit-spin 20s linear infinite;
    }
    /* Visible dotted ring track */
    .wz-orbit-ring::before {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1px dashed rgba(14,21,71,0.10);
      pointer-events: none;
    }
    .wz-orbit-ring-1 { animation-duration: 20s; }
    .wz-orbit-ring-1::before {
      width: 220px; height: 220px;
      top: -110px; left: -110px;
    }
    .wz-orbit-ring-2 {
      animation-duration: 38s;
      animation-direction: reverse;
    }
    .wz-orbit-ring-2::before {
      width: 340px; height: 340px;
      top: -170px; left: -170px;
    }
    .wz-orbit-ring-3 { animation-duration: 55s; }
    .wz-orbit-ring-3::before {
      width: 460px; height: 460px;
      top: -230px; left: -230px;
    }
    @keyframes wz-orbit-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    /* Spoke: positioned anchor that holds each icon's slot on the ring.
       Inherits the ring's rotation (so it orbits) and applies its own
       static angle+offset (so each spoke sits at a different position).
       The icon inside counter-rotates so its logo stays upright. */
    .wz-orbit-spoke {
      position: absolute;
      top: 0; left: 0;
      width: 0; height: 0;
    }
    .wz-orbit-icon {
      width: 48px; height: 48px;
      margin: -24px 0 0 -24px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--wz-line);
      display: grid; place-items: center;
      box-shadow: var(--wz-shadow-sm);
      animation: wz-orbit-counter 20s linear infinite;
      transition: box-shadow .2s ease;
    }
    .wz-orbit-ring-1 .wz-orbit-icon { animation-duration: 20s; }
    .wz-orbit-ring-2 .wz-orbit-icon {
      animation-duration: 38s;
      animation-direction: normal;        /* ring spins reverse; icon spins forward to counter */
    }
    .wz-orbit-ring-2 .wz-orbit-icon { animation-name: wz-orbit-counter-fwd; }
    .wz-orbit-ring-3 .wz-orbit-icon { animation-duration: 55s; }
    .wz-orbit-icon:hover {
      box-shadow: 0 8px 18px -6px rgba(14,21,71,0.15);
    }
    .wz-orbit-icon img { width: 26px; height: 26px; }
    .wz-orbit-icon svg { width: 26px; height: 26px; color: var(--wz-orange); }
    @keyframes wz-orbit-counter {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-360deg); }
    }
    @keyframes wz-orbit-counter-fwd {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    /* Jetze-feedback v5 2026-05-18: animation NIET pauzeren bij hover; voelt
       dood. Pauze blijft alleen actief bij prefers-reduced-motion (via globale
       @media reduce rule onderaan). */
    @media (max-width: 540px) {
      .wz-orbit-canvas { max-width: 360px; }
      .wz-orbit-ring-1::before { width: 160px; height: 160px; top: -80px; left: -80px; }
      .wz-orbit-ring-2::before { width: 240px; height: 240px; top: -120px; left: -120px; }
      .wz-orbit-ring-3::before { width: 320px; height: 320px; top: -160px; left: -160px; }
      .wz-orbit-icon { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
      .wz-orbit-icon img, .wz-orbit-icon svg { width: 22px; height: 22px; }
    }

    /* ════════════════════════════════════════════════════════════
       2. TOOLS-TABS — click-to-preview with expanded demos
       Left: tab list (icon + title + sub). Right: browser-chrome
       preview frame that swaps content per active tab.
       ════════════════════════════════════════════════════════════ */
    .wz-tools-grid {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 36px;
      align-items: start;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
    }
    @media (max-width: 880px) {
      .wz-tools-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    }

    .wz-tab-list {
      display: flex; flex-direction: column;
      gap: 4px;
    }
    .wz-tab {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 16px 18px;
      background: transparent;
      border: 0;
      border-radius: 14px;
      text-align: left;
      font-family: inherit;
      cursor: pointer;
      transition: background .15s ease;
      position: relative;
      color: var(--wz-ink-2);
    }
    .wz-tab::before {
      content: '';
      position: absolute; left: 0; top: 50%;
      transform: translateY(-50%) scaleY(0);
      width: 3px; height: 60%;
      background: var(--wz-orange);
      border-radius: 0 3px 3px 0;
      transition: transform .2s ease;
    }
    .wz-tab:hover { background: var(--wz-card-tint); }
    .wz-tab.is-active {
      background: var(--wz-card-tint);
      color: var(--wz-ink);
    }
    .wz-tab.is-active::before { transform: translateY(-50%) scaleY(1); }
    /* Tab icon tile — uses the tab's own --ico-color / --ico-bg vars so
       each tool wears its brand colour (samenvatting=orange, flashcards
       =red-orange, toets=green, vraag=blue, podcast=peach, mindmap=
       purple). Matches the StudyZone upload-modal tile grid. */
    .wz-tab-ico {
      flex-shrink: 0;
      width: 42px; height: 42px;
      display: grid; place-items: center;
      border-radius: 12px;
      background: var(--ico-bg, var(--wz-card-tint));
      color: var(--ico-color, var(--wz-ink-2));
      border: 0;
      transition: all .2s ease;
    }
    .wz-tab-ico svg {
      width: 22px; height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .wz-tab.is-active .wz-tab-ico {
      transform: scale(1.04);
    }
    .wz-tab-samenvatting { --ico-color: #FF6601; --ico-bg: rgba(255,102,1,0.12); }
    .wz-tab-flashcards   { --ico-color: #FF6B40; --ico-bg: rgba(255,107,64,0.12); }
    .wz-tab-toets        { --ico-color: #28A172; --ico-bg: rgba(40,194,142,0.14); }
    .wz-tab-vraag        { --ico-color: #5BA8FF; --ico-bg: rgba(91,168,255,0.13); }
    .wz-tab-podcast      { --ico-color: #E8A04A; --ico-bg: rgba(232,160,74,0.14); }
    .wz-tab-mindmap      { --ico-color: #8B5BD8; --ico-bg: rgba(184,115,255,0.13); }
    .wz-tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .wz-tab-title {
      font-weight: 600; font-size: 15px;
      color: var(--wz-ink);
    }
    .wz-tab-sub {
      font-size: 13px; color: var(--wz-ink-3);
      line-height: 1.3;
    }

    /* Mobile: hide tabs, show select */
    .wz-tabs-mobile {
      display: none;
      width: 100%;
      padding: 14px 18px;
      background: var(--wz-card);
      border: 1px solid var(--wz-line);
      border-radius: 14px;
      font-family: inherit; font-size: 15px; font-weight: 600;
      color: var(--wz-ink);
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230E1547' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 18px center;
      cursor: pointer;
    }
    @media (max-width: 880px) {
      .wz-tab-list { display: none; }
      .wz-tabs-mobile { display: block; }
    }

    /* Preview frame */
    .wz-preview {
      background: var(--wz-card);
      border: 1px solid var(--wz-line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--wz-shadow-md);
    }
    .wz-preview-chrome {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px;
      background: var(--wz-card-tint);
      border-bottom: 1px solid var(--wz-line-soft);
    }
    .wz-preview-chrome .dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: rgba(14,21,71,0.18);
    }
    .wz-preview-chrome .dot:nth-child(1) { background: #FF5F57; }
    .wz-preview-chrome .dot:nth-child(2) { background: #FEBC2E; }
    .wz-preview-chrome .dot:nth-child(3) { background: #28C840; }
    .wz-preview-url {
      flex: 1; text-align: center;
      font-size: 12px;
      color: var(--wz-ink-3);
      padding: 4px 12px;
      background: #fff;
      border-radius: 6px;
      font-variant-numeric: tabular-nums;
      max-width: 280px;
      margin: 0 auto;
    }
    /* Fixed height so every demo lives in the same stage — the active
       panel size never changes when you click between tabs. Centered
       content keeps individual demos visually balanced even when their
       inner footprint varies. */
    .wz-preview-body {
      position: relative;
      height: 560px;
      padding: 36px;
      background:
        linear-gradient(180deg, #FCFCFE 0%, #F4F6FB 100%);
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    @media (max-width: 540px) {
      .wz-preview-body { height: 460px; padding: 22px; }
    }
    .wz-panel {
      display: none;
      width: 100%;
      max-width: 540px;
      animation: wz-panel-in .35s ease both;
    }
    .wz-panel.is-active { display: block; }
    @keyframes wz-panel-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── EXPANDED DEMOS (visible inside preview frame) ──────────── */

    /* Samenvatting — mock doc with title, divider, animated bullets.
       Loops on the active panel so it stays interesting on revisit. */
    .wz-demo-doc {
      background: #fff;
      border: 1px solid var(--wz-line-soft);
      border-radius: 14px;
      padding: 26px 28px;
      box-shadow: var(--wz-shadow-md);
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    /* Subtle scanning gradient sweeping over the doc — gives the
       "AI is reading / summarising" feel without animating each line. */
    .wz-demo-doc::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,102,1,0.08) 50%,
        transparent 100%);
      transform: translateX(-100%);
      pointer-events: none;
    }
    .wz-panel.is-active .wz-demo-doc::after {
      animation: wz-doc-scan 5s ease-in-out infinite;
    }
    @keyframes wz-doc-scan {
      0%   { transform: translateX(-100%); }
      40%  { transform: translateX(100%); }
      100% { transform: translateX(100%); }
    }
    .wz-demo-doc-header {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 14px;
    }
    .wz-demo-doc-badge {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--wz-orange);
      padding: 4px 10px;
      background: rgba(255,102,1,0.10);
      border-radius: 999px;
    }
    .wz-demo-doc-title {
      font-weight: 700; font-size: 17px;
      color: var(--wz-ink);
      margin: 0 0 6px;
    }
    .wz-demo-doc-meta {
      font-size: 12px; color: var(--wz-ink-3);
      margin-bottom: 18px;
    }
    .wz-demo-doc-divider {
      height: 1px; background: var(--wz-line-soft);
      margin: 14px 0 18px;
    }
    .wz-demo-doc-bullets { display: flex; flex-direction: column; gap: 14px; }
    .wz-demo-doc-bullet {
      display: flex; align-items: flex-start; gap: 12px;
      opacity: 0; transform: translateX(-8px);
    }
    .wz-panel.is-active .wz-demo-doc-bullet {
      animation: wz-bullet-loop 5s ease-in-out infinite;
    }
    .wz-panel.is-active .wz-demo-doc-bullet:nth-child(1) { animation-delay: 0.1s; }
    .wz-panel.is-active .wz-demo-doc-bullet:nth-child(2) { animation-delay: 0.35s; }
    .wz-panel.is-active .wz-demo-doc-bullet:nth-child(3) { animation-delay: 0.6s; }
    .wz-panel.is-active .wz-demo-doc-bullet:nth-child(4) { animation-delay: 0.85s; }
    @keyframes wz-bullet-loop {
      0%, 5%    { opacity: 0; transform: translateX(-8px); }
      10%, 80%  { opacity: 1; transform: translateX(0); }
      90%, 100% { opacity: 0; transform: translateX(-8px); }
    }
    .wz-demo-doc-num {
      flex-shrink: 0;
      width: 22px; height: 22px;
      border-radius: 6px;
      background: linear-gradient(135deg, #FFE6CC, #FFD2B0);
      color: var(--wz-orange);
      font-size: 11px; font-weight: 700;
      display: grid; place-items: center;
      font-variant-numeric: tabular-nums;
    }
    .wz-demo-doc-line {
      flex: 1; min-width: 0;
      font-size: 14px; line-height: 1.5;
      color: var(--wz-ink-2);
    }
    .wz-demo-doc-line strong { color: var(--wz-ink); font-weight: 600; }
    .wz-demo-doc-line .hl {
      background: linear-gradient(180deg, transparent 60%, rgba(255,102,1,0.20) 60%);
      padding: 0 2px;
    }

    /* Flashcards — stack of 3 cards, top one flips. The animation only
       runs when the panel is active so reduced-motion + off-screen don't
       burn cycles. */
    .wz-demo-flash {
      perspective: 1000px;
      display: grid; place-items: center;
      min-height: 360px;
      position: relative;
    }
    .wz-demo-flash-stack {
      position: relative;
      width: 320px; height: 210px;
    }
    .wz-demo-flash-card {
      position: absolute; inset: 0;
      border-radius: 18px;
      transform-style: preserve-3d;
      box-shadow: 0 22px 50px -22px rgba(14,21,71,0.28);
    }
    .wz-demo-flash-card:nth-child(1) {
      transform: translate(-16px, -12px) rotate(-4deg);
      opacity: 0.55;
    }
    .wz-demo-flash-card:nth-child(2) {
      transform: translate(-8px, -6px) rotate(-2deg);
      opacity: 0.85;
    }
    .wz-demo-flash-card:nth-child(3) {
      transform: rotate(0deg);
    }
    .wz-panel.is-active .wz-demo-flash-card:nth-child(3) {
      animation: wz-flash-flip 4.5s cubic-bezier(.4,0,.2,1) infinite;
    }
    @keyframes wz-flash-flip {
      0%, 40%   { transform: rotateY(0deg); }
      50%, 90%  { transform: rotateY(180deg); }
      100%      { transform: rotateY(360deg); }
    }
    .wz-flash-face {
      position: absolute; inset: 0;
      border-radius: 16px;
      backface-visibility: hidden;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 24px;
      text-align: center;
    }
    .wz-flash-face-q {
      background: #fff;
      border: 1px solid var(--wz-line);
    }
    .wz-flash-face-q .wz-flash-tag {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--wz-ink-3);
      margin-bottom: 8px;
    }
    .wz-flash-face-q .wz-flash-text {
      font-size: 17px; font-weight: 600;
      color: var(--wz-ink);
      line-height: 1.3;
    }
    .wz-flash-face-a {
      background: linear-gradient(135deg, #FF6601, #FFB87A);
      color: #fff;
      transform: rotateY(180deg);
    }
    .wz-flash-face-a .wz-flash-tag { color: rgba(255,255,255,0.8); }
    .wz-flash-face-a .wz-flash-text { color: #fff; }
    .wz-flash-face-a .wz-flash-text {
      font-size: 17px; font-weight: 600;
      line-height: 1.3;
    }
    .wz-flash-face .wz-flash-tag {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 8px;
    }
    .wz-demo-flash-progress {
      position: absolute; bottom: 12px;
      display: flex; gap: 6px;
      left: 50%; transform: translateX(-50%);
    }
    .wz-demo-flash-progress span {
      width: 18px; height: 4px;
      border-radius: 4px;
      background: var(--wz-line);
    }
    .wz-demo-flash-progress span:first-child { background: var(--wz-orange); }

    /* Toets — real Q with 4 typed answer options, correct fills.
       Adds a top progress bar and a pulse on the correct answer that
       loops while the panel is active. */
    .wz-demo-quiz {
      background: #fff;
      border: 1px solid var(--wz-line);
      border-radius: 16px;
      padding: 26px 28px;
      box-shadow: var(--wz-shadow-md);
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    .wz-demo-quiz::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #FF6601, #B873FF);
      transform-origin: left center;
      transform: scaleX(0.375);
    }
    .wz-panel.is-active .wz-demo-quiz::before {
      animation: wz-quiz-progress 6s ease-in-out infinite;
    }
    @keyframes wz-quiz-progress {
      0%   { transform: scaleX(0.25); }
      30%  { transform: scaleX(0.50); }
      60%  { transform: scaleX(0.75); }
      100% { transform: scaleX(0.75); }
    }
    .wz-demo-quiz-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 14px;
    }
    .wz-demo-quiz-tag {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--wz-orange);
    }
    .wz-demo-quiz-step {
      font-size: 12px; color: var(--wz-ink-3);
      font-variant-numeric: tabular-nums;
    }
    .wz-demo-quiz-q {
      font-size: 16px; font-weight: 600;
      color: var(--wz-ink);
      line-height: 1.4;
      margin-bottom: 18px;
    }
    .wz-demo-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
    .wz-demo-quiz-opt {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--wz-line);
      border-radius: 10px;
      font-size: 14px;
      color: var(--wz-ink-2);
      background: #fff;
      position: relative;
      overflow: hidden;
      transition: all .3s ease;
    }
    .wz-demo-quiz-opt .letter {
      flex-shrink: 0;
      width: 22px; height: 22px;
      border-radius: 6px;
      background: var(--wz-card-tint);
      color: var(--wz-ink-3);
      font-size: 11px; font-weight: 700;
      display: grid; place-items: center;
      transition: all .3s ease;
    }
    .wz-demo-quiz-opt .check {
      margin-left: auto;
      opacity: 0;
      transform: scale(0.6);
      color: #fff;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: #28C28E;
      display: grid; place-items: center;
      font-size: 11px;
      transition: opacity .3s ease .2s, transform .3s cubic-bezier(.4,1.6,.6,1) .2s;
    }
    .wz-panel.is-active .wz-demo-quiz-opt.is-correct {
      animation: wz-quiz-correct-loop 4s ease-in-out infinite;
    }
    .wz-panel.is-active .wz-demo-quiz-opt.is-correct .letter {
      animation: wz-quiz-letter-loop 4s ease-in-out infinite;
    }
    .wz-panel.is-active .wz-demo-quiz-opt.is-correct .check {
      animation: wz-quiz-check-loop 4s ease-in-out infinite;
    }
    @keyframes wz-quiz-correct-loop {
      0%, 30%   { border-color: var(--wz-line); background: #fff; color: var(--wz-ink-2); }
      40%, 90%  { border-color: rgba(40,194,142,0.4); background: rgba(40,194,142,0.06); color: var(--wz-ink); }
      100%      { border-color: var(--wz-line); background: #fff; color: var(--wz-ink-2); }
    }
    @keyframes wz-quiz-letter-loop {
      0%, 30%  { background: var(--wz-card-tint); color: var(--wz-ink-3); }
      40%, 90% { background: #28C28E; color: #fff; }
      100%     { background: var(--wz-card-tint); color: var(--wz-ink-3); }
    }
    @keyframes wz-quiz-check-loop {
      0%, 40%   { opacity: 0; transform: scale(0.5); }
      50%, 90%  { opacity: 1; transform: scale(1); }
      100%      { opacity: 0; transform: scale(0.5); }
    }

    /* Vraag stellen — multi-turn chat */
    .wz-demo-chat {
      display: flex; flex-direction: column;
      gap: 12px;
      max-width: 460px; margin: 0 auto;
      padding: 8px 0;
    }
    .wz-chat-bubble {
      max-width: 80%;
      padding: 12px 16px;
      border-radius: 16px;
      font-size: 14px; line-height: 1.4;
      opacity: 0; transform: translateY(8px);
      animation: wz-bubble-in .35s ease both;
    }
    .wz-chat-bubble.you {
      align-self: flex-end;
      background: var(--wz-card);
      border: 1px solid var(--wz-line);
      color: var(--wz-ink);
      border-bottom-right-radius: 6px;
    }
    .wz-chat-bubble.ai {
      align-self: flex-start;
      background: linear-gradient(135deg, #FF6601, #B873FF);
      color: #fff;
      border-bottom-left-radius: 6px;
      box-shadow: 0 8px 24px -8px rgba(255,102,1,0.35);
    }
    .wz-chat-bubble.ai.typing {
      display: inline-flex; gap: 4px;
      padding: 14px 18px;
    }
    .wz-chat-bubble.ai.typing .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #fff;
      animation: wz-chat-dot 1.2s ease-in-out infinite;
    }
    .wz-chat-bubble.ai.typing .dot:nth-child(2) { animation-delay: .15s; }
    .wz-chat-bubble.ai.typing .dot:nth-child(3) { animation-delay: .30s; }
    @keyframes wz-chat-dot {
      0%,100% { opacity: 0.45; transform: translateY(0); }
      50%     { opacity: 1; transform: translateY(-3px); }
    }
    @keyframes wz-bubble-in {
      to { opacity: 1; transform: translateY(0); }
    }
    /* Looping bubble reveal — visible during 0..70%, hidden 80..100%, so
       the conversation feels alive on every revisit. */
    .wz-panel.is-active .wz-chat-bubble {
      animation: wz-chat-loop 7s ease-in-out infinite;
    }
    .wz-panel.is-active .wz-chat-bubble:nth-child(1) { animation-delay: 0.2s; }
    .wz-panel.is-active .wz-chat-bubble:nth-child(2) { animation-delay: 1.0s; }
    .wz-panel.is-active .wz-chat-bubble:nth-child(3) { animation-delay: 2.4s; }
    .wz-panel.is-active .wz-chat-bubble:nth-child(4) { animation-delay: 3.4s; }
    @keyframes wz-chat-loop {
      0%, 5%    { opacity: 0; transform: translateY(10px); }
      8%, 75%   { opacity: 1; transform: translateY(0); }
      85%, 100% { opacity: 0; transform: translateY(10px); }
    }

    /* Podcast — bigger player with waveform + controls */
    .wz-demo-pod {
      background: #fff;
      border: 1px solid var(--wz-line);
      border-radius: 18px;
      padding: 22px;
      box-shadow: var(--wz-shadow-sm);
      max-width: 480px; margin: 0 auto;
    }
    .wz-pod-top { display: flex; align-items: center; gap: 16px; }
    .wz-pod-cover {
      width: 64px; height: 64px;
      border-radius: 14px;
      background: linear-gradient(135deg, #FF6601, #B873FF);
      display: grid; place-items: center;
      font-size: 28px;
      flex-shrink: 0;
      box-shadow: 0 12px 24px -8px rgba(255,102,1,0.4);
    }
    .wz-pod-meta { flex: 1; min-width: 0; }
    .wz-pod-title {
      font-weight: 600; font-size: 15px;
      color: var(--wz-ink);
    }
    .wz-pod-sub {
      font-size: 12.5px;
      color: var(--wz-ink-3);
      margin-top: 2px;
    }
    .wz-pod-play {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--wz-orange);
      color: #fff;
      display: grid; place-items: center;
      box-shadow: 0 8px 18px -6px rgba(255,102,1,0.45);
    }
    .wz-pod-wave {
      display: flex; align-items: flex-end; justify-content: center;
      gap: 3px;
      height: 56px;
      margin: 22px 0 14px;
    }
    .wz-pod-wave .wave-bar {
      width: 4px;
      background: linear-gradient(180deg, #FFB87A, #FF6601);
      border-radius: 3px;
      animation: wz-wave 1.4s ease-in-out infinite;
      animation-play-state: paused;
    }
    .is-active .wz-pod-wave .wave-bar { animation-play-state: running; }
    .wz-pod-wave .wave-bar:nth-child(odd)  { animation-delay: -0.7s; }
    .wz-pod-wave .wave-bar:nth-child(3n)   { animation-delay: -0.2s; }
    .wz-pod-wave .wave-bar:nth-child(5n)   { animation-delay: -1.0s; }
    @keyframes wz-wave {
      0%, 100% { height: 8px; opacity: 0.55; }
      50%      { height: 48px; opacity: 1; }
    }
    .wz-pod-time {
      display: flex; justify-content: space-between;
      font-size: 11.5px;
      color: var(--wz-ink-3);
      font-variant-numeric: tabular-nums;
    }
    .wz-pod-bar {
      height: 4px;
      background: var(--wz-line);
      border-radius: 999px;
      margin-top: 8px;
      overflow: hidden;
    }
    .wz-pod-bar > span {
      display: block; height: 100%;
      width: 38%;
      background: linear-gradient(90deg, #FF6601, #B873FF);
      border-radius: 999px;
    }

    /* Mindmap — central node + 6 branches with labels.
       Paths use pathLength="1" attribute so stroke-dasharray:1 normalizes
       any curve length — previous fixed 200px dasharray didn't draw curves
       longer than that and didn't hide curves shorter than that.
       Loop the draw infinitely while the panel is active so the section
       isn't dead after first reveal. */
    .wz-demo-mm {
      position: relative;
      width: 100%;
      max-width: 520px;
      aspect-ratio: 16 / 9;
      margin: 0 auto;
    }
    .wz-demo-mm svg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      overflow: visible;
    }
    .wz-demo-mm svg path {
      fill: none;
      stroke: url(#wz-mm-grad);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }
    .wz-panel.is-active .wz-demo-mm svg path {
      animation: wz-mm-draw 4s ease-in-out infinite;
    }
    .wz-panel.is-active .wz-demo-mm svg path:nth-child(2) { animation-delay: 0.15s; }
    .wz-panel.is-active .wz-demo-mm svg path:nth-child(3) { animation-delay: 0.30s; }
    .wz-panel.is-active .wz-demo-mm svg path:nth-child(4) { animation-delay: 0.45s; }
    .wz-panel.is-active .wz-demo-mm svg path:nth-child(5) { animation-delay: 0.60s; }
    .wz-panel.is-active .wz-demo-mm svg path:nth-child(6) { animation-delay: 0.75s; }
    @keyframes wz-mm-draw {
      0%   { stroke-dashoffset: 1; }
      35%  { stroke-dashoffset: 0; }
      75%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 1; }
    }
    .wz-mm-node {
      position: absolute;
      transform: translate(-50%, -50%) scale(0);
      pointer-events: none;
    }
    .wz-panel.is-active .wz-mm-node {
      animation: wz-mm-pop 4s ease-in-out infinite;
    }
    .wz-panel.is-active .wz-mm-node-1 { animation-delay: 0.6s; }
    .wz-panel.is-active .wz-mm-node-2 { animation-delay: 0.75s; }
    .wz-panel.is-active .wz-mm-node-3 { animation-delay: 0.9s; }
    .wz-panel.is-active .wz-mm-node-4 { animation-delay: 1.05s; }
    .wz-panel.is-active .wz-mm-node-5 { animation-delay: 1.2s; }
    .wz-panel.is-active .wz-mm-node-6 { animation-delay: 1.35s; }
    @keyframes wz-mm-pop {
      0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
      15%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
      25%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
      75%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
      90%  { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    }
    .wz-mm-bubble {
      padding: 6px 12px;
      background: #fff;
      border: 1px solid var(--wz-line);
      border-radius: 999px;
      font-size: 12px; font-weight: 600;
      color: var(--wz-ink-2);
      white-space: nowrap;
      box-shadow: var(--wz-shadow-sm);
    }
    .wz-mm-center {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, #FF6601, #B873FF);
      display: grid; place-items: center;
      color: #fff; font-weight: 700; font-size: 12px;
      box-shadow:
        0 14px 30px -10px rgba(255,102,1,0.5),
        0 0 0 8px rgba(255,255,255,0.85);
      transform: translate(-50%, -50%) scale(1) !important;
      animation: none !important;
      z-index: 2;
    }
    .wz-mm-center::before {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 2px dashed rgba(255,102,1,0.30);
      animation: wz-mm-orbit 18s linear infinite;
    }
    @keyframes wz-mm-orbit {
      to { transform: rotate(360deg); }
    }

    /* ════════════════════════════════════════════════════════════
       3. CTA STRIP — inline horizontal callout between sections
       ════════════════════════════════════════════════════════════ */
    /* Specificity boost zodat we de .white-zone section padding overriden.
       Jetze-feedback 2026-05-18 v3: te veel whitespace boven/onder de strip. */
    .white-zone section.wz-cta-strip-section {
      padding: 24px 24px;
    }
    .wz-cta-strip-section {
      padding: 24px 24px;
    }
    .wz-cta-strip {
      max-width: 1000px; margin: 0 auto;
      padding: 22px 28px;
      background: linear-gradient(135deg, rgba(255,102,1,0.07), rgba(184,115,255,0.06));
      border: 1px solid rgba(255,102,1,0.15);
      border-radius: 18px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
      text-align: left;
    }
    .wz-cta-strip-text {
      display: flex; flex-direction: column; gap: 4px;
    }
    .wz-cta-strip-eyebrow {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--wz-orange);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .wz-cta-strip-eyebrow::before {
      content: ''; width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--wz-orange);
    }
    .wz-cta-strip-headline {
      font-weight: 600; font-size: 19px;
      color: var(--wz-ink);
      font-family: inherit;
    }
    .wz-cta-strip-headline span {
      color: var(--wz-orange);
    }
    @media (max-width: 640px) {
      .wz-cta-strip { flex-direction: column; align-items: flex-start; }
    }

    /* ════════════════════════════════════════════════════════════
       4. TARIEVEN — 3 pricing cards, middle one featured (dark)
       ════════════════════════════════════════════════════════════ */
    .wz-pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      width: 100%;
      max-width: 1080px; margin: 0 auto;
      align-items: stretch;
    }
    @media (max-width: 860px) {
      .wz-pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
    }
    .wz-price-card {
      display: flex; flex-direction: column;
      padding: 32px 28px;
      background: var(--wz-card);
      border: 1px solid var(--wz-line);
      border-radius: 20px;
      text-align: left;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .wz-price-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--wz-shadow-md);
    }
    .wz-price-card-name {
      font-size: 13px; font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--wz-ink-3);
      margin-bottom: 8px;
    }
    .wz-price-amount {
      display: flex; align-items: baseline; gap: 6px;
      font-size: 44px; font-weight: 700;
      color: var(--wz-ink);
      letter-spacing: -0.02em;
      line-height: 1;
      font-family: inherit;
    }
    .wz-price-suffix {
      font-size: 15px; font-weight: 500;
      color: var(--wz-ink-3);
    }
    .wz-price-period {
      font-size: 12.5px;
      color: var(--wz-ink-3);
      margin-top: 6px;
    }
    .wz-price-desc {
      font-size: 14px;
      color: var(--wz-ink-2);
      margin: 16px 0 22px;
      line-height: 1.5;
    }
    .wz-price-list {
      list-style: none; padding: 0; margin: 0 0 28px;
      display: flex; flex-direction: column; gap: 11px;
    }
    .wz-price-list li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 14px;
      color: var(--wz-ink-2);
      line-height: 1.4;
    }
    .wz-price-list li::before {
      content: '';
      flex-shrink: 0;
      margin-top: 4px;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: rgba(40,194,142,0.15);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2328C28E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 8 7 11 12 5'/></svg>");
      background-position: center; background-repeat: no-repeat;
    }
    .wz-price-list li strong { color: var(--wz-ink); font-weight: 600; }
    .wz-price-card .wz-btn { margin-top: auto; justify-content: center; }

    /* Featured (middle) card — dark navy */
    .wz-price-card.is-featured {
      position: relative;
      background: linear-gradient(180deg, #0E1547 0%, #1A2168 100%);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 24px 50px -16px rgba(14,21,71,0.30);
      /* Jetze-feedback v3 2026-05-18: overflow:hidden clipte de "Aanbevolen"
         badge die op top:-14px geplaatst is. Nu isolation:isolate + border-
         radius op de ::before zodat aurora-glow netjes binnen de afgeronde
         hoeken blijft maar badge UIT mag steken. */
      isolation: isolate;
    }
    .wz-price-card.is-featured::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at 100% 0%, rgba(255,102,1,0.18), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(184,115,255,0.18), transparent 50%);
      pointer-events: none;
      z-index: 0;
    }
    .wz-price-card.is-featured > * { position: relative; z-index: 1; }
    .wz-price-card.is-featured .wz-price-card-name { color: var(--wz-orange-2); }
    .wz-price-card.is-featured .wz-price-amount { color: #fff; }
    .wz-price-card.is-featured .wz-price-suffix,
    .wz-price-card.is-featured .wz-price-period,
    .wz-price-card.is-featured .wz-price-desc {
      color: rgba(255,255,255,0.7);
    }
    .wz-price-card.is-featured .wz-price-list li { color: rgba(255,255,255,0.82); }
    .wz-price-card.is-featured .wz-price-list li strong { color: #fff; }
    .wz-price-card.is-featured .wz-price-list li::before {
      background-color: rgba(255,184,122,0.2);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFB87A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 8 7 11 12 5'/></svg>");
    }
    .wz-price-badge {
      position: absolute;
      /* Jetze-feedback 2026-05-18: badge zat eerst op top:18px / right:18px
         binnen de card en overlapte de titel "Pro Jaarlijks". Nu sits het
         als een tab boven de card-edge zodat er geen overlap is en de
         "Aanbevolen" hint duidelijk uit de card komt. */
      top: -14px; left: 50%;
      transform: translateX(-50%);
      padding: 6px 14px;
      background: var(--wz-orange);
      color: #fff;
      font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.10em; text-transform: uppercase;
      border-radius: 999px;
      box-shadow: 0 8px 20px -6px rgba(255,102,1,0.45);
      z-index: 2;
      white-space: nowrap;
    }

    .wz-pricing-foot {
      text-align: center;
      margin-top: 28px;
      font-size: 13px;
      color: var(--wz-ink-3);
    }

    /* ════════════════════════════════════════════════════════════
       5. FAQ — accordion list
       ════════════════════════════════════════════════════════════ */
    .wz-faq {
      max-width: 760px;
      margin: 0 auto;
      display: flex; flex-direction: column;
      gap: 8px;
    }
    .wz-faq-item {
      background: var(--wz-card);
      border: 1px solid var(--wz-line);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .wz-faq-item.is-open {
      border-color: rgba(255,102,1,0.25);
      box-shadow: var(--wz-shadow-sm);
    }
    .wz-faq-q {
      width: 100%;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      padding: 20px 22px;
      background: transparent;
      border: 0;
      font-family: inherit;
      font-size: 16px; font-weight: 600;
      color: var(--wz-ink);
      text-align: left;
      cursor: pointer;
    }
    .wz-faq-icon {
      flex-shrink: 0;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--wz-card-tint);
      display: grid; place-items: center;
      color: var(--wz-ink-2);
      transition: transform .25s ease, background .2s ease;
    }
    .wz-faq-item.is-open .wz-faq-icon {
      transform: rotate(45deg);
      background: rgba(255,102,1,0.15);
      color: var(--wz-orange);
    }
    .wz-faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
    }
    .wz-faq-a-inner {
      padding: 0 22px 22px;
      font-size: 14.5px;
      color: var(--wz-ink-2);
      line-height: 1.6;
    }

    /* ════════════════════════════════════════════════════════════
       6. NIEUWSBRIEF
       ════════════════════════════════════════════════════════════ */
    .wz-newsletter {
      max-width: 620px;
      margin: 0 auto;
      text-align: center;
    }
    .wz-newsletter h2 {
      font-size: clamp(28px, 3.6vw, 40px);
    }
    .wz-news-form {
      display: flex; gap: 10px;
      margin: 36px auto 0;
      max-width: 480px;
    }
    .wz-news-input {
      flex: 1;
      height: 52px;
      padding: 0 22px;
      background: #fff;
      border: 1px solid var(--wz-line);
      border-radius: 999px;
      font-family: inherit;
      font-size: 15px;
      color: var(--wz-ink);
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .wz-news-input:focus {
      border-color: var(--wz-orange);
      box-shadow: 0 0 0 3px rgba(255,102,1,0.12);
    }
    .wz-news-input::placeholder { color: var(--wz-ink-4); }
    .wz-news-form .wz-btn {
      height: 52px; border-radius: 999px;
      padding: 0 24px;
    }
    @media (max-width: 540px) {
      .wz-news-form { flex-direction: column; }
      .wz-news-form .wz-btn { width: 100%; }
    }
    .wz-news-social {
      margin-top: 32px;
      display: flex; flex-direction: column; gap: 10px;
      align-items: center;
    }
    .wz-news-avatars { display: flex; align-items: center; gap: 10px; }
    .wz-news-avatars .stack {
      display: flex;
    }
    .wz-news-avatars .av {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 2px solid #fff;
      display: grid; place-items: center;
      font-size: 11px; font-weight: 700;
      margin-left: -8px;
    }
    .wz-news-avatars .av:first-child { margin-left: 0; }
    .wz-news-avatars .av-1 { background: #FFD7B0; color: #8A3A00; }
    .wz-news-avatars .av-2 { background: #C7CBFF; color: var(--wz-ink); }
    .wz-news-avatars .av-3 { background: #C5F0CF; color: #1F5F32; }
    .wz-news-avatars .av-4 { background: #FFE8A3; color: #7A5A00; }
    .wz-news-avatars-label {
      font-size: 14px; font-weight: 600;
      color: var(--wz-ink-2);
    }
    .wz-news-promise {
      font-size: 12px;
      color: var(--wz-ink-4);
    }
    .wz-news-success {
      margin: 22px auto 0;
      max-width: 440px;
      padding: 14px 20px;
      background: rgba(40,194,142,0.10);
      border: 1px solid rgba(40,194,142,0.25);
      color: #15803d;
      border-radius: 14px;
      font-size: 13.5px; text-align: left;
      display: none;
    }
    .wz-news-success.is-shown { display: block; }
    .wz-news-success strong { color: #14532d; }

    /* ════════════════════════════════════════════════════════════
       7. FINAL CTA — wraps in a soft aurora background
       ════════════════════════════════════════════════════════════ */
    .wz-final-section {
      padding: 96px 24px 80px;
      position: relative;
      overflow: hidden;
    }
    .wz-final-section::before {
      content: '';
      position: absolute; inset: -40px 0 -40px 0;
      background:
        radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,102,1,0.10), transparent 60%),
        radial-gradient(ellipse 50% 50% at 30% 30%, rgba(184,115,255,0.10), transparent 60%),
        radial-gradient(ellipse 50% 50% at 70% 70%, rgba(91,168,255,0.10), transparent 60%);
      pointer-events: none;
    }
    .wz-final {
      max-width: 760px; margin: 0 auto;
      text-align: center;
      position: relative;
    }
    .wz-final h2 {
      font-size: clamp(40px, 6vw, 76px);
      margin: 18px 0 22px;
      letter-spacing: -0.025em;
    }
    .wz-final .lead { margin-bottom: 36px; }

    /* ════════════════════════════════════════════════════════════
       8. FOOTER
       ════════════════════════════════════════════════════════════ */
    .wz-footer {
      padding: 56px 24px 32px;
      border-top: 1px solid var(--wz-line);
      background: var(--wz-card-tint);
    }
    .wz-footer-inner {
      max-width: 1100px; margin: 0 auto;
    }
    .wz-footer-intro {
      padding-bottom: 36px;
      margin-bottom: 36px;
      border-bottom: 1px solid var(--wz-line);
      display: flex; flex-direction: column; gap: 12px;
    }
    .wz-footer-brand {
      display: flex; align-items: center; gap: 12px;
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic;
      font-size: 22px; font-weight: 600;
      color: var(--wz-ink);
    }
    .wz-footer-brand .mark {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #FFD9B7 0%, #FF6601 50%, #B873FF 100%);
      color: #fff;
      display: grid; place-items: center;
      font-style: italic; font-size: 18px;
      box-shadow: var(--wz-shadow-sm);
    }
    .wz-footer-desc {
      font-size: 14px;
      color: var(--wz-ink-3);
      max-width: 420px;
    }
    .wz-footer-cols {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 36px;
      padding-bottom: 36px;
    }
    @media (max-width: 760px) {
      .wz-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    }
    .wz-footer-col-head {
      font-size: 12px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--wz-ink-4);
      margin-bottom: 14px;
    }
    .wz-footer-col ul {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .wz-footer-col a {
      font-size: 14px;
      color: var(--wz-ink-2);
      text-decoration: none;
      transition: color .15s ease;
    }
    .wz-footer-col a:hover { color: var(--wz-orange); }
    .wz-footer-bottom {
      padding-top: 24px;
      border-top: 1px solid var(--wz-line);
      display: flex; flex-wrap: wrap;
      align-items: center; justify-content: space-between;
      gap: 14px;
      font-size: 13px;
      color: var(--wz-ink-3);
    }
    .wz-footer-bottom ul {
      list-style: none; padding: 0; margin: 0;
      display: flex; gap: 22px;
    }
    .wz-footer-bottom a {
      color: var(--wz-ink-3);
      text-decoration: none;
    }
    .wz-footer-bottom a:hover { color: var(--wz-orange); }

    /* ════════════════════════════════════════════════════════════
       PODCAST SECTION — light variant overrides for the existing
       dark .podcast-card / .pc-* (we keep the JS + audio behavior
       intact, just re-skin to fit the white-zone).
       ════════════════════════════════════════════════════════════ */
    .white-zone .podcast-card {
      background: linear-gradient(135deg, rgba(255,102,1,0.06), rgba(184,115,255,0.05));
      border: 1px solid var(--wz-line);
      box-shadow: var(--wz-shadow-md);
      backdrop-filter: none;
      max-width: 620px;
    }
    .white-zone .pc-title { color: var(--wz-ink); }
    .white-zone .pc-sub   { color: var(--wz-ink-3); }
    .white-zone .pc-bar   { background: var(--wz-line); }
    .white-zone .pc-times { color: var(--wz-ink-3); }
    .white-zone .pc-tab {
      background: #fff;
      border: 1px solid var(--wz-line);
      color: var(--wz-ink-2);
    }
    .white-zone .pc-tab:hover {
      background: var(--wz-card-tint);
      color: var(--wz-ink);
    }
    .white-zone .pc-tab.active {
      background: rgba(255,102,1,0.10);
      border-color: rgba(255,102,1,0.35);
      color: var(--wz-orange);
    }

    /* Podcast-card als tab-content: fit binnen wz-panel container (max 620px
       was te krap voor tab-frame; gebruik volle breedte met wat marge). Adds
       a "Maak je eigen podcast" CTA-link onderaan die naar app.studyzone.nl/podcast
       redirect (Jetze-feedback v4 2026-05-18). */
    .podcast-card.podcast-card--in-tab {
      max-width: 100%;
      margin: 0 auto;
      padding: 18px 20px 20px;
      width: 100%;
    }
    .pc-more {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 14px;
      padding: 8px 14px;
      background: rgba(255,102,1,0.10);
      border: 1px solid rgba(255,102,1,0.20);
      color: var(--wz-orange);
      font-size: 13px; font-weight: 600;
      border-radius: 999px;
      text-decoration: none;
      transition: background .15s ease, transform .15s ease;
    }
    .pc-more:hover {
      background: rgba(255,102,1,0.16);
      transform: translateY(-1px);
    }

    /* ════════════════════════════════════════════════════════════
       INTERACTIVE DEMO PANELS (Jetze-feedback v4 2026-05-18)
       Flashcards · Toets · Vraag-stellen
       ════════════════════════════════════════════════════════════ */

    /* -- Flashcards live (klik om te flippen + cyclen) -- */
    .wz-flash-live {
      display: flex; flex-direction: column; align-items: center;
      padding: 18px 20px;
      gap: 16px;
    }
    .wz-flash-live-card {
      position: relative;
      width: 100%; max-width: 380px;
      aspect-ratio: 1.6 / 1;
      cursor: pointer;
      perspective: 1000px;
      outline: none;
    }
    .wz-flash-live-card:focus-visible .wz-flash-live-face-q,
    .wz-flash-live-card:focus-visible .wz-flash-live-face-a {
      box-shadow: 0 0 0 3px rgba(255,102,1,0.30), 0 8px 20px -6px rgba(14,21,71,0.15);
    }
    .wz-flash-live-face {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      gap: 10px;
      padding: 22px 26px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid var(--wz-line);
      box-shadow: 0 8px 22px -6px rgba(14,21,71,0.12);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transition: transform .55s cubic-bezier(.4,.2,.2,1);
      text-align: center;
    }
    .wz-flash-live-face-q { transform: rotateY(0deg); }
    .wz-flash-live-face-a {
      transform: rotateY(180deg);
      background: linear-gradient(180deg, #FFF8F2 0%, #FFFFFF 100%);
      border-color: rgba(255,102,1,0.20);
    }
    .wz-flash-live-card.is-flipped .wz-flash-live-face-q { transform: rotateY(180deg); }
    .wz-flash-live-card.is-flipped .wz-flash-live-face-a { transform: rotateY(0deg); }
    .wz-flash-live-tag {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.10em; text-transform: uppercase;
      color: var(--wz-ink-3);
    }
    .wz-flash-live-face-a .wz-flash-live-tag { color: var(--wz-orange); }
    .wz-flash-live-text {
      font-size: clamp(15px, 1.6vw, 17px);
      font-weight: 500;
      color: var(--wz-ink);
      line-height: 1.4;
      max-width: 280px;
    }
    .wz-flash-live-hint {
      font-size: 11px;
      color: var(--wz-ink-4);
      margin-top: 4px;
    }
    .wz-flash-live-actions {
      display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    }
    .wz-flash-live-btn {
      padding: 8px 16px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--wz-line);
      color: var(--wz-ink-2);
      font-size: 13px; font-weight: 600;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, transform .12s ease;
    }
    .wz-flash-live-btn:hover { transform: translateY(-1px); }
    .wz-flash-live-btn-bad:hover { background: rgba(255,107,64,0.10); border-color: rgba(255,107,64,0.30); color: #b03d10; }
    .wz-flash-live-btn-mid:hover { background: rgba(232,160,74,0.10); border-color: rgba(232,160,74,0.30); color: #8a5a00; }
    .wz-flash-live-btn-good:hover { background: rgba(40,194,142,0.10); border-color: rgba(40,194,142,0.30); color: #1f7a4f; }
    /* Jetze v7 2026-05-18: CTA na laatste flashcard, parity met toets-tab. */
    .wz-flash-live-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 22px;
      background: var(--wz-orange);
      color: #fff;
      border: 1px solid var(--wz-orange);
      border-radius: 999px;
      font-size: 14px; font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: filter .15s ease, transform .15s ease;
      box-shadow: 0 8px 20px -6px rgba(255,102,1,0.40);
    }
    .wz-flash-live-cta:hover {
      filter: brightness(1.06);
      transform: translateY(-1px);
    }
    .wz-flash-live-progress {
      display: flex; gap: 6px;
    }
    .wz-flash-live-progress span {
      width: 24px; height: 4px;
      background: rgba(14,21,71,0.10);
      border-radius: 2px;
      transition: background .2s ease;
    }
    .wz-flash-live-progress span.is-active { background: var(--wz-orange); }
    .wz-flash-live-progress span.is-done { background: rgba(40,194,142,0.55); }

    /* -- Quiz live (multiple choice + open answer) -- */
    .wz-quiz-live {
      padding: 18px 20px 20px;
      max-width: 520px; margin: 0 auto; width: 100%;
    }
    .wz-quiz-live .wz-demo-quiz-q {
      font-size: clamp(15px, 1.6vw, 17px);
    }
    .wz-quiz-open {
      display: flex; flex-direction: column; gap: 8px;
      margin-top: 12px;
    }
    .wz-quiz-open-input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--wz-line);
      border-radius: 12px;
      font-family: inherit; font-size: 14px;
      color: var(--wz-ink);
      resize: vertical;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .wz-quiz-open-input:focus {
      border-color: var(--wz-orange);
      box-shadow: 0 0 0 3px rgba(255,102,1,0.12);
    }
    .wz-quiz-open-submit {
      align-self: flex-end;
      padding: 8px 16px;
      background: var(--wz-orange);
      color: #fff;
      border: none;
      border-radius: 999px;
      font-size: 13px; font-weight: 600;
      cursor: pointer;
      transition: filter .15s ease;
    }
    .wz-quiz-open-submit:hover { filter: brightness(1.06); }
    .wz-quiz-feedback {
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13.5px;
      line-height: 1.5;
    }
    .wz-quiz-feedback.is-correct {
      background: rgba(40,194,142,0.10);
      border: 1px solid rgba(40,194,142,0.25);
      color: #15803d;
    }
    .wz-quiz-feedback.is-wrong {
      background: rgba(255,107,64,0.10);
      border: 1px solid rgba(255,107,64,0.25);
      color: #9c3712;
    }
    .wz-quiz-feedback strong { color: inherit; }
    .wz-quiz-actions {
      margin-top: 14px;
      display: flex; justify-content: flex-end;
    }
    .wz-quiz-next {
      padding: 8px 16px;
      background: #fff;
      border: 1px solid var(--wz-line);
      color: var(--wz-ink-2);
      border-radius: 999px;
      font-size: 13px; font-weight: 600;
      cursor: pointer;
      transition: background .15s ease, transform .12s ease;
    }
    .wz-quiz-next:hover {
      background: var(--wz-card-tint);
      transform: translateX(2px);
    }
    /* Final-state styling: na laatste vraag is dit een primaire CTA naar
       app.studyzone.nl (Jetze-feedback v5 2026-05-18). */
    .wz-quiz-next.wz-quiz-next-final {
      background: var(--wz-orange);
      color: #fff;
      border-color: var(--wz-orange);
      padding: 10px 20px;
    }
    .wz-quiz-next.wz-quiz-next-final:hover {
      background: #FF7F2A;
      transform: translateX(2px);
    }
    /* Click states on multiple-choice options */
    .wz-demo-quiz-opt {
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .wz-demo-quiz-opt:hover:not(.is-disabled) {
      background: rgba(255,102,1,0.04);
      border-color: rgba(255,102,1,0.30);
    }
    .wz-demo-quiz-opt.is-picked-wrong {
      background: rgba(255,107,64,0.10);
      border-color: rgba(255,107,64,0.35);
      color: #9c3712;
    }
    .wz-demo-quiz-opt.is-revealed {
      background: rgba(40,194,142,0.10);
      border-color: rgba(40,194,142,0.35);
    }
    .wz-demo-quiz-opt.is-disabled { cursor: default; opacity: 0.55; }
    .wz-demo-quiz-opt.is-disabled:hover { background: inherit; border-color: var(--wz-line); }

    /* -- Vraag-stellen live (StudyZone-app stijl chat + input) -- */
    .wz-ask-live {
      display: flex; flex-direction: column;
      padding: 16px 18px;
      gap: 12px;
      max-width: 560px; margin: 0 auto; width: 100%;
      height: 100%;
    }
    .wz-ask-head {
      display: flex; align-items: center; gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--wz-line);
    }
    .wz-ask-avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #FFD9B7, #FF6601 60%, #B873FF);
      color: #fff;
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .wz-ask-head-title {
      font-size: 14px; font-weight: 600;
      color: var(--wz-ink);
    }
    .wz-ask-head-sub {
      font-size: 11.5px;
      color: var(--wz-ink-3);
      display: flex; align-items: center; gap: 6px;
    }
    .wz-ask-head-sub::before {
      content: '';
      width: 7px; height: 7px;
      background: #28C28E;
      border-radius: 50%;
    }
    .wz-ask-chat {
      display: flex; flex-direction: column; gap: 8px;
      min-height: 80px;
      max-height: 200px;
      overflow-y: auto;
      padding: 4px 2px;
    }
    .wz-ask-chat .wz-chat-bubble {
      max-width: 82%;
      padding: 8px 12px;
      font-size: 13.5px;
      border-radius: 14px;
      line-height: 1.45;
      animation: wz-ask-bubble-in .25s cubic-bezier(.2,.8,.2,1) both;
    }
    .wz-ask-chat .wz-chat-bubble.you {
      align-self: flex-end;
      background: rgba(255,102,1,0.12);
      color: var(--wz-ink);
      border: 1px solid rgba(255,102,1,0.18);
    }
    .wz-ask-chat .wz-chat-bubble.ai {
      align-self: flex-start;
      background: #fff;
      color: var(--wz-ink-2);
      border: 1px solid var(--wz-line);
    }
    @keyframes wz-ask-bubble-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .wz-ask-form {
      display: flex; gap: 8px;
      align-items: center;
    }
    .wz-ask-input {
      flex: 1;
      height: 42px;
      padding: 0 16px;
      border: 1px solid var(--wz-line);
      border-radius: 999px;
      font-family: inherit;
      font-size: 14px;
      color: var(--wz-ink);
      background: #fff;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .wz-ask-input:focus {
      border-color: var(--wz-orange);
      box-shadow: 0 0 0 3px rgba(255,102,1,0.12);
    }
    .wz-ask-submit {
      width: 42px; height: 42px;
      flex-shrink: 0;
      background: var(--wz-orange);
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: grid; place-items: center;
      transition: transform .15s ease, filter .15s ease;
    }
    .wz-ask-submit:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .wz-ask-submit:active { transform: translateY(0); }
    .wz-ask-suggest {
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .wz-ask-chip {
      padding: 6px 12px;
      background: var(--wz-card-tint);
      border: 1px solid var(--wz-line);
      color: var(--wz-ink-2);
      font-size: 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .wz-ask-chip:hover {
      background: rgba(255,102,1,0.08);
      border-color: rgba(255,102,1,0.20);
      color: var(--wz-orange);
    }

    /* -- Pomodoro live timer (Jetze-feedback v5 2026-05-18) -- */
    .wz-pomo {
      display: flex; flex-direction: column; align-items: center;
      padding: 14px 20px 20px;
      gap: 14px;
      width: 100%; max-width: 380px; margin: 0 auto;
    }
    .wz-pomo-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--wz-ink-3);
    }
    .wz-pomo-dot {
      width: 8px; height: 8px;
      background: var(--wz-orange);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(255,102,1,0.18);
      animation: wz-pomo-pulse 2.4s ease-in-out infinite;
    }
    @keyframes wz-pomo-pulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(255,102,1,0.18); }
      50%      { box-shadow: 0 0 0 7px rgba(255,102,1,0.08); }
    }
    .wz-pomo-ring {
      position: relative;
      width: 200px; height: 200px;
    }
    .wz-pomo-ring svg {
      width: 100%; height: 100%;
      filter: drop-shadow(0 4px 12px rgba(255,102,1,0.18));
    }
    #wzPomoProgress {
      transition: stroke-dashoffset .25s linear;
    }
    .wz-pomo-clock {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .wz-pomo-time {
      font-size: 36px; font-weight: 700;
      color: var(--wz-ink);
      letter-spacing: -0.01em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .wz-pomo-label {
      margin-top: 4px;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--wz-ink-3);
    }
    .wz-pomo-controls {
      display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    }
    .wz-pomo-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px;
      border: 1px solid var(--wz-line);
      background: #fff;
      color: var(--wz-ink-2);
      border-radius: 999px;
      font-size: 13px; font-weight: 600;
      cursor: pointer;
      transition: background .15s ease, transform .12s ease;
    }
    .wz-pomo-btn:hover { transform: translateY(-1px); background: var(--wz-card-tint); }
    .wz-pomo-btn-primary {
      background: var(--wz-orange);
      color: #fff;
      border-color: var(--wz-orange);
    }
    .wz-pomo-btn-primary:hover {
      background: #FF7F2A;
      border-color: #FF7F2A;
    }
    .wz-pomo-btn-ghost {
      background: transparent;
      border-color: transparent;
      color: var(--wz-ink-3);
    }
    .wz-pomo-btn-ghost:hover {
      background: rgba(255,107,64,0.10);
      color: #9c3712;
    }
    .wz-pomo-stats {
      display: flex; gap: 20px;
      padding: 12px 0;
      border-top: 1px solid var(--wz-line);
      border-bottom: 1px solid var(--wz-line);
      width: 100%;
      justify-content: center;
    }
    .wz-pomo-stat {
      display: flex; flex-direction: column; align-items: center;
      gap: 2px;
    }
    .wz-pomo-stat strong {
      font-size: 18px; font-weight: 700;
      color: var(--wz-ink);
    }
    .wz-pomo-stat span {
      font-size: 11px;
      color: var(--wz-ink-3);
    }
    .wz-pomo-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px;
      background: rgba(255,102,1,0.10);
      border: 1px solid rgba(255,102,1,0.20);
      color: var(--wz-orange);
      font-size: 13px; font-weight: 600;
      border-radius: 999px;
      text-decoration: none;
      transition: background .15s ease, transform .15s ease;
    }
    .wz-pomo-cta:hover {
      background: rgba(255,102,1,0.16);
      transform: translateY(-1px);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }