[hidden]{display:none!important}
/* Layout: donkere studio-ruimte — 3D-logo als blikvanger, banden die schuin door de pagina lopen, kaarten die op licht en muis reageren */
:root{
  color-scheme:dark;
  --bg:#07080E; --bg2:#0D0F1C; --card:#10121F; --line:rgba(255,255,255,.10); --ink:#F2F3F7; --muted:#9A9DB2;
  --accent:#4C5BFF; --accent2:#FF6B4A; --mark:#FFD84A; --dark:#07080E;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --nav-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--bg)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
:focus-visible{outline:2px solid var(--mark);outline-offset:4px;border-radius:6px}
h1,h2,h3{margin:0;font-family:var(--f-display);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0}
.grad{background:linear-gradient(100deg,var(--mark) 0%,var(--accent2) 45%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* scrollbalk + cursor */
.progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:100%;z-index:100;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--accent2),var(--mark))}
.cursor{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none;z-index:95;mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s,background .25s;display:none}
.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--ink)}
@media (pointer:fine){.cursor{display:block}}

/* knoppen */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;font:600 15.5px/1 var(--f-body);padding:16px 24px;border-radius:999px;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.04);cursor:pointer;transition:background .2s,border-color .2s,transform .2s ease-out;will-change:transform}
.btn:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
.btn.primary{background:var(--ink);color:var(--dark);border-color:var(--ink)}
.btn.primary:hover{background:var(--mark);border-color:var(--mark)}
.btn .arr{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;margin-right:-10px;transition:transform .25s}
.btn:hover .arr{transform:rotate(-45deg)}
.btn svg{width:14px;height:14px}

/* navigatie */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:70;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,8,14,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav .wrap{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:36px;height:36px;flex:none}
.logo .word{font-family:var(--f-display);font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1}
.logo .word span{font-weight:400;margin-left:5px;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{text-decoration:none;font-weight:500;font-size:15px;color:var(--muted);padding:10px 14px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-links a.cta{background:var(--ink);color:var(--dark);margin-left:10px}
.nav-links a.cta:hover{background:var(--mark)}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer}
.menu-btn svg{width:20px;height:20px}
@media (max-width:880px){
  .menu-btn{display:grid;place-items:center}
  .nav-links{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(10,11,20,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
  .nav-links:not(.open){display:none}
  .nav-links a{padding:16px 4px;border-radius:0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:22px;color:var(--ink)}
  .nav-links a.cta{margin:16px 0 0;text-align:center;border-radius:999px;font-size:16px;font-family:var(--f-body);border:0}
}

/* hero */
.hero{position:relative;padding-block:calc(var(--nav-h) + clamp(32px,6vw,72px)) clamp(40px,6vw,72px);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.blob.a{width:520px;height:520px;background:var(--accent);top:-120px;right:-80px}
.blob.b{width:420px;height:420px;background:var(--accent2);bottom:-160px;left:-120px;opacity:.35;animation-duration:22s}
.blob.c{width:260px;height:260px;background:var(--mark);top:40%;right:30%;opacity:.16;animation-duration:15s}
@keyframes drift{to{transform:translate(-60px,50px) scale(1.15)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.6rem);font-weight:800}
.hero h1 .serif{font-size:1.18em;line-height:.8}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .lede{margin-top:28px;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:31em}
.hero .ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.avail{margin-top:44px;display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 12px;background:rgba(255,255,255,.03)}
.avail i{width:9px;height:9px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.stage{position:relative;aspect-ratio:1/1;max-width:100%;min-height:0}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .fallback{position:absolute;inset:18%;display:none}
.stage.no-gl .fallback{display:block}
.stage .chip{position:absolute;font-family:var(--f-mono);font-size:12px;padding:8px 12px;border-radius:10px;background:rgba(16,18,31,.75);border:1px solid var(--line);backdrop-filter:blur(8px);white-space:nowrap;animation:bob 6s ease-in-out infinite}
.stage .chip b{color:var(--mark);font-weight:500}
.stage .c1{top:12%;left:2%}
.stage .c2{bottom:16%;right:0;animation-delay:-3s}
.stage .c3{bottom:6%;left:10%;animation-delay:-1.5s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.stage{max-width:520px;width:100%;margin:0 auto}}

/* marquee */
.bands{position:relative;padding-block:56px;overflow:hidden}
.band{display:flex;white-space:nowrap;font-family:var(--f-display);font-weight:800;font-size:clamp(1.4rem,3.2vw,2.4rem);text-transform:uppercase;padding-block:14px}
.band.one{background:var(--accent);color:#fff;transform:rotate(-2.5deg) scale(1.05)}
.band.two{background:var(--mark);color:var(--dark);transform:rotate(1.8deg) scale(1.05);margin-top:-12px}
.band .track{display:flex;gap:28px;padding-right:28px;animation:marq 28s linear infinite;flex:none}
.band.two .track{animation-direction:reverse;animation-duration:34s}
.band .track span{display:inline-flex;align-items:center;gap:28px}
.band .track span::after{content:"✦";font-size:.7em}
@keyframes marq{to{transform:translateX(-100%)}}

/* secties */
section{position:relative;padding-block:clamp(72px,10vw,128px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:clamp(40px,6vw,64px)}
.sec-head h2{font-size:clamp(2.1rem,5vw,3.9rem);font-weight:800;margin-top:18px}
.sec-head p{color:var(--muted);max-width:30em}
@media (max-width:780px){.sec-head{grid-template-columns:minmax(0,1fr)}}
[data-reveal]{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
[data-reveal].pre{transform:translateY(56px)}

/* diensten */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.svc{position:relative;padding:clamp(24px,3vw,36px);border-radius:24px;background:var(--card);border:1px solid var(--line);overflow:hidden;display:grid;gap:18px;align-content:start;min-height:280px;isolation:isolate}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--c) 38%,transparent),transparent 60%)}
.svc:hover::before{opacity:1}
.svc:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.svc .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);transition:transform .4s}
.svc:hover .ic{transform:rotate(-8deg) scale(1.08)}
.svc .ic svg{width:28px;height:28px}
.svc h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700}
.svc p{color:var(--muted);max-width:30em}
.svc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-family:var(--f-mono);font-size:12px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink)}
@media (max-width:760px){.services{grid-template-columns:minmax(0,1fr)}.svc{min-height:0}}

/* werk */
.work-sec{background:linear-gradient(180deg,var(--bg),var(--bg2) 30%,var(--bg2) 70%,var(--bg))}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.work-head h2{font-size:clamp(2.1rem,5vw,3.9rem);font-weight:800;margin-top:18px}
.arrows{display:flex;gap:10px}
.arrows button{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.arrows button:hover{background:var(--ink);color:var(--dark)}
.arrows svg{width:18px;height:18px}
.rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:12px 28px;scrollbar-width:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));scroll-padding-left:max(16px,env(safe-area-inset-left,0px))}
@media (min-width:1272px){.rail{padding-left:calc((100vw - 1240px)/2 + 16px);scroll-padding-left:calc((100vw - 1240px)/2 + 16px)}}
.rail::-webkit-scrollbar{display:none}
.case{flex:none;width:min(84vw,560px);scroll-snap-align:start;text-decoration:none;display:grid;gap:18px;perspective:1000px}
.shot{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#1a1c2a;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.case:hover .shot{box-shadow:0 40px 80px -30px color-mix(in srgb,var(--ma) 60%,transparent)}
.shot .bar{display:flex;gap:6px;align-items:center;padding:10px 14px;background:#1a1c2a}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#3a3d52}
.shot .bar i:first-child{background:#FF5F57}.shot .bar i:nth-child(2){background:#FEBC2E}.shot .bar i:nth-child(3){background:#28C840}
.shot .bar span{margin-left:10px;font-family:var(--f-mono);font-size:11px;color:#8a8da3}
.site{aspect-ratio:16/10;max-width:100%;background:var(--mb);color:var(--mf);display:grid;grid-template-rows:auto 1fr;position:relative;overflow:hidden}
.site nav{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;font-size:11px;font-weight:600}
.site nav b{display:flex;gap:14px;font-weight:500;opacity:.75}
.site .in{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;padding:0 20px 20px;align-items:end}
.site .t{font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:.95}
.site .s{font-size:11px;opacity:.7;margin-top:10px;max-width:22ch}
.site .b{display:inline-block;margin-top:12px;font-size:10.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:var(--ma);color:var(--mb)}
.site .art{height:100%;min-height:90px;border-radius:12px;position:relative;overflow:hidden}
.case-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.case-meta h3{font-size:1.25rem;font-weight:700}
.case-meta span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* werkwijze */
.process{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,80px)}
.process .intro{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
.process .intro h2{font-size:clamp(2.1rem,5vw,3.9rem);font-weight:800;margin-top:18px}
.process .intro p{color:var(--muted);margin-top:22px;max-width:28em}
.steps{list-style:none;margin:0;padding:0 0 0 44px;position:relative;display:grid;gap:clamp(36px,5vw,56px)}
.steps::before,.steps .fill{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
.steps .fill{background:linear-gradient(var(--mark),var(--accent2),var(--accent));bottom:auto;height:0;transition:height .15s linear}
.step{position:relative;display:grid;gap:10px}
.step::before{content:"";position:absolute;left:-41px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:all .3s}
.step.on::before{border-color:var(--mark);background:var(--mark);box-shadow:0 0 0 6px color-mix(in srgb,var(--mark) 20%,transparent)}
.step .when{font-family:var(--f-mono);font-size:12.5px;color:var(--mark);letter-spacing:.06em}
.step h3{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700}
.step p{color:var(--muted);max-width:34em}
@media (max-width:860px){.process{grid-template-columns:minmax(0,1fr)}.process .intro{position:static}}

/* logo-dienst (brede kaart) */
.svc.wide{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px 40px;align-items:center;min-height:0}
.svc.wide .txt{display:grid;gap:18px;align-content:start}
.marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mk{aspect-ratio:1/1;max-width:100%;border-radius:18px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s}
.mk svg{width:58%;height:58%}
.mk:nth-child(2){background:var(--mark)}
.svc.wide:hover .mk:nth-child(1){transform:translateY(-8px) rotate(-4deg)}
.svc.wide:hover .mk:nth-child(2){transform:translateY(-14px)}
.svc.wide:hover .mk:nth-child(3){transform:translateY(-8px) rotate(4deg)}
@media (max-width:760px){.svc.wide{grid-template-columns:minmax(0,1fr)}}

/* pakketten */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:22px;padding:32px 28px;border-radius:24px;background:var(--card);border:1px solid var(--line);transition:transform .3s}
.plan:hover{transform:translateY(-6px)}
.plan.hl{border:0;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--ang,0deg),var(--accent),var(--accent2),var(--mark),var(--accent)) border-box;border:1.5px solid transparent;animation:spin 6s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
.plan .pt{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan h3{font-size:1.35rem;font-weight:700}
.plan .badge{font-family:var(--f-mono);font-size:11px;background:var(--mark);color:var(--dark);padding:5px 10px;border-radius:999px}
.plan .price{font-family:var(--f-display);font-weight:700;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.15}
.plan .price small{display:block;font-family:var(--f-body);font-size:14px;font-weight:400;color:var(--muted);margin-bottom:8px}
.plan .price span{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.25em}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;flex:1}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:15.5px}
.plan li::before{content:"";width:12px;height:7px;border-left:2px solid var(--mark);border-bottom:2px solid var(--mark);transform:rotate(-45deg) translate(2px,6px)}
.plan .btn{justify-content:center}
.note{margin-top:22px;color:var(--muted);font-size:15px}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.plans{grid-template-columns:minmax(0,1fr)}}

/* contact */
.contact{overflow:hidden}
.contact .glow{position:absolute;width:700px;height:700px;left:50%;top:10%;transform:translateX(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 35%,transparent),transparent 65%);pointer-events:none}
.big-cta{position:relative;text-align:center;display:grid;justify-items:center;gap:28px;margin-bottom:clamp(48px,7vw,80px)}
.big-cta h2{font-size:clamp(2.4rem,7vw,6rem);font-weight:800;max-width:14ch}
.panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);padding:clamp(20px,3.5vw,40px);border-radius:28px;background:rgba(16,18,31,.8);border:1px solid var(--line);backdrop-filter:blur(10px)}
@media (max-width:900px){.panel{grid-template-columns:minmax(0,1fr)}}
.builder{display:grid;gap:22px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend,label.lbl{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:15px;font-weight:500;background:rgba(255,255,255,.03);transition:all .2s}
.chips label:hover{border-color:rgba(255,255,255,.35)}
.chips input:checked+label{background:var(--ink);color:var(--dark);border-color:var(--ink)}
.chips input:focus-visible+label{outline:2px solid var(--mark);outline-offset:3px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:520px){.two{grid-template-columns:minmax(0,1fr)}}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:13px 15px;width:100%;transition:border-color .2s}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.mailbox{display:grid;gap:16px;align-content:start}
.mail{border-radius:18px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.mail .mh{display:grid;gap:4px;padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.mail .mh b{color:var(--ink);font-weight:500}
.mail pre{margin:0;padding:18px;white-space:pre-wrap;word-break:break-word;font-family:var(--f-mono);font-size:13px;line-height:1.7;max-height:320px;overflow:auto}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.status{font-family:var(--f-mono);font-size:12.5px;color:var(--mark);min-height:1.2em}
.direct{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--muted);font-size:15px}
.direct b{color:var(--ink);font-weight:600;user-select:all}

/* footer */
footer{position:relative;padding-block:56px 0;border-top:1px solid var(--line);overflow:hidden}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer nav a{text-decoration:none;color:var(--muted)}
footer nav a:hover{color:var(--ink)}
.copy{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.mega{font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,15.5vw,13rem);line-height:.8;letter-spacing:-.04em;text-align:center;white-space:nowrap;margin-top:48px;transform:translateY(12%);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22)}
.mega:hover{background:linear-gradient(90deg,var(--accent),var(--accent2),var(--mark));-webkit-background-clip:text;background-clip:text;-webkit-text-stroke-color:transparent}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  [data-reveal].pre{transform:none}
}

/* ===== aanvullingen voor de PHP-versie ===== */
.site-img{aspect-ratio:16/10;max-width:100%;width:100%;display:block;object-fit:cover;background:var(--mb,#1a1c2a)}
.site .art.cirkels{background:radial-gradient(circle at 50% 120%,var(--ma) 0 45%,transparent 46%),radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--ma) 45%,#fff) 0 30%,transparent 31%),color-mix(in srgb,var(--ma) 35%,var(--mb))}
.site .art.strepen{background:repeating-linear-gradient(-45deg,var(--ma) 0 10px,var(--mb) 10px 20px)}
.site .art.stralen{background:radial-gradient(circle at 50% 100%,var(--ma) 0 18%,transparent 19%),conic-gradient(from 200deg at 50% 100%,transparent 0 20deg,color-mix(in srgb,var(--ma) 45%,transparent) 30deg,transparent 45deg,color-mix(in srgb,var(--ma) 30%,transparent) 60deg,transparent 80deg),color-mix(in srgb,var(--ma) 10%,var(--mb))}
.site .art.ovaal{background:radial-gradient(ellipse 40% 30% at 50% 55%,var(--ma) 0 98%,transparent),radial-gradient(ellipse 48% 36% at 50% 58%,color-mix(in srgb,var(--ma) 70%,#000) 0 98%,transparent),color-mix(in srgb,var(--ma) 25%,var(--mb))}
.site .art.vlak{background:linear-gradient(135deg,var(--ma),color-mix(in srgb,var(--ma) 40%,var(--mb)))}
.site .t.f-serif{font-family:var(--f-serif);font-style:italic}
.site .t.f-bold{font-family:var(--f-display);font-weight:900;text-transform:uppercase}
.site .t.f-clean{font-family:var(--f-body);font-weight:600;letter-spacing:-.02em}

.stage .logo-img{position:absolute;inset:22%;width:56%;height:56%;object-fit:contain;animation:floaty 6s ease-in-out infinite;filter:drop-shadow(0 30px 60px color-mix(in srgb,var(--accent) 50%,transparent))}
.stage .orbit{position:absolute;inset:8%;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 70%,transparent);animation:orbit 14s linear infinite;transform:rotateX(65deg)}
.stage .orbit.o2{inset:2%;border-color:color-mix(in srgb,var(--accent2) 60%,transparent);animation-duration:20s;animation-direction:reverse;transform:rotateX(70deg) rotateY(20deg)}
@keyframes floaty{50%{transform:translateY(-14px) rotate(-2deg)}}
@keyframes orbit{to{rotate:360deg}}

.contact-form{display:grid;gap:22px}
.req{color:var(--accent2)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{font-family:var(--f-mono);font-size:13px;min-height:1.3em}
.form-status.ok{color:#3DDC84}
.form-status.err{color:var(--accent2)}
.side{display:grid;gap:18px;align-content:start}
.info{display:grid;gap:4px;padding:20px 22px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.info small{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.info a,.info b{font-size:1.15rem;font-weight:600;text-decoration:none;word-break:break-word}
.info a:hover{color:var(--mark)}
.next{list-style:none;margin:0;padding:20px 22px;border-radius:18px;border:1px dashed var(--line);display:grid;gap:12px;counter-reset:n}
.next li{display:grid;grid-template-columns:28px 1fr;gap:10px;color:var(--muted);font-size:15.5px;counter-increment:n}
.next li::before{content:counter(n);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:wait}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.socials a{font-size:14px;text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.socials a:hover{color:var(--ink);border-color:rgba(255,255,255,.35)}
.legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:18px}

/* ===== 3D-iconen bij de diensten ===== */
.svc .ic{--c2:color-mix(in srgb,var(--c) 50%,#000);position:relative;width:78px;height:78px;border-radius:22px;color:var(--icf,#fff);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 65%,#fff) 0%,var(--c) 42%,var(--c2) 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.6),inset 0 -8px 14px rgba(0,0,0,.25),
    0 6px 0 color-mix(in srgb,var(--c) 45%,#000),0 8px 0 rgba(0,0,0,.35),
    0 26px 40px -10px color-mix(in srgb,var(--c) 75%,transparent);
  transform:perspective(520px) rotateX(16deg) rotateY(-18deg);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s;
  animation:icfloat 5.5s ease-in-out infinite}
.svc .ic::before{content:"";position:absolute;left:4px;right:4px;top:3px;height:48%;border-radius:19px 19px 50% 50%/19px 19px 16px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
.svc .ic::after{content:"";position:absolute;left:12%;right:12%;bottom:-30px;height:14px;border-radius:50%;
  background:color-mix(in srgb,var(--c) 45%,transparent);filter:blur(10px);animation:icshadow 5.5s ease-in-out infinite;pointer-events:none}
.svc .ic svg{position:relative;width:38px;height:38px;stroke-width:2.2;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.28)) drop-shadow(0 2px 0 rgba(0,0,0,.2)) drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.svc:hover .ic{transform:perspective(520px) rotateX(0deg) rotateY(0deg) scale(1.1);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.6),inset 0 -8px 14px rgba(0,0,0,.25),
    0 9px 0 color-mix(in srgb,var(--c) 45%,#000),0 11px 0 rgba(0,0,0,.35),
    0 34px 50px -10px color-mix(in srgb,var(--c) 85%,transparent)}
.svc:nth-child(2) .ic,.svc:nth-child(2) .ic::after{animation-delay:-1.1s}
.svc:nth-child(3) .ic,.svc:nth-child(3) .ic::after{animation-delay:-2.2s}
.svc:nth-child(4) .ic,.svc:nth-child(4) .ic::after{animation-delay:-3.3s}
.svc:nth-child(5) .ic,.svc:nth-child(5) .ic::after{animation-delay:-4.4s}
@keyframes icfloat{50%{translate:0 -7px}}
@keyframes icshadow{50%{opacity:.55;scale:.85 1}}

/* 3D-voorbeeldlogo's in de logokaart */
.marks{perspective:900px}
.mk{position:relative;border:0;background:linear-gradient(150deg,#2a2d44,#15172a);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.18),inset 0 -10px 18px rgba(0,0,0,.35),0 8px 0 #0a0b14,0 28px 40px -14px rgba(0,0,0,.8);
  transform:rotateX(14deg) rotateY(-10deg);animation:icfloat 6s ease-in-out infinite}
.mk:nth-child(2){background:linear-gradient(150deg,color-mix(in srgb,var(--mark) 70%,#fff),var(--mark) 45%,color-mix(in srgb,var(--mark) 60%,#000));
  box-shadow:inset 0 2px 1px rgba(255,255,255,.6),inset 0 -10px 18px rgba(0,0,0,.2),0 8px 0 color-mix(in srgb,var(--mark) 45%,#000),0 28px 40px -12px color-mix(in srgb,var(--mark) 60%,transparent);
  transform:rotateX(14deg);animation-delay:-2s}
.mk:nth-child(3){transform:rotateX(14deg) rotateY(10deg);animation-delay:-4s}
.mk::before{content:"";position:absolute;left:5px;right:5px;top:4px;height:45%;border-radius:15px 15px 50% 50%/15px 15px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.mk svg{position:relative;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3)) drop-shadow(0 3px 0 rgba(0,0,0,.2)) drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.svc.wide:hover .mk:nth-child(1){transform:rotateX(0) rotateY(0) translateY(-10px) rotate(-4deg)}
.svc.wide:hover .mk:nth-child(2){transform:rotateX(0) translateY(-16px) scale(1.04)}
.svc.wide:hover .mk:nth-child(3){transform:rotateX(0) rotateY(0) translateY(-10px) rotate(4deg)}

/* 3D-logo in menubalk en onderaan */
.logo{perspective:400px}
.logo svg,.logo img{
  filter:drop-shadow(1px 1px 0 color-mix(in srgb,var(--ink) 70%,var(--bg))) drop-shadow(1px 1px 0 color-mix(in srgb,var(--ink) 50%,var(--bg)))
    drop-shadow(1px 1px 0 color-mix(in srgb,var(--ink) 32%,var(--bg))) drop-shadow(3px 5px 6px rgba(0,0,0,.55));
  animation:logo3d 7s ease-in-out infinite;transform-origin:50% 50%}
.logo:hover svg,.logo:hover img{animation-duration:1.4s}
@keyframes logo3d{0%,100%{transform:rotateY(-16deg) rotateX(6deg)}50%{transform:rotateY(16deg) rotateX(-4deg)}}
.logo .word{text-shadow:1px 1px 0 color-mix(in srgb,var(--ink) 45%,var(--bg)),2px 2px 0 color-mix(in srgb,var(--ink) 25%,var(--bg)),3px 5px 8px rgba(0,0,0,.5)}
.logo .word span{text-shadow:none}

@media (prefers-reduced-motion:reduce){.svc .ic,.mk,.logo svg,.logo img{animation:none!important}}

/* labels rond het 3D-logo in de hoeken, zodat ze het logo niet bedekken */
.stage .c1{top:3%;left:0}
.stage .c2{top:12%;right:0;bottom:auto}
.stage .c3{bottom:3%;left:4%}
.stage canvas{cursor:grab}

/* gewone pagina's */
.page-main{padding-block:calc(var(--nav-h) + 56px) 80px;min-height:70vh}
.prose{max-width:820px}
.prose h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;margin-bottom:28px}
.prose h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;margin:40px 0 14px}
.prose h3{font-size:1.25rem;font-weight:700;margin:28px 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 16px;color:color-mix(in srgb,var(--ink) 82%,var(--bg))}
.prose a{color:var(--mark)}
.prose img{max-width:100%;height:auto;border-radius:14px}
.prose input[type=password]{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink)}
.prose input[type=submit]{font:inherit;font-weight:600;padding:10px 18px;border-radius:999px;border:0;background:var(--ink);color:var(--dark);cursor:pointer}

/* klantportaal */
.nav-links a.portal-link{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);color:var(--ink)}
.nav-links a.portal-link svg{width:15px;height:15px;color:var(--mark)}
@media (max-width:880px){.nav-links a.portal-link{border:0;border-bottom:1px solid var(--line);border-radius:0}.nav-links a.portal-link svg{width:20px;height:20px}}
.portal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.portal-back{position:absolute;inset:0;background:rgba(3,4,8,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:pfade .25s ease both}
.portal-box{position:relative;width:100%;max-width:440px;display:grid;gap:12px;padding:34px 28px 26px;border-radius:26px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);animation:ppop .35s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.portal-box::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--mark))}
.portal-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:14px}
.portal-x:hover{color:var(--ink)}
.portal-ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:#fff;margin-bottom:4px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 65%,#fff),var(--accent) 45%,color-mix(in srgb,var(--accent) 50%,#000));
  box-shadow:inset 0 2px 1px rgba(255,255,255,.55),0 6px 0 color-mix(in srgb,var(--accent) 45%,#000),0 20px 34px -8px color-mix(in srgb,var(--accent) 70%,transparent);transform:perspective(400px) rotateX(12deg) rotateY(-14deg)}
.portal-ic svg{width:28px;height:28px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.portal-box h2{font-size:1.6rem;font-weight:800}
.portal-text{color:var(--muted);font-size:15.5px}
.portal-box .lbl{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.portal-box input[type=password]{font:inherit;font-size:18px;letter-spacing:.06em;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:14px 16px;width:100%}
.portal-box input[type=password]:focus{outline:none;border-color:var(--accent)}
.portal-box .btn{justify-content:center;margin-top:4px}
.portal-list{display:grid;gap:8px}
.portal-item{display:grid;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);text-decoration:none;background:rgba(255,255,255,.03)}
.portal-item:hover{border-color:var(--accent)}
.portal-item span{color:var(--muted);font-size:14px}
html.portal-open{overflow:hidden}
@keyframes pfade{from{opacity:0}}
@keyframes ppop{from{opacity:0;transform:translateY(16px) scale(.97)}}