/* ==========================================================================
   Design tokens (Hansfri design system)
   ========================================================================== */
/* "Werkplaats" palette: kalk neutrals (60%), inkt (30%), werkgeel accent (10%), staalblauw for links.
   Light mode below; dark mode overrides the same tokens further down. */
:root {
  color-scheme: light dark;

  /* Neutrals (kalk scale) */
  --kalk-50: #FBFAF7;
  --kalk-100: #F6F5F0;
  --kalk-200: #ECEAE3;
  --kalk-300: #E2E0D8;
  --kalk-400: #B9B6AC;
  --kalk-500: #8C8A82;
  --kalk-600: #5C5B56;
  --kalk-700: #3D3C38;
  --kalk-800: #262624;
  --kalk-900: #141413;

  /* Roles. --ink is text and strong UI (buttons, borders) and turns light in dark mode;
     --panel is for areas that stay dark in both modes (icon squares, the closing CTA). */
  --paper: var(--kalk-100);           /* page background */
  --surface: #FFFFFF;                 /* cards, header pill, footer */
  --ink: var(--kalk-900);
  --ink-hover: var(--kalk-700);
  --ink-muted: var(--kalk-600);
  --text-body: #2F2E2B;               /* long-form reading text */
  --line: var(--kalk-300);
  --block: var(--kalk-200);
  --input-border: var(--kalk-500);
  --char-dim: #D3D1C8;                /* letters of the pain headline before they fill in */
  --panel: var(--kalk-900);
  --on-panel: var(--kalk-100);

  /* Accent: werkgeel. Never as text or thin lines on a light background (1.65:1); use --accent-text there. */
  --accent: #F2B807;
  --accent-hover: #F7C935;
  --on-accent: #141413;
  --accent-light: #F2B807;            /* the accent on --panel (icons, checks) */
  --accent-text: #8A6200;             /* yellow as text on light (5.0:1) */

  /* Secondary: staalblauw, for text links and info */
  --secondary: #2F4A5F;
  --link: var(--secondary);

  /* Tints for coloured sections and fills (ink text on top) */
  --accent-tint: #FCEDBE;             /* geel */
  --tint-steel: #DCE5EC;              /* staal */
  --tint-stone: #E8E5DC;              /* steen */
  --choice-bg: #FFFBEE;               /* selected option in the scan form */

  /* Semantic */
  --success: #1E7A4C;  --success-bg: #E3F2E9;
  --warning: #C2410C;  --warning-bg: #FDEBDD;
  --danger:  #B42318;  --danger-bg:  #FBE7E5;
  --info:    var(--secondary); --info-bg: var(--tint-steel);

  --dark-muted: #CFCDC4;
  --dark-faint: #A3A199;
  --dark-line: #2E2E2B;
  --dark-chip: #24241F;

  --font-display: "Inter Tight", Inter, system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-float: 0 14px 34px rgba(20, 20, 19, 0.08);

  --container: 1200px;
  --gutter: 24px;
  --section-space: clamp(96px, 11vw, 152px); /* vertical breathing room above and below each section */
}
@media (max-width: 600px) { :root { --section-space: 80px; } }

/* Tijdelijk uit: cases, blog, de juridische pagina's (en de links ernaartoe), de sectoren in de footer en LinkedIn
   staan in de HTML in commentaar gemarkeerd met "LATER", zodat ze niet op de site of in Google staan.
   Weer aanzetten: haal het commentaar rond die blokken weg (en de noindex-regel bovenaan de pagina's zelf). */

/* Dark mode: same feel, not a straight inversion. Dark panels lift slightly off the page,
   werkgeel stays as is, staalblauw lightens so links keep their contrast. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121211;
    --surface: #1E1E1C;
    --ink: #F2F1EC;
    --ink-hover: #D9D7D0;
    --ink-muted: var(--kalk-400);
    --text-body: #E4E2DB;
    --line: #33322F;
    --block: var(--kalk-800);
    --input-border: #6E6C66;
    --char-dim: #3A3936;
    --panel: var(--kalk-800);
    --on-panel: #F2F1EC;

    --accent-text: #F2B807;
    --secondary: #8FB3CF;

    --accent-tint: #29251A;
    --tint-steel: #1C2630;
    --tint-stone: #262522;
    --choice-bg: #26231A;

    --success: #5CC28E;  --success-bg: #14301F;
    --warning: #F2955E;  --warning-bg: #3A2214;
    --danger:  #F2877D;  --danger-bg:  #3B1A17;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--ink-muted); }

h1, h2, h3, p { margin: 0; }

img, svg { display: block; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 16px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.label--ink { color: var(--ink); }

.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }

.h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.h2--sm { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.08; }

.h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }

.muted { color: var(--ink-muted); }

.section { padding-top: var(--section-space); padding-bottom: var(--section-space); display: flex; flex-direction: column; gap: 48px; }

/* Buttons: every clickable action is a pill */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { color: var(--paper); transform: translateY(-1px); background: var(--ink-hover); }
.btn--md { min-height: 52px; padding: 0 28px; font-size: 16px; }
.btn--cta { min-height: 56px; padding: 0 30px; font-size: 17px; font-weight: 700; }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--ghost {
  background: transparent;
  border: 1px dashed var(--input-border);
  color: var(--on-panel);
}
.btn--ghost:hover { background: rgba(246, 245, 240, 0.06); }

/* ==========================================================================
   Header
   ========================================================================== */
/* Floating header: logo + menu in one pill on the left, the call-to-action pill on the right */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  pointer-events: none; /* the transparent strip between the pills lets clicks through to the page */
}
.header-inner {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}
.header-pill, .header-actions { pointer-events: auto; }

.header-pill {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 56px;
  padding: 0 30px 0 22px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(20, 20, 19, 0.04);
  transition: box-shadow .2s ease;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }

/* Links carry their own padding so the active one can sit on a soft blob instead of an underline */
.main-nav { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 500; }
.main-nav a:not(.btn) {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--ink-muted);
  transition: color .15s ease, background-color .2s ease;
}
.main-nav a:not(.btn):hover { color: var(--ink); background: var(--block); }
.main-nav a:not(.btn).is-active, .main-nav a:not(.btn)[aria-current="page"] { color: var(--ink); background: var(--accent-tint); }


.header-actions { display: flex; align-items: center; gap: 10px; }

/* White pill, like the reference's "Get Demo" */
.header-cta,
.header-cta:hover {
  min-height: 56px;
  padding: 0 28px;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(20, 20, 19, 0.04);
}
.header-cta:hover { background: var(--paper); }

.nav-toggle {
  display: none;
  width: 52px; height: 52px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(20, 20, 19, 0.04);
  align-items: center; justify-content: center;
  cursor: pointer;
}

/* Lift the pills a little once the page scrolls under them */
.site-header.is-scrolled .header-pill,
.site-header.is-scrolled .header-cta,
.site-header.is-scrolled .nav-toggle { box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(20, 20, 19, 0.10); }

@media (max-width: 1100px) {
  .header-pill { gap: 20px; padding: 0 16px 0 18px; }
  .main-nav { gap: 2px; font-size: 15px; }
  .main-nav a:not(.btn) { padding: 8px 11px; }
  .header-cta, .header-cta:hover { padding: 0 22px; font-size: 15px; }
}

@media (max-width: 820px) {
  .header-inner { padding: 12px 16px; }
  .header-pill { min-height: 52px; padding: 0 20px 0 14px; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  /* Menu opens as a card under the header */
  .main-nav {
    position: absolute;
    top: calc(100% - 4px); left: 16px; right: 16px;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(20, 20, 19, 0.14);
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav { align-items: stretch; gap: 2px; padding: 12px; }
  .main-nav a:not(.btn) { padding: 12px 14px; font-size: 17px; color: var(--ink); border-radius: 12px; }
  .main-nav .mobile-cta { display: inline-flex; justify-content: center; margin-top: 16px; border-bottom: none; padding: 0 20px; color: var(--paper); }
}
@media (min-width: 821px) {
  .main-nav .mobile-cta { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background-color: var(--paper);
  overflow: hidden;
  padding-top: 4px;
}
/* Rounded video frame with the headline on top; inset from the edges like the header pills */
.hero-frame {
  position: relative;
  isolation: isolate;
  width: min(1400px, calc(100% - 40px));
  min-height: min(80vh, 760px);
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: #12100D; /* the video's own darkest tone, shown while it loads */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F6F5F0; /* light text on the video in both modes */
}
.hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Darkens the video just enough for white text, most in the middle where the text sits */
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(10, 9, 8, 0.38), rgba(10, 9, 8, 0.08) 75%),
    linear-gradient(180deg, rgba(10, 9, 8, 0.15), rgba(10, 9, 8, 0.32));
}
.hero-inner {
  width: 100%;
  padding: 88px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
/* Big condensed headline on two lines (Anton, headline only); sized so the longer
   second line ("meer ondernemen.") fits the frame */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Anton", "Inter Tight", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 9.2vw, 132px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.hero-line { display: block; }
/* Rotating word: all words share one grid cell, so the line keeps the width of the
   longest word and nothing jumps. script.js moves .is-active / .is-leaving along. */
.hero-rotator { display: grid; justify-items: center; overflow: hidden; }
.rotator-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(70%);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.rotator-word.is-active { opacity: 1; transform: none; }
.rotator-word.is-leaving { opacity: 0; transform: translateY(-70%); }
@media (prefers-reduced-motion: reduce) { .rotator-word { transition: none; } }
.hero-lead { font-size: 18px; line-height: 1.55; color: #E8E6DF; max-width: 540px; margin-top: 8px; text-shadow: 0 1px 12px rgba(10, 9, 8, 0.5); }

/* Scrolling row of what we automate (takes the place of a logo strip) */
.hero-marquee { padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
.hero-marquee-label { text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee-track li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 56px; /* spacing on every item, so the two copies line up for a seamless loop */
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}
/* Software logos (official icons in assets/logos/) */
/* Each icon has a different amount of empty space, so --logo-scale (set per logo in index.html)
   evens out how big they look. Greyscale keeps the strip calm and on-brand. */
.marquee-logo {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
  transform: scale(var(--logo-scale, 1));
  filter: grayscale(1) contrast(1.1);
  opacity: 0.8;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 600px) {
  .hero-frame { width: calc(100% - 2 * var(--gutter)); min-height: 600px; border-radius: var(--radius-lg); } /* same edges as the content below */
  .hero-title { font-size: clamp(38px, 13vw, 64px); } /* longest rotating word ("rondmailen?") still fits the frame */
  .hero-inner { padding: 64px 20px; gap: 22px; }
  .hero-lead { font-size: 17px; }
  .hero-marquee { padding-bottom: 40px; }
  .marquee-track li { font-size: 16px; margin-right: 36px; }
}

/* ==========================================================================
   Stats (case detail page)
   ========================================================================== */
.stat-row { display: flex; flex-wrap: wrap; gap: 20px; }
.stat {
  flex: 1 1 240px;
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-num { font-size: 60px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.stat-text { font-size: 16px; font-weight: 500; }

/* ==========================================================================
   Pain points: big headline, joined row of problem cards
   ========================================================================== */
.pain { padding-top: var(--section-space); padding-bottom: var(--section-space); display: flex; flex-direction: column; align-items: center; gap: 56px; }
.pain-head { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.pain-title {
  font-family: "Anton", var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8.6vw, 116px);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.pain-line { display: block; }
/* Scroll fill: script.js splits the title into letters that start light and turn ink in reading order */
.pain-title .char { color: var(--char-dim); transition: color .18s ease; }
.pain-title .char.is-filled { color: var(--ink); }
.pain-sub { font-size: 16px; color: var(--ink-muted); }

.pain-grid {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pain-card { padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 10px; }
.pain-card + .pain-card { border-left: 1px solid var(--line); }
.pain-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 36px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--accent-light);
}
.pain-card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.pain-card p { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.pain-note { font-size: 15px; color: var(--ink-muted); }
.pain-note a { color: var(--link); font-weight: 600; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain-card + .pain-card { border-left: 0; }
  .pain-card:nth-child(even) { border-left: 1px solid var(--line); }
  .pain-card:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .pain { gap: 40px; }
  .pain-title { font-size: clamp(30px, 9.2vw, 48px); } /* stays a step below the hero headline on phones */
  .pain-grid { grid-template-columns: 1fr; }
  .pain-card:nth-child(even) { border-left: 0; }
  .pain-card + .pain-card { border-top: 1px solid var(--line); }
  .pain-icon { margin-bottom: 20px; }
}

/* ==========================================================================
   How it works
   ========================================================================== */
.how-wrap { padding: 0 var(--gutter); }
.how {
  max-width: calc(var(--container) - 2 * var(--gutter)); /* lines up with the content of .container sections */
  margin: 0 auto;
  background: var(--tint-steel);
  border-radius: var(--radius-lg);
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* Tiles are joined into one rounded block with a single divider line between them */
.how-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Every inner edge gets the same 1px line so all tiles line up; the lines that touch
   the dark tile are ink, so they read as part of it */
.how-step:nth-child(odd) { border-right: 1px solid var(--line); }
.how-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.how-step:nth-child(2) { border-bottom-color: var(--panel); }
.how-step:nth-child(3) { border-right-color: var(--panel); }
.how-step {
  background: var(--surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.how-step-num {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}
.how-step p { color: var(--ink-muted); }
/* Call-to-action tile: dark, with the accent button pinned to the bottom */
/* The offset shadow fills the 1px corner where the grey divider lines cross, so the tile's corner is square */
.how-step--cta { background: var(--panel); color: var(--on-panel); box-shadow: -1px -1px 0 var(--panel); }
.how-step--cta p { color: var(--dark-muted); }
.how-step--cta .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 720px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); }
  .how-step:nth-child(odd) { border-right: 0; }
  .how-step:nth-child(2) { border-bottom-color: var(--line); }
  .how-step:nth-child(3) { border-bottom: 1px solid var(--panel); }
}
@media (max-width: 600px) { .how { padding: 48px 20px; } }

/* ==========================================================================
   What we automate: option list (left) + vertical slider (right)
   ========================================================================== */
.automate {
  --automate-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.automate-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px;
  border-right: 1px solid var(--line);
}
.automate-intro { display: flex; flex-direction: column; gap: 16px; }
.automate-lead { font-size: 17px; color: var(--ink-muted); max-width: 420px; }

.automate-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.automate-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color .2s ease;
}
.automate-tab:hover, .automate-tab[aria-selected="true"] { color: var(--ink); }
.automate-tab-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
.automate-tab[aria-selected="true"] .automate-tab-icon { background: var(--panel); color: var(--accent-light); }
/* Ink line under the active option */
.automate-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.automate-tab[aria-selected="true"]::after { transform: scaleX(1); }

/* Vertical slider: stretches to the left column's height (at least --automate-height);
   every slide is that tall and the track moves up one slide at a time */
.automate-viewport { position: relative; min-height: var(--automate-height); overflow: hidden; background: var(--paper); }
.automate-track { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.65, 0, .25, 1); }
.automate-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  padding: 48px;
  transition: opacity .5s ease;
}
.automate-slide[inert] { opacity: .25; }
.automate-tag { display: flex; align-items: stretch; margin-bottom: 4px; }
.automate-tag-icon {
  display: grid;
  place-items: center;
  width: 64px;
  background: var(--panel);
  color: var(--on-panel);
}
.automate-tag-word {
  padding: 2px 14px 0;
  background: var(--tag, var(--accent-tint));
  font-family: "Anton", var(--font-display);
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--tag-text, var(--ink));
}
.automate-text { font-size: 17px; line-height: 1.6; max-width: 460px; }
/* Route: the manual steps today versus what happens once the software is connected */
.automate-route {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.route-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
.route-row + .route-row { border-top: 1px solid var(--line); }
.route-label { padding-top: 3px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.route-row--after .route-label { color: var(--ink); font-weight: 500; }
.route-body { display: flex; flex-direction: column; gap: 8px; }
.route-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; }
.route-steps li + li::before { content: "\2192"; margin: 0 8px; font-weight: 400; color: var(--ink-muted); }
.route-text { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.route-row--after .route-text { font-weight: 600; color: var(--ink); }
.automate-cta { margin-top: 6px; }

@media (max-width: 900px) {
  .automate { grid-template-columns: minmax(0, 1fr); }
  .automate-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 24px 8px; gap: 28px; }
  .automate-tabs { border-top: 0; }
  .automate-tab:last-child { border-bottom: 0; }
  .automate { --automate-height: 580px; }
  .automate-slide { padding: 32px 24px; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .automate { --automate-height: 690px; }
  .automate-tag-icon { width: 52px; }
}
@media (max-width: 350px) {
  .automate { --automate-height: 800px; }
}
@media (prefers-reduced-motion: reduce) {
  .automate-track, .automate-slide { transition: none; }
}

/* ==========================================================================
   Services
   ========================================================================== */
/* Follows the automations block directly; its bottom padding already gives the section gap */
.services-section .section { padding-top: 0; }
/* The three plans are joined into one rounded block with single divider lines */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.plan {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan + .plan { border-left: 1px solid var(--line); }
.plan-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--accent-light);
}
/* Stacked on smaller screens, with the scan first */
@media (max-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; }
  .plan { border-top: 1px solid var(--line); }
  .plan--featured { order: -1; border-top: 0; }
}
.plan p { color: var(--ink-muted); flex-grow: 1; }
.plan-cta { align-self: flex-start; margin-top: 10px; }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   Case study
   ========================================================================== */
.case-wrap { padding: 0 var(--gutter); }
.cases { max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* Slides sit side by side and snap one at a time */
.cases-viewport {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.cases-viewport::-webkit-scrollbar { display: none; }
.cases-viewport:focus-visible { outline-offset: 4px; }
/* Photo card: the whole card links to the case. Title and arrow sit on the photo,
   over a dark fade so the white text stays readable on any image. */
.case-card {
  position: relative;
  flex: 0 0 calc((100% - 20px) * 0.62); /* the next card peeks in */
  height: clamp(380px, 42vw, 540px);
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  color: #F6F5F0;
  text-decoration: none;
  background: var(--panel);
}
.case-card:last-child { scroll-snap-align: end; } /* lets the row reach its very end */
.case-card:hover, .case-card:focus-visible { color: #F6F5F0; }
.case-card:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.case-card-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
/* Placeholder until real photos are added: replace the div with <img class="case-card-media" src="…" alt=""> */
div.case-card-media {
  display: flex;
  justify-content: center;
  padding: 72px 32px 0;
  background: repeating-linear-gradient(45deg, var(--case-ph, #5C5B56) 0 14px, color-mix(in srgb, var(--case-ph, #5C5B56) 82%, #000) 14px 28px);
  font-size: 15px;
  text-align: center;
  color: rgba(246, 245, 240, 0.7);
}
.case-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.35) 45%, rgba(10, 9, 8, 0) 70%);
}
.case-card-body {
  position: absolute;
  left: 32px;
  right: 120px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-card-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(246, 245, 240, 0.8); }
.case-card-title { margin: 0; font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.case-card-arrow {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  transition: transform .25s ease, background-color .2s ease;
}
.case-card:hover .case-card-media { transform: scale(1.04); }
.case-card:hover .case-card-arrow { transform: rotate(-45deg); background: var(--accent-hover); }

.cases-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cases-dots { display: flex; gap: 8px; }
.cases-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}
.cases-dot[aria-current="true"] { width: 28px; background: var(--ink); }
.cases-all { margin-left: auto; font-size: 15px; font-weight: 600; text-underline-offset: 4px; }
.cases-arrows { display: flex; gap: 8px; }
.carousel-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.carousel-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .cases-viewport { scroll-behavior: auto; }
  .case-card-media, .case-card-arrow { transition: none; }
}
/* Before/after bars (case detail page) */
.compare {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
}
.compare-row { display: flex; align-items: center; gap: 12px; }
.compare-label { width: 56px; font-size: 14px; color: var(--ink-muted); }
.compare-track { flex: 1; display: flex; }
.compare-bar { height: 16px; border-radius: var(--radius-sm); width: 100%; background: var(--ink); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.compare-bar--after { width: 30%; background: var(--accent); box-shadow: inset 0 0 0 1px var(--ink); transition-delay: .25s; }
.compare-value { width: 84px; text-align: right; font-size: 14px; font-weight: 600; }
.compare:not(.is-visible) .compare-bar { transform: scaleX(0); }

@media (max-width: 600px) {
  .case-card { flex-basis: 86%; height: 420px; }
  .case-card-body { left: 20px; right: 84px; bottom: 22px; }
  .case-card-title { font-size: 22px; }
  .case-card-arrow { right: 20px; bottom: 20px; width: 52px; height: 52px; }
  .carousel-btn { width: 44px; height: 44px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-wrap { padding: var(--section-space) var(--gutter) 0; }
.contact {
  max-width: calc(var(--container) - 2 * var(--gutter)); /* lines up with the content of .container sections */
  margin: 0 auto;
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.contact-intro { flex: 1 1 340px; min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: 16px; }
.contact-intro p { font-size: 17px; line-height: 1.6; }

.contact-card {
  flex: 1 1 420px;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contact-list li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { padding-top: 0; }
.contact-icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.contact-item { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.contact-value { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
a.contact-value { text-decoration: none; }
a.contact-value:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.contact-call { gap: 10px; }
.contact-alt-link { font-size: 15px; font-weight: 600; text-underline-offset: 4px; }
.contact-note { font-size: 14px; color: var(--ink-muted); margin-top: -8px; }

/* Form fields (used by the free-scan popup) */
.form-row { display: flex; flex-wrap: wrap; gap: 18px; }
.field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.field textarea { padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-error { font-size: 13px; color: var(--danger); min-height: 0; }
.form-note { font-size: 13px; color: var(--ink-muted); }

@media (max-width: 600px) {
  .contact { padding: 24px; }
  .contact-card { padding: 20px; }
  .contact-actions .btn { width: 100%; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 860px; }
.faq-list { display: flex; flex-direction: column; }
.faq-list details { border-top: 1px solid var(--line); padding: 22px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  flex: none;
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 500;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin-top: 12px; color: var(--ink-muted); }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */
.cta { background: var(--panel); color: var(--on-panel); }
.cta-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 176px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.cta h2 { font-size: clamp(42px, 5.4vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; }
.cta em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -0.01em; }
.cta p { font-size: 20px; line-height: 1.5; color: var(--dark-muted); max-width: 540px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding-top: 12px; }

@media (max-width: 600px) { .cta-inner { padding-top: 112px; padding-bottom: 112px; } }

/* Footer in the header's floating style: a white card plus a pill for the legal row */
.site-footer { padding: 20px 20px 20px; color: var(--ink); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-inner { max-width: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
  padding: 56px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(20, 20, 19, 0.04);
}
.footer-brand { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 24px; }
.footer-brand .brand-name { font-size: 24px; }
.socials { display: flex; align-items: center; gap: 8px; }
.socials a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-pill); transition: background-color .15s ease; }
.socials a:hover { background: var(--paper); }

.footer-cols { flex: 999 1 640px; min-width: 0; display: flex; flex-wrap: wrap; gap: 40px; }
.footer-col { flex: 1 1 160px; display: flex; flex-direction: column; gap: 18px; }
.footer-col--wide { flex: 2 1 340px; }
.footer-col .label { color: var(--ink-muted); }
.footer-col a { color: var(--ink-muted); transition: color .15s ease; }
.footer-col a:hover { color: var(--ink); }
.footer-contact { font-style: normal; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.footer-contact .label { color: var(--ink-muted); margin-bottom: 4px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
@media (pointer: coarse) { .footer-contact a { min-height: 44px; } }
.footer-contact svg { flex: none; color: var(--ink); }
.footer-subcols { display: flex; flex-wrap: wrap; gap: 18px 40px; }
.footer-subcols > div { flex: 1 1 140px; display: flex; flex-direction: column; gap: 18px; }

.footer-bottom {
  min-height: 56px;
  padding: 10px 28px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(20, 20, 19, 0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  align-items: center;
}
.legal { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.site-footer .legal a { color: var(--ink-muted); }
.site-footer .legal a:hover { color: var(--ink); }

/* Text roll on hover (spans added by script.js): the text slides up and fades out,
   an identical copy slides in from below. Desktop only; elsewhere the colour change remains. */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.roll-a, .roll-b { display: block; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.roll-b { position: absolute; left: 0; top: 0; transform: translateY(100%); opacity: 0; }
.site-footer a.has-roll:hover, .site-footer .cc-footer-link.has-roll:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .has-roll:hover .roll-a, .has-roll:focus-visible .roll-a { transform: translateY(-100%); opacity: 0; }
  .has-roll:hover .roll-b, .has-roll:focus-visible .roll-b { transform: none; opacity: 1; }
}
.copyright { font-size: 14px; color: var(--ink-muted); }
@media (pointer: coarse) {
  .legal { gap: 0 24px; }
  .site-footer .legal a, .legal .cc-footer-link { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 820px) {
  .site-footer { padding: 16px; }
  .footer-top { padding: 32px 24px; border-radius: var(--radius-lg); gap: 40px; }
  .footer-bottom { border-radius: var(--radius-lg); padding: 18px 24px; }
}
/* Phone: Diensten and Bedrijf side by side, sectors full width in two columns, so the footer stays compact */
@media (max-width: 600px) {
  .footer-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 20px; }
  .footer-col--wide { grid-column: 1 / -1; order: 1; }
  .footer-subcols { flex-wrap: nowrap; gap: 18px 20px; }
  .footer-subcols > div { flex: 1 1 0; min-width: 0; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Without JS, show everything */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .compare:not(.is-visible) .compare-bar { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 12px 32px; padding: 0 var(--gutter); }
  .marquee-track li { margin-right: 0; }
  .marquee-dup { display: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .compare-bar { transition: none; }
  .compare:not(.is-visible) .compare-bar { transform: none; }
}

/* ==========================================================================
   404 page
   ========================================================================== */
.not-found-inner { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding-top: 140px; padding-bottom: var(--section-space); text-align: center; }
.not-found-code { font-family: "Anton", var(--font-display); font-size: clamp(120px, 22vw, 260px); line-height: 0.9; color: var(--accent); }
.not-found-text { max-width: 480px; font-size: 18px; color: var(--ink-muted); }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }