/* HALO-landing, nieuw ontwerp (27 okt 2026, monday 3312480796): templates/halo.php.
   Onder de sitenavigatie 1-op-1 het ontwerp "HALO: websites die blijven leren". Alles staat onder
   main.halo2, en classes, keyframes en de @property uit het ontwerp hebben het voorvoegsel hv-: zo botst
   niets met de sitebundel (Tailwind kent .grid, .ring, .btn en de keyframes pulse) en lekt niets van
   hier naar de sitenavigatie of de sitefooter. De resets uit het ontwerp (img, a, h1-h3, p) staan als
   `.halo2 :where(...)`: één class zwaar, dus ze winnen van de elementregels van de site, en elke
   ontwerpregel (`.halo2 .hv-...`) wint weer van hen (STANDAARDEN 44).
   Bovenaan: de waarden uit het ontwerp. Onderaan: wat er voor de site bij kwam (sitenavigatie,
   pakketten en formulier in dezelfde stijl). Gedrag: assets/halo-v2.js. */

/* Manrope (OFL), variabel 200-800, het bestand uit het ontwerp (24 KB, Latin-1 + €) */
@font-face{font-family:"Manrope";src:url(fonts/Manrope-Variable.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@property --hv-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.halo2{
  --ink:#131622;--ink-1:#171A27;--ink-2:#1C2030;--ink-3:#2A2F42;
  --cyan:#83E8F4;--lila:#B9A0FF;--violet:#6E3BEF;--paper:#F4F5F8;
  --text:#F4F5F8;--soft:#B4B8C8;--mute:#8187A0;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --grad:linear-gradient(100deg,#83E8F4 0%,#B9A0FF 30%,#8E6BFF 50%,#B9A0FF 70%,#83E8F4 100%);
  --ease:cubic-bezier(.2,.7,.2,1);--spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 20.4%,1.041 24.2%,1.035 28.4%,1.009 37.4%,.997 46.8%,1);
  --wrap:1200px;--g:clamp(16px,4vw,40px);
}
.halo2 *,.halo2 *::before,.halo2 *::after{box-sizing:border-box}
.halo2{-webkit-text-size-adjust:100%;background:var(--ink)}
.halo2{margin:0;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
.halo2 :where(img),.halo2 :where(svg){display:block;max-width:100%}
.halo2 :where(img){height:auto}
.halo2 :where(a){color:inherit}
.halo2 :where(h1),.halo2 :where(h2),.halo2 :where(h3){margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.halo2 :where(p){margin:0}
.halo2 .hv-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
.halo2 .hv-grad{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hv-shimmer 9s linear infinite}
@keyframes hv-shimmer{to{background-position:-200% 0}}
.halo2 :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.halo2 .hv-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color .2s,box-shadow .3s,border-color .2s,transform .3s var(--spring)}
.halo2 .hv-btn svg{width:16px;height:16px;transition:transform .3s var(--spring)}
.halo2 .hv-btn:hover svg{transform:translateX(4px)}
.halo2 .hv-btn:active{transform:scale(.97)}
.halo2 .hv-btn-main{background:var(--paper);color:var(--ink);box-shadow:0 10px 30px -10px rgba(131,232,244,.45)}
.halo2 .hv-btn-main:hover{background:#fff;box-shadow:0 14px 44px -8px rgba(131,232,244,.75)}
.halo2 .hv-btn-main.hv-ring-btn::before{content:"";position:absolute;inset:-2px;border-radius:14px;padding:2px;background:conic-gradient(from var(--hv-a),#83E8F4,#B9A0FF,#6E3BEF,#83E8F4);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hv-turn 4s linear infinite;z-index:-1}
@keyframes hv-turn{to{--hv-a:360deg}}
.halo2 .hv-btn-alt{color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.halo2 .hv-btn-alt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.halo2 .hv-hero{position:relative;text-align:center;padding:clamp(48px,6vw,72px) 0 0;isolation:isolate;overflow:hidden}
.halo2 .hv-aurora{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity 2s ease}
.halo2 .hv-aurora.hv-on{opacity:1}
.halo2 .hv-hero::before{content:"";position:absolute;left:50%;top:-30%;width:1400px;height:900px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(110,59,239,.20),transparent 70%);z-index:-3}
.halo2 .hv-pill{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid var(--line-2);background:rgba(19,22,34,.5);backdrop-filter:blur(8px);font-size:13px;color:var(--soft);text-decoration:none;transition:border-color .2s,color .2s}
.halo2 .hv-pill b{font-weight:600;color:var(--ink);background:var(--cyan);border-radius:999px;padding:2px 9px;font-size:12px}
.halo2 .hv-pill svg{width:13px;height:13px;transition:transform .3s var(--spring)}
.halo2 .hv-pill:hover{border-color:rgba(131,232,244,.45);color:var(--text)}
.halo2 .hv-pill:hover svg{transform:translateX(3px)}
.halo2 .hv-hero h1{font-size:clamp(48px,8vw,116px);font-weight:600;letter-spacing:-.05em;line-height:.98;margin:24px auto 0;max-width:12ch}
.halo2 .hv-hero h1 .hv-ln{display:block}
.halo2 .hv-hero .hv-lede{font-size:clamp(17px,1.5vw,20px);color:var(--soft);max-width:600px;margin:24px auto 0}
.halo2 .hv-hero .hv-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;position:relative;z-index:2}
.halo2 .hv-hero .hv-notes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:13px;color:var(--mute);position:relative;z-index:2}
.halo2 .hv-hero .hv-notes li{display:flex;align-items:center;gap:8px}
.halo2 .hv-hero .hv-notes li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.halo2 .hv-stage{position:relative;width:min(820px,118vw);margin:clamp(-70px,-4vw,-20px) 0 0;left:50%;transform:translateX(-50%);aspect-ratio:1/.78;pointer-events:none}
.halo2 .hv-stage .hv-glow{position:absolute;inset:16% 18% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(131,232,244,.55),rgba(110,59,239,.35) 55%,transparent 75%);filter:blur(50px);animation:hv-breathe 9s ease-in-out infinite;z-index:-1}
.halo2 .hv-stage .hv-ring{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;border:1px solid rgba(255,255,255,.07);z-index:-1}
.halo2 .hv-stage .hv-ring.hv-r2{width:92%;border:1px dashed rgba(131,232,244,.14);animation:hv-orbit 80s linear infinite}
.halo2 .hv-stage .hv-ring.hv-r3{width:150%;border-color:rgba(185,160,255,.05)}
.halo2 .hv-stage .hv-ring.hv-r2::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px 3px rgba(131,232,244,.8)}
.halo2 .hv-orbwrap{position:absolute;left:50%;top:0;width:84%;translate:-50% var(--py,0px);rotate:var(--pr,0deg)}
.halo2 .hv-orbgl{position:absolute;inset:-6%;width:112%;height:112%;opacity:0;transition:opacity .8s}
.halo2.hv-gl-orb .hv-orbgl{opacity:1}
.halo2 .hv-stage .hv-wave{position:absolute;left:50%;top:44%;width:64%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;border:1.5px solid rgba(131,232,244,.5);opacity:0;animation:hv-wave 2.4s var(--ease) forwards;z-index:-1}
.halo2 .hv-stage .hv-wave.hv-l{border-color:rgba(185,160,255,.5)}
@keyframes hv-wave{0%{opacity:.8;scale:.8}100%{opacity:0;scale:1.55}}
.halo2 .hv-say{position:absolute;left:calc(50% + min(250px,24vw));top:12%;width:min(300px,30vw);text-align:left;pointer-events:none;z-index:3}
.halo2 .hv-say .hv-who{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--soft);margin-bottom:8px}
.halo2 .hv-say .hv-who i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:hv-breathe 1.6s ease-in-out infinite}
.halo2 .hv-say .hv-who em{font-style:normal;font-weight:500;color:var(--mute)}
.halo2 .hv-say .hv-who em::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:hv-dots 1.2s steps(4) infinite}
.halo2 .hv-say[data-state="praat"] .hv-who em::after{content:"";animation:none}
@keyframes hv-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.halo2 .hv-say .hv-bub{position:relative;padding:14px 16px;border-radius:16px 16px 16px 4px;background:rgba(28,32,48,.78);border:1px solid var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:15px;line-height:1.45;color:var(--text);min-height:52px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transition:opacity .4s,transform .5s var(--spring)}
.halo2 .hv-say .hv-bub.hv-hide{opacity:0;transform:translateY(8px) scale(.96)}
.halo2 .hv-say .hv-bub b{font-weight:600}
.halo2 .hv-say .hv-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--cyan);animation:hv-blink 1s steps(2) infinite}
@keyframes hv-blink{50%{opacity:0}}
.halo2:not(.hv-motion) .hv-say{display:none}
@media (max-width:860px){
.halo2 .hv-say{left:50%;top:9%;translate:-50% 0;width:min(300px,84vw);text-align:center}
.halo2 .hv-say .hv-bub{font-size:14px;padding:11px 14px;min-height:0}
.halo2 .hv-say .hv-who{justify-content:center}
.halo2 .hv-say .hv-bub{border-radius:16px}
}
.halo2 .hv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to bottom,transparent,var(--ink));z-index:1;pointer-events:none}
@keyframes hv-float{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes hv-iri{0%,100%{filter:hue-rotate(0deg) saturate(1)}50%{filter:hue-rotate(-22deg) saturate(1.15)}}
@keyframes hv-breathe{0%,100%{opacity:.8;scale:1}50%{opacity:1;scale:1.08}}
@keyframes hv-orbit{to{rotate:360deg}}
.halo2.hv-motion .hv-hero .hv-pill,.halo2.hv-motion .hv-hero h1 .hv-ln,.halo2.hv-motion .hv-hero .hv-lede,.halo2.hv-motion .hv-hero .hv-ctas,.halo2.hv-motion .hv-hero .hv-notes{animation:hv-rise 1s var(--ease) both}
.halo2.hv-motion .hv-hero h1 .hv-ln:nth-child(1){animation-delay:.08s}
.halo2.hv-motion .hv-hero h1 .hv-ln:nth-child(2){animation:hv-rise 1s var(--ease) .18s both,hv-shimmer 9s linear 1.2s infinite}
.halo2.hv-motion .hv-hero .hv-lede{animation-delay:.32s}
.halo2.hv-motion .hv-hero .hv-ctas{animation-delay:.42s}
.halo2.hv-motion .hv-hero .hv-notes{animation-delay:.52s}
.halo2.hv-motion .hv-orbwrap{animation:hv-bloom 1.8s var(--ease) .25s both}
.halo2.hv-motion .hv-stage .hv-ring{animation:hv-ringin 2s var(--ease) .4s both}
.halo2.hv-motion .hv-stage .hv-ring.hv-r2{animation:hv-ringin 2s var(--ease) .5s both,hv-orbit 80s linear 2.5s infinite}
@keyframes hv-rise{from{opacity:0;transform:translateY(22px);filter:blur(10px)}}
@keyframes hv-bloom{from{opacity:0;scale:.72;rotate:-40deg;filter:blur(24px)}}
@keyframes hv-ringin{from{opacity:0;scale:.6}}
.halo2 .hv-logos{position:relative;z-index:2;margin-top:clamp(-130px,-8vw,-60px);padding-bottom:clamp(70px,9vw,120px);text-align:center}
.halo2 .hv-logos p{font-size:13px;color:var(--mute)}
.halo2 .hv-marquee{margin-top:26px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.halo2 .hv-logo-row{display:flex;align-items:center;gap:clamp(40px,5vw,72px);width:max-content;padding-right:clamp(40px,5vw,72px)}
.halo2.hv-motion .hv-logo-row{animation:hv-slide 38s linear infinite}
.halo2 .hv-marquee:hover .hv-logo-row{animation-play-state:paused}
.halo2 .hv-logo-row img{height:26px;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.55;transition:opacity .2s}
.halo2 .hv-logo-row img:hover{opacity:1}
.halo2 .hv-logo-row img.hv-tall{height:40px}
@keyframes hv-slide{to{transform:translateX(-50%)}}
.halo2:not(.hv-motion) .hv-marquee{-webkit-mask:none;mask:none}
.halo2:not(.hv-motion) .hv-logo-row{flex-wrap:wrap;justify-content:center;width:auto;padding:0;row-gap:22px}
.halo2 .hv-logo-row .hv-dup{display:contents}
.halo2:not(.hv-motion) .hv-logo-row .hv-dup{display:none!important}
.halo2 .hv-shead{text-align:center;max-width:760px;margin:0 auto}
.halo2 .hv-mark{width:64px;height:64px;margin:0 auto 26px;position:relative}
.halo2 .hv-mark::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(closest-side,rgba(131,232,244,.35),transparent);filter:blur(8px);animation:hv-breathe 6s ease-in-out infinite}
.halo2 .hv-mark img{position:relative;width:100%;height:100%;animation:hv-orbit 30s linear infinite}
.halo2 .hv-shead h2{font-size:clamp(34px,4.8vw,60px)}
.halo2 .hv-shead p{margin-top:18px;font-size:18px;color:var(--soft)}
.halo2 .hv-statement{padding:clamp(80px,10vw,140px) 0;border-top:1px solid var(--line)}
.halo2 .hv-statement p{font-size:clamp(26px,3.5vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1.18;max-width:980px;margin:0 auto;text-align:center}
.halo2 .hv-statement .hv-dim{color:#5B617A}
.halo2 .hv-statement .hv-w{transition:opacity .35s ease,filter .35s ease}
.halo2 .hv-statement .hv-w.hv-off{opacity:.16;filter:blur(1.5px)}
.halo2 .hv-portal{padding:clamp(80px,10vw,140px) 0}
.halo2 .hv-win-wrap{position:relative;margin-top:60px;perspective:1600px}
.halo2 .hv-win-wrap::before{content:"";position:absolute;left:8%;right:8%;top:10%;bottom:-6%;background:radial-gradient(closest-side,rgba(110,59,239,.45),rgba(131,232,244,.15) 60%,transparent);filter:blur(60px);z-index:-1;opacity:calc(1 - var(--t,0))}
.halo2 .hv-win{position:relative;border-radius:18px;background:linear-gradient(180deg,#1D2131,#161926);border:1px solid var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 40px 80px -30px rgba(0,0,0,.7);overflow:hidden;transform-origin:50% 0;transform:rotateX(calc(var(--t,0)*24deg)) scale(calc(1 - var(--t,0)*.1)) translateY(calc(var(--t,0)*40px));will-change:transform}
.halo2 .hv-win::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 60%);background-size:250% 100%;background-position:calc(var(--t,0)*200% - 50%) 0}
.halo2 .hv-win-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.halo2 .hv-win-bar i{width:11px;height:11px;border-radius:50%;background:#3A3F55}
.halo2 .hv-win-bar span{margin-left:auto;margin-right:auto;font-size:12px;color:var(--mute);padding:4px 14px;border-radius:8px;background:rgba(255,255,255,.04)}
.halo2 .hv-win-body{display:grid;grid-template-columns:250px 1fr;min-height:440px;position:relative}
.halo2 .hv-side{padding:20px 16px;border-right:1px solid var(--line);font-size:13px}
.halo2 .hv-prog{background:var(--ink);border-radius:12px;padding:14px;margin-bottom:18px}
.halo2 .hv-prog small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.halo2 .hv-prog b{display:block;margin:4px 0 10px;font-weight:600}
.halo2 .hv-prog .hv-bar{height:5px;border-radius:5px;background:var(--ink-3);overflow:hidden}
.halo2 .hv-prog .hv-bar i{display:block;height:100%;width:69%;background:linear-gradient(90deg,#83E8F4,#B9A0FF);transition:width 1.6s var(--ease)}
.halo2 .hv-side .hv-side-k{display:block;margin:16px 0 6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600}
.halo2 .hv-side ul{list-style:none;margin:0;padding:0}
.halo2 .hv-side li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;color:var(--soft);transition:color .3s}
.halo2 .hv-side li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2383E8F4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;transition:transform .5s var(--spring),background-size .4s var(--spring)}
.halo2 .hv-side li.hv-wait{color:var(--mute)}
.halo2 .hv-side li.hv-wait::before{background-size:0;transform:scale(.8)}
.halo2 .hv-side li.hv-now{background:rgba(131,232,244,.08);color:var(--text);box-shadow:0 0 0 1px rgba(131,232,244,.25) inset}
.halo2 .hv-side li.hv-now::before{background:none;border:2px solid var(--cyan);animation:hv-pulse 2s ease-in-out infinite}
.halo2 .hv-side li.hv-next::before{background:none;border:1.5px solid var(--ink-3)}
.halo2 .hv-side li.hv-next{color:var(--mute)}
@keyframes hv-pulse{50%{box-shadow:0 0 0 5px rgba(131,232,244,.15)}}
.halo2 .hv-main{position:relative;padding:26px clamp(18px,3vw,34px) 30px;text-align:left}
.halo2 .hv-main small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.halo2 .hv-main .hv-main-h{display:block;font-weight:600;line-height:1.05;font-size:clamp(20px,2.2vw,26px);margin:6px 0 6px;letter-spacing:-.02em}
.halo2 .hv-main > p{color:var(--soft);font-size:14px;max-width:520px}
.halo2 .hv-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.halo2 .hv-opt{border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);padding:10px;transition:border-color .4s,box-shadow .4s,transform .6s var(--spring),opacity .6s}
.halo2 .hv-opt.hv-sel{border-color:rgba(131,232,244,.7);box-shadow:0 0 0 3px rgba(131,232,244,.14),0 18px 40px -18px rgba(131,232,244,.5);transform:translateY(-4px)}
.halo2 .hv-opts.hv-wait .hv-opt{opacity:0;transform:translateY(18px) scale(.96)}
.halo2 .hv-opts .hv-opt:nth-child(2){transition-delay:.08s}
.halo2 .hv-opts .hv-opt:nth-child(3){transition-delay:.16s}
.halo2 .hv-opts.hv-live .hv-opt{transition-delay:0s}
.halo2 .hv-shot{border-radius:8px;overflow:hidden;aspect-ratio:16/11;background:var(--bg);position:relative;padding:9% 9% 0}
.halo2 .hv-shot i{display:block;border-radius:3px;background:var(--fg);opacity:.9;transform-origin:left;transition:transform .8s var(--ease) .2s}
.halo2 .hv-opts.hv-wait .hv-shot i{transform:scaleX(0)}
.halo2 .hv-shot .hv-h1{height:9%;width:70%;margin-bottom:5%}
.halo2 .hv-shot .hv-h2{height:9%;width:48%;margin-bottom:8%}
.halo2 .hv-shot .hv-t{height:4%;width:62%;margin-bottom:4%;opacity:.35}
.halo2 .hv-shot .hv-b{height:10%;width:30%;border-radius:20px;background:var(--ac);opacity:1;margin-top:8%}
.halo2 .hv-shot .hv-img{position:absolute;right:8%;top:16%;width:30%;height:58%;border-radius:8px;background:var(--ac);opacity:.35}
.halo2 .hv-opt.hv-a{--bg:#F3F6F2;--fg:#123B2A;--ac:#1C7A4E}
.halo2 .hv-opt.hv-b{--bg:#16132B;--fg:#EDEAFB;--ac:#8C7BFF}
.halo2 .hv-opt.hv-c{--bg:#EAF6F7;--fg:#0E3940;--ac:#159AA8}
.halo2 .hv-opt.hv-b .hv-shot{padding-top:12%}
.halo2 .hv-opt.hv-b .hv-img{left:9%;right:auto;top:auto;bottom:0;width:82%;height:26%;border-radius:8px 8px 0 0}
.halo2 .hv-opt.hv-c .hv-shot i:not(.hv-img){margin-left:auto;margin-right:auto;transform-origin:center}
.halo2 .hv-opt.hv-c .hv-img{display:none}
.halo2 .hv-opt div.hv-lbl{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;font-weight:600}
.halo2 .hv-opt div.hv-lbl em{font-style:normal;font-size:11px;font-weight:500;color:var(--mute)}
.halo2 .hv-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.halo2 .hv-acts span{font-size:13px;padding:8px 14px;border-radius:9px;border:1px solid var(--line-2);color:var(--soft);transition:transform .25s var(--spring)}
.halo2 .hv-acts span:first-child{background:var(--paper);color:var(--ink);border-color:transparent;font-weight:600}
.halo2 .hv-acts span.hv-tap{transform:scale(.94)}
.halo2 .hv-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:3;opacity:0;transition:transform 1s var(--ease),opacity .4s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.halo2 .hv-cursor.hv-on{opacity:1}
.halo2 .hv-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:64px}
.halo2 .hv-steps div{position:relative;padding-top:18px}
.halo2 .hv-steps div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2)}
.halo2 .hv-steps div::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#83E8F4,#B9A0FF);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.halo2:not(.hv-motion) .hv-steps div::after,.halo2 .hv-steps div.hv-in::after{transform:scaleX(1)}
.halo2 .hv-steps div:nth-child(2)::after{transition-delay:.15s}
.halo2 .hv-steps div:nth-child(3)::after{transition-delay:.3s}
.halo2 .hv-steps div:nth-child(4)::after{transition-delay:.45s}
.halo2 .hv-steps b{display:block;font-weight:600;font-size:16px;margin-bottom:6px}
.halo2 .hv-steps p{font-size:14.5px;color:var(--soft)}
.halo2 .hv-steps b::before{content:attr(data-n);display:inline-block;margin-right:10px;font-size:12px;color:var(--cyan);font-variant-numeric:tabular-nums}
.halo2 .hv-band{position:relative;margin:0 var(--g);border-radius:28px;overflow:hidden;isolation:isolate;padding:clamp(60px,8vw,110px) 0}
.halo2 .hv-band::before{content:"";position:absolute;inset:-40%;z-index:-2;background:conic-gradient(from 200deg at 50% 50%,#83E8F4,#B9A0FF,#6E3BEF,#4FB7E8,#83E8F4);filter:blur(60px) saturate(1.1);animation:hv-orbit 40s linear infinite}
.halo2 .hv-band::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px circle at var(--bx,50%) var(--by,30%),rgba(255,255,255,.18),transparent 60%),linear-gradient(180deg,rgba(19,22,34,.20),rgba(19,22,34,.45))}
.halo2 .hv-band .hv-shead h2{color:#fff;text-shadow:0 2px 30px rgba(19,22,34,.3)}
.halo2 .hv-band .hv-shead p{color:rgba(255,255,255,.92)}
.halo2 .hv-loop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:52px;position:relative}
.halo2 .hv-loop .hv-card{position:relative;background:rgba(19,22,34,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:28px;transition:transform .5s var(--spring),border-color .4s,box-shadow .4s,opacity .9s var(--ease),filter .9s var(--ease)}
.halo2 .hv-loop .hv-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.3)}
.halo2 .hv-loop .hv-card.hv-lit{border-color:rgba(131,232,244,.6);box-shadow:0 0 0 1px rgba(131,232,244,.25),0 24px 60px -20px rgba(131,232,244,.7)}
.halo2 .hv-loop .hv-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;transition:transform .5s var(--spring)}
.halo2 .hv-loop .hv-card.hv-lit .hv-ic{transform:scale(1.12)}
.halo2 .hv-loop .hv-ic svg{width:21px;height:21px;overflow:visible}
.halo2 .hv-loop .hv-c1{background:var(--cyan);color:var(--ink)}
.halo2 .hv-loop .hv-c2{background:var(--lila);color:var(--ink)}
.halo2 .hv-loop .hv-c3{background:var(--violet);color:#fff}
.halo2.hv-motion .hv-c1 path{transform-box:fill-box;transform-origin:bottom;animation:hv-bars 2.4s ease-in-out infinite}
.halo2.hv-motion .hv-c1 path:nth-child(2){animation-delay:.2s}
.halo2.hv-motion .hv-c1 path:nth-child(3){animation-delay:.4s}
@keyframes hv-bars{50%{transform:scaleY(.55)}}
.halo2.hv-motion .hv-c2 svg{animation:hv-twinkle 3s ease-in-out infinite}
@keyframes hv-twinkle{50%{transform:rotate(45deg) scale(.82)}}
.halo2.hv-motion .hv-c3 svg{animation:hv-nudge 2.4s var(--ease) infinite}
@keyframes hv-nudge{0%,60%,100%{transform:none}30%{transform:translate(3px,-3px)}}
.halo2 .hv-loop h3{font-size:24px;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.halo2 .hv-loop p{color:var(--soft);font-size:15.5px}
.halo2 .hv-soon{font-size:10.5px;font-weight:600;text-transform:uppercase;color:var(--lila);border:1px solid rgba(185,160,255,.45);border-radius:999px;padding:3px 9px;letter-spacing:.1em}
.halo2 .hv-incl{padding:clamp(80px,10vw,140px) 0}
.halo2 .hv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border:1px solid var(--line);border-radius:22px;overflow:hidden;position:relative}
.halo2 .hv-grid::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(131,232,244,.10),transparent 60%);z-index:0}
.halo2 .hv-cell{position:relative;z-index:1;padding:30px 28px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.halo2 .hv-cell:nth-child(3n){border-right:0}
.halo2 .hv-cell:nth-last-child(-n+3){border-bottom:0}
.halo2 .hv-cell .hv-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:20px;background:linear-gradient(180deg,#252A3D,#1A1E2C);border:1px solid var(--line-2);color:var(--cyan);transition:transform .5s var(--spring),box-shadow .3s}
.halo2 .hv-cell:hover .hv-ic{transform:translateY(-3px) rotate(-6deg);box-shadow:0 10px 24px -8px rgba(131,232,244,.5)}
.halo2 .hv-cell .hv-ic svg{width:19px;height:19px}
.halo2 .hv-cell .hv-ic path{stroke-dasharray:80;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease)}
.halo2 .hv-cell:nth-child(2) .hv-ic path{transition-delay:.1s}
.halo2 .hv-cell:nth-child(3) .hv-ic path{transition-delay:.2s}
.halo2 .hv-cell:nth-child(4) .hv-ic path{transition-delay:.3s}
.halo2 .hv-cell:nth-child(5) .hv-ic path{transition-delay:.4s}
.halo2 .hv-cell:nth-child(6) .hv-ic path{transition-delay:.5s}
.halo2 .hv-grid.hv-wait .hv-ic path{stroke-dashoffset:80}
.halo2 .hv-cell h3{font-size:18px;letter-spacing:-.015em;margin-bottom:6px}
.halo2 .hv-cell p{font-size:14.5px;color:var(--soft)}
.halo2 .hv-work{padding:0 0 clamp(80px,10vw,140px)}
.halo2 .hv-work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.halo2 .hv-work h2{font-size:clamp(34px,4.8vw,60px)}
.halo2 .hv-work-head p{color:var(--soft);max-width:380px}
.halo2 .hv-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:44px}
.halo2 .hv-site{grid-column:span 2;display:block;text-decoration:none;border-radius:16px;overflow:hidden;background:var(--ink-1);border:1px solid var(--line);transition:transform .5s var(--spring),border-color .3s,box-shadow .3s,opacity .9s var(--ease),filter .9s var(--ease)}
.halo2 .hv-site:nth-child(-n+2){grid-column:span 3}
.halo2 .hv-site:hover{transform:translateY(-6px);border-color:rgba(131,232,244,.4);box-shadow:0 30px 60px -30px rgba(131,232,244,.35)}
.halo2 .hv-site .hv-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.halo2 .hv-site .hv-bar i{width:8px;height:8px;border-radius:50%;background:#3A3F55}
.halo2 .hv-site .hv-view{aspect-ratio:880/600;overflow:hidden}
.halo2 .hv-site .hv-view img{width:100%;transition:transform 7s cubic-bezier(.45,.05,.35,1)}
.halo2 .hv-site:hover .hv-view img,.halo2 .hv-site:focus-visible .hv-view img,.halo2 .hv-site.hv-auto .hv-view img{transform:translateY(-66.6%)}
.halo2 .hv-site div.hv-cap{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px}
.halo2 .hv-site strong{font-weight:600}
.halo2 .hv-site span{color:var(--mute)}
.halo2 .hv-site .hv-go{display:inline-block;color:var(--cyan);transition:transform .3s var(--spring)}
.halo2 .hv-site:hover .hv-go{transform:translate(3px,-3px)}
.halo2 .hv-for{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;align-items:center}
.halo2 .hv-for small{font-size:13px;color:var(--mute);margin-right:6px}
.halo2 .hv-for span{font-size:14px;padding:8px 15px;border-radius:999px;border:1px solid var(--line-2);color:var(--soft);transition:border-color .2s,color .2s,background-color .2s}
.halo2 .hv-for span:hover{border-color:rgba(185,160,255,.5);color:var(--text);background:rgba(185,160,255,.06)}
.halo2 .hv-partner{padding:0 0 clamp(80px,10vw,130px)}
.halo2 .hv-partner .hv-box{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:clamp(28px,4vw,44px);border-radius:22px;border:1px solid var(--line);background:var(--ink-1)}
.halo2 .hv-partner .hv-box::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from var(--hv-a),transparent 0 70%,rgba(131,232,244,.55) 80%,rgba(185,160,255,.6) 88%,transparent 95%);animation:hv-turn 8s linear infinite;z-index:0}
.halo2 .hv-partner .hv-box::after{content:"";position:absolute;inset:1px;border-radius:21px;background:radial-gradient(120% 140% at 100% 0%,rgba(131,232,244,.08),transparent 55%),var(--ink-1);z-index:0}
.halo2 .hv-partner .hv-box>*{position:relative;z-index:1}
.halo2 .hv-partner h2{font-size:clamp(26px,3vw,36px)}
.halo2 .hv-partner p{margin-top:10px;color:var(--soft);max-width:620px}
.halo2 .hv-close{position:relative;text-align:center;padding:clamp(90px,11vw,150px) 0 clamp(80px,9vw,120px);border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
.halo2 .hv-close::before{content:"";position:absolute;left:50%;bottom:-420px;width:1100px;height:760px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(110,59,239,.35),rgba(131,232,244,.12) 55%,transparent);z-index:-1;animation:hv-breathe 10s ease-in-out infinite}
.halo2 .hv-halo-orb{position:relative;width:220px;height:220px;margin:0 auto 30px}
.halo2 .hv-halo-orb img{position:absolute;inset:35px;width:150px;filter:drop-shadow(0 20px 50px rgba(131,232,244,.35));animation:hv-float 12s ease-in-out infinite,hv-iri 12s ease-in-out infinite}
.halo2 .hv-halo-orb i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(131,232,244,.18);animation:hv-orbit 24s linear infinite}
.halo2 .hv-halo-orb i::after{content:"";position:absolute;top:50%;right:-4px;width:7px;height:7px;border-radius:50%;background:var(--lila);box-shadow:0 0 12px 2px rgba(185,160,255,.8)}
.halo2 .hv-halo-orb i+i{inset:-30px;border-style:dashed;border-color:rgba(185,160,255,.12);animation-duration:40s;animation-direction:reverse}
.halo2 .hv-halo-orb i+i::after{background:var(--cyan);box-shadow:0 0 12px 2px rgba(131,232,244,.8);top:auto;bottom:18%;right:4%}
.halo2 .hv-close h2{font-size:clamp(40px,6.4vw,88px);font-weight:600;letter-spacing:-.045em;line-height:1}
.halo2 .hv-close .hv-lede{font-size:18px;color:var(--soft);max-width:540px;margin:24px auto 0}
.halo2 .hv-close .hv-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.halo2 .hv-close .hv-price{margin-top:22px;font-size:13px;color:var(--mute)}
.halo2.hv-motion .hv-reveal:not(.hv-in){opacity:0;transform:translateY(26px);filter:blur(6px)}
.halo2.hv-motion .hv-reveal{transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),border-color .4s,box-shadow .4s}
.halo2.hv-motion .hv-loop .hv-card.hv-reveal:nth-child(2){transition-delay:.12s}
.halo2.hv-motion .hv-loop .hv-card.hv-reveal:nth-child(3){transition-delay:.24s}
@media (max-width:980px){
.halo2 .hv-win-body{grid-template-columns:1fr}
.halo2 .hv-side{display:none}
.halo2 .hv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.halo2 .hv-loop{grid-template-columns:1fr}
.halo2 .hv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.halo2 .hv-cell:nth-child(3n){border-right:1px solid var(--line)}
.halo2 .hv-cell:nth-child(2n){border-right:0}
.halo2 .hv-cell:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
.halo2 .hv-cell:nth-last-child(-n+2){border-bottom:0}
.halo2 .hv-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.halo2 .hv-site,.halo2 .hv-site:nth-child(-n+2){grid-column:span 1}
.halo2 .hv-site:first-child{grid-column:span 2}
.halo2 .hv-partner .hv-box{grid-template-columns:1fr}
}
@media (max-width:600px){
.halo2 .hv-hero .hv-ctas .hv-btn{flex:1 1 100%}
.halo2 .hv-stage{width:126vw}
.halo2 .hv-opts{gap:8px}
.halo2 .hv-opt{padding:6px}
.halo2 .hv-opt div.hv-lbl em{display:none}
.halo2 .hv-opt div.hv-lbl{font-size:11px}
.halo2 .hv-acts span:nth-child(n+2){display:none}
.halo2 .hv-steps{grid-template-columns:1fr;gap:20px;margin-top:44px}
.halo2 .hv-grid{grid-template-columns:1fr}
.halo2 .hv-cell,.halo2 .hv-cell:nth-child(n){border-right:0;border-bottom:1px solid var(--line)}
.halo2 .hv-cell:last-child{border-bottom:0}
.halo2 .hv-gallery{grid-template-columns:1fr}
.halo2 .hv-site:first-child{grid-column:auto}
.halo2 .hv-band{margin:0 8px;border-radius:22px}
.halo2 .hv-close .hv-ctas .hv-btn{flex:1 1 100%}
.halo2 .hv-logo-row img{height:20px;max-width:100px}
.halo2 .hv-logo-row img.hv-tall{height:32px}
}
@media (prefers-reduced-motion:reduce){
.halo2 *,.halo2 *::before,.halo2 *::after{animation:none!important;transition:none!important}
.halo2 .hv-win{transform:none!important}
}

/* ==========================================================================
   Toevoegingen voor de site (niet in het ontwerp)
   ========================================================================== */

/* Vaste sitenavigatie (header.php: h-16, lg:h-20, 2xl:h-28). De donkere pagina begint eronder, zodat
   de navigatie bovenaan op de lichte sitekleur staat zoals op elke pagina. Na scrollen is het glas
   (inspace-navbar.css: 55% wit) boven donker grijs; hier dekkender, zodat de menutekst leesbaar blijft.
   De frontbundel zet header.header-scrolled vanaf 48rem op 50% met !important in @layer base; een
   !important in een laag wint van elke ongelaagde regel, dus die override staat in dezelfde laag. */
.halo2{display:block;--hv-hdr:64px;margin-top:var(--hv-hdr)}
@media (min-width:1024px){.halo2{--hv-hdr:80px}}
@media (min-width:1536px){.halo2{--hv-hdr:112px}}
body:has(main.halo2) header[data-site-header].is-scrolled,
body:has(main.halo2) header[data-site-header].header-scrolled{background:rgba(255,255,255,.92)}
@layer base{body:has(main.halo2) header[data-site-header].header-scrolled{background-color:rgba(255,255,255,.92)!important}}
.halo2 #portaal,.halo2 #leren,.halo2 #werk,.halo2 #hl-plans,.halo2 #hl-form{scroll-margin-top:calc(var(--hv-hdr) + 12px)}
.halo2 [hidden]{display:none!important}
.halo2 :where(button,input,select,textarea){font:inherit}

/* Contrast: het gedimde deel van het statement haalt in het ontwerp 2,95:1 op de achtergrond; een
   tint lichter is 3,04:1, genoeg voor grote tekst (WCAG AA). */
.halo2 .hv-statement .hv-dim{color:#5D637C}

/* Kop boven pakketten en formulier, in de stijl van de stapkop in het portaal */
.halo2 .hv-eyebrow{display:inline-block;margin-bottom:18px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}

/* Pakketten (#hl-plans) */
.halo2 .hv-plans{padding:clamp(80px,10vw,130px) 0 clamp(60px,8vw,100px);border-top:1px solid var(--line)}
.halo2 .hv-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px;align-items:stretch}
.halo2 .hv-plan{position:relative;display:flex;flex-direction:column;padding:28px;border-radius:20px;background:var(--ink-1);border:1px solid var(--line);transition:transform .5s var(--spring),border-color .3s,box-shadow .3s}
.halo2 .hv-plan:hover{transform:translateY(-4px);border-color:var(--line-2)}
.halo2 .hv-plan.is-feat{border-color:rgba(131,232,244,.55);background:radial-gradient(120% 90% at 100% 0%,rgba(131,232,244,.08),transparent 55%),var(--ink-1);box-shadow:0 0 0 1px rgba(131,232,244,.2),0 30px 60px -30px rgba(131,232,244,.45)}
.halo2 .hv-plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.halo2 .hv-plan h3{font-size:24px;letter-spacing:-.02em}
.halo2 .hv-plan-brand{color:var(--soft)}
.halo2 .hv-chip{flex:none;padding:4px 10px;border-radius:999px;background:var(--cyan);color:var(--ink);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.halo2 .hv-plan-pages{margin-top:6px;font-size:14px;color:var(--mute)}
.halo2 .hv-plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.halo2 .hv-plan-price b{font-size:clamp(40px,4vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1}
.halo2 .hv-plan-price span{font-size:15px;color:var(--soft)}
.halo2 .hv-plan-list{display:grid;gap:12px;margin:22px 0 28px;padding:0;list-style:none;font-size:15px;color:var(--soft)}
.halo2 .hv-plan-list li{display:flex;align-items:flex-start;gap:10px}
.halo2 .hv-plan-list svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--cyan)}
.halo2 .hv-btn-block{width:100%;margin-top:auto;white-space:normal;text-align:center}
.halo2 .hv-plan-more{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:16px}
.halo2 .hv-plan-more .hv-for{margin-top:0;padding:24px 28px;border-radius:20px;border:1px solid var(--line);background:var(--ink-1)}
.halo2 .hv-ext{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-radius:20px;border:1px solid var(--line);background:var(--ink-1)}
.halo2 .hv-ext small{display:block;margin-bottom:4px;font-size:13px;color:var(--mute)}
.halo2 .hv-ext p{font-size:14.5px;color:var(--soft)}
.halo2 .hv-ext-n{font-size:14px;color:var(--soft);white-space:nowrap}
.halo2 .hv-ext-n b{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.halo2 .hv-note{margin-top:22px;text-align:center;font-size:13px;color:var(--mute)}

/* Aanvraagformulier (#hl-form): velden en ids zoals voorheen, opmaak in de stijl van het portaalvenster */
.halo2 .hv-form-sec{position:relative;padding:clamp(70px,9vw,120px) 0 clamp(80px,10vw,130px);border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
.halo2 .hv-form-sec::before{content:"";position:absolute;right:-220px;top:-240px;width:900px;height:720px;background:radial-gradient(closest-side,rgba(110,59,239,.28),rgba(131,232,244,.08) 55%,transparent);z-index:-1;pointer-events:none}
.halo2 .hv-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.halo2 .hv-form-copy h2{font-size:clamp(34px,4.8vw,60px)}
.halo2 .hv-form-steps{display:grid;gap:18px;margin:32px 0 0;padding:0;list-style:none}
.halo2 .hv-form-steps li{display:flex;gap:16px;padding-top:16px;border-top:1px solid var(--line-2)}
.halo2 .hv-form-steps li>span{padding-top:3px;font-size:12px;color:var(--cyan);font-variant-numeric:tabular-nums}
.halo2 .hv-form-steps b{display:block;margin-bottom:4px;font-size:16px;font-weight:600}
.halo2 .hv-form-steps p{font-size:14.5px;color:var(--soft)}
.halo2 .hv-who{display:flex;align-items:center;gap:14px;margin-top:34px}
.halo2 .hv-who img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2)}
.halo2 .hv-who b{display:block;font-weight:600}
.halo2 .hv-who span{display:block;font-size:13px;color:var(--soft)}
.halo2 .hv-who .hv-who-k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.halo2 .hv-who-d{max-width:460px;margin-top:16px;font-size:14.5px;color:var(--soft)}
.halo2 .hv-form-box{position:relative;padding:clamp(22px,3vw,34px);border-radius:22px;background:linear-gradient(180deg,#1D2131,#161926);border:1px solid var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 40px 80px -30px rgba(0,0,0,.7)}
.halo2 .hv-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.halo2 .hv-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.halo2 .hv-field label{font-size:14px;font-weight:600;color:var(--text)}
.halo2 .hv-req{color:var(--cyan)}
.halo2 .hv-opt-k{font-weight:500;color:var(--soft)}
.halo2 .hv-input{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);color:var(--text);font-size:16px;line-height:1.3;transition:border-color .2s,box-shadow .2s,background-color .2s}
.halo2 select.hv-input{-webkit-appearance:none;appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383E8F4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
/* native select met de eigen lijst van de browser; color-scheme zorgt dat die lijst bij het thema past */
.halo2 select.hv-input{color-scheme:dark;cursor:pointer}
.halo2 .hv-input::placeholder{color:#9DA2B6}
.halo2 .hv-input:hover{border-color:rgba(255,255,255,.36)}
.halo2 .hv-input:focus{outline:none;border-color:var(--cyan);background-color:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(131,232,244,.22)}
.halo2 .hv-input[aria-invalid="true"]{border-color:#FF9C9C}
.halo2 .hv-err{font-size:13px;color:#FF9C9C}
.halo2 .hv-hint{font-size:12.5px;color:var(--soft)}
.halo2 .hv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.halo2 .hv-status{margin:4px 0 14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,156,156,.45);background:rgba(255,156,156,.1);color:#FFC9C9;font-size:14px}
.halo2 .hv-form-box .hv-btn-block{min-height:52px;margin-top:6px;font-size:16px}
.halo2 .hv-reassure{margin-top:12px;text-align:center;font-size:13.5px;color:var(--soft)}
.halo2 .hv-privacy{margin-top:8px;text-align:center;font-size:12.5px;color:var(--soft)}
.halo2 .hv-privacy a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.halo2 .pt-done{padding:24px 6px;text-align:center}
.halo2 .pt-done:focus{outline:none}
.halo2 .pt-done strong{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em}
.halo2 .pt-done p{margin-top:10px;color:var(--soft)}

@media (max-width:980px){
  .halo2 .hv-plan-grid,.halo2 .hv-plan-more{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .halo2 .hv-form-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .halo2 .hv-row{grid-template-columns:1fr;gap:0}
  .halo2 .hv-plan{padding:22px}
  .halo2 .hv-ext{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .halo2 .hv-plan:hover{transform:none}
}

/* ==========================================================================
   Lichte versie (main.halo2.halo2--light), 27 okt 2026: keuze via INSPACE_HALO_THEME /
   filter inspace_halo_theme, bekijken met ?halo-theme=light. Standaard blijft donker.
   Alles hieronder overschrijft alleen kleuren; maten en beweging zijn die van het ontwerp.
   Kleuren: achtergrond Moondust #F5F6F3 en wit, tekst #0B0B0C. De accenten van HALO blijven,
   maar cyaan als tekst haalt op licht geen AA (1,3:1): tekst en iconen gebruiken daarom een
   donker petrol #0A6F7C (5,4:1), de verloopkoppen een donkerder verloop (grote tekst, min. 3:1).
   Contrast op #F5F6F3: tekst 18:1, --soft 7,6:1, --mute 5,2:1, gedimd statement 3,1:1 (grote tekst).
   ========================================================================== */
.halo2.halo2--light{
  --text:#0B0B0C;--soft:#4A4F5C;--mute:#626776;--line:rgba(11,11,12,.09);--line-2:rgba(11,11,12,.16);
  --ink-1:#FFFFFF;--ink-3:#E3E5EB;--hv-acc:#0A6F7C;--hv-bg:#F5F6F3;
  --grad:linear-gradient(100deg,#0A8496 0%,#7B52F0 30%,#6E3BEF 50%,#7B52F0 70%,#0A8496 100%);
  background:var(--hv-bg);color:var(--text);-webkit-font-smoothing:auto}
.halo2.halo2--light :focus-visible{outline-color:var(--hv-acc)}

/* knoppen: primair donker met witte tekst, secundair een lijn */
.halo2.halo2--light .hv-btn-main{background:#0B0B0C;color:#fff;box-shadow:0 10px 30px -12px rgba(110,59,239,.45)}
.halo2.halo2--light .hv-btn-main:hover{background:#24262C;box-shadow:0 14px 40px -10px rgba(110,59,239,.6)}
.halo2.halo2--light .hv-btn-alt{background:#fff;border-color:var(--line-2)}
.halo2.halo2--light .hv-btn-alt:hover{background:#fff;border-color:rgba(11,11,12,.32)}

/* hero */
.halo2.halo2--light .hv-pill{background:rgba(255,255,255,.75);color:var(--soft)}
.halo2.halo2--light .hv-pill:hover{border-color:rgba(10,111,124,.45)}
.halo2.halo2--light .hv-hero::before{background:radial-gradient(closest-side,rgba(110,59,239,.12),transparent 70%)}
.halo2.halo2--light .hv-hero::after{background:linear-gradient(to bottom,transparent,var(--hv-bg))}
.halo2.halo2--light .hv-hero .hv-notes li::before{background:var(--hv-acc);box-shadow:none}
.halo2.halo2--light .hv-aurora.hv-on{opacity:.55}
.halo2.halo2--light .hv-stage .hv-glow{background:radial-gradient(closest-side,rgba(131,232,244,.55),rgba(110,59,239,.22) 55%,transparent 75%)}
.halo2.halo2--light .hv-stage .hv-ring{border-color:rgba(11,11,12,.08)}
.halo2.halo2--light .hv-stage .hv-ring.hv-r2{border-color:rgba(10,111,124,.28)}
.halo2.halo2--light .hv-stage .hv-ring.hv-r3{border-color:rgba(110,59,239,.10)}
.halo2.halo2--light .hv-stage .hv-ring.hv-r2::after{background:var(--hv-acc);box-shadow:0 0 12px 2px rgba(10,111,124,.45)}
.halo2.halo2--light .hv-stage .hv-wave{border-color:rgba(10,111,124,.45)}
.halo2.halo2--light .hv-stage .hv-wave.hv-l{border-color:rgba(110,59,239,.4)}
.halo2.halo2--light .hv-say .hv-who i{background:var(--hv-acc);box-shadow:0 0 8px rgba(10,111,124,.6)}
.halo2.halo2--light .hv-say .hv-bub{background:rgba(255,255,255,.9);box-shadow:0 20px 40px -22px rgba(11,11,12,.35)}
.halo2.halo2--light .hv-say .hv-caret{background:var(--hv-acc)}

/* logo's: zwart in plaats van wit (zelfde bestanden, andere filter) */
.halo2.halo2--light .hv-logo-row img{filter:brightness(0);opacity:.6}
.halo2.halo2--light .hv-logo-row img:hover{opacity:1}

/* statement */
.halo2.halo2--light .hv-statement .hv-dim{color:#868B98}

/* portaalvenster: licht venster op een zachte gloed */
.halo2.halo2--light .hv-win-wrap::before{background:radial-gradient(closest-side,rgba(110,59,239,.22),rgba(131,232,244,.18) 60%,transparent)}
.halo2.halo2--light .hv-win{background:linear-gradient(180deg,#FFFFFF,#F8F9FB);box-shadow:0 1px 0 #fff inset,0 40px 80px -36px rgba(11,11,12,.35)}
.halo2.halo2--light .hv-win::after{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 45%,transparent 60%);background-size:250% 100%;background-position:calc(var(--t,0)*200% - 50%) 0}
.halo2.halo2--light .hv-win-bar i,.halo2.halo2--light .hv-site .hv-bar i{background:#D5D8E0}
.halo2.halo2--light .hv-win-bar span{background:rgba(11,11,12,.04)}
.halo2.halo2--light .hv-prog{background:var(--hv-bg)}
.halo2.halo2--light .hv-prog .hv-bar i{background:linear-gradient(90deg,#0A8496,#7B52F0)}
.halo2.halo2--light .hv-side li:not(.hv-now):not(.hv-next)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230A6F7C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.halo2.halo2--light .hv-side li.hv-now{background:rgba(10,111,124,.07);box-shadow:0 0 0 1px rgba(10,111,124,.3) inset}
.halo2.halo2--light .hv-side li.hv-now::before{background:none;border-color:var(--hv-acc)}
.halo2.halo2--light .hv-main small{color:var(--hv-acc)}
.halo2.halo2--light .hv-opt{background:#fff}
.halo2.halo2--light .hv-opt.hv-sel{border-color:rgba(10,111,124,.7);box-shadow:0 0 0 3px rgba(10,111,124,.12),0 18px 40px -18px rgba(10,111,124,.45)}
.halo2.halo2--light .hv-acts span:first-child{background:#0B0B0C;color:#fff}
.halo2.halo2--light .hv-steps div::after{background:linear-gradient(90deg,#0A8496,#7B52F0)}
.halo2.halo2--light .hv-steps b::before{color:var(--hv-acc)}

/* kleurband: het verloop blijft, maar licht overgoten; tekst en kaarten donker op licht */
.halo2.halo2--light .hv-band::after{background:radial-gradient(600px circle at var(--bx,50%) var(--by,30%),rgba(255,255,255,.35),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.62))}
.halo2.halo2--light .hv-band .hv-shead h2{color:#0B0B0C;text-shadow:none}
.halo2.halo2--light .hv-band .hv-shead p{color:#1F2229}
.halo2.halo2--light .hv-loop .hv-card{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.9);box-shadow:0 20px 50px -30px rgba(11,11,12,.35)}
.halo2.halo2--light .hv-loop .hv-card:hover{border-color:#fff}
.halo2.halo2--light .hv-loop .hv-card.hv-lit{border-color:rgba(10,111,124,.55);box-shadow:0 0 0 1px rgba(10,111,124,.2),0 24px 60px -24px rgba(10,111,124,.55)}
.halo2.halo2--light .hv-soon{color:#5B2BD9;border-color:rgba(110,59,239,.45)}

/* inbegrepen */
.halo2.halo2--light .hv-grid{background:#fff}
.halo2.halo2--light .hv-grid::before{background:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(10,111,124,.07),transparent 60%)}
.halo2.halo2--light .hv-cell .hv-ic{background:linear-gradient(180deg,#FFFFFF,#F1F2F5);color:var(--hv-acc)}
.halo2.halo2--light .hv-cell:hover .hv-ic{box-shadow:0 10px 24px -10px rgba(10,111,124,.45)}

/* werk */
.halo2.halo2--light .hv-site:hover{border-color:rgba(10,111,124,.4);box-shadow:0 30px 60px -32px rgba(11,11,12,.35)}
.halo2.halo2--light .hv-site .hv-go{color:var(--hv-acc)}
.halo2.halo2--light .hv-for span{background:#fff}
.halo2.halo2--light .hv-for span:hover{border-color:rgba(110,59,239,.45);background:rgba(110,59,239,.05)}

/* inspace en afsluiter */
.halo2.halo2--light .hv-partner .hv-box::after{background:radial-gradient(120% 140% at 100% 0%,rgba(131,232,244,.14),transparent 55%),#fff}
.halo2.halo2--light .hv-close::before{background:radial-gradient(closest-side,rgba(110,59,239,.2),rgba(131,232,244,.14) 55%,transparent)}
.halo2.halo2--light .hv-halo-orb img{filter:drop-shadow(0 20px 40px rgba(110,59,239,.25))}
.halo2.halo2--light .hv-halo-orb i{border-color:rgba(10,111,124,.25)}
.halo2.halo2--light .hv-halo-orb i+i{border-color:rgba(110,59,239,.2)}

/* pakketten en formulier */
.halo2.halo2--light .hv-eyebrow,.halo2.halo2--light .hv-who .hv-who-k,.halo2.halo2--light .hv-form-steps li>span,.halo2.halo2--light .hv-req{color:var(--hv-acc)}
.halo2.halo2--light .hv-plan.is-feat{border-color:rgba(10,111,124,.55);background:radial-gradient(120% 90% at 100% 0%,rgba(131,232,244,.16),transparent 55%),#fff;box-shadow:0 0 0 1px rgba(10,111,124,.15),0 30px 60px -34px rgba(10,111,124,.5)}
.halo2.halo2--light .hv-plan-list svg{color:var(--hv-acc)}
.halo2.halo2--light .hv-form-sec::before{background:radial-gradient(closest-side,rgba(110,59,239,.14),rgba(131,232,244,.12) 55%,transparent)}
.halo2.halo2--light .hv-form-box{background:#fff;box-shadow:0 40px 80px -40px rgba(11,11,12,.3)}
.halo2.halo2--light .hv-input{border-color:rgba(11,11,12,.22);background-color:#fff}
.halo2.halo2--light select.hv-input{color-scheme:light}
.halo2.halo2--light select.hv-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6F7C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.halo2.halo2--light .hv-input::placeholder{color:#6B7080}
.halo2.halo2--light .hv-input:hover{border-color:rgba(11,11,12,.36)}
.halo2.halo2--light .hv-input:focus{border-color:var(--hv-acc);background-color:#fff;box-shadow:0 0 0 3px rgba(10,111,124,.18)}
.halo2.halo2--light .hv-input[aria-invalid="true"]{border-color:#B42318}
.halo2.halo2--light .hv-err{color:#B42318}
.halo2.halo2--light .hv-status{border-color:rgba(180,35,24,.35);background:rgba(180,35,24,.06);color:#8A1C12}
.halo2.halo2--light .hv-privacy a{color:var(--hv-acc)}

/* ==========================================================================
   Keuzelijst in de stijl van de site (assets/halo-v2.js, over de echte <select>), beide thema's.
   De knop is een .hv-input, dus rand, radius 12px, padding, letter en focusring zijn die van de
   andere velden. Rijen minstens 44px hoog (tikdoel), ook op mobiel: geen systeemkiezer.
   ========================================================================== */
.halo2 .hv-dd{position:relative}
.halo2 .hv-dd-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0!important;opacity:0;pointer-events:none}
.halo2 .hv-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer}
.halo2 .hv-dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.halo2 .hv-dd-chev{flex:none;display:grid;place-items:center;width:18px;height:18px;color:var(--cyan);transition:transform .25s var(--ease)}
.halo2 .hv-dd-chev svg{width:18px;height:18px}
.halo2 .hv-dd.is-open .hv-dd-chev{transform:rotate(180deg)}
.halo2 .hv-dd.is-open .hv-dd-btn{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(131,232,244,.22)}
.halo2 .hv-dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:min(320px,60vh);margin:0;padding:6px;list-style:none;overflow:auto;overscroll-behavior:contain;border-radius:12px;background:#1C2030;border:1px solid var(--line-2);box-shadow:0 24px 48px -16px rgba(0,0,0,.65);animation:hv-dd-in .16s var(--ease) both}
.halo2 .hv-dd-list:focus{outline:none}
@keyframes hv-dd-in{from{opacity:0;transform:translateY(-4px)}}
.halo2 .hv-dd-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;border-radius:8px;color:var(--text);font-size:16px;line-height:1.3;cursor:pointer;-webkit-user-select:none;user-select:none}
.halo2 .hv-dd-opt.is-active{background:rgba(131,232,244,.12)}
.halo2 .hv-dd-opt[aria-selected="true"]{font-weight:600}
.halo2 .hv-dd-opt[aria-selected="true"]::after{content:"";flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383E8F4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/18px no-repeat}
.halo2.halo2--light .hv-dd-chev{color:var(--hv-acc)}
.halo2.halo2--light .hv-dd.is-open .hv-dd-btn{border-color:var(--hv-acc);box-shadow:0 0 0 3px rgba(10,111,124,.18)}
.halo2.halo2--light .hv-dd-list{background:#fff;border-color:rgba(11,11,12,.12);box-shadow:0 24px 48px -20px rgba(11,11,12,.28),0 2px 6px rgba(11,11,12,.06)}
.halo2.halo2--light .hv-dd-opt.is-active{background:rgba(10,111,124,.08)}
.halo2.halo2--light .hv-dd-opt[aria-selected="true"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6F7C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* Shopify- en WordPress-logo in de pil "In iedere website": 16px, 6px voor de naam. De bestanden
   zijn monochroom donker; op het donkere thema maakt de filter ze licht. */
.halo2 .hv-for span.hv-cms{display:inline-flex;align-items:center;gap:6px}
.halo2 .hv-cms-logo{flex:none;width:16px;height:16px;filter:invert(1) brightness(.92)}
.halo2.halo2--light .hv-cms-logo{filter:none}