/* ==========================================================================
   Daniil · Webdesign & digitale beleving
   Design tokens: kleuren en lettertypes pas je hier aan.
   ========================================================================== */
:root{
  --night:#0A0F1C;      /* donkere basis */
  --night-2:#0E1526;
  --slate:#162238;      /* donkere oppervlakken */
  --slate-2:#1F2D48;
  --ivory:#F4F2ED;      /* lichte secties */
  --paper:#FBFAF7;
  --cobalt:#426BFF;     /* primaire actie, focus, accent */
  --cobalt-hi:#5C80FF;
  --mist:#A9B6CE;       /* tekst op donker */
  --ice:#B4CBFF;        /* lijnen, kleine accenten */
  --ink:#0F1626;        /* tekst op licht */
  --ink-2:#465166;
  --line-d:rgba(180,203,255,.14);
  --line-l:rgba(15,22,38,.12);
  --line-l-strong:rgba(15,22,38,.36);

  --f-display:'Manrope',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-serif:ui-serif,Georgia,'Times New Roman',serif;

  --e1:cubic-bezier(.22,.8,.2,1);
  --e2:cubic-bezier(.65,0,.35,1);
  --t-fast:220ms; --t-mid:480ms; --t-slow:760ms;

  --wrap:1320px;
  --gut:clamp(20px,4vw,56px);
  --r-m:16px; --r-l:24px;
  --shadow:0 40px 90px -36px rgba(2,6,16,.75),0 12px 30px -14px rgba(2,6,16,.45);
}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--night);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cobalt-hi);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--cobalt);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;transition:top var(--t-fast) var(--e1)}
.skip:focus{top:16px}
main:focus{outline:none}
.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gut)}
.dark{background:var(--night);color:var(--ivory)}
.light{background:var(--ivory);color:var(--ink)}
section{position:relative}
.env{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;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%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .7 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer,.nav{position:relative;z-index:1}

/* ---------- typografie ---------- */
.display{font-weight:800;font-size:clamp(2.6rem,min(5.6vw,9.6vh),5.6rem);line-height:.98;letter-spacing:-.04em}
.display--md{font-size:clamp(2.3rem,4.4vw,4.2rem)}
.h2{font-weight:800;font-size:clamp(2.2rem,4.6vw,4.1rem);letter-spacing:-.035em;line-height:1}
.h2--sm{font-size:clamp(1.9rem,3.2vw,2.8rem)}
.h3{font-weight:700;font-size:clamp(1.45rem,2.2vw,1.9rem);line-height:1.15}
.h4{font-weight:700;font-size:1.22rem;line-height:1.25}
.lede{font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.6;max-width:54ch}
.dark .lede,.dark p{color:var(--mist)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark strong,.dark b{color:var(--ivory)}
.kicker{display:inline-flex;align-items:center;gap:.6em;font:600 .78rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-bottom:1.5rem}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--cobalt);animation:ping 2.8s var(--e2) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(92,128,255,.6)}70%,100%{box-shadow:0 0 0 10px rgba(92,128,255,0)}}
.idx{display:flex;align-items:center;gap:14px;font:700 .8rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1.6rem}
.idx span{display:inline-grid;place-items:center;min-width:38px;height:24px;padding:0 8px;border-radius:99px;border:1px solid var(--line-l-strong);font-size:.74rem;letter-spacing:.06em;color:var(--ink)}
.idx::after{content:"";width:56px;height:1px;background:currentColor;opacity:.4}
.dark .idx{color:var(--ice)}
.dark .idx span{border-color:rgba(180,203,255,.35);color:var(--ivory)}
.idx--sm{margin-bottom:1rem}
.small{font-size:.9rem;color:var(--ink-2)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .02em .14em;margin:-.08em -.02em -.14em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform var(--t-slow) var(--e1);transition-delay:calc(var(--i)*45ms)}
.split.in .w>span{transform:none}

/* ---------- knoppen ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.85em 1.45em;border-radius:999px;font:700 .98rem/1 var(--f-display);text-decoration:none;border:1.5px solid transparent;transition:transform var(--t-fast) var(--e1),background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-mid) var(--e1);white-space:nowrap;overflow:hidden;isolation:isolate}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--primary{background:var(--cobalt);color:#fff;box-shadow:0 12px 32px -10px rgba(66,107,255,.7)}
.btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform 700ms var(--e1)}
.btn--primary:hover{background:var(--cobalt-hi);transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(66,107,255,.8)}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--primary:active{transform:translateY(0) scale(.98)}
.btn--ghost{border-color:rgba(180,203,255,.38);color:var(--ivory);background:rgba(10,15,28,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--ice);background:rgba(180,203,255,.08);transform:translateY(-2px)}
.btn--sm{min-height:42px;padding:.7em 1.15em;font-size:.9rem}
.btn--lg{min-height:56px;padding:1em 1.7em;font-size:1.02rem}
.linkbtn{background:none;border:0;padding:.4em 0;font:600 .92rem var(--f-display);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(66,107,255,.5);color:inherit}
.linkbtn:hover{text-decoration-color:var(--cobalt)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:2.2rem 0 0}

/* ---------- navigatie ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background-color var(--t-mid),box-shadow var(--t-mid)}
.nav__inner{display:flex;align-items:center;gap:20px;width:min(1440px,100%);margin:auto;padding:22px var(--gut);transition:padding var(--t-mid) var(--e1)}
.nav.scrolled{background:rgba(10,15,28,.8);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line-d)}
.nav.scrolled .nav__inner{padding-block:12px}
.sig{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory);margin-right:auto}
.sig__mark{width:38px;height:38px;flex:none;border-radius:11px;background:var(--slate);padding:6px;fill:none;stroke:var(--ivory);stroke-width:3.2;box-shadow:0 0 0 1px var(--line-d) inset;transition:transform var(--t-mid) var(--e1)}
.sig__mark circle{fill:var(--cobalt);stroke:none}
.sig:hover .sig__mark{transform:rotate(-8deg)}
.sig__text{display:flex;flex-direction:column;line-height:1.1}
.sig__text b{font:800 1.08rem var(--f-display);letter-spacing:-.02em}
.sig__text i{font:500 .72rem var(--f-body);font-style:normal;color:var(--mist)}
.nav__links{display:flex;gap:2px}
.nav__links a{position:relative;padding:10px 13px;font:600 .9rem var(--f-display);color:var(--mist);text-decoration:none;border-radius:999px;transition:color var(--t-fast)}
.nav__links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;background:var(--ice);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--e1)}
.nav__links a:hover,.nav__links a.active{color:var(--ivory)}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)}
.nav__toggle{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-d);background:rgba(10,15,28,.5);position:relative}
.nav__toggle span{position:absolute;left:13px;right:13px;height:2px;background:var(--ivory);border-radius:2px;transition:transform var(--t-mid) var(--e1)}
.nav__toggle span:first-child{top:18px}.nav__toggle span:last-child{top:25px}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav__progress{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none}
.nav__progress span{display:block;height:100%;background:linear-gradient(90deg,var(--cobalt),var(--ice));transform:scaleX(var(--prog,0));transform-origin:left}
.menu{position:fixed;inset:0;z-index:45;background:var(--night);color:var(--ivory);padding:110px var(--gut) 40px;display:flex;flex-direction:column;gap:28px;opacity:0;transform:translateY(-12px);transition:opacity var(--t-mid) var(--e1),transform var(--t-mid) var(--e1);overflow:auto}
.menu[hidden]{display:none}
.menu:not(.open){pointer-events:none}
.menu.open{opacity:1;transform:none}
[hidden]{display:none!important}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-d);font:800 1.9rem/1.1 var(--f-display);letter-spacing:-.03em;text-decoration:none}
.menu nav a small{font:600 .75rem var(--f-display);color:var(--ice);letter-spacing:.1em}
.menu__cta{align-self:flex-start}
.menu__foot{margin-top:auto;color:var(--mist);font-size:.92rem;line-height:1.8}

/* ==========================================================================
   HERO · showreel-muur
   ========================================================================== */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:130px 0 120px}
.hero__bg{position:absolute;inset:0;z-index:-3;background:#05080f url(../img/beam.webp) 50% 50%/cover}
.hero__beam{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--e1)}
.hero__beam.ready{opacity:1}
.hero__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 70% 40%,transparent,rgba(5,8,15,.55)),linear-gradient(180deg,rgba(10,15,28,.2),rgba(10,15,28,.55))}
.hero__wall{position:absolute;z-index:-2;top:-18%;right:-10%;width:66%;height:140%;perspective:1800px;pointer-events:none}
.wall{display:flex;gap:28px;height:100%;transform:rotateX(14deg) rotateY(-24deg) rotateZ(9deg);transform-style:preserve-3d}
.wall__col{flex:1;display:flex;flex-direction:column;gap:28px;animation:wallUp var(--dur,70s) linear infinite;will-change:transform}
.wall__col--rev{animation-direction:reverse;--dur:84s;margin-top:-30%}
.wall__col:nth-child(3){--dur:96s;margin-top:-12%}
@keyframes wallUp{to{transform:translate3d(0,-50%,0)}}
.wall .phone{width:100%;max-width:240px;margin:0 auto}
.hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--night) 0%,rgba(10,15,28,.94) 30%,rgba(10,15,28,.55) 52%,rgba(10,15,28,0) 72%),linear-gradient(0deg,var(--night) 0%,rgba(10,15,28,0) 26%),linear-gradient(180deg,rgba(10,15,28,.7),rgba(10,15,28,0) 22%)}
.hero__inner{position:relative;width:min(1440px,100%)}
.hero__inner>*{max-width:760px}
.hero .display{margin-bottom:1.6rem}
.hero__title{animation:titleIn 1s var(--e1) both}
@keyframes titleIn{from{transform:translateY(22px);letter-spacing:-.02em}to{transform:none}}
.hero .lede,.hero .actions,.hero .proof,.hero__sign{animation:rise 900ms var(--e1) both}
.hero .lede{animation-delay:120ms}.hero .actions{animation-delay:220ms}.hero .proof{animation-delay:320ms}.hero__sign{animation-delay:420ms}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:3rem;border-top:1px solid var(--line-d);max-width:720px}
.proof li{padding:18px 20px 0 0}
.proof li+li{padding-left:20px;border-left:1px solid var(--line-d)}
.proof b{display:block;font:800 2.4rem/1 var(--f-display);letter-spacing:-.04em;color:var(--ivory);margin-bottom:8px}
.proof span{display:block;font-size:.86rem;line-height:1.45;color:var(--mist)}
.hero__sign{display:flex;align-items:center;gap:12px;margin:2.2rem 0 0;font-size:.92rem;color:var(--mist)}
.hero__sign img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 28%;border:2px solid var(--slate-2)}
.hero__cue{position:absolute;left:50%;bottom:28px;width:26px;height:42px;margin-left:-13px;border-radius:99px;border:1.5px solid rgba(180,203,255,.4)}
.hero__cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--ice);animation:cue 2.2s var(--e2) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}80%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* sectoren-strook */
.band{display:flex;overflow:hidden;padding:30px 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.band__track{display:flex;flex:none;align-items:center;gap:34px;padding-right:34px;animation:tick 46s linear infinite}
.band__track span{font:800 clamp(1.8rem,3.6vw,3rem)/1 var(--f-display);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(180,203,255,.45);white-space:nowrap;transition:color var(--t-mid)}
.band__track span:hover{color:var(--ivory)}
.band__track i{font-style:normal;color:var(--cobalt);font-size:1.1rem}
@keyframes tick{to{transform:translateX(-100%)}}

/* ==========================================================================
   TOESTELLEN · laptop en smartphone
   ========================================================================== */
.laptop{position:relative;width:100%}
.laptop__lid{position:relative;padding:1.5% 1.5% 2.4%;border-radius:2.4% / 3.8%;background:linear-gradient(180deg,#1C212B,#0C0F15);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 0 1px #04060a,var(--shadow)}
.laptop__lid::before{content:"";position:absolute;top:.55%;left:50%;width:.7%;aspect-ratio:1;border-radius:50%;background:#2A3242;transform:translateX(-50%);box-shadow:0 0 0 1px #0a0d13}
.laptop__screen{position:relative;aspect-ratio:16/10;border-radius:.6%/1%;overflow:hidden;background:#0B0F18}
.laptop__screen video,.laptop__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.laptop__screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 32%)}
.laptop__base{position:relative;width:116%;margin-left:-8%;height:0;padding-bottom:2.9%;border-radius:0 0 46% 46% / 0 0 100% 100%;background:linear-gradient(180deg,#5A606C 0%,#2E333D 22%,#171A21 70%,#0D0F13 100%);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 30px 40px -20px rgba(0,0,0,.8)}
.laptop__base i{position:absolute;top:0;left:50%;width:15%;height:38%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#0F1217,#262A33)}

.phone{position:relative;aspect-ratio:9/19.5;container-type:inline-size}
.phone::before,.phone::after{content:"";position:absolute;width:1.6%;border-radius:2px;background:linear-gradient(90deg,#4B515C,#8A909B);z-index:0}
.phone::before{right:-1.3%;top:24%;height:11%}
.phone::after{left:-1.3%;top:19%;height:6.5%;box-shadow:0 calc(9cqw) 0 #6B717C,0 calc(18cqw) 0 #6B717C}
.phone__body{position:absolute;inset:0;z-index:1;border-radius:15.5% / 7.2%;background:#050608;box-shadow:0 0 0 1.5px #7A808B,0 0 0 2.6px #1A1D23,inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px -28px rgba(0,0,0,.75)}
.phone__body::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05) 100%);z-index:3}
.phone__screen{position:absolute;inset:2.4%;border-radius:13.4% / 6.2%;overflow:hidden;background:#000}
.phone__screen video,.phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone__island{position:absolute;top:3.4%;left:50%;width:29%;height:3.4%;transform:translateX(-50%);border-radius:99px;background:#000;z-index:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.phone__island::after{content:"";position:absolute;right:12%;top:50%;width:14%;aspect-ratio:1;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 40% 40%,#25304a,#05070c 70%)}

/* ==========================================================================
   01 · WERK · studio-podium
   ========================================================================== */
.work{padding:clamp(100px,12vw,170px) 0 clamp(80px,10vw,140px);background-color:var(--night);background-image:linear-gradient(90deg,rgba(180,203,255,.035) 1px,transparent 1px);background-size:calc(100% / 12) 100%}
.sect-head{max-width:860px;margin-bottom:clamp(48px,7vw,96px)}
.sect-head .h2{margin-bottom:1.4rem}
.sect-head__lede{font-size:1.08rem;max-width:64ch}
.sect-head--split{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.sect-head--split .h2{margin:0}
.try .sect-head__lede,.services p,.process p,.invest p{color:var(--ink-2)}

.studio{position:relative;width:min(1440px,100%);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(32px,5vw,90px)}
.studio__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.studio__glow{position:absolute;inset:10% -10% 10% -20%;background:radial-gradient(50% 45% at 50% 50%,var(--pc,#426BFF),transparent 70%);opacity:.22;filter:blur(30px);transition:background 900ms var(--e1)}
.stage{position:relative;width:100%}
.stage__label{display:flex;align-items:baseline;gap:10px;margin:0 0 22px;font:700 .8rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.stage__num{font-size:1.5rem;letter-spacing:-.02em;color:var(--ivory)}
.stage__name{margin-left:12px;padding-left:12px;border-left:1px solid var(--line-d);color:var(--pc,var(--ice));transition:color 600ms}
.devices{position:relative;padding:0 13% 7% 0}
.devices .phone{position:absolute;right:0;bottom:0;width:22%}
.stage__veil{position:absolute;inset:0;background:#0B0F18;opacity:0;transition:opacity 380ms var(--e1);pointer-events:none}
.stage.switching .stage__veil{opacity:1}
.stage.switching .phone__screen video{opacity:0}
.phone__screen video{transition:opacity 380ms var(--e1)}
.stage__bar{height:2px;margin-top:28px;background:var(--line-d);border-radius:2px;overflow:hidden;max-width:86%}
.stage__bar span{display:block;height:100%;background:var(--pc,var(--cobalt));transform:scaleX(var(--rp,0));transform-origin:left;transition:background 600ms}

.projects{padding:12vh 0 8vh}
.project{min-height:76vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity 600ms var(--e1)}
.project.active{opacity:1}
.project__devices{display:none}
.project__no{font:800 clamp(3.6rem,6vw,5.4rem)/.85 var(--f-display);letter-spacing:-.05em;margin:0 0 1.2rem;color:transparent;-webkit-text-stroke:1.2px var(--pc)}
.project__sector{font:600 .78rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pc)!important;margin-bottom:.9rem}
.project__title{font:800 clamp(1.7rem,2.6vw,2.4rem)/1.08 var(--f-display);letter-spacing:-.03em;margin-bottom:1rem}
.project__goal{max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:1.3rem 0 1.6rem}
.chips li{padding:8px 13px;border-radius:99px;border:1px solid var(--line-d);font:600 .8rem var(--f-display);color:var(--ivory);background:rgba(22,34,56,.55)}
.chips li:first-child{border-color:color-mix(in srgb,var(--pc) 60%,transparent);background:color-mix(in srgb,var(--pc) 14%,transparent)}
.project__view{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:99px;border:1.5px solid rgba(180,203,255,.3);background:transparent;color:var(--ivory);font:700 .88rem var(--f-display);transition:border-color var(--t-fast),background-color var(--t-fast),transform var(--t-fast) var(--e1)}
.project__view:hover{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent);transform:translateY(-2px)}

.also{margin-top:clamp(60px,8vw,110px);padding-top:clamp(40px,6vw,70px);border-top:1px solid var(--line-d);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px)}
.also__list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.also__list li{padding:18px 0;border-bottom:1px solid var(--line-d)}
.also__list b{display:block;font:700 1.05rem var(--f-display);margin-bottom:4px}
.also__list span{font-size:.94rem;color:var(--mist)}
.also__note{grid-column:2;margin:0;font:600 .74rem var(--f-display)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.also__note span{color:var(--ice)}

/* ==========================================================================
   02 · ZO ONTSTAAT UW WEBSITE
   ========================================================================== */
.build{height:300vh;background:radial-gradient(70% 50% at 70% 50%,#13203A,var(--night) 70%)}
.build__sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.build__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center;width:min(1440px,100%)}
.build__copy .h2{margin-bottom:2rem}
.build-steps{display:flex;flex-direction:column;gap:4px}
.build-steps li button{display:flex;gap:18px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;padding:15px 18px;border-radius:var(--r-m);color:var(--mist);transition:background-color var(--t-mid)}
.build-steps .n{font:700 .82rem var(--f-display);letter-spacing:.08em;color:var(--mist);padding-top:.35em;transition:color var(--t-mid)}
.build-steps b{display:block;font:800 1.45rem/1.2 var(--f-display);letter-spacing:-.02em;color:rgba(244,242,237,.45);transition:color var(--t-mid)}
.build-steps em{display:block;font-style:normal;font-size:.98rem;max-height:0;opacity:0;overflow:hidden;transition:max-height var(--t-mid) var(--e1),opacity var(--t-mid)}
.build-steps li.on button{background:rgba(22,34,56,.8)}
.build-steps li.on b{color:var(--ivory)}
.build-steps li.on .n{color:var(--ice)}
.build-steps li.on em{max-height:4em;opacity:1;margin-top:6px}
.build-steps li.done b{color:rgba(244,242,237,.75)}
.build-steps__now{display:none;margin:14px 0 0;font-size:.98rem;color:var(--mist)}
.build-steps__bar{height:2px;background:var(--line-d);margin:22px 18px 0;border-radius:2px;overflow:hidden}
.build-steps__bar span{display:block;height:100%;background:var(--cobalt);transform:scaleX(var(--bp,0));transform-origin:left}
.build__stage{position:relative;padding:0 7% 9% 0}
.build__note{position:absolute;left:0;bottom:0;margin:0;font:600 .72rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(169,182,206,.7)}

.mock{position:relative;border-radius:14px;background:var(--slate);box-shadow:var(--shadow),0 0 0 1px rgba(180,203,255,.12) inset;overflow:hidden;transform:scale(var(--ms,1));transform-origin:30% 50%;transition:transform var(--t-slow) var(--e1)}
.mock__chrome{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#111A2B;border-bottom:1px solid rgba(180,203,255,.08)}
.mock__chrome i{width:10px;height:10px;border-radius:50%;background:#2B3A55}
.mock__url{display:inline-flex;align-items:center;gap:6px;margin:0 auto;padding:4px 14px;border-radius:7px;background:rgba(180,203,255,.07);font:500 .72rem var(--f-body);color:var(--mist);transform:translateX(-18px);max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock__url svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6}
.mock__view{position:relative;aspect-ratio:16/10.2;container-type:inline-size;background:#EDEAE3;overflow:hidden}
.mock[data-stage="1"] .mock__view{background:#E9ECF2}
.mock .w{display:block;background:#CDD3DE;border-radius:4px;transition:opacity var(--t-mid) var(--e1),transform var(--t-mid) var(--e1)}
.mock[data-stage="1"] .w{animation:shimmer 2.4s var(--e2) infinite}
@keyframes shimmer{50%{opacity:.6}}
.mock .r{opacity:0;transform:translateY(8px);transition:opacity var(--t-slow) var(--e1),transform var(--t-slow) var(--e1)}
.mock:not([data-stage="1"]) .w{opacity:0;transform:scale(.96)}
.mock:not([data-stage="1"]) .r{opacity:1;transform:none}
.mb-nav{position:absolute;left:5cqw;right:5cqw;top:3.4cqw;height:3.6cqw;display:flex;align-items:center;gap:3cqw;z-index:2}
.mb-nav>span{position:relative;display:flex;align-items:center;height:100%}
.mb-nav .w{position:absolute;inset:.6cqw 0}
.mb-logo{width:12cqw}
.mb-logo .r{font:italic 400 2.3cqw/1 var(--f-serif);color:#fff}
.mb-links{margin-left:auto;gap:2.4cqw;width:26cqw;justify-content:flex-end}
.mb-links .w{position:static;width:6cqw;height:1.2cqw}
.mb-links .w+.w{margin-left:1.4cqw}
.mb-links .r{position:absolute;font:500 1.3cqw var(--f-body);color:rgba(255,255,255,.9)}
.mb-links .r:nth-of-type(1){right:17cqw}.mb-links .r:nth-of-type(2){right:9cqw}.mb-links .r:nth-of-type(3){right:0}
.mb-btn{width:11cqw}
.mb-btn .r{width:100%;height:100%;display:grid;place-items:center;border-radius:99px;background:#F4EFE6;color:#2A1D14;font:700 1.25cqw var(--f-body)}
.mb-hero{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:1fr 1fr;padding:12cqw 5cqw 0;gap:4cqw}
.mb-hero__text{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.2cqw}
.mb-hero__text .w--t{height:3.6cqw;width:90%}
.mb-hero__text .w--t.short{width:60%}
.mb-hero__text .w--l{height:1.2cqw;width:85%}
.mb-hero__text .w--l.short{width:50%}
.mb-title{position:absolute;top:0;font:400 5.4cqw/1 var(--f-serif);letter-spacing:-.02em;color:#fff}
.mb-sub{position:absolute;top:12.4cqw;font:400 1.45cqw/1.5 var(--f-body);color:rgba(255,255,255,.86);max-width:30cqw}
.mb-cta{position:relative;width:18cqw;height:4cqw;margin-top:1.8cqw}
.mb-cta .w{position:absolute;inset:0;border-radius:99px}
.mb-cta .r{position:absolute;top:6cqw;inset-inline:0;height:4cqw;display:grid;place-items:center;border-radius:99px;background:#A65526;color:#fff;font:700 1.35cqw var(--f-body)}
.mb-hero__img{position:relative}
.mb-hero__img .w--x{position:absolute;inset:0 0 6cqw;border-radius:8px;background:linear-gradient(to top right,transparent calc(50% - 1px),#B6BECC 50%,transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),#B6BECC 50%,transparent calc(50% + 1px)),#D5DAE3}
.mb-photo{position:absolute;inset:-12cqw -5cqw 0 -55cqw;background:url(../img/brasserie.webp) 50% 50%/cover;z-index:-1}
.mb-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,6,.86) 0%,rgba(20,12,6,.55) 38%,rgba(20,12,6,.05) 70%),linear-gradient(0deg,rgba(20,12,6,.75) 0%,transparent 40%)}
.mock:not([data-stage="1"]) .mb-hero__img{position:static}
.mb-cards{position:absolute;left:5cqw;right:5cqw;bottom:3.4cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;z-index:2}
.mb-cards>span{position:relative;height:9cqw}
.mb-cards .w{position:absolute;inset:0;border-radius:6px}
.mb-cards .r{position:absolute;inset:0;border-radius:8px;display:flex;align-items:flex-end;padding:1.2cqw 1.4cqw;font:400 1.9cqw var(--f-serif);color:#fff;background:linear-gradient(0deg,rgba(15,8,4,.75),rgba(15,8,4,0) 70%),url(../img/brasserie.webp) var(--bp,50% 50%)/260% auto;box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.mock .mb-cards span:nth-child(2) .r{transition-delay:90ms}.mock .mb-cards span:nth-child(3) .r{transition-delay:180ms}
.mb-widget{position:absolute;right:5cqw;top:14cqw;width:30cqw;padding:2.2cqw;border-radius:2cqw;background:rgba(251,247,240,.97);color:#2A1D14;box-shadow:0 2cqw 5cqw rgba(0,0,0,.35);z-index:4;opacity:0;transform:translateY(3cqw) scale(.96);transition:opacity var(--t-slow) var(--e1),transform var(--t-slow) var(--e1)}
.mb-widget__t{margin:0 0 1.4cqw;font:400 2.1cqw var(--f-serif);color:#2A1D14}
.mb-row{display:flex;gap:1cqw;margin-bottom:1.2cqw}
.mb-row span{flex:1;text-align:center;padding:1cqw 0;border-radius:1.2cqw;background:#EFE7DB;font:600 1.2cqw var(--f-body)}
.mb-row span.on{background:#2A1D14;color:#F7F1E8}
.mb-row--split{margin:1.8cqw 0 0}
.mb-pers{background:transparent!important;text-align:left!important;flex:1.2!important}
.mb-go{background:#A65526!important;color:#fff;position:relative}
.mb-toast{position:absolute;right:5cqw;top:6.5cqw;display:flex;align-items:center;gap:1cqw;padding:1.2cqw 1.8cqw;border-radius:99px;background:#1F6B4E;color:#fff;font:600 1.3cqw var(--f-body);z-index:5;opacity:0;transform:translateY(-1.5cqw);transition:opacity var(--t-mid) var(--e1),transform var(--t-mid) var(--e1)}
.mb-toast svg{width:1.8cqw;height:1.8cqw;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mb-cursor{position:absolute;left:0;top:0;width:3.4cqw;z-index:6;opacity:0;transform:translate(60cqw,48cqw);transition:opacity var(--t-mid)}
.mb-cursor svg{width:100%;fill:#111;stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.35))}
.mock[data-stage="3"] .mb-widget,.mock[data-stage="4"] .mb-widget{opacity:1;transform:none}
.mock[data-stage="3"] .mb-cursor{opacity:1;animation:cursor 3.6s var(--e2) .5s infinite}
.mock[data-stage="3"] .mb-go{animation:press 3.6s var(--e2) .5s infinite}
.mock[data-stage="3"] .mb-toast{animation:toast 3.6s var(--e2) .5s infinite}
@keyframes cursor{0%{transform:translate(52cqw,52cqw)}35%,55%{transform:translate(85cqw,37.5cqw)}42%{transform:translate(85cqw,37.5cqw) scale(.85)}100%{transform:translate(85cqw,37.5cqw);opacity:0}}
@keyframes press{0%,38%,48%,100%{transform:none}42%{transform:scale(.92)}}
@keyframes toast{0%,44%{opacity:0;transform:translateY(-1.5cqw)}52%,90%{opacity:1;transform:none}100%{opacity:0}}
.mock[data-stage="4"] .mb-toast{opacity:1;transform:none}
.mock[data-stage="4"]{--ms:.94}
.phone--build{position:absolute;right:0;bottom:2%;width:22%;opacity:0;transform:translate3d(30px,40px,0) rotate(4deg);transition:opacity var(--t-slow) var(--e1),transform var(--t-slow) var(--e1);z-index:3}
.build__stage[data-stage="4"] .phone--build{opacity:1;transform:none}
.ph-site{display:flex;flex-direction:column;justify-content:flex-end;gap:5cqw;padding:10cqw 9cqw;background:#1A110B}
.ph-photo{position:absolute;inset:0 0 38%;background:url(../img/brasserie.webp) 38% 50%/cover}
.ph-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#1A110B 2%,transparent 60%)}
.ph-title{position:relative;font:400 13cqw/1 var(--f-serif);color:#fff!important}
.ph-line{position:relative;height:3.4cqw;border-radius:3px;background:rgba(255,255,255,.28);width:90%}
.ph-line.short{width:60%}
.ph-btn{position:relative;margin-top:4cqw;padding:5cqw;border-radius:99px;background:#A65526;color:#fff;font:700 6.5cqw var(--f-body);text-align:center}

/* ==========================================================================
   03 · PROBEER HET ZELF
   ========================================================================== */
.try{padding:clamp(100px,12vw,170px) 0}
.sector{--sp-bg:#FBF4EA;--sp-ink:#3A2418;--sp-acc:#56622A;--sp-font:var(--f-serif)}
.sector[data-sector="beauty"]{--sp-bg:#F8EFEC;--sp-ink:#3B1F26;--sp-acc:#8C1C2E}
.sector[data-sector="auto"]{--sp-bg:#0F1726;--sp-ink:#E7ECF6;--sp-acc:#4F7BFF;--sp-font:var(--f-display)}
.tabs{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:99px;background:#E6E2D8;margin-bottom:22px}
.tabs button{position:relative;z-index:1;border:0;background:none;padding:12px 22px;border-radius:99px;font:700 .95rem var(--f-display);color:var(--ink-2);min-height:44px;transition:color var(--t-mid)}
.tabs button[aria-selected="true"]{color:#fff}
.tabs__ink{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:99px;background:var(--ink);transition:transform var(--t-mid) var(--e1),width var(--t-mid) var(--e1)}
.sector__browser{border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(15,22,38,.45),0 0 0 1px var(--line-l)}
.sector__view{position:relative;background:var(--sp-bg);color:var(--sp-ink);transition:background-color var(--t-slow) var(--e1),color var(--t-slow)}
.sp{display:grid;grid-template-columns:1.05fr 1fr;min-height:480px}
.sp[hidden]{display:none}
.sp.enter .sp__img{animation:imgIn var(--t-slow) var(--e1) both}
.sp.enter .sp__body>*{animation:rise var(--t-slow) var(--e1) both}
.sp.enter .sp__body>*:nth-child(2){animation-delay:60ms}.sp.enter .sp__body>*:nth-child(3){animation-delay:120ms}.sp.enter .sp__body>*:nth-child(4){animation-delay:180ms}
@keyframes imgIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sp__img{background-size:cover;background-position:center;min-height:300px}
.sp__body{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column}
.sp__brand{font:600 .78rem var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--sp-acc);margin-bottom:.8rem}
.sector[data-sector="auto"] .sp__brand{color:#8FAEFF}
.sp__title{font:400 clamp(1.8rem,3vw,2.6rem)/1.05 var(--sp-font);letter-spacing:-.02em;margin-bottom:.7rem;color:inherit}
.sector[data-sector="auto"] .sp__title{font-weight:800;letter-spacing:-.03em}
.sp__sub{opacity:.82;margin-bottom:1.6rem}
.sector[data-sector="auto"] .sp__sub,.sector[data-sector="auto"] .car__out{color:#E7ECF6}
.sp button{min-height:44px}
.scoop{display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:end}
.cone{width:120px;overflow:visible}
.cone__body{fill:#D9A35F}
.cone__grid{fill:none;stroke:#B57E3E;stroke-width:1.6}
.scoops circle{transform-box:fill-box;transform-origin:50% 100%;animation:plop 520ms var(--e1) both}
@keyframes plop{from{transform:translateY(-40px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.flavours{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.flavours button,.book__row button{border:1.5px solid rgba(58,36,24,.22);background:rgba(255,255,255,.6);border-radius:99px;padding:8px 16px;font:600 .9rem var(--f-body);transition:background-color var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--e1)}
.flavours button:hover,.book__row button:hover{transform:translateY(-1px);border-color:var(--sp-acc)}
.flavours button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.flavours button::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:8px;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset}
.scoop__out,.book__out,.car__out{font-weight:600;margin:0 0 6px;min-height:1.6em}
.book__row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.book__row button[aria-pressed="true"]{background:var(--sp-acc);border-color:var(--sp-acc);color:#fff}
.book__out.ok{color:var(--sp-acc)}
.car__svg{width:100%;max-width:420px;margin:0 0 10px;overflow:visible}
.car__body{fill:#1B2740;stroke:#3A4C70;stroke-width:1.5}
.zones path{fill:rgba(143,174,255,.08);stroke:rgba(143,174,255,.55);stroke-width:1.2;stroke-dasharray:4 3;cursor:pointer;transition:fill var(--t-fast),stroke var(--t-fast)}
.zones path:hover,.zones path:focus-visible{fill:rgba(79,123,255,.28);outline:none;stroke:#8FAEFF}
.zones path[aria-pressed="true"]{fill:rgba(255,120,90,.55);stroke:#FF9C84;stroke-dasharray:none}
.car__wheel{fill:#0A0F1A;stroke:#3A4C70;stroke-width:2}
.car__hub{fill:#5A6C90}

/* vergelijking */
.compare{margin-top:clamp(80px,10vw,130px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center}
.compare__head .h3{margin-bottom:1rem}
.seg{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.seg button{border:1.5px solid var(--line-l-strong);background:transparent;border-radius:99px;padding:9px 16px;font:600 .88rem var(--f-display);min-height:44px;transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.seg button:hover{border-color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.compare__stage{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(15,22,38,.45),0 0 0 1px var(--line-l);container-type:inline-size;user-select:none;-webkit-user-select:none;cursor:ew-resize;touch-action:pan-y}
.compare__stage.dragging{cursor:grabbing}
.cmp{position:absolute;inset:0;pointer-events:none}
.cmp--basic{background:#fff;color:#222;font-family:Arial,Helvetica,sans-serif}
.cb-nav{display:flex;justify-content:space-between;align-items:center;padding:2.4cqw 3cqw;border-bottom:1px solid #ddd;font-size:1.5cqw}
.cb-nav b{font-size:1.9cqw;color:#1a4fa0}
.cb-nav span{color:#555}
.cb-hero{padding:6cqw 3cqw 4cqw;text-align:center;background:#f2f4f7}
.cb-hero h4{font:700 3.3cqw Arial,sans-serif;letter-spacing:0;margin-bottom:1.6cqw;color:#222}
.cb-hero p{font-size:1.55cqw;color:#555;max-width:60cqw;margin:0 auto 2cqw;line-height:1.5}
.cb-btn{display:inline-block;padding:1.1cqw 2.6cqw;background:#1a4fa0;color:#fff;font-size:1.5cqw;border-radius:3px}
.cb-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:3.4cqw 3cqw}
.cb-cols b{font-size:1.8cqw}
.cb-cols p{font-size:1.4cqw;color:#666;margin-top:.6cqw}
.cmp--custom{clip-path:inset(0 calc(100% - var(--cmp)) 0 0);background:#1A110B;color:#fff}
.cc-photo{position:absolute;inset:0;background:url(../img/brasserie.webp) 50% 50%/cover}
.cc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,6,.9) 0%,rgba(20,12,6,.6) 42%,rgba(20,12,6,.08) 75%),linear-gradient(0deg,rgba(20,12,6,.7),transparent 45%)}
.cc-nav{position:absolute;left:4cqw;right:4cqw;top:3cqw;display:flex;align-items:center;gap:3cqw;font:500 1.4cqw var(--f-body)}
.cc-nav b{font:italic 400 2.5cqw var(--f-serif);margin-right:auto;color:#fff}
.cc-res{padding:1cqw 2cqw;border-radius:99px;background:#F4EFE6;color:#2A1D14;font-weight:700}
.cc-hero{position:absolute;left:4cqw;top:15cqw;max-width:44cqw}
.cc-k{font:600 1.2cqw var(--f-body)!important;letter-spacing:.18em;text-transform:uppercase;color:#E8B48E!important;margin-bottom:1.4cqw}
.cc-hero h4{font:400 6.4cqw/1 var(--f-serif);letter-spacing:-.02em;margin-bottom:1.6cqw;color:#fff}
.cc-hero p{font-size:1.6cqw;line-height:1.5;color:rgba(255,255,255,.86)}
.cc-book{display:flex;gap:1cqw;align-items:center;margin-top:2.2cqw;padding:1cqw;border-radius:99px;background:rgba(251,247,240,.96);color:#2A1D14;width:max-content;font:600 1.35cqw var(--f-body)}
.cc-book span{padding:.9cqw 1.6cqw;border-radius:99px;background:#EFE7DB}
.cc-book span.on{background:#2A1D14;color:#fff}
.cc-book b{padding:.9cqw 2cqw;border-radius:99px;background:#A65526;color:#fff}
.cc-open{position:absolute;left:4cqw;bottom:3.4cqw;display:flex;align-items:center;gap:1cqw;font:600 1.35cqw var(--f-body);color:#fff}
.cc-open i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#5BD08F;box-shadow:0 0 0 .5cqw rgba(91,208,143,.25)}
.compare__line{position:absolute;top:0;bottom:0;left:var(--cmp);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(15,22,38,.15);z-index:3}
.compare__handle{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;border:0;background:#fff;box-shadow:0 8px 24px rgba(15,22,38,.35),0 0 0 6px rgba(255,255,255,.25);display:grid;place-items:center;cursor:grab;transition:transform var(--t-fast) var(--e1)}
.compare__handle:hover{transform:scale(1.08)}
.compare__handle:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.compare__handle svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.compare__tag{position:absolute;bottom:14px;z-index:2;padding:6px 12px;border-radius:99px;background:rgba(15,22,38,.8);color:#fff;font:600 .72rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.compare__tag--l{left:14px}.compare__tag--r{right:14px}
.compare__alt{grid-column:2;font-size:.92rem;color:var(--ink-2);margin:0;max-width:70ch}

/* ==========================================================================
   04 · DIENSTEN + WAT U KRIJGT
   ========================================================================== */
.services{padding:clamp(40px,6vw,80px) 0 clamp(100px,12vw,160px)}
.svc{border-top:1px solid var(--line-l)}
.svc__item{display:grid;grid-template-columns:90px minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--line-l);align-items:start;position:relative}
.svc__item::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e1)}
.svc__item.in::before{transform:scaleX(1)}
.svc__n{font:800 1rem var(--f-display);color:#2447D6;letter-spacing:.06em;padding-top:.5em}
.svc__main .h3{margin-bottom:.7rem}
.svc__main p{max-width:56ch}
.svc__need{margin:0;padding:18px 20px;border-radius:var(--r-m);background:#EBE7DE;font-size:.96rem}
.svc__need span{display:block;font:700 .72rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}

.get{margin-top:clamp(80px,10vw,130px)}
.get__head{max-width:720px;margin-bottom:36px}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;padding:26px;border-radius:22px;background:var(--paper);border:1px solid var(--line-l);overflow:hidden;transition:transform var(--t-mid) var(--e1),box-shadow var(--t-mid) var(--e1)}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(15,22,38,.35)}
.tile h4{font:700 1.15rem var(--f-display);margin:20px 0 6px}
.tile p{margin:0;font-size:.95rem}
.tile .tile__src{margin-top:8px;font-size:.78rem;color:var(--ink-2)}
.tile--search,.tile--leads,.tile--me{grid-column:span 2}
.tile__viz{position:relative;height:150px;border-radius:14px;background:#EFEBE3;display:grid;place-items:center;overflow:hidden}
.gsearch{width:min(460px,90%)}
.gsearch__q{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:99px;background:#fff;box-shadow:0 4px 16px rgba(15,22,38,.1);font-size:.95rem;color:var(--ink)}
.gsearch__ico{width:14px;height:14px;border-radius:50%;border:2px solid #8A93A6;position:relative;flex:none}
.gsearch__ico::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:#8A93A6;transform:rotate(45deg)}
.gsearch__caret{width:1.5px;height:18px;background:var(--cobalt);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.gsearch__res{margin-top:12px;padding:10px 16px;border-radius:12px;background:#fff;opacity:0;transform:translateY(8px);transition:opacity var(--t-mid) var(--e1),transform var(--t-mid) var(--e1)}
.gsearch__res.show{opacity:1;transform:none}
.gsearch__res small{display:block;font-size:.72rem;color:#3B7A4A}
.gsearch__res b{display:block;font:600 .95rem var(--f-body);color:#1A3FB8;margin:2px 0}
.gsearch__res span{font-size:.8rem;color:var(--ink-2)}
.morph span{display:block;width:150px;height:96px;border-radius:10px;border:3px solid var(--ink);background:linear-gradient(180deg,#D7DEEF 0 22%,#fff 22%);animation:morph 7s var(--e2) infinite}
@keyframes morph{0%,22%{width:150px;height:96px;border-radius:10px}33%,55%{width:100px;height:120px;border-radius:12px}66%,88%{width:58px;height:116px;border-radius:14px}100%{width:150px;height:96px;border-radius:10px}}
.gauge{width:150px;overflow:visible}
.gauge path{fill:none;stroke-width:10;stroke-linecap:round}
.gauge__bg{stroke:#DCD6CA}
.gauge__fg{stroke:#2E9E6A;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--e1)}
.tile--speed.in .gauge__fg{stroke-dashoffset:calc(100 - var(--score,98))}
.gauge__val{position:absolute;left:50%;top:58%;transform:translateX(-50%);font:800 2rem var(--f-display);color:#1F7A50}
.feed{width:min(440px,92%);display:flex;flex-direction:column;gap:8px}
.feed li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(15,22,38,.08);font:600 .86rem var(--f-body);opacity:0;transform:translateX(-14px);animation:feed 9s var(--e1) infinite}
.feed li:nth-child(2){animation-delay:1s}.feed li:nth-child(3){animation-delay:2s}
.feed i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
@keyframes feed{0%{opacity:0;transform:translateX(-14px)}8%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(10px)}}
.contrast{display:flex;gap:14px}
.contrast span{display:grid;place-items:center;width:78px;height:78px;border-radius:16px;font:800 2rem var(--f-display)}
.contrast span:first-child{background:var(--ink);color:#fff}
.contrast span:last-child{background:#fff;color:var(--ink);border:1px solid var(--line-l)}
.tile--me .tile__viz{display:flex;justify-content:center;gap:16px}
.tile--me img{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:3px solid #fff;box-shadow:0 8px 20px rgba(15,22,38,.18)}
.online{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:#fff;font:600 .86rem var(--f-display)}
.online i{width:9px;height:9px;border-radius:50%;background:#2EB872;animation:ping-g 2.4s var(--e2) infinite}
@keyframes ping-g{0%{box-shadow:0 0 0 0 rgba(46,184,114,.5)}70%,100%{box-shadow:0 0 0 9px rgba(46,184,114,0)}}

.admin{margin-top:clamp(80px,10vw,130px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center}
.admin__intro .h3{margin-bottom:1rem}
.admin__app{display:grid;grid-template-columns:190px 1fr;min-height:400px;border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:0 40px 90px -40px rgba(15,22,38,.4),0 0 0 1px var(--line-l)}
.admin__side{display:flex;flex-direction:column;gap:4px;padding:16px 12px;background:var(--night)}
.admin__side button{display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;background:none;color:var(--mist);padding:12px 14px;border-radius:10px;font:600 .92rem var(--f-display);min-height:44px;transition:background-color var(--t-fast),color var(--t-fast)}
.admin__side button[aria-selected="true"]{background:var(--slate-2);color:#fff}
.badge{min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--cobalt);color:#fff;font-size:.74rem;display:inline-grid;place-items:center}
.badge.zero{opacity:0}
.admin__main{padding:22px}
.ap[hidden]{display:none}
.reqs li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:14px 16px;border-radius:12px;border:1px solid var(--line-l);margin-bottom:10px;background:#fff;animation:rise var(--t-mid) var(--e1) both}
.reqs b{font:700 .98rem var(--f-display)}
.reqs small{grid-column:1;color:var(--ink-2);font-size:.86rem}
.reqs button{grid-row:1/3;grid-column:2;border:1.5px solid var(--line-l-strong);background:#fff;border-radius:99px;padding:8px 14px;font:600 .82rem var(--f-display);min-height:40px;transition:all var(--t-fast)}
.reqs .ok button{background:#1F6B4E;border-color:#1F6B4E;color:#fff}
.cal{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cal__day{font:700 .74rem var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-bottom:6px}
.cal__col{display:flex;flex-direction:column;gap:6px}
.cal button{border:0;text-align:left;border-radius:9px;padding:9px 10px;background:#E8EDFF;color:#1E2C6B;font:600 .8rem var(--f-body);min-height:44px;line-height:1.25;transition:transform var(--t-fast) var(--e1),background-color var(--t-fast)}
.cal button:hover{transform:translateY(-1px)}
.cal button[aria-pressed="true"]{background:var(--cobalt);color:#fff}
.cal__detail{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line-l);font-size:.92rem;color:var(--ink)!important}
.cms label{display:block;font:700 .82rem var(--f-display);margin-bottom:8px}
.cms input{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line-l-strong);font:500 1rem var(--f-body);background:#fff}
.cms__preview{margin-top:18px;padding:22px;border-radius:12px;background:#1A110B url(../img/brasserie.webp) 50% 60%/cover;position:relative;overflow:hidden;color:#fff}
.cms__preview::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,6,.88),rgba(20,12,6,.45))}
.cms__preview span,.cms__preview b{position:relative;display:block}
.cms__preview span{font:600 .72rem var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#E8B48E;margin-bottom:8px}
.cms__preview b{font:400 1.6rem/1.15 var(--f-serif);color:#fff}

/* ==========================================================================
   05 · OVER MIJ
   ========================================================================== */
.about{padding:clamp(100px,12vw,170px) 0;background:radial-gradient(80% 60% at 20% 30%,#14213A,var(--night) 70%)}
.about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,100px);align-items:center}
.about__photo{position:relative;margin:0;padding:0 14% 14% 0}
.about__photo>img:first-child{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--r-l);box-shadow:var(--shadow)}
.about__inset{position:absolute;right:0;bottom:0;width:38%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:var(--r-m);border:5px solid var(--night);box-shadow:var(--shadow)}
.about__photo figcaption{position:absolute;left:18px;top:18px;display:flex;flex-direction:column;padding:10px 14px;border-radius:12px;background:rgba(10,15,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 .78rem var(--f-display);color:var(--ivory)}
.about__photo figcaption span+span{color:var(--mist);font-weight:500}
.about__text .h2{margin-bottom:1.6rem}
.facts{margin-top:2.4rem;border-top:1px solid var(--line-d)}
.facts li{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-d)}
.facts__k{font:700 .76rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);padding-top:.35em}
.facts p{margin:0}
.langs{display:flex;gap:8px;margin-top:24px}
.langs span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-d);font:700 .82rem var(--f-display);color:var(--ivory)}

/* ==========================================================================
   06 · AANPAK
   ========================================================================== */
.process{padding:clamp(100px,12vw,160px) 0}
.process__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,100px);align-items:start}
.process__aside{position:sticky;top:110px}
.process__aside .h2{margin-bottom:2rem}
.process__img{margin:0;border-radius:var(--r-l);overflow:hidden;aspect-ratio:3/2.2}
.process__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--e1)}
.process__img.in img{transform:scale(1)}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:24px;top:24px;bottom:24px;width:1px;background:var(--line-l)}
.steps__line{position:absolute;left:23px;top:24px;width:4px;height:calc(100% - 48px);overflow:visible}
.steps__line line{stroke:var(--cobalt);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--draw,0) * 100);vector-effect:non-scaling-stroke}
.step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:28px;padding:0 0 clamp(36px,5vw,60px)}
.step__n{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ivory);border:1.5px solid var(--line-l-strong);font:800 1.05rem var(--f-display);transition:background-color var(--t-mid),color var(--t-mid),border-color var(--t-mid)}
.step.in .step__n{background:var(--ink);color:#fff;border-color:var(--ink)}
.step .h4{margin:.55rem 0 .6rem}
.step p{max-width:52ch;margin-bottom:.6em}
.step__out{display:inline-block;padding:8px 14px;border-radius:10px;background:#EBE7DE;font-size:.92rem;color:var(--ink)!important}

/* ==========================================================================
   07 · INVESTERING + FAQ
   ========================================================================== */
.invest{padding:0 0 clamp(100px,12vw,160px)}
.invest__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.invest__card{position:sticky;top:100px;padding:clamp(28px,4vw,48px);border-radius:var(--r-l);background:var(--night);color:var(--ivory);overflow:hidden}
.invest__card::before{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(66,107,255,.4),transparent 65%);animation:pulse 9s var(--e2) -3s infinite alternate}
@keyframes pulse{to{opacity:.45;transform:scale(1.15)}}
.invest__card>*{position:relative}
.invest__card .idx{color:var(--ice)}
.invest__card .idx span{border-color:rgba(180,203,255,.35);color:var(--ivory)}
.invest__card .h2{margin-bottom:1.4rem;color:var(--ivory)}
.invest__card p{color:var(--mist)!important}
.invest__card .small{margin:1.4rem 0 1.8rem}
.invest__price{font:800 1.6rem var(--f-display);color:var(--ivory)!important}
.ticks li{position:relative;padding:8px 0 8px 30px;color:var(--ivory);border-bottom:1px solid var(--line-d)}
.ticks li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2px solid var(--ice);border-bottom:2px solid var(--ice);transform:rotate(-45deg)}
.faq .h3{margin:0 0 1.2rem}
.faq details{border-bottom:1px solid var(--line-l)}
.faq details:first-of-type{border-top:1px solid var(--line-l)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font:700 1.08rem var(--f-display);cursor:pointer;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-l-strong);background:linear-gradient(var(--ink),var(--ink)) 50%/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) 50%/1.5px 12px no-repeat;transition:transform var(--t-mid) var(--e1),background-color var(--t-fast)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover::after{background-color:#E7E3DA}
.faq details>div{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mid) var(--e1)}
.faq details[open]>div{grid-template-rows:1fr}
.faq details>div>p{overflow:hidden;margin:0;padding:0 4px;max-width:62ch}
.faq details[open]>div>p{padding-bottom:22px}

/* ==========================================================================
   08 · CONTACT
   ========================================================================== */
.contact{padding:clamp(100px,13vw,180px) 0;overflow:hidden;isolation:isolate}
.contact__bg{position:absolute;inset:0;z-index:-1;background:#0A1222 url(../img/nethe.webp) 50% 50%/cover}
.contact__video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--e1)}
.contact__video.ready{opacity:1}
.contact__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,13,26,.93) 0%,rgba(8,13,26,.8) 45%,rgba(8,13,26,.62) 100%),linear-gradient(0deg,rgba(8,13,26,.85),transparent 40%)}
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact__intro .display{margin-bottom:1.6rem}
.next{margin:2rem 0 0;display:flex;flex-direction:column;gap:12px}
.next li{display:flex;align-items:center;gap:14px;color:var(--ivory);font-weight:500}
.next span{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:rgba(66,107,255,.18);border:1px solid rgba(92,128,255,.5);font:700 .85rem var(--f-display);color:var(--ivory)}
.me{display:flex;align-items:center;gap:16px;margin-top:2.2rem;padding:14px 18px 14px 14px;border-radius:var(--r-m);background:rgba(22,34,56,.6);border:1px solid var(--line-d);width:max-content;max-width:100%;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.me img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.me b{display:block;font:700 1rem var(--f-display)}
.me a{color:var(--ice);font-size:.95rem;text-underline-offset:3px;word-break:break-all}
.contact__extra{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:clamp(24px,3.5vw,40px);border-radius:var(--r-l);background:rgba(14,22,40,.8);border:1px solid var(--line-d);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.form__title{grid-column:1/-1;margin:0 0 4px;font:800 1.4rem var(--f-display);color:var(--ivory)!important;letter-spacing:-.02em}
.field{display:flex;flex-direction:column;min-width:0;border:0;margin:0;padding:0}
.field--full{grid-column:1/-1}
.field label,.field legend{font:600 .86rem var(--f-display);color:var(--ivory);margin-bottom:8px;padding:0}
.opt{color:var(--mist);font-weight:500}
.field input,.field textarea{width:100%;padding:13px 15px;border-radius:12px;border:1.5px solid rgba(180,203,255,.28);background:rgba(10,15,28,.6);color:var(--ivory);font:400 1rem var(--f-body);transition:border-color var(--t-fast),background-color var(--t-fast)}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder{color:rgba(169,182,206,.6)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cobalt-hi);background:rgba(10,15,28,.85);box-shadow:0 0 0 3px rgba(66,107,255,.25)}
.field.bad input,.field.bad textarea{border-color:#FF8C7A}
.err{margin:6px 0 0;font-size:.84rem;color:#FFB0A3!important}
.err:empty{display:none}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick label{margin:0;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:99px;border:1.5px solid rgba(180,203,255,.28);font:600 .9rem var(--f-display);color:var(--mist);transition:all var(--t-fast)}
.pick input:checked+span{background:var(--ivory);border-color:var(--ivory);color:var(--night)}
.pick input:focus-visible+span{outline:2px solid var(--cobalt-hi);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:4px}
.form__note{flex:1 1 240px;margin:0;font-size:.84rem;color:var(--mist)}
.form__status{grid-column:1/-1;margin:0;font-weight:600}
.form__status:empty{display:none}
.form__status.ok{color:#8FE3B5!important}
.form__status.bad{color:#FFB0A3!important}

/* ---------- footer ---------- */
.foot{padding:clamp(70px,9vw,110px) 0 30px;border-top:1px solid var(--line-d)}
.foot__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-bottom:clamp(50px,6vw,80px);margin-bottom:clamp(40px,5vw,60px);border-bottom:1px solid var(--line-d)}
.foot__big{margin:0;max-width:18ch;font:800 clamp(2rem,4vw,3.4rem)/1 var(--f-display);letter-spacing:-.035em;color:var(--ivory)!important}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px}
.foot__brand p{margin-top:1.2rem;max-width:40ch;font-size:.95rem}
.foot__h{font:700 .76rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ice)!important;margin-bottom:14px}
.foot__col{display:flex;flex-direction:column;gap:9px;font-size:.95rem}
.foot__col p{margin:0}
.foot__col a{color:var(--ivory);text-decoration:none;font:600 .95rem var(--f-display);width:max-content;max-width:100%;word-break:break-all}
.foot__col a:hover{color:var(--ice)}
.foot__base{display:flex;justify-content:space-between;gap:30px;padding-top:24px;border-top:1px solid var(--line-d);font-size:.82rem}
.foot__base p{margin:0;color:var(--mist)}
.foot__base p:last-child{max-width:70ch;text-align:right}

.mcta{display:none}

/* ---------- viewer ---------- */
.viewer{padding:0;border:0;background:transparent;max-width:min(1240px,94vw);width:100%;overflow:visible}
.viewer::backdrop{background:rgba(4,7,14,.88);backdrop-filter:blur(6px)}
.viewer__devices{position:relative;padding:0 12% 6% 0}
.viewer__devices .phone{position:absolute;right:0;bottom:0;width:21%}
.viewer__cap{margin:18px 0 0;text-align:center;color:var(--mist);font:600 .9rem var(--f-display)}
.viewer__close{position:absolute;right:0;top:-58px;width:46px;height:46px;border-radius:50%;border:0;background:var(--ivory);color:var(--night);font-size:1.6rem;line-height:1;z-index:5}

/* ---------- binnenkomen ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--t-slow) var(--e1),transform var(--t-slow) var(--e1)}
.reveal.in{opacity:1;transform:none}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.offscreen,.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}

/* ==========================================================================
   RESPONSIEF
   ========================================================================== */
@media (max-width:1180px){
  .nav__links{display:none}
  .nav__toggle{display:block}
  .admin,.compare,.also{grid-template-columns:1fr}
  .compare__alt,.also__note{grid-column:1}
}

/* tablet en smartphone: geen vastgepinde podia, alles in de leesstroom */
@media (max-width:900px),(orientation:portrait) and (pointer:coarse),(prefers-reduced-motion:reduce){
  .studio{grid-template-columns:1fr}
  .studio__stage{display:none}
  .projects{padding:0}
  .project{min-height:0;opacity:1;padding:0 0 clamp(70px,12vw,110px)}
  .project__devices{display:block;position:relative;padding:0 11% 8% 0;margin-bottom:34px}
  .project__devices .phone{position:absolute;right:0;bottom:0;width:23%}
  .build{height:auto}
  .build__sticky{position:relative;height:auto;display:block;padding:clamp(90px,12vw,140px) 0}
  .build__grid{grid-template-columns:1fr;gap:40px}
  .build-steps{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .build-steps li button{padding:12px 14px;gap:10px;border:1px solid var(--line-d)}
  .build-steps b{font-size:1.05rem}
  .build-steps em{display:none}
  .build-steps__now{display:block;min-height:3.2em}
  .build-steps__bar{margin:14px 0 0}
}

@media (max-width:900px){
  .nav__cta{display:none}
  .hero{align-items:flex-start;padding-top:120px}
  .hero__wall{top:auto;bottom:-6%;right:-30%;width:120%;height:58%;opacity:.5}
  .hero__shade{background:linear-gradient(180deg,var(--night) 0%,rgba(10,15,28,.9) 46%,rgba(10,15,28,.55) 70%,var(--night) 100%)}
  .sect-head--split{grid-template-columns:1fr;gap:18px}
  .sp{grid-template-columns:1fr;min-height:0}
  .sp__img{min-height:220px}
  .svc__item{grid-template-columns:1fr;gap:12px}
  .bento{grid-template-columns:1fr 1fr}
  .tile--search,.tile--leads,.tile--me{grid-column:span 2}
  .about__grid,.process__grid,.invest__grid,.contact__grid{grid-template-columns:1fr}
  .about__photo{max-width:520px}
  .process__aside,.invest__card{position:static}
  .also__list{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .foot__base{flex-direction:column}
  .foot__base p:last-child{text-align:left}
  .mcta{display:inline-flex;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;opacity:0;transform:translateY(120%);transition:opacity var(--t-mid),transform var(--t-mid) var(--e1);pointer-events:none}
  .mcta.show{opacity:1;transform:none;pointer-events:auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .display{font-size:clamp(2.3rem,10.6vw,3.2rem)}
  .h2{font-size:clamp(1.95rem,8.6vw,2.6rem)}
  .sig__text i{display:none}
  .actions .btn{flex:1 1 100%}
  .proof{grid-template-columns:1fr;gap:0}
  .proof li,.proof li+li{padding:14px 0;border-left:0;border-bottom:1px solid var(--line-d);display:flex;align-items:center;gap:16px}
  .proof b{margin:0;min-width:56px;font-size:2rem}
  .hero__cue{display:none}
  .bento{grid-template-columns:1fr}
  .tile--search,.tile--leads,.tile--me{grid-column:auto}
  .admin__app{grid-template-columns:1fr}
  .admin__side{flex-direction:row;overflow-x:auto;padding:10px}
  .admin__side button{flex:none}
  .cal{gap:5px}
  .cal button{padding:7px 6px;font-size:.72rem}
  .form{grid-template-columns:1fr;padding:20px}
  .facts li{grid-template-columns:1fr;gap:6px}
  .scoop{grid-template-columns:84px 1fr;gap:16px}
  .cone{width:84px}
  .flavours{display:grid;grid-template-columns:1fr 1fr}
  .tabs{display:flex;width:100%}
  .tabs button{flex:1;padding:12px 8px}
  .compare__stage{aspect-ratio:4/3.4}
  .me{width:100%}
  .foot__grid{grid-template-columns:1fr}
  .viewer__devices{padding:0 14% 10% 0}
  .viewer__devices .phone{width:26%}
}
@media (pointer:coarse){.btn{min-height:48px}}

/* minder beweging: alles direct in eindstand */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .split .w>span,.reveal{opacity:1!important;transform:none!important}
  .band__track[aria-hidden],.band__track+.band__track{display:none}
  .band{justify-content:center;flex-wrap:wrap}
  .band__track{flex-wrap:wrap;justify-content:center}
  .wall__col{transform:none}
  .steps__line line{stroke-dashoffset:0}
  .feed li{opacity:1;transform:none}
  .gsearch__res{opacity:1;transform:none}
  .gauge__fg{stroke-dashoffset:calc(100 - var(--score,98))}
}

/* ==========================================================================
   RONDE 3 · scrollfilm, toestellen naast elkaar, diensten met bewegend beeld
   ========================================================================== */
/* studio: laptop en gsm groot naast elkaar */
.studio{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.devices{display:flex;align-items:flex-end;gap:3.2%;padding:0}
.devices .laptop{flex:1 1 auto;min-width:0}
.devices .phone{position:relative;right:auto;bottom:auto;flex:0 0 24%;width:auto;margin-bottom:1.2%}
.stage__bar{max-width:100%}

/* scrollfilm: tekening wordt woning */
.film{height:340vh}
.film__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.film__media{position:absolute;inset:0;z-index:-1;background:#EDEAE2}
.film__media img,.film__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - .12 * var(--fp,0)))}
.film__video{opacity:0;transition:opacity .6s var(--e1)}
.film__video.ready{opacity:1}
.film__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,28,.82) 0%,rgba(10,15,28,.45) 34%,rgba(10,15,28,0) 60%),linear-gradient(0deg,rgba(10,15,28,.55),rgba(10,15,28,0) 30%);opacity:calc(.55 + .45 * var(--fp,0))}
.film__ui{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:80px;padding-bottom:60px}
.film__beats{position:relative;min-height:46vh}
.beat{position:absolute;left:0;top:0;max-width:560px;margin:0;opacity:0;transform:translateY(24px);transition:opacity .5s var(--e1),transform .6s var(--e1)}
.beat.on{opacity:1;transform:none}
.beat b{display:block;font:800 clamp(2.4rem,5.2vw,4.8rem)/.98 var(--f-display);letter-spacing:-.04em;color:var(--ivory);text-shadow:0 4px 30px rgba(5,8,15,.55)}
.beat span{display:block;margin-top:16px;font-size:1.15rem;color:#E6EBF5!important;max-width:42ch;text-shadow:0 2px 12px rgba(5,8,15,.8)}
.beat .btn{margin-top:26px}
.film__meter{position:absolute;left:var(--gut);right:var(--gut);bottom:34px;display:flex;align-items:center;gap:14px}
.film__meter span{flex:1;height:2px;background:rgba(255,255,255,.2);border-radius:2px;position:relative;overflow:hidden}
.film__meter span::after{content:"";position:absolute;inset:0;background:var(--cobalt-hi);transform:scaleX(var(--fp,0));transform-origin:left}
.film__meter i{font:700 .8rem var(--f-display);font-style:normal;color:var(--ivory);min-width:3.5ch;text-align:right}
.film__note{position:absolute;right:var(--gut);top:96px;margin:0;font:600 .7rem var(--f-display)!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)!important}

/* werkwijze: echte keukenscène in het voorbeeld */
.mb-photo .mb-video,.ph-photo .mb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.ph-photo .mb-video{z-index:0}

/* diensten: grote kaarten met bewegend beeld */
.svx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svx__card{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--paper);border:1px solid var(--line-l);transition:transform var(--t-mid) var(--e1),box-shadow var(--t-mid) var(--e1)}
.svx__card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(15,22,38,.45)}
.svx__media{position:relative;aspect-ratio:4/3.4;overflow:hidden;background:#DDD8CE}
.svx__media img,.svx__media video{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(1.04);transition:transform .2s linear}
.svx__card:hover .svx__media img,.svx__card:hover .svx__media video{transform:translate3d(0,var(--py,0px),0) scale(1.1);transition:transform 1.2s var(--e1)}
.svx__body{padding:26px 26px 30px}
.svx__n{display:inline-block;font:800 .82rem var(--f-display);letter-spacing:.08em;color:#2447D6;margin-bottom:10px}
.svx__body .h3{margin-bottom:.7rem}
.svx__eg{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line-l);font-size:.9rem}
.get{margin-top:clamp(70px,9vw,120px)}

@media (max-width:900px),(orientation:portrait) and (pointer:coarse),(prefers-reduced-motion:reduce){
  .film{height:auto}
  .film__sticky{position:relative;height:auto;min-height:100svh}
  .film__beats{min-height:0}
  .beat{position:relative;opacity:1;transform:none;margin-bottom:28px}
  .beat:not(.beat--end) b{font-size:clamp(1.8rem,7vw,2.6rem)}
  .film__meter{display:none}
  .project__devices{display:flex;align-items:flex-end;gap:3%;padding:0}
  .project__devices .laptop{flex:1 1 auto;min-width:0}
  .project__devices .phone{position:relative;right:auto;bottom:auto;flex:0 0 25%;width:auto}
}
@media (max-width:900px){
  .svx{grid-template-columns:1fr}
  .film__shade{background:linear-gradient(0deg,rgba(10,15,28,.92) 0%,rgba(10,15,28,.55) 55%,rgba(10,15,28,.2) 100%)}
  .film__ui{justify-content:flex-end;padding-top:140px}
}

/* ==========================================================================
   RONDE 4 · probeer het zelf (film + onthulling), wat u krijgt (premium), faq
   ========================================================================== */
.sp__img{position:relative;overflow:hidden}
.sp__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--e1)}
.sp__vid.ready{opacity:1}
.sp.enter .sp__img{animation:reveal 1s var(--e1) both}
@keyframes reveal{from{clip-path:circle(0% at var(--rx,50%) var(--ry,50%))}to{clip-path:circle(150% at var(--rx,50%) var(--ry,50%))}}
.sector__browser{transform:perspective(1800px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .6s var(--e1);will-change:transform}
.sector__view::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 45%);mix-blend-mode:soft-light}
.sector__view{overflow:hidden}

/* vergelijking: hint dat scrollen hem bestuurt */
.compare__stage::after{content:"Scroll of sleep";position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:6px 12px;border-radius:99px;background:rgba(15,22,38,.78);color:#fff;font:600 .7rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;transition:opacity .5s}
.compare__stage.touched::after{opacity:0}
.compare__line{transition:box-shadow .3s}
.compare__line::before{content:"";position:absolute;inset:0 -3px;background:linear-gradient(180deg,transparent,rgba(110,140,255,.9),transparent);filter:blur(3px);opacity:.8}

/* wat u krijgt: donkere premium kaart met lichtspot */
.get{position:relative;padding:clamp(28px,4.5vw,64px);border-radius:32px;background:radial-gradient(120% 90% at 0% 0%,#18285080,transparent 60%),var(--night);color:var(--ivory);overflow:hidden;isolation:isolate}
.get::before{content:"";position:absolute;z-index:-1;width:620px;height:620px;right:-200px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(66,107,255,.35),transparent 65%);animation:pulse 10s var(--e2) infinite alternate}
.get .idx{color:var(--ice)}
.get .h2{color:var(--ivory)}
.get .tile{background:rgba(22,34,56,.55);border:1px solid rgba(180,203,255,.12);color:var(--ivory)}
.get .tile>*{position:relative;z-index:1}
.get .tile h4{color:var(--ivory)}
.get .tile p{color:var(--mist)!important}
.get .tile::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(120,150,255,.95),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.get .tile::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(66,107,255,.16),transparent 50%);opacity:0;transition:opacity .35s}
.get .bento:hover .tile::before,.get .bento:hover .tile::after{opacity:1}
.get .tile:hover{transform:translateY(-4px);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.get .tile__viz{background:rgba(10,15,28,.6);border:1px solid rgba(180,203,255,.08)}
.get .morph span{border-color:var(--ice);background:linear-gradient(180deg,#2B3E6E 0 22%,#0E1526 22%)}
.get .gauge__bg{stroke:#24324F}
.get .gauge__fg{stroke:#3DDC84}
.get .gauge__val{color:#5BE39A}
.get .contrast span:first-child{background:#fff;color:#0F1626}
.get .contrast span:last-child{background:var(--cobalt);color:#fff;border:0}
.get .online{background:rgba(255,255,255,.95);color:var(--ink)}
.get .tile .tile__src{color:var(--mist)}
.tile:not(.in){opacity:0;transform:translateY(34px) scale(.97)}
.tile.in{animation:tileIn .9s var(--e1) backwards;animation-delay:calc(var(--n,0) * 90ms)}
@keyframes tileIn{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}

/* faq als laatste blok voor contact */
.invest{padding:clamp(100px,12vw,160px) 0}
.invest__grid{grid-template-columns:1fr}
.faq{max-width:940px;margin:0 auto;width:100%}
.faq__title{margin-bottom:1.6rem}

@media (prefers-reduced-motion:reduce){.tile:not(.in){opacity:1;transform:none}.sector__browser{transform:none}}

/* ==========================================================================
   RONDE 5 · DPJudged, 3D-gsm, horizontale reel, pakketten, sociale media
   ========================================================================== */
/* DP-monogram */
.sig__mark--dp{display:grid;place-items:center;padding:0;font:800 .95rem/1 var(--f-display);letter-spacing:-.04em;color:var(--ivory);background:linear-gradient(145deg,#22345A,#0E1628);box-shadow:0 0 0 1px rgba(180,203,255,.22) inset,0 6px 16px -6px rgba(66,107,255,.6)}

/* realistische smartphone: titanium rand, zichtbare zijkant (dikte) en glas */
.phone__body{background:#030405;box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.16),
  0 0 0 1.4px #9AA1AD,
  0 0 0 2.6px #3A3F48,
  1px 1px 0 2.6px #5E646F,
  2px 2px 0 2.6px #50555F,
  3px 3px 0 2.6px #43474F,
  4px 4px 0 2.6px #373A41,
  5px 5px 0 2.6px #2C2F35,
  6px 6px 0 2.6px #23262B,
  7px 8px 0 2.6px #1B1D21,
  18px 30px 50px -10px rgba(0,0,0,.65),
  40px 60px 90px -30px rgba(0,0,0,.6)}
.phone__body::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;background:linear-gradient(100deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 18%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%);mix-blend-mode:screen}
.phone::before{right:-1.9%;width:2.2%;background:linear-gradient(90deg,#2A2D33,#9AA1AD 60%,#585E68);box-shadow:4px 4px 0 #23262B}
.phone::after{left:-1.9%;width:2.2%;background:linear-gradient(90deg,#585E68,#9AA1AD 40%,#2A2D33)}
.wall .phone{transform:translateZ(0)}
.wall .phone__body{box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1.4px #9AA1AD,0 0 0 2.6px #3A3F48,
  -1px 1px 0 2.6px #5E646F,-2px 2px 0 2.6px #50555F,-3px 3px 0 2.6px #43474F,-4px 4px 0 2.6px #373A41,-5px 5px 0 2.6px #2C2F35,-6px 6px 0 2.6px #23262B,-7px 8px 0 2.6px #1B1D21,
  -20px 30px 60px -10px rgba(0,0,0,.7)}
.laptop__lid{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 0 0 1.2px #8C929D,0 0 0 2.4px #24272D,0 50px 100px -40px rgba(0,0,0,.85)}

/* werk: horizontale reel */
.work{padding-bottom:0}
.work .sect-head{margin-bottom:clamp(30px,4vw,56px)}
.hs{position:relative}
.hs__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hs__track{display:flex;width:max-content;will-change:transform}
.slide{position:relative;flex:none;width:100vw;padding:70px max(var(--gut),calc((100vw - 1440px) / 2)) 40px;display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:clamp(28px,4vw,70px);align-items:center}
.slide::before{content:"";position:absolute;inset:10% 30% 10% 0;background:radial-gradient(50% 50% at 50% 50%,var(--pc),transparent 70%);opacity:.18;filter:blur(40px);pointer-events:none}
.slide__devices{position:relative;display:flex;align-items:flex-end;gap:3%;transform:perspective(2200px) rotateY(6deg) rotateX(2deg);transform-origin:left center;transition:transform 1.2s var(--e1)}
.slide.active .slide__devices{transform:perspective(2200px) rotateY(3deg) rotateX(1deg)}
.slide__devices .laptop{flex:1 1 auto;min-width:0}
.slide__devices .phone{flex:0 0 23%;margin-bottom:1%}
.slide__info{position:relative;opacity:.35;transform:translateX(30px);transition:opacity .8s var(--e1),transform .8s var(--e1)}
.slide.active .slide__info{opacity:1;transform:none}
.slide__no{font:800 clamp(3.4rem,5.5vw,5rem)/.85 var(--f-display);letter-spacing:-.05em;margin:0 0 1rem;color:transparent;-webkit-text-stroke:1.2px var(--pc)}
.slide__sector{font:600 .78rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pc)!important;margin-bottom:.8rem}
.slide__title{font:800 clamp(1.7rem,2.6vw,2.5rem)/1.06 var(--f-display);letter-spacing:-.03em;margin-bottom:1rem}
.slide__goal{max-width:44ch}
.slide .chips li:first-child{border-color:color-mix(in srgb,var(--pc) 60%,transparent);background:color-mix(in srgb,var(--pc) 14%,transparent)}
.hs__ui{position:absolute;left:max(var(--gut),calc((100vw - 1440px) / 2));right:max(var(--gut),calc((100vw - 1440px) / 2));bottom:26px;display:flex;align-items:center;gap:22px}
.hs__count{margin:0;font:700 .8rem var(--f-display);letter-spacing:.12em;color:var(--mist)}
.hs__count b{font-size:1.3rem;color:var(--ivory);margin-right:6px}
.hs__bar{flex:1;height:2px;background:var(--line-d);border-radius:2px;overflow:hidden}
.hs__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--cobalt),var(--ice));transform:scaleX(var(--hp,0));transform-origin:left}
.hs__hint{margin:0;font:600 .78rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.hs__hint span{display:inline-block;animation:nudge 1.6s var(--e2) infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
/* lege laatste slide: uw zaak */
.yours__screen{display:grid;place-content:center;justify-items:center;gap:12px;background:radial-gradient(80% 70% at 50% 40%,#1B2B52,#0A0F1C 75%)}
.yours__screen b{font:800 clamp(1.1rem,2.2vw,2rem) var(--f-display);color:var(--ivory);letter-spacing:-.02em}
.yours__screen i{width:42%;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(180,203,255,.12),rgba(180,203,255,.4),rgba(180,203,255,.12));background-size:200% 100%;animation:shim 2.4s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.yours__mark{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;font:800 1.2rem var(--f-display);color:#fff;background:linear-gradient(145deg,var(--cobalt),#22345A);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 40px rgba(66,107,255,.55);animation:glowp 3s var(--e2) infinite alternate}
@keyframes glowp{to{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 70px rgba(92,128,255,.85)}}
.yours__screen--m .yours__mark{width:34px;height:34px;border-radius:10px;font-size:.8rem}
.yours__screen--m b{font-size:.8rem}
.slide--yours .slide__title{font-size:clamp(2rem,3.2vw,3rem)}
.slide--yours .btn{margin-top:1.4rem}

/* scrollfilm: geen extra schaal, zo blijft het beeld haarscherp */
.film__media img,.film__media video{transform:none}

/* pakketten */
.plans{padding:clamp(100px,12vw,160px) 0}
.plans .sect-head__lede{color:var(--ink-2)}
.plans__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,44px);border-left:1px solid var(--line-l);background:var(--ivory)}
.plan:first-child{border-left:0}
.plan--featured{background:var(--night);color:var(--ivory);border-left:0;margin:-18px 0;padding-top:calc(clamp(28px,3vw,44px) + 18px);padding-bottom:calc(clamp(28px,3vw,44px) + 18px);box-shadow:0 40px 80px -40px rgba(10,15,28,.6);overflow:hidden;isolation:isolate}
.plan--featured::before{content:"";position:absolute;z-index:-1;width:380px;height:380px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(66,107,255,.45),transparent 65%);animation:pulse 9s var(--e2) infinite alternate}
.plan__badge{position:absolute;top:22px;right:22px;margin:0;padding:6px 12px;border-radius:99px;background:var(--cobalt);color:#fff!important;font:700 .72rem var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.plan__name{font:800 1.7rem var(--f-display);letter-spacing:-.02em;margin-bottom:.3rem}
.plan__tag{color:var(--ink-2);margin-bottom:1.6rem}
.plan--featured .plan__tag,.plan--featured .plan__terms{color:var(--mist)!important}
.plan__price{display:flex;align-items:baseline;gap:8px;margin:0}
.plan__price small{font:600 .82rem var(--f-display);color:var(--ink-2)}
.plan--featured .plan__price small{color:var(--mist)}
.plan__price b{font:800 clamp(2.8rem,4.4vw,4rem)/1 var(--f-display);letter-spacing:-.05em}
.plan__terms{font-size:.84rem;color:var(--ink-2);margin:.5rem 0 1.4rem}
.plan__list{border-top:1px solid var(--line-l);margin-bottom:2rem;flex:1}
.plan--featured .plan__list{border-color:var(--line-d)}
.plan__list li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line-l);font-size:.96rem}
.plan--featured .plan__list li{border-color:var(--line-d);color:var(--ivory)}
.plan__list li::before{content:"";position:absolute;left:3px;top:18px;width:11px;height:6px;border-left:2px solid #1F8A5B;border-bottom:2px solid #1F8A5B;transform:rotate(-45deg)}
.plan--featured .plan__list li::before{border-color:#5BE39A}
.plan .btn{align-self:stretch}
.btn--line{border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;background:transparent}
.btn--line:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.plans__note{margin:2.2rem 0 0;max-width:80ch;color:var(--ink-2)}
.plans__note a{color:var(--ink);font-weight:600}
.plan:not(.in){opacity:0;transform:translateY(30px)}
.plan.in{animation:tileIn .9s var(--e1) backwards;animation-delay:calc(var(--n,0) * 110ms)}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(56px,7vw,90px);border-top:1px solid var(--line-l)}
.perks li{padding:28px 28px 28px 0;border-bottom:1px solid var(--line-l)}
.perks li:nth-child(3n+2),.perks li:nth-child(3n){padding-left:28px;border-left:1px solid var(--line-l)}
.perks b{display:block;font:700 1.08rem var(--f-display);margin:14px 0 6px}
.perks p{margin:0;color:var(--ink-2);font-size:.94rem}
.perk__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--night);color:var(--ice);transition:transform .5s var(--e1)}
.perks li:hover .perk__ico{transform:rotate(-8deg) scale(1.08)}
.perk__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.perks li:not(.in){opacity:0;transform:translateY(24px)}
.perks li.in{animation:tileIn .8s var(--e1) backwards;animation-delay:calc(var(--n,0) * 80ms)}

/* sociale media */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.social{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px 9px 12px;border-radius:99px;border:1px solid var(--line-d);background:rgba(22,34,56,.55);color:var(--ivory);text-decoration:none;font:600 .88rem var(--f-display);transition:transform var(--t-fast) var(--e1),border-color var(--t-fast),background-color var(--t-fast)}
.social:hover{transform:translateY(-2px);border-color:var(--ice);background:rgba(66,107,255,.18)}
.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social svg .fill{fill:currentColor;stroke:none}
.socials--foot{margin-top:20px}

/* gsm/tablet en minder beweging: reel wordt een veegbare rij */
@media (max-width:900px),(orientation:portrait) and (pointer:coarse),(prefers-reduced-motion:reduce){
  .hs{height:auto!important}
  .hs__sticky{position:relative;height:auto;overflow:visible;display:block;padding-bottom:70px}
  .hs__track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:none!important;padding:0 0 10px}
  .hs__track::-webkit-scrollbar{display:none}
  .slide{width:88vw;scroll-snap-align:center;grid-template-columns:1fr;gap:26px;padding:20px 4vw}
  .slide:first-child{margin-left:6vw}.slide:last-child{margin-right:6vw}
  .slide__devices{transform:none!important}
  .slide__info{opacity:1;transform:none}
  .hs__ui{left:var(--gut);right:var(--gut);bottom:20px}
  .hs__hint{display:none}
}
@media (max-width:900px){
  .plans__grid{grid-template-columns:1fr}
  .plan{border-left:0;border-top:1px solid var(--line-l)}
  .plan--featured{margin:0}
  .perks{grid-template-columns:1fr}
  .perks li,.perks li:nth-child(3n+2),.perks li:nth-child(3n){padding-left:0;border-left:0}
}
@media (prefers-reduced-motion:reduce){.plan:not(.in),.perks li:not(.in){opacity:1;transform:none}}
.plans__note a{white-space:nowrap}
@media (max-width:640px){.proof b{min-width:84px}}

/* ==========================================================================
   RONDE 6 · Over mij: portret, tijdlijn, online ervaring, bewijs
   ========================================================================== */
.about{--warm:#EE8A4E;padding:clamp(100px,12vw,170px) 0 clamp(90px,10vw,140px);background:radial-gradient(70% 50% at 15% 20%,rgba(238,138,78,.10),transparent 60%),radial-gradient(80% 60% at 85% 30%,#13203A,var(--night) 70%)}
.about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,100px);align-items:start}
.about__media{position:sticky;top:110px}
.about__portrait{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(238,138,78,.25)}
.about__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.04);transition:transform 1.4s var(--e1)}
.about__portrait.in img,.about.in .about__portrait img{transform:none}
.about__portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,15,28,.55),transparent 35%);pointer-events:none}
.about__portrait figcaption{position:absolute;left:18px;bottom:16px;z-index:1;padding:7px 12px;border-radius:99px;background:rgba(10,15,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 .78rem var(--f-display);color:var(--ivory)}
.about__text .h2{margin-bottom:1.4rem}
.about__text .lede{margin-bottom:0}

.tl{position:relative;margin-top:2.6rem;padding-left:40px}
.tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--line-d)}
.tl::after{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--warm),var(--cobalt-hi));transform:scaleY(var(--tlp,0));transform-origin:top}
.tl__item{position:relative;padding:0 0 38px}
.tl__item:last-child{padding-bottom:0}
.tl__item::before{content:"";position:absolute;left:-36px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--night);border:2px solid rgba(180,203,255,.35);transition:border-color .5s var(--e1),background-color .5s var(--e1),box-shadow .5s var(--e1)}
.tl__item.on::before{border-color:var(--warm);background:var(--warm);box-shadow:0 0 0 6px rgba(238,138,78,.18)}
.tl__when{margin:0 0 6px;font:800 1.15rem var(--f-display);letter-spacing:-.01em;color:#F3A574!important}
.tl__title{font:700 1.35rem/1.2 var(--f-display);margin-bottom:.6rem}
.tl__item p:not(.tl__when){max-width:56ch;margin-bottom:0}
.tl__photo{display:flex;align-items:center;gap:14px;margin:18px 0 0}
.tl__photo img{width:120px;height:120px;object-fit:cover;border-radius:14px;border:1px solid var(--line-d);box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.tl__photo figcaption{font:600 .8rem var(--f-display);color:var(--mist)}
.tl__item:not(.in){opacity:0;transform:translateY(16px)}
.tl__item.in{animation:tlIn .8s var(--e1) backwards}
@keyframes tlIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.reach{margin-top:clamp(80px,10vw,130px)}
.reach__head{max-width:640px;margin-bottom:28px}
.reach__head .h3{margin-bottom:.6rem}
.reach__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.reach__card{position:relative;display:flex;flex-direction:column;padding:26px;border-radius:22px;background:linear-gradient(160deg,rgba(31,45,72,.75),rgba(14,21,38,.9));border:1px solid var(--line-d);overflow:hidden;isolation:isolate;transition:transform .5s var(--e1),border-color .4s}
.reach__card::before{content:"";position:absolute;z-index:-1;width:260px;height:260px;right:-110px;top:-120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 45%,transparent),transparent 65%);opacity:.6}
.reach__card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--rc) 55%,transparent)}
.reach__platform{display:flex;align-items:center;gap:10px;margin:0 0 20px;font:700 1rem var(--f-display);color:var(--ivory)!important}
.reach__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--rc) 22%,transparent);color:#fff}
.reach__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reach__ico svg .fill{fill:currentColor;stroke:none}
.reach__nums{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 14px}
.reach__nums div{display:flex;flex-direction:column-reverse}
.reach__nums dd{margin:0;font:800 clamp(2rem,3vw,2.6rem)/1 var(--f-display);letter-spacing:-.04em;color:var(--ivory)}
.reach__nums dt{margin-top:6px;font:600 .78rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.reach__handle{margin:0 0 18px;font:500 .9rem var(--f-body);color:var(--mist)!important}
.reach__btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:99px;border:1.5px solid rgba(180,203,255,.3);background:transparent;color:var(--ivory);font:700 .86rem var(--f-display);transition:border-color var(--t-fast),background-color var(--t-fast)}
.reach__btn:hover{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 16%,transparent)}
.reach__note{margin:16px 0 0;font-size:.86rem;color:var(--mist)}
.reach__card:not(.in){opacity:0;transform:translateY(18px)}
.reach__card.in{animation:tlIn .8s var(--e1) backwards;animation-delay:calc(var(--n,0) * 90ms)}

.about__close{margin-top:clamp(70px,9vw,120px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:30px;align-items:center;padding-top:clamp(40px,5vw,60px);border-top:1px solid var(--line-d)}
.about__quote{margin:0;font:700 clamp(1.5rem,2.6vw,2.2rem)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ivory)!important}
.about__quote::before{content:"\201C";display:block;font-size:3rem;line-height:.6;color:var(--warm);margin-bottom:.3rem}
.about__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;justify-content:flex-end}
.about__link{color:var(--ice);font:700 .95rem var(--f-display);text-decoration:none;border-bottom:1px solid rgba(180,203,255,.35);padding-bottom:2px}
.about__link:hover{border-color:var(--ice)}

/* bewijsvenster */
.proofbox{padding:0;border:0;background:transparent;width:min(1120px,94vw);max-height:92vh;overflow:visible;color:var(--ivory)}
.proofbox::backdrop{background:rgba(4,7,14,.86);backdrop-filter:blur(6px)}
.proofbox__inner{background:#0E1526;border:1px solid var(--line-d);border-radius:22px;padding:clamp(18px,3vw,30px);max-height:92vh;overflow:auto;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.proofbox__head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}
.proofbox__kicker{margin:0 0 4px;font:600 .74rem var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ice)!important}
.proofbox__title{font:800 1.4rem var(--f-display);margin:0}
.proofbox__close{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--ivory);color:var(--night);font-size:1.6rem;line-height:1}
.proofbox__shots{display:grid;gap:14px}
.proofbox__shots.two{grid-template-columns:2.3fr 1fr;align-items:start}
.proofbox__shots figure{margin:0}
.proofbox__shots img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#000}
.proofbox__shots figcaption{margin-top:8px;font-size:.84rem;color:var(--mist)}
.proofbox__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}
.proofbox__meta div{padding:12px 14px;border-radius:12px;background:rgba(22,34,56,.6);border:1px solid var(--line-d)}
.proofbox__meta dt{font:600 .72rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.proofbox__meta dd{margin:4px 0 0;font:600 .95rem var(--f-body);color:var(--ivory)}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr}
  .about__media{position:static}
  .about__portrait{max-width:520px;aspect-ratio:4/5}
  .reach__cards{grid-template-columns:1fr}
  .about__close{grid-template-columns:1fr}
  .about__cta{justify-content:flex-start}
  .proofbox__shots.two{grid-template-columns:1fr}
  .proofbox__meta{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.tl__item:not(.in),.reach__card:not(.in){opacity:1;transform:none}.tl::after{transform:scaleY(1)}}

/* ==========================================================================
   RONDE 7 · demo-label, belofte in de hero, werkwijze, live voordelen, lessen
   ========================================================================== */
/* Werk: duidelijk dat het demo's zijn */
.demo-flag{display:inline-flex;align-items:center;gap:9px;margin:1.2rem 0 0;padding:7px 14px;border-radius:99px;border:1px solid var(--line-d);background:rgba(22,34,56,.55);font:700 .76rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ice)!important}
.demo-flag span{color:#5BE39A;font-size:.6rem;animation:blink 2.4s var(--e2) infinite}
@keyframes blink{50%{opacity:.25}}
.slide:not(.slide--yours) .slide__no::after{content:"Demo";display:inline-block;vertical-align:middle;margin-left:14px;padding:5px 10px;border-radius:99px;border:1px solid color-mix(in srgb,var(--pc) 55%,transparent);font:700 .68rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--pc);transform:translateY(-.5em)}

/* Hero: belofte met draaiend zegel */
.pledge{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);margin-top:2.6rem;max-width:720px;padding:18px 24px 18px 18px;border-radius:24px;border:1px solid rgba(91,227,154,.28);background:linear-gradient(120deg,rgba(18,40,40,.72),rgba(14,21,38,.72));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.pledge__seal{position:relative;flex:none;display:grid;place-items:center;width:116px;height:116px;border-radius:50%;background:radial-gradient(circle,#123A30 0 46%,transparent 47%);color:#5BE39A}
.pledge__seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.pledge__seal text{font:800 9.4px var(--f-display);letter-spacing:.17em;fill:#9DF0C2}
.pledge__seal b{font:800 2.2rem/1 var(--f-display);letter-spacing:-.05em;color:#fff;margin-top:-6px}
.pledge__seal small{position:absolute;top:66px;font:700 .62rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#9DF0C2}
@keyframes spin{to{transform:rotate(360deg)}}
.pledge__list{display:grid;gap:12px;margin:0}
.pledge__list li{position:relative;padding-left:30px}
.pledge__list li::before{content:"";position:absolute;left:2px;top:4px;width:18px;height:18px;border-radius:50%;background:#5BE39A;box-shadow:0 0 0 5px rgba(91,227,154,.16)}
.pledge__list li::after{content:"";position:absolute;left:7.5px;top:8px;width:7px;height:4px;border-left:2px solid #0A0F1C;border-bottom:2px solid #0A0F1C;transform:rotate(-45deg)}
.pledge__list b{display:block;font:800 1.02rem var(--f-display);color:#fff}
.pledge__list span{display:block;font-size:.9rem;line-height:1.45;color:var(--mist)}
.offscreen .pledge__seal svg,.paused .pledge__seal svg{animation-play-state:paused}

/* Pakketten zonder prijs */
.plan__quote{display:flex;align-items:center;gap:12px;margin:0 0 1.6rem;padding:14px 16px;border-radius:14px;background:rgba(15,22,38,.05);border:1px dashed var(--line-l-strong);font:700 .95rem var(--f-display)}
.plan--featured .plan__quote{background:rgba(66,107,255,.14);border-color:rgba(180,203,255,.35);color:var(--ivory)}
.plan__quote-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--night);color:var(--ice)}
.plan--featured .plan__quote-ico{background:var(--cobalt);color:#fff}
.plan__quote-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

/* Werkwijze */
.route{position:relative;margin-top:clamp(60px,8vw,100px);padding:clamp(28px,4vw,52px);border-radius:28px;background:var(--night);color:var(--ivory);overflow:hidden;isolation:isolate}
.route::before{content:"";position:absolute;z-index:-1;inset:auto -10% -60% 30%;height:120%;background:radial-gradient(closest-side,rgba(91,227,154,.20),transparent),radial-gradient(closest-side at 20% 40%,rgba(66,107,255,.25),transparent);filter:blur(10px)}
.route__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 30px;margin-bottom:clamp(26px,3vw,40px)}
.route__head p{margin:0;color:var(--mist)}
.route__steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;counter-reset:s}
.route__steps::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:2px;background:linear-gradient(90deg,var(--cobalt-hi),var(--cobalt-hi) 45%,#5BE39A 55%,#5BE39A);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e1) .2s}
.route.in .route__steps::before{transform:scaleX(1)}
.route__steps li{position:relative}
.route__n{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#16223A;border:2px solid var(--cobalt-hi);font:800 1.05rem var(--f-display);color:#fff;margin-bottom:16px}
.route__gift .route__n{border-color:#5BE39A;background:#123A30;box-shadow:0 0 0 6px rgba(91,227,154,.12)}
.route__steps b{display:block;font:800 1.08rem var(--f-display);margin-bottom:6px}
.route__steps p{margin:0;font-size:.93rem;color:var(--mist)}
.route__gift b{color:#9DF0C2}
.route__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--line-d)}
.route__cta p{margin:0;color:var(--mist);font-size:.92rem}
.route__cta p a{color:var(--ice)}
.route:not(.in) .route__steps li{opacity:0;transform:translateY(16px)}
.route.in .route__steps li{animation:tlIn .8s var(--e1) backwards}
.route.in .route__steps li:nth-child(2){animation-delay:.25s}
.route.in .route__steps li:nth-child(3){animation-delay:.5s}
.route.in .route__steps li:nth-child(4){animation-delay:.75s}

/* Voordelen als live scènes */
.bento-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 30px;margin:clamp(70px,9vw,120px) 0 22px}
.bento-head p{margin:0;color:var(--ink-2)}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bento__card{display:flex;flex-direction:column;padding:16px 16px 22px;border-radius:22px;background:var(--paper);border:1px solid var(--line-l);transition:transform .5s var(--e1),box-shadow .5s var(--e1)}
.bento__card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(10,15,28,.45)}
.bento__card--wide{grid-column:span 2}
.bento__card>b{display:block;font:800 1.1rem var(--f-display);margin:18px 6px 6px}
.bento__card>p{margin:0 6px;color:var(--ink-2);font-size:.93rem}
.bento__card:not(.in){opacity:0;transform:translateY(24px)}
.bento__card.in{animation:tileIn .8s var(--e1) backwards;animation-delay:calc(var(--n,0) * 80ms)}
.scene{position:relative;height:170px;border-radius:16px;background:var(--night);overflow:hidden;color:var(--ivory);isolation:isolate}
.scene *{animation-play-state:paused!important}
.scene.live *{animation-play-state:running!important}

/* 1 zoeken */
.scene--search{padding:22px 24px;background:linear-gradient(160deg,#16223A,#0A0F1C)}
.s-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:99px;background:#fff;color:#0F1626;font:600 .9rem var(--f-body)}
.s-bar svg{flex:none;width:18px;height:18px;fill:none;stroke:#5C6B85;stroke-width:2;stroke-linecap:round}
.s-typed{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--cobalt);width:0;animation:typing 7s steps(20,end) infinite}
@keyframes typing{0%{width:0}35%,100%{width:20ch}}
.s-res{display:flex;flex-direction:column;gap:3px;position:relative;margin-top:10px;padding-left:34px;opacity:0;animation:resIn 7s var(--e1) infinite}
.s-res i{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:7px;background:rgba(180,203,255,.18)}
.s-res b{display:block;height:9px;width:46%;border-radius:4px;background:rgba(180,203,255,.28)}
.s-res span{display:block;height:7px;width:70%;border-radius:4px;background:rgba(180,203,255,.14)}
.s-res--top{padding:8px 12px 8px 46px;margin-left:-12px;border-radius:12px;background:rgba(66,107,255,.22);border:1px solid rgba(92,128,255,.6)}
.s-res--top i{left:12px;top:9px;background:var(--cobalt)}
.s-res--top b{height:auto;width:auto;background:none;font:800 .92rem var(--f-display);color:#fff}
.s-res--top span{height:auto;width:auto;background:none;font-size:.78rem;color:var(--ice)}
.s-res:nth-of-type(3){animation-delay:.15s}.s-res:nth-of-type(4){animation-delay:.3s}
@keyframes resIn{0%,38%{opacity:0;transform:translateY(10px)}46%,92%{opacity:1;transform:none}100%{opacity:0}}

/* 2 snelheid */
@property --g{syntax:'<number>';inherits:true;initial-value:0}
.scene--speed{display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,#14304A,#0A0F1C 70%)}
.scene--speed svg{width:130px;height:130px;transform:rotate(-90deg)}
.scene--speed circle{fill:none;stroke-width:9}
.g-bg{stroke:rgba(180,203,255,.12)}
.g-fg{stroke:#5BE39A;stroke-linecap:round;stroke-dasharray:var(--g) 100;animation:gauge 5s var(--e1) infinite}
.scene--speed .g-num{position:absolute;font:800 2.3rem/1 var(--f-display);color:#fff;counter-reset:n calc(var(--g) * 1);animation:gauge 5s var(--e1) infinite}
.scene--speed .g-num{font-size:0}
.scene--speed .g-num::after{content:counter(n);font-size:2.3rem}
@keyframes gauge{0%{--g:0}55%,90%{--g:98}100%{--g:98}}

/* 3 schermen */
.scene--screens{display:grid;place-items:center;background:linear-gradient(160deg,#1A2440,#0A0F1C)}
.sc-dev{display:flex;flex-direction:column;gap:6px;padding:12px;border:3px solid #C9D5EE;border-radius:10px;background:#0E1526;animation:morph 6s var(--e1) infinite}
.sc-dev i{display:block;height:10px;border-radius:4px;background:rgba(180,203,255,.25)}
.sc-dev i:first-child{height:34px;background:linear-gradient(120deg,var(--cobalt),#8C7BFF)}
.sc-dev i:last-child{width:50%;background:#5BE39A}
@keyframes morph{0%,30%{width:180px;height:112px;border-radius:10px}50%,80%{width:66px;height:124px;border-radius:16px}100%{width:180px;height:112px;border-radius:10px}}

/* 4 live */
.scene--live{background:linear-gradient(#24365E,#0A0F1C)}
.lv-sky{position:absolute;inset:0;background:linear-gradient(180deg,#F3A574,#8C7BFF 55%,#1B2A4A);animation:sky 8s ease-in-out infinite}
.lv-sun{position:absolute;left:50%;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:#FFE3B0;box-shadow:0 0 40px 10px rgba(255,214,150,.55);animation:sun 8s ease-in-out infinite}
.lv-hill{position:absolute;left:-20%;right:-20%;border-radius:50% 50% 0 0}
.lv-hill--1{height:90px;bottom:-30px;background:#1B2A4A;animation:hill 8s ease-in-out infinite}
.lv-hill--2{height:70px;bottom:-34px;left:20%;right:-40%;background:#0E1526;animation:hill 8s ease-in-out infinite reverse}
.lv-bar{position:absolute;left:14px;right:14px;bottom:12px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.lv-bar span{display:block;height:100%;width:100%;border-radius:2px;background:#fff;transform-origin:left;animation:bar 8s ease-in-out infinite}
@keyframes sky{50%{filter:hue-rotate(-25deg) brightness(.75)}}
@keyframes sun{0%,100%{top:110px}50%{top:22px}}
@keyframes hill{50%{transform:translateY(-14px)}}
@keyframes bar{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* 5 aanvraag */
.scene--lead{display:grid;place-items:center;background:linear-gradient(160deg,#16223A,#0A0F1C)}
.ld-btn{padding:12px 22px;border-radius:99px;background:var(--cobalt);font:800 .9rem var(--f-display);color:#fff;animation:press 5s var(--e1) infinite}
.ld-cursor{position:absolute;width:24px;height:24px;left:50%;top:50%;animation:cursor 5s var(--e1) infinite}
.ld-cursor svg{width:24px;height:24px;fill:#fff;stroke:#0A0F1C;stroke-width:1.4;stroke-linejoin:round}
.ld-toast{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#fff;color:#0F1626;font:700 .74rem var(--f-display);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);animation:toast 5s var(--e1) infinite}
.ld-toast i{width:9px;height:9px;border-radius:50%;background:#1F8A5B}
@keyframes cursor{0%{transform:translate(80px,60px)}35%{transform:translate(8px,6px)}42%{transform:translate(8px,6px) scale(.85)}48%,100%{transform:translate(8px,6px)}}
@keyframes press{0%,38%{transform:none;box-shadow:0 0 0 0 rgba(66,107,255,.6)}42%{transform:scale(.94)}52%{transform:none;box-shadow:0 0 0 18px rgba(66,107,255,0)}100%{box-shadow:0 0 0 18px rgba(66,107,255,0)}}
@keyframes toast{0%,48%{opacity:0;transform:translateY(-10px)}56%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 6 chat */
.scene--chat{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px 22px;background:linear-gradient(160deg,#16223A,#0A0F1C)}
.ch{max-width:78%;margin:0;padding:9px 14px;border-radius:16px;font-size:.84rem;line-height:1.35;opacity:0;animation:chat 9s var(--e1) infinite}
.ch--them{align-self:flex-start;background:rgba(180,203,255,.14);color:var(--ivory)!important;border-bottom-left-radius:4px}
.ch--me{align-self:flex-end;background:var(--cobalt);color:#fff!important;border-bottom-right-radius:4px;animation-delay:1.4s}
.ch:nth-child(3){animation-delay:2.8s}
@keyframes chat{0%{opacity:0;transform:translateY(10px)}8%,80%{opacity:1;transform:none}90%,100%{opacity:0}}

/* Over mij: beelden in de tijdlijn */
.tl__photo--wide,.tl__photo--phone,.tl__photo--logo{flex-direction:column;align-items:flex-start;gap:10px}
.tl__photo--wide img{width:min(100%,520px);height:auto;object-fit:contain;background:#fff;border-radius:14px}
.tl__photo--logo img{width:auto;height:auto;max-width:230px;padding:22px 26px;border-radius:14px;background:#fff;object-fit:contain;box-sizing:content-box}
.tl__photo--phone img{width:190px;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:20px;border:4px solid #1E2A44;background:#fff}

/* Over mij: lessen in plaats van een cijferwand */
.lessons{margin-top:clamp(80px,10vw,130px)}
.lessons__head{max-width:700px;margin-bottom:30px}
.lessons__kicker{margin:0 0 10px;font:700 .76rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:#F3A574!important}
.lessons__head .h3{font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;margin-bottom:.7rem}
.lessons__list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--line-d)}
.lesson{position:relative;display:flex;flex-direction:column;padding:28px 28px 26px 0}
.lesson+.lesson{padding-left:28px;border-left:1px solid var(--line-d)}
.lesson::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--rc);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e1) calc(var(--n,0) * 250ms)}
.lesson.in::before{transform:scaleX(1)}
.lesson__step{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font:800 1.4rem var(--f-display);color:#fff!important}
.lesson__step span{font:700 .8rem var(--f-display);letter-spacing:.12em;color:var(--rc)}
.lesson__rule{margin:0 0 18px;font:600 1.12rem/1.4 var(--f-display);color:var(--ivory)!important}
.lesson__site{margin:0 0 22px;padding:14px 16px;border-radius:14px;background:rgba(22,34,56,.6);border:1px solid var(--line-d);font-size:.94rem}
.lesson__site b{display:block;margin-bottom:4px;font:700 .72rem var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.lesson__proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:auto 0 0;font:600 .8rem var(--f-display);color:var(--mist)!important}
.lesson__proof span{padding:5px 10px;border-radius:99px;background:rgba(180,203,255,.08)}
.lesson__proof .lesson__src{background:none;padding-left:0;color:var(--mist)}
.lesson__proof .reach__btn{margin:0 0 0 auto;min-height:36px;padding:6px 14px;font-size:.8rem}
.lesson:not(.in){opacity:0;transform:translateY(18px)}
.lesson.in{animation:tlIn .8s var(--e1) backwards;animation-delay:calc(var(--n,0) * 120ms)}

@media (max-width:900px){
  .route__steps{grid-template-columns:1fr 1fr;row-gap:28px}
  .route__steps::before{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .lessons__list{grid-template-columns:1fr}
  .lesson,.lesson+.lesson{padding:26px 0;border-left:0;border-bottom:1px solid var(--line-d)}
}
@media (max-width:640px){
  .pledge{flex-direction:column;align-items:flex-start;padding:18px}
  .pledge__seal{width:96px;height:96px}
  .pledge__seal b{font-size:1.8rem}
  .pledge__seal small{top:55px}
  .route__steps{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bento__card--wide{grid-column:auto}
  .slide:not(.slide--yours) .slide__no::after{margin-left:10px}
}
@media (prefers-reduced-motion:reduce){
  .scene *,.pledge__seal svg{animation:none!important}
  .s-typed{width:20ch}.s-res{opacity:1}.ch{opacity:1}.ld-toast{opacity:1}
  .scene--speed{--g:98}
  .bento__card:not(.in),.lesson:not(.in),.route:not(.in) .route__steps li{opacity:1;transform:none}
}
/* ==========================================================================
   Ronde 8: één pakket, zegeltekst, FAQ één tegelijk
   ========================================================================== */
.pledge__seal text{letter-spacing:0}

.pack{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);border-radius:var(--r-l);overflow:hidden;background:var(--paper);border:1px solid var(--line-l);box-shadow:0 40px 80px -48px rgba(10,15,28,.45)}
.pack__main{padding:clamp(26px,4vw,52px)}
.pack__top{max-width:56ch;margin-bottom:clamp(22px,3vw,36px)}
.pack__badge{display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:99px;background:rgba(66,107,255,.1);color:#2A4FD6;font:700 .72rem var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.pack__name{font:800 clamp(2rem,3.4vw,2.8rem)/1.05 var(--f-display);letter-spacing:-.03em;margin:0 0 .5rem}
.pack__tag{color:var(--ink-2);margin:0;font-size:1.05rem}
.pack__groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px) clamp(22px,3vw,44px)}
.pack__group h4{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:800 1.02rem var(--f-display)}
.pack__group h4 span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--night);color:var(--ice);font:700 .72rem var(--f-display)}
.pack__group .plan__list{margin:0;border-top:0}
.pack__group .plan__list li{font-size:.94rem;padding:10px 0 10px 28px}
.pack__group .plan__list li:last-child{border-bottom:0}
.pack__group .plan__list li::before{top:16px}
.pack__side{position:relative;display:flex;flex-direction:column;padding:clamp(26px,3.4vw,44px);background:var(--night);color:var(--ivory);overflow:hidden;isolation:isolate}
.pack__side::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-180px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(66,107,255,.5),transparent 65%);animation:pulse 9s var(--e2) infinite alternate}
.pack__price-k{margin:0;color:var(--mist);font:700 .74rem var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.pack__price{margin:.2rem 0 1rem;font:800 clamp(2.2rem,3.4vw,2.9rem)/1.05 var(--f-display);letter-spacing:-.04em;color:#fff}
.pack__why{color:var(--mist);font-size:.95rem;margin:0 0 1.4rem}
.pack__steps{counter-reset:s;margin:0 0 1.8rem;padding:0;list-style:none;border-top:1px solid var(--line-d)}
.pack__steps li{counter-increment:s;display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-d);font:600 .93rem var(--f-display)}
.pack__steps li::before{content:counter(s);display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(180,203,255,.35);color:var(--ice);font-size:.76rem}
.pack__steps li:nth-child(3)::before,.pack__steps li:nth-child(4)::before{background:rgba(91,227,154,.14);border-color:rgba(91,227,154,.5);color:#5BE39A}
.pack__side .btn{margin-top:auto;justify-content:center}
.pack__note{margin:.8rem 0 0;color:var(--mist);font-size:.84rem;text-align:center}
.pack:not(.in){opacity:0;transform:translateY(30px)}
.pack.in{animation:tileIn .9s var(--e1) backwards}
@media (max-width:1000px){
  .pack{grid-template-columns:1fr}
  .pack__side .btn{margin-top:0}
}
@media (max-width:640px){
  .pack__groups{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.pack:not(.in){opacity:1;transform:none}.pack__side::before{animation:none}}

/* FAQ: de hoogte wordt in main.js geanimeerd (één vraag tegelijk) */
.faq details>div{display:block;overflow:hidden;transition:none}
.faq details>div>p{padding-bottom:22px}
.faq details[open]:not(.is-open) summary::after{transform:none}
.faq details.is-open summary::after{transform:rotate(45deg)}
.faq details.is-open summary{color:var(--cobalt)}
/* Contact: sfeerscènes bovenaan (Higgsfield-beelden) met trage camera en een wisselend woord */
.contact{padding-top:0}
.contact__bg{background:radial-gradient(55% 45% at 82% 40%,rgba(66,107,255,.16),transparent 70%),radial-gradient(45% 35% at 8% 85%,rgba(242,194,123,.07),transparent 70%),linear-gradient(180deg,#0B1428,#080D1A)}
.contact__bg::after{display:none}
.cscene{position:relative;margin:0 0 clamp(56px,7vw,100px);height:clamp(440px,46vw,740px);overflow:hidden;isolation:isolate;color:var(--ivory)}
.cscene__media{position:absolute;inset:-7% 0;transform:translate3d(0,var(--py,0%),0);will-change:transform}
.cscene__media picture,.cscene__media img{display:block;width:100%;height:100%}

/* drie scènes op verschillende plaatsen; main.js zet elke 5 s de volgende (beeld en woord samen), zachte overvloeier */
.cscene__shot{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.45,0,.25,1)}
.cscene__shot.is-on{opacity:1;z-index:1}
.cscene__shot.is-out{z-index:0}
/* één doorlopende, trage camerabeweging voor alle beelden samen: geen zoomsprong bij een wissel */
.cscene__media img{object-fit:cover;object-position:62% 50%;transform:scale(1.04)}
.cscene.live .cscene__media picture{animation:camFloat 24s ease-in-out infinite alternate}
@keyframes camFloat{from{transform:scale(1)}to{transform:scale(1.035)}}
.cscene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,#0B1428 0%,rgba(11,20,40,.55) 9%,transparent 24%),
  linear-gradient(90deg,rgba(8,13,26,.9) 0%,rgba(8,13,26,.62) 30%,rgba(8,13,26,.12) 52%,transparent 64%),
  linear-gradient(0deg,rgba(8,13,26,.75) 0%,rgba(8,13,26,.4) 18%,transparent 42%)}
.cscene__media{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 97%);mask-image:linear-gradient(180deg,#000 72%,transparent 97%)}
.cscene .cscene__line{color:#fff}
.cscene__cap{position:absolute;z-index:2;left:0;right:0;bottom:clamp(40px,6vw,88px)}
.cscene__cap>*{max-width:36rem}
.cscene__k{display:flex;align-items:center;gap:10px;margin:0 0 .9rem;font:700 .74rem var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#F2C27B}
.cscene__k .dot{width:7px;height:7px;border-radius:50%;background:#F2C27B;animation:ping 2.8s var(--e2) infinite}
.cscene__line{margin:0;font:800 clamp(1.9rem,3.5vw,3.1rem)/1.12 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;color:#F2C27B;white-space:nowrap}
.rot>span{grid-area:1/1;opacity:0;transform:translateY(70%);transition:opacity .34s var(--e1),transform .45s var(--e1)}
.rot>span.is-on{opacity:1;transform:none;transition-delay:.7s}
.rot>span.is-out{opacity:0;transform:translateY(-70%);transition:opacity .25s ease-in .4s,transform .32s ease-in .4s}
.cscene__sub{margin:1rem 0 0;color:var(--mist);font-size:1.05rem}
.cscene__note{position:absolute;z-index:2;right:var(--gut);bottom:14px;margin:0;font:600 .7rem var(--f-display);letter-spacing:.06em;color:rgba(169,182,206,.7)}
.cscene .cscene__cap>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e1),transform .9s var(--e1)}
.cscene.in .cscene__cap>*{opacity:1;transform:none}
.cscene.in .cscene__cap>:nth-child(2){transition-delay:.12s}
.cscene.in .cscene__cap>:nth-child(3){transition-delay:.24s}
@media (max-width:700px){
  .cscene{height:auto;margin-bottom:48px}
  .cscene__media{position:relative;inset:auto;aspect-ratio:1200/830;transform:none}
  .cscene__media img{object-position:50% 50%}
  .cscene::before{bottom:auto;height:calc(100vw * 830 / 1200);background:linear-gradient(180deg,#0B1428 0%,transparent 22%),linear-gradient(0deg,#0B1428 0%,transparent 38%)}
  .cscene__cap{position:relative;bottom:auto;margin-top:-28px}
  .cscene__line{font-size:1.75rem}
  .cscene__note{top:12px;bottom:auto;right:14px;padding:3px 8px;border-radius:99px;background:rgba(8,13,26,.55)}
}
@media (prefers-reduced-motion:reduce){
  .cscene__media picture,.cscene__shot,.rot>span,.cscene__k .dot{animation:none!important;transition:none!important}
  .cscene .cscene__cap>*{opacity:1;transform:none}
}

/* Ronde 10: "Contentmaker en influencer" (tijdlijn) en "Wat jaren content mij leerden" horen zichtbaar bij elkaar.
   Gedeeld accent in de kleuren van YouTube, TikTok en Instagram, een knop naar de lessen en een kaartje terug. */
:root{--social:linear-gradient(90deg,#FF3B30,#FE2C55 50%,#E1306C)}
.tl__item--content::before{background:var(--night);border-color:#FE2C55}
.tl__item--content.on::before{border-color:#FE2C55;background:#FE2C55;box-shadow:0 0 0 6px rgba(254,44,85,.2)}
.tl__item--content .tl__title{background:var(--social);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.tl__jump{display:inline-flex;align-items:center;gap:14px;margin-top:16px;padding:12px 18px 12px 12px;border-radius:16px;background:rgba(254,44,85,.08);border:1px solid rgba(254,44,85,.35);color:var(--ivory);text-decoration:none;transition:background-color var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--e1)}
.tl__jump:hover,.tl__jump:focus-visible{background:rgba(254,44,85,.16);border-color:rgba(254,44,85,.6);transform:translateY(-2px)}
.tl__jump-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--social);color:#fff;font:800 1.1rem var(--f-display)}
.tl__jump span:last-child{display:flex;flex-direction:column;font-size:.86rem;color:var(--mist)}
.tl__jump b{font:800 .98rem var(--f-display);color:#fff}
.tl__jump:hover .tl__jump-ico{animation:jumpNudge 1s var(--e2) infinite}
@keyframes jumpNudge{50%{transform:translateY(3px)}}
.lessons__from{position:relative;display:flex;align-items:center;gap:14px;max-width:460px;margin:0 0 22px;padding:8px 16px 8px 8px;border-radius:16px;background:rgba(22,34,56,.7);border:1px solid var(--line-d);color:var(--ivory);text-decoration:none;overflow:hidden;transition:border-color var(--t-fast),transform var(--t-fast) var(--e1)}
.lessons__from::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--social)}
.lessons__from:hover,.lessons__from:focus-visible{border-color:rgba(254,44,85,.55);transform:translateY(-2px)}
.lessons__from img{flex:none;width:112px;height:46px;margin-left:6px;border-radius:9px;object-fit:cover}
.lessons__from span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.lessons__from small{font:700 .72rem var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#F3A574}
.lessons__from b{font:800 1rem var(--f-display);color:#fff}
.lessons__from i{margin-left:auto;font-style:normal;font-weight:800;color:#FE2C55}
.lessons__head .lessons__kicker{background:var(--social);-webkit-background-clip:text;background-clip:text;color:transparent!important}
@media (max-width:520px){.lessons__from img{width:84px;height:36px}.tl__jump{width:100%}}
@media (prefers-reduced-motion:reduce){.tl__jump:hover .tl__jump-ico{animation:none}}
/* Ronde 11: afstudeerfoto naast het UA-logo (gelijke hoogte). */
.tl__pair{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tl__photo--logo .tl__pair{flex-wrap:nowrap}
.tl__photo--logo .tl__pair img:first-child{width:150px;height:auto;aspect-ratio:199/57;max-width:none;padding:38px 24px}
.tl__photo--logo img.tl__grad{width:96px;height:120px;max-width:none;padding:0;background:#1E2A44;object-fit:cover;object-position:60% 30%;box-sizing:border-box}
@media (max-width:520px){
  .tl__photo--logo .tl__pair{gap:10px}
  .tl__photo--logo .tl__pair img:first-child{width:128px;padding:30px 18px}
  .tl__photo--logo img.tl__grad{width:78px;height:97px}
}
/* Ronde 11: vloeiender scrollen.
   De gloed achter elke demo was een vervaagde laag (filter: blur) die bij elke verschuiving van de reel opnieuw
   getekend moest worden. Een zachte radiale verloop geeft hetzelfde beeld zonder die rekenkost. */
.slide::before{filter:none;inset:0 20% 0 -10%;background:radial-gradient(45% 50% at 50% 50%,var(--pc),transparent 100%);opacity:.12}
.slide__devices{will-change:transform;backface-visibility:hidden}

/* Ronde 11: het pakket bouwt zich op tijdens het scrollen.
   Elke kop schuift in, elk vinkje tekent zich, en rechts zakken prijs en stappen 1 tot 4 één voor één naar binnen. */
.pack-anim .pack__group h4,.pack-anim .pack__group .plan__list li{opacity:0;transform:translateX(-16px);transition:opacity .55s var(--e1) var(--d,0s),transform .65s var(--e1) var(--d,0s)}
.pack-anim .pack__group .plan__list li::before{clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.6,0,.2,1) calc(var(--d,0s) + .25s)}
.pack-anim .pack__group .plan__list li::after{content:"";position:absolute;left:-4px;top:7px;width:24px;height:24px;border-radius:50%;background:rgba(31,138,91,.16);transform:scale(0);opacity:0;transition:transform .5s var(--e2) calc(var(--d,0s) + .2s),opacity .9s ease calc(var(--d,0s) + .55s)}
.pack-anim .pack__group h4.pin,.pack-anim .pack__group .plan__list li.pin{opacity:1;transform:none}
.pack-anim .pack__group .plan__list li.pin::before{clip-path:inset(0 0 0 0)}
.pack-anim .pack__group .plan__list li.pin::after{transform:scale(1);opacity:0}
.pack-anim .pack__side>*:not(.pack__steps),.pack-anim .pack__steps li{opacity:0;transform:translateY(-18px);transition:opacity .55s var(--e1) var(--d,0s),transform .7s var(--e2) var(--d,0s)}
.pack-anim .pack__side>.pin,.pack-anim .pack__steps li.pin{opacity:1;transform:none}
.pack-anim .pack__steps li::before{transform:scale(.4);transition:transform .5s var(--e2) calc(var(--d,0s) + .15s),background-color .3s,border-color .3s}
.pack-anim .pack__steps li.pin::before{transform:none}
@media (prefers-reduced-motion:reduce){
  .pack-anim .pack__group h4,.pack-anim .pack__group .plan__list li,.pack-anim .pack__side>*,.pack-anim .pack__steps li{opacity:1!important;transform:none!important;transition:none!important}
  .pack-anim .pack__group .plan__list li::before{clip-path:none;transition:none}
}
/* Ronde 11: sneller openen. De secties lager op de pagina worden pas opgemaakt wanneer de browser er tijd voor heeft
   (eerst overgeslagen, daarna één voor één ingevuld in rustige momenten). Zo blokkeert het openen niet. */
.plans,.about,.invest,.contact,.foot{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.plans.cv-on,.about.cv-on,.invest.cv-on,.contact.cv-on,.foot.cv-on{content-visibility:visible}
/* Ronde 11: optioneel budget (minimum en maximum), enkel als schatting. Er staan geen bedragen op de pagina. */
.budget__row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.budget__box{position:relative;display:block;margin:0!important}
.budget__k{position:absolute;left:16px;top:9px;font:600 .68rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--mist);pointer-events:none}
.budget__cur{position:absolute;left:16px;bottom:12px;font:700 1rem var(--f-display);color:var(--ice);pointer-events:none}
.field .budget__box input{padding:26px 15px 10px 34px;font-variant-numeric:tabular-nums}
.budget__dash{font:600 .82rem var(--f-display);color:var(--mist)}
.budget__hint{margin:8px 0 0;font-size:.82rem;color:var(--mist)}
.field.bad .budget__box input{border-color:#FF8C7A}/* geschatte hoogtes (gemeten), zodat de pagina niet verspringt terwijl de secties worden opgemaakt */
.plans{contain-intrinsic-size:auto 2980px}.about{contain-intrinsic-size:auto 3450px}.invest{contain-intrinsic-size:auto 1150px}.contact{contain-intrinsic-size:auto 1800px}.foot{contain-intrinsic-size:auto 660px}
@media (max-width:900px){.plans{contain-intrinsic-size:auto 3940px}.about{contain-intrinsic-size:auto 4330px}.invest{contain-intrinsic-size:auto 1060px}.contact{contain-intrinsic-size:auto 2030px}.foot{contain-intrinsic-size:auto 950px}}
@media (max-width:520px){.plans{contain-intrinsic-size:auto 5950px}.about{contain-intrinsic-size:auto 4900px}.invest{contain-intrinsic-size:auto 1140px}.contact{contain-intrinsic-size:auto 2490px}.foot{contain-intrinsic-size:auto 1190px}}/* autosalon: de zaakvoerder staat helemaal rechts in het beeld, dus rechts uitlijnen (enkel op brede schermen) */
@media (min-width:701px){.cscene__shot--right img{object-position:98% 50%}}