/* Landingspagina /probeer/: waar een beslisser na een telefoontje, een LinkedIn-bericht of de mail terechtkomt.
   Eén doel: zelf voelen hoe Claartje werkt en daarna een testcode of een demo vragen.
   De wereld: de nachtploeg. Navy met hi-vis oranje, de reflecterende band van het hesje, en het pad uit de app
   dat meeloopt terwijl je scrolt. De telefoon met de demo is het enige lichte vlak: zo ziet de app eruit. */

body.nacht {
  --bg:#0a1326; --bg2:#111d38; --kaart:#14223f; --peach:#1c2b4f; --ink:#f3f6fc; --muted:#a8b5d1; --line:#26385f;
  --orange:#f76925; --orange-dark:#c94d05; --gloed:#ff8a4d; --geel:#ffc21a; --mint:#35d38a; --zilver:#dfe6f2;
  background:
    radial-gradient(900px 600px at 82% 6%, rgba(247,105,37,.20), transparent 60%),
    radial-gradient(700px 520px at 6% 32%, rgba(47,134,235,.12), transparent 62%),
    linear-gradient(180deg, #0a1326 0%, #0c1730 40%, #0a1326 100%);
  background-color:#0a1326;
  overflow-x:hidden;
}
body.nacht header.site { position:relative; z-index:5; }
body.nacht .link { border-bottom-color:rgba(247,105,37,.6); }
body.nacht .link:hover { color:var(--gloed); }
body.nacht h1 span, body.nacht h2 span { color:var(--gloed); }
body.nacht .kicker { color:var(--gloed); }
body.nacht :focus-visible { outline-color:var(--geel); }

#nx-sterren { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.9; }
body.nacht .wrap { position:relative; z-index:1; }

/* ---------- Knoppen ---------- */
.nx-knop { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:17px 26px; border-radius:16px; font:inherit; font-weight:1000; font-size:17px; letter-spacing:.01em; text-decoration:none; border:0; cursor:pointer; color:#fff; background:linear-gradient(180deg,#ff7a33,#f25f18); box-shadow:0 5px 0 0 #b84605, 0 18px 40px -12px rgba(247,105,37,.7); transition:transform .12s, box-shadow .12s, filter .2s; position:relative; overflow:hidden; }
.nx-knop::after { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-18deg); animation:nx-glim 3.6s ease-in-out infinite; }
.nx-knop:hover { filter:brightness(1.06); transform:translateY(-1px); }
.nx-knop:active { transform:translateY(4px); box-shadow:0 1px 0 0 #b84605, 0 8px 20px -10px rgba(247,105,37,.7); }
.nx-knop:disabled { opacity:.6; cursor:not-allowed; }
.nx-spook { display:inline-flex; align-items:center; gap:8px; padding:15px 22px; border-radius:16px; font-weight:900; font-size:16px; text-decoration:none; color:var(--ink); border:1.5px solid var(--line); background:rgba(20,34,63,.6); backdrop-filter:blur(6px); transition:border-color .2s, transform .12s; }
.nx-spook:hover { border-color:#4a66a0; transform:translateY(-1px); }
@keyframes nx-glim { 0%, 55% { left:-60%; } 85%, 100% { left:130%; } }

/* ---------- Hero ---------- */
.nx-hero { display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center; padding:26px 0 56px; min-height:min(820px, calc(100vh - 90px)); }
.nx-etiket { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; color:#ffd9c4; background:rgba(247,105,37,.14); border:1px solid rgba(247,105,37,.4); padding:8px 14px; border-radius:999px; margin:0 0 22px; }
.nx-etiket i { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(53,211,138,.7); animation:nx-puls 2s infinite; }
@keyframes nx-puls { 70% { box-shadow:0 0 0 9px rgba(53,211,138,0); } 100% { box-shadow:0 0 0 0 rgba(53,211,138,0); } }
.nx-hero h1 { font-size:clamp(46px,6.6vw,92px); line-height:1.0; letter-spacing:-0.042em; margin:0 0 22px; }
.nx-hero h1 span { display:inline; background:linear-gradient(92deg,#ff8a4d 0%,#ffc21a 60%,#ff8a4d 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:nx-schuif 6s linear infinite; }
@keyframes nx-schuif { to { background-position:-200% 0; } }
.nx-lead { font-size:19px; line-height:1.65; color:var(--muted); margin:0 0 30px; max-width:31em; }
.nx-lead b { color:var(--ink); font-weight:900; }
.nx-acties { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0 0 18px; }
.nx-fijn { font-size:14px; color:var(--muted); margin:0; font-weight:700; }
.nx-binnen > * { opacity:0; transform:translateY(22px); animation:nx-op .8s cubic-bezier(.2,.8,.2,1) forwards; }
.nx-binnen > *:nth-child(2) { animation-delay:.08s; } .nx-binnen > *:nth-child(3) { animation-delay:.16s; }
.nx-binnen > *:nth-child(4) { animation-delay:.24s; } .nx-binnen > *:nth-child(5) { animation-delay:.32s; }
@keyframes nx-op { to { opacity:1; transform:none; } }

/* Het podium: de telefoon met de demo, met wat eromheen zweeft */
.nx-podium { position:relative; max-width:368px; margin:0 auto; width:100%; opacity:0; transform:translateY(30px) scale(.97); animation:nx-op .9s .2s cubic-bezier(.2,.8,.2,1) forwards; }
.nx-podium::before { content:""; position:absolute; inset:-70px -80px; background:radial-gradient(55% 50% at 50% 45%, rgba(247,105,37,.42), rgba(247,105,37,.08) 55%, transparent 72%); filter:blur(8px); z-index:0; pointer-events:none; animation:nx-adem 5s ease-in-out infinite; }
@keyframes nx-adem { 50% { opacity:.72; transform:scale(1.05); } }
.nx-zweef { position:absolute; z-index:3; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:16px; font-weight:1000; font-size:14px; color:var(--ink); background:rgba(20,34,63,.86); border:1px solid #33497a; backdrop-filter:blur(8px); box-shadow:0 18px 36px -18px rgba(0,0,0,.8); white-space:nowrap; animation:nx-dobber 5s ease-in-out infinite; }
.nx-zweef small { display:block; font-size:11px; font-weight:800; color:var(--muted); letter-spacing:.02em; }
/* Alle drie rechts van de telefoon: links staat de tekst, daar zouden ze eroverheen vallen. */
.nx-zweef.a { left:calc(100% - 30px); top:6%; } .nx-zweef.b { left:calc(100% - 12px); top:36%; animation-delay:-1.6s; } .nx-zweef.c { left:calc(100% - 34px); bottom:9%; animation-delay:-3.1s; }
.nx-zweef .rond { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:17px; background:#22335c; flex-shrink:0; }
.nx-zweef.a .rond { background:rgba(255,194,26,.18); } .nx-zweef.b .rond { background:rgba(247,105,37,.2); } .nx-zweef.c .rond { background:rgba(53,211,138,.18); }
@keyframes nx-dobber { 50% { transform:translateY(-12px); } }
.nx-taal { display:inline-block; min-width:5.6em; }
.nx-taal.wissel { animation:nx-wissel .45s ease; }
@keyframes nx-wissel { 0% { opacity:0; transform:translateY(8px); } 100% { opacity:1; transform:none; } }

/* ---------- De demo: de vraagkaart uit de app (licht, zoals de app zelf) ---------- */
.pb-tel { position:relative; z-index:1; width:100%; }
#pb-demo { min-height:610px; }
.pb-scherm { --bg2:#f6f7fb; --ink:#142538; --muted:#56657a; --line:#e2e6eb; --yellow:#ffc21a; --mint:#2fbf71; color:#142538; position:relative; z-index:1; background:#fff; border:10px solid #070d1c; outline:1.5px solid #3a4f80; border-radius:46px; box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 60px 120px -40px rgba(0,0,0,.9), 0 0 80px -20px rgba(247,105,37,.45); overflow:hidden; min-height:590px; display:flex; flex-direction:column; }
.pb-top { display:flex; align-items:center; gap:10px; padding:16px 16px 10px; }
.pb-balk { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pb-balk i { display:block; height:10px; border-radius:6px; background:#e6eaf0; overflow:hidden; position:relative; }
.pb-balk i::after { content:""; position:absolute; inset:0; background:var(--mint); border-radius:6px; transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.pb-balk i.vol::after { transform:scaleX(1); }
.pb-balk i.mis::after { background:#f2b8ba; transform:scaleX(1); }
.pb-xp { font-weight:1000; font-size:14px; color:#8a5a00; background:#fff4d1; border-radius:999px; padding:5px 11px; white-space:nowrap; font-variant-numeric:tabular-nums; transition:transform .25s; }
.pb-xp.plop { transform:scale(1.18); }
.pb-geluid { border:0; background:var(--bg2); width:36px; height:36px; border-radius:12px; font-size:17px; cursor:pointer; flex-shrink:0; }
.pb-geluid[aria-pressed="false"] { opacity:.55; }
.pb-wie { display:flex; align-items:flex-end; gap:8px; padding:4px 16px 0; }
.pb-wie .cj-mascot { width:92px; height:92px; flex-shrink:0; }
.pb-wie .cj-mascot svg { width:100%; height:100%; display:block; overflow:visible; }
.pb-zeg { position:relative; background:var(--bg2); border:2px solid var(--line); border-radius:16px; padding:10px 13px; font-weight:800; font-size:15px; line-height:1.4; margin-bottom:26px; min-height:44px; }
.pb-zeg::before { content:""; position:absolute; left:-8px; bottom:16px; width:12px; height:12px; background:var(--bg2); border-left:2px solid var(--line); border-bottom:2px solid var(--line); transform:rotate(45deg); }
.pb-vraag { flex:1; min-height:0; display:flex; flex-direction:column; animation:pb-in .35s cubic-bezier(.2,.8,.2,1) both; }
/* De vraag rolt (als hij niet past) binnen de telefoon; de knop Verder staat vast onderaan, zoals in de app. */
.pb-rol { flex:1; min-height:0; padding:6px 16px 6px; }
.pb-voet { padding:8px 16px 16px; }
.pb-voet:empty { padding:0 0 10px; }
@keyframes pb-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.pb-vraag h3 { font-size:19px; line-height:1.3; margin:6px 0 14px; border-radius:8px; transition:box-shadow .2s, background .2s; color:#142538; }
.pb-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:2px solid #d9dfe7; border-bottom-width:4px; border-radius:14px; padding:12px 14px; font:inherit; font-weight:800; font-size:15px; color:#142538; margin-bottom:10px; cursor:pointer; transition:transform .08s, border-color .15s, background .15s; }
/* Tijdens de vragen staat Claartje klein naast de vraag (zoals in de app); de ballon bovenaan is dan weg. */
.pb-scherm.klein .pb-wie { display:none; }
.pb-rij { display:flex; align-items:flex-start; gap:10px; margin:6px 0 14px; }
.pb-vraag .pb-rij h3 { margin:0; flex:1; padding-top:5px; }
.pb-plek { width:58px; height:58px; flex-shrink:0; }
.pb-plek .cj-mascot { width:58px; height:58px; }
.pb-plek .cj-mascot svg { width:100%; height:100%; display:block; overflow:visible; }
.pb-opt:hover { border-color:#b9c2ce; }
/* Demo: de examentekening boven de vraag, en borden als antwoord (drie tegels naast elkaar). */
.pb-tekening { margin:2px 0 10px; border-radius:14px; overflow:hidden; border:1.5px solid #d9dfe7; background:#eef1f5; }
.pb-tekening img { display:block; width:100%; height:auto; }
.pb-borden { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pb-opt.pb-bord { flex-direction:column; align-items:stretch; gap:6px; padding:8px 8px 10px; margin-bottom:10px; }
.pb-opt.pb-bord b { width:24px; height:24px; font-size:12px; }
.pb-opt.pb-bord span { display:block; }
.pb-opt.pb-bord svg { display:block; width:100%; height:auto; }
.pb-opt:active { transform:translateY(2px); border-bottom-width:2px; }
.pb-opt b { width:28px; height:28px; border-radius:9px; border:2px solid #d9dfe7; display:grid; place-items:center; font-size:13px; color:var(--muted); flex-shrink:0; }
.pb-opt[disabled] { cursor:default; }
.pb-opt.goed { border-color:#22a765; background:#e6f6ec; color:#136c3b; }
.pb-opt.goed b { background:#22a765; border-color:#22a765; color:#fff; }
.pb-opt.fout { border-color:#e5484d; background:#fdecec; color:#9b2226; animation:pb-schud .35s; }
.pb-opt.fout b { background:#e5484d; border-color:#e5484d; color:#fff; }
.pb-opt.dof { opacity:.55; }
@keyframes pb-schud { 20% { transform:translateX(-5px); } 40% { transform:translateX(5px); } 60% { transform:translateX(-3px); } 80% { transform:translateX(3px); } }
.pb-uitleg { border-radius:14px; padding:12px 14px; font-size:14px; line-height:1.5; font-weight:700; margin:2px 0 12px; animation:pb-in .3s both; }
.pb-uitleg.goed { background:#e6f6ec; color:#136c3b; }
.pb-uitleg.fout { background:#fdecec; color:#8a1f24; }
.pb-uitleg b { display:block; font-weight:1000; margin-bottom:2px; }
.pb-uitleg p { margin:0 0 6px; border-radius:8px; transition:box-shadow .2s, background .2s; }
.pb-uitleg p:last-child { margin-bottom:0; }
.pb-scherm .reading { box-shadow:0 0 0 3px var(--yellow) !important; }
.pb-scherm h3.reading, .pb-uitleg p.reading { background:rgba(255,194,26,.16); box-shadow:0 0 0 5px rgba(255,194,26,.16) !important; }
.pb-scherm .btn { background:#f76925; color:#fff !important; }
.pb-start { padding:10px 20px 24px; flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center; animation:pb-in .35s both; }
.pb-start p { margin:0 0 20px; color:var(--muted); font-size:15px; line-height:1.55; }
.pb-start .btn { width:100%; padding:16px; font-size:17px; }
.pb-verder { width:100%; padding:14px; font-size:16px; text-transform:uppercase; letter-spacing:.04em; }
.pb-klaar { padding:8px 20px 8px; text-align:center; flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; animation:pb-in .4s both; position:relative; }
.pb-klaar > .pb-doel { margin-top:auto; } .pb-klaar > .pb-score { margin-bottom:auto; } /* gecentreerd, zonder dat de bovenkant wegvalt als het niet past */
.pb-klaar h3 { font-size:25px; margin:6px 0 6px; color:#142538; }
.pb-klaar p { margin:0 0 16px; color:var(--muted); font-size:15px; }
.pb-score { display:flex; gap:10px; justify-content:center; margin:0 0 18px; }
.pb-score span { background:var(--bg2); border-radius:14px; padding:10px 14px; font-weight:1000; font-size:15px; min-width:104px; color:#142538; }
.pb-score span small { display:block; font-weight:800; color:var(--muted); font-size:12px; }
/* Einde van de demo: dagdoel, de show op het pad, en het laatste scherm. */
.pb-doel { width:100%; background:#fff; border:2px solid #e2e6eb; border-bottom-width:5px; border-radius:20px; padding:18px 14px 16px; margin:0 0 14px; position:relative; z-index:1; }
.pb-doel h3 { margin:10px 0 2px; font-size:24px; }
.pb-doel p { margin:0 0 12px; font-weight:800; }
.pb-ring { position:relative; width:104px; height:104px; margin:0 auto; }
.pb-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.pb-ring circle { fill:none; stroke-width:12; stroke-linecap:round; }
.pb-ring .rail { stroke:#eef1f5; }
.pb-ring .vul { stroke:url(#pb-verloop); stroke-dasharray:314.2; stroke-dashoffset:314.2; animation:pb-ring 1.1s .25s cubic-bezier(.2,.8,.2,1) forwards; }
.pb-ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:40px; animation:pb-plop .5s 1.1s both; }
@keyframes pb-ring { to { stroke-dashoffset:0; } }
@keyframes pb-plop { 0% { transform:scale(.4); opacity:0; } 70% { transform:scale(1.18); opacity:1; } 100% { transform:none; opacity:1; } }
.pb-week { display:flex; justify-content:center; gap:6px; }
.pb-week i { font-style:normal; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:1000; color:#8794a6; background:#eef1f5; }
.pb-week i.vol { background:linear-gradient(180deg,#ffc21a,#f76925); color:#fff; box-shadow:0 3px 0 0 #c94d05; animation:pb-plop .45s 1.3s both; }
.pb-scherm.film .pb-top, .pb-scherm.film .pb-wie { display:none; }
.pb-scherm.film { min-height:0; }
.pb-film { position:relative; overflow:hidden; background:#f6f7fb; cursor:pointer; animation:pb-in .35s both; }
/* Het pad uit de app, getekend op 390 x 844 en geschaald naar de telefoon. De show erop speelt echt (probeer.js),
   met de animaties uit cursus-app/src/app/globals.css ("Verover-show op het pad"). */
.pp { position:absolute; left:0; top:0; width:390px; height:844px; transform-origin:0 0; color:#142538; font-weight:800; user-select:none; -webkit-user-select:none; }
.pp { overflow:hidden; }
.pp-rol { position:absolute; left:0; top:0; width:390px; height:844px; z-index:1; }
.pp-rol.boven { z-index:7; pointer-events:none; height:0; }
.pp-rail { position:absolute; left:191px; top:0; width:8px; height:626px; background:#dfe4ec; border-radius:4px; }
.pp-n { position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; }
.pp-n.groot { width:72px; height:72px; margin:-36px 0 0 -36px; }
.pp-node { --kleur:#e9edf2; --rand:#cfd6df; position:relative; width:100%; height:100%; box-sizing:border-box; border-radius:50%; background:var(--kleur); border-bottom:6px solid var(--rand); box-shadow:0 8px 12px -6px rgba(20,37,56,.3); transform-origin:50% 100%; transition:border-color .3s, box-shadow .3s; }
.pp-in { position:absolute; inset:0 0 -6px 0; border-radius:50%; overflow:hidden; display:grid; place-items:center; padding-bottom:6px; }
.pp-in::before { content:""; position:absolute; top:9px; left:50%; width:28px; height:8px; margin-left:-14px; border-radius:8px; background:rgba(255,255,255,.3); z-index:2; }
.pp-node svg { width:30px; height:30px; position:relative; z-index:1; display:block; }
.pp-ic { position:relative; z-index:1; font-size:25px; line-height:1; }
.pp-n.groot .pp-ic { font-size:30px; }
.pp-node.groen { --kleur:#22a765; --rand:#1a8550; }
.pp-node.nu { --kleur:#f76925; --rand:#d94b0a; box-shadow:0 0 0 4px rgba(255,194,26,.65), 0 8px 12px -6px rgba(20,37,56,.3); }
.pp-node.dicht .pp-ic, .pp-node.slot .pp-ic { filter:grayscale(1); opacity:.5; }
.pp-node.slot { opacity:.85; }
.pp-vul { position:absolute; inset:0; background:#22a765; transform:translateY(108%); }
.pp-node.vult .pp-vul { animation:pp-vul 560ms cubic-bezier(.45,0,.2,1) forwards, pp-golf 360ms ease-in-out infinite; }
.pp-kleur { position:absolute; inset:0; background:#f76925; clip-path:circle(0% at 50% 50%); }
.pp-node.open { --rand:#d94b0a; }
.pp-node.open .pp-kleur { animation:pp-open 480ms cubic-bezier(.3,.7,.2,1) both; }
.pp-node.open .pp-ic { filter:none; opacity:1; transition:opacity .3s; }
.pp-node.ring { box-shadow:0 0 0 4px rgba(255,194,26,.65), 0 8px 12px -6px rgba(20,37,56,.3); }
.pp-node.ring::after { content:""; position:absolute; inset:0 0 -6px 0; border-radius:50%; background:rgba(247,105,37,.4); z-index:-1; animation:pp-lok 1.7s cubic-bezier(0,0,.2,1) infinite; }
.pp-node.stuit { animation:pp-stuit 380ms ease-out; }
.pp-node.laad { animation:pp-laad 280ms cubic-bezier(.3,.6,.4,1) forwards; }
.pp-node.veer { animation:pp-veer 560ms cubic-bezier(.2,.9,.3,1.2); }
.pp-pop { display:grid; place-items:center; animation:pp-pop 440ms cubic-bezier(.2,.9,.3,1.3) both; }
.pp-label { position:absolute; left:195px; transform:translateX(-50%); font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#1f6b3f; background:#e6f6ec; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.pp-dag { position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:10px; transform:translateY(-50%); }
.pp-dag::before, .pp-dag::after { content:""; width:40px; height:2px; background:#dfe4ec; border-radius:2px; }
.pp-dag span { background:#f76925; color:#fff; border:2px solid #d94b0a; border-radius:999px; padding:3px 13px; font-size:11.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.pp-dag.vlag span { background:#22a765; border-color:#1a8550; padding:4px 14px; }
.pp-start { position:absolute; left:137px; top:461px; translate:-50% -50%; background:#f76925; color:#fff; border:2px solid #d94b0a; border-radius:11px; padding:3px 11px; font-size:12px; font-weight:1000; letter-spacing:.05em; text-transform:uppercase; z-index:3; animation:pp-pop 440ms cubic-bezier(.2,.9,.3,1.3) both; }
.pp-start::after { content:""; position:absolute; left:50%; bottom:-7px; width:10px; height:10px; margin-left:-5px; background:#f76925; border-right:2px solid #d94b0a; border-bottom:2px solid #d94b0a; transform:rotate(45deg); }
.pp-start[hidden] { display:none; }
.pp-hoofdstuk { position:absolute; left:32px; right:32px; top:656px; height:74px; box-sizing:border-box; border-radius:16px; background:linear-gradient(180deg,#f0646b,#e5484d); border:2px solid #c9363b; color:#fff; padding:13px 18px; box-shadow:0 10px 18px -10px rgba(201,54,59,.6); }
.pp-hoofdstuk small { display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; font-weight:900; }
.pp-hoofdstuk b { display:block; font-size:18px; font-weight:1000; line-height:1.25; }
.pp-nav { position:absolute; left:0; right:0; bottom:0; height:70px; background:#fff; border-top:1.5px solid #e2e6eb; display:flex; justify-content:space-around; align-items:center; z-index:4; }
.pp-nav span { display:grid; justify-items:center; gap:1px; font-size:20px; line-height:1.2; padding:6px 24px; border-radius:14px; border:2px solid transparent; filter:grayscale(1); opacity:.55; }
.pp-nav span.op { filter:none; opacity:1; border-color:#2f86eb; background:#eaf3fe; }
.pp-nav b { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#142538; font-weight:900; }
.pp-spot { position:absolute; inset:0; z-index:5; animation:pp-spot-in 380ms ease-out both; transition:opacity 420ms ease; }
.pp-spot[hidden] { display:none; }
.pp-fx { position:absolute; left:0; top:0; width:0; height:0; z-index:7; pointer-events:none; }
.pp-cla { position:absolute; left:0; top:0; width:64px; height:64px; z-index:8; pointer-events:none; filter:drop-shadow(0 8px 8px rgba(20,37,56,.28)); will-change:transform; }
.pp-rot { transform-origin:50% 60%; }
.pp-sq { transform-origin:50% 100%; line-height:0; }
.pp-cla .cj-mascot { width:64px; height:64px; }
.pp-cla .cj-mascot svg, .pp-cla .cj-mascot img { width:100%; height:100%; display:block; overflow:visible; }
.pp-cla.rust .pp-rot { animation:pp-adem 2.6s ease-in-out infinite; }
.pp-ster { position:absolute; font-size:18px; line-height:1; animation:pp-ster 780ms cubic-bezier(.15,.8,.3,1) forwards; }
.pp-schok { position:absolute; width:96px; height:96px; box-sizing:border-box; border-radius:50%; border:4px solid rgba(255,194,26,.8); animation:pp-schok 760ms cubic-bezier(.1,.7,.3,1) forwards; }
.pp-straal { position:absolute; width:40px; height:170px; border-radius:999px; background:linear-gradient(to top, rgba(61,220,151,.95), rgba(124,240,189,.6) 45%, rgba(124,240,189,0)); filter:blur(1px); transform-origin:50% 100%; animation:pp-straal 560ms cubic-bezier(.2,.8,.3,1) forwards; }
.pp-vonk { position:absolute; width:9px; height:9px; border-radius:50%; background:#ffc21a; color:#ffc21a; box-shadow:0 0 10px currentColor; animation:pp-vonk 660ms ease-out forwards; }
.pp-flits { position:absolute; left:0; top:0; width:390px; height:844px; background:rgba(255,255,255,.35); animation:pp-flits 220ms ease-out forwards; }
.pp-ring { position:absolute; width:108px; height:108px; animation:pp-leven 1500ms ease-in forwards; }
.pp-ring svg { display:block; overflow:visible; }
.pp-teken { stroke-dasharray:100; stroke-dashoffset:100; animation:pp-teken 640ms cubic-bezier(.55,0,.25,1) forwards; filter:drop-shadow(0 0 5px rgba(255,194,26,.9)); }
.pp-kop { transform-box:view-box; transform-origin:50% 50%; animation:pp-kop 640ms cubic-bezier(.55,0,.25,1) forwards; filter:drop-shadow(0 0 6px #ffc21a); }
.pp-ring i { position:absolute; left:50%; top:50%; width:88px; height:88px; box-sizing:border-box; border-radius:50%; border:4px solid #ffc21a; animation:pp-ringflits 560ms ease-out 600ms both; }
.pp-titel { position:absolute; translate:-50% 0; width:max-content; }
.pp-titel b { display:block; background:#ffc21a; border:2px solid #e0a100; color:#142538; border-radius:999px; padding:8px 20px; font-size:16px; font-weight:1000; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 14px 28px -10px rgba(0,0,0,.5); animation:pp-titel 2000ms cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes pp-stuit { 0% { transform:scale(1,1); } 30% { transform:scale(1.12,.86); } 62% { transform:scale(.95,1.06); } 100% { transform:scale(1,1); } }
@keyframes pp-laad { from { transform:scale(1,1); filter:drop-shadow(0 0 0 rgba(61,220,151,0)); } to { transform:scale(1.14,.8); filter:drop-shadow(0 0 16px rgba(61,220,151,.95)); } }
@keyframes pp-veer { 0% { transform:scale(1.14,.8); filter:drop-shadow(0 0 16px rgba(61,220,151,.95)); } 28% { transform:scale(.9,1.18); } 58% { transform:scale(1.05,.95); } 100% { transform:scale(1,1); filter:drop-shadow(0 0 0 rgba(61,220,151,0)); } }
@keyframes pp-vul { from { transform:translateY(108%); } to { transform:translateY(-6%); } }
@keyframes pp-golf { 0%, 100% { border-radius:46% 40% 0 0 / 24% 30% 0 0; } 50% { border-radius:38% 48% 0 0 / 32% 22% 0 0; } }
@keyframes pp-pop { 0% { transform:scale(0) rotate(-35deg); opacity:0; } 60% { transform:scale(1.4) rotate(8deg); opacity:1; } 100% { transform:scale(1) rotate(0); opacity:1; } }
@keyframes pp-open { from { clip-path:circle(0% at 50% 50%); } to { clip-path:circle(75% at 50% 50%); } }
@keyframes pp-lok { 0% { transform:scale(1); opacity:.6; } 70%, 100% { transform:scale(1.5); opacity:0; } }
@keyframes pp-teken { to { stroke-dashoffset:0; } }
@keyframes pp-kop { 0% { transform:rotate(0deg); opacity:1; } 90% { opacity:1; } 100% { transform:rotate(360deg); opacity:0; } }
@keyframes pp-ringflits { 0% { transform:translate(-50%,-50%) scale(.9); opacity:0; } 25% { opacity:.85; } 100% { transform:translate(-50%,-50%) scale(1.8); opacity:0; } }
@keyframes pp-straal { 0% { transform:scaleY(0); opacity:1; } 22% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1.1); opacity:0; } }
@keyframes pp-ster { 0% { transform:translate(-50%,-50%) scale(.3) rotate(0deg); opacity:1; } 100% { transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(160deg); opacity:0; } }
@keyframes pp-schok { 0% { transform:translate(-50%,-50%) scale(.3); opacity:.9; } 100% { transform:translate(-50%,-50%) scale(3.4); opacity:0; } }
@keyframes pp-vonk { 0% { transform:translate(-50%,-50%) scale(1); opacity:.95; } 100% { transform:translate(-50%,-50%) scale(.15); opacity:0; } }
@keyframes pp-spot-in { from { opacity:0; } to { opacity:1; } }
@keyframes pp-leven { 0%, 80% { opacity:1; } 100% { opacity:0; } }
@keyframes pp-titel { 0% { transform:translateY(8px) scale(.6); opacity:0; } 12% { transform:translateY(-2px) scale(1.08); opacity:1; } 20% { transform:translateY(0) scale(1); } 85% { transform:translateY(0) scale(1); opacity:1; } 100% { transform:translateY(-10px) scale(.96); opacity:0; } }
@keyframes pp-flits { 0% { opacity:0; } 15% { opacity:.95; } 100% { opacity:0; } }
@keyframes pp-adem { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
/* Startscherm: het pad, met de startknoppen als zwevende kaart eroverheen. De begroeting komt pas als de demo begint. */
.pb-film.start { cursor:default; }
.pb-film.start #pp-a, .pb-film.start .pp-start { cursor:pointer; }
.pb-startkaart { position:absolute; left:16px; right:16px; bottom:13%; z-index:9; background:#fff; border-radius:22px; padding:18px 16px 14px; text-align:center; box-shadow:0 26px 60px -18px rgba(10,19,38,.6), 0 0 0 1px rgba(20,37,56,.06); animation:pb-in .45s cubic-bezier(.2,.8,.2,1) both; transition:opacity .25s, transform .25s; }
/* Zolang de startkaart er staat, wijkt het hoofdstukblok eronder: anders steekt er een randje onderuit. */
.pp-hoofdstuk { transition:opacity .3s; }
.pb-film.start:has(.pb-startkaart:not(.weg)) .pp-hoofdstuk { opacity:0; }
.pb-startkaart.weg { opacity:0; transform:translateY(10px) scale(.97); pointer-events:none; }
.pb-startkaart p { margin:0 0 12px; color:var(--muted); font-size:14.5px; line-height:1.45; }
.pb-startkaart .btn { width:100%; padding:14px; font-size:16px; }
.pb-startkaart .pb-opnieuw { margin-top:10px; }
.pb-groet { position:absolute; left:14px; right:14px; top:14px; z-index:9; background:#fff; border:2px solid #e2e6eb; border-radius:18px; padding:12px 15px; font-weight:800; font-size:15px; line-height:1.42; color:#142538; box-shadow:0 14px 30px -18px rgba(20,37,56,.45); transition:box-shadow .2s; animation:pb-neer .5s cubic-bezier(.2,.8,.2,1) both; }
.pb-door { display:block; margin:8px 0 0 auto; padding:0; background:none; border:0; font:inherit; font-weight:900; font-size:13.5px; color:#b23c05; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@keyframes pb-neer { from { transform:translateY(-130%); opacity:0; } to { transform:none; opacity:1; } }
.pb-einde { position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:26px 26px 0 0; padding:22px 20px 20px; text-align:center; box-shadow:0 -22px 50px -18px rgba(10,19,38,.55); animation:pb-op .5s cubic-bezier(.2,.8,.2,1) both; }
.pb-einde[hidden] { display:none; }
.pb-einde h3 { margin:0 0 6px; font-size:23px; color:#142538; }
.pb-einde p { margin:0 0 16px; color:var(--muted); font-size:14.5px; line-height:1.5; }
.pb-einde .btn { width:100%; padding:14px; font-size:16px; }
@keyframes pb-op { from { transform:translateY(100%); } to { transform:none; } }
.pb-opnieuw { background:none; border:0; font:inherit; font-weight:900; color:var(--muted); margin-top:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.pb-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.pb-confetti i { position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:pb-val 1.9s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes pb-val { to { transform:translateY(640px) rotate(540deg); opacity:.9; } }

/* ---------- Tellers ---------- */
.nx-tellers { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0 0 110px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg, rgba(20,34,63,.75), rgba(14,25,48,.75)); backdrop-filter:blur(8px); overflow:hidden; }
.nx-tellers div { padding:26px 28px; border-left:1px solid var(--line); }
.nx-tellers div:first-child { border-left:0; }
.nx-tellers b { display:block; font-size:clamp(30px,3.4vw,44px); font-weight:1000; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; line-height:1.05; color:#fff; }
.nx-tellers b em { font-style:normal; color:var(--gloed); }
.nx-tellers div > span { color:var(--muted); font-size:14px; font-weight:800; display:block; margin-top:6px; }
.nx-tellers b small { font-size:.5em; font-weight:900; color:var(--muted); letter-spacing:0; margin:0 .25em; }

/* ---------- De reflecterende band van het hesje ---------- */
.nx-band { height:12px; border-radius:8px; margin:0 0 96px; background:linear-gradient(90deg,#f76925 0 18%, #c9d2e0 18% 22%, #f4f7fb 22% 26%, #c9d2e0 26% 30%, #f76925 30% 70%, #c9d2e0 70% 74%, #f4f7fb 74% 78%, #c9d2e0 78% 82%, #f76925 82% 100%); position:relative; overflow:hidden; opacity:.9; }
.nx-band::after { content:""; position:absolute; top:0; bottom:0; width:22%; left:-30%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); animation:nx-glim 5s ease-in-out infinite; }

/* ---------- Koppen ---------- */
.nx-kop { max-width:760px; margin:0 0 46px; }
.nx-kop.midden { margin-left:auto; margin-right:auto; text-align:center; }
.nx-kop h2 { font-size:clamp(32px,4.2vw,54px); letter-spacing:-0.04em; line-height:1.04; margin:0 0 16px; color:#fff; }
.nx-kop p { color:var(--muted); font-size:18px; line-height:1.65; margin:0; }
.nx-blok { margin:0 0 120px; }

/* ---------- Het pad: zo gaat een avond met Claartje ---------- */
.nx-pad { position:relative; padding:10px 0 10px; }
.nx-spoor { position:absolute; left:50%; top:0; bottom:0; width:6px; margin-left:-3px; border-radius:6px; background:#1b2a4d; }
.nx-spoor i { position:absolute; inset:0; border-radius:6px; background:linear-gradient(180deg,#ffc21a,#f76925 40%,#35d38a); transform-origin:top; transform:scaleY(0); will-change:transform; box-shadow:0 0 22px rgba(247,105,37,.8); }
.nx-loper { position:absolute; left:50%; top:0; width:64px; height:64px; margin:-32px 0 0 -32px; z-index:4; will-change:transform; pointer-events:none; filter:drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.nx-loper img { width:100%; height:100%; display:block; }
.nx-loper.hup img { animation:nx-hup .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes nx-hup { 30% { transform:translateY(-18px) scale(1.08) rotate(-6deg); } 60% { transform:translateY(0) scale(.94,1.06); } }
.nx-stap { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:110px; align-items:center; padding:38px 0; }
.nx-stap > .nx-knoop { position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:#1b2a4d; border:4px solid #0a1326; box-shadow:0 0 0 2px #33497a; z-index:2; transition:background .4s, box-shadow .4s, transform .4s cubic-bezier(.3,1.6,.5,1); display:grid; place-items:center; color:transparent; font-size:13px; font-weight:1000; }
.nx-stap.aan > .nx-knoop { background:var(--mint); box-shadow:0 0 0 2px #35d38a, 0 0 24px rgba(53,211,138,.8); transform:scale(1.18); color:#063; }
.nx-stap:nth-child(even) .nx-tekst { order:2; }
.nx-tijd { display:inline-block; font-size:13px; font-weight:1000; letter-spacing:.1em; text-transform:uppercase; color:var(--geel); margin:0 0 10px; }
.nx-tekst h3 { font-size:clamp(24px,2.6vw,34px); letter-spacing:-0.03em; line-height:1.1; margin:0 0 12px; color:#fff; }
.nx-tekst p { color:var(--muted); font-size:17px; line-height:1.65; margin:0; max-width:26em; }
.nx-stap .nx-tekst, .nx-stap .nx-toneel { opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.nx-stap.zicht .nx-tekst, .nx-stap.zicht .nx-toneel { opacity:1; transform:none; }
.nx-stap.zicht .nx-toneel { transition-delay:.12s; }

/* Toneel: kleine stukjes app die bewegen zodra ze in beeld komen */
.nx-toneel { position:relative; min-height:230px; display:grid; place-items:center; }
.nx-kaart { width:100%; max-width:380px; background:linear-gradient(180deg,#182847,#12203c); border:1px solid #2c4170; border-radius:24px; padding:20px; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); position:relative; }
.nx-licht { background:#fff; color:#142538; border-color:#e2e6eb; }

/* 1 · het seintje */
.nx-melding { display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.96); color:#142538; border-radius:20px; padding:14px 16px; box-shadow:0 30px 60px -30px rgba(0,0,0,.9); max-width:360px; width:100%; transform:translateY(-26px) scale(.94); opacity:0; }
.nx-stap.zicht .nx-melding { animation:nx-val .7s .25s cubic-bezier(.3,1.5,.5,1) forwards, nx-tril 2.8s 1.4s ease-in-out infinite; }
.nx-melding img { width:44px; height:44px; border-radius:12px; background:#fff2e8; padding:4px; flex-shrink:0; }
.nx-melding b { display:block; font-size:14px; font-weight:1000; }
.nx-melding small { float:right; color:#8a96a8; font-weight:800; font-size:12px; }
.nx-melding span { display:block; font-size:14.5px; line-height:1.4; font-weight:700; color:#33435a; }
@keyframes nx-val { to { transform:none; opacity:1; } }
@keyframes nx-tril { 0%, 86%, 100% { transform:rotate(0); } 89% { transform:rotate(-1.4deg); } 92% { transform:rotate(1.4deg); } 95% { transform:rotate(-.8deg); } }

/* 2 · voorlezen in vijf talen */
.nx-lees .rij { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.nx-lees .rij img { width:46px; height:46px; }
.nx-golf { display:flex; align-items:center; gap:3px; height:26px; }
.nx-golf i { width:4px; border-radius:3px; background:var(--gloed); height:30%; animation:nx-golf 1s ease-in-out infinite; }
.nx-golf i:nth-child(2) { animation-delay:.1s; } .nx-golf i:nth-child(3) { animation-delay:.2s; } .nx-golf i:nth-child(4) { animation-delay:.3s; } .nx-golf i:nth-child(5) { animation-delay:.4s; } .nx-golf i:nth-child(6) { animation-delay:.5s; }
@keyframes nx-golf { 50% { height:100%; } }
.nx-zin { font-size:19px; font-weight:900; line-height:1.45; color:#fff; margin:0 0 16px; min-height:3.2em; }
.nx-zin span { border-radius:6px; padding:1px 2px; transition:background .25s, color .25s; }
.nx-zin span.nu { background:var(--geel); color:#142538; }
.nx-talen { display:flex; flex-wrap:wrap; gap:8px; }
.nx-talen button { border:1.5px solid #33497a; background:#0f1c36; color:var(--muted); font:inherit; font-weight:900; font-size:13.5px; padding:7px 12px; border-radius:999px; cursor:pointer; transition:all .2s; }
.nx-talen button.op { background:var(--orange); border-color:var(--orange); color:#fff; transform:scale(1.05); }

/* 3 · goed en fout */
.nx-duo { display:grid; gap:14px; width:100%; max-width:380px; }
.nx-antw { display:flex; align-items:center; gap:12px; border-radius:16px; padding:14px 16px; font-weight:900; font-size:15.5px; position:relative; border:2px solid; }
.nx-antw b { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:14px; flex-shrink:0; color:#fff; }
.nx-antw.goed { padding-right:96px; background:#0f2b22; border-color:#1f7d55; color:#b8f3d6; } .nx-antw.goed b { background:#22a765; }
.nx-antw.fout { background:#2e1418; border-color:#8a2b30; color:#ffc9cb; } .nx-antw.fout b { background:#e5484d; }
.nx-xp { position:absolute; right:14px; top:50%; margin-top:-16px; font-weight:1000; font-size:15px; color:#142538; background:var(--geel); border-radius:999px; padding:5px 11px; opacity:0; }
.nx-stap.zicht .nx-antw.goed { animation:nx-plop .5s .3s cubic-bezier(.3,1.6,.5,1) both; }
.nx-stap.zicht .nx-xp { animation:nx-xp 2.6s .7s ease-out infinite; }
.nx-stap.zicht .nx-antw.fout { animation:pb-schud .4s 1.1s both; }
.nx-waarom { background:#14223f; border:1px dashed #3b5391; border-radius:16px; padding:13px 16px; font-size:14.5px; line-height:1.5; color:#d5def0; font-weight:700; opacity:0; transform:translateY(10px); }
.nx-waarom b { color:#fff; }
.nx-stap.zicht .nx-waarom { animation:nx-val .6s 1.5s ease forwards; }
@keyframes nx-plop { 0% { transform:scale(.9); opacity:0; } 100% { transform:none; opacity:1; } }
@keyframes nx-xp { 0% { opacity:0; transform:translateY(8px) scale(.8); } 12% { opacity:1; transform:translateY(0) scale(1.1); } 22% { transform:scale(1); } 70% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-22px); } }
.nx-noot { position:absolute; font-size:22px; opacity:0; pointer-events:none; }
.nx-stap.zicht .nx-noot { animation:nx-noot 2.6s .7s ease-out infinite; }
.nx-noot.n2 { animation-delay:1.1s !important; left:62% !important; }
@keyframes nx-noot { 0% { opacity:0; transform:translate(0,0) rotate(0); } 15% { opacity:1; } 100% { opacity:0; transform:translate(18px,-70px) rotate(24deg); } }

/* 4 · dagdoel en reeks */
.nx-doel { display:flex; align-items:center; gap:20px; }
.nx-kaart.nx-doel { max-width:440px; }
.nx-doel > div:last-child { min-width:0; }
.nx-ring { width:112px; height:112px; flex-shrink:0; position:relative; }
.nx-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.nx-ring circle { fill:none; stroke-width:12; stroke-linecap:round; }
.nx-ring .rail { stroke:#22335c; }
.nx-ring .vul { stroke:url(#nx-verloop); stroke-dasharray:314; stroke-dashoffset:314; }
.nx-stap.zicht .nx-ring .vul { animation:nx-ring 1.6s .3s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes nx-ring { to { stroke-dashoffset:0; } }
.nx-ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:34px; }
.nx-doel h4 { margin:0 0 4px; font-size:20px; font-weight:1000; color:#fff; }
.nx-doel p { margin:0 0 12px; font-size:14.5px; color:var(--muted); font-weight:700; }
.nx-week { display:flex; gap:6px; flex-wrap:wrap; }
.nx-week i { width:26px; height:26px; border-radius:9px; background:#22335c; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:1000; color:#5d73a8; transform:scale(.8); opacity:.5; }
.nx-stap.zicht .nx-week i.vol { animation:nx-dag .4s cubic-bezier(.3,1.6,.5,1) forwards; background:var(--geel); color:#142538; }
.nx-week i:nth-child(1) { animation-delay:.5s !important; } .nx-week i:nth-child(2) { animation-delay:.65s !important; } .nx-week i:nth-child(3) { animation-delay:.8s !important; } .nx-week i:nth-child(4) { animation-delay:.95s !important; } .nx-week i:nth-child(5) { animation-delay:1.1s !important; }
@keyframes nx-dag { to { transform:scale(1); opacity:1; } }

/* 5 · het plan naar de examendag */
.nx-plan h4 { margin:0 0 4px; font-size:16px; font-weight:1000; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.nx-plan h4 span { font-size:12px; font-weight:1000; letter-spacing:.08em; text-transform:uppercase; color:#063; background:var(--mint); border-radius:999px; padding:4px 10px; }
.nx-plan p { margin:0 0 14px; font-size:14px; color:var(--muted); font-weight:700; }
.nx-dagen { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.nx-dagen i { aspect-ratio:1; border-radius:10px; background:#22335c; display:grid; place-items:center; font-style:normal; font-size:13px; font-weight:1000; color:transparent; transition:background .3s; }
.nx-stap.zicht .nx-dagen i { animation:nx-vink .35s ease forwards; animation-delay:calc(var(--n) * 110ms + 300ms); }
.nx-dagen i.examen { background:linear-gradient(180deg,#ff7a33,#f25f18); color:#fff !important; font-size:16px; box-shadow:0 0 22px rgba(247,105,37,.7); animation:none !important; }
@keyframes nx-vink { to { background:#1d6b4a; color:#b8f3d6; } }

/* ---------- Jij ziet wie op schema ligt ---------- */
.nx-jij { display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:center; }
.nx-jij ul { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:16px; }
.nx-jij li { padding-left:36px; position:relative; color:var(--muted); font-size:16px; line-height:1.55; }
.nx-jij li::before { content:"✓"; position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:8px; background:rgba(53,211,138,.16); color:var(--mint); font-weight:1000; font-size:13px; display:grid; place-items:center; }
.nx-jij li b { display:block; color:#fff; font-weight:900; }
.nx-portaal { background:#fff; color:#142538; border-radius:26px; padding:22px; box-shadow:0 60px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06); transform:perspective(1400px) rotateY(-7deg) rotateX(3deg); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.nx-portaal:hover { transform:none; }
.nx-portaal header { display:flex; justify-content:space-between; align-items:center; margin:0 0 14px; font-weight:1000; font-size:16px; }
.nx-portaal header span { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8a96a8; border:1.5px solid #e2e6eb; border-radius:8px; padding:4px 8px; }
.nx-rij { display:grid; grid-template-columns:1.1fr 1.4fr auto; gap:14px; align-items:center; padding:13px 0; border-top:1px solid #edf0f4; }
.nx-rij b { display:block; font-size:15px; font-weight:900; } .nx-rij small { color:#7c8798; font-weight:700; font-size:12.5px; }
.nx-staaf { height:10px; border-radius:6px; background:#edf0f4; overflow:hidden; }
.nx-staaf i { display:block; height:100%; border-radius:6px; width:0; transition:width 1.4s cubic-bezier(.2,.8,.2,1); }
.nx-staaf i.ok { background:#22a765; } .nx-staaf i.on { background:#2f86eb; } .nx-staaf i.late { background:#f0a020; }
.zicht .nx-staaf i { width:var(--w); }
.nx-chip { font-size:12px; font-weight:1000; border-radius:999px; padding:5px 10px; white-space:nowrap; }
.nx-chip.ok { background:#e6f6ec; color:#136c3b; } .nx-chip.on { background:#e8f1fd; color:#1b5fb4; } .nx-chip.late { background:#fff1d6; color:#8a5a00; }
.nx-vangnet { margin:18px 0 0; display:flex; gap:14px; align-items:center; background:linear-gradient(180deg,#fff7ef,#fff2e8); border:1.5px solid #ffd9c2; border-radius:18px; padding:14px 16px; font-size:14.5px; font-weight:800; color:#5a3a22; line-height:1.45; }
.nx-vangnet span { font-size:26px; }

/* ---------- Geen toeval ---------- */
.nx-bewijs { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.nx-bewijs article { background:linear-gradient(180deg, rgba(24,40,71,.9), rgba(16,28,54,.9)); border:1px solid #2c4170; border-radius:22px; padding:24px 22px; position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.nx-bewijs article:hover { transform:translateY(-6px); border-color:#4a66a0; }
.nx-bewijs article::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#f76925,#ffc21a); transform:scaleX(0); transform-origin:left; transition:transform .8s .2s cubic-bezier(.2,.8,.2,1); }
.nx-bewijs article.zicht::before { transform:scaleX(1); }
.nx-bewijs .ic { font-size:30px; display:block; margin:0 0 14px; }
.nx-bewijs h3 { font-size:18.5px; line-height:1.2; margin:0 0 8px; color:#fff; }
.nx-bewijs p { margin:0 0 14px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.nx-bewijs cite { display:block; font-style:normal; font-size:12px; font-weight:800; color:#7f90b8; line-height:1.4; }
.nx-bewijs cite a { color:inherit; }

/* ---------- Kijk binnen: kale schermen uit de app, elk in een telefoon ---------- */
.nx-schermen { display:grid; grid-template-columns:repeat(4,1fr); gap:44px 32px; align-items:start; max-width:1120px; margin:0 auto; }
.nx-schermen figure { margin:0; text-align:center; }
.nx-schermen figure:nth-child(even) { margin-top:40px; }
.nx-toestel picture { display:block; }
.nx-toestel { aspect-ratio:340/736; }
.nx-toestel img { height:100%; object-fit:cover; object-position:top; }
.nx-toestel { border:8px solid #070d1c; outline:1.5px solid #3a4f80; border-radius:34px; overflow:hidden; background:#fff; box-shadow:0 50px 90px -40px rgba(0,0,0,.95), 0 0 60px -26px rgba(247,105,37,.5); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.nx-toestel img { width:100%; height:auto; display:block; }
.nx-schermen figure:hover .nx-toestel { transform:translateY(-10px) rotate(-1.2deg); box-shadow:0 60px 100px -40px rgba(0,0,0,.95), 0 0 80px -20px rgba(247,105,37,.75); }
.nx-schermen figcaption { margin-top:16px; font-size:14px; font-weight:900; color:var(--muted); }

/* ---------- Prijs ---------- */
.nx-prijs { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.nx-prijs article { border-radius:26px; padding:34px; border:1px solid #2c4170; background:linear-gradient(180deg, rgba(24,40,71,.9), rgba(16,28,54,.9)); }
.nx-prijs article.warm { background:linear-gradient(160deg,#ff7a33,#e9540f); border-color:#ff9a5c; color:#fff; box-shadow:0 40px 90px -40px rgba(247,105,37,.8); }
.nx-prijs small { font-size:12.5px; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.nx-prijs .bedrag { font-size:clamp(46px,6vw,72px); font-weight:1000; letter-spacing:-0.04em; line-height:1; margin:10px 0 6px; color:#fff; }
.nx-prijs .bedrag sub { font-size:16px; font-weight:800; letter-spacing:0; vertical-align:baseline; opacity:.85; margin-left:8px; }
.nx-prijs p { margin:0 0 16px; font-size:15.5px; line-height:1.55; color:var(--muted); }
.nx-prijs .warm p { color:#fff1e8; }
.nx-prijs ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:15px; font-weight:800; }
.nx-prijs li { padding-left:28px; position:relative; }
.nx-prijs li::before { content:"✓"; position:absolute; left:0; font-weight:1000; color:var(--mint); }
.nx-prijs .warm li::before { color:#fff; }

/* ---------- Aanvragen ---------- */
.nx-vraag { display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:start; background:linear-gradient(160deg,#16264a,#0f1c36); border:1px solid #2c4170; border-radius:32px; padding:56px; margin:0 0 70px; position:relative; overflow:hidden; }
.nx-vraag::before { content:""; position:absolute; width:520px; height:520px; right:-180px; top:-220px; background:radial-gradient(circle, rgba(247,105,37,.28), transparent 65%); pointer-events:none; }
.nx-vraag h2 { color:#fff; font-size:clamp(30px,3.6vw,46px); }
.nx-vraag .sub { color:var(--muted); }
.nx-mens { display:flex; align-items:center; gap:14px; margin:26px 0 0; padding:16px; border-radius:18px; background:rgba(10,19,38,.6); border:1px solid #2c4170; }
.nx-mens .cj-mascot, .nx-mens img { width:58px; height:58px; flex-shrink:0; }
.nx-mens b { display:block; color:#fff; font-size:17px; }
.nx-mens span { font-size:14px; color:var(--muted); font-weight:700; }
.nx-mens a { color:var(--gloed); font-weight:900; text-decoration:none; }
.nx-form { position:relative; background:#fff; color:#142538; border-radius:24px; padding:30px; box-shadow:0 50px 100px -50px rgba(0,0,0,.95); --ink:#142538; --muted:#56657a; --line:#e2e6eb; --bg2:#f6f7fb; }
.nx-form label { display:block; font-weight:900; font-size:13.5px; margin:0 0 6px; color:#142538; }
.nx-form .opt { color:#8a96a8; font-weight:700; }
.nx-form input, .nx-form select, .nx-form textarea { width:100%; font:inherit; font-weight:700; font-size:16px; padding:13px 14px; border-radius:12px; border:1.5px solid #d9dfe7; background:#fff; color:#142538; margin:0 0 14px; }
.nx-form input:focus, .nx-form select:focus, .nx-form textarea:focus { outline:3px solid rgba(247,105,37,.35); border-color:#f76925; }
.nx-form .row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nx-form .nx-knop { width:100%; }
.nx-form .consent { font-size:12.5px; color:#6b7789; margin:14px 0 0; line-height:1.5; }
.nx-form .ok { background:#e6f6ec; color:#136c3b; border-radius:12px; padding:14px; font-weight:900; margin-top:14px; }
.nx-form .err { background:#fdecec; color:#8a1f24; border-radius:12px; padding:14px; font-weight:800; margin-top:14px; }

/* ---------- De echte app ---------- */
.nx-app { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; border:1px solid #2c4170; border-radius:32px; padding:50px 56px; margin:0 0 120px; background:rgba(16,28,54,.6); backdrop-filter:blur(6px); }
.nx-app h2 { color:#fff; }
.pb-code { background:rgba(247,105,37,.12); border:1px solid rgba(247,105,37,.45); border-radius:18px; padding:18px 20px; margin:0 0 22px; }
.pb-code small { display:block; font-weight:1000; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gloed); margin-bottom:6px; }
.pb-code .rij { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pb-code code { font:inherit; font-weight:1000; font-size:30px; letter-spacing:.08em; color:#fff; }
.pb-code button { border:1.5px solid #4a66a0; background:#14223f; color:#fff; border-radius:10px; padding:7px 12px; font:inherit; font-weight:900; font-size:13px; cursor:pointer; }
.nx-winkels { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px; }
.nx-winkel { display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border-radius:14px; background:#fff; color:#142538; text-decoration:none; font-weight:1000; font-size:16px; line-height:1.15; transition:transform .12s; }
.nx-winkel:hover { transform:translateY(-2px); }
.nx-winkel small { display:block; font-size:11px; font-weight:800; color:#6b7789; letter-spacing:.02em; }
.nx-winkel.straks { background:transparent; color:var(--muted); border:1.5px dashed #33497a; cursor:default; }
.nx-winkel.straks small { color:#7f90b8; }
.nx-winkel svg { width:26px; height:26px; flex-shrink:0; }
.pb-qr { text-align:center; }
.pb-qr .vak { display:inline-block; background:#fff; border-radius:24px; padding:20px; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.pb-qr .vak svg { width:180px; height:180px; display:block; }
.pb-qr p { margin:16px 0 0; font-weight:800; color:var(--muted); font-size:15px; }

/* Vaste knop onderaan op de telefoon */
.pb-vast { position:fixed; left:0; right:0; bottom:0; z-index:20; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:#0a1326; border-top:1px solid var(--line); display:none; transform:translateY(110%); visibility:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s; }
/* Dekkende achtergrond en onzichtbaar als hij weg is: Safari kleurt anders zijn eigen balk oranje naar de knop. */
.pb-vast.op { transform:none; visibility:visible; transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.pb-vast .nx-knop { width:100%; padding:15px; font-size:16px; }
.pb-vast[hidden] { display:none !important; }

/* Rustig binnenkomen bij scrollen; zonder script blijft alles gewoon zichtbaar */
.pb-rijs { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i, 0) * 90ms); }
.pb-rijs.zicht { opacity:1; transform:none; }

footer.pb-voet { border-top:1px solid var(--line); padding:26px 0 96px; color:#8090b5; font-size:13px; line-height:1.7; }
footer.pb-voet a { color:inherit; }

@media (max-width:1320px) { .nx-zweef { display:none; } }
@media (max-width:1180px) { .nx-bewijs { grid-template-columns:1fr 1fr; } }
/* Vanaf een tablet: een telefoon met een vaste maat. Hij verandert niet van grootte tussen de schermen;
   wat niet past, rolt binnen de telefoon. Op een telefoon zelf (hieronder) valt de rand weg. */
@media (min-width:601px) {
  .nx-podium { --tel-h:clamp(560px, calc(100vh - 150px), 720px); }
  #pb-demo { min-height:var(--tel-h); }
  .pb-scherm { height:var(--tel-h); min-height:0; }
  #pb-lijf { min-height:0; }
  .pb-rol, .pb-klaar { overflow-y:auto; scrollbar-width:none; }
  .pb-rol::-webkit-scrollbar, .pb-klaar::-webkit-scrollbar { display:none; }
  .pb-rol.meer { -webkit-mask-image:linear-gradient(#000 calc(100% - 36px), transparent); mask-image:linear-gradient(#000 calc(100% - 36px), transparent); }
  .pb-tekening { text-align:center; }
  .pb-tekening img { max-height:calc(var(--tel-h) * .28); object-fit:contain; }
  .pb-vraag h3 { font-size:18px; }
  .pb-opt { padding:10px 13px; margin-bottom:8px; }
  .pb-voet { box-shadow:0 -14px 14px -14px rgba(20,37,56,.16); position:relative; }
  .pb-voet:empty { box-shadow:none; }
}
@media (max-width:980px) {
  .nx-hero { grid-template-columns:1fr; gap:34px; padding:6px 0 48px; min-height:0; }
  .nx-hero h1 { font-size:clamp(46px,14vw,72px); margin-bottom:16px; }
  .nx-lead { font-size:17px; margin-bottom:22px; }
  .nx-zweef { display:none; }
  .nx-tellers { grid-template-columns:1fr 1fr; margin-bottom:80px; }
  .nx-tellers div { padding:20px 20px; }
  .nx-tellers div:nth-child(3) { border-left:0; }
  .nx-tellers div:nth-child(n+3) { border-top:1px solid var(--line); }
  .nx-band { margin-bottom:70px; }
  .nx-blok { margin-bottom:90px; }
  .nx-spoor, .nx-loper { left:18px; }
  .nx-stap { grid-template-columns:1fr; gap:18px; padding:26px 0 26px 56px; }
  .nx-stap > .nx-knoop { left:18px; top:44px; }
  .nx-stap:nth-child(even) .nx-tekst { order:0; }
  .nx-toneel { min-height:0; place-items:start; }
  .nx-jij, .nx-vraag, .nx-app, .nx-prijs { grid-template-columns:1fr; }
  .nx-jij { gap:34px; }
  .nx-portaal { transform:none; }
  .nx-vraag, .nx-app { padding:30px 22px; gap:28px; }
  .nx-schermen { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -18px; padding:0 18px 12px; -webkit-overflow-scrolling:touch; }
  .nx-schermen figure { flex:0 0 62%; scroll-snap-align:center; }
  .nx-schermen figure:nth-child(even) { margin-top:0; }
  .nx-schermen { max-width:none; }
  .pb-vast { display:block; }
}
@media (max-width:560px) {
  .nx-bewijs { grid-template-columns:1fr; }
  .nx-acties .nx-knop { width:100%; }
  .nx-acties .nx-spook { width:100%; justify-content:center; }
  .nx-form { padding:22px 18px; }
  .nx-form .row { grid-template-columns:1fr; }
  .nx-rij { grid-template-columns:1fr auto; }
  .nx-rij .nx-staaf { grid-column:1 / -1; order:3; }
  .nx-doel { flex-direction:column; align-items:flex-start; }
  .pb-code code { font-size:26px; }
}
/* Lage schermen (kleine laptop): het dagdoelscherm iets compacter, zodat het in de telefoon past. */
@media (min-width:601px) and (max-height:800px) {
  .pb-wie .cj-mascot { width:72px; height:72px; }
  .pb-zeg { margin-bottom:16px; }
  .pb-doel { padding:13px 12px 12px; margin-bottom:10px; }
  .pb-ring { width:84px; height:84px; }
  .pb-ring b { font-size:32px; }
  .pb-doel h3 { font-size:22px; margin-top:8px; }
  .pb-doel p { margin-bottom:10px; }
  .pb-score { margin-bottom:8px; }
  .pb-score span { padding:8px 12px; }
}
/* Op een telefoon: geen telefoon in een telefoon. De demo is daar een scherm uit de app, zonder rand. */
@media (max-width:600px) {
  .nx-podium::before { inset:-70px 0; } /* de gloed stak (ook door zijn ademen) buiten het scherm: daardoor werd de hele pagina te breed */
  .pb-scherm { border:0; outline:0; border-radius:26px; min-height:560px; scroll-margin-top:12px; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -40px rgba(0,0,0,.9), 0 0 70px -24px rgba(247,105,37,.5); }
  #pb-demo { min-height:560px; }
}
/* Op een telefoon: geen QR-code, de winkelknoppen zijn genoeg */
@media (hover:none) and (pointer:coarse) { .pb-qr { display:none; } .nx-app { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) {
  .pb-rijs, .nx-stap .nx-tekst, .nx-stap .nx-toneel, .nx-binnen > *, .nx-podium, .nx-melding, .nx-waarom, .nx-week i { opacity:1 !important; transform:none !important; }
  .pb-confetti, #nx-sterren, .nx-xp, .nx-noot { display:none; }
  .nx-ring .vul { stroke-dashoffset:0; }
  .nx-staaf i { width:var(--w); }
}

/* ---------- Hoofdpagina: menu, stappen, vragen en kennisbank in de nachtstijl ---------- */
body.nacht nav.main a { color:var(--zilver); transition:color .2s; }
body.nacht nav.main a:hover, body.nacht nav.main a.on { color:var(--gloed); }
body.nacht nav.main a.btn { color:#fff; }
body.nacht .btn.ghost { background:rgba(20,34,63,.7); color:var(--ink) !important; border-color:var(--line); box-shadow:0 4px 0 0 #070d1c; }
body.nacht nav.drawer a { color:var(--ink); border-bottom-color:var(--line); }
body.nacht footer.site { border-top-color:var(--line); }
body.nacht footer.site a { color:var(--muted); }
body.nacht footer.site a:hover, body.nacht footer.site .brand { color:var(--ink); }
body.nacht footer.site .legal { border-top-color:var(--line); }

.nx-stappen { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:stap; }
.nx-stappen article { position:relative; background:linear-gradient(180deg, rgba(24,40,71,.9), rgba(16,28,54,.9)); border:1px solid #2c4170; border-radius:24px; padding:28px 26px 26px; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.nx-stappen article:hover { transform:translateY(-6px); border-color:#4a66a0; }
.nx-stappen article > b { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; margin:0 0 18px; font-size:20px; font-weight:1000; color:#fff; background:linear-gradient(180deg,#ff7f3a,#f76925); box-shadow:0 5px 0 0 #b84605, 0 14px 26px -12px rgba(247,105,37,.8); }
.nx-stappen h3 { margin:0 0 8px; font-size:21px; line-height:1.2; color:#fff; }
.nx-stappen p { margin:0; color:var(--muted); font-size:15.5px; line-height:1.6; }
.nx-stappen article:not(:last-child)::after { content:""; position:absolute; top:50px; right:-19px; width:20px; height:2px; background:repeating-linear-gradient(90deg,#f76925 0 5px, transparent 5px 9px); }

.nx-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.nx-faq details { border:1px solid #2c4170; border-radius:18px; background:rgba(16,28,54,.72); margin:0 0 10px; padding:0; overflow:hidden; transition:border-color .25s, background .25s; }
.nx-faq details[open] { border-color:#4a66a0; background:rgba(24,40,71,.9); }
.nx-faq summary { list-style:none; cursor:pointer; padding:19px 54px 19px 22px; font-weight:900; font-size:17px; color:#fff; position:relative; }
.nx-faq summary::-webkit-details-marker { display:none; }
.nx-faq summary::before, .nx-faq details[open] summary::before { content:none; }
.nx-faq details:last-child { border-bottom:1px solid #2c4170; }
.nx-faq details[open]:last-child { border-bottom-color:#4a66a0; }
.nx-faq summary::after { content:"+"; position:absolute; right:20px; top:50%; translate:0 -50%; width:26px; height:26px; display:grid; place-items:center; border-radius:9px; background:rgba(247,105,37,.16); color:var(--gloed); font-size:19px; font-weight:1000; transition:rotate .25s; }
.nx-faq details[open] summary::after { rotate:45deg; }
.nx-faq details p { margin:0; padding:0 22px 20px; color:var(--muted); font-size:15.5px; line-height:1.65; }
.nx-faq details p a { color:var(--ink); }

.nx-kennis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.nx-kennis a { display:block; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:rgba(16,28,54,.6); text-decoration:none; color:var(--ink); transition:transform .2s, border-color .2s, background .2s; }
.nx-kennis a:hover { transform:translateY(-3px); border-color:#f76925; background:rgba(24,40,71,.9); }
.nx-kennis b { display:block; font-weight:900; font-size:15.5px; line-height:1.3; }
.nx-kennis small { display:block; margin-top:4px; color:var(--muted); font-size:12.5px; font-weight:700; }

@media (max-width:980px) {
  .nx-stappen { grid-template-columns:1fr; }
  .nx-stappen article:not(:last-child)::after { display:none; }
  .nx-faq { grid-template-columns:1fr; gap:26px; }
  .nx-kennis { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) { .nx-kennis { grid-template-columns:1fr; } }