/* NexON — de schil: navigatie en voet.
   Overgenomen van de homepage en daar weggehaald. Geen enkele andere
   stylesheet bevat nog header- of footerregels; dit is de enige plek.
   Gegenereerd door schil.mjs — niet met de hand aanpassen. */

.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.nav.scrolled{background:rgba(10,10,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.06)}
.nav-inner{max-width:1240px;margin:0 auto;padding:14px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.logo{display:flex;align-items:center;height:32px;flex-shrink:0}
.logo img{height:40px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(198,255,0,.15))}
.nav-links{display:flex;gap:30px;font-size:17px}
.nav-links a{position:relative;color:rgba(255,255,255,.75);padding:6px 0;transition:color .2s ease}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--lime);border-radius:2px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-controls{display:flex;gap:4px;align-items:center}
.ctrl-wrap{position:relative}
.ctrl-btn{width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:12px;font-weight:500;font-family:ui-monospace,'SF Mono','Cascadia Code','Roboto Mono',Menlo,Consolas,monospace;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ctrl-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(198,255,0,.35);color:#fff}
.ctrl-btn svg{width:15px;height:15px}
.ctrl-btn.lang{width:auto;padding:0 14px;gap:6px;letter-spacing:.5px}
.ctrl-btn .chev{font-size:8px;opacity:.55}
.ctrl-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;background:rgba(19,19,22,.96);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;pointer-events:none;transform:translateY(-6px) scale(.98);transition:all .22s cubic-bezier(.2,.8,.2,1);z-index:60}
.ctrl-wrap.open .ctrl-dropdown{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.ctrl-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:10px;font-size:13.5px;color:rgba(255,255,255,.78);cursor:pointer;transition:all .15s;text-align:left;font-weight:400;letter-spacing:-.1px}
.ctrl-option:hover{background:rgba(198,255,0,.08);color:#fff}
.ctrl-option.active{color:var(--lime);background:rgba(198,255,0,.1)}
.ctrl-option .flag{width:22px;height:16px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;line-height:1}
.ctrl-option .flag svg.flag-svg{width:22px;height:16px;display:block;border-radius:3px}
.ctrl-option .check{margin-left:auto;color:var(--lime);opacity:0;font-size:12px}
.ctrl-option.active .check{opacity:1}
.ctrl-option.soon{opacity:.55;cursor:not-allowed}
.ctrl-option.soon:hover{background:transparent;opacity:.7}
.ctrl-option .soon-tag{margin-left:auto;font-size:10px;color:var(--muted-2);letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2)}
.btn-solid{padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;background:var(--lime);color:#0A0A0A;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-solid:hover{background:var(--lime);box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1) inset}
@media (max-width:800px){.nav-links{display:none}
.nav-controls{gap:2px}
.ctrl-btn{width:34px;height:34px}
.ctrl-btn.lang{padding:0 10px;font-size:11px}}
footer{padding:56px 0 32px;border-top:1px solid var(--line);background:var(--bg-2)}
.foot-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:44px 72px;font-family:'General Sans',system-ui,sans-serif;font-size:14px;color:var(--muted);letter-spacing:0;font-weight:400;line-height:1.7}
.foot-inner>.foot-col:first-child{flex:1 1 320px;max-width:440px}
.foot-nav{display:flex;gap:72px;flex:0 0 auto}
.foot-col h4{font-size:13px;color:var(--text);font-weight:500;margin:0 0 14px;letter-spacing:0}
.foot-col a{color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:8px;padding:4px 0;transition:color .2s ease;width:fit-content}
.foot-col a svg{width:14px;height:14px;flex-shrink:0;opacity:.65}
.foot-col a:hover{color:var(--lime)}
.foot-col a:hover svg{opacity:1}
.foot-brand-logo{height:36px;margin-bottom:12px;display:block}
.foot-tagline{color:var(--muted-2);font-size:13px;margin-top:8px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:32px;margin-top:40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted-2)}
.foot-socials{display:flex;gap:10px;align-items:center}
.foot-socials a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:13px;transition:all .25s ease}
.foot-socials a:hover{color:var(--lime);border-color:var(--lime)}
.foot-socials .ico{font-size:14px}
@media (max-width:800px){.foot-inner{flex-direction:column;gap:30px}
.foot-nav{flex-direction:column;gap:30px}
.foot-inner>.foot-col:first-child{max-width:none}
.foot-bottom{flex-direction:column;align-items:flex-start}}
.foot-inner .lime-dot{color:var(--lime)}
.foot-col a svg,.foot-socials a svg,.member-foot a svg{width:14px;height:14px;flex-shrink:0;vertical-align:middle}
footer{position:relative}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 8%,rgba(198,255,0,.5),transparent 92%)}
.foot-inner{align-items:start}
.foot-col h4{font-family:var(--font-display);font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:var(--lime);font-weight:500;margin-bottom:18px}
.foot-brand-logo{height:42px;margin-bottom:16px}
.foot-col a{align-items:center;gap:10px}
.foot-col a svg{width:15px;height:15px;opacity:.55;flex-shrink:0}
.foot-bottom{align-items:center}
.foot-socials a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:12.5px;transition:border-color .25s ease,color .25s ease}
.foot-socials a svg{width:15px;height:15px}
.foot-socials a:hover{border-color:rgba(198,255,0,.55);color:var(--lime)}
.btn-solid{white-space:nowrap}
.nav-burger{display:none;width:40px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.06);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.nav-burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:960px){.logo img{height:34px}
.nav-cta .ctrl-btn,.nav-cta .ctrl-wrap{display:none}
.btn-solid{padding:9px 14px;font-size:13px}
.nav-cta{gap:8px}
.nav-burger{display:flex}
.nav-links{display:flex!important;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:#0d0e0c;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:4px 24px 12px;transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s ease;box-shadow:0 22px 44px rgba(0,0,0,.55)}
.nav.menu-open .nav-links{opacity:1;transform:none;visibility:visible}
.nav-links a{padding:14px 2px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.06);width:100%}
.nav-links a::after{display:none}}
.logo{position:relative}
.logo .logo-spark{position:absolute;left:66%;top:40%;width:52px;height:52px;transform:translate(-50%,-50%) scale(.2);border-radius:50%;background:radial-gradient(circle,rgba(234,255,150,.95),rgba(198,255,0,.22) 42%,transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.logo.booting img{animation:navboot 1.15s cubic-bezier(.2,.7,.2,1) .52s both}
.logo.booting .logo-spark{animation:navspark 1.15s ease-out .52s both}
@media(max-width:600px){.logo .logo-spark{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.logo.booting img,.logo.booting .logo-spark{animation:none;filter:none}}
.flogo{position:relative;display:inline-block;line-height:0}
.flogo .logo-spark{position:absolute;left:66%;top:40%;width:52px;height:52px;transform:translate(-50%,-50%) scale(.2);border-radius:50%;background:radial-gradient(circle,rgba(234,255,150,.95),rgba(198,255,0,.22) 42%,transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.flogo.booting img{animation:navboot 1.15s cubic-bezier(.2,.7,.2,1) .1s both}
.flogo.booting .logo-spark{animation:navspark 1.15s ease-out .1s both}
.logo:hover img,.flogo:hover img{animation:navhover .7s ease}
.logo:active img,.flogo:active img{animation:navclick .34s ease}
@media(prefers-reduced-motion:reduce){.flogo.booting img,.flogo.booting .logo-spark,.logo:hover img,.flogo:hover img,.logo:active img,.flogo:active img{animation:none}}
.nav-links a{font-size:16px;color:var(--muted)}
.nav-links a::after{display:none}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.ctrl-btn{background:transparent;border:1px solid var(--line);color:var(--muted)}
.ctrl-btn:hover{background:transparent;border-color:var(--line-2);color:var(--text)}
@media(max-width:620px){.nav-inner{padding:12px 16px!important}
.logo img{height:30px!important}
.nav-cta{gap:8px!important}
.nav-cta .btn-primary,.nav-cta .btn-solid{padding:9px 13px!important;font-size:13px!important}}
@media(max-width:360px){.nav-cta .btn-primary,.nav-cta .btn-solid{padding:8px 10px!important;font-size:12px!important}}
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:auto;bottom:-3px;width:0;height:2px;background:var(--lime);border-radius:2px;transition:width .3s ease;display:block}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
@media(max-width:960px){.nav-links a::after{display:none}}
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.logo-mark{position:relative;display:block}
.logo-strap{display:flex;width:100%;justify-content:space-between;font-family:var(--font-body);font-weight:500;font-size:8.5px;text-transform:uppercase;color:rgba(255,255,255,.5);pointer-events:none}
.logo-strap i{font-style:normal}
@media(max-width:600px){.logo-strap{font-size:7.5px}}

/* --- vast: alles hieronder komt van schil.mjs ------------------------------ */
html{scroll-padding-top:88px}

/* Op Over ons steekt het IPM-kompas ver buiten de pagina. Dat werd opgevangen
   door body{overflow-x:hidden}, maar daarmee wordt de body zelf een
   scrollgebied en gaat er 15px scrollbalk van de breedte af: de inhoud stond
   daar 15px smaller dan de navbalk erboven. Hier knippen we de overloop af
   op precies dezelfde plek als voorheen — clip, niet hidden, want clip maakt
   geen scrollgebied — zodat de body ongemoeid blijft. */
#nx-inhoud{overflow-x:clip}

/* De intro zet .nx-lock op <html> met overflow:hidden. Daardoor verdween de
   scrollbalk, werd het venster 15px breder en schoof de hele rechterkant mee.
   Dit reserveert die ruimte precies zolang de vergrendeling duurt.

   Alleen tijdens de vergrendeling, en niet altijd: bij scrollbar-gutter:stable
   rekent de browser vw-eenheden zonder de scrollbalk, en dan wordt elke
   clamp(..,vw,..) een fractie kleiner dan de rest van het ontwerp aanneemt. */
html.nx-lock{scrollbar-gutter:stable}

/* Kop en voet blijven staan bij een paginawissel. */
@view-transition{navigation:auto}
.nav{view-transition-name:nexon-kop}
footer{view-transition-name:nexon-voet}
::view-transition-old(nexon-kop),::view-transition-new(nexon-kop),
::view-transition-old(nexon-voet),::view-transition-new(nexon-voet){animation:none;mix-blend-mode:normal}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}