/* Nieuwe startpagina flowsystems.be (02/11/2026). Opbouw en bewegingen uit de reels die Matthias stuurde:
   titel woord per woord (spotlight), kader dat uitgroeit tot het scherm (spotlight), ring van sjablonen in 3D (ring),
   kantelende kaarten (ring), panelen die zijwaarts meeschuiven (horizon), blokjes die openvallen (mozaïek),
   kaarten die in 3D meedraaien met een meekleurende gloed (studio), foto als gordijn met draaiend stempel (atelier).
   Kleuren, letters en ritme uit het bouwplan van 29/10 (ONTWERP.md). Geen bibliotheken. */
:root{
  --paper:#fbf8f3;--paper-2:#f3eee6;--sand:#e6cfae;--sand-2:#f1e6d2;--line:#e5ddd0;
  --ink:#1a1813;--ink-2:#262219;--ink-line:rgb(230 207 174/.14);--muted:#6b6358;--muted-dark:#b9ad9a;
  --accent:#c2542b;--accent-strong:#a4431f;--accent-soft:#f6e3d9;--on-accent:#fff;
  --container:75rem;--gutter:clamp(1.25rem,4vw,3rem);--space:clamp(4.5rem,3rem + 6vw,9rem);--measure:34rem;
  --header-h:4rem;--bar-h:calc(4rem + env(safe-area-inset-bottom));
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;
  --display:"Inter Tight",system-ui,sans-serif;--body:"IBM Plex Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 0 rgb(26 24 19/.04),0 32px 64px -32px rgb(26 24 19/.35);
  --tint:#c2542b;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(1rem,.97rem + .15vw,1.0625rem)/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (max-width:1023px){body{padding-bottom:var(--bar-h)}}
a{color:inherit}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
section{scroll-margin-top:calc(var(--header-h) + .5rem)}
h1,h2,h3{font-family:var(--display);margin:0;color:inherit}
h2{font-weight:500;font-size:clamp(1.85rem,1.4rem + 1.8vw,2.9rem);line-height:1.08;letter-spacing:-.025em;max-width:20ch;text-wrap:balance}
h3{font-weight:600;font-size:clamp(1.1875rem,1.1rem + .4vw,1.5rem);line-height:1.25;letter-spacing:-.01em}
p{margin:0}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.5;max-width:var(--measure);text-wrap:pretty}
.small{font:500 .8125rem/1.4 var(--body);color:var(--muted)}
.label{display:flex;align-items:center;gap:8px;font:500 .8125rem/1.4 var(--body);color:var(--muted);margin-bottom:1rem}
.label::before{content:"";width:16px;height:2px;background:var(--accent);flex:none}
.dark .label,.dark .small{color:var(--muted-dark)}
.head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.head .label{margin:0}
.head--c{align-items:center;text-align:center}
.head--c h2{margin-inline:auto}
.head--c .label{justify-content:center}
.head .lead{color:var(--muted)}
.dark .head .lead{color:var(--muted-dark)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:1rem;top:-3rem;z-index:60;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:999px}
.skip:focus{top:1rem}
/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:56px;padding:0 24px;border-radius:999px;font:600 1rem/1 var(--display);text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s,color .2s;white-space:nowrap}
@media (min-width:1024px){.btn{height:52px}}
.btn svg{width:18px;height:18px;flex:none}
.btn-p{background:var(--accent);color:var(--on-accent)}
.btn-p svg{transition:transform .2s var(--ease)}
.btn-s{background:transparent;color:var(--ink);border-color:color-mix(in oklab,var(--ink) 24%,transparent)}
.dark .btn-s{color:var(--paper);border-color:rgb(251 248 243/.3)}
@media (hover:hover){.btn-p:hover{background:var(--accent-strong)}.btn-p:hover svg{transform:translateX(3px)}.btn-s:hover{border-color:currentColor}}
.btn:active{transform:scale(.98)}
.tlink{color:var(--accent-strong);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.dark .tlink{color:var(--sand)}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 .7rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font:500 .78rem/1 var(--body);white-space:nowrap}
.dark .chip{background:rgb(230 207 174/.14);color:var(--sand)}
/* onthullen bij het scrollen */
.js .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(min(var(--i,0),3) * 80ms)}
.js .rv.in{opacity:1;transform:none}
.js h2.rv{transform:translate3d(0,.5em,0)}
.js h2.rv.in{transform:none}
.ph{margin:0;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.js .wipe img{opacity:0;transform:scale(1.06);transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
.js .wipe.in img{opacity:1;transform:none}
/* kop */
.hdr{position:fixed;inset:0 0 auto;z-index:40;height:var(--header-h);color:var(--paper);background:transparent;border-bottom:1px solid transparent;transition:background .35s,color .35s,border-color .35s}
.hdr__p{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;will-change:transform;pointer-events:none}
.hdr--paper{background:color-mix(in oklab,var(--paper) 98%,transparent);color:var(--ink);border-color:var(--line);}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;font:600 1.05rem/1 var(--display);text-decoration:none}
.logo img{width:28px;height:28px}
.nav{display:none;gap:1.6rem;font-size:.95rem}
.nav a{text-decoration:none;opacity:.8}.nav a:hover{opacity:1}
.hdr__act{display:none;gap:.5rem}
.hdr__act .btn{height:40px;padding:0 16px;font-size:.92rem}
.hdr__act .btn-s{color:inherit;border-color:color-mix(in oklab,currentColor 28%,transparent)}
.hdr__tel{display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 14px;border-radius:999px;font:600 .92rem var(--display);text-decoration:none;border:1px solid color-mix(in oklab,currentColor 28%,transparent)}
.hdr__tel svg{width:16px;height:16px}
@media (min-width:1024px){.nav,.hdr__act{display:flex}.hdr__tel{display:none}}
/* 1. kop: titel woord per woord, glazen feiten, kader dat uitgroeit tot het scherm */
.hero{position:relative;background:var(--ink);color:var(--paper);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 45% at 50% 0%,rgb(194 84 43/.28),transparent 72%)}
.hero__inner{padding-top:calc(var(--header-h) + clamp(3rem,8vw,6rem));padding-bottom:clamp(1.5rem,4vw,3rem);text-align:center;display:flex;flex-direction:column;align-items:center}
.hero__inner .label{justify-content:center;animation:rise .8s var(--ease) .1s both}
.hero__t{font:500 clamp(2.7rem,7.4vw,6.6rem)/.98 var(--display);letter-spacing:-.035em;max-width:13ch;text-wrap:balance}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w>span{display:inline-block;animation:w-up 1s var(--ease) calc(.15s + var(--i) * 75ms) both}
@keyframes w-up{from{transform:translateY(105%)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.hero__lead{margin-top:1.4rem;max-width:54ch;color:var(--muted-dark);font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;animation:rise .9s var(--ease) .55s both}
.hero__lead b{color:var(--paper);font-weight:500}
.hero__act{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.2rem;margin-top:1.9rem;animation:rise .9s var(--ease) .7s both}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:2.2rem;width:min(100%,58rem)}
.fact{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1.2rem;border-radius:16px;background:rgb(255 255 255/.07);border:1px solid rgb(255 255 255/.16);text-align:left;animation:rise .8s var(--ease) calc(.85s + var(--i) * 110ms) both}
@media (max-width:700px){.facts{grid-template-columns:1fr 1fr}.fact{padding:.8rem .9rem}}
.fact strong{font:600 1.35rem/1 var(--display);color:var(--sand)}
.fact span{font-size:.8rem;color:var(--muted-dark)}
.stage{position:relative;height:190svh}
.stage__st{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.stage__fr{position:absolute;inset:0;margin:0;overflow:hidden;background:#0f0e0c;transform:scale(.42);border-radius:22px;transition:border-radius .5s var(--ease);will-change:transform;display:flex;flex-direction:column}
.stage.full .stage__fr{border-radius:0}
html:not(.js) .stage__fr{transform:none}
.bar{display:flex;align-items:center;gap:.5rem;height:44px;padding:0 1rem;background:#2a2621;flex:none}
.bar i{width:10px;height:10px;border-radius:50%;background:#4a443c}
.bar span{margin-left:.6rem;flex:1;max-width:360px;height:26px;border-radius:999px;background:#1a1813;color:var(--muted-dark);font:500 .78rem/26px var(--body);text-align:center}
.stage__media{position:relative;flex:1;min-height:0}
.stage__media img,.stage__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.stage__media video{opacity:0;transition:opacity .6s}
.stage__media video.playing{opacity:1}
.stage__media .gsm{display:none}
@media (max-width:700px){.stage__media video,.stage__media .pc{display:none}.stage__media .gsm{display:block}}
.stage__cap{position:absolute;left:clamp(.75rem,3vw,2rem);bottom:clamp(.75rem,3vw,2rem);z-index:2;max-width:min(30rem,calc(100% - 1.5rem));margin:0;padding:1rem 1.2rem;border-radius:16px;background:rgb(26 24 19/.9);color:#fff;text-align:left;font:600 clamp(1rem,1.6vw,1.25rem)/1.25 var(--display);letter-spacing:-.01em;opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
.stage.full .stage__cap,html:not(.js) .stage__cap{opacity:1;transform:none}
.stage__cap small{display:block;margin-top:.35rem;font:400 .8125rem/1.4 var(--body);letter-spacing:0;color:var(--muted-dark)}
/* 2. sjablonen: ring in 3D en een index met foto */
.idx{list-style:none;margin:0;padding:0 0 var(--space);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)}
.idx li{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(84px,9vw,120px) minmax(0,1fr) auto;gap:.15rem 1.1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.idx li::after{content:"";position:absolute;inset:0 -.75rem;z-index:-1;border-radius:var(--r-sm);background:var(--paper-2);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.idx li:hover::after{transform:scaleX(1)}
.idx .ph{grid-row:1/3;aspect-ratio:16/10;border-radius:8px;border:1px solid var(--line)}
.idx h3{font-size:1.05rem}
.idx p{color:var(--muted);font-size:.9rem;grid-column:2/4}
.idx .pkg{font:500 .78rem/1.4 var(--body);color:var(--accent-strong);white-space:nowrap;align-self:start;padding-top:.15rem}
.idx a{text-decoration:none}
@media (max-width:900px){.idx{grid-template-columns:1fr}}
/* 3. pakketten: kaarten die kantelen onder de muis */
.pk{background:var(--paper-2);padding:var(--space) 0}
.pk__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.tilt{height:100%}
.tilt__in{position:relative;height:100%;display:flex;flex-direction:column;gap:.9rem;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);padding:1.5rem;transition:transform .55s var(--ease),box-shadow .4s;will-change:transform;box-shadow:0 20px 50px -34px rgb(26 24 19/.35);overflow:hidden}
.tilt:hover .tilt__in{box-shadow:0 30px 60px -28px rgb(26 24 19/.3)}
.tilt--pro .tilt__in{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 50px -34px rgb(26 24 19/.35)}
.pk__top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.price{font:600 clamp(2rem,1.6rem + 1.6vw,2.6rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pk__for{color:var(--muted);font-size:.95rem}
.pk ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.95rem}
.pk li{display:flex;gap:.6rem;align-items:flex-start}
.pk li::before{content:"";flex:none;width:16px;height:16px;margin-top:.25em;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1813' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") center/16px no-repeat}
.pk__foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted);display:grid;gap:.3rem}
.pk__foot b{font-weight:500;color:var(--ink)}
.pk .btn{position:relative;z-index:1}
.pk__note{margin-top:clamp(1.5rem,3vw,2.5rem);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.pk__note p{max-width:44rem;color:var(--muted)}
@media (max-width:1023px){.pk__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pk__grid{grid-template-columns:1fr}}
/* 4. werkwijze: panelen die zijwaarts meeschuiven met het scrollen (op gsm vegen) */
.how{position:relative;background:var(--ink);color:var(--paper)}
.how__st{padding:var(--space) 0 clamp(3rem,6vw,4.5rem)}
.how__head{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.how__head .lead{color:var(--muted-dark);margin-top:.6rem}
.cnt{font:600 .9rem/1 var(--display);color:var(--muted-dark);letter-spacing:.04em;white-space:nowrap}
.cnt b{color:var(--paper)}
.hz{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 1rem;scrollbar-width:none}
.hz::-webkit-scrollbar{display:none}
.panel{flex:0 0 min(84vw,720px);scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);border:1px solid var(--ink-line)}
.panel__ph{margin:0;min-height:clamp(220px,28vw,380px);position:relative;background:#121008;overflow:hidden}
.panel__ph img{width:100%;height:100%;object-fit:cover}
.panel__txt{display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;padding:clamp(1.4rem,3vw,2.2rem)}
.panel__txt>span{font:500 .8125rem/1.4 var(--body);color:var(--sand)}
.panel__txt h3{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1}
.panel__txt p{color:var(--muted-dark)}
.chat{height:100%;min-height:inherit;padding:1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;background:#121008}
.bub{max-width:88%;padding:.6rem .8rem;border-radius:14px;background:#2a2621;color:var(--paper);font-size:.84rem;line-height:1.4}
.bub.me{margin-left:auto;background:#35503a}
.bub small{display:block;margin-top:.3rem;font-size:.7rem;color:var(--muted-dark)}
.bub .ph{aspect-ratio:5/2;border-radius:8px;margin-bottom:.5rem}
.mini{display:flex;flex-direction:column;height:100%;min-height:inherit}
.mini .bar{height:34px}.mini .bar span{height:22px;line-height:22px;font-size:.72rem}
.mini img{flex:1;min-height:0;object-position:top}
.pill{position:absolute;right:.8rem;top:3rem;z-index:1;display:inline-flex;align-items:center;gap:.4rem;height:26px;padding:0 .7rem;border-radius:999px;background:var(--paper);color:var(--ink);font:500 .75rem/1 var(--body)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#2f8f5b}
.hzbar{height:2px;margin-top:1.2rem;background:var(--ink-line);border-radius:2px;overflow:hidden}
.hzbar i{display:block;height:100%;background:var(--sand);transform:scaleX(0);transform-origin:left;will-change:transform}
.how.is-pin{height:var(--hz-h,auto)}
.how.is-pin .how__st{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;padding-top:calc(var(--header-h) + 1.6rem);padding-bottom:1.5rem}
.how.is-pin .how__head{margin-bottom:1.4rem}
.how.is-pin h2{font-size:clamp(1.8rem,3.4vw,3rem)}
.how.is-pin .how__st{justify-content:center}
.how.is-pin .how__st>.wrap{width:100%;flex:none}
.how.is-pin .hz{flex:1 1 auto;min-height:0;max-height:640px;align-items:stretch}
.how.is-pin .panel{grid-template-rows:minmax(0,1fr)}
.how.is-pin .panel__ph{min-height:0;height:100%}
.how.is-pin figure.panel__ph>img{position:absolute;inset:0}
.how.is-pin .hz{overflow:visible;scroll-snap-type:none;padding-left:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));will-change:transform}
.how.is-pin .panel{flex-basis:min(62vw,760px)}
@media (max-width:700px){.panel{grid-template-columns:1fr}.panel__ph{min-height:0;height:min(58vw,320px)}.panel__ph:has(.chat){height:auto;min-height:200px}.bub .ph{display:none}}
/* 5. ons werk: schermopnames die in blokjes verschijnen en vanzelf scrollen */
.werk{background:var(--paper);padding:var(--space) 0}
.werk__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.2rem)}
.shot{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--shadow);isolation:isolate}
.shot .bar{background:#f3eee6;border-bottom:1px solid var(--line)}
.shot .bar i{background:#d9d0c2}
.shot .bar span{background:#fff;color:var(--muted)}
.shot__win{position:relative;aspect-ratio:4/3;overflow:hidden;container-type:size;background:#fff}
.shot__win img{width:100%;height:auto}
.shot__win img{will-change:transform}
.js .shot.in .shot__win img{animation:longscroll 34s ease-in-out infinite alternate}
@keyframes longscroll{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 100cqh))}}
.tiles{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr);pointer-events:none}
.tiles i{background:var(--paper)}
html:not(.js) .tiles{display:none}
.js .shot.in .tiles i{animation:tile .6s var(--ease) calc(.2s + var(--d)) both}
@keyframes tile{to{opacity:0;transform:scale(.6)}}
.shot__cap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;border-top:1px solid var(--line)}
.shot__cap h3{font-size:1.05rem}
.shot__cap p{color:var(--muted);font-size:.9rem}
.shot__cap a{text-decoration:none;color:inherit}
@media (max-width:760px){.werk__grid{grid-template-columns:1fr}.shot__cap{flex-direction:column;align-items:flex-start;gap:.6rem}}
/* 6. voor wie: kaarten die in 3D meedraaien, de gloed kleurt mee */
.wie{position:relative;overflow:hidden;isolation:isolate;padding:var(--space) 0 clamp(3rem,6vw,5rem);background:var(--ink);color:var(--paper)}
.wie::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgb(251 248 243/.06) 1px,transparent 1px),linear-gradient(90deg,rgb(251 248 243/.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.wie__head{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(.5rem,2vw,1rem)}
.wie__head .lead{color:var(--muted-dark);margin-top:.6rem}
.stnav{display:flex;align-items:center;gap:.6rem}
.stnav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--ink-line);color:var(--paper);display:grid;place-items:center;transition:background .3s,border-color .3s}
.stnav button:hover{background:var(--accent);border-color:var(--accent)}
.stnav svg{width:18px;height:18px}
.st{--w:clamp(250px,32vw,440px);display:flex;gap:clamp(12px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:1.6rem calc(50% - var(--w) / 2) 2.4rem;scrollbar-width:none;perspective:1200px;outline:none}
.st::-webkit-scrollbar{display:none}
.stc{flex:0 0 var(--w);scroll-snap-align:center;border-radius:18px;overflow:hidden;background:var(--ink-2);border:1px solid var(--ink-line);will-change:transform,opacity;box-shadow:0 30px 70px -30px rgb(0 0 0/.7);transition:box-shadow .5s,border-color .5s;display:flex;flex-direction:column}
.stc.on{border-color:color-mix(in srgb,var(--tint) 65%,transparent);box-shadow:0 34px 90px -26px color-mix(in srgb,var(--tint) 60%,transparent)}
.stc .ph{aspect-ratio:4/3}
.stc .ph img{object-position:top}
.stc__t{padding:1.2rem 1.3rem 1.4rem;display:grid;gap:.4rem}
.stc__t>span{font:500 .8rem/1.4 var(--body);color:var(--sand)}
.stc h3{font-size:1.3rem}
.stc p{color:var(--muted-dark);font-size:.95rem}
.stc a{color:var(--paper);font:600 .92rem var(--display);text-decoration:underline;text-underline-offset:4px;margin-top:.3rem;justify-self:start}
@media (max-width:700px){.st{--w:78vw}}
/* 7. afspraken: foto als gordijn, draaiend stempel, clausules als index */
.afs{background:var(--paper-2);padding:var(--space) 0}
.afs__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.afs__pic{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.curtain{aspect-ratio:4/5;border-radius:999px 999px var(--r-lg) var(--r-lg);background:var(--sand-2)}
.js .curtain{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.js .curtain.in{clip-path:inset(0 0 0 0)}
.js .curtain img{transform:scale(1.25);transition:transform 2.6s var(--ease)}
.js .curtain.in img{transform:none}
.stamp{position:absolute;left:-1.6rem;bottom:1.6rem;width:clamp(110px,11vw,150px);padding:6px;border-radius:50%;background:var(--paper);box-shadow:0 12px 30px -14px rgb(26 24 19/.35);animation:spin2 24s linear infinite}
.stamp svg{width:100%;height:auto;fill:var(--ink);font:600 9.5px var(--body);letter-spacing:.06em}
.stamp circle{fill:var(--accent)}
@keyframes spin2{to{transform:rotate(360deg)}}
.clauses{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.clauses li{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:.3rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.clauses li::after{content:"";position:absolute;inset:0 -.75rem;z-index:-1;border-radius:var(--r-sm);background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.clauses li:hover::after{transform:scaleX(1)}
.clauses h3{font-size:1.1rem}
.clauses p{color:var(--muted);font-size:.95rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--shadow)}
.card h3{font-size:1.1rem;margin-bottom:.8rem}
.vc{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;font-size:.95rem;margin:0}
.vc dt{color:var(--muted)}.vc dd{margin:0}
.vc a{text-decoration:none}
@media (max-width:900px){.afs__grid{grid-template-columns:1fr}.afs__pic{position:relative;top:auto;max-width:440px;width:100%;margin-inline:auto}.stamp{left:.6rem}.clauses li{grid-template-columns:1fr}}
/* 8. gratis voorbeeld */
.cta{background:var(--paper);padding:var(--space) 0}
.cta__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.sheet{background:var(--sand-2);border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.4rem)}
.f{display:grid;gap:1rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.4rem;font:500 .8125rem/1.4 var(--body);color:var(--muted)}
.field input,.field textarea{width:100%;font:400 1rem var(--body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;min-height:52px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.thanks{display:none;padding:.4rem 0}
.sheet.sent form{display:none}.sheet.sent .thanks{display:block}
.cta__side{display:grid;gap:1.4rem}
.cta__side .row .btn-s{background:var(--paper)}
@media (max-width:900px){.cta__grid{grid-template-columns:1fr}.f2{grid-template-columns:1fr}}
/* 9. vragen */
.faq{background:var(--paper-2);padding:var(--space) 0}
.faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.faq__side{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:1.5rem}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;font:600 1.05rem/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.2rem;color:var(--muted);max-width:60ch}
@media (max-width:900px){.faq__grid{grid-template-columns:1fr}.faq__side{position:static}}
/* voet */
.ft{background:var(--ink);color:var(--paper);padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);overflow:hidden}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.ft h3{font-size:.95rem;color:var(--sand);margin-bottom:.8rem}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.95rem}
.ft a{text-decoration:none;color:var(--muted-dark)}.ft a:hover{color:var(--paper)}
.ft .lead{color:var(--muted-dark);font-size:1rem;margin-top:.8rem}
.ft__mark{margin:clamp(2.5rem,6vw,4.5rem) 0 0;font:700 clamp(2.6rem,12vw,9rem)/1 var(--display);letter-spacing:-.045em;white-space:nowrap;overflow:hidden;padding-bottom:.08em;text-align:center;color:rgb(251 248 243/.08);user-select:none}
.js .ft__mark.rv{transform:translateY(35%);transition-duration:1.3s}
.js .ft__mark.rv.in{transform:none}
.ft__legal{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--ink-line);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.8125rem;color:var(--muted-dark)}
@media (max-width:760px){.ft__grid{grid-template-columns:1fr 1fr}}
/* gsm-balk */
.mbar{position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:.5rem;padding:.5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom));background:color-mix(in oklab,var(--paper) 98%,transparent);border-top:1px solid var(--line);}
.mbar .btn{height:48px;padding:0 12px;font-size:.92rem}
@media (min-width:1024px){.mbar{display:none}}
/* Geen uitzondering voor "minder beweging": afspraak met Matthias voor flowsystems.be (de beweging is het product). */