/* ==========================================================================
   Be Intent Marketing — main.css
   Design system: Brand Guide v1.0 (2026) · Space Grotesk + Archivo
   Violet #7C3AED · Indigo #2E1065 · Mint #5EEAD4 · Inkt #0E0B16 · Papier #F7F6FB
   Mobile-first: basis = 390-ontwerp, >=1024px = 1440-ontwerp.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --violet: #7C3AED; --violet-dark: #6D28D9; --violet-light: #A78BFA;
  --violet-200: #C4B5FD; --violet-100: #EDE9FE; --violet-50: #F5F3FF;
  --indigo: #2E1065; --indigo-mid: #42188F;
  --mint: #5EEAD4; --mint-deep: #0D9488; --mint-dark: #0F766E; --mint-100: #E6FAF6;
  --ink: #0E0B16; --ink-2: #1B1726;
  --paper: #F7F6FB; --white: #FFFFFF;
  /* Neutrals */
  --slate: #6B6482; --slate-2: #4A4460; --slate-3: #5C5670; --slate-4: #777388;
  --slate-5: #BDB3DC; --line: #DCDAE4;
  /* Semantiek */
  --text-heading: var(--ink); --text-body: var(--slate-2); --text-muted: var(--slate-4);
  --border-accent: rgba(124, 58, 237, .12); --border-accent-strong: rgba(124, 58, 237, .18);
  --surface-dark-tile: rgba(255, 255, 255, .06); --line-on-dark: rgba(255, 255, 255, .08);
  --gradient-cta: linear-gradient(180deg, #2E1065 0%, #42188F 60%, #0F766E 140%);
  --gradient-violet-soft: linear-gradient(180deg, #EDE9FE, #F5F3FF);
  --gradient-violet-mint: linear-gradient(180deg, #E6FAF6, #F0FDFA);
  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  /* Radii & schaduwen */
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(14, 11, 22, .05);
  --shadow-form: 0 1px 2px rgba(14, 11, 22, .06), 0 8px 24px rgba(46, 16, 101, .08);
  --shadow-float: 0 30px 80px rgba(46, 16, 101, .28);
  --shadow-cta: 0 8px 24px rgba(124, 58, 237, .28);
  --shadow-cta-hover: 0 10px 28px rgba(124, 58, 237, .4);
  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* Layout */
  --container: 1200px;
  --gutter: 20px;
}
@media (min-width: 1024px) { :root { --gutter: 48px; } }

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/beintent-SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/beintent-Archivo.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--text-body);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--text-heading); }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-dark); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--violet-100); color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container--wide { max-width: calc(1440px + 2 * var(--gutter)); }

/* ---------- Typografie ---------- */
.eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--violet); line-height: 1.2;
}
.eyebrow--ondark { color: var(--violet-200); }
.eyebrow--mint { color: var(--mint-deep); }
.eyebrow--slate { color: var(--text-muted); }
.eyebrow--muted-dark { color: var(--slate-5); }
@media (min-width: 1024px) { .eyebrow { font-size: 12px; letter-spacing: .28em; } }

.label {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--slate);
}

.h-display { font-size: 34px; line-height: 1.06; font-weight: 700; letter-spacing: -.03em; }
.h2 { font-size: 28px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; text-wrap: pretty; }
.h2--sm { font-size: 24px; }
.h3 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 1024px) {
  .h-display { font-size: 68px; letter-spacing: -.035em; line-height: 1.04; }
  .h2 { font-size: 48px; line-height: 1.06; letter-spacing: -.03em; }
  .h2--sm { font-size: 40px; }
  .h3 { font-size: 22px; line-height: 1.2; }
}
.accent { color: var(--violet); }
.accent--mint { color: var(--mint); }
.accent--mintdeep { color: var(--mint-deep); }
.accent--light { color: var(--violet-light); }
.ondark { color: #fff; }

.lead { font-size: 16px; line-height: 1.55; color: var(--text-body); max-width: 640px; }
@media (min-width: 1024px) { .lead { font-size: 18px; } }

/* ---------- Secties ---------- */
.section { padding: 56px 0; background: #fff; }
.section--paper { background: var(--paper); }
.section--tight { padding: 40px 0; }
@media (min-width: 1024px) { .section { padding: 96px 0; } .section--tight { padding: 48px 0; } }

.section-head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.section-head .lead { margin-top: 4px; }
.section-head--center { align-items: center; text-align: center; }
@media (min-width: 1024px) { .section-head { gap: 16px; } }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer; line-height: 1;
  transition: background 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.btn--lg { height: 52px; padding: 0 26px; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--violet { background: var(--violet); color: #fff; box-shadow: var(--shadow-cta); }
.btn--violet:hover { background: var(--violet-dark); color: #fff; box-shadow: var(--shadow-cta-hover); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); color: #fff; }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(14, 11, 22, .18); }
.btn--white:hover { color: var(--violet); }
.btn--outline { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn--outline:hover { color: var(--violet); }
.btn--block { display: flex; width: 100%; }
/* Pijl-cirkel in een knop */
.btn .btn-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; background: rgba(255, 255, 255, .18); color: #fff;
  transition: transform 300ms var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn--white .btn-arrow { background: var(--violet); }
.btn--has-arrow { justify-content: space-between; padding: 4px 6px 4px 22px; }

.link-arrow { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--violet); }
.link-arrow:hover { color: var(--violet-dark); }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill); white-space: nowrap;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.pill--hero { background: rgba(255, 255, 255, .92); color: var(--violet-dark); }
.pill--hero-mint { background: rgba(255, 255, 255, .92); color: var(--mint-dark); }
.pill--violet { background: var(--violet-100); color: var(--violet-dark); letter-spacing: .14em; }
.pill--mint-dark { background: rgba(94, 234, 212, .14); color: var(--mint); }
.pill--dark-muted { background: rgba(255, 255, 255, .08); color: var(--slate-5); }
.pill--outline { background: #fff; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-deep); flex: none; }
.pill--mint-dark .dot, .pill--dark-muted .dot { background: var(--mint); }
@media (min-width: 1024px) { .pill { height: 40px; padding: 0 16px; font-size: 11px; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--indigo); }
.header-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 12px;
}
.header-logo { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 10px; background: #fff; flex: none; }
.header-logo img { height: 30px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-cta {
  height: 40px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: var(--radius-pill); background: #fff; color: var(--ink);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow-cta); transition: box-shadow 300ms var(--ease-out);
}
.header-cta:hover { color: var(--ink); box-shadow: var(--shadow-cta-hover); }
.menu-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}

/* Desktop-navigatie (pil) */
.header-nav-wrap { display: none; }
.nav-pill {
  position: relative; display: flex;
  align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--border-accent);
  font-family: var(--font-display);
}
.nav-pill > a, .nav-pill > button {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 0;
  border-radius: var(--radius-pill); background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  text-decoration: none; white-space: nowrap; transition: background 300ms var(--ease-out), color 300ms var(--ease-out);
}
.nav-pill > a:hover, .nav-pill > button:hover,
.nav-pill > a[aria-current="page"] { background: var(--violet-100); color: var(--violet); }
.nav-caret {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--violet); transition: transform 300ms var(--ease-out);
}
[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px; padding: 8px;
  border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(14, 11, 22, .06), 0 8px 24px rgba(46, 16, 101, .18);
  display: none; flex-direction: column;
}
.nav-dropdown.is-open { display: flex; }
.nav-dropdown a {
  display: block; padding: 12px 16px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { background: var(--violet-50); color: var(--violet); }

/* Mobiel menu */
.mobile-menu {
  display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px);
  padding: 8px; border-radius: 20px; background: #fff;
  border: 1px solid var(--border-accent); box-shadow: var(--shadow-float);
  font-family: var(--font-display);
}
.mobile-menu.is-open { display: block; }
.mobile-menu .menu-label { padding: 10px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--violet); }
.mobile-menu a { display: block; padding: 12px 14px; border-radius: 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { background: var(--violet-50); color: var(--violet); }
.mobile-menu .menu-divider { height: 1px; margin: 8px 14px; background: var(--line); }
.mobile-menu .menu-call {
  display: flex; align-items: center; justify-content: center; margin: 8px 6px 6px;
  height: 48px; border-radius: var(--radius-pill); background: var(--violet); color: #fff; font-size: 15px;
}
.mobile-menu .menu-call:hover { background: var(--violet-dark); color: #fff; }

@media (min-width: 1024px) {
  .header-inner { padding: 18px var(--gutter); max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
  .header-logo img { height: 32px; }
  .header-nav-wrap { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .menu-btn { display: none; }
  .mobile-menu, .mobile-menu.is-open { display: none; }
  .header-cta {
    height: auto; min-height: 44px; padding: 4px 4px 4px 20px; gap: 12px; font-size: 15px;
  }
  .header-cta .btn-arrow {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border-radius: 50%; background: var(--violet); color: #fff;
    font-size: 16px; line-height: 1; transition: transform 300ms var(--ease-out);
  }
  .header-cta:hover .btn-arrow { transform: translateX(3px); }
}

/* ---------- Kaarten ---------- */
.card { border-radius: 20px; padding: 24px; background: var(--paper); display: flex; flex-direction: column; gap: 12px; }
.card--white { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); }
.card--border { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.card--dark { background: var(--ink); color: #fff; padding: 24px; }
.card--dark h3, .card--dark .h3 { color: #fff; }
.card--ink2 { background: var(--ink-2); color: #F2EFFB; box-shadow: var(--shadow-float); }
.tile-dark { background: var(--surface-dark-tile); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 1024px) { .card--dark { padding: 32px; } }

/* Foto-placeholder (violet/mint vlak met label) */
.ph {
  border-radius: 16px; background: var(--gradient-violet-soft);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--violet-dark);
}
.ph--mint { background: var(--gradient-violet-mint); color: var(--mint-dark); }

/* Browser-mockup */
.browser-frame { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(46, 16, 101, .18); }
.browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.browser-url {
  flex: 1; height: 28px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 14px;
  font-family: var(--font-display); font-size: 12px; font-weight: 500; color: var(--slate);
}

/* ---------- Checklijst ---------- */
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text-body); }
.check::before {
  content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: var(--mint-100); color: var(--mint-dark);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
}
.check--lg { font-size: 15px; }
.check--lg::before { width: 20px; height: 20px; font-size: 11px; }
.check--dark { color: #F2EFFB; font-size: 13px; gap: 8px; }
.check--dark::before { width: 16px; height: 16px; background: var(--mint); color: var(--ink); font-size: 10px; margin-top: 0; }
.check--pending { color: var(--text-muted); }
.check--pending::before { content: ""; background: transparent; border: 1px solid var(--line); }
.check--dark.check--pending { color: var(--slate-5); }
.check--dark.check--pending::before { border-color: var(--slate-5); }
.checklist { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Stats ---------- */
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat b {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--ink);
}
.stat span {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
}
.card--dark .stat b, .stat--dark b { color: #fff; }
.card--dark .stat span, .stat--dark span { color: var(--slate-5); }
.stat--highlight b { color: var(--mint-deep); }
.card--dark .stat--highlight b { color: var(--mint); }
@media (min-width: 1024px) { .stat b { font-size: 40px; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; cursor: pointer;
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--violet); font-size: 22px; font-weight: 400; line-height: 1;
  font-family: var(--font-display); flex: none; transition: transform 300ms var(--ease-out);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0; padding: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--text-body); max-width: 720px; }
@media (min-width: 1024px) { .faq-item summary { font-size: 17px; } }

/* ---------- Formulieren ---------- */
.form-card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: var(--shadow-form); color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); font-family: var(--font-body); }
.field input, .field textarea, .field select {
  height: 48px; width: 100%; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; font-family: var(--font-body); font-size: 16px; color: var(--ink); outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.field textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.radio-pills { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.radio-pills .options { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-pills label { position: relative; }
.radio-pills input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pills .opt {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: all 150ms;
}
.radio-pills input:checked + .opt { border-color: var(--violet); background: var(--violet-100); color: var(--violet-dark); }
.radio-pills input:focus-visible + .opt { outline: 3px solid var(--violet); outline-offset: 2px; }
.form-note { font-size: 12px; color: var(--text-muted); text-align: center; }
.form-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 0; }
.form-success .tick {
  width: 44px; height: 44px; border-radius: 50%; background: var(--mint-100); color: var(--mint-dark);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.form-success .t1 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--violet); }
.form-success .t2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.form-success .t3 { font-size: 15px; line-height: 1.5; color: var(--text-body); }
form.is-sent .form-fields { display: none; }
form.is-sent .form-success { display: flex; }
@media (min-width: 1024px) {
  .form-card { padding: 32px; border-radius: 24px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- CTA-paneel (Kennismaking) ---------- */
.cta-panel {
  position: relative; border-radius: 24px; background: var(--gradient-cta);
  padding: 28px 20px; color: #fff; overflow: hidden;
}
.cta-panel .eyebrow { color: var(--violet-200); }
.cta-panel h2 { color: #fff; }
.cta-panel .lead { color: var(--violet-100); }
.cta-logo { display: inline-flex; padding: 8px 14px; border-radius: 12px; background: #fff; }
.cta-logo img { height: 30px; width: auto; }
.person { display: flex; align-items: center; gap: 14px; }
.person .avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--ink-2); flex: none; }
.person .avatar img { width: 100%; height: 100%; object-fit: cover; }
.person b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; }
.person span { font-size: 13px; color: var(--violet-200); }
.phone-link { font-size: 14px; font-weight: 500; color: #fff; }
.phone-link:hover { color: #fff; }
.phone-link .q { color: var(--violet-200); }
.phone-link b { color: var(--mint); font-weight: 700; }
@media (min-width: 1024px) {
  .cta-panel {
    border-radius: 28px; padding: 88px 56px 56px; min-height: 640px;
    display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center;
  }
  .cta-panel .cta-logo { position: absolute; left: 40px; top: 36px; }
  .cta-panel .cta-logo img { height: 32px; }
}

/* ---------- Carrousel ---------- */
.carousel-wrap { position: relative; }
.carousel {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px;
  scroll-padding-left: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: 0 0 280px; scroll-snap-align: start; }
.carousel-hint { margin-top: 10px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-4); }
.carousel-dots { margin-top: 16px; display: flex; justify-content: center; gap: 6px; }
.carousel-dots span { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--line); transition: all 300ms var(--ease-out); }
.carousel-dots span.is-active { width: 18px; background: var(--violet); }
.carousel-nav { display: none; gap: 8px; }
.carousel-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.carousel-nav button:disabled { color: #9C99AA; cursor: default; }
@media (min-width: 1024px) {
  .carousel { gap: 16px; }
  .carousel > * { flex-basis: 360px; }
  .carousel-nav { display: flex; }
  .carousel-hint, .carousel-dots { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--indigo); color: #fff; padding: 48px 0 28px; }
.footer-logo { display: inline-flex; padding: 6px 12px; border-radius: 10px; background: #fff; }
.footer-logo img { height: 30px; width: auto; }
.footer-grid { display: block; }
.footer-nav { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.footer-nav a, .footer-contact a, .footer-socials a { color: #fff; transition: color 300ms var(--ease-out); }
.footer-nav a:hover, .footer-contact a:hover, .footer-socials a:hover { color: var(--mint); }
.footer-h { margin-top: 32px; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff; }
.footer-h .dot { color: var(--mint); }
.footer-contact { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--slate-5); font-style: normal; }
.footer-socials { margin-top: 10px; font-size: 14px; line-height: 1.9; }
.footer-socials .tag {
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-5); margin-right: 10px;
}
.footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12px; line-height: 1.7; color: var(--slate-5); }
.footer-bottom .tagline { color: #fff; }
.footer-bottom a { color: var(--slate-5); }
.footer-bottom a:hover { color: var(--mint); }
@media (min-width: 1024px) {
  .site-footer { padding: 80px 0 40px; }
  .footer-grid { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 48px 40px; }
  .footer-col-1 { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
  .footer-logo { padding: 10px 16px; border-radius: 12px; }
  .footer-logo img { height: 40px; }
  .footer-nav { margin-top: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; font-weight: 500; }
  .footer-h { margin-top: 0; font-size: 24px; letter-spacing: -.02em; }
  .footer-contact { font-size: 17px; line-height: 1.6; color: var(--slate-5); margin-top: 12px; }
  .footer-contact a { display: block; margin-bottom: 8px; }
  .footer-socials { font-size: 17px; margin-top: 12px; }
  .footer-socials .tag { font-size: 12px; letter-spacing: .18em; color: var(--mint); display: inline-block; width: 84px; }
  .footer-bottom {
    margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--mint);
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 40px; font-size: 14px;
  }
  .footer-bottom .tagline { font-family: var(--font-display); font-weight: 500; }
  .footer-bottom .legal { display: flex; gap: 24px; }
}

/* ---------- Scroll-reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Mock-UI animaties (uit het design) ---------- */
@keyframes bi-word { 0% { opacity: 0; transform: translateY(8px); } 4% { opacity: 1; transform: none; } 22% { opacity: 1; transform: none; } 26% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes bi-build-img { 0%, 8% { opacity: 0; transform: translateY(10px); } 18%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes bi-build-l1 { 0%, 20% { width: 0; } 32%, 88% { width: 120px; } 96%, 100% { width: 0; } }
@keyframes bi-build-l2 { 0%, 28% { width: 0; } 40%, 88% { width: 80px; } 96%, 100% { width: 0; } }
@keyframes bi-build-btn { 0%, 44% { opacity: 0; transform: scale(.9); } 56%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes bi-build-chk { 0%, 60% { opacity: 0; transform: translateY(8px); } 70%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes bi-type { 0%, 6% { width: 0; } 40%, 86% { width: 158px; } 94%, 100% { width: 0; } }
@keyframes bi-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bi-result { 0%, 44% { opacity: 0; transform: translateY(10px); } 54%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes bi-ai { 0%, 62% { opacity: 0; transform: translateY(10px); } 72%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes bi-mail1 { 0%, 6% { opacity: 0; transform: translateY(16px); } 16%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes bi-mail2 { 0%, 26% { opacity: 0; transform: translateY(16px); } 36%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes bi-mail3 { 0%, 46% { opacity: 0; transform: translateY(16px); } 56%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes bi-mailsum { 0%, 62% { opacity: 0; } 72%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes bi-pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, .6); } 100% { box-shadow: 0 0 0 10px rgba(94, 234, 212, 0); } }
@keyframes bi-bar1 { 0%, 10% { transform: scaleX(0); } 40%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes bi-bar2 { 0%, 20% { transform: scaleX(0); } 50%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes bi-order { 0%, 54% { opacity: 0; transform: translateX(24px); } 64%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(24px); } }
@keyframes bi-q { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- Hulpjes ---------- */
.flow > * + * { margin-top: 14px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 20px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 28px; } .mt-8 { margin-top: 40px; }
@media (max-width: 1023.98px) { .hide-mobile { display: none !important; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }