/* ============================================================
   NextGenSolutions — Design System v3
   Brand: #1E40AF (logo-blauw) · Clash Display + Satoshi
   Gebouwd op Impeccable-richtlijnen + Vengeance UI-motion.
   Fonts self-hosted (assets/fonts) — geen externe CDN nodig.
   ============================================================ */

@font-face{font-family:'Clash Display';src:url('./assets/fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('./assets/fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('./assets/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('./assets/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('./assets/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('./assets/fonts/jetbrains-mono.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --bg:#F6F6F5;
  --surface:#FFFFFF;
  --ink:#0B0D14;
  --body:#3B3F4A;
  --muted:#70747f;
  --line:rgba(11,13,20,.11);
  --line-soft:rgba(11,13,20,.065);
  --blue:#1E40AF;
  --blue-bright:#3B62E4;
  --blue-glow:rgba(59,98,228,.30);
  --blue-soft:rgba(30,64,175,.06);
  --night:#05060B;
  --night-2:#0A0C14;
  --night-line:rgba(240,243,255,.10);
  --night-text:rgba(226,231,244,.72);
  --night-muted:rgba(226,231,244,.46);
  --rust:#B5442A;
  --r-card:16px;
  --r-pill:999px;
  --ease:cubic-bezier(.2,.65,.3,.9);
  --ease-exp:cubic-bezier(.16,1,.3,1);
  --font-d:'Clash Display','Satoshi',system-ui,sans-serif;
  --font-b:'Satoshi',system-ui,sans-serif;
  --font-m:'Satoshi',system-ui,sans-serif;
  --font-code:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:1.0625rem;line-height:1.65;font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote,address,ul,ol,li,form{margin:0}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-bright)}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
input,textarea,select{font:inherit;color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding-left:clamp(18px,4.5vw,44px);padding-right:clamp(18px,4.5vw,44px)}
.wrap-narrow{max-width:1000px;margin:0 auto;padding-left:clamp(18px,4.5vw,44px);padding-right:clamp(18px,4.5vw,44px)}
.section{padding-top:clamp(4rem,8.5vw,7.5rem);padding-bottom:clamp(4rem,8.5vw,7.5rem);position:relative}
.section-tight{padding-top:clamp(2.75rem,5.5vw,4.5rem);padding-bottom:clamp(2.75rem,5.5vw,4.5rem);position:relative}

/* ---------- typografie ---------- */
.h-hero{font-family:var(--font-d);font-weight:600;font-size:clamp(2.7rem,5vw,4.75rem);letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.h-1{font-family:var(--font-d);font-weight:600;font-size:clamp(2.1rem,4vw,3.3rem);letter-spacing:-.015em;line-height:1.06;text-wrap:balance}
.h-2{font-family:var(--font-d);font-weight:600;font-size:clamp(1.6rem,2.7vw,2.2rem);letter-spacing:-.01em;line-height:1.12;text-wrap:balance}
.h-3{font-family:var(--font-d);font-weight:600;font-size:clamp(1.3rem,2vw,1.55rem);letter-spacing:-.005em;line-height:1.2}
.lede{font-size:clamp(1.08rem,1.55vw,1.3rem);line-height:1.6;color:var(--body);text-wrap:pretty}
.night .lede{color:var(--night-text)}
.txt{font-size:1.0625rem;line-height:1.68;color:var(--body);text-wrap:pretty}
.night .txt{color:var(--night-text)}
.mono{font-family:var(--font-b);font-weight:500;font-size:.85rem;color:var(--muted)}
.accent{color:var(--blue-bright)}
.grad-text{color:var(--blue-bright)}
.eyebrow{display:none}

/* ---------- knoppen (Vengeance "Animated Button": shine-sweep + spring press) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;border-radius:var(--r-pill);font-family:var(--font-b);font-weight:700;font-size:1rem;letter-spacing:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s ease,color .25s ease,border-color .25s ease;white-space:nowrap}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 26px -10px var(--blue-glow)}
.btn-primary:hover{color:#fff;background:var(--blue-bright);transform:translateY(-1px) scale(1.01);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 16px 34px -10px var(--blue-glow)}
.btn-primary::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.32) 50%,transparent 80%);transform:translateX(-180%) skewX(-18deg);animation:btnShine 5.5s var(--ease) infinite}
@keyframes btnShine{0%,72%{transform:translateX(-180%) skewX(-18deg)}88%,100%{transform:translateX(340%) skewX(-18deg)}}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:#fff;transform:translateY(-1px)}
.night .btn-ghost{border-color:var(--night-line);color:#fff;background:rgba(255,255,255,.05)}
.night .btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09);color:#fff}
.btn-sm{padding:11px 20px;font-size:.9rem}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-weight:700;font-size:.95rem;color:var(--blue)}
.link-arrow svg{transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- kaarten ---------- */
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease;position:relative}
.card-hover:hover{transform:translateY(-4px);border-color:rgba(30,64,175,.25);box-shadow:0 20px 40px -22px rgba(11,13,20,.18)}
.card-glow{position:relative;overflow:hidden}
.card-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--blue-soft),transparent 65%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.card-glow:hover::before{opacity:1}
.night-card{background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:var(--r-card)}
.top-accent::after{content:none}

/* ---------- conic glow-rand (Vengeance "Glow Border Card") ---------- */
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}
.glow-frame{position:relative;border-radius:calc(var(--r-card) + 6px)}
.glow-frame::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;background:conic-gradient(from var(--ga),rgba(59,98,228,0) 0%,rgba(59,98,228,.85) 12%,rgba(143,165,240,.5) 20%,rgba(59,98,228,0) 34%,rgba(59,98,228,0) 60%,rgba(30,64,175,.6) 78%,rgba(59,98,228,0) 92%);animation:glowSpin 5.5s linear infinite;pointer-events:none}
.glow-frame::after{content:"";position:absolute;inset:-14px;border-radius:inherit;background:conic-gradient(from var(--ga),rgba(59,98,228,0) 0%,rgba(59,98,228,.4) 14%,rgba(59,98,228,0) 32%);filter:blur(24px);animation:glowSpin 5.5s linear infinite;pointer-events:none;z-index:-1}
@keyframes glowSpin{to{--ga:360deg}}

/* ---------- achtergrond-sfeer ---------- */
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.orb-blue{background:radial-gradient(circle,rgba(59,98,228,.20),transparent 65%)}
.orb-deep{background:radial-gradient(circle,rgba(30,64,175,.32),transparent 65%)}
.night{background:var(--night);color:#fff}
.night .txt,.night p{letter-spacing:.005em}
.hairline{border-top:1px solid var(--line)}

/* lichtlijnen voor donkere secties (Vengeance "Light Lines") */
.night-flow{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.night-flow span{position:absolute;top:0;bottom:0;width:1px;background:rgba(240,243,255,.05)}
.night-flow span::before{content:"";position:absolute;left:0;width:1px;height:140px;background:linear-gradient(180deg,transparent,rgba(120,150,245,.9),transparent);animation:flowDown 7s linear infinite}
.night-flow span:nth-child(1){left:12%}.night-flow span:nth-child(1)::before{animation-duration:8.5s;animation-delay:-2s}
.night-flow span:nth-child(2){left:30%}.night-flow span:nth-child(2)::before{animation-duration:6.5s;animation-delay:-4.5s}
.night-flow span:nth-child(3){left:50%}.night-flow span:nth-child(3)::before{animation-duration:9.5s;animation-delay:-1s}
.night-flow span:nth-child(4){left:70%}.night-flow span:nth-child(4)::before{animation-duration:7.2s;animation-delay:-5.8s}
.night-flow span:nth-child(5){left:88%}.night-flow span:nth-child(5)::before{animation-duration:8.2s;animation-delay:-3.2s}
@keyframes flowDown{from{top:-160px}to{top:110%}}

/* ---------- reveal-animaties (verrijken zichtbare default; JS zet .will-reveal enkel onder de vouw) ---------- */
.will-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-exp),transform .8s var(--ease-exp)}
.will-reveal.is-in{opacity:1;transform:none}
[data-reveal-stagger].will-reveal{opacity:1;transform:none;transition:none}
[data-reveal-stagger].will-reveal>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-exp),transform .7s var(--ease-exp)}
[data-reveal-stagger].will-reveal.is-in>*{opacity:1;transform:none}
[data-reveal-stagger].will-reveal.is-in>*:nth-child(2){transition-delay:.08s}
[data-reveal-stagger].will-reveal.is-in>*:nth-child(3){transition-delay:.16s}
[data-reveal-stagger].will-reveal.is-in>*:nth-child(4){transition-delay:.24s}
[data-reveal-stagger].will-reveal.is-in>*:nth-child(5){transition-delay:.32s}
[data-reveal-stagger].will-reveal.is-in>*:nth-child(6){transition-delay:.4s}
[data-reveal-stagger].will-reveal.is-in>*:nth-child(7){transition-delay:.48s}
[data-reveal-stagger].will-reveal.is-in>*:nth-child(8){transition-delay:.56s}

/* ---------- flip-fade woordcycler (Vengeance "Flip Fade Text") ---------- */
[data-flip-stage]{display:inline-block;perspective:600px}
[data-flip-word]{display:inline-block;transform-origin:50% 100%}
.flip-in{animation:flipIn .6s cubic-bezier(.2,.65,.3,.9) both}
.flip-out{animation:flipOut .4s ease-in both}
@keyframes flipIn{from{opacity:0;transform:rotateX(90deg) translateY(20px);filter:blur(8px)}to{opacity:1;transform:rotateX(0) translateY(0);filter:blur(0)}}
@keyframes flipOut{from{opacity:1;transform:rotateX(0) translateY(0);filter:blur(0)}to{opacity:0;transform:rotateX(-90deg) translateY(-20px);filter:blur(8px)}}

/* ---------- glijdende rij-highlight (Vengeance "Highlight Grid") ---------- */
[data-glide]{position:relative}
[data-glide-bar]{position:absolute;left:0;right:0;border-radius:12px;background:var(--blue-soft);opacity:0;transition:top .25s var(--ease),height .25s var(--ease),opacity .25s ease;pointer-events:none}
[data-glide]:hover [data-glide-bar]{opacity:1}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:28px;padding:0 14px;font-family:var(--font-d);font-weight:500;font-size:1.05rem;color:var(--muted);white-space:nowrap}
.marquee-item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-bright);opacity:.5}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- navigatie ---------- */
.ngs-nav{position:fixed;top:0;left:0;right:0;z-index:70;transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;border-bottom:1px solid transparent}
.ngs-nav.is-scrolled{background:rgba(246,246,245,.85);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--line-soft);box-shadow:0 12px 32px -20px rgba(11,13,20,.16)}
.ngs-nav-inner{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4.5vw,44px);height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:height .35s var(--ease)}
.ngs-nav.is-scrolled .ngs-nav-inner{height:64px}
.nav-link{position:relative;color:var(--ink);font-family:var(--font-b);font-weight:500;font-size:.9375rem;padding:8px 2px;transition:color .2s ease}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;border-radius:2px;background:var(--blue-bright);transition:right .3s var(--ease)}
.nav-link:hover{color:var(--blue)}
.nav-link:hover::after,.nav-link.is-active::after{right:0}
.nav-link.is-active{color:var(--blue)}

/* ---------- formulieren ---------- */
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:1rem;transition:border-color .25s ease,box-shadow .25s ease}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-bright);box-shadow:0 0 0 4px rgba(59,98,228,.12)}
.field [aria-invalid="true"]{border-color:var(--rust)!important}
.field label{display:block;font-family:var(--font-b);font-weight:500;font-size:.875rem;color:var(--ink);margin-bottom:8px}
.f-err{margin-top:7px;font-size:.85rem;color:var(--rust)}

/* ---------- sliders ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--blue-bright) var(--fill,50%),rgba(240,243,255,.14) var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#fff;border:2px solid var(--blue-bright);box-shadow:0 0 0 5px rgba(59,98,228,.16);transition:transform .2s var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(240,243,255,.14)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--blue-bright)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--blue-bright);box-shadow:0 0 0 5px rgba(59,98,228,.16)}

/* ---------- divers ---------- */
.chip{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(255,255,255,.6);font-family:var(--font-b);font-weight:500;font-size:.875rem;color:var(--body)}
.night .chip{border-color:var(--night-line);background:rgba(255,255,255,.05);color:var(--night-text)}
.chip-dot{width:7px;height:7px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 10px var(--blue-glow)}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
[data-skip]{position:absolute;left:14px;top:-70px;z-index:100;background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;transition:top .2s ease}
[data-skip]:focus{top:12px}
.num-ghost{font-family:var(--font-d);font-weight:600;font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;color:rgba(30,64,175,.28);letter-spacing:-.01em}
.night .num-ghost{color:rgba(122,150,245,.4)}

/* ---------- paginatransitie: rustige fade-in bij elke navigatie ---------- */
main{animation:pageIn .8s cubic-bezier(.27,0,.51,1) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* ---------- bento-microvisuals (Herkenbaar) ---------- */
.mv{position:relative;height:64px;margin-top:1.3rem;display:flex;align-items:center;gap:10px}
.mv-win{width:74px;height:52px;border:1px solid var(--line);border-radius:8px;background:#fff;position:relative;overflow:hidden}
.mv-win::before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.mv-win i{position:absolute;left:10px;height:4px;border-radius:2px;background:var(--line)}
.mv-dot-run{width:9px;height:9px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 10px var(--blue-glow);animation:mvHop 2.6s var(--ease) infinite}
@keyframes mvHop{0%,12%{transform:translateX(0);opacity:1}42%,62%{transform:translateX(86px);opacity:1}88%,100%{transform:translateX(0);opacity:1}}
.mv-cell{width:26px;height:18px;border:1px solid var(--line);background:#fff}
.mv-grid{display:grid;grid-template-columns:repeat(4,26px);grid-auto-rows:18px;gap:0}
.mv-grid .mv-cell:nth-child(6){animation:mvBlink 1.8s step-end infinite}
@keyframes mvBlink{0%,100%{background:#fff}50%{background:rgba(30,64,175,.18)}}
.mv-klok{width:52px;height:52px;border-radius:50%;border:2px solid var(--line);position:relative}
.mv-klok::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:19px;background:var(--blue-bright);transform-origin:top center;animation:mvDraai 6s linear infinite}
.mv-klok::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--ink)}
@keyframes mvDraai{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.mv-keten{display:flex;align-items:center;gap:8px}
.mv-keten b{width:11px;height:11px;border-radius:50%;background:var(--blue)}
.mv-keten i{width:22px;height:2px;background:rgba(30,64,175,.3)}
.mv-keten b:nth-child(5){animation:mvWeg 3.2s ease-in-out infinite}
.mv-keten i:nth-child(6),.mv-keten b:nth-child(7),.mv-keten i:nth-child(4){animation:mvVaag 3.2s ease-in-out infinite}
@keyframes mvWeg{0%,35%{opacity:1;transform:scale(1)}55%,80%{opacity:.12;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes mvVaag{0%,35%{opacity:1}55%,80%{opacity:.2}100%{opacity:1}}

@media (max-width:900px){
  html{scroll-padding-top:80px}
  .ngs-nav-inner{height:66px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .will-reveal,[data-reveal-stagger].will-reveal>*{opacity:1!important;transform:none!important}
  .marquee-track,.btn-primary::after,.glow-frame::before,.glow-frame::after,.night-flow span::before{animation:none}
  main{animation:none}
}