/* nxtupdigital.com, versie 2 (1 oktober 2026)
   Naar de Dribbble-shot "Digital Marketing Agency Website" (NextGen.ai): bijna zwart
   nachtblauw, blauwe gloed rechtsboven, fijn raster, gecentreerde kop met een woord in
   logoblauw en een cursieve regel, pilletjes, ronde knoppen.
   Logoblauw #007FFD is gesampled uit het nieuwe logo.
   Afronding 1 oktober 2026: platformlogo's (.plats), tweede hero-knop, statement-blok,
   strakkere knoppen en pills, zichtbare focus op knoppen, menu en logo's,
   toetsenbordtoegankelijk mobiel menu.
   Herstelronde W2: hero-logo's als doorlopende band (.marquee), menu-vinkje alleen op mobiel
   focusbaar, optische correctie per logo, tegels zonder hover.
   W4: stats met 2 items, gecentreerd in een smallere band (ook op mobiel naast elkaar).
   W3: werkwijze op /agency met 5 stappen (.steps-5): desktop 1 rij van 5 met een dunne
   verbindingslijn, kleiner dan 1020px een gestapelde lijst met het nummer links.
   W5: langere missie; citaat op /about iets kleiner en smaller, missiezin op /what-we-do
   als eigen regel onder de kop (.split-mission).
   W7: opstijgende logopijl in de hero van home (.hero-arrow), alleen CSS.
   W8: wereldbol van het visitekaartje (.hz horizon, .cta-globe bol-netwerk).
   W9: feller, hero-horizon als bol, netwerk links (.hz-net), bol achter payments (.pay-globe).
   W10: hero-bol gecentreerd (.hero-globe), loopt naadloos door naar "Who we are"; hero
   zonder dichte achtergrond, raster in .hero::before dat onderaan wegvaagt; hero-
   verhoudingen weer als v9-voor-wereldbol.
   W11: netwerk achter payments (.pay-net) in plaats van de bol; productkaarten zonder foto.
   W12: split-beelden zijn visuals in code (.split-viz): platform-netwerk, wereldkaart, groei.
   W13: home Channels zonder tegels; tekst gecentreerd boven een brede netwerkvisual (.viz-wide).
   W14: fonts zelf gehost (OFL, /fonts), float-card weg, pijlstam vaagt weg voor de logoband,
   hero pauzeert buiten beeld, rustiger payments-netwerk, footerkoppen als h2, dode CSS weg. */

/* W14: Inter en Inter Tight zelf gehost (latin, variabel, OFL 1.1, licenties in /fonts) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/inter-tight-latin.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:italic;font-weight:500 600;font-display:swap;
  src:url(/fonts/inter-tight-italic-latin.woff2) format("woff2")}

:root{
  --bg:#050A1A; --bg2:#081127; --panel:#0D1830; --panel2:#11203F;
  --line:rgba(140,180,255,.14); --line2:rgba(140,180,255,.26);
  --ink:#F3F6FF; --ink2:#B6C2DD; --muted:#7D8BAA;
  --blue:#007FFD; --blue2:#2E9BFF; --cyan:#22C3F5; --violet:#5B4BFF;
  --r:20px; --wrap:1200px; --gut:clamp(16px,4vw,32px);
  --head:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--blue2)}
h1,h2,h3{margin:0;font-family:var(--head);font-weight:600;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.c{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--blue);color:#fff;padding:10px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:4px}
.btn:focus-visible{border-radius:999px;outline-offset:4px}
::selection{background:rgba(0,127,253,.45);color:#fff}
.hl{color:var(--blue2)}
em{font-style:italic;font-weight:500}

/* knoppen en pilletjes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;
  border:1px solid transparent;font:600 16px/1 var(--body);letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s,color .2s}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}
.btn-main{background:linear-gradient(180deg,var(--cyan),var(--blue));color:#04101F;
  box-shadow:0 10px 30px rgba(0,127,253,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 14px 38px rgba(0,127,253,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:rgba(46,155,255,.6);background:rgba(0,127,253,.1)}
.btn:active{transform:translateY(0)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(0,127,253,.08);color:var(--ink2);font:500 13px/1 var(--body);letter-spacing:.02em}
.eyebrow{margin:0 0 14px;font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pill-glass{background:rgba(120,200,255,.12);border-color:rgba(150,210,255,.35);color:#DDEBFF;backdrop-filter:blur(8px)}
.pill .sp,.btn .sp{color:currentColor}

/* kop */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.bar.scrolled{background:rgba(5,10,26,.82);backdrop-filter:blur(14px);border-color:var(--line)}
.bar-in{display:flex;align-items:center;gap:28px;padding-block:18px}
.logo img{height:40px;width:auto}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{position:relative;color:var(--ink2);text-decoration:none;font-size:15px;font-weight:500;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--blue2);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.bar-cta{min-height:42px;padding:0 20px;font-size:14.5px}
/* het menu-vinkje bestaat op desktop niet voor het toetsenbord (geen lege tabstop);
   op mobiel is het focusbaar maar onzichtbaar, zie @media(max-width:860px) */
.menu-t{display:none}
.menu-b{display:none}

/* hero */
.hero,.phead{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:
    linear-gradient(rgba(140,180,255,.05) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(140,180,255,.05) 1px,transparent 1px) 0 0/56px 56px,
    var(--bg)}
.hero-glow{position:absolute;z-index:-1;inset:auto;right:-18%;top:-22%;width:min(1100px,110vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(34,195,245,.55),rgba(0,127,253,.32) 40%,rgba(91,75,255,.18) 65%,transparent 100%);
  filter:blur(20px);pointer-events:none}
/* W7: de pijl uit het beeldmerk stijgt bij het laden rustig op uit de onderkant van de
   hero (rechts, in de gloed, naast de kop) en ademt daarna heel traag een paar pixels.
   Buitenste laag: opstijgen + fade-in. Binnenste svg: ademen. Geen bounce, geen pulserende
   gloed; de gloed is een vaste, zachte drop-shadow. */
/* Pijlfix 1 okt: het masker zat precies om de pijl, waardoor de punt (en zijn gloed) bij het
   ademen omhoog werd afgesneden. De houder heeft nu --pad ruimte boven en opzij; de svg staat
   op dezelfde plek als voorheen en het masker loopt over dezelfde punten van de stam. */
.hero-arrow{--aw:clamp(80px,9vw,128px);--pad:48px;--ah:calc(var(--aw) * 600 / 132);
  position:absolute;z-index:-1;pointer-events:none;
  right:calc(max(calc(50% - 650px),3vw) - var(--pad));bottom:-40px;
  width:calc(var(--aw) + 2 * var(--pad));height:calc(var(--ah) + var(--pad));
  opacity:.42;animation:arrow-rise 1.7s cubic-bezier(.33,1,.68,1) .45s both;
  /* Pijlfix 2: geen mask meer; de stam vaagt weg via het verloop in de svg zelf (build.py, ARROW) */}
.hero-arrow svg{position:absolute;left:var(--pad);top:var(--pad);display:block;width:var(--aw);height:var(--ah);overflow:visible;
  filter:drop-shadow(0 0 30px rgba(0,127,253,.3));animation:arrow-breathe 7s ease-in-out 2.1s infinite alternate}
@keyframes arrow-rise{from{opacity:0;transform:translate3d(0,140px,0)}to{opacity:.42;transform:none}}
@keyframes arrow-rise-m{from{opacity:0;transform:translate3d(0,100px,0)}to{opacity:.26;transform:none}}
@keyframes arrow-breathe{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-7px,0)}}
/* W8/W9: wereldbol uit het visitekaartje. De SVG's komen uit build.py (sphere_svg,
   net_svg, globe_svg). W9: feller zoals het kaartje, maar de tekst houdt de hoofdrol.
   Sterker of zachter: pas de opacity per plek aan (zie wijzigingen-v9.md).
   Animaties pauzeren buiten beeld (.fx-off) en bij een verborgen tab (.tab-hidden),
   via motion.js. Bij prefers-reduced-motion staat alles stil (globale regel onderaan). */
.hz{position:absolute;left:0;right:0;bottom:0;z-index:-1;pointer-events:none}
.hz svg{display:block;width:100%;height:100%}
/* W10: de hero heeft geen eigen dichte achtergrond meer (de body is dezelfde kleur), het
   raster staat in ::before en vaagt onderaan weg. De bol (.hero-globe) staat bovenaan de
   volgende sectie, steekt omhoog de hero in en vaagt naar beneden weg: geen naad. */
.hero,.phead{background:none}
.hero::before,.phead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(140,180,255,.05) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(140,180,255,.05) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.sec-horizon{position:relative}
/* top van de bol 24px boven de onderkant van de hero: altijd onder de logoband, ook op 1280x800 */
.hero-globe{position:absolute;z-index:-1;pointer-events:none;left:0;right:0;overflow:hidden;
  top:calc(-5vw - 24px);height:28.75vw;opacity:.95;
  -webkit-mask-image:linear-gradient(transparent 0,#000 13%,#000 34%,transparent 78%);
  mask-image:linear-gradient(transparent 0,#000 13%,#000 34%,transparent 78%)}
.hero-globe svg{display:block;width:100%;height:100%}
/* W10: de gloed rechtsboven is groter dan een page-head en werd onderaan afgeknipt. Een
   verloop naar exact --bg onderaan (in ::after, boven gloed en bol) maakt de overgang naar
   de volgende sectie naadloos. Alleen voor .phead: in de hero ligt de bol eronder. */
section.phead::after{background:
  linear-gradient(transparent calc(100% - 90px),var(--bg)),
  radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.5),transparent),
  radial-gradient(1px 1px at 85% 60%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 40% 75%,rgba(255,255,255,.35),transparent),
  radial-gradient(1px 1px at 60% 45%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 10% 65%,rgba(255,255,255,.35),transparent)}
/* W10: ook de page-head-bol vaagt onderaan weg, zodat er geen harde rand is naar de volgende sectie */
.hz-head{height:200px;opacity:.7;
  -webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.globe-fx .tw{animation:fx-twinkle 7s ease-in-out infinite alternate}
.globe-fx .tw:nth-of-type(2n){animation-duration:9s;animation-delay:-3s}
.globe-fx .tw:nth-of-type(3n){animation-duration:11s;animation-delay:-6s}
.hz-pulse{stroke-dashoffset:2000;animation:fx-pulse 22s linear infinite}
@keyframes fx-twinkle{from{opacity:.35}to{opacity:1}}
@keyframes fx-pulse{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
.cta-band{isolation:isolate}
.cta-globe{position:absolute;z-index:-1;pointer-events:none;right:-200px;top:50%;width:580px;aspect-ratio:1;
  margin-top:-290px;opacity:.18}
.cta-globe svg{display:block;width:100%;height:100%;animation:fx-spin 240s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
/* W11: bewegend netwerk achter "We know how each market pays" (home), zoals rechtsboven op
   de achterkant van het kaartje. Twee panelen aan de randen, die naar binnen wegvagen, zodat
   er niets achter de sectiekop staat; de kaarten zijn dekkend. Beweging: knooppunten driften
   een paar pixels (d1 tot d3), sommige twinkelen, en over 5 lijnen per paneel loopt af en
   toe een lichtpuls (pl). Pauze buiten beeld via .globe-fx; statisch bij reduced motion. */
.sec-net{position:relative;overflow:hidden;isolation:isolate}
.pay-net{position:absolute;z-index:-1;pointer-events:none;top:0;bottom:0;width:min(420px,30vw);opacity:.7}
/* W14: stats-paneel in de payments-sectie dekkend, zodat er geen lijnen doorheen lopen */
.sec-net .stats{background:linear-gradient(120deg,rgba(0,127,253,.14),rgba(91,75,255,.08) 60%,transparent),var(--bg)}
.pay-net svg{display:block;width:100%;height:100%}
.pay-net-l{left:0;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent);mask-image:linear-gradient(90deg,#000 45%,transparent)}
.pay-net-r{right:0;-webkit-mask-image:linear-gradient(270deg,#000 45%,transparent);mask-image:linear-gradient(270deg,#000 45%,transparent)}
.pay-net g.d1{animation:pn-d1 21s ease-in-out infinite alternate}
.pay-net g.d2{animation:pn-d2 27s ease-in-out infinite alternate}
.pay-net g.d3{animation:pn-d3 33s ease-in-out infinite alternate}
.pay-net g.tw>circle{animation:fx-twinkle 7s ease-in-out infinite alternate}
.pay-net g.tw:nth-of-type(2n)>circle{animation-duration:10s;animation-delay:-4s}
.pay-net .pl{stroke-dasharray:55 1945;stroke-dashoffset:2000;stroke-opacity:.9;animation:fx-pulse 11s linear infinite}
.pay-net .pl2{animation-duration:14s;animation-delay:-5s}
.pay-net .pl3{animation-duration:17s;animation-delay:-9s}
@keyframes pn-d1{to{transform:translate(4px,-5px)}}
@keyframes pn-d2{to{transform:translate(-5px,3px)}}
@keyframes pn-d3{to{transform:translate(3px,5px)}}
.globe-fx.fx-off *,.tab-hidden .globe-fx *{animation-play-state:paused!important}
.hero::after,.phead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.5),transparent),
  radial-gradient(1px 1px at 85% 60%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 40% 75%,rgba(255,255,255,.35),transparent),
  radial-gradient(1px 1px at 60% 45%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 10% 65%,rgba(255,255,255,.35),transparent)}
.hero-in{min-height:min(100svh,980px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:130px;padding-bottom:40px}
.hero h1{margin-top:24px;font-size:clamp(40px,6vw,84px);line-height:1.04;font-weight:600;letter-spacing:-.04em;max-width:18ch}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:2%;right:6%;bottom:-.04em;height:.07em;border-radius:99px;background:var(--blue2);opacity:.9}
.hero h1 em{font-weight:500}
.lead{max-width:54ch;margin:26px auto 0;color:var(--ink2);font-size:clamp(16.5px,1.6vw,19px)}
.hero-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-actions .btn{min-height:58px;padding:0 34px;font-size:17px}
.hero-foot{width:100%;margin-top:clamp(48px,8vh,88px);padding-top:30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:40px;text-align:left}
.hero-num{flex:none;padding-right:40px;border-right:1px solid var(--line2)}
.hero-num b{display:block;font:600 40px/1 var(--head);letter-spacing:-.03em}
.hero-num span{display:block;margin-top:8px;font-size:14px;color:var(--ink2)}
.hero-plats{flex:1;min-width:0}

/* platformlogo's: monochroom en rustig. Ze zijn niet klikbaar, dus geen hover-effect.
   --h is de basishoogte, --k een optische correctie per logo: massieve vormen (Microsoft Advertising,
   Facebook) iets kleiner, platte vormen (Meta, YouTube) iets groter. */
.plats{--h:24px;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 26px;color:#DCE6FA}
.plats li{display:flex;align-items:center;line-height:0}
.plats svg{display:block;width:auto;height:calc(var(--h) * var(--k,1));opacity:.5}
.p-googleads{--k:.92}.p-youtube{--k:1.12}.p-meta{--k:1.18}.p-facebook{--k:.9}.p-instagram{--k:.94}
.p-tiktok{--k:.94}.p-snapchat{--k:.96}.p-microsoft{--k:.78}.p-x{--k:.86}
.plats-tiles{--h:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.plats-tiles li{justify-content:center;height:76px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.plats-tiles svg{opacity:.62}

/* doorlopende band in de hero: twee identieke sets (de tweede aria-hidden), de baan schuift
   precies een set op (-50%) en begint dan opnieuw. Elke set is minstens zo breed als het
   zichtvenster (100cqw), zodat er nooit een gat valt. Pauze bij hover en focus. */
.marquee{--gap:60px;border-radius:10px}
.marquee:focus-visible{outline-offset:6px}
.marquee-view{overflow:hidden;container-type:inline-size;padding-block:6px;
  -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;width:max-content;animation:plats-loop 50s linear infinite;will-change:transform}
.marquee .plats{flex:none;flex-wrap:nowrap;justify-content:space-around;gap:0 var(--gap);padding-inline:calc(var(--gap) / 2);
  min-width:900px;min-width:100cqw}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes plats-loop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.phead-in{padding-top:170px;padding-bottom:90px;display:flex;flex-direction:column;align-items:center}
.phead h1{margin-top:22px;font-size:clamp(38px,6vw,76px);letter-spacing:-.035em;max-width:16ch}

/* secties */
.sec{padding-block:clamp(72px,9vw,128px)}
.sec-cta-tight{padding-top:0}
.sec-alt{background:var(--bg2);border-block:1px solid var(--line)}
.sec-head{max-width:720px;margin-bottom:46px}
.sec-head.c{margin-inline:auto;text-align:center}
.sec-head h2{margin-top:18px;font-size:clamp(30px,4.4vw,52px)}
.sec-head p{margin-top:16px;color:var(--ink2);font-size:18px;max-width:60ch}
.sec-head.c p{margin-inline:auto}
.more{margin-top:44px;text-align:center}

.mission{text-align:center;max-width:980px}
.mission-q{max-width:30ch;margin:26px auto 0;font:500 clamp(24px,3vw,38px)/1.3 var(--head);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.mission-q::before{content:"\201C";color:var(--blue2)}
.mission-q::after{content:"\201D";color:var(--blue2)}
.statement{text-align:center;max-width:960px}
.statement-q{margin:26px 0 0;font:500 clamp(26px,3.4vw,42px)/1.25 var(--head);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}

/* productkaarten: W11 zonder foto, ze gebruiken nu .feat in .fgrid-3 */

/* feature-kaarten */
.fgrid{display:grid;gap:20px}
.fgrid-2{grid-template-columns:repeat(2,1fr)}
.fgrid-3{grid-template-columns:repeat(3,1fr)}
.fgrid-4{grid-template-columns:repeat(4,1fr)}
.feat{padding:30px 26px;border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);transition:border-color .25s,transform .25s}
.feat:hover{border-color:var(--line2)}
.feat .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--blue2);
  background:rgba(0,127,253,.12);border:1px solid rgba(0,127,253,.3)}
.feat .ic svg{width:24px;height:24px}
.feat h3,.feat h2{margin-top:20px;font-size:20px}
.feat p{margin:10px 0 0;color:var(--ink2);font-size:15.5px}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split-img{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:5/4}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(0,127,253,.25),transparent 55%)}
/* W12: visuals in code op dezelfde kaart (radius, rand, 5:4). Geen fototint erover. Pulsen
   lopen langs de lijnen; pauze buiten beeld via .globe-fx, stil bij reduced motion. */
.split-viz{background:#060C1F}
.split-viz::after{display:none}
.split-viz .viz-svg{display:block;width:100%;height:100%}
.split-viz .pl{stroke-dasharray:60 1940;stroke-dashoffset:2000;animation:fx-pulse 7s linear infinite}
.split-viz .pl2{animation-duration:9s;animation-delay:-3s}
.split-viz .pl3{animation-duration:11s;animation-delay:-6s}
/* W13/W14: brede platform-netwerkvisual op home (1000:400), gecentreerd onder de sectiekop.
   Onder 640px de 5:4-versie (grotere knooppunten in verhouding). */
.viz-wide{max-width:1080px;margin-inline:auto;aspect-ratio:1000/400}
.viz-wide .viz-svg-narrow{display:none}
@media(max-width:640px){
  .viz-wide{aspect-ratio:5/4}
  .viz-wide .viz-svg-wide{display:none}
  .viz-wide .viz-svg-narrow{display:block}
}
.split-txt h2{margin-top:18px;font-size:clamp(30px,4vw,48px)}
.split-txt p{margin-top:18px;color:var(--ink2)}
.split-txt .split-mission{margin-top:22px;padding-left:18px;border-left:2px solid var(--blue2);font:500 clamp(18px,1.7vw,21px)/1.45 var(--head);letter-spacing:-.01em;color:var(--ink)}

/* cijfers */
.stats{display:grid;grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto;text-align:center;border:1px solid var(--line2);border-radius:24px;overflow:hidden;
  background:linear-gradient(120deg,rgba(0,127,253,.14),rgba(91,75,255,.08) 60%,transparent)}
.stat{padding:clamp(28px,4vw,44px) clamp(18px,3vw,36px)}
.stat+.stat{border-left:1px solid var(--line)}
.stat b{display:block;font:600 clamp(40px,5.4vw,64px)/1 var(--head);letter-spacing:-.035em}
.stat span{display:block;max-width:26ch;margin:12px auto 0;color:var(--ink2);font-size:15px;text-wrap:balance}
.stats-after{margin-top:clamp(56px,7vw,88px)}

/* stappen */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{padding:26px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.steps b{font:600 14px/1 var(--head);color:var(--blue2);letter-spacing:.06em}
.steps h3{margin-top:14px;font-size:19px}
.steps p{margin:8px 0 0;color:var(--ink2);font-size:15px}
.steps-5{grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.steps-5 li{position:relative;padding:24px 22px}
.steps-5 b{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(0,127,253,.4);background:rgba(0,127,253,.12);font-size:13px;letter-spacing:.02em}
/* dunne lijn van stap naar stap, ter hoogte van het nummer */
.steps-5 li+li::before{content:"";position:absolute;top:43px;right:calc(100% + 1px);width:15px;height:1px;background:var(--line2)}

/* afsluiter */
.cta-band{position:relative;overflow:hidden;text-align:center;padding:clamp(48px,7vw,84px) var(--gut);border-radius:28px;border:1px solid var(--line2);
  background:radial-gradient(70% 120% at 80% 0%,rgba(34,195,245,.35),rgba(0,127,253,.18) 45%,transparent 75%),var(--panel)}
.cta-band h2{font-size:clamp(32px,4.8vw,58px)}
.cta-band h2 em{color:var(--blue2)}
.cta-band p{max-width:56ch;margin:18px auto 30px;color:var(--ink2)}

/* contact en juridisch */
.contact{text-align:center}
.contact-mail{display:inline-block;margin-bottom:46px;font:600 clamp(26px,4.4vw,48px)/1.1 var(--head);color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--blue)}
.contact .feat{text-align:left}
.prose{max-width:760px}
.prose h2{margin:40px 0 12px;font-size:26px}
.prose p{color:var(--ink2)}
.prose code{font-size:.9em;color:var(--ink)}
.stamp{color:var(--muted);font-size:14px}
.operator{color:var(--ink2);font-size:15px}
.note{margin:18px 0 10px;padding:16px 18px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font-size:15px}

/* voet */
.foot{padding:72px 0 34px;border-top:1px solid var(--line);background:#030714}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-brand img{height:38px;width:auto}
.foot-brand p{margin:18px 0 14px;max-width:34ch;color:var(--ink2);font-size:15px}
.foot-brand a{color:var(--ink);font-weight:500}
.foot .foot-h{margin:0 0 16px;font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{color:var(--ink2);text-decoration:none;font-size:15px;transition:color .2s}
.foot ul a:hover{color:var(--ink)}
.foot-base{margin-top:54px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.foot-base p{margin:0}

/* in beeld schuiven (alleen met JS; zonder JS staat alles er gewoon) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:1020px){
  .fgrid-4,.steps{grid-template-columns:repeat(2,1fr)}
  .steps-5{grid-template-columns:1fr;max-width:680px;margin-inline:auto;gap:12px}
  .steps-5 li{display:grid;grid-template-columns:38px 1fr;column-gap:18px;align-items:start;padding:22px}
  .steps-5 b{grid-row:1/3}
  .steps-5 h3{margin-top:8px}
  .steps-5 li+li::before{top:auto;bottom:calc(100% + 1px);right:auto;left:41px;width:1px;height:11px}
  .nav{gap:20px}
}
@media(max-width:860px){
  .menu-b{display:flex;flex-direction:column;gap:6px;margin-left:auto;cursor:pointer;padding:8px}
  .menu-t{display:block;position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .menu-b span{display:block;width:24px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s}
  .menu-t:focus-visible+.menu-b{outline:2px solid var(--blue2);outline-offset:2px;border-radius:8px}
  .menu-t:checked+.menu-b span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-t:checked+.menu-b span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav a::after{display:none}
  .bar-cta{display:none}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px var(--gut) 18px;
    background:rgba(5,10,26,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:none}
  .nav a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .menu-t:checked~.nav{display:flex}
  .split{grid-template-columns:1fr}
  .fgrid-3,.fgrid-2{grid-template-columns:1fr}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-num{border-right:0;padding-right:0}
  .hero-plats{width:100%}
  .marquee{--gap:48px}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .fgrid-4,.steps{grid-template-columns:1fr}
  .hero-in{padding-top:110px}
  .hero-arrow{--aw:76px;--pad:36px;right:calc(-18px - var(--pad));opacity:.26;animation-name:arrow-rise-m}
  .hero-globe{top:-69px;height:260px}
  .hz-head{height:120px;opacity:.6}
  .cta-globe{right:-190px;width:420px;margin-top:-210px;opacity:.15}
  /* mobiel: alleen rechts, en alleen ter hoogte van de (dekkende) kaarten, nooit achter
     de sectiekop of de stats; licht */
  .pay-net-l{display:none}
  .pay-net-r{top:340px;bottom:420px;width:140px;opacity:.6}
  .hero h1{font-size:40px}
  .hero-actions{width:100%;flex-direction:column}
  .hero-actions .btn{width:100%}
  .hero-foot{align-items:center;text-align:center}
  .plats{--h:22px}
  .marquee{--gap:40px}
  .marquee-track{animation-duration:36s}
  .plats-tiles{--h:26px}
  .plats-tiles li{height:64px}
  .phead-in{padding-top:130px;padding-bottom:60px}
  .stat{padding:24px 18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
  /* geen band: een statische, nette rij die wrapt; de duplicaat verdwijnt */
  .marquee-view{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee-track{display:block;width:auto}
  .marquee .plats[aria-hidden]{display:none}
  .marquee .plats{min-width:0;padding-inline:0;flex-wrap:wrap;justify-content:space-between;gap:18px 26px}
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){
  /* 5 + 4, beide regels gecentreerd: geen weeslogo */
  .marquee .plats{max-width:260px;margin-inline:auto;justify-content:center;gap:18px 26px}
}