/* ===== Verenly: tokens ===== */
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/nunito-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/nunito-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/nunito-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/nunito-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/nunito-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/nunito-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/nunito-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/nunito-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/nunito-900-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/nunito-900-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/nunito-400-cursief-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/nunito-400-cursief-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#FFFFFF; --bg-tint:#F5F7FB; --surface:#FFFFFF; --line:#E3E6EF;
  --ink:#1C2135; --muted:#4B5169; --on-c:#1C2135;
  --primary:#0B7A4B; --primary-hover:#08633C; --primary-ink:#FFFFFF;
  --focus:#1F63D6;
  --warn-t:#FFEAE6; --warn-d:#A63222;
  --todo-bg:#FFEC9E; --todo-ink:#4F3A00;
  --shadow-s:0 1px 2px rgba(28,33,53,.05),0 4px 14px rgba(28,33,53,.06);
  --shadow:0 2px 4px rgba(28,33,53,.04),0 14px 36px rgba(28,33,53,.09);
  --r-s:12px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --font:"Nunito", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;

  --leden-c:#3DD68C; --leden-t:#E4F9EE; --leden-d:#0A6B3F;
  --geld-c:#4FB3FF;  --geld-t:#E3F2FF;  --geld-d:#0B5796;
  --zaal-c:#FFCB3D;  --zaal-t:#FFF6D9;  --zaal-d:#7A5200;
  --event-c:#FF7B6B; --event-t:#FFEAE6; --event-d:#A63222;
  --kassa-c:#A38BFA; --kassa-t:#F0EBFF; --kassa-d:#5A3DC0;
  --web-c:#34CFCB;   --web-t:#DDF8F7;   --web-d:#0A6664;
  --basis-c:#A6E15A; --basis-t:#F0FADF; --basis-d:#466B0F;
  --ai-c:#F58AC6;    --ai-t:#FFE9F5;    --ai-d:#A01F68;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111421; --bg-tint:#171B2B; --surface:#1C2133; --line:#2E3449;
    --ink:#EEF0F8; --muted:#B4B9CC;
    --primary:#4FD795; --primary-hover:#79E3AF; --primary-ink:#06281A;
    --focus:#8AB8FF;
    --warn-t:#3A1D1A; --warn-d:#FFA497;
    --todo-bg:#4A3A00; --todo-ink:#FFE9A0;
    --shadow-s:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --shadow:0 2px 4px rgba(0,0,0,.3),0 14px 36px rgba(0,0,0,.35);
    --leden-t:#133024; --leden-d:#86E8B6;
    --geld-t:#11283F;  --geld-d:#8FCBFF;
    --zaal-t:#33290C;  --zaal-d:#FFD970;
    --event-t:#3A1D1A; --event-d:#FFA497;
    --kassa-t:#251E45; --kassa-d:#C6B6FF;
    --web-t:#0F3231;   --web-d:#7FE6E2;
    --basis-t:#22300F; --basis-d:#C3EC8A;
    --ai-t:#3A1730;    --ai-d:#FFB1DC;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111421; --bg-tint:#171B2B; --surface:#1C2133; --line:#2E3449;
  --ink:#EEF0F8; --muted:#B4B9CC;
  --primary:#4FD795; --primary-hover:#79E3AF; --primary-ink:#06281A;
  --focus:#8AB8FF;
  --warn-t:#3A1D1A; --warn-d:#FFA497;
  --todo-bg:#4A3A00; --todo-ink:#FFE9A0;
  --shadow-s:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --shadow:0 2px 4px rgba(0,0,0,.3),0 14px 36px rgba(0,0,0,.35);
  --leden-t:#133024; --leden-d:#86E8B6;
  --geld-t:#11283F;  --geld-d:#8FCBFF;
  --zaal-t:#33290C;  --zaal-d:#FFD970;
  --event-t:#3A1D1A; --event-d:#FFA497;
  --kassa-t:#251E45; --kassa-d:#C6B6FF;
  --web-t:#0F3231;   --web-d:#7FE6E2;
  --basis-t:#22300F; --basis-d:#C3EC8A;
  --ai-t:#3A1730;    --ai-d:#FFB1DC;
  color-scheme:dark;
}
/* accent per pijler: --c vlak, --t tint, --d tekst en icoon */
.acc-leden{--c:var(--leden-c);--t:var(--leden-t);--d:var(--leden-d)}
.acc-geld{--c:var(--geld-c);--t:var(--geld-t);--d:var(--geld-d)}
.acc-zaal{--c:var(--zaal-c);--t:var(--zaal-t);--d:var(--zaal-d)}
.acc-event{--c:var(--event-c);--t:var(--event-t);--d:var(--event-d)}
.acc-kassa{--c:var(--kassa-c);--t:var(--kassa-t);--d:var(--kassa-d)}
.acc-web{--c:var(--web-c);--t:var(--web-t);--d:var(--web-d)}
.acc-basis{--c:var(--basis-c);--t:var(--basis-t);--d:var(--basis-d)}
.acc-ai{--c:var(--ai-c);--t:var(--ai-t);--d:var(--ai-d)}

/* ===== basis ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  margin:0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--line) 42%,transparent) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg-tint) 58%,var(--bg)) 100%);
  color:var(--ink);
  font-family:var(--font);
  font-size:17.5px;
  line-height:1.6;
  overflow-x:hidden;
}
img,svg,figure{max-width:100%}
h1,h2,h3{line-height:1.12;margin:0;text-wrap:balance;font-weight:900;letter-spacing:0}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.3rem;font-weight:800}
p{margin:0}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--primary-hover)}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:50;background:var(--primary);color:var(--primary-ink);padding:12px 16px;border-radius:var(--r-s);font-weight:800}
.skip:focus{top:12px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px;position:relative}
.ic{width:24px;height:24px;flex:none}
.ic-s{width:18px;height:18px}
.ic-xs{width:14px;height:14px}
.center{text-align:center;align-items:center;margin-inline:auto}
mark.todo{background:var(--todo-bg);color:var(--todo-ink);padding:0 .35em;border-radius:6px;font-weight:800;font-size:.9em}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== knoppen ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:999px;font:inherit;font-weight:800;font-size:1.02rem;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.2;white-space:nowrap;transition:transform .18s cubic-bezier(.3,1.6,.5,1),background-color .15s,box-shadow .15s;width:max-content;max-width:100%}
.btn:hover{transform:translateY(-2px)}
.btn .ic{transition:transform .18s}
.btn:hover .ic{transform:translateX(3px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 78%,var(--web-c)));color:var(--primary-ink);box-shadow:0 6px 0 color-mix(in srgb,var(--primary) 70%,#06281A),0 16px 24px -18px rgba(11,122,75,.72)}
.btn-primary:hover{background:var(--primary-hover);color:var(--primary-ink)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-acc{background:var(--t);color:var(--d);border-color:var(--c)}
.btn-acc:hover{background:var(--c);color:var(--on-c)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:800;min-height:44px}

/* ===== kop ===== */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 10px 30px -30px rgba(28,33,53,.4)}
@supports not (background:color-mix(in srgb,red 50%,blue)){.site-head{background:var(--bg)}}
.head-row{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:1.6rem;color:var(--ink);text-decoration:none;letter-spacing:0;min-height:44px}
.brand:hover{color:var(--ink)}
.logo-mark{width:38px;height:38px;flex:none;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .logo-mark{transform:rotate(-8deg)}
.lm-bg{fill:var(--primary)}
.lm-v{fill:none;stroke:var(--primary-ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.lm-dot{fill:var(--zaal-c)}
.nav{display:flex;align-items:center;gap:20px;flex:1}
.nav ul{display:flex;gap:2px;flex:1;justify-content:center}
.nav ul a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700;white-space:nowrap}
.nav ul a:hover{background:var(--bg-tint)}
.nav ul a[aria-current="page"]{background:var(--leden-t);color:var(--leden-d)}
.nav-end{display:flex;align-items:center;gap:18px}
.login{font-weight:800;min-height:44px;display:flex;align-items:center;white-space:nowrap;color:var(--ink)}
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:8px;min-height:46px;padding:0 16px;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;font:inherit;font-weight:800;cursor:pointer}
@media (max-width:1100px){
  .nav-toggle{display:inline-flex}
  .head-row{flex-wrap:wrap;gap:12px}
  .nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:12px;padding-bottom:18px}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;justify-content:flex-start}
  .nav ul a{min-height:50px;padding:0 16px}
  .nav-end{flex-direction:column;align-items:stretch;gap:8px}
  .nav-end .btn{width:100%}
  .login{justify-content:center}
}

/* ===== secties ===== */
.band{padding-block:clamp(56px,8vw,104px)}
.band-tight{padding-block:clamp(28px,4vw,48px)}
.band-flush{padding-block:0 clamp(56px,8vw,104px)}
.band-tint{background:var(--bg-tint)}
.band-acc{background:var(--t)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:800;color:var(--muted);margin-bottom:12px}
.kicker::before{content:"";width:22px;height:8px;border-radius:99px;background:var(--c,var(--leden-c))}
.kicker-warn::before{background:var(--event-c)}
.sec-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-bottom:40px;max-width:720px}
.sec-head>p:not(.kicker){color:var(--muted);font-size:1.08rem}
.h-small{font-size:1.35rem}
.more{margin-top:32px;display:flex;justify-content:flex-start}
.more.center{justify-content:center}
.stack{display:flex;flex-direction:column;gap:24px}
.prose{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.fine{font-size:.94rem;color:var(--muted);margin-top:14px}
.lead{font-size:clamp(1.1rem,1.9vw,1.3rem);color:var(--muted);max-width:56ch;margin-top:18px}

/* achtergrondvormen */
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blobs span{position:absolute;opacity:.55;clip-path:polygon(9% 24%,100% 0,89% 86%,0 100%)}
.blobs .b1{width:360px;height:360px;right:-120px;top:-120px;background:var(--leden-t)}
.blobs .b2{width:220px;height:220px;left:-90px;bottom:-60px;background:var(--geld-t)}
.blobs .b3{width:140px;height:140px;right:18%;bottom:-50px;background:var(--zaal-t)}
.hero{position:relative;overflow:hidden;padding-block:clamp(44px,7vw,96px) clamp(36px,5vw,64px)}
.hero>.wrap{z-index:1}
.display{font-size:clamp(2.35rem,6vw,4.4rem);line-height:1.03;letter-spacing:0;max-width:17ch;font-weight:900}
.hl{position:relative;display:inline-block;color:var(--leden-d);background:linear-gradient(transparent 62%,var(--zaal-t) 62% 94%,transparent 94%);border-radius:16px;rotate:-1deg}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:30px}
.hero-note{position:relative;font-size:.95rem;color:var(--muted);font-weight:700;line-height:1.35}
.scribble{color:var(--event-c);width:70px;height:auto}
.sa-hero{position:absolute;left:-58px;top:-40px;width:52px;transform:rotate(-20deg) scaleY(-1)}
@media (max-width:560px){.sa-hero{display:none}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}

.hero-art{position:relative;padding:28px 12px}
.hero-art .mock{transform:rotate(1.5deg)}
.hero-art .sticker{position:absolute;box-shadow:var(--shadow-s);animation:float 6s ease-in-out infinite}
.st-a{left:-6px;top:0;transform:rotate(-10deg)}
.st-b{right:-4px;top:40px;animation-delay:-2s!important}
.st-c{left:10px;bottom:-4px;animation-delay:-4s!important}
.st-d{right:30px;bottom:-14px;animation-delay:-1s!important}
.pop{position:absolute;left:24%;top:-6px;background:var(--t);color:var(--d);border:2px solid var(--c);font-weight:800;font-size:.85rem;padding:6px 14px;border-radius:999px;box-shadow:var(--shadow-s);animation:pop .7s cubic-bezier(.3,1.6,.5,1) .4s both}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes pop{from{transform:scale(.85)}to{transform:scale(1)}}

/* sticker en badge */
.sticker{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:20px;background:var(--t);color:var(--d);border:2px solid var(--c);flex:none}
.sticker .ic{width:28px;height:28px}
.sticker-l{width:72px;height:72px;border-radius:24px}
.sticker-l .ic{width:36px;height:36px}
.sticker-xl{width:150px;height:150px;border-radius:48px;border-width:3px;transform:rotate(-6deg);box-shadow:var(--shadow)}
.sticker-xl .ic{width:76px;height:76px}
.badge{display:inline-flex;align-items:center;gap:4px;width:max-content;font-size:.86rem;font-weight:800;padding:5px 12px;border-radius:999px;background:var(--t,var(--bg-tint));color:var(--d,var(--ink));border:2px solid var(--c,var(--line));white-space:nowrap}
.badge b{font-size:1.05rem}
.badge-free{background:var(--basis-c);color:var(--on-c);border-color:var(--basis-c)}
.badge-l{font-size:1rem;padding:7px 16px}
.badge-pop{animation:pop .7s cubic-bezier(.3,1.6,.5,1) .3s both;font-size:1rem;padding:8px 18px}
.mini{display:inline-flex;font-size:.74rem;font-weight:800;padding:1px 9px;border-radius:999px;background:var(--basis-c);color:var(--on-c);vertical-align:2px}

/* ===== getuigenissen ===== */
.car-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.car-btns{display:flex;gap:8px}
.car-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .15s}
.car-btn:hover{transform:scale(1.06);border-color:var(--ink)}
.carousel{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,380px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;scrollbar-width:thin}
.carousel>*{scroll-snap-align:start}
@media (max-width:520px){.carousel{grid-auto-columns:86%}}
.qcard{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;box-shadow:var(--shadow-s);display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px 16px;align-content:start}
.qcard .photo{width:64px;height:64px;border-radius:50%;grid-row:span 2}
.qcard .photo figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qcard blockquote{margin:0;font-size:1.05rem;font-weight:700;grid-column:2}
.qcard>figcaption{grid-column:2;display:flex;flex-direction:column;font-size:.92rem;color:var(--muted)}
.qcard-wide{grid-template-columns:140px minmax(0,1fr);max-width:900px;margin-inline:auto;padding:32px;border-radius:var(--r-xl)}
.qcard-wide .photo{width:140px;height:140px}
.qcard-wide .photo figcaption{position:static;width:auto;height:auto;clip:auto;font-size:.72rem;padding:0 10px;text-align:center}
.qcard-wide blockquote{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:800;line-height:1.3}
@media (max-width:560px){.qcard-wide{grid-template-columns:minmax(0,1fr)}.qcard-wide blockquote,.qcard-wide>figcaption{grid-column:1}}
.photo{position:relative;margin:0;display:grid;place-items:center;align-content:center;gap:6px;background:repeating-linear-gradient(-45deg,var(--bg-tint) 0 10px,var(--surface) 10px 20px);border:2px dashed var(--line);color:var(--muted);overflow:hidden;border-radius:var(--r-l);aspect-ratio:1/1}
.photo svg{width:40%;max-width:90px}
.photo figcaption{font-size:.85rem;text-align:center;padding:0 16px;line-height:1.35}
.split-art .photo{aspect-ratio:4/3}

/* ===== voor wie ===== */
.aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px}
.aud li{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:var(--r-l);background:var(--t);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.aud li:hover{transform:rotate(-2deg) translateY(-3px)}
.aud-dot{width:34px;height:34px;border-radius:50% 50% 50% 12px;background:var(--c);margin-bottom:8px}
.aud b{font-size:1.2rem;font-weight:900;color:var(--ink)}
.aud span:last-child{color:var(--muted);font-size:.95rem;line-height:1.4}

/* ===== tegels ===== */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tile a{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:24px;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-l);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-s);transition:transform .25s cubic-bezier(.3,1.6,.5,1),border-color .2s,box-shadow .2s}
.tile a:hover{transform:rotate(-1.5deg) translateY(-4px);border-color:var(--c);box-shadow:var(--shadow);color:var(--ink)}
.tile a:hover .sticker{transform:rotate(8deg) scale(1.06)}
.tile .sticker{transition:transform .25s cubic-bezier(.3,1.6,.5,1);margin-bottom:6px}
.tile b{font-size:1.25rem;font-weight:900}
.tile span:not(.sticker):not(.badge){color:var(--muted);font-size:.96rem;line-height:1.45;flex:1}
.tile-free a{background:var(--t);border-color:var(--c)}
.tiles-mini{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* verrassing */
.surprise{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center;background:var(--t);border-radius:var(--r-xl);padding:clamp(28px,5vw,56px);overflow:hidden}
.surprise::after{content:"";position:absolute;width:240px;height:180px;right:-70px;top:-50px;clip-path:polygon(10% 22%,100% 0,84% 86%,0 100%);background:var(--c);opacity:.35}
.surprise h2{font-size:clamp(2rem,4.6vw,3.2rem)}
.surprise .lead{color:var(--ink)}
.surprise .tlink{margin-top:12px;color:var(--d)}
.gifts{display:grid;gap:12px;position:relative;z-index:1}
.gifts li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:2px 14px;align-items:center;background:var(--surface);border-radius:var(--r-m);padding:14px 16px;box-shadow:var(--shadow-s)}
.gift-ic{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--c);color:var(--on-c)}
.gifts b{font-size:1.1rem}
.gifts span:nth-of-type(2){grid-column:2;color:var(--muted);font-size:.93rem;line-height:1.4}
.gifts .badge{grid-row:1;grid-column:3}
@media (max-width:820px){.surprise{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.gifts li{grid-template-columns:48px minmax(0,1fr)}.gifts .badge{grid-column:2;grid-row:auto}}

/* ===== afwisselend tekst en beeld ===== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.flip .split-text{order:2}
.split-top{align-items:start}
.split-text{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.split-text>p{color:var(--muted);max-width:56ch}
.split-text h3{font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:900}
.split-text .btn{margin-top:10px}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.split.flip .split-text{order:0}}
.story{display:flex;flex-direction:column;gap:18px}
.story-long{gap:8px;padding-top:24px}
.sa-story{width:90px;margin-inline:auto;color:var(--d,var(--event-c));transform:rotate(18deg)}
.sa-flip{transform:scaleX(-1) rotate(18deg)}
.story-long .split{padding-block:24px}
.timechip{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;padding:6px 14px;border-radius:999px;background:var(--t);color:var(--d)}
.modlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:48px}
.modlist>div{background:var(--surface);border-radius:var(--r-m);padding:18px 20px}
.modlist b{font-size:1.1rem}
.modlist p{color:var(--muted);font-size:.95rem;margin-top:4px}

.checks{display:flex;flex-direction:column;gap:12px;margin-block:6px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.ck{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c,var(--leden-c));color:var(--on-c);flex:none;margin-top:2px}
.ck .ic{stroke-width:3}

/* ===== schermvoorbeelden ===== */
.mock{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);overflow:hidden;width:100%}
.mock-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--bg-tint);border-bottom:1px solid var(--line)}
.mock-bar span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.mock-bar span:first-child{background:var(--event-c)}
.mock-bar span:nth-child(2){background:var(--zaal-c)}
.mock-bar span:nth-child(3){background:var(--leden-c)}
.mock-bar b{margin-left:10px;font-size:.9rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-body{padding:16px}
.mock>figcaption,.mess>figcaption{font-size:.76rem;color:var(--muted);padding:0 16px 12px}
.pill{display:inline-flex;font-size:.78rem;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill-ok{background:var(--leden-t);color:var(--leden-d)}
.pill-warn{background:var(--event-t);color:var(--event-d)}
.pill-info{background:var(--geld-t);color:var(--geld-d)}
.m-rows li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.m-rows li:last-child{border-bottom:0}
.m-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--t,var(--bg-tint));color:var(--d,var(--ink));font-weight:900;font-size:.9rem;flex:none}
.m-tx{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.m-tx b{font-size:.95rem}
.m-tx small{color:var(--muted);font-size:.82rem}
.m-table{width:100%;border-collapse:collapse;font-size:.88rem}
.m-table th{text-align:left;color:var(--muted);font-weight:800;padding:6px 8px;border-bottom:2px solid var(--line)}
.m-table td{padding:9px 8px;border-bottom:1px solid var(--line)}
.m-table tr:last-child td{border-bottom:0}
.m-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:.82rem;font-variant-numeric:tabular-nums}
.m-cal i{font-style:normal;color:var(--muted);font-weight:800;padding-bottom:4px}
.m-cal span{padding:6px 0;border-radius:10px;background:var(--bg-tint)}
.m-cal span:empty{background:none}
.m-cal .bk{background:var(--c);color:var(--on-c);font-weight:900}
.m-cal .cf{background:var(--event-c);color:var(--on-c);font-weight:900;box-shadow:0 0 0 3px var(--event-t)}
.m-legend{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:12px}
.m-legend span{width:12px;height:12px;border-radius:4px;background:var(--c)}
.m-legend span.cf{background:var(--event-c);margin-left:8px}
.m-meter p{font-size:1rem}
.m-meter p b{font-size:3rem;font-weight:900;font-variant-numeric:tabular-nums;color:var(--d)}
.m-sub{color:var(--muted);font-size:.85rem!important}
.m-bar{height:16px;border-radius:99px;background:var(--bg-tint);margin:14px 0;overflow:hidden}
.m-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--leden-c),var(--zaal-c) 70%,var(--event-c))}
.m-btns{display:flex;gap:8px}
.m-btns span{flex:1;text-align:center;padding:10px;border-radius:14px;background:var(--t);color:var(--d);font-weight:900}
.m-pos{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.m-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.m-grid span{display:grid;place-items:center;padding:14px 4px;border-radius:14px;background:var(--bg-tint);font-weight:800;font-size:.88rem}
.m-grid .on{background:var(--c);color:var(--on-c)}
.m-ticket{background:var(--bg-tint);border-radius:14px;padding:10px;font-size:.84rem;display:flex;flex-direction:column;gap:6px}
.m-ticket p{display:flex;justify-content:space-between;gap:6px;font-variant-numeric:tabular-nums}
.m-ticket .tot{font-weight:900;border-top:2px dashed var(--line);padding-top:6px}
.m-pay{flex-wrap:wrap}
.m-pay span{background:var(--surface);border-radius:8px;padding:2px 6px;font-weight:800;font-size:.74rem}
@media (max-width:420px){.m-pos{grid-template-columns:minmax(0,1fr)}}
.m-ed .m-h{font-weight:900;font-size:1.15rem;margin-bottom:10px}
.ln{display:block;height:9px;border-radius:9px;background:var(--bg-tint);margin-bottom:8px}
.ln.short{width:60%}
.m-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.m-pics span{aspect-ratio:1;border-radius:12px;background:var(--t)}
.m-pics span:nth-child(2){background:var(--zaal-t)}
.m-pics span:nth-child(3){background:var(--event-t)}
.m-pub{display:flex;justify-content:flex-end;margin-top:12px}
.m-pub span{background:var(--primary);color:var(--primary-ink);font-weight:800;border-radius:999px;padding:6px 16px;font-size:.88rem}
.m-chat{display:flex;flex-direction:column;gap:10px}
.m-chat li{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:85%}
.m-chat li span{background:var(--bg-tint);padding:9px 13px;border-radius:16px 16px 16px 4px;font-size:.9rem}
.m-chat li em{font-style:normal;font-size:.72rem;font-weight:800;color:var(--muted)}
.m-chat .me{align-self:flex-end;align-items:flex-end}
.m-chat .me span{background:var(--t);color:var(--ink);border-radius:16px 16px 4px 16px}
.m-chat .hand span{background:var(--zaal-t)}
.m-dash{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.m-tile{border-radius:16px;padding:12px;background:var(--t);display:flex;flex-direction:column;gap:2px;min-width:0}
.m-tile small{font-size:.74rem;font-weight:700;color:var(--ink);line-height:1.25}
.m-tile b{font-size:1.8rem;font-weight:900;color:var(--d);line-height:1.1}
.m-wide{grid-column:1/-1}
.m-form{display:flex;flex-direction:column;gap:6px}
.m-form label{font-size:.8rem;font-weight:800;color:var(--muted)}
.m-in{border:2px solid var(--line);border-radius:12px;padding:8px 12px;font-size:.9rem;margin-bottom:6px}
.m-choose li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;margin-bottom:6px;background:var(--t);font-weight:800;font-size:.92rem}
.m-choose b{margin-left:auto;color:var(--d)}
.m-chk{width:20px;height:20px;border-radius:7px;border:2px solid var(--d);flex:none}
.m-chk.on{background:var(--d)}
.m-total{display:flex;justify-content:space-between;font-weight:800;padding-top:8px;border-top:2px dashed var(--line)}
@media (max-width:420px){.m-dash{grid-template-columns:1fr 1fr}.m-dash .m-tile:nth-child(3){grid-column:1/-1}}

/* rommelig lijstje */
.mess{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);transform:rotate(-1.5deg);overflow:hidden}
.mess-list{padding:8px 0;font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:.88rem}
.mess-list li{display:flex;gap:12px;padding:9px 16px;border-bottom:1px dashed var(--line);overflow-wrap:anywhere}
.mess-list li:nth-child(2){background:var(--zaal-t)}
.mess-list li:nth-child(4){color:var(--warn-d);font-weight:700}
.mess-list i{font-style:normal;color:var(--muted);width:14px;flex:none}

/* getekende illustratie */
.illo{position:relative;margin:0;aspect-ratio:4/3;width:100%}
.illo svg{position:absolute;inset:0;width:100%;height:100%}
.i-blob{fill:var(--t)}
.i-dot{fill:var(--c)}
.i-ring{fill:none;stroke:var(--c);stroke-width:4}
.i-squig{fill:none;stroke:var(--d);stroke-width:4;stroke-linecap:round}
.i-star{fill:var(--zaal-c)}
.illo-ic{position:absolute;left:29%;top:22%;display:grid;place-items:center;width:42%;aspect-ratio:1;border-radius:32%;background:var(--c);color:var(--on-c);transform:rotate(-8deg);box-shadow:var(--shadow);animation:float 7s ease-in-out infinite}
.illo-ic .ic{width:55%;height:55%;stroke-width:1.8}

/* ===== modulepagina ===== */
.module-dock{
  display:grid;
  grid-template-columns:repeat(8,minmax(86px,1fr));
  gap:16px;
  margin-top:42px;
  align-items:start;
}
.module-app{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--ink);
  text-align:center;
  text-decoration:none;
  font-weight:900;
}
.module-app-icon{
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  border-radius:24px;
  background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 72%,var(--surface)));
  color:var(--on-c);
  box-shadow:inset 0 -7px 0 color-mix(in srgb,#000 13%,transparent),0 18px 28px -24px color-mix(in srgb,var(--d) 68%,#000);
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s;
}
.module-app-icon .ic{width:38px;height:38px;stroke-width:1.9}
.module-app b{font-size:.94rem;line-height:1.18;max-width:10ch}
.module-app small{font-size:.78rem;line-height:1.1;color:var(--muted);font-weight:800}
.module-app:hover{color:var(--ink)}
.module-app:hover .module-app-icon{transform:translateY(-5px) scale(1.03);box-shadow:inset 0 -7px 0 color-mix(in srgb,#000 13%,transparent),0 24px 36px -24px color-mix(in srgb,var(--d) 78%,#000)}
@media (max-width:980px){.module-dock{grid-template-columns:repeat(4,minmax(86px,1fr))}}
@media (max-width:560px){.module-dock{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}.module-app-icon{width:66px;height:66px;border-radius:22px}}
.pillar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:24px 44px;padding:clamp(24px,4vw,40px);background:var(--t);border-radius:var(--r-xl);overflow:hidden}
.pillar::after{content:"";position:absolute;width:180px;height:140px;clip-path:polygon(12% 22%,100% 0,88% 76%,0 100%);background:var(--c);opacity:.25;right:-50px;bottom:-50px}
.pillar-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pillar-head h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.pillar-mods{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.pillar-mods li{display:flex;gap:10px;align-items:flex-start}
.pillar-mods .more-mods{padding-left:34px;color:var(--muted);font-weight:700}
.pillar-desc{display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding-top:8px;position:relative;z-index:1}
.pillar-free{border:3px dashed var(--c)}
.pillar-free .badge-l{font-size:1.15rem;padding:9px 20px}
@media (max-width:900px){.pillar{grid-template-columns:minmax(0,1fr)}}
.module-pricebar{
  position:relative;
  z-index:8;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) minmax(220px,.55fr);
  align-items:center;
  gap:18px;
  margin-top:72px;
  padding:clamp(20px,3vw,28px);
  border:2px solid color-mix(in srgb,var(--primary) 24%,var(--line));
  border-radius:24px;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--leden-t) 38%,var(--surface)));
  box-shadow:var(--shadow);
}
.module-pricebar-head{display:flex;flex-direction:column;gap:8px}
.module-pricebar-head h2{font-size:1.55rem}
.module-pricebar-head p:not(.kicker){color:var(--muted);font-weight:700}
.module-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.module-checks label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:8px 12px;
  border:2px solid color-mix(in srgb,var(--c) 36%,var(--line));
  border-radius:16px;
  background:var(--t);
  color:var(--d);
  font-weight:800;
  min-width:0;
}
.module-checks span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.module-checks b{margin-left:auto;color:var(--ink);font-size:.9rem;white-space:nowrap}
.module-checks input{width:20px;height:20px;accent-color:var(--primary);flex:none}
.module-pricebar output{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:center;
  justify-content:center;
  min-height:74px;
  padding:14px 18px;
  border-radius:20px;
  background:var(--primary);
  color:var(--primary-ink);
  font-weight:900;
  text-align:center;
}
.module-pricebar output strong{font-size:1.18rem}
.module-pricebar output span{font-size:.9rem;font-weight:800;opacity:.9}
@media (min-width:980px){
  .pillar{position:sticky;top:94px}
  .pillar:nth-of-type(1){top:94px}
  .pillar:nth-of-type(2){top:104px}
  .pillar:nth-of-type(3){top:114px}
  .pillar:nth-of-type(4){top:124px}
  .pillar:nth-of-type(5){top:134px}
  .pillar:nth-of-type(6){top:144px}
  .pillar:nth-of-type(7){top:154px}
  .pillar:nth-of-type(8){top:164px}
}
@media (max-width:820px){
  .module-pricebar{grid-template-columns:minmax(0,1fr)}
  .module-checks{grid-template-columns:minmax(0,1fr)}
}
.wip{display:flex;gap:18px;align-items:flex-start;border:2px dashed var(--line);border-radius:var(--r-xl);padding:28px}
.wip-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:var(--zaal-t);color:var(--zaal-d);flex:none}
.wip h2{font-size:1.4rem}
.wip p{color:var(--muted);margin:4px 0 12px}
.wip ul{display:flex;flex-wrap:wrap;gap:8px}
.wip li{border-radius:999px;padding:5px 14px;font-size:.92rem;font-weight:700;background:var(--bg-tint)}
.wip li:nth-child(3n+1){background:var(--kassa-t)}
.wip li:nth-child(3n+2){background:var(--web-t)}
@media (max-width:520px){.wip{flex-direction:column}}

/* ===== detail ===== */
.hero-detail{background:var(--t)}
.hero-detail::before{content:"";position:absolute;width:460px;height:340px;clip-path:polygon(10% 25%,100% 0,84% 84%,0 100%);background:var(--c);opacity:.18;right:-150px;top:-120px}
.hero-detail .lead{color:var(--ink)}
.crumb{font-weight:800;font-size:.92rem;margin-bottom:14px;color:var(--d)}
.crumb a{color:var(--d)}
.hero-badges{margin-top:24px}
.hero-sticker{display:flex;flex-direction:column;align-items:center;gap:24px}
.modchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:380px}
.modchips li{background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:800;font-size:.9rem;box-shadow:var(--shadow-s)}
.modchips li:nth-child(odd){transform:rotate(-2deg)}
.modchips li:nth-child(even){transform:rotate(2deg)}
@media (max-width:900px){.hero-sticker{flex-direction:row;align-items:center;justify-content:flex-start}.sticker-xl{width:96px;height:96px;border-radius:32px}.sticker-xl .ic{width:48px;height:48px}.modchips{justify-content:flex-start}}

.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.why li{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:8px;transition:transform .25s cubic-bezier(.3,1.6,.5,1),border-color .2s}
.why li:hover{transform:translateY(-3px) rotate(1deg);border-color:var(--c)}
.why-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:var(--t);color:var(--d);margin-bottom:6px}
.why h3,.from h2{font-size:1.2rem}
.why p,.from p{color:var(--muted)}
@media (max-width:860px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.why{grid-template-columns:minmax(0,1fr)}}

/* uitklappers */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--surface);border-radius:var(--r-m);border:2px solid var(--line);transition:border-color .2s}
.faq details[open]{border-color:var(--c,var(--leden-c))}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 18px;font-weight:800;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:var(--t,var(--leden-t));transition:transform .25s}
.plus::before,.plus::after{content:"";position:absolute;left:9px;right:9px;top:14.5px;height:3px;border-radius:3px;background:var(--d,var(--leden-d))}
.plus::after{transform:rotate(90deg);transition:transform .25s}
details[open] .plus{transform:rotate(180deg)}
details[open] .plus::after{transform:rotate(0)}
.faq-a{padding:0 18px 18px;color:var(--muted);max-width:64ch}

/* slotblok */
.closing-wrap{padding-block:clamp(40px,6vw,80px)}
.closing{position:relative;overflow:hidden;background:var(--c);color:var(--on-c);border-radius:var(--r-xl);padding:clamp(36px,7vw,80px) clamp(24px,6vw,72px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.closing h2{font-size:clamp(2rem,5vw,3.4rem);max-width:18ch;position:relative}
.closing p{max-width:50ch;font-size:1.1rem;font-weight:700;position:relative}
.closing .btn-primary{background:#FFFFFF;color:#1C2135;box-shadow:0 8px 20px -8px rgba(28,33,53,.45);position:relative}
.closing .btn-primary:hover{background:#1C2135;color:#FFFFFF}
.closing :focus-visible{outline-color:#1C2135}
.closing-note{font-size:.95rem!important}
.confetti{position:absolute;right:0;top:0;width:min(60%,520px);height:100%;pointer-events:none}
.confetti *{fill:#FFFFFF;opacity:.75;animation:float 5s ease-in-out infinite}
.confetti .cf2{fill:#1C2135;opacity:.25;animation-delay:-1s}
.confetti .cf3{animation-delay:-2.5s}
.confetti .cf4s{fill:none;stroke:#1C2135;stroke-width:4;stroke-linecap:round;opacity:.3}
.confetti .cf5{fill:#1C2135;opacity:.2}

/* ===== prijzen ===== */
.price-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.price-top{grid-template-columns:minmax(0,1fr)}}
.basecard{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,4vw,36px);box-shadow:var(--shadow)}
.big-price{font-weight:800;color:var(--muted);margin-bottom:18px}
.big-price b{font-size:4rem;font-weight:900;color:var(--ink);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.big-free{display:flex;flex-direction:column;gap:4px;margin-bottom:18px}
.big-free b{font-size:clamp(2.4rem,5vw,4rem);font-weight:900;color:var(--ink);line-height:1}
.big-free span{font-weight:800;color:var(--muted)}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.terms li{background:var(--t);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:2px}
.terms b{font-size:1.8rem;font-weight:900;color:var(--d);line-height:1.15}
.terms span{font-weight:700;font-size:.95rem}
@media (max-width:460px){.terms{grid-template-columns:minmax(0,1fr)}}
.combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.combo{background:var(--t);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:6px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.combo:hover{transform:rotate(-1.5deg)}
.combo>b{font-size:1.2rem;font-weight:900}
.combo>span{color:var(--muted);font-size:.95rem}
.combo ul{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.combo ul li{background:var(--surface);border-radius:999px;padding:3px 11px;font-size:.82rem;font-weight:800}
.combo-total{margin-top:auto;font-weight:800;color:var(--d)}
.combo-total b{font-size:2.2rem;font-weight:900;font-variant-numeric:tabular-nums}
.table-wrap{position:relative;overflow-x:auto;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-s);border:1px solid var(--line)}
.cmp{border-collapse:collapse;width:100%;min-width:720px}
.cmp th,.cmp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.cmp th[scope="row"]{text-align:left;font-weight:800;white-space:nowrap}
.cmp th small{display:block;font-weight:700;color:var(--muted);font-size:.8rem}
.cmp thead th{font-weight:900;font-size:.95rem;vertical-align:bottom;background:var(--surface)}
.th-dot{display:block;width:26px;height:10px;border-radius:99px;background:var(--c);margin:0 auto 8px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);margin-right:8px;vertical-align:0}
.yes{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--leden-c);color:var(--on-c)}
.yes .ic{stroke-width:3}
.no{display:inline-block;width:14px;height:3px;border-radius:3px;background:var(--line)}
.cmp tfoot th,.cmp tfoot td{border-bottom:0;font-size:1.1rem}
.cmp tfoot td b{font-weight:900}
.cmp tfoot .sub th,.cmp tfoot .sub td{font-size:.9rem;color:var(--muted);padding-top:0}
.receipt{position:relative;background:var(--surface);border-radius:var(--r-l);padding:28px;box-shadow:var(--shadow);border-top:10px solid var(--c);transform:rotate(1deg)}
.r-row>span:last-child{white-space:nowrap}
.r-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-bottom:2px dashed var(--line);font-variant-numeric:tabular-nums}
.r-tot{font-weight:900;font-size:1.35rem;border-bottom:0;padding-top:16px}
.r-sub{color:var(--muted);font-size:.95rem;border-bottom:0;padding-top:0}
.calc fieldset{border:0;padding:0;margin:0 0 14px;display:grid;gap:8px}
.chk{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;border-radius:var(--r-m);background:var(--surface);border:2px solid var(--line);cursor:pointer;transition:border-color .15s,background-color .15s}
.chk:has(input:checked){border-color:var(--c);background:var(--t)}
.chk-name{flex:1;font-weight:800}
.chk input,.switch input{width:24px;height:24px;accent-color:var(--primary);flex:none}
.chk-fixed{cursor:default;background:var(--bg-tint);border-style:dashed;color:var(--muted)}
.switch{display:flex;align-items:center;gap:12px;min-height:48px;font-weight:800;cursor:pointer}
.calc-out{display:block;margin-top:10px;padding:22px;border-radius:var(--r-l);background:var(--leden-c);color:var(--on-c);font-weight:700}
.calc-out strong{display:block;font-size:2.4rem;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.stopcard{display:flex;gap:22px;align-items:flex-start;background:var(--t,var(--geld-t));border-radius:var(--r-xl);padding:clamp(24px,5vw,48px)}
.stopcard:not([class*="acc-"]){--t:var(--geld-t);--d:var(--geld-d);--c:var(--geld-c)}
.stopcard h2{margin-bottom:10px}
.stopcard p{max-width:60ch;margin-top:8px}
.stop-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:var(--c);color:var(--on-c);flex:none}
@media (max-width:560px){.stopcard{flex-direction:column}}

/* overstappen */
.from{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.from li{background:var(--t);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:6px}
.from .why-ic{background:var(--surface)}
.from p{color:var(--ink)}
@media (max-width:820px){.from{grid-template-columns:minmax(0,1fr)}}

/* formulier */
.form{display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:var(--surface);border-radius:var(--r-xl);padding:clamp(20px,4vw,36px);box-shadow:var(--shadow-s)}
.field{display:flex;flex-direction:column;gap:6px;width:100%}
.field label{font-weight:800}
.field input,.field textarea{width:100%;min-height:50px;padding:12px 16px;border:2px solid var(--line);border-radius:var(--r-m);background:var(--bg);color:var(--ink);font:inherit}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--primary)}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--bg-tint);font-weight:800;text-decoration:none;color:var(--ink)}
.toc a:hover{background:var(--leden-t);color:var(--leden-d)}

/* ===== voettekst ===== */
.site-foot{background:var(--bg-tint);padding-top:64px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-slogan{color:var(--muted);margin:6px 0 26px;font-weight:700}
.foot-h{font-size:.95rem;font-weight:900;margin-bottom:10px}
.foot-list li{min-height:40px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.foot-list a{min-height:40px;display:inline-flex;align-items:center;color:var(--ink);font-weight:600}
.foot-list a:hover{color:var(--primary)}
.site-foot address{font-style:normal;line-height:1.9}
.foot-small{color:var(--muted);margin-top:10px;font-size:.93rem}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin-top:48px;padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.foot-bar ul{display:flex;flex-wrap:wrap;gap:0 20px}
.foot-bar a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .tile a:hover,.aud li:hover,.why li:hover,.combo:hover,.btn:hover{transform:none}
}

/* ===== foto's ===== */
.pic{position:relative;margin:0;width:100%;border-radius:var(--r-l);overflow:hidden;background:var(--t)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.pic.loaded img{opacity:1}
.pic.loaded .pic-fb{visibility:hidden}
.pic-fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end}
.pic-fb svg{position:absolute;inset:0;width:100%;height:100%}
.pf-sun{fill:var(--zaal-c);opacity:.8}
.pf-hill{fill:var(--c);opacity:.35}
.pf-p{fill:var(--d);opacity:.55}
.pf-p2{fill:var(--d);opacity:.8}
.pic-fb span{position:relative;margin:12px;align-self:flex-start;max-width:calc(100% - 24px);background:var(--surface);color:var(--muted);border-radius:var(--r-s);padding:8px 12px;font-size:.8rem;line-height:1.35;box-shadow:var(--shadow-s)}
.pic-fb b{color:var(--d);margin-right:4px}
.pic-fb small{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;margin-top:2px}

/* home: foto in de hero, met een schermpje erover */
.hero-art{position:relative;padding:0 0 40px}
.pic-hero{border-radius:var(--r-xl);box-shadow:var(--shadow)}
.hero-mini{position:absolute;left:-28px;bottom:0;width:min(78%,340px)}
.hero-mini .mock{box-shadow:var(--shadow)}
.hero-mini .mock>figcaption{display:none}
.hero-art .pop{left:auto;right:18px;top:18px}
@media (max-width:900px){.hero-mini{left:12px}}
.hero-note{margin-top:14px}

.hero-home .hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.hero-home .hero-art{padding-top:12px}
.hero-home .hero-mini{width:min(88%,430px);left:-40px;bottom:-10px}
.hero-home .hero-mini .mock-body{padding:20px}
.mock-big{transform:scale(1.02);transform-origin:center}
.show .mock-big{box-shadow:var(--shadow);border-width:2px}
@media (max-width:860px){
  .hero-home .hero-grid{grid-template-columns:1fr}
  .hero-home .hero-mini{left:12px;bottom:0;width:min(92%,430px)}
}

/* vertrouwen */
.trust{border-block:1px solid var(--line);padding-block:26px}
.trust-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trust-facts li{display:flex;gap:12px;align-items:flex-start}
.trust-facts .ic{color:var(--leden-d);width:28px;height:28px;margin-top:2px}
.trust-facts span{display:flex;flex-direction:column;color:var(--muted);line-height:1.4}
.trust-facts b{color:var(--ink)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:22px}
.logos p{font-weight:800;color:var(--muted)}
.logos ul{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:980px){.trust-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.trust-facts{grid-template-columns:minmax(0,1fr)}}

/* doelgroepen met foto */
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.group{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.group:hover{border-color:var(--c);transform:translateY(-3px)}
.group .pic{border-radius:0}
.group-body{padding:20px 22px 16px;display:flex;flex-direction:column;gap:6px;flex:1;border-top:6px solid var(--c)}
.group-body p{color:var(--muted);flex:1}
.group-body .tlink{color:var(--d)}
@media (max-width:900px){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.groups{grid-template-columns:minmax(0,1fr)}}

/* karakters */
.band-characters{
  background:
    linear-gradient(110deg,color-mix(in srgb,var(--event-t) 64%,transparent) 0 35%,transparent 35%),
    linear-gradient(250deg,color-mix(in srgb,var(--web-t) 70%,transparent) 0 32%,transparent 32%),
    var(--bg);
}
.characters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px;margin-inline:auto}
.character{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:240px;
  padding:24px;
  border:2px solid color-mix(in srgb,var(--c) 42%,var(--line));
  border-radius:24px;
  background:
    linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--t) 46%,var(--surface)));
  box-shadow:var(--shadow-s);
  overflow:hidden;
}
.character::after{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-18px;
  width:96px;
  height:76px;
  clip-path:polygon(12% 20%,100% 0,88% 82%,0 100%);
  background:var(--c);
  opacity:.52;
}
.character:nth-child(odd){transform:translateY(10px)}
.character h3{font-size:1.35rem;max-width:16ch}
.character p{color:var(--muted);font-weight:700;position:relative;z-index:1}
.char-mark{
  display:inline-grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:18px;
  background:var(--c);
  color:var(--on-c);
  font-weight:900;
  box-shadow:inset 0 -4px 0 color-mix(in srgb,#000 12%,transparent);
}
@media (max-width:980px){.character:nth-child(odd){transform:none}}
@media (max-width:560px){.characters{grid-template-columns:minmax(0,1fr)}.character{min-height:auto}}

/* prijsbewijs */
.band-proof{
  background:
    linear-gradient(125deg,color-mix(in srgb,var(--leden-t) 74%,transparent) 0 42%,transparent 42%),
    var(--bg);
}
.price-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px 56px;align-items:center}
.proof-list{display:grid;gap:12px}
.proof-list li{
  display:grid;
  gap:3px;
  padding:18px 20px;
  border:2px solid var(--line);
  border-radius:22px;
  background:var(--surface);
  box-shadow:var(--shadow-s);
}
.proof-list b{font-size:1.08rem}
.proof-list span{color:var(--muted);font-weight:700}
@media (max-width:820px){.price-proof{grid-template-columns:minmax(0,1fr)}}

/* overstappen */
.switch-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.switch-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:250px;
  padding:22px;
  border:2px solid color-mix(in srgb,var(--c) 38%,var(--line));
  border-radius:22px;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--t) 44%,var(--surface)));
  box-shadow:var(--shadow-s);
}
.switch-card h3{font-size:1.15rem}
.switch-card p{color:var(--muted);font-weight:700}
@media (max-width:1100px){.switch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.switch-grid{grid-template-columns:minmax(0,1fr)}.switch-card{min-height:auto}}

/* schermvoorbeelden met tabbladen */
.show{background:var(--surface);border-radius:var(--r-xl);padding:clamp(18px,3vw,32px);box-shadow:var(--shadow-s)}
.show-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.show-tab{min-height:46px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.show-tab:hover{border-color:var(--c)}
.show-tab[aria-selected="true"]{background:var(--t);border-color:var(--c);color:var(--d)}
.show-pane h3{font-size:clamp(1.4rem,2.6vw,1.8rem)}

/* detail: foto met sticker */
.hero-photo{position:relative;padding:0 0 30px 20px}
.hero-photo .pic{border-radius:var(--r-xl);box-shadow:var(--shadow)}
.hero-photo .sticker-xl{position:absolute;left:-6px;bottom:6px;width:96px;height:96px;border-radius:32px}
.hero-photo .sticker-xl .ic{width:48px;height:48px}
.hero-photo .modchips{position:absolute;right:12px;top:12px;justify-content:flex-end;max-width:70%}
@media (max-width:560px){.hero-photo .sticker-xl{top:-12px;bottom:auto;left:-8px;width:72px;height:72px;border-radius:24px}.hero-photo .sticker-xl .ic{width:36px;height:36px}.hero-photo{padding-bottom:0}.hero-photo .modchips{position:static;justify-content:flex-start;max-width:none;margin-top:14px}.hero-photo{padding-left:0}}

/* rustiger voor elke leeftijd */
body{font-size:18px}
.aud li:hover,.why li:hover,.combo:hover{transform:translateY(-3px)}
.tile a:hover{transform:translateY(-4px) rotate(-.6deg)}
.mess{transform:none}
.receipt{transform:none}
.modchips li:nth-child(odd),.modchips li:nth-child(even){transform:none}

/* ===== speelsere Verenly-laag ===== */
.band,.hero,.site-foot{position:relative}
.band-tint,.site-foot{
  background:
    repeating-linear-gradient(135deg,color-mix(in srgb,var(--line) 35%,transparent) 0 1px,transparent 1px 16px),
    var(--bg-tint);
}
.hero-home{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--leden-t) 72%,transparent) 0%,transparent 48%),
    linear-gradient(315deg,color-mix(in srgb,var(--zaal-t) 82%,transparent) 0%,transparent 42%),
    var(--bg);
}
.hero-home::after{
  content:"";
  position:absolute;
  inset:auto -8% -12% auto;
  width:min(62vw,760px);
  height:38%;
  background:var(--web-t);
  clip-path:polygon(5% 35%,100% 0,96% 100%,0 82%);
  opacity:.62;
  pointer-events:none;
}
.hero-copy{position:relative}
.hero-copy::before{
  content:"";
  display:block;
  width:118px;
  height:12px;
  margin-bottom:18px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary) 0 38%,var(--zaal-c) 38% 68%,var(--web-c) 68% 100%);
  box-shadow:0 0 0 6px var(--surface),var(--shadow-s);
}
.lead{font-weight:700}
.kicker{padding:4px 10px 4px 4px;border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.btn{box-shadow:0 0 0 transparent,0 12px 22px -22px rgba(28,33,53,.55)}
.btn:hover{box-shadow:0 7px 0 color-mix(in srgb,var(--line) 70%,transparent),0 18px 28px -24px rgba(28,33,53,.55)}
.btn-secondary{border-color:color-mix(in srgb,var(--ink) 18%,var(--line));background:color-mix(in srgb,var(--surface) 86%,var(--zaal-t))}
.nav ul a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--leden-c)}
.pic{
  border:3px solid var(--surface);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c,var(--primary)) 34%,var(--line)),var(--shadow-s);
}
.pic::after{
  content:"";
  position:absolute;
  inset:10px;
  border:2px dashed color-mix(in srgb,#FFFFFF 76%,transparent);
  border-radius:calc(var(--r-l) - 8px);
  pointer-events:none;
  opacity:.76;
}
.pic-hero{
  rotate:1.6deg;
  box-shadow:0 0 0 8px var(--surface),0 0 0 12px var(--zaal-c),var(--shadow);
}
.pic-hero::before{
  content:"";
  position:absolute;
  left:28px;
  top:-2px;
  width:96px;
  height:22px;
  background:color-mix(in srgb,var(--zaal-c) 78%,#FFFFFF);
  border-radius:4px;
  rotate:-5deg;
  z-index:2;
  box-shadow:var(--shadow-s);
}
.hero-mini{filter:drop-shadow(0 18px 24px rgba(28,33,53,.18))}
.hero-mini .mock{border-width:2px;transform:rotate(-2deg)}
.pop{border-width:3px;text-transform:uppercase;letter-spacing:0}
.trust{background:color-mix(in srgb,var(--surface) 72%,transparent)}
.trust-facts li{
  padding:14px;
  border-radius:var(--r-m);
  background:var(--surface);
  box-shadow:var(--shadow-s);
}
.group{
  border:0;
  box-shadow:var(--shadow-s);
  transform-origin:center bottom;
}
.group:nth-child(3n+1){rotate:-.7deg}
.group:nth-child(3n+2){rotate:.6deg}
.group:nth-child(3n){rotate:-.3deg}
.group:hover{rotate:0deg;transform:translateY(-6px);box-shadow:var(--shadow)}
.group-body{border-top:0;position:relative}
.group-body::before{
  content:"";
  position:absolute;
  left:22px;
  top:-11px;
  width:74px;
  height:18px;
  border-radius:999px;
  background:var(--c);
  box-shadow:0 0 0 5px var(--surface);
}
.tile a,.basecard,.form,.show,.qcard,.combo,.terms li,.stopcard,.from li,.why li{
  border-radius:22px;
}
.tile a{
  border-color:color-mix(in srgb,var(--c) 42%,var(--line));
  background:
    linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--t) 38%,var(--surface)));
}
.tile a::after{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:34px;
  height:10px;
  border-radius:999px;
  background:var(--c);
  opacity:.72;
}
.sticker,.why-ic,.stop-ic,.gift-ic{
  box-shadow:inset 0 -4px 0 color-mix(in srgb,#000 12%,transparent),var(--shadow-s);
}
.pillar{
  background:
    linear-gradient(135deg,var(--t),color-mix(in srgb,var(--surface) 55%,var(--t)));
  border:2px solid color-mix(in srgb,var(--c) 36%,var(--line));
}
.pillar::after,.hero-detail::before{border-radius:40% 60% 58% 42%;transform:rotate(16deg)}
.hero-photo .pic{
  rotate:-1.2deg;
  box-shadow:0 0 0 8px var(--surface),0 0 0 12px var(--c),var(--shadow);
}
.hero-photo .modchips li{
  border:2px solid color-mix(in srgb,var(--c) 34%,var(--line));
}
.closing{
  background:
    linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 64%,var(--web-c)));
  box-shadow:0 22px 54px -38px rgba(11,122,75,.7);
}
@media (max-width:760px){
  .pic-hero,.hero-photo .pic,.group:nth-child(n){rotate:0deg}
  .hero-home::after{height:22%;width:92vw}
  .hero-copy::before{width:98px;height:10px}
}

/* professionele app-suite laag */
.hero-home{
  background:
    radial-gradient(circle at 78% 16%,color-mix(in srgb,var(--web-t) 74%,transparent) 0 19rem,transparent 19.2rem),
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg-tint) 70%,var(--bg)) 100%);
}
.workspace-hero{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:30px;
  min-height:620px;
  padding:26px;
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  border-radius:38px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--bg-tint) 86%,var(--surface))),
    var(--surface);
  box-shadow:0 28px 70px -46px rgba(28,33,53,.55);
  overflow:hidden;
}
.workspace-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--line) 46%,transparent) 1px,transparent 1px) 0 0/58px 58px,
    linear-gradient(180deg,color-mix(in srgb,#FFFFFF 48%,transparent),transparent 46%);
  pointer-events:none;
}
.workspace-chrome{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto auto auto 1fr auto auto auto;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-weight:800;
}
.workspace-chrome strong{
  color:var(--ink);
  padding:8px 14px;
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 80%,var(--bg-tint));
  box-shadow:var(--shadow-s);
}
.workspace-chrome>span:not(.back-dot){
  padding:8px 14px;
  border-radius:999px;
  background:color-mix(in srgb,var(--line) 38%,transparent);
}
.workspace-chrome i{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--c,var(--leden-c));
  box-shadow:0 0 0 3px var(--surface);
}
.workspace-chrome i:nth-of-type(1){--c:var(--event-c)}
.workspace-chrome i:nth-of-type(2){--c:var(--zaal-c);margin-left:-15px}
.workspace-chrome i:nth-of-type(3){--c:var(--web-c);margin-left:-15px}
.back-dot{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:color-mix(in srgb,var(--line) 48%,transparent);color:var(--muted)}
.suite-dock{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(8,minmax(74px,1fr));
  gap:18px;
  align-items:start;
}
.suite-app{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--ink);
  text-align:center;
  text-decoration:none;
  font-weight:900;
}
.suite-icon{
  display:grid;
  place-items:center;
  width:70px;
  height:70px;
  border-radius:22px;
  color:var(--on-c);
  background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 64%,#FFFFFF));
  box-shadow:inset 0 -7px 0 color-mix(in srgb,#000 13%,transparent),0 20px 30px -25px color-mix(in srgb,var(--d) 72%,#000);
}
.suite-icon .ic{width:36px;height:36px;stroke-width:1.9}
.suite-app b{font-size:.9rem;line-height:1.15;max-width:10ch}
.suite-app small{font-size:.76rem;color:var(--muted);font-weight:800}
.suite-app:hover{color:var(--ink)}
.suite-app:hover .suite-icon{transform:translateY(-5px) scale(1.03)}
.workspace-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.28fr .9fr;
  gap:18px;
  align-items:stretch;
  margin-top:auto;
}
.hero-home .workspace-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:134px 134px;
  align-items:stretch;
}
.hero-home .workspace-today{grid-column:1;grid-row:1/3;min-height:0}
.hero-home .workspace-panel.acc-geld{grid-column:2;grid-row:1;min-height:0}
.hero-home .workspace-panel.acc-zaal{grid-column:2;grid-row:2;min-height:0}
.hero-home .workspace-panel.acc-ai{display:none}
.workspace-panel{
  min-height:150px;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius:24px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:0 18px 34px -30px rgba(28,33,53,.55);
}
.workspace-today{
  grid-row:span 2;
  min-height:320px;
  color:#F8FAFC;
  background:
    linear-gradient(135deg,#151922,#202530),
    var(--ink);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.panel-head h2{font-size:1.28rem;color:inherit}
.panel-head span{
  padding:5px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--c) 22%,var(--surface));
  color:var(--d);
  font-weight:900;
  font-size:.82rem;
}
.workspace-today .panel-head span{background:rgba(255,255,255,.12);color:#fff}
.workspace-today ul{display:grid;gap:12px}
.workspace-today li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2px 12px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
}
.workspace-today li span{color:rgba(255,255,255,.7);font-weight:700}
.workspace-today em{
  grid-row:1/3;
  grid-column:2;
  font-style:normal;
  padding:4px 9px;
  border-radius:999px;
  color:#112116;
  background:var(--leden-c);
  font-weight:900;
  font-size:.76rem;
}
.workspace-today em.warn{background:var(--zaal-c)}
.spark{display:flex;align-items:end;gap:7px;height:80px;margin-top:12px}
.spark span{flex:1;border-radius:999px 999px 6px 6px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 42%,var(--surface)))}
.mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mini-cal span{display:grid;place-items:center;aspect-ratio:1;border-radius:9px;background:var(--bg-tint);font-size:.72rem;font-weight:900;color:var(--muted)}
.mini-cal .on{background:var(--c);color:var(--on-c)}
.workspace-panel p{font-weight:900;line-height:1.3;margin-top:8px}
.workspace-panel small{display:block;color:var(--muted);font-weight:800;margin-top:8px}
.module-hero{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:44px;
  align-items:center;
}
.suite-dock-panel{
  padding:28px;
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  border-radius:34px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--bg-tint) 82%,var(--surface)));
  box-shadow:0 24px 60px -44px rgba(28,33,53,.5);
}
.group{
  min-height:260px;
  background:
    linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--t) 34%,var(--surface)));
}
.group-suite{
  min-height:148px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:
    radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--c) 28%,transparent),transparent 58%),
    color-mix(in srgb,var(--bg-tint) 70%,var(--surface));
}
.group-suite .suite-icon{width:82px;height:82px;border-radius:26px}
.group-suite small{font-weight:900;color:var(--d)}
.group-body{border-top:1px solid color-mix(in srgb,var(--c) 28%,var(--line))}
.group-body::before{display:none}
@media (max-width:980px){
  .suite-dock{grid-template-columns:repeat(4,minmax(74px,1fr))}
  .module-hero{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .workspace-hero{min-height:auto}
  .workspace-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .workspace-hero{padding:18px;border-radius:28px;gap:22px}
  .workspace-chrome{grid-template-columns:auto 1fr auto auto auto}
  .workspace-chrome>span:not(.back-dot){display:none}
  .suite-dock{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .suite-icon{width:64px;height:64px;border-radius:21px}
  .workspace-grid{grid-template-columns:minmax(0,1fr)}
  .hero-home .workspace-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .hero-home .workspace-today,.hero-home .workspace-panel.acc-geld,.hero-home .workspace-panel.acc-zaal{grid-column:auto;grid-row:auto;min-height:150px}
  .hero-home .workspace-panel.acc-ai{display:block}
  .workspace-today{min-height:260px}
  .suite-dock-panel{padding:20px;border-radius:26px}
}

/* Glide-achtige productstijl: rustige canvas, app-tegels en witte werkkaarten */
:root{
  --bg:#F7F7F5;
  --bg-tint:#EFEFEC;
  --surface:#FFFFFF;
  --line:#E0E0DC;
  --ink:#2E2F33;
  --muted:#686A70;
  --primary:#151515;
  --primary-hover:#2B2B2B;
  --primary-ink:#FFFFFF;
  --shadow-s:0 1px 2px rgba(18,18,18,.04),0 10px 28px rgba(18,18,18,.06);
  --shadow:0 1px 2px rgba(18,18,18,.04),0 24px 58px rgba(18,18,18,.09);
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --r-xl:34px;

  --leden-c:#167246; --leden-t:#E8F1EC; --leden-d:#145C39;
  --geld-c:#1F5B98;  --geld-t:#E8EEF6;  --geld-d:#1E4E82;
  --zaal-c:#E3B31B;  --zaal-t:#F7F1DD;  --zaal-d:#80620C;
  --event-c:#D4373F; --event-t:#F7E8EA; --event-d:#9F252C;
  --kassa-c:#8D3BB0; --kassa-t:#F0E7F5; --kassa-d:#6B2D86;
  --web-c:#199C9C;   --web-t:#E4F2F1;   --web-d:#167575;
  --basis-c:#8CAA28; --basis-t:#EFF3E1; --basis-d:#63791E;
  --ai-c:#B2185B;    --ai-t:#F5E5ED;    --ai-d:#8A1649;
}
:root[data-theme="dark"],:root:not([data-theme="light"]){
  --bg:#F7F7F5;
  --bg-tint:#EFEFEC;
  --surface:#FFFFFF;
  --line:#E0E0DC;
  --ink:#2E2F33;
  --muted:#686A70;
  --primary:#151515;
  --primary-hover:#2B2B2B;
  --primary-ink:#FFFFFF;
  --shadow-s:0 1px 2px rgba(18,18,18,.04),0 10px 28px rgba(18,18,18,.06);
  --shadow:0 1px 2px rgba(18,18,18,.04),0 24px 58px rgba(18,18,18,.09);
  --leden-c:#167246; --leden-t:#E8F1EC; --leden-d:#145C39;
  --geld-c:#1F5B98;  --geld-t:#E8EEF6;  --geld-d:#1E4E82;
  --zaal-c:#E3B31B;  --zaal-t:#F7F1DD;  --zaal-d:#80620C;
  --event-c:#D4373F; --event-t:#F7E8EA; --event-d:#9F252C;
  --kassa-c:#8D3BB0; --kassa-t:#F0E7F5; --kassa-d:#6B2D86;
  --web-c:#199C9C;   --web-t:#E4F2F1;   --web-d:#167575;
  --basis-c:#8CAA28; --basis-t:#EFF3E1; --basis-d:#63791E;
  --ai-c:#B2185B;    --ai-t:#F5E5ED;    --ai-d:#8A1649;
  color-scheme:light;
}
body{
  background:var(--bg)!important;
  color:var(--ink);
}
.blobs,.confetti,.scribble,.hero-copy::before,.surprise::after,.pillar::after,.tile a::after{display:none!important}
.site-head{
  background:rgba(247,247,245,.78);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:none;
}
.brand{font-size:1.42rem}
.logo-mark{border-radius:12px}
.nav ul a,.login{color:#4E5054}
.nav ul a[aria-current="page"],.nav ul a:hover{
  background:#E9E9E6;
  color:#27282B;
}
.btn{
  border-radius:999px;
  box-shadow:none;
  min-height:48px;
  padding-inline:22px;
}
.btn-primary{
  background:#171717;
  box-shadow:none;
}
.btn-primary:hover{background:#2C2C2C}
.btn-secondary{
  background:#FFFFFF;
  border-color:#DCDCD8;
}
.hero{
  background:var(--bg);
  padding-block:clamp(40px,6vw,84px) clamp(34px,5vw,62px);
}
.hero-home .hero-grid{
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:42px;
}
.display{
  color:#202124;
  font-size:clamp(2.45rem,5.1vw,4.1rem);
  max-width:16ch;
}
.hl{
  color:#202124;
  background:none;
  rotate:0deg;
}
.lead{color:#5E6067}
.workspace-hero{
  min-height:676px;
  padding:26px;
  gap:44px;
  border:1px solid rgba(0,0,0,.05);
  border-radius:34px;
  background:#F0F0EE;
  box-shadow:0 32px 70px -54px rgba(0,0,0,.42);
}
.workspace-hero::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,0) 34%),
    radial-gradient(circle at 76% 18%,rgba(255,255,255,.72),transparent 22rem);
}
.workspace-chrome{
  grid-template-columns:auto auto 1fr auto auto auto;
  gap:10px;
}
.workspace-chrome strong,
.workspace-chrome>span:not(.back-dot),
.back-dot{
  min-height:38px;
  background:#E2E2DF;
  box-shadow:none;
  color:#585A60;
}
.workspace-chrome strong{
  color:#333438;
  font-size:.98rem;
}
.workspace-chrome>span:not(.back-dot){font-size:.94rem}
.workspace-chrome i{
  width:28px;
  height:28px;
  box-shadow:0 0 0 3px #F0F0EE;
}
.suite-dock{
  gap:clamp(14px,2vw,26px);
}
.suite-app{
  color:#4A4C51;
  gap:10px;
}
.suite-icon{
  width:76px;
  height:76px;
  border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 92%,#FFFFFF),var(--c));
  color:#FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -10px 18px rgba(0,0,0,.12),
    0 16px 28px -24px rgba(0,0,0,.55);
  transition:transform .16s ease,box-shadow .16s ease;
}
.suite-icon .ic{width:38px;height:38px;stroke-width:2.1}
.suite-app b{
  font-size:.9rem;
  color:#56575B;
  max-width:12ch;
  overflow-wrap:anywhere;
}
.suite-app small{
  color:#85868A;
  font-size:.75rem;
}
.workspace-grid{
  gap:18px;
}
.hero-home .workspace-grid{
  grid-template-rows:160px 160px;
}
.workspace-panel{
  min-height:0;
  padding:20px;
  border:1px solid rgba(0,0,0,.05);
  border-radius:20px;
  background:#FFFFFF;
  box-shadow:0 18px 42px -34px rgba(0,0,0,.44);
}
.workspace-today{
  color:#F7F7F5;
  background:linear-gradient(180deg,#202020,#111111);
}
.workspace-today li{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.04);
  border-radius:15px;
}
.panel-head h2{font-size:1.18rem}
.panel-head span{
  background:#E7E7E4;
  color:#5B5D62;
}
.workspace-today .panel-head span{
  background:#333333;
  color:#FFFFFF;
}
.mini-cal span{
  background:#F1F1EF;
  border-radius:8px;
}
.spark{height:58px}
.trust{
  background:#F7F7F5;
  border-block:0;
}
.trust-facts li{
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.05);
  border-radius:18px;
  box-shadow:0 18px 42px -36px rgba(0,0,0,.45);
}
.band-tint{
  background:#EFEFEC;
}
.groups{
  gap:18px;
}
.group{
  rotate:0deg!important;
  min-height:242px;
  border:1px solid rgba(0,0,0,.05);
  border-radius:20px;
  background:#FFFFFF;
  box-shadow:0 18px 46px -38px rgba(0,0,0,.45);
}
.group:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px -36px rgba(0,0,0,.46);
}
.group-suite{
  min-height:128px;
  background:#F1F1EF;
}
.group-suite .suite-icon{
  width:74px;
  height:74px;
  border-radius:20px;
}
.group-suite small{color:#606267}
.tile a,.combo,.basecard,.terms li,.show,.qcard,.form,.stopcard,.from li,.why li,.surprise,.module-pricebar,.pillar{
  border:1px solid rgba(0,0,0,.055);
  border-radius:20px;
  background:#FFFFFF;
  box-shadow:0 18px 46px -38px rgba(0,0,0,.45);
}
.tile a:hover,.combo:hover,.group:hover{
  border-color:rgba(0,0,0,.08);
}
.tile-free a,.surprise{
  background:#F4F4F1;
}
.sticker,.why-ic,.stop-ic,.gift-ic{
  border:0;
  border-radius:18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 92%,#FFFFFF),var(--c));
  color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 16px rgba(0,0,0,.12);
}
.badge{
  border:0;
  background:#EFEFEC;
  color:#55575B;
}
.badge-free{
  background:#E4E8D4;
  color:#59671D;
}
.module-hero{
  grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
}
.suite-dock-panel{
  padding:30px;
  border:1px solid rgba(0,0,0,.05);
  border-radius:34px;
  background:#F0F0EE;
  box-shadow:0 28px 70px -54px rgba(0,0,0,.42);
}
.pillar{
  background:#FFFFFF;
}
.pillar-free{
  border-style:solid;
}
.module-pricebar{
  background:#FFFFFF;
}
.module-checks label{
  background:#F5F5F3;
  border:1px solid rgba(0,0,0,.055);
  color:#4F5156;
}
.module-pricebar output{
  background:#171717;
  color:#FFFFFF;
}
.closing{
  background:#171717;
  box-shadow:0 24px 58px -44px rgba(0,0,0,.5);
}
.site-foot{
  background:#EFEFEC;
}
.hero-media{
  position:absolute;
  inset:0;
  margin:0;
  overflow:hidden;
  z-index:0;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.86) contrast(.94);
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(13,13,13,.76) 0%,rgba(13,13,13,.48) 35%,rgba(247,247,245,.2) 67%,rgba(247,247,245,.72) 100%),
    linear-gradient(180deg,rgba(13,13,13,.18),rgba(247,247,245,.9) 92%);
}
.hero-home{
  min-height:min(860px,calc(100vh - 20px));
  display:flex;
  align-items:center;
  background:#171717;
}
.hero-home .wrap{position:relative;z-index:1}
.hero-home .kicker,
.hero-home .lead,
.hero-home .hero-note,
.hero-home .tlink{
  color:rgba(255,255,255,.84);
}
.hero-home .kicker::before{background:#FFFFFF}
.hero-home .display,
.hero-home .hl{
  color:#FFFFFF;
  text-shadow:0 18px 44px rgba(0,0,0,.28);
}
.hero-home .btn-secondary{
  background:rgba(255,255,255,.12);
  color:#FFFFFF;
  border-color:rgba(255,255,255,.32);
}
.hero-home .btn-primary{
  background:#FFFFFF;
  color:#171717;
}
.hero-home .btn-primary:hover{
  background:#F0F0EE;
  color:#171717;
}
.hero-art{
  min-height:720px;
  padding:0;
}
.glide-photo-bg{
  position:absolute;
  inset:0;
  margin:0;
  border-radius:34px;
  overflow:hidden;
  background:#D8D8D4;
}
.glide-photo-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(.92);
  opacity:.34;
}
.glide-photo-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(240,240,238,.88),rgba(240,240,238,.45) 34%,rgba(240,240,238,.94) 100%),
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.56),rgba(255,255,255,0) 46%);
}
.hero-art .workspace-hero{
  position:absolute;
  left:clamp(10px,3vw,34px);
  right:clamp(10px,3vw,34px);
  bottom:clamp(10px,3vw,34px);
}
.group-photo{
  position:relative;
  min-height:160px;
  overflow:hidden;
  background:#F1F1EF;
}
.group-photo .pic{
  height:100%;
  min-height:160px;
  border-radius:0;
  background:#E4E4E0;
}
.group-photo .pic img{
  filter:saturate(.88) contrast(.94);
}
.group-photo .pic.loaded img{opacity:1}
.group-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.18));
}
.group-photo .suite-icon{
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:2;
  width:62px;
  height:62px;
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -8px 16px rgba(0,0,0,.12),
    0 16px 28px -20px rgba(0,0,0,.65);
}
.group-suite{display:none}
.group .pic-fb span{display:none}
@media (max-width:860px){
  .hero-home .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-media::after{
    background:
      linear-gradient(180deg,rgba(13,13,13,.78) 0%,rgba(13,13,13,.46) 38%,rgba(247,247,245,.88) 100%);
  }
  .workspace-hero{min-height:auto}
  .suite-dock{grid-template-columns:repeat(4,minmax(74px,1fr))}
  .hero-home .workspace-grid{grid-template-rows:150px 150px}
  .hero-art{min-height:720px}
}
@media (max-width:560px){
  .hero-home{min-height:auto}
  .hero-media{height:58%;bottom:auto}
  .hero-art{min-height:auto}
  .glide-photo-bg{
    position:relative;
    display:block;
    aspect-ratio:16 / 11;
    margin-bottom:16px;
  }
  .hero-art .workspace-hero{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
  }
  .workspace-hero{
    border-radius:28px;
    padding:18px;
    gap:24px;
  }
  .suite-dock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suite-icon{width:66px;height:66px;border-radius:18px}
  .hero-home .workspace-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .workspace-panel{min-height:140px}
  .workspace-today{min-height:250px}
}

/* Device polish: laptop, iPad landscape/portrait, iPhone */
@media (min-width:1200px){
  .wrap{max-width:1240px}
  .hero-home{min-height:calc(100vh - 20px)}
  .hero-home .hero-grid{grid-template-columns:minmax(360px,.76fr) minmax(680px,1.24fr)}
  .hero-art{min-height:720px}
  .hero-art .workspace-hero{max-width:760px;margin-left:auto}
  .groups{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:861px) and (max-width:1199px){
  .wrap{padding-inline:24px}
  .hero-home{min-height:820px}
  .hero-home .hero-grid{grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr);gap:30px}
  .display{font-size:clamp(2.65rem,5vw,3.7rem)}
  .hero-art{min-height:650px}
  .hero-art .workspace-hero{left:18px;right:18px;bottom:18px}
  .workspace-hero{gap:28px;padding:22px;border-radius:30px}
  .suite-dock{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px}
  .suite-icon{width:66px;height:66px;border-radius:18px}
  .suite-app b{font-size:.82rem}
  .suite-app small{font-size:.72rem}
  .hero-home .workspace-grid{grid-template-rows:138px 138px}
  .workspace-panel{padding:17px;border-radius:18px}
  .workspace-today li{padding:11px}
  .groups{grid-template-columns:repeat(3,minmax(0,1fr))}
  .group-photo,.group-photo .pic{min-height:142px}
  .module-hero{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:28px}
  .suite-dock-panel{padding:24px}
}
@media (min-width:641px) and (max-width:860px){
  .wrap{padding-inline:24px}
  .site-head{position:sticky}
  .hero-home{min-height:auto;padding-block:56px 72px}
  .hero-home .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero-copy{max-width:680px}
  .display{font-size:clamp(2.8rem,8vw,4.2rem);max-width:13ch}
  .hero-media::after{
    background:
      linear-gradient(180deg,rgba(13,13,13,.78) 0%,rgba(13,13,13,.45) 42%,rgba(247,247,245,.92) 100%);
  }
  .hero-art{min-height:auto}
  .glide-photo-bg{display:none}
  .hero-art .workspace-hero{position:relative;left:auto;right:auto;bottom:auto}
  .workspace-hero{min-height:auto;padding:22px;border-radius:30px;gap:22px}
  .suite-dock{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .suite-icon{width:60px;height:60px;border-radius:17px}
  .suite-app b{font-size:.78rem}
  .suite-app small{display:none}
  .hero-home .workspace-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:14px}
  .hero-home .workspace-today{grid-column:auto;grid-row:auto;min-height:238px}
  .hero-home .workspace-panel.acc-geld,.hero-home .workspace-panel.acc-zaal,.hero-home .workspace-panel.acc-ai{display:none}
  .trust-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .combos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module-hero{grid-template-columns:minmax(0,1fr);gap:28px}
  .price-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  html{scroll-padding-top:72px}
  body{font-size:16.5px}
  .wrap{padding-inline:16px}
  .head-row{min-height:66px}
  .brand{font-size:1.26rem}
  .logo-mark{width:34px;height:34px}
  .nav-toggle{min-height:42px;padding-inline:12px}
  .hero{padding-block:34px 48px}
  .hero-home{min-height:auto;padding-block:34px 54px}
  .hero-home .hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .hero-media{height:420px;bottom:auto}
  .hero-media::after{
    background:
      linear-gradient(180deg,rgba(13,13,13,.82) 0%,rgba(13,13,13,.52) 44%,rgba(247,247,245,.94) 100%);
  }
  .display{font-size:clamp(2.25rem,13vw,3.3rem);max-width:11ch}
  .lead{font-size:1.04rem;max-width:34ch}
  .hero-cta{gap:10px;margin-top:22px}
  .hero-cta .btn,.hero-cta .tlink{width:100%;justify-content:center}
  .hero-note{font-size:.88rem}
  .hero-art{min-height:auto}
  .glide-photo-bg{display:none}
  .hero-art .workspace-hero{position:relative;left:auto;right:auto;bottom:auto}
  .workspace-hero{padding:14px;border-radius:24px;gap:18px}
  .workspace-chrome{grid-template-columns:auto 1fr auto auto auto}
  .workspace-chrome strong{padding:7px 10px;font-size:.86rem}
  .workspace-chrome>span:not(.back-dot){display:none}
  .back-dot{width:34px;height:34px}
  .suite-dock{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
  .suite-icon{width:52px;height:52px;border-radius:15px}
  .suite-icon .ic{width:27px;height:27px}
  .suite-app{gap:6px}
  .suite-app b{font-size:.7rem;max-width:9ch}
  .suite-app small{display:none}
  .hero-home .workspace-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:10px}
  .hero-home .workspace-today{grid-column:auto;grid-row:auto;min-height:0}
  .hero-home .workspace-panel.acc-geld,.hero-home .workspace-panel.acc-zaal,.hero-home .workspace-panel.acc-ai{display:none}
  .workspace-panel{padding:14px;border-radius:16px}
  .workspace-today{min-height:218px}
  .workspace-today li{padding:10px;border-radius:13px}
  .workspace-today li span{font-size:.86rem}
  .panel-head{margin-bottom:12px}
  .panel-head h2{font-size:1rem}
  .spark{height:42px}
  .mini-cal{gap:4px}
  .mini-cal span{border-radius:7px;font-size:.65rem}
  .band{padding-block:48px}
  .sec-head{margin-bottom:24px}
  .trust-facts,.groups,.characters,.tiles,.combos,.terms,.switch-grid,.from{grid-template-columns:minmax(0,1fr)}
  .group{min-height:auto;border-radius:18px}
  .group-photo,.group-photo .pic{min-height:170px}
  .group-photo .suite-icon{width:56px;height:56px;border-radius:16px}
  .tile a,.combo,.basecard,.terms li,.show,.qcard,.form,.stopcard,.from li,.why li,.surprise,.module-pricebar,.pillar{border-radius:18px}
  .module-hero{grid-template-columns:minmax(0,1fr);gap:22px}
  .suite-dock-panel{padding:16px;border-radius:24px}
  .pillar{padding:20px;gap:16px}
  .pillar-head{gap:10px}
  .pillar-mods .more-mods{padding-left:0}
  .module-pricebar{margin-top:34px;padding:16px;gap:14px}
  .module-checks{grid-template-columns:minmax(0,1fr)}
  .module-checks label{min-height:44px}
  .price-top{grid-template-columns:minmax(0,1fr)}
  .table-wrap{margin-inline:-16px;border-radius:0;border-inline:0}
  .cmp{min-width:720px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .foot-bar{align-items:flex-start}
}
@media (max-width:390px){
  .suite-dock{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px}
  .suite-icon{width:48px;height:48px;border-radius:14px}
  .suite-app b{font-size:.66rem}
  .display{font-size:2.15rem}
  .workspace-today li{grid-template-columns:minmax(0,1fr)}
  .workspace-today em{grid-column:1;grid-row:auto;width:max-content;margin-top:4px}
}

/* Professional structure pass: clearer hierarchy, stronger contrast, stable proportions */
body{
  background:#F4F3EE!important;
  color:#191A1D;
}
.site-head{
  background:rgba(255,255,252,.94);
  border-bottom:1px solid rgba(20,20,20,.08);
  backdrop-filter:blur(18px);
}
.nav ul a,.login{
  color:#3B3D41;
}
.nav ul a[aria-current="page"],.nav ul a:hover{
  background:#E8E6DF;
  color:#111214;
}
.btn-primary{
  background:#111214;
  color:#FFFFFF;
}
.btn-secondary,.tlink{
  color:#161719;
}
.hero-home{
  min-height:820px;
  padding-block:72px;
  overflow:hidden;
  background:#111214;
}
.hero-media img{
  filter:saturate(.82) contrast(.98);
}
.hero-media::after{
  background:
    linear-gradient(90deg,rgba(9,10,12,.9) 0%,rgba(9,10,12,.76) 43%,rgba(9,10,12,.28) 68%,rgba(244,243,238,.68) 100%),
    linear-gradient(180deg,rgba(9,10,12,.08),rgba(244,243,238,.78) 100%);
}
.hero-home .hero-grid{
  grid-template-columns:minmax(380px,.92fr) minmax(560px,1.08fr);
  gap:56px;
  align-items:center;
}
.hero-copy{
  max-width:570px;
}
.hero-home .kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#FFFFFF;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.hero-home .kicker::before{
  width:22px;
  height:6px;
  border-radius:999px;
  background:#FFFFFF;
}
.hero-home .display{
  max-width:10.5ch;
  margin-top:18px;
  color:#FFFFFF;
  font-size:clamp(3.2rem,5.25vw,5.1rem);
  line-height:.97;
  text-shadow:0 18px 42px rgba(0,0,0,.26);
}
.hero-home .lead{
  max-width:36rem;
  margin-top:22px;
  color:rgba(255,255,255,.9);
  font-size:1.14rem;
  line-height:1.72;
}
.hero-cta{
  margin-top:30px;
  gap:16px;
}
.hero-home .btn-primary{
  background:#FFFFFF;
  color:#111214;
  min-width:220px;
}
.hero-home .btn-primary:hover{
  background:#EFEDE7;
}
.hero-home .tlink{
  color:#FFFFFF;
  text-underline-offset:5px;
}
.hero-note{
  display:inline-block;
  max-width:34rem;
  margin-top:22px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.86)!important;
}
.hero-art{
  display:flex;
  align-items:center;
  min-height:auto;
  padding:0;
}
.glide-photo-bg{
  display:none!important;
}
.hero-art .workspace-hero{
  position:relative!important;
  inset:auto!important;
  width:100%;
  max-width:690px;
  margin-left:auto;
}
.workspace-hero{
  min-height:auto;
  gap:28px;
  overflow:hidden;
  padding:24px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:34px;
  background:#F4F4F1;
  box-shadow:0 44px 92px -58px rgba(0,0,0,.72);
}
.workspace-hero::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,0) 32%),
    radial-gradient(circle at 84% 10%,rgba(255,255,255,.92),transparent 18rem);
}
.workspace-chrome{
  grid-template-columns:auto auto minmax(120px,1fr) auto auto auto;
}
.workspace-chrome strong,
.workspace-chrome>span:not(.back-dot),
.back-dot{
  background:#E2E1DD;
  color:#3E4044;
}
.suite-dock{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px 14px;
}
.suite-icon{
  width:64px;
  height:64px;
  border-radius:18px;
}
.suite-icon .ic{
  width:32px;
  height:32px;
}
.suite-app{
  min-width:0;
  gap:8px;
}
.suite-app b{
  color:#34363A;
  font-size:.86rem;
  line-height:1.1;
  max-width:9ch;
}
.suite-app small{
  color:#686B70;
  font-size:.72rem;
}
.hero-home .workspace-grid{
  grid-template-columns:1.08fr .92fr;
  grid-template-rows:150px 150px;
  gap:16px;
}
.workspace-panel{
  border-color:rgba(0,0,0,.07);
  border-radius:22px;
  background:#FFFFFF;
}
.workspace-today{
  background:linear-gradient(180deg,#1F2023,#111214);
}
.workspace-today li{
  background:#2A2B2E;
  border-color:rgba(255,255,255,.06);
}
.hero-home .workspace-today li:nth-child(3){
  display:none;
}
.workspace-today li b,
.workspace-today li span{
  color:#FFFFFF;
}
.trust{
  padding-block:22px;
  background:#111214;
}
.trust-facts{
  gap:0;
}
.trust-facts li{
  border:0;
  border-left:1px solid rgba(255,255,255,.14);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.trust-facts li:first-child{
  border-left:0;
}
.trust-facts .ic{
  color:#FFFFFF;
}
.trust-facts b{
  color:#FFFFFF;
}
.trust-facts span{
  color:rgba(255,255,255,.72);
}
.band{
  padding-block:clamp(72px,8vw,110px);
}
.band-tint{
  background:#EDEBE4;
}
.sec-head{
  gap:12px;
  margin-bottom:34px;
}
.sec-head.center{
  max-width:800px;
  margin-inline:auto;
  text-align:center;
  align-items:center;
}
.sec-head h2{
  max-width:13ch;
  font-size:clamp(2rem,3.2vw,3.3rem);
  line-height:1.04;
}
.sec-head>p:not(.kicker){
  max-width:58ch;
  color:#4F5257;
  font-size:1.08rem;
  line-height:1.65;
}
.groups{
  gap:22px;
}
.group{
  overflow:hidden;
  border-color:rgba(0,0,0,.08);
  border-radius:24px;
  box-shadow:0 22px 58px -46px rgba(0,0,0,.48);
}
.group-photo,
.group-photo .pic{
  min-height:190px;
}
.group-body{
  padding:22px;
}
.group-body h3{
  font-size:1.36rem;
}
.tile a,.combo,.basecard,.terms li,.show,.qcard,.form,.stopcard,.from li,.why li,.surprise,.module-pricebar,.pillar{
  border-color:rgba(0,0,0,.08);
  box-shadow:0 18px 52px -44px rgba(0,0,0,.42);
}
.tiles{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.tile a{
  min-height:240px;
}
.module-hero{
  grid-template-columns:minmax(340px,.86fr) minmax(560px,1.14fr);
  gap:42px;
  align-items:center;
}
.suite-dock-panel{
  overflow:hidden;
  border-color:rgba(0,0,0,.08);
  background:#F4F4F1;
}
.module-pricebar{
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 20px 54px -40px rgba(0,0,0,.45);
}
.band-board{
  background:#F4F3EE;
}
.board-grid{
  display:grid;
  grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);
  gap:34px;
  align-items:center;
}
.board-copy{
  max-width:520px;
}
.board-copy h2{
  max-width:11ch;
  margin-top:10px;
  font-size:clamp(2.2rem,3.7vw,3.75rem);
  line-height:1.02;
}
.board-copy p:not(.kicker){
  margin-top:18px;
  color:#4F5257;
  font-size:1.12rem;
  line-height:1.68;
}
.board-copy .tlink{
  margin-top:22px;
}
.pain-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
}
.pain-list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  
  padding:22px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  background:#FFFFFF;
  box-shadow:0 18px 52px -46px rgba(0,0,0,.48);
}
.pain-list .ic{
  width:34px;
  height:34px;
  color:#111214;
}
.pain-list span{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#55585E;
  line-height:1.48;
}
.pain-list b{
  color:#17181B;
  font-size:1.08rem;
}
.band-steps{
  background:#17181B;
  color:#FFFFFF;
}
.band-steps .kicker,
.band-steps .sec-head>p:not(.kicker){
  color:rgba(255,255,255,.76);
}
.band-steps .sec-head h2{
  color:#FFFFFF;
}
.switch-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:none;
}
.switch-steps li{
  min-height:245px;
  padding:24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(255,255,255,.06);
}
.switch-steps span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:22px;
  border-radius:14px;
  background:#FFFFFF;
  color:#111214;
  font-weight:900;
}
.switch-steps h3{
  color:#FFFFFF;
  font-size:1.34rem;
}
.switch-steps p{
  margin-top:10px;
  color:rgba(255,255,255,.76);
  line-height:1.58;
}
.band-steps .btn-secondary{
  border-color:rgba(255,255,255,.18);
  background:#FFFFFF;
  color:#111214;
}

@media (min-width:1200px){
  .wrap{max-width:1280px}
  .hero-home{min-height:820px}
  .hero-home .hero-grid{
    grid-template-columns:minmax(420px,.95fr) minmax(620px,1.05fr);
  }
  .hero-art{min-height:auto}
}
@media (min-width:861px) and (max-width:1199px){
  .hero-home{
    min-height:780px;
    padding-block:58px;
  }
  .hero-home .hero-grid{
    grid-template-columns:minmax(310px,.86fr) minmax(520px,1.14fr);
    gap:32px;
  }
  .hero-home .display{
    font-size:clamp(2.8rem,5vw,3.85rem);
  }
  .hero-home .lead{
    font-size:1.04rem;
  }
  .workspace-hero{
    padding:20px;
    gap:22px;
    border-radius:30px;
  }
  .suite-dock{gap:14px 10px}
  .suite-icon{width:56px;height:56px;border-radius:16px}
  .suite-icon .ic{width:28px;height:28px}
  .hero-home .workspace-grid{
    grid-template-rows:132px 132px;
    gap:14px;
  }
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .board-grid{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:26px;
  }
  .pain-list li{
    
    padding:20px;
  }
  .module-hero{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:30px;
  }
}
@media (min-width:641px) and (max-width:860px){
  .hero-home{
    padding-block:48px 64px;
  }
  .hero-home .hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:30px;
  }
  .hero-copy{
    max-width:680px;
  }
  .hero-home .display{
    max-width:11ch;
    font-size:clamp(3.1rem,8vw,4.45rem);
  }
  .hero-home .lead{
    max-width:46rem;
    font-size:1.09rem;
  }
  .hero-art .workspace-hero{
    width:100%;
    max-width:640px;
    margin-inline:auto;
  }
  .workspace-hero{
    padding:22px;
    border-radius:30px;
  }
  .suite-dock{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px 12px;
  }
  .suite-icon{width:60px;height:60px}
  .hero-home .workspace-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .hero-home .workspace-panel.acc-geld,
  .hero-home .workspace-panel.acc-zaal,
  .hero-home .workspace-panel.acc-ai{
    display:none;
  }
  .trust-facts li{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .trust-facts li:nth-child(-n+2){
    border-top:0;
  }
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-grid{
    grid-template-columns:minmax(0,1fr);
    gap:26px;
  }
  .board-copy{
    max-width:680px;
  }
  .pain-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .switch-steps{
    grid-template-columns:minmax(0,1fr);
  }
  .switch-steps li{
    min-height:auto;
  }
  .module-hero{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .site-head{
    background:rgba(255,255,252,.98);
  }
  .hero-home{
    padding-block:28px 44px;
  }
  .hero-media{
    height:500px;
  }
  .hero-media::after{
    background:
      linear-gradient(180deg,rgba(9,10,12,.86) 0%,rgba(9,10,12,.56) 52%,rgba(244,243,238,.98) 100%);
  }
  .hero-home .hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:22px;
  }
  .hero-copy,
  .hero-art{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .hero-home .kicker{
    width:auto;
    justify-content:flex-start;
    font-size:.86rem;
  }
  .hero-home .display{
    max-width:10.5ch;
    margin-top:14px;
    font-size:clamp(2.55rem,12.4vw,3.45rem);
  }
  .hero-home .lead{
    font-size:1.02rem;
    line-height:1.62;
  }
  .hero-note{
    width:100%;
    font-size:.9rem;
  }
  .hero-art .workspace-hero{
    width:100%;
    max-width:none;
  }
  .workspace-hero{
    padding:14px;
    border-radius:24px;
    box-shadow:0 22px 58px -40px rgba(0,0,0,.56);
  }
  .suite-dock{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px 8px;
  }
  .suite-icon{
    width:50px;
    height:50px;
    border-radius:15px;
  }
  .suite-icon .ic{
    width:26px;
    height:26px;
  }
  .suite-app b{
    font-size:.7rem;
    max-width:8ch;
  }
  .workspace-today{
    min-height:216px;
  }
  .trust{
    padding-block:0;
  }
  .trust-facts{
    gap:0;
  }
  .trust-facts li{
    padding-block:18px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .trust-facts li:first-child{
    border-top:0;
  }
  .band{
    padding-block:54px;
  }
  .sec-head.center{
    text-align:left;
    align-items:flex-start;
  }
  .sec-head h2{
    max-width:12ch;
    font-size:clamp(2rem,10vw,2.55rem);
  }
  .group-photo,
  .group-photo .pic{
    min-height:185px;
  }
  .tiles{
    grid-template-columns:minmax(0,1fr);
  }
  .board-grid,
  .pain-list,
  .switch-steps{
    grid-template-columns:minmax(0,1fr);
  }
  .board-copy h2{
    max-width:12ch;
    font-size:clamp(2rem,10vw,2.55rem);
  }
  .board-copy p:not(.kicker){
    font-size:1rem;
  }
  .pain-list li{
    min-height:auto;
    padding:18px;
    border-radius:20px;
  }
  .switch-steps li{
    min-height:auto;
    padding:20px;
    border-radius:20px;
  }
  .tile a{
    min-height:auto;
  }
}

/* Smartphone hardening: a real mobile composition, not a squeezed desktop */
@media (max-width:640px){
  .hero-home{
    display:block!important;
    min-height:auto!important;
    padding-block:26px 38px!important;
    overflow:hidden;
  }
  .hero-home .wrap.hero-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
    width:100%;
    max-width:none;
    padding-inline:16px;
  }
  .hero-copy,
  .hero-art{
    grid-column:1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .hero-copy{
    padding-top:0;
  }
  .hero-home .kicker{
    width:auto!important;
    max-width:100%;
    padding:8px 12px;
    font-size:.82rem;
    line-height:1.35;
  }
  .hero-home .display{
    max-width:9.5ch;
    margin-top:16px;
    font-size:clamp(2.12rem,9.6vw,2.72rem)!important;
    line-height:1.02;
  }
  .hero-home .lead{
    max-width:100%;
    margin-top:18px;
    font-size:.96rem;
    line-height:1.52;
  }
  .hero-cta{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    margin-top:24px;
  }
  .hero-cta .btn,
  .hero-cta .tlink{
    width:100%;
    min-width:0;
  }
  .hero-home .hero-cta .tlink{
    min-height:50px;
    padding:12px 18px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(17,18,20,.66);
    color:#FFFFFF;
    text-decoration:none;
    backdrop-filter:blur(12px);
  }
  .hero-note{
    width:100%;
    margin-top:16px;
  }
  .hero-media{
    height:455px!important;
  }
  .hero-art{
    display:block!important;
    min-height:0!important;
  }
  .hero-art .workspace-hero{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .workspace-hero{
    display:flex!important;
    flex-direction:column;
    gap:14px!important;
    min-height:0!important;
    padding:12px!important;
    border-radius:24px!important;
  }
  .workspace-chrome{
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:8px!important;
  }
  .workspace-chrome strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .workspace-chrome>span:not(.back-dot){
    display:none!important;
  }
  .workspace-chrome i{
    display:none!important;
  }
  .suite-dock{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px 8px!important;
  }
  .suite-icon{
    width:50px!important;
    height:50px!important;
    border-radius:15px!important;
  }
  .suite-icon .ic{
    width:26px!important;
    height:26px!important;
  }
  .suite-app{
    gap:6px!important;
  }
  .suite-app b{
    max-width:100%;
    font-size:.68rem!important;
    line-height:1.1;
    overflow-wrap:normal;
  }
  .suite-app small{
    display:none!important;
  }
  .hero-home .workspace-grid,
  .workspace-grid{
    display:none!important;
  }
  .hero-home .workspace-panel.acc-geld,
  .hero-home .workspace-panel.acc-zaal,
  .hero-home .workspace-panel.acc-ai{
    display:none!important;
  }
  .hero-home .workspace-today{
    grid-column:1!important;
    grid-row:auto!important;
    min-height:0!important;
  }
  .workspace-panel{
    padding:14px!important;
    border-radius:18px!important;
  }
  .workspace-today ul{
    display:grid;
    gap:10px;
  }
  .workspace-today li{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px 10px!important;
    padding:12px!important;
  }
  .workspace-today li b,
  .workspace-today li span{
    font-size:.92rem!important;
  }
}

@media (max-width:380px){
  .hero-home .display{
    font-size:2.02rem!important;
  }
  .hero-home .lead{
    font-size:.92rem;
  }
  .suite-icon{
    width:46px!important;
    height:46px!important;
  }
  .suite-app b{
    font-size:.64rem!important;
  }
}

/* Premium template pass: bento rhythm, refined surfaces, calmer hierarchy */
:root{
  --premium-bg:#F6F4EF;
  --premium-panel:#FFFEFA;
  --premium-ink:#15161A;
  --premium-muted:#565A62;
  --premium-line:rgba(20,22,26,.1);
  --premium-soft:#ECE9DF;
  --premium-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 34px 84px -64px rgba(16,18,24,.58);
}
body{
  background:
    linear-gradient(180deg,#FBFAF6 0,#F6F4EF 36rem,#F2EFE7 100%)!important;
}
.wrap{
  max-width:1200px;
}
.site-head{
  top:12px;
  width:min(1240px,calc(100% - 32px));
  margin-inline:auto;
  border:1px solid rgba(20,22,26,.09);
  border-radius:28px;
  box-shadow:0 22px 70px -56px rgba(16,18,24,.58);
}
.head-row{
  min-height:62px;
  padding-inline:18px;
}
.logo-mark{
  width:38px;
  height:38px;
}
.brand{
  letter-spacing:-.01em;
}
.nav ul{
  padding:4px;
  border:1px solid rgba(20,22,26,.07);
  border-radius:999px;
  background:#F1EFE8;
}
.nav ul a{
  min-height:36px;
  padding:8px 14px;
  border-radius:999px;
}
.nav-end .btn{
  min-height:44px;
}
.hero-home{
  margin-top:-77px;
  padding-top:150px;
  border-bottom:1px solid rgba(20,22,26,.08);
}
.hero-home .display{
  letter-spacing:-.02em;
}
.hero-home .lead{
  max-width:34rem;
}
.hero-note{
  border-radius:18px;
}
.workspace-hero{
  border-radius:36px;
  border-color:rgba(255,255,255,.86);
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.38)),
    #F1F0EB;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 56px 110px -70px rgba(0,0,0,.78);
}
.workspace-panel{
  box-shadow:none;
}
.suite-icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -8px 15px rgba(0,0,0,.12),
    0 16px 32px -24px color-mix(in srgb,var(--c) 70%,#000);
}
.trust{
  position:relative;
  overflow:hidden;
}
.trust::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 80px);
  pointer-events:none;
}
.trust .wrap{
  position:relative;
}
.band{
  padding-block:clamp(78px,9vw,124px);
}
.band-board{
  background:
    linear-gradient(180deg,#F6F4EF,#EFECE4);
}
.board-grid{
  padding:18px;
  border:1px solid var(--premium-line);
  border-radius:34px;
  background:rgba(255,254,250,.54);
  box-shadow:var(--premium-shadow);
}
.board-copy{
  padding:clamp(16px,2vw,28px);
}
.pain-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  
}
.pain-list li{
  position:relative;
  overflow:hidden;
  min-height:auto;
  border-radius:26px;
  background:
    linear-gradient(180deg,#FFFFFF,#FAF9F4);
  box-shadow:none;
}
.pain-list li:first-child{
  grid-column:span 2;
  
  padding:30px;
}
.pain-list li:nth-child(4){
  grid-column:span 2;
}
.pain-list li:first-child .ic{
  width:44px;
  height:44px;
}
.pain-list li:first-child b{
  font-size:1.42rem;
  line-height:1.16;
}
.pain-list li:first-child span{
  font-size:1.08rem;
}
.groups{
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.group{
  grid-column:span 4;
  border-radius:28px;
  box-shadow:var(--premium-shadow);
}
.group:nth-child(1),
.group:nth-child(6){
  grid-column:span 5;
}
.group:nth-child(2),
.group:nth-child(5){
  grid-column:span 3;
}
.group-photo,
.group-photo .pic{
  min-height:210px;
}
.group-body{
  min-height:190px;
}
.tiles{
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(218px,auto);
}
.tile{
  grid-column:span 3;
}
.tile:nth-child(1),
.tile:nth-child(2){
  grid-column:span 6;
}
.tile:nth-child(1) a,
.tile:nth-child(2) a{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-content:end;
  gap:16px 18px;
}
.tile:nth-child(1) a .sticker,
.tile:nth-child(2) a .sticker{
  grid-row:span 3;
  width:76px;
  height:76px;
}
.tile a{
  position:relative;
  overflow:hidden;
  min-height:100%;
  border-radius:28px;
  background:
    linear-gradient(180deg,#FFFFFF,#FAF9F4);
  box-shadow:none;
}
.tile a::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 12%,transparent),transparent 48%);
  pointer-events:none;
}
.tile a>*{
  position:relative;
}
.surprise{
  border-radius:34px;
  background:
    linear-gradient(135deg,#FFFFFF 0%,#F4F2EA 100%);
  box-shadow:var(--premium-shadow);
}
.show{
  border-radius:34px;
  background:#FFFEFA;
}
.combos{
  align-items:stretch;
}
.combo{
  border-radius:28px;
  background:#FFFEFA;
}
.band-steps{
  background:
    linear-gradient(180deg,#18191D,#111214);
}
.switch-steps{
  gap:14px;
}
.switch-steps li{
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.045));
  box-shadow:none;
}
.closing{
  border-radius:34px;
}
.site-foot{
  background:#EAE6DC;
}

@media (min-width:861px) and (max-width:1199px){
  .site-head{
    width:calc(100% - 24px);
  }
  .nav ul a{
    padding-inline:10px;
  }
  .pain-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pain-list li:first-child{
    grid-column:span 2;
  }
  .groups{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .group,
  .group:nth-child(1),
  .group:nth-child(2),
  .group:nth-child(5),
  .group:nth-child(6){
    grid-column:auto;
  }
  .tiles{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
  .tile,
  .tile:nth-child(1),
  .tile:nth-child(2){
    grid-column:span 3;
  }
}
@media (max-width:860px){
  .site-head{
    top:0;
    width:100%;
    border-radius:0;
    border-inline:0;
  }
  .hero-home{
    margin-top:0;
    padding-top:48px;
  }
  .nav ul{
    border-radius:18px;
    background:transparent;
    border:0;
    padding:0;
  }
  .board-grid{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .pain-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pain-list li:first-child{
    grid-column:auto;
    padding:22px;
  }
  .pain-list li:nth-child(4){
    grid-column:auto;
  }
  .groups,
  .tiles{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .group,
  .group:nth-child(1),
  .group:nth-child(2),
  .group:nth-child(5),
  .group:nth-child(6),
  .tile,
  .tile:nth-child(1),
  .tile:nth-child(2){
    grid-column:auto;
  }
  .tile:nth-child(1) a,
  .tile:nth-child(2) a{
    display:flex;
  }
}
@media (max-width:640px){
  .band{
    padding-block:58px;
  }
  .hero-home{
    padding-top:26px!important;
  }
  .pain-list,
  .groups,
  .tiles{
    grid-template-columns:minmax(0,1fr);
  }
  .pain-list li,
  .pain-list li:first-child{
    padding:18px;
    border-radius:22px;
  }
  .pain-list li:first-child b{
    font-size:1.08rem;
  }
  .pain-list li:first-child span{
    font-size:1rem;
  }
  .group,
  .tile a,
  .combo,
  .show,
  .surprise,
  .switch-steps li{
    border-radius:22px;
  }
  .group-photo,
  .group-photo .pic{
    min-height:180px;
  }
  .group-body{
    min-height:auto;
  }
}

/* "Reservaties" is elf tekens en botste op max-width:9ch, dus brak het woord af
   als "Reservatie" met een losse s eronder. Een afgebroken productnaam in de
   allereerste schermafbeelding van de site leest als een fout, want dat is het
   ook. Enkel boven de 640px: op een telefoon paste het label al. */
@media (min-width:641px){
  .suite-app b{max-width:13ch;overflow-wrap:normal;hyphens:none}
}