/* ============================================================
   SNEL OP DE KAART — MODERN WEB SOLUTIONS EDITIE
   Design-system 1:1 uit de handoff: premium neutrale basis + één
   verfijnde indigo-violet accent. Diepte uit tonale lagen, zachte
   elevatie en ingehouden gradient-glows — nooit uit veel kleuren.
   Light default (:root), dark onder [data-theme="dark"].
   Space Grotesk (display) · Hanken Grotesk (body) · Instrument Serif (italic).
   Alles self-hosted, geen externe requests.
   ============================================================ */

/* ---------- fonts (self-hosted) — Bricolage Grotesque + Source Sans 3 + DM Mono ---------- */
@font-face { font-family:'Bricolage Grotesque'; src:url('../fonts/Bricolage-latin.woff2') format('woff2'); font-weight:400 800; font-style:normal; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('../fonts/SourceSans3-latin.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('../fonts/DMMono-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('../fonts/DMMono-500-latin.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  color-scheme: light;

  --bg:#FBF8F1; --bg-tint:#F1EBDD; --surface:#FFFFFF; --surface-2:#F4EEE2; --surface-3:#EAE1CE;
  --text:#1C2B2E; --text-2:#35474A; --text-3:#55676B; --text-on-accent:#FFFFFF;
  --border:rgba(28,43,46,0.12); --border-2:rgba(28,43,46,0.20); --border-contrast:rgba(28,43,46,0.32);

  --accent:#B8324F; --accent-hover:#a52c47; --accent-press:#93273E; --accent-ink:#12525B;
  --accent-soft:rgba(18,82,91,0.10); --accent-ring:rgba(184,50,79,0.5);
  --accent-2:#12525B; --accent-2-ink:#12525B; --accent-2-soft:rgba(18,82,91,0.10);

  --grad-a:#B8324F; --grad-b:#93273E; --grad-c:#F4C84B;
  --gradient:linear-gradient(115deg, var(--grad-a), var(--grad-b));
  --gradient-rich:linear-gradient(115deg, #93273E, #B8324F 48%, #C0506A);
  --glow:radial-gradient(60% 80% at 50% -10%, rgba(244,200,75,0.22), transparent 70%);

  --success:#0f6b5f; --success-soft:rgba(15,107,95,0.14);
  --warning:#7A6410; --warning-soft:rgba(244,200,75,0.24);
  --danger:#C23A3A;  --danger-soft:rgba(194,58,58,0.14);

  --shadow-sm:0 1px 2px rgba(28,43,46,0.08), 0 1px 1px rgba(28,43,46,0.05);
  --shadow:0 6px 20px -6px rgba(28,43,46,0.14), 0 2px 6px -2px rgba(28,43,46,0.09);
  --shadow-lg:0 24px 60px -16px rgba(28,43,46,0.18), 0 8px 20px -8px rgba(28,43,46,0.12);
  --shadow-accent:0 12px 32px -10px rgba(184,50,79,0.30);

  --glass-bg:rgba(255,255,255,0.72); --glass-brdr:rgba(28,43,46,0.10); --glass-blur:blur(16px) saturate(150%);

  --gradient-border:linear-gradient(140deg, var(--grad-a), var(--grad-b));
  --dots:radial-gradient(currentColor 0.7px, transparent 0.7px); --dots-size:20px 20px;

  /* type */
  --font-display:'Bricolage Grotesque','Source Sans 3',system-ui,sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Bricolage Grotesque','Source Sans 3',sans-serif;
  --font-mono:'DM Mono',ui-monospace,'Cascadia Mono',monospace;
  --tracking-tight:-0.03em; --tracking-snug:-0.015em; --tracking-label:0.14em;

  /* spacing / radii */
  --space-5:24px; --space-7:48px; --space-9:96px;
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px;
  --container:1200px; --container-narrow:820px;

  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --ease-soft:cubic-bezier(0.4,0,0.2,1);
  --dur-fast:140ms; --dur:260ms; --dur-slow:560ms;

  /* ---- alias-laag voor de interactieve componenten (atelier-namen → MWS) ---- */
  --paper:var(--bg); --paper-deep:var(--surface-2); --paper-card:var(--surface);
  --ink:var(--text); --ink-soft:var(--text-2);
  --line:var(--border); --line-strong:var(--border-2);
  --plum:var(--accent); --plum-deep:var(--accent-press); --rose:var(--grad-c);
  --sage:var(--success); --sage-deep:var(--success); --amber:var(--warning);
  --serif:var(--font-serif); --sans:var(--font-body); --mono:var(--font-mono);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --dist:22px; --stagger-step:64ms; --wrap:var(--container);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0C3A41; --bg-tint:#0A3239; --surface:#124B54; --surface-2:#16565F; --surface-3:#1D626C;
  --text:#FBF8F1; --text-2:#C6D5D2; --text-3:#ABC4C1;
  --border:rgba(251,248,241,0.14); --border-2:rgba(251,248,241,0.22); --border-contrast:rgba(251,248,241,0.34);
  --accent:#B8324F; --accent-hover:#C43C58; --accent-press:#93273E; --accent-ink:#F4C84B;
  --accent-soft:rgba(244,200,75,0.14); --accent-ring:rgba(184,50,79,0.55);
  --accent-2:#7FC8C2; --accent-2-ink:#7FC8C2; --accent-2-soft:rgba(127,200,194,0.16);
  --grad-a:#B8324F; --grad-b:#93273E; --grad-c:#F4C84B;
  --gradient-rich:linear-gradient(115deg, #F4C84B, #E8798F);
  --glow:radial-gradient(60% 80% at 50% -10%, rgba(244,200,75,0.16), transparent 70%);
  --success:#8FD4B8; --success-soft:rgba(143,212,184,0.18);
  --warning:#F4C84B; --warning-soft:rgba(244,200,75,0.18);
  --danger:#E86B6B; --danger-soft:rgba(232,107,107,0.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.45);
  --shadow:0 8px 24px -8px rgba(0,0,0,0.5), 0 2px 8px -2px rgba(0,0,0,0.4);
  --shadow-lg:0 32px 70px -20px rgba(0,0,0,0.65), 0 10px 24px -10px rgba(0,0,0,0.5);
  --shadow-accent:0 16px 40px -12px rgba(184,50,79,0.42);
  --glass-bg:rgba(12,58,65,0.62); --glass-brdr:rgba(251,248,241,0.12); --glass-blur:blur(16px) saturate(140%);
  /* crimson haalt op donker petrol geen leesbaar contrast; hover-linkkleur wordt dan licht */
  --link-hover:var(--text);
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--accent-ink); text-decoration:none;} a:hover{color:var(--link-hover, var(--accent));}
::selection{background:var(--accent); color:var(--text-on-accent);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
[data-theme="dark"] :focus-visible{outline-color:var(--accent-ink);}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:var(--tracking-tight);}

.wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}
.section{padding:var(--space-9) 0;}
.section--tight{padding:56px 0;}
.section--tint{background:var(--bg-tint);}
.skip{position:absolute; left:-9999px; top:0; background:var(--text); color:var(--bg); padding:10px 18px; z-index:200; border-radius:0 0 8px 0;}
.skip:focus{left:0; top:0;}

/* ---------- type-hulpen ---------- */
.eyebrow{font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-ink); margin:0 0 14px; display:block;}
.title{font-family:var(--font-display); font-weight:600; font-size:clamp(30px,3.6vw,46px); line-height:1.06; letter-spacing:var(--tracking-tight); margin:0 0 16px; max-width:760px; text-wrap:balance;}
.lead{font-size:19px; line-height:1.55; color:var(--text-2); max-width:56ch; margin:0;}
.serif-it{font-family:var(--font-serif); letter-spacing:0;}
.gradient-text{background:var(--gradient-rich); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sdk-gradient-pan 6s linear infinite;}
.gradient-text.serif{font-family:var(--font-serif); font-weight:400;}
@media (prefers-reduced-motion:reduce){ .gradient-text{animation:none;} }

.mesh{position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(40% 50% at 15% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
             radial-gradient(40% 50% at 85% 10%, color-mix(in oklab, var(--grad-b) 18%, transparent), transparent 70%);}

/* ============================================================
   KNOPPEN
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:15px; line-height:1;
  padding:13px 22px; border-radius:var(--radius-pill); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn svg{width:18px; height:18px;}
.btn--gradient{background:var(--gradient); background-size:180% 100%; color:var(--text-on-accent); box-shadow:var(--shadow-accent);}
.btn--gradient:hover{color:var(--text-on-accent); transform:translateY(-2px); background-position:100% 0; box-shadow:var(--shadow-accent);}
.btn--primary{background:var(--accent); color:var(--text-on-accent);}
.btn--primary:hover{background:var(--accent-hover); color:var(--text-on-accent); transform:translateY(-2px);}
.btn--secondary{background:var(--surface); color:var(--text); border-color:var(--border-2); box-shadow:var(--shadow-sm);}
.btn--secondary:hover{color:var(--text); border-color:var(--border-contrast); transform:translateY(-2px);}
.btn--ghost{background:transparent; color:var(--text); border-color:transparent;}
.btn--ghost:hover{color:var(--accent-ink); background:var(--accent-soft);}
.btn--lg{padding:16px 28px; font-size:16px;}
.btn--sm{padding:10px 16px; font-size:14px;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none;}

.textlink{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14.5px; color:var(--accent-ink);}
.textlink svg{width:15px; height:15px; transition:transform var(--dur-fast) var(--ease);}
.textlink:hover svg{transform:translateX(3px);}

/* ============================================================
   NAVBAR — zwevend glas-eiland (licht glas in beide thema's)
   ============================================================ */
.site-header{position:sticky; top:0; z-index:60; padding:16px 20px; background:transparent;}
.nav-island{
  position:relative; max-width:1140px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:11px 12px 11px 20px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,253,247,0.55);
  background:
    linear-gradient(100deg, rgba(194,65,12,0.20), rgba(63,107,79,0.10) 40%, rgba(255,253,247,0) 62%),
    rgba(255,253,247,0.75);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 0 0 1px rgba(194,65,12,0.20),
    0 12px 34px -12px rgba(194,65,12,0.40),
    0 26px 60px -30px rgba(34,32,26,0.35);
  transition:padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.scrolled .nav-island{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 0 0 1px rgba(194,65,12,0.26),
    0 10px 28px -12px rgba(194,65,12,0.45),
    0 20px 48px -26px rgba(34,32,26,0.4);
}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:var(--tracking-snug); white-space:nowrap; flex:none;}
.brand:hover{color:var(--text);}
.nav-island .brand{color:#22201A;}
.brand-mark{width:30px; height:30px; border-radius:9px; background:var(--gradient); display:grid; place-items:center; color:var(--text-on-accent); flex:none; box-shadow:0 4px 14px -3px rgba(194,65,12,0.55);}
.brand-mark svg{width:17px; height:17px;}
.site-nav{display:flex; align-items:center; gap:4px;}
.site-nav a{padding:9px 15px; border-radius:var(--radius-pill); font-size:15px; font-weight:500; color:#5C574C; transition:color var(--dur-fast), background var(--dur-fast);}
.site-nav a:hover, .site-nav a[aria-current="page"]{color:#22201A; background:rgba(194,65,12,0.11);}
.header-tools{display:flex; align-items:center; gap:12px;}

/* zon/maan-pil-schakelaar */
.theme-switch{position:relative; width:62px; height:30px; border-radius:999px; border:1px solid rgba(34,32,26,0.16); background:#2a251d; cursor:pointer; padding:0 8px; flex:none; display:inline-flex; align-items:center; justify-content:space-between; box-shadow:inset 0 1px 3px rgba(0,0,0,0.45);}
.theme-switch svg{width:14px; height:14px; position:relative; z-index:2; transition:color var(--dur-fast);}
.theme-switch .ts-sun{color:#f0b23c;}
.theme-switch .ts-moon{color:#9a9080;}
[data-theme="dark"] .theme-switch .ts-sun{color:#8a7638;}
[data-theme="dark"] .theme-switch .ts-moon{color:#efe8d6;}
.theme-switch .ts-thumb{position:absolute; z-index:1; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:linear-gradient(140deg,#fffdf7,#f0e7d6); box-shadow:0 2px 6px rgba(0,0,0,0.4); transition:transform var(--dur) var(--spring);}
[data-theme="dark"] .theme-switch .ts-thumb{transform:translateX(32px);}

.nav-toggle{display:none; width:40px; height:40px; border-radius:var(--radius-pill); border:1px solid rgba(34,32,26,0.16); background:rgba(255,253,247,0.6); cursor:pointer; padding:0;}
.nav-toggle span{display:block; width:16px; height:1.6px; background:#22201A; margin:3.5px auto; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast);}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:clip;}
.hero-glow{position:absolute; inset:-10% -20% auto; height:440px; background-image:var(--glow); pointer-events:none; z-index:0;}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; padding:var(--space-9) 0;}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:22px;}
.hero-pill{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--radius-pill); padding:7px 15px;}
.hero-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.hero h1{font-size:clamp(40px,5.2vw,72px); line-height:1.03; letter-spacing:var(--tracking-tight); color:var(--text); margin:0;}
.hero .lead{max-width:480px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;}
.hero-trust{display:flex; align-items:center; gap:16px; margin-top:10px; color:var(--text-3); font-size:13.5px;}
.hero-trust .stars{color:var(--warning); letter-spacing:2px;}

/* mock browservenster met zwevende glass-kaart */
.hero-mock{position:relative;}
.mock-win{border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-lg); overflow:hidden; background:var(--surface);}
.mock-bar{height:42px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; padding:0 14px;}
.mock-bar i{width:10px; height:10px; border-radius:99px; background:var(--surface-3); display:block;}
.mock-url{margin-left:12px; flex:1; max-width:230px; height:22px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); font-size:11px; color:var(--text-3); display:grid; place-items:center; font-family:var(--font-mono);}
.mock-screen{position:relative; aspect-ratio:16/10; background:var(--surface-2);}
.mock-screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transition:opacity .6s var(--ease);}
.mock-screen img.on{opacity:1;}
.mock-float{position:absolute; bottom:-22px; left:-24px; background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brdr); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:12px 14px; display:flex; align-items:center; gap:10px; animation:sdk-float 4s ease-in-out infinite;}
.mock-float .mf-ico{width:34px; height:34px; border-radius:10px; background:var(--gradient); display:grid; place-items:center; color:var(--text-on-accent); font-size:16px; flex:none;}
.mock-float .mf-t{font-size:13px; font-weight:600; color:var(--text);}
.mock-float .mf-s{font-size:11px; color:var(--text-3);}
@media (prefers-reduced-motion:reduce){ .mock-float{animation:none;} .mock-screen img{transition:none;} }

/* ============================================================
   CARDS · BADGES · TAGS
   ============================================================ */
.card{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:26px; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.card--feature{border-color:transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--gradient-border) border-box;}
.card .c-eyebrow{font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-ink); display:block; margin-bottom:8px;}
.card h3{font-size:20px; letter-spacing:var(--tracking-snug); margin:0 0 8px;}
.card p{color:var(--text-2); margin:0; font-size:15.5px; line-height:1.55;}
.card .c-ico{width:44px; height:44px; display:grid; place-items:center; background:var(--accent-soft); border-radius:var(--radius-sm); margin-bottom:14px; color:var(--accent-ink);}
.card .c-ico svg{width:22px; height:22px;}
.card .c-foot{margin-top:16px;}

.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); letter-spacing:.01em;}
.badge--neutral{background:var(--surface-3); color:var(--text-2);}
.badge--accent{background:var(--accent-soft); color:var(--accent-ink);}
.badge--success{background:var(--success-soft); color:var(--success);}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

.tag{display:inline-flex; align-items:center; font-size:13.5px; font-weight:500; padding:8px 15px; border-radius:var(--radius-pill); border:1px solid var(--border-2); background:var(--surface); color:var(--text-2); cursor:pointer; transition:all var(--dur-fast) var(--ease);}
.tag:hover{border-color:var(--border-contrast); color:var(--text);}
.tag[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--text-on-accent);}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:16px 0; background:var(--surface-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex; width:max-content; animation:sdk-marquee 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-group{display:flex; align-items:center; flex:none;}
.marquee-item{display:inline-flex; align-items:center; gap:12px; padding:0 26px; font-family:var(--font-mono); font-size:13.5px; font-weight:500; color:var(--text-2); white-space:nowrap;}
.marquee-item::after{content:"✦"; color:var(--accent); font-size:11px; margin-left:26px;}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} }

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:32px;}
.stat{text-align:left;}
.stat .n{font-family:var(--font-display); font-weight:600; font-size:clamp(34px,3.6vw,48px); line-height:1; letter-spacing:var(--tracking-tight); color:var(--text); font-variant-numeric:tabular-nums;}
.stat.accent .n{background:var(--gradient-rich); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat .l{color:var(--text-3); font-size:14px; margin-top:10px;}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step;}
.step{position:relative; padding-top:20px; border-top:2px solid var(--border-2);}
.step::before{counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--accent-ink); letter-spacing:.1em;}
.step h3{font-size:19px; margin:12px 0 8px; letter-spacing:var(--tracking-snug);}
.step p{color:var(--text-2); margin:0; font-size:15px; line-height:1.55;}

/* werkwijze: papieren-wereld beeld naast de stappen */
.ww-grid{display:grid; grid-template-columns:0.92fr 1.08fr; gap:44px; align-items:center; margin-top:40px;}
.ww-visual{margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg);}
.ww-visual img{display:block; width:100%; height:auto;}
.steps--column{grid-template-columns:1fr 1fr; gap:30px 26px;}
@media (max-width:900px){ .ww-grid{grid-template-columns:1fr; gap:28px;} }
@media (max-width:560px){ .steps--column{grid-template-columns:1fr;} }

/* ============================================================
   PRICING
   ============================================================ */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
.price-card{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:30px; box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.price-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.price-card.featured{border-color:transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--gradient-border) border-box; box-shadow:var(--shadow-lg);}
.price-card .pc-badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--gradient); color:var(--text-on-accent); font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:5px 14px; border-radius:var(--radius-pill); box-shadow:var(--shadow-accent);}
.pc-plan{font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-ink);}
.pc-price{font-family:var(--font-display); font-weight:600; font-size:44px; letter-spacing:var(--tracking-tight); margin:14px 0 4px; color:var(--text);}
.pc-price .per{font-family:var(--font-body); font-size:15px; font-weight:500; color:var(--text-3); letter-spacing:0;}
.pc-desc{color:var(--text-2); font-size:15px; margin:0 0 18px; min-height:44px;}
.pc-features{list-style:none; margin:0 0 22px; padding:18px 0 0; border-top:1px solid var(--border); display:grid; gap:11px; flex:1;}
.pc-features li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--text);}
.pc-features li svg{width:18px; height:18px; color:var(--accent-2-ink); flex:none; margin-top:1px;}
.pc-example{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text-3); margin:0 0 16px;}
.pc-example a{font-weight:600; color:var(--accent-ink);}
.price-card .btn{width:100%;}

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.accordion{border-top:1px solid var(--border);}
.acc-item{border-bottom:1px solid var(--border);}
.acc-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:var(--tracking-snug); color:var(--text);}
.acc-q .acc-ico{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--border-2); display:grid; place-items:center; color:var(--accent-ink); transition:transform var(--dur) var(--ease), background var(--dur), border-color var(--dur);}
.acc-q .acc-ico svg{width:15px; height:15px;}
.acc-item.open .acc-ico{transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--text-on-accent);}
.acc-a{overflow:hidden; max-height:0; transition:max-height var(--dur-slow) var(--ease);}
.acc-a p{color:var(--text-2); margin:0; padding:0 4px 22px; font-size:15.5px; line-height:1.6; max-width:64ch;}

/* ============================================================
   LOGO WALL
   ============================================================ */
.logowall{display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:center;}
.logowall span{font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--text-3); opacity:.85; letter-spacing:var(--tracking-snug); transition:color var(--dur-fast), opacity var(--dur-fast);}
.logowall span:hover{color:var(--text); opacity:1;}

/* ============================================================
   CTA-BLOK
   ============================================================ */
.cta-block{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2xl); padding:72px 56px; text-align:center;}
.cta-block h2{font-size:clamp(30px,4vw,52px); line-height:1.05; letter-spacing:var(--tracking-tight); color:var(--text); margin:0 auto 16px; max-width:680px; text-wrap:balance; position:relative;}
.cta-block p{font-size:19px; line-height:1.55; color:var(--text-2); max-width:520px; margin:0 auto 28px; position:relative;}
.cta-block .cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{padding:72px 0 40px; border-top:1px solid var(--border);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
.footer-brand p{color:var(--text-3); font-size:14.5px; max-width:30ch; margin:14px 0 0;}
.footer-col .fc-label{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-3); margin-bottom:14px;}
.footer-col a{display:block; color:var(--text-2); font-size:14.5px; padding:5px 0;}
.footer-col a:hover{color:var(--accent-ink);}
.footer-legal{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--border); color:var(--text-3); font-size:13px;}

/* ============================================================
   AI CHAT-WIDGET
   ============================================================ */
.chat{position:fixed; right:24px; bottom:24px; z-index:80; display:flex; flex-direction:column; align-items:flex-end;}
.chat-panel{width:min(360px,calc(100vw - 40px)); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); margin-bottom:14px; overflow:hidden; transform-origin:bottom right; display:none;}
.chat.open .chat-panel{display:block; animation:sdk-scale-in var(--dur) var(--ease) both;}
.chat-head{padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px;}
.chat-head .ch-ico{width:32px; height:32px; border-radius:9px; background:var(--gradient); display:grid; place-items:center; color:var(--text-on-accent); font-size:15px; flex:none;}
.chat-head .ch-t{font-weight:600; font-size:14.5px;}
.chat-head .ch-s{font-size:11px; color:var(--success); display:flex; align-items:center; gap:5px;}
.chat-head .ch-s::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--success);}
.chat-body{padding:16px; display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto;}
.chat-msg{max-width:84%; font-size:14px; line-height:1.45; padding:9px 12px; border-radius:var(--radius-md);}
.chat-msg.bot{align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); color:var(--text);}
.chat-msg.user{align-self:flex-end; background:var(--accent); color:var(--text-on-accent);}
.chat-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border);}
.chat-form input{flex:1; font-family:var(--font-body); font-size:14px; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--radius-sm); padding:9px 12px; outline:none; color:var(--text);}
.chat-form input:focus{border-color:var(--accent-ring);}
.chat-form button{width:40px; height:40px; display:grid; place-items:center; background:var(--accent); color:var(--text-on-accent); border:none; border-radius:var(--radius-sm); cursor:pointer;}
.chat-fab{display:inline-flex; align-items:center; gap:9px; background:var(--gradient); color:var(--text-on-accent); border:none; border-radius:var(--radius-pill); box-shadow:var(--shadow-accent); padding:12px 18px; cursor:pointer; font-weight:600; font-size:15px; font-family:var(--font-body);}
.chat-fab svg{width:19px; height:19px;}

/* ============================================================
   SCROLL-REVEALS + KEYFRAMES
   ============================================================ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);}
.reveal.in{opacity:1; transform:none;}
[data-stagger].reveal > *{opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay:calc(var(--i,0) * 70ms);}
[data-stagger].reveal.in > *{opacity:1; transform:none;}

@keyframes sdk-reveal{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
@keyframes sdk-fade{from{opacity:0;} to{opacity:1;}}
@keyframes sdk-scale-in{from{opacity:0; transform:scale(0.97);} to{opacity:1; transform:scale(1);}}
@keyframes sdk-gradient-pan{0%{background-position:0% 50%;} 100%{background-position:200% 50%;}}
@keyframes sdk-marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes sdk-float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
@keyframes sdk-glow-pulse{0%,100%{opacity:.6;} 50%{opacity:1;}}
@keyframes sdk-spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .reveal{opacity:1; transform:none;}
}

/* ============================================================
   SHIMS — gedeelde klassen die de interactieve componenten +
   de vak-kiezer nodig hebben (kwamen uit atelier.css), nu in MWS.
   ============================================================ */
.mono{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-3);}

/* browser-frame */
.frame{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm);}
.frame-bar{display:flex; align-items:center; gap:7px; padding:11px 16px; border-bottom:1px solid var(--border);}
.frame-bar i{width:9px; height:9px; border-radius:50%; background:var(--surface-3);}
.frame-bar i:first-child{background:var(--grad-c);}
.frame-bar .url{margin-left:10px; font-family:var(--font-mono); font-size:11px; color:var(--text-3);}
.frame-shot{position:relative; background:var(--surface-2);}
.frame-shot img{width:100%; transition:opacity .2s ease;}
.frame-shot.swap img{opacity:0;}

/* werk-grid (bento) */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.work-item--feature{grid-column:span 2; grid-row:span 2;}

/* mini-previews in werk-kaarten (eigen producten) */
.mp{position:relative; overflow:hidden; display:flex; background:
  radial-gradient(95% 85% at 100% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 62%),
  var(--surface-2);}
.card:hover .mp{background:
  radial-gradient(95% 85% at 100% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 62%),
  var(--surface-2);}
/* chat (AI-assistent) */
.mp-chat{flex-direction:column; justify-content:center; gap:8px; padding:18px 16px;}
.mp-msg{max-width:82%; font-size:12px; line-height:1.35; padding:7px 10px; border-radius:12px;}
.mp-msg.in{align-self:flex-start; background:var(--surface); border:1px solid var(--border); color:var(--text-2); border-bottom-left-radius:4px;}
.mp-msg.out{align-self:flex-end; background:var(--accent); color:var(--text-on-accent); border-bottom-right-radius:4px;}
.mp-msg.typing{display:inline-flex; gap:4px; align-items:center; padding:9px 11px;}
.mp-msg.typing i{width:6px; height:6px; border-radius:50%; background:var(--text-3); animation:mp-blink 1.3s infinite;}
.mp-msg.typing i:nth-child(2){animation-delay:.18s;}
.mp-msg.typing i:nth-child(3){animation-delay:.36s;}
/* swap (ShiftSwap) */
.mp-swap{align-items:center; justify-content:center; gap:12px; padding:16px;}
.mp-shift{min-width:86px; text-align:center; padding:11px 10px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); display:grid; gap:3px;}
.mp-shift b{font-size:13px; font-family:var(--font-display); font-weight:600; color:var(--text);}
.mp-shift span{font-size:10.5px; color:var(--text-3);}
.mp-shift.hi{background:var(--accent-soft); border-color:transparent;}
.mp-shift.hi b, .mp-shift.hi span{color:var(--accent-ink);}
.mp-arrows{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--surface-3); color:var(--accent-ink); animation:mp-swap 3.8s ease-in-out infinite;}
.mp-arrows svg{width:19px; height:19px;}
/* brand (Brand Studio) */
.mp-brand{flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:16px;}
.mp-post{width:78%; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); padding:9px; display:grid; gap:7px;}
.mp-thumb{height:68px; border-radius:var(--radius-xs); background:var(--gradient); position:relative; overflow:hidden;}
.mp-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform:translateX(-120%); animation:mp-sweep 2.8s ease-in-out infinite;}
.mp-ln{height:6px; border-radius:4px; background:var(--surface-3);}
.mp-ln.w1{width:72%;}
.mp-ln.w2{width:44%;}
.mp-dots{display:flex; gap:6px; align-items:center;}
.mp-dots i{width:6px; height:6px; border-radius:50%; background:var(--surface-3);}
.mp-dots i.on{width:16px; border-radius:4px; background:var(--accent);}
@keyframes mp-blink{0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:.95; transform:translateY(-3px);}}
@keyframes mp-swap{0%,55%{transform:rotate(0);} 78%,100%{transform:rotate(360deg);}}
@keyframes mp-sweep{0%{transform:translateX(-120%);} 55%,100%{transform:translateX(120%);}}

/* werk: hover-leven */
#werk .work-grid .card .frame-shot img{transition:transform var(--dur) var(--ease), opacity .2s ease;}
#werk .work-grid .card:hover .frame-shot img{transform:scale(1.04);}
#werk .work-grid a.card::after{content:""; position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow:var(--shadow-accent); opacity:0; transform:translateY(-6px) scale(.9); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events:none;}
#werk .work-grid a.card:hover::after{opacity:1; transform:none;}
/* live-dot puls */
.badge--success .dot{position:relative;}
.badge--success .dot::after{content:""; position:absolute; inset:0; border-radius:50%; animation:mp-livepulse 2.2s ease-out infinite;}
@keyframes mp-livepulse{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--success) 55%, transparent);} 70%,100%{box-shadow:0 0 0 6px transparent;}}

/* werk: intro + bewijs-telling */
.work-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px;}
.work-head > .reveal:first-child{flex:1 1 auto; min-width:0; max-width:60ch;}
.work-stats{display:flex; gap:30px; padding-bottom:6px; flex:0 0 auto;}
.work-stats > div{display:grid; gap:3px;}
.work-stats b{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3vw,36px); line-height:1; color:var(--text);}
.work-stats span{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);}
@media (max-width:820px){ .work-head{flex-wrap:wrap;} .work-stats{flex-basis:100%;} }
@media (max-width:640px){ .work-stats{gap:22px;} .work-stats b{font-size:26px;} }

/* werk: branche-marquee */
.work-marquee-wrap{margin-top:30px;}
.wm-label{margin-bottom:14px; color:var(--text-3);}
.wm-label a{color:var(--accent-ink); text-decoration:none;}
.wm-label a:hover{text-decoration:underline;}
.work-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.wm-track{display:flex; gap:16px; width:max-content; animation:sdk-marquee 55s linear infinite;}
.work-marquee:hover .wm-track{animation-play-state:paused;}
.wm-cell{flex:0 0 auto; width:216px; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); background:var(--surface-2); display:block;}
.wm-cell img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur) var(--ease);}
.wm-cell:hover img{transform:scale(1.05);}

/* vak-kiezer */
.strip{display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:14px; overflow-x:auto; padding:4px 4px 18px; scrollbar-width:thin; scrollbar-color:var(--border-2) transparent;}
.strip-thumb{appearance:none; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); padding:8px; cursor:pointer; text-align:left; display:grid; gap:8px; transition:border-color var(--dur-fast), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast);}
.strip-thumb:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-2);}
.strip-thumb[aria-selected="true"]{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.st-shot{border-radius:var(--radius-xs); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/10;}
.st-shot img{width:100%; height:100%; object-fit:cover;}
.st-label{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); padding:0 2px 3px; display:flex; align-items:center; gap:8px;}
.strip-thumb[aria-selected="true"] .st-label{color:var(--accent-ink);}
.st-num{color:var(--border-contrast);}

/* podium */
.stage{display:grid; grid-template-columns:minmax(0,1.5fr) 1fr; gap:clamp(28px,4vw,52px); align-items:center;}
.stage-copy .sm-vak{display:block; margin-bottom:12px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-ink);}
.stage-copy h3{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3vw,36px); letter-spacing:var(--tracking-snug); margin-bottom:12px;}
.stage-copy p{color:var(--text-2); max-width:44ch; margin:0 0 22px;}
.stage-cta{display:flex; gap:12px; flex-wrap:wrap;}

.cf-sent{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--accent-ink);}

/* section-head (gebruikt door /atelier/) */
.sec-rule{border:0; border-top:1px solid var(--border); margin:0 0 clamp(22px,4vw,38px);}
.sec-meta{display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:clamp(16px,3vw,26px);}
.sec-meta .num{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-ink);}
.sec-meta .note{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); text-align:right; line-height:1.5;}
.sec-head{margin-bottom:clamp(26px,4vw,42px);}
.sec-head h2{font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,50px); line-height:1.06; letter-spacing:var(--tracking-tight); max-width:22ch; text-wrap:balance;}
.sec-head .sec-intro{color:var(--text-2); max-width:58ch; margin:16px 0 0; font-size:17px; line-height:1.55;}
.intro .kicker.mono, .kicker.mono{color:var(--accent-ink);}
@media (max-width:640px){ .sec-meta .note{display:none;} }

@media (max-width:900px){ .stage{grid-template-columns:1fr;} }
@media (max-width:560px){ .strip{grid-auto-columns:128px;} .stats-grid{grid-template-columns:1fr !important;} .work-grid{grid-template-columns:1fr !important;} .work-item--feature{grid-column:auto; grid-row:auto;} }
@media (max-width:900px) and (min-width:561px){ .work-grid{grid-template-columns:1fr 1fr !important;} .stats-grid{grid-template-columns:1fr 1fr !important;} .work-item--feature{grid-column:span 2; grid-row:span 1;} }

/* ============================================================
   RESPONSIEF
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-mock{max-width:520px;}
  .stats{grid-template-columns:repeat(2,1fr); gap:28px 24px;}
  .steps{grid-template-columns:1fr 1fr; gap:26px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .site-nav{position:absolute; top:calc(100% + 12px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); flex-direction:column; align-items:stretch; gap:2px; padding:8px; display:none;}
  .site-header.open .site-nav{display:flex;}
  .site-nav a{padding:12px 14px; border-radius:var(--radius-sm); color:var(--text-2);}
  .site-nav a:hover, .site-nav a[aria-current="page"]{color:var(--text); background:var(--surface-3);}
  .nav-toggle{display:block;}
  .site-header.open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg);}
  .site-header.open .nav-toggle span:nth-child(2){opacity:0;}
  .site-header.open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
  .header-cta{display:none;}
  .pricing{grid-template-columns:1fr; max-width:440px; margin-inline:auto;}
  .cta-block{padding:52px 26px;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .header-tools .cmd-trigger{display:none;}
  .brand{font-size:16.5px;}
  .section{padding:64px 0;}
  .stats{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:24px;}
  .mock-float{left:0;}
}