:root{--paars:#8C3CDC;--roze:#E6468C;--donker:#1E1430;--licht:#F7F2FC;--grijs:#6B6478;--serif:'Playfair Display',Georgia,serif;--display:'Bebas Neue',Impact,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:Poppins,system-ui,sans-serif;color:var(--donker);background:#fff;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.grad{background:linear-gradient(135deg,var(--paars),var(--roze),var(--paars));background-size:200% 200%;animation:gradBeweeg 8s ease infinite}
.gradtext{background:linear-gradient(135deg,var(--paars),var(--roze),var(--paars));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradBeweeg 6s ease infinite}
@keyframes gradBeweeg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.klein{font-size:12px;color:var(--grijs)}

/* ---------- topbar & header ---------- */
.topbar{font-size:13px;color:#fff;text-align:center;padding:8px 10px}
header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:50;box-shadow:0 1px 0 #EEE8F5;transition:box-shadow .3s}
header.gescrold{box-shadow:0 6px 24px rgba(30,20,48,.08)}
nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.logo .rond{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:15px;transition:transform .5s}
.logo:hover .rond{transform:rotate(360deg)}
.menu{display:flex;gap:26px;font-weight:500;font-size:15px}
.menu a{position:relative}
.menu a:after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--roze);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.menu a:hover{color:var(--roze)}
.menu a:hover:after{transform:scaleX(1);transform-origin:left}
.nav-rechts{display:flex;align-items:center;gap:6px}
.hamburger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;position:relative;border-radius:10px}
.hamburger span{position:absolute;left:10px;right:10px;height:2px;background:var(--donker);border-radius:2px;transition:.3s}
.hamburger span:nth-child(1){top:14px}.hamburger span:nth-child(2){top:20px}.hamburger span:nth-child(3){top:26px}
header.open .hamburger span:nth-child(1){top:20px;transform:rotate(45deg)}
header.open .hamburger span:nth-child(2){opacity:0}
header.open .hamburger span:nth-child(3){top:20px;transform:rotate(-45deg)}
@media(max-width:860px){
  .hamburger{display:block}
  .menu{display:none}
  header.open .menu{display:flex;flex-direction:column;gap:2px;position:absolute;top:68px;left:0;right:0;background:#fff;padding:8px 20px 18px;box-shadow:0 14px 24px rgba(30,20,48,.08);animation:omlaag .25s ease}
  header.open .menu a{padding:10px 0;border-bottom:1px solid #F3EEF9}
  .nav-cta{padding:9px 16px;font-size:14px}
}
@media(max-width:440px){.logo{font-size:0;gap:0}.logo .rond{font-size:15px}}
@keyframes omlaag{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.voortgang{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--paars),var(--roze));z-index:100;pointer-events:none}

/* ---------- knoppen ---------- */
.knop{display:inline-block;position:relative;overflow:hidden;padding:12px 22px;border-radius:999px;font-weight:600;color:#fff;border:0;cursor:pointer;font-size:15px;text-align:center;transition:transform .15s,box-shadow .15s}
.knop:before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.knop:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(140,60,220,.25)}
.knop:hover:before{animation:glans .7s}
.knop:disabled{opacity:.7;cursor:wait;transform:none}
.knop.rand{background:#fff;color:var(--paars);border:2px solid var(--paars)}
.knop.vol{width:100%;padding:14px}
@keyframes glans{to{left:130%}}

/* ---------- hero ---------- */
.hero{background:var(--licht);padding:60px 0 70px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;z-index:0}
.hero:before{width:380px;height:380px;background:var(--paars);top:-120px;right:-80px;animation:zweef 12s ease-in-out infinite}
.hero:after{width:320px;height:320px;background:var(--roze);bottom:-140px;left:-60px;animation:zweef 14s ease-in-out infinite reverse}
@keyframes zweef{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.15)}}
.label{display:inline-block;background:#fff;color:var(--roze);font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:16px}
h1{font-size:44px;line-height:1.15;font-weight:800;margin-bottom:16px}
.hero p{font-size:18px;color:var(--grijs);margin-bottom:26px}
.acties{display:flex;gap:10px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{background:#fff;border:1px solid #E6DCF2;padding:7px 14px;border-radius:999px;font-size:14px;transition:transform .2s,border-color .2s}
.chip:hover{transform:translateY(-2px);border-color:var(--roze)}
.chip b{color:var(--paars)}
.js .hero .wrap>div:first-child>*{opacity:0;animation:omhoog .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .wrap>div:first-child>*:nth-child(2){animation-delay:.15s}
.js .hero .wrap>div:first-child>*:nth-child(3){animation-delay:.3s}
.js .hero .wrap>div:first-child>*:nth-child(4){animation-delay:.45s}
.js .hero .wrap>div:first-child>*:nth-child(5){animation-delay:.6s}
@keyframes omhoog{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

.hero-visual{position:relative;width:100%;max-width:540px;min-height:580px;justify-self:center}
.hero-browser{position:absolute;top:10px;left:0;width:86%;animation:browserIn 1s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes browserIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.telefoon{position:absolute;right:0;top:150px;width:250px;background:#fff;border-radius:32px;padding:28px 10px 12px;box-shadow:0 30px 60px rgba(30,20,48,.28),0 0 0 7px #1E1430;animation:telefoonIn 1s .45s cubic-bezier(.2,.7,.2,1) both,telefoonZweef 6s 1.5s ease-in-out infinite}
.telefoon:before{content:"";position:absolute;top:10px;left:50%;width:70px;height:7px;border-radius:9px;background:#1E1430;transform:translateX(-50%)}
.telefoon .post{border:0}
.telefoon .post .tekst{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:6px}
@keyframes telefoonIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes telefoonZweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:960px){.hero .wrap{grid-template-columns:1fr}h1{font-size:36px}.hero{padding:44px 0 56px}}
@media(max-width:520px){h1{font-size:31px}.hero-visual{min-height:520px}.telefoon{width:220px;top:110px}.hero-browser{width:92%}}

/* ---------- algemene secties ---------- */
section{padding:76px 0}
h2{font-size:34px;font-weight:800;margin-bottom:8px;text-align:center;line-height:1.2}
.sub{text-align:center;color:var(--grijs);margin:0 auto 40px;max-width:640px}
.licht{background:var(--licht)}

/* diensten */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dienst{background:#fff;border:1px solid #EFE7F8;border-radius:22px;padding:28px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.dienst:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(140,60,220,.13);border-color:#E0D0F3}
.d-icoon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px}
.d-icoon svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dienst h3{font-size:20px;margin-bottom:6px}
.dienst>p{color:var(--grijs);font-size:15px;margin-bottom:14px}
.dienst ul{list-style:none;display:grid;gap:6px;margin-bottom:20px;flex:1}
.dienst li{padding-left:24px;position:relative;font-size:14px}
.dienst li:before{content:"✓";position:absolute;left:0;color:var(--paars);font-weight:800}
.pijl{font-weight:600;color:var(--paars);font-size:15px;transition:gap .2s,color .2s}
.pijl:hover{color:var(--roze)}
@media(max-width:900px){.diensten{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.tegel{background:#fff;border-radius:18px;padding:22px 14px;text-align:center;font-weight:600;transition:box-shadow .2s,transform .2s}
.tegel:hover{box-shadow:0 8px 24px rgba(140,60,220,.12);transform:translateY(-3px)}
.tegel svg{width:30px;height:30px;display:block;margin:0 auto 10px;stroke:var(--paars)}
.tegel:hover svg{animation:wiebel .6s}
@keyframes wiebel{25%{transform:rotate(-12deg) scale(1.15)}50%{transform:rotate(10deg) scale(1.15)}75%{transform:rotate(-5deg)}}

/* pakketten */
.schakel{position:relative;display:flex;width:max-content;margin:-10px auto 34px;background:var(--licht);border-radius:99px;padding:5px}
.schakel button{position:relative;z-index:1;border:0;background:none;padding:10px 24px;border-radius:99px;font-size:15px;font-weight:600;color:var(--grijs);cursor:pointer;transition:color .3s}
.schakel button.actief{color:#fff}
.schakel-bg{position:absolute;top:5px;bottom:5px;left:5px;border-radius:99px;background:linear-gradient(135deg,var(--paars),var(--roze));transition:transform .35s cubic-bezier(.3,.8,.3,1),width .35s;box-shadow:0 6px 16px rgba(140,60,220,.3)}
.deals{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.deal{position:relative;border:2px solid #EFE7F8;border-radius:22px;padding:30px 24px;background:#fff;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.deal[hidden]{display:none}
.deal.in{animation:omhoog .5s cubic-bezier(.2,.7,.2,1) both}
.deal:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(140,60,220,.16);border-color:var(--paars)}
.deal.top{border-color:var(--roze);box-shadow:0 14px 40px rgba(230,70,140,.14)}
.deal.top:hover{border-color:var(--roze)}
.badge{position:absolute;top:-13px;left:24px;color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.deal h3{font-size:20px;margin-bottom:2px}
.deal .wat{color:var(--grijs);font-size:14px;margin-bottom:16px}
.prijs{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.prijs .nu{font-size:38px;font-weight:800}
.prijs .per{color:var(--grijs);font-size:14px}
.deal ul{list-style:none;margin-bottom:22px;flex:1;border-top:1px solid #F0EAF7;padding-top:14px}
.deal li{padding:6px 0 6px 26px;position:relative;font-size:15px}
.deal li:before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--paars)}
.combi{text-align:center;margin-top:28px;color:var(--grijs)}
.combi a{color:var(--paars);font-weight:600}
.combi a:hover{color:var(--roze)}

.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.stap{background:var(--licht);border-radius:20px;padding:26px;transition:transform .3s,box-shadow .3s}
.stap:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(140,60,220,.12)}
.stap .nr{width:42px;height:42px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:12px;transition:transform .5s}
.stap:hover .nr{transform:rotate(360deg) scale(1.1)}
.stap h3{margin-bottom:6px}
.stap p{color:var(--grijs);font-size:15px}

/* ---------- voorbeelden ---------- */
.vb-kop{display:flex;align-items:center;gap:16px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs);font-weight:600;margin:10px 0 22px}
.vb-kop:before,.vb-kop:after{content:"";flex:1;height:1px;background:#E3D8F0}
.vb-kop+.vb{margin-bottom:56px}

/* social post kaart */
.post{border-radius:16px;overflow:hidden;border:1px solid #ECE6F3;background:#fff;text-align:left}
.post .kop{display:flex;align-items:center;gap:9px;padding:10px 12px}
.post .kop .av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:10px;letter-spacing:.04em;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #E1306C}
.post .kop b{display:block;font-size:13px;line-height:1.2}
.post .kop small{display:block;color:var(--grijs);font-size:11px;line-height:1.2}
.post .kop .dots{margin-left:auto;color:var(--grijs);font-size:12px;letter-spacing:1px}
.ig{display:flex;align-items:center;gap:14px;padding:10px 12px 2px}
.ig svg,.ig button{width:24px;height:24px;display:block}
.ig svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ig button{background:none;border:0;cursor:pointer;color:inherit;padding:0}
.ig .r{margin-left:auto}
.ig .like.aan svg{fill:#ED4956;stroke:#ED4956}
.ig .like.klop{animation:klop .45s}
@keyframes klop{40%{transform:scale(1.35)}70%{transform:scale(.9)}}
.likes{padding:4px 12px 0;font-size:13px;font-weight:600}
.post .tekst{padding:2px 12px 14px;font-size:13px;color:#3d3549;line-height:1.45}
.post .tekst b{color:var(--donker);margin-right:4px}
.vb{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.vb{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.vb{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.vb .post{transition:transform .35s,box-shadow .35s}
.vb .post:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(30,20,48,.14)}

/* ---------- post-ontwerpen (foto + typografie, schaalt mee via cqw) ---------- */
.ontwerp{position:relative;aspect-ratio:1/1;overflow:hidden;container-type:inline-size;line-height:1.1;user-select:none;cursor:pointer;color:#fff;background:#111}
.ontwerp.in{animation:ontwerpIn .6s ease}
.ontwerp.uit{opacity:0;transition:opacity .3s}
@keyframes ontwerpIn{from{opacity:0}to{opacity:1}}
.ontwerp>*{position:absolute;z-index:2}
.ontwerp>img{inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:kenburns 20s ease-in-out infinite alternate}
.ontwerp:before{content:"";position:absolute;inset:0;z-index:1;background:var(--overlay,none)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.d-merk{top:6cqw;left:6cqw;font-size:2.7cqw;letter-spacing:.28em;line-height:1.35;font-weight:500}
.d-merk b{display:block;font-weight:800}
.d-merk.rechts{left:auto;right:6cqw;text-align:right;top:auto;bottom:6cqw}
.d-boven{display:flex;align-items:center;gap:2.4cqw;font-size:3cqw;letter-spacing:.3em;text-transform:uppercase;font-weight:600}
.d-boven:before{content:"";width:7cqw;height:1px;background:currentColor}
.d-titel{font-family:var(--display);font-size:20cqw;line-height:.86;letter-spacing:.01em}
.d-serif{display:block;font-family:var(--serif);font-style:italic;font-weight:500}
.d-onder{left:6cqw;right:6cqw;bottom:5.5cqw;display:flex;justify-content:space-between;gap:4cqw;font-size:2.7cqw;letter-spacing:.16em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.45);padding-top:2.8cqw}
.hart{left:50%;top:50%;width:28cqw;height:28cqw;pointer-events:none;z-index:5;filter:drop-shadow(0 6px 18px rgba(0,0,0,.3));animation:hartPop .9s ease forwards}
.hart svg{width:100%;height:100%;fill:#fff}
@keyframes hartPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}25%{transform:translate(-50%,-50%) scale(1.2);opacity:1}45%{transform:translate(-50%,-50%) scale(.95)}75%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}

/* frietdag */
.d-friet{--overlay:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 80%)}
.d-friet .d-label{top:6cqw;right:6cqw;background:#F5B700;color:#111;font-family:var(--display);font-size:6.4cqw;padding:1.4cqw 3cqw .8cqw;letter-spacing:.03em}
.d-friet .d-tekstblok{left:6cqw;right:6cqw;bottom:16cqw}
.d-friet .d-boven{color:#F5B700;margin-bottom:1.6cqw}
.d-friet .d-titel{font-size:21cqw}
.d-friet p{font-size:4cqw;opacity:.92;margin-top:1.4cqw}

/* burger */
.d-burger{--overlay:linear-gradient(180deg,rgba(10,10,10,.78) 0,rgba(10,10,10,.25) 42%,rgba(0,0,0,0) 60%,rgba(0,0,0,.7) 100%)}
.d-burger .d-tekstblok{top:7cqw;left:6cqw;right:6cqw}
.d-burger .d-boven{color:#FF7A1A;margin-bottom:1.8cqw}
.d-burger .d-titel{font-size:16.5cqw}
.d-burger .d-prijs{right:6cqw;top:38cqw;width:21cqw;height:21cqw;border-radius:50%;background:#FF7A1A;display:grid;place-content:center;text-align:center;font-family:var(--display);font-size:7.4cqw;line-height:.9;box-shadow:0 2cqw 5cqw rgba(0,0,0,.35)}
.d-burger .d-prijs small{font-family:Poppins,sans-serif;font-size:2.4cqw;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.d-burger .d-onder b{font-weight:800}

/* kapper */
.d-kapper>img{filter:grayscale(1) contrast(1.08) brightness(.9)}
.d-kapper{--overlay:linear-gradient(90deg,rgba(12,10,14,.85) 0,rgba(12,10,14,.45) 50%,rgba(12,10,14,0) 75%)}
.d-kapper .d-tekstblok{left:6cqw;bottom:7cqw}
.d-kapper .d-serif{font-size:9cqw;color:#D4AF6A;margin-bottom:1cqw}
.d-kapper .d-titel{font-size:15cqw}
.d-kapper p{font-size:3.2cqw;letter-spacing:.14em;text-transform:uppercase;margin-top:3cqw;padding-top:2.6cqw;border-top:1px solid rgba(212,175,106,.6);display:inline-block}

/* café */
.d-cafe{background:#F4EDE4;color:#3B2A1E}
.d-cafe>img{bottom:30%;height:70%}
.d-cafe .d-merk{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.d-cafe .d-paneel{left:0;right:0;bottom:0;height:30%;background:#F4EDE4;display:flex;align-items:center;justify-content:space-between;padding:0 6cqw;gap:4cqw}
.d-cafe .d-serif{font-size:8cqw;font-style:italic;font-weight:600}
.d-cafe .d-paneel small{display:block;font-size:2.8cqw;letter-spacing:.2em;text-transform:uppercase;margin-top:1.6cqw;color:#8A6A52;font-weight:600}
.d-cafe .d-bedrag{font-family:var(--serif);font-size:13cqw;font-weight:700;line-height:1;border-left:1px solid #D8C7B4;padding-left:5cqw}

/* pizza */
.d-pizza{--overlay:linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.2) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.55) 100%)}
.d-pizza .d-tekstblok{top:6cqw;left:6cqw}
.d-pizza .d-serif{font-size:11cqw;line-height:1}
.d-pizza .d-titel{font-size:19cqw}
.d-pizza .d-actie{left:6cqw;bottom:6cqw;background:#C8102E;font-family:var(--display);font-size:6.6cqw;padding:2cqw 3.6cqw 1.2cqw;letter-spacing:.03em}

/* nagels */
.d-nagel{--overlay:linear-gradient(180deg,rgba(20,16,18,.7) 0,rgba(20,16,18,.1) 45%,rgba(20,16,18,0) 60%,rgba(20,16,18,.6) 100%)}
.d-nagel .d-frame{inset:4.5cqw;border:1px solid rgba(255,255,255,.55)}
.d-nagel .d-tekstblok{top:10cqw;left:0;right:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.d-nagel .d-boven{margin-bottom:2cqw}
.d-nagel .d-boven:after{content:"";width:7cqw;height:1px;background:currentColor}
.d-nagel .d-serif{font-size:13cqw;line-height:1.15}
.d-nagel .d-titel{font-size:6.4cqw;letter-spacing:.42em;margin:1.5cqw 0 0 .42em}
.d-nagel .d-onder{left:10cqw;right:10cqw;bottom:9cqw}

/* review */
.d-review>img{filter:brightness(.45) saturate(.8)}
.d-review .d-kaart{left:9cqw;right:9cqw;top:50%;transform:translateY(-42%);background:#fff;color:var(--donker);padding:7cqw 6cqw 6cqw;text-align:center;box-shadow:0 3cqw 8cqw rgba(0,0,0,.35)}
.d-review .sterren{display:flex;justify-content:center;gap:1.2cqw;margin-bottom:3cqw}
.d-review .sterren svg{width:5.6cqw;height:5.6cqw;color:#E9A400}
.d-review .d-kaart p{font-family:var(--serif);font-style:italic;font-size:5.6cqw;line-height:1.3;margin-bottom:3.4cqw}
.d-review .d-kaart small{font-size:2.8cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs);font-weight:600}

/* ---------- website-mockups ---------- */
.sites{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.sites{grid-template-columns:1fr;max-width:620px;margin:0 auto}}
.site-kaart figcaption{margin-top:14px;font-size:14px;color:var(--grijs)}
.site-kaart figcaption b{display:block;color:var(--donker);font-size:16px}
.browser{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 18px 44px rgba(30,20,48,.14);border:1px solid #E6DEEF;transition:transform .35s,box-shadow .35s}
.site-kaart:hover .browser{transform:translateY(-6px);box-shadow:0 26px 54px rgba(30,20,48,.2)}
.b-balk{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F4F1F8;border-bottom:1px solid #E6DEEF}
.b-balk i{width:9px;height:9px;border-radius:50%;background:#FF5F57;flex:none}
.b-balk i:nth-child(2){background:#FEBC2E}.b-balk i:nth-child(3){background:#28C840}
.b-balk span{flex:1;margin-left:8px;background:#fff;border-radius:6px;padding:2px 10px;font-size:11px;color:var(--grijs);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-scherm{aspect-ratio:16/10;overflow:hidden;container-type:inline-size;position:relative;background:#fff}
.site{font-size:2.3cqw;line-height:1.35;transition:transform 5s ease-in-out}
/* live demo's in laptop + telefoon */
.schaal{position:relative;overflow:hidden;background:#fff}
.schaal iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;transform:scale(var(--s,.25));pointer-events:none;background:#fff}
.apparaten{display:block;position:relative;padding:0 16px 30px 0}
.mini-tel{position:absolute;right:0;bottom:0;width:27%;padding:4px;border-radius:20px;background:#111;box-shadow:0 20px 40px rgba(30,20,48,.35);transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:2}
.mini-tel:before{content:"";position:absolute;top:8px;left:50%;width:30%;height:6px;border-radius:9px;background:#111;transform:translateX(-50%);z-index:3}
.mini-tel .schaal{aspect-ratio:390/844;border-radius:16px}
.site-kaart:hover .mini-tel{transform:translateY(-8px) rotate(1.5deg)}
.live{position:absolute;left:calc(50% - 8px);top:42%;transform:translate(-50%,-50%) scale(.9);opacity:0;background:rgba(30,20,48,.88);color:#fff;padding:10px 18px;border-radius:99px;font-weight:600;font-size:14px;transition:opacity .3s,transform .3s;pointer-events:none;z-index:3;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.site-kaart:hover .live{opacity:1;transform:translate(-50%,-50%) scale(1)}
.demo-link{display:inline-block;margin-top:6px;color:var(--paars);font-weight:600;font-size:14px}
.demo-link:hover{color:var(--roze)}
.site-kaart figcaption{margin-top:6px}
.site-kaart figcaption b{margin-bottom:1px}
.site img{display:block;width:100%;object-fit:cover}
.site em{font-style:normal;display:inline-block;padding:.55em 1.2em;border-radius:99px;font-weight:600;font-size:.85em}
.site h5{font-weight:700;line-height:1.05;margin:.3em 0 .4em}
.site h6{font-weight:700;font-size:1.5em;margin-bottom:.7em}
.site small{font-size:.75em;letter-spacing:.18em;text-transform:uppercase;font-weight:600;opacity:.8}
.s-nav{display:flex;align-items:center;gap:1.6em;padding:1.1em 2em;font-size:.85em}
.s-nav b{font-size:1.35em;margin-right:auto}
.s-nav em{font-size:.9em}
.s-hero{position:relative;height:42cqw;display:flex;align-items:flex-end;padding:2.4em 2em}
.s-hero>img{position:absolute;inset:0;height:100%}
.s-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.1))}
.s-hero-in{position:relative;z-index:1;color:#fff}
.s-hero h5{font-size:3.2em}
.s-hero.midden{justify-content:center;align-items:center;text-align:center}
.s-hero.midden:after{background:rgba(30,18,10,.5)}
.s-sectie{padding:2.2em 2em}
.s-lijst{display:grid;grid-template-columns:1fr 1fr;gap:.7em 2.2em}
.s-lijst div{display:flex;justify-content:space-between;padding-bottom:.55em;border-bottom:1px solid currentColor;border-color:rgba(128,128,128,.3)}
.s-lijst b{font-weight:600}
.s-info{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;padding:2em}
.s-info b{display:block;font-size:.85em;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:.2em}
.s-voet{padding:1.4em 2em;font-size:.8em;opacity:.65}
.s-fotos{display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:0 2em}
.s-fotos img{aspect-ratio:4/3}
/* barbershop */
.s-barber{background:#111013;color:#F2EEE8}
.s-barber .s-nav b{font-family:var(--display);font-size:1.9em;letter-spacing:.06em}
.s-barber em{background:#D4AF6A;color:#111}
.s-barber h5{font-family:var(--display);font-weight:400;font-size:4.4em;letter-spacing:.02em}
.s-barber h6{font-family:var(--display);font-weight:400;font-size:2.2em;letter-spacing:.04em;color:#D4AF6A}
.s-barber .s-lijst span{color:#D4AF6A;font-weight:600}
.s-barber .s-info{border-top:1px solid #2A272E;margin-top:2em}
/* pizzeria */
.s-pizza{background:#FBF6EE;color:#2B1A14}
.s-pizza .s-nav b{font-family:var(--serif);font-style:italic;font-size:1.8em;color:#B3122B}
.s-pizza em{background:#B3122B;color:#fff}
.s-pizza h5,.s-pizza h6{font-family:var(--serif)}
.s-split{display:grid;grid-template-columns:1fr 1fr;gap:2em;align-items:center;padding:1.2em 2em 2em}
.s-split h5{font-size:3.1em}
.s-split p{opacity:.75;margin-bottom:1.2em}
.s-split img{aspect-ratio:1/1;border-radius:50%;box-shadow:0 1.4em 3em rgba(0,0,0,.2)}
.s-pizza .s-lijst span{color:#B3122B;font-weight:600}
.s-breed{position:relative;margin:0 2em;border-radius:1em;overflow:hidden}
.s-breed img{aspect-ratio:16/7}
.s-breed div{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),transparent);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:2em}
.s-pizza .s-info{background:#B3122B;color:#fff;margin-top:2em}
/* café */
.s-cafe{background:#F6F0E8;color:#3B2A1E}
.s-cafe .s-nav b{font-family:var(--serif);font-size:1.7em;font-weight:700}
.s-cafe em{background:#3B2A1E;color:#F6F0E8}
.s-cafe .s-hero-in em{background:#F6F0E8;color:#3B2A1E}
.s-cafe h5,.s-cafe h6{font-family:var(--serif);font-weight:600}
.s-cafe h6{font-style:italic;text-align:center;font-size:2em}
.s-tegels{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
.s-tegels img{aspect-ratio:4/3;border-radius:.6em}
.s-tegels figcaption{margin-top:.6em;font-weight:600;text-align:center}
.s-cafe .s-info{background:#EADFD1;text-align:center}

/* ---------- extra diensten (rij onder de 3 hoofddiensten) ---------- */
.extra-kop{margin-top:48px}
.extras-diensten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.extra{display:flex;gap:14px;align-items:flex-start;background:var(--licht);border-radius:18px;padding:18px;transition:transform .25s,box-shadow .25s,background .25s}
.extra:hover{transform:translateY(-4px);background:#fff;box-shadow:0 14px 30px rgba(140,60,220,.12)}
.extra b{display:block;font-size:15px;line-height:1.3}
.extra small{display:block;color:var(--grijs);font-size:13px;margin-top:3px;line-height:1.4}
.e-icoon{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(140,60,220,.1)}
.e-icoon svg{width:21px;height:21px;fill:none;stroke:var(--paars);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){.extras-diensten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.extras-diensten{grid-template-columns:1fr}}
.schakel{max-width:100%}
@media(max-width:460px){.schakel button{padding:9px 14px;font-size:14px}}

/* ---------- extra's: voorbeelden (foto + mockup) ---------- */
.extra-vb-kop{margin-top:56px}
.extras{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.extras{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.extras{grid-template-columns:1fr;max-width:380px;margin:0 auto}}
.extra-kaart figcaption{margin-top:12px;font-size:14px;color:var(--grijs)}
.extra-kaart figcaption b{display:block;color:var(--donker);font-size:15px}
.mock{height:390px;border-radius:16px;overflow:hidden;position:relative;background:#222;transition:transform .35s,box-shadow .35s;box-shadow:0 14px 34px rgba(30,20,48,.12)}
.extra-kaart:hover .mock{transform:translateY(-6px);box-shadow:0 22px 44px rgba(30,20,48,.2)}
.m-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.extra-kaart:hover .m-bg{transform:scale(1.06)}

/* telefoon-frame */
.m-tel{position:absolute;left:50%;top:36px;width:76%;height:calc(100% + 24px);transform:translateX(-50%);background:#fff;border-radius:28px;border:6px solid #111;box-shadow:0 26px 44px rgba(0,0,0,.5);overflow:hidden;transition:top .45s cubic-bezier(.2,.7,.2,1)}
.extra-kaart:hover .m-tel{top:24px}
.m-tel:before{content:"";position:absolute;top:6px;left:50%;width:54px;height:14px;border-radius:9px;background:#111;transform:translateX(-50%);z-index:3}
.tel-scherm{height:100%;padding-top:28px;font-size:11px;line-height:1.35;overflow:hidden;background:#fff;color:#202124}

/* Google Bedrijfsprofiel */
.m-profiel .m-bg{filter:blur(3px) brightness(.55);transform:scale(1.1)}
.extra-kaart:hover .m-profiel .m-bg{transform:scale(1.16)}
.zoekbalk{display:flex;align-items:center;gap:7px;margin:0 10px 8px;background:#F1F3F4;border-radius:99px;padding:6px 11px;font-size:11px;color:#3C4043}
.zoekbalk svg{width:13px;height:13px;flex:none;fill:none;stroke:#5F6368;stroke-width:2;stroke-linecap:round}
.p-fotos{display:grid;grid-template-columns:2fr 1fr;gap:2px;height:86px}
.p-fotos img{width:100%;height:100%;object-fit:cover;display:block}
.p-info{padding:8px 11px 2px}
.p-info b{display:block;font-size:14px;font-weight:600}
.st{color:#F4B400;letter-spacing:.5px}
.grijs{color:#70757A}
.open span{color:#188038;font-weight:600}
.p-knoppen{display:grid;grid-template-columns:repeat(4,1fr);padding:8px 6px;text-align:center;font-size:9.5px;color:#1A73E8;font-weight:500}
.p-knoppen i{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 3px;border-radius:50%;background:#E8F0FE}
.p-knoppen svg{width:14px;height:14px;fill:none;stroke:#1A73E8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-tabs{display:flex;justify-content:space-around;border-bottom:1px solid #E8EAED;font-size:10.5px;color:#5F6368}
.p-tabs span{padding:5px 2px}
.p-tabs .aan{color:#1A73E8;border-bottom:2px solid #1A73E8;font-weight:600}
.p-review{padding:8px 11px;font-size:10.5px}
.p-review p{color:#3C4043;margin-top:2px}

/* drukwerk: flyer + menukaart op tafel */
.flyer{position:absolute;left:7%;top:7%;width:52%;aspect-ratio:1/1.41;background:#111;color:#fff;overflow:hidden;rotate:-9deg;box-shadow:0 14px 26px rgba(40,25,10,.35),0 2px 4px rgba(0,0,0,.2);transition:rotate .5s}
.flyer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.flyer-tekst{position:absolute;left:10%;top:7%;right:8%}
.flyer-tekst .d-serif{font-size:21px;line-height:1}
.flyer-tekst b{display:block;font-family:var(--display);font-weight:400;font-size:33px;line-height:.9}
.flyer-tekst small{display:inline-block;margin-top:6px;background:#C8102E;font-family:var(--display);font-size:13px;padding:3px 6px 1px;letter-spacing:.03em}
.papier{position:absolute;right:6%;bottom:6%;width:62%;background:#FBF6EE;color:#2B1A14;padding:15px 13px;font-size:9.5px;rotate:4deg;box-shadow:0 18px 30px rgba(40,25,10,.38),0 2px 4px rgba(0,0,0,.18);transition:rotate .5s}
.extra-kaart:hover .papier{rotate:1deg}
.extra-kaart:hover .flyer{rotate:-12deg}
.menu-kop{text-align:center;border-bottom:1px solid #D8C7B4;padding-bottom:7px;margin-bottom:6px}
.menu-kop small{display:block;font-size:7px;letter-spacing:.3em;text-transform:uppercase;color:#8A6A52}
.menu-kop b{display:block;font-family:var(--serif);font-style:italic;font-size:22px;color:#B3122B;line-height:1.1}
.menu-kop span{display:block;font-size:7.5px;font-style:italic;color:#8A6A52;margin-top:1px}
.papier h6{font-family:var(--serif);font-size:11.5px;margin:7px 0 3px;letter-spacing:.06em}
.regel{display:flex;align-items:baseline;gap:4px;font-weight:600}
.regel i{flex:1;border-bottom:1px dotted #B9A48F}
.omschr{font-style:italic;color:#8A6A52;font-size:8.5px;margin-bottom:3px}

/* QR-tafelkaart op koffietafel */
.m-qr .m-bg{filter:brightness(.62)}
.m-qr .m-tel{left:auto;right:5%;transform:none;width:64%;top:30px}
.extra-kaart:hover .m-qr .m-tel{top:18px}
.tel-scherm.qr-menu{background:#F6F0E8;color:#3B2A1E;font-size:10px}
.qm-kop{text-align:center;padding:2px 0 6px}
.qm-kop small{display:block;font-size:7px;letter-spacing:.35em;text-transform:uppercase;color:#8A6A52}
.qm-kop b{font-family:var(--serif);font-size:17px;line-height:1.1}
.qm-tabs{display:flex;justify-content:center;gap:4px;padding:0 6px 8px}
.qm-tabs span{padding:3px 8px;border-radius:99px;font-size:9px;font-weight:600;border:1px solid #DCCDBB}
.qm-tabs .aan{background:#3B2A1E;border-color:#3B2A1E;color:#F6F0E8}
.qm-item{display:flex;align-items:center;gap:7px;margin:0 8px 6px;background:#fff;border-radius:9px;padding:5px;box-shadow:0 1px 3px rgba(59,42,30,.08)}
.qm-item img{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:none}
.qm-item div{flex:1;min-width:0}
.qm-item b,.qm-item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qm-item b{font-size:9.5px}
.qm-item small{font-size:7.5px;color:#8A6A52}
.qm-item span{flex:none;font-weight:700;font-size:9.5px}
.tafelkaart{position:absolute;left:5%;bottom:6%;width:40%;z-index:2;rotate:-6deg;background:#F6F0E8;color:#3B2A1E;text-align:center;padding:11px 9px 9px;border-radius:5px;display:flex;flex-direction:column;align-items:center;box-shadow:0 20px 30px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.3);transition:rotate .5s}
.extra-kaart:hover .tafelkaart{rotate:-2deg}
.tafelkaart small{font-size:6.5px;letter-spacing:.35em;color:#8A6A52}
.tafelkaart>b{font-family:var(--serif);font-size:14px;line-height:1.2;margin-bottom:6px}
.qr{width:100%;aspect-ratio:1;background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px #E6DACB}
.qr svg{display:block;width:100%;height:100%}
.scan{margin-top:6px;font-size:8px;font-weight:600;line-height:1.25}
.tafel{margin-top:2px;font-size:6.5px;letter-spacing:.25em;text-transform:uppercase;color:#8A6A52}

/* online afspraken: boekingspagina in de stijl van de barbershop */
.m-boek .m-bg{filter:brightness(.5)}
.m-tel.donker{border-color:#000}
.tel-scherm.boekkaart{background:#111013;color:#F2EEE8;padding-top:0}
.b-kop{position:relative;height:76px;overflow:hidden}
.b-kop img{width:100%;height:100%;object-fit:cover;filter:brightness(.5);display:block}
.b-kop span{position:absolute;left:12px;bottom:7px;font-family:var(--display);font-size:22px;letter-spacing:.08em;color:#fff}
.b-body{padding:10px 11px}
.b-titel{display:block;font-size:13px;margin-bottom:8px}
.dienst-kies{display:flex;justify-content:space-between;border:1px solid #2E2A33;border-radius:9px;padding:7px 9px;font-weight:600;margin-bottom:8px}
.dienst-kies span:last-child{color:#D4AF6A}
.dagen{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:8px}
.dagen button,.tijden button{border:1px solid #2E2A33;background:#1C1A20;border-radius:8px;font-size:10px;color:#8E8796;cursor:pointer;font-family:inherit;transition:all .2s}
.dagen button{padding:4px 0;display:grid}
.dagen button b{font-size:13px;color:#F2EEE8}
.tijden{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:10px}
.tijden button{padding:6px 0;font-weight:600;color:#F2EEE8}
.tijden button:disabled{color:#4A4550;text-decoration:line-through;cursor:not-allowed;background:#161419}
.dagen button.aan,.tijden button.aan{background:#D4AF6A;border-color:#D4AF6A;color:#111}
.dagen button.aan b{color:#111}
.bevestig{width:100%;border:0;border-radius:99px;padding:9px;font-weight:600;font-size:12px;font-family:inherit;color:#111;background:#D4AF6A;cursor:pointer;transition:transform .2s,background .2s}
.bevestig:hover{transform:translateY(-1px)}
.bevestig.klaar{background:#2E7D4F;color:#fff}

/* ---------- gratis scan ---------- */
.menu .menu-scan{color:var(--roze);font-weight:600}
.scan-sectie{background:var(--donker);color:#fff;position:relative;overflow:hidden}
.scan-sectie:before,.scan-sectie:after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;pointer-events:none}
.scan-sectie:before{width:420px;height:420px;background:var(--paars);top:-160px;left:-120px}
.scan-sectie:after{width:360px;height:360px;background:var(--roze);bottom:-160px;right:-100px}
.scan{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.scan-label{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#F7C6DD;font-size:13px;font-weight:600;padding:6px 14px;border-radius:99px;margin-bottom:16px}
.scan h2{text-align:left;color:#fff;font-size:40px;margin-bottom:14px}
.scan-tekst>p{color:#CFC6DD;font-size:17px;margin-bottom:26px}
.scan-lijst{list-style:none;display:grid;gap:14px}
.scan-lijst li{position:relative;padding-left:44px;color:#CFC6DD;font-size:15px;line-height:1.45}
.scan-lijst li b{display:block;color:#fff;font-size:16px}
.scan-lijst li:before{content:"✓";position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:14px;background:linear-gradient(135deg,var(--paars),var(--roze))}
.scan-kaart{background:#fff;color:var(--donker);border-radius:24px;padding:28px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.scan-kaart form{gap:12px}
@media(max-width:900px){.scan{grid-template-columns:1fr;gap:34px}.scan h2{font-size:32px}}
@media(max-width:520px){.scan-kaart{padding:20px}}

/* ---------- prijscalculator ---------- */
.knop.wit{background:#fff;color:var(--paars)}
.knop.wit:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.calc{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.calc-keuzes{display:grid;gap:18px}
.calc-groep{background:#fff;border:1px solid #EFE7F8;border-radius:22px;padding:22px}
.calc-groep h3{font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.calc-groep h3 i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;color:#fff;font-size:14px}
.calc-groep>p{color:var(--grijs);font-size:14px;margin-bottom:14px}
.calc-opties{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.optie{position:relative;display:block;cursor:pointer}
.optie input{position:absolute;opacity:0;pointer-events:none}
.optie span{display:flex;flex-direction:column;gap:2px;height:100%;border:1.5px solid #E6DCF2;border-radius:14px;padding:12px 14px 12px 40px;transition:border-color .2s,background .2s,box-shadow .2s,transform .15s}
.optie span:before{content:"";position:absolute;left:14px;top:15px;width:16px;height:16px;border:2px solid #CDBEE3;border-radius:50%;transition:all .2s;background:#fff}
.optie input[type=checkbox]+span:before{border-radius:5px}
.optie b{font-size:14.5px;line-height:1.3}
.optie small{color:var(--grijs);font-size:13px}
.optie:hover span{border-color:#CDB4EE}
.optie input:checked+span{border-color:var(--paars);background:#FAF5FF;box-shadow:0 6px 18px rgba(140,60,220,.12)}
.optie input:checked+span:before{border-color:var(--paars);background:var(--paars) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.optie input:focus-visible+span{outline:3px solid rgba(140,60,220,.35);outline-offset:2px}
.optie input:active+span{transform:scale(.98)}
.optie.geen small{font-style:italic}
.calc-totaal{position:sticky;top:96px}
.calc-kaart{border-radius:24px;padding:26px;color:#fff;background:linear-gradient(150deg,var(--paars),var(--roze));box-shadow:0 24px 60px rgba(140,60,220,.3)}
.calc-kop{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:.85;margin-bottom:12px}
.calc-items{list-style:none;display:grid;gap:8px;margin-bottom:18px;min-height:40px}
.calc-items li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.2);animation:omhoog .3s ease}
.calc-items li span{opacity:.85;white-space:nowrap}
.calc-items li.leeg{opacity:.75;font-style:italic;border:0;justify-content:flex-start}
.calc-bedragen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.calc-bedragen div{background:rgba(255,255,255,.14);border-radius:16px;padding:12px 14px}
.calc-bedragen span{display:block;font-size:12.5px;opacity:.85}
.calc-bedragen b{display:block;font-size:30px;font-weight:800;line-height:1.2}
.calc-noot{font-size:12.5px;opacity:.85;min-height:18px;margin-bottom:12px}
.calc-klein{font-size:12px;opacity:.8;text-align:center;margin-top:10px}
@media(max-width:900px){.calc{grid-template-columns:1fr}.calc-totaal{position:static}}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
details{background:#fff;border:1px solid #EFE7F8;border-radius:16px;padding:18px 20px;margin-bottom:12px;transition:border-color .3s,box-shadow .3s}
details:hover{border-color:#D9C8F0}
details[open]{border-color:var(--paars);box-shadow:0 8px 24px rgba(140,60,220,.1)}
summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:24px;line-height:1;font-weight:500;color:var(--paars);transition:transform .3s;flex:none}
details[open] summary:after{transform:rotate(45deg)}
details p{margin-top:10px;color:var(--grijs);white-space:pre-line}
details[open] p{animation:omhoog .4s ease}

/* ---------- contact ---------- */
.cta{color:#fff;border-radius:28px;padding:48px;display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.cta h2{text-align:left;color:#fff;font-size:36px}
.cta-tekst>p{opacity:.92;margin-bottom:20px;font-size:17px}
.cta-lijst{list-style:none;display:grid;gap:10px;margin-bottom:24px}
.cta-lijst li{padding-left:32px;position:relative;font-weight:500}
.cta-lijst li:before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px;font-weight:800}
.mail{font-size:14px;opacity:.95}
.mail a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.formkaart{background:#fff;color:var(--donker);border-radius:22px;padding:26px;box-shadow:0 24px 60px rgba(30,20,48,.25);position:relative}
form{display:grid;gap:12px}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.veld{display:flex;flex-wrap:wrap;align-content:flex-end;column-gap:4px;font-size:13px;font-weight:600}
.veld input,.veld select,.veld textarea{flex:1 1 100%;margin-top:5px}
.veld .opt{display:inline;font-weight:400;color:var(--grijs)}
input,textarea,select{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid #E6DCF2;background:#FBF9FE;font-family:inherit;font-size:15px;color:var(--donker);transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--paars);background:#fff;box-shadow:0 0 0 4px rgba(140,60,220,.13)}
input.fout{border-color:#E5484D;background:#FFF5F5}
textarea{resize:vertical}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formfout{color:#D12F35;font-size:14px;font-weight:500}
.formfout:empty{display:none}
.melding{display:none;text-align:center;padding:20px 6px;animation:omhoog .5s ease}
.melding .vink{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;animation:vinkIn .6s cubic-bezier(.2,1.6,.4,1)}
.melding .vink svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:vinkTrek .5s .35s forwards}
@keyframes vinkIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes vinkTrek{to{stroke-dashoffset:0}}
.melding h3{font-size:22px;margin-bottom:6px}
.melding p{color:var(--grijs);margin-bottom:14px}
.melding pre{white-space:pre-wrap;font-family:inherit;text-align:left;background:var(--licht);padding:12px;border-radius:12px;margin:10px 0 14px;color:var(--grijs);font-size:14px}
@media(max-width:900px){.cta{grid-template-columns:1fr;padding:32px 20px;gap:28px}.cta h2{font-size:30px}}
@media(max-width:520px){.rij{grid-template-columns:1fr}.formkaart{padding:20px}h2{font-size:28px}}

/* ---------- footer & WhatsApp ---------- */
footer{padding:36px 0 44px;text-align:center;color:var(--grijs);font-size:14px;border-top:1px solid #F0EAF7}
footer .logo{justify-content:center;margin-bottom:10px;color:var(--donker)}
footer a[data-email]{color:var(--paars);font-weight:600}
.wa{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.4);z-index:60;animation:waIn .6s 1.5s both;transition:transform .2s}
.wa[hidden]{display:none}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px}
.wa:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:waRing 2.4s 2s ease-out infinite}
@keyframes waIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes waRing{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}

/* ---------- scroll-onthulling ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.zicht{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .hero .wrap>div:first-child>*{opacity:1!important;transform:none!important}
}