/* FLAi visitekaartjes
   Huisstijl: FLAi/LEESMIJ.md. Donker (Carbon) is de hoofdversie van het merk.
   Radius-systeem: vlakken 16px · knoppen 12px · invoervelden 10px · chips volledig rond · avatar rond. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Merkpalet */
  --flai-violet: #7C3AED;
  --flai-indigo: #4F46E5;
  --flai-blue: #2563EB;
  --flai-cyan: #22D3EE;
  --flai-ink: #0A0B14;
  --flai-paper: #F6F7FB;
  --flai-gradient: linear-gradient(105deg, #7C3AED 0%, #4F46E5 34%, #2563EB 66%, #22D3EE 100%);

  /* Interface (uit het merkboek) */
  --bg: #0A0B14;
  --surface: #12141F;
  --line: #232637;
  --text: #E8EAF4;
  --dim: #9AA0BC;
  --ok: #6EE7B7;
  --bad: #FCA5A5;
  --control: #5D6280;              /* rand van invoervelden: ≥ 3:1 op Carbon (WCAG 1.4.11) */
  --surface-hover: #161826;        /* vlak, 1 stap lichter */
  --surface-press: #1A1D2C;
  --line-strong: #33374D;
  --accent: var(--flai-violet);
  --focus: var(--flai-cyan);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-achtige sheet-curve */

  /* Diepte: schaduwen getint naar Carbon, niet puur zwart */
  --shadow-md: 0 12px 32px -8px rgba(5, 6, 14, 0.7);
  --shadow-lg: 0 30px 80px -10px rgba(5, 6, 14, 0.75);
  --scrim: rgba(5, 6, 14, 0.72);

  --r-surface: 16px;
  --r-btn: 12px;
  --r-input: 10px;
  --pad: 20px;

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);          /* ook bij over-scrollen (rubberband) blijft alles Carbon */
  /* Geen zichtbare scrollbalk; scrollen met muis, touch en toetsenbord blijft gewoon werken */
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent;
}
html::-webkit-scrollbar { display: none; }

::selection { background: color-mix(in srgb, var(--flai-violet) 55%, transparent); color: #fff; }

/* Tik-gedrag: geen blauwe tik-flits, geen tekstselectie of menu bij lang drukken op knoppen */
a, button, summary, label { touch-action: manipulation; }
.btn, .link, .copy, .icon-btn, .fold summary, .dock {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  margin: 0;
  min-height: 100svh;             /* svh: verspringt niet als de adresbalk in- of uitschuift */
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;      /* lange woorden breken af bij grote tekst, nooit horizontaal overlopen */
  font-feature-settings: "ss01", "cv11";
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.dim { color: var(--dim); }

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

/* ---------- Kaart ---------- */
.card {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
}

@media (min-width: 560px) {
  body {
    padding: 48px 16px;
    background:
      radial-gradient(60% 50% at 50% 0%, rgba(58, 42, 134, 0.35), transparent 70%),
      radial-gradient(40% 40% at 85% 100%, rgba(37, 99, 235, 0.10), transparent 70%),
      var(--bg);
  }
  .card {
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
}

/* ---------- Cover + profiel ---------- */
.cover {
  position: relative;
  height: 168px;
  background: url("/assets/img/cover.svg") center / cover no-repeat, var(--bg);
}
/* De "fast lane": één dunne lijn in de merkgradient */
.cover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--flai-gradient);
  opacity: 0.7;
}

.profile-body { padding: 0 var(--pad); }

.avatar {
  position: relative;
  width: 116px; height: 116px;
  margin-top: -58px;
  border-radius: 50%;
  padding: 3px;
  background: var(--flai-gradient);
}
.avatar picture { display: block; width: 100%; height: 100%; }
.avatar img, .avatar .initials {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid var(--bg);
}
.avatar img { object-fit: cover; background: var(--surface); }
.initials {
  display: grid;
  place-items: center;
  background: var(--flai-gradient);
  color: #fff;
  font-weight: 600;
  font-size: 2.375rem;
  letter-spacing: 0.02em;
}

.name {
  margin-top: 18px;
  font-size: 1.875rem;
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.role {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.role-2 {
  margin-top: 1px;
  font-size: 0.9375rem;
  color: var(--dim);
}
.city {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--dim);
}
.city .icon { width: 16px; height: 16px; }
.bio {
  margin-top: 16px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 36ch;
  text-wrap: pretty;
}

/* ---------- Knoppen ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: left;               /* bij grote tekst mag een knoplabel afbreken i.p.v. uit de knop te lopen */
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); transition-duration: 60ms; }
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 100vmax rgba(5, 6, 14, 0.14); }
.btn-quiet:active { background: var(--surface-press); }

.btn-primary {
  color: #fff;
  background: var(--flai-gradient);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-quiet {
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 100vmax rgba(255, 255, 255, 0.06); }
  .btn-quiet:hover { border-color: var(--line-strong); background: var(--surface-hover); }
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 28px var(--pad) 0;
}
/* Basis in rem: bij grote tekst (200%) staat "Delen" onder de hoofdknop in plaats van ernaast */
.cta .btn-primary { flex: 999 1 12rem; }
.cta .btn-quiet { flex: 1 1 auto; }

/* ---------- Contactlijst ---------- */
.links { padding: 16px var(--pad) 0; }
.links ul {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
}
.row { display: flex; align-items: stretch; }
.row + .row { border-top: 1px solid var(--line); }

.link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 14px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease;
}
.link:active { background: var(--surface-press); transition-duration: 0ms; }
.link:focus-visible { outline-offset: -2px; border-radius: 0; }
.ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  transition: transform 160ms var(--ease-out);
}
.link:active .ico { transform: scale(0.94); }
.txt { display: flex; flex-direction: column; min-width: 0; }
.lbl { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.val.is-flash { color: var(--ok); }
.val, .sheet-actions .btn > span { transition: opacity 140ms ease, filter 140ms ease; }
.is-swapping { opacity: 0; filter: blur(2px); }
.val {
  font-size: 0.875rem;
  color: var(--dim);
  overflow-wrap: anywhere;        /* lang e-mailadres breekt af i.p.v. afgekapt te worden */
  font-variant-numeric: tabular-nums;
}
.trail { margin-left: auto; color: var(--dim); width: 18px; height: 18px; transition: transform 200ms var(--ease-out), color 200ms ease; }

.copy {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  flex: none;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, background-color 200ms ease;
}
.copy:focus-visible { outline-offset: -2px; border-radius: 0; }
.copy .icon { grid-area: 1 / 1; transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.copy .icon-done { opacity: 0; transform: scale(0.6); color: var(--ok); }
.copy.is-done .icon:not(.icon-done) { opacity: 0; transform: scale(0.6); }
.copy.is-done .icon-done { opacity: 1; transform: scale(1); }
.copy:active { background: var(--surface-press); color: var(--text); transition-duration: 0ms; }
.copy:active .icon { transform: scale(0.9); }
.copy.is-done:active .icon-done { transform: scale(0.9); }

@media (hover: hover) and (pointer: fine) {
  .link:hover { background: var(--surface-hover); }
  .link:hover .trail { transform: translate(2px, -2px); color: var(--text); }
  .copy:hover { color: var(--text); background: var(--surface-hover); }
}

/* ---------- Blokken ---------- */
/* Typetrap (Taste): naam 30 → sectiekop 22 → tekst 16-17 → meta 14 → eyebrow 12.
   Sectiekoppen zijn duidelijk groter en zwaarder dan alles in hun blok, ook dan bedrijfsnamen. */
.block { padding: 44px var(--pad) 0; }
.block h2 {
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.block + .block { padding-top: 40px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text);
}

/* ---------- Mijn bedrijven & projecten ----------
   Eén kaart per venture. Kleur komt uit data.mjs (--v-accent) en blijft een zachte tint,
   zodat elk logo en elke merkkleur op de Carbon-basis werkt. */
.ventures { display: grid; gap: 10px; }
.venture {
  --v-accent: var(--flai-violet);
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--v-accent) 13%, transparent), transparent 62%),
    var(--surface);
  overflow: hidden;
}
/* Dunne accentlijn bovenaan in de kleur van de venture */
.venture::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v-accent) 70%, transparent), transparent);
}
.venture-head { display: flex; align-items: center; gap: 14px; }
.venture-logo {
  display: grid;
  place-items: center;
  width: 2.875rem; height: 2.875rem; /* rem: groeit mee met grote tekst (monogram past altijd) */
  flex: none;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--v-accent) 35%, var(--line));
}
.venture-logo img { width: 32px; height: 32px; object-fit: contain; }

/* Uitgelicht (eerste bedrijf, nu FLAi): 1px rand in de eigen kleur (FLAi: merkgradient 105°),
   groter logo, iets meer lucht. Werkt voor elk bedrijf met featured: true in data.mjs. */
.venture-featured {
  --v-border: linear-gradient(105deg, var(--v-accent), color-mix(in srgb, var(--v-accent) 25%, var(--line)) 60%, var(--line));
  padding: 20px;
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--v-accent) 16%, transparent), transparent 62%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--v-border) border-box;
}
.venture-flai { --v-border: var(--flai-gradient); }
.venture-featured::before { display: none; }
.venture-featured .venture-logo { width: 3.5rem; height: 3.5rem; border-radius: 14px; }
.venture-featured .venture-logo img { width: 40px; height: 40px; }
.venture-featured .venture-name { font-size: 1.1875rem; }
.venture-featured .venture-tagline { margin-top: 14px; font-size: 1rem; }
/* Geen logo: initialen van het bedrijf, getint in de eigen accentkleur */
.venture-mono {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--v-accent) 40%, var(--text));
}
.venture-id { display: flex; flex-direction: column; min-width: 0; }
.venture-name { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.venture-role { font-size: 0.875rem; color: var(--dim); }
.venture-tagline { margin-top: 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--text); }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; gap: 8px; }
.venture-link { margin-top: 14px; }
.venture-link .trail { margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .venture-link:hover .trail { transform: translate(2px, -2px); color: var(--text); }
}
/* Altijd één kolom: de kaart is max. 480px breed, twee kolommen braken namen en rollen
   over drie à vier regels (bv. "HU Consultancy / Zelfstandig boekhouder in bijberoep"). */

/* ---------- Uitklappers: "Meer over mij" en "Stuur een bericht" ----------
   Zelfde vorm en gedrag voor beide (native <details>, dus toetsenbord en schermlezer werken vanzelf).
   Emil: openen 260ms, sluiten 180ms (sneller), ease-out, geen bounce; inhoud fade + 6px. */
:root { interpolate-size: allow-keywords; }
.fold {
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
}
.fold summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-surface);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary > .icon:last-child { margin-left: auto; color: var(--dim); transition: transform 240ms var(--ease-out); }
.fold[open] summary > .icon:last-child { transform: rotate(180deg); }
.fold summary:active { background: var(--surface-press); transition-duration: 0ms; }
@media (hover: hover) and (pointer: fine) {
  .fold summary:hover { background: var(--surface-hover); }
}
.fold::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 180ms var(--ease-out), content-visibility 180ms allow-discrete;
}
.fold[open]::details-content {
  block-size: auto;
  transition-duration: 260ms;
}
@media (prefers-reduced-motion: no-preference) {
  .fold[open] > :not(summary) { animation: reveal 260ms var(--ease-out) both; }
  @keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }
}

.about-inner { padding: 2px 16px 18px; }
/* Tussentitels als eyebrow: klein, hoofdletters, ruime letterspatie */
.about-inner h3 {
  margin: 18px 0 2px;
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.about-inner h3:first-child { margin-top: 6px; }

/* Icoon vooraan in een getint vakje, zoals de contactrijen */
.fold summary .lead {
  box-sizing: content-box;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}
.fold summary { padding-left: 12px; }
.fold-inner { padding: 6px 16px 18px; }
.timeline li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  padding: 10px 0;
}
.timeline li + li { border-top: 1px solid var(--line); }
.t-what { font-size: 0.9375rem; font-weight: 500; }
.t-where { grid-row: 2; font-size: 0.875rem; color: var(--dim); }
.t-when {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 0.8125rem; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap;
}
@container (max-width: 22em) {
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .t-when { grid-column: 1; grid-row: auto; align-self: start; margin-top: 2px; white-space: normal; }
}
.t-note { grid-column: 1 / -1; margin-top: 6px; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
/* Opdrachten onder een job: ingesprongen, verbonden door één dunne lijn */
.t-projects {
  grid-column: 1 / -1;
  margin: 10px 0 2px 2px;
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
}
.timeline .t-projects li { padding: 5px 0; border-top: 0; }
.t-projects .t-what { font-size: 0.875rem; }
.t-projects .t-where, .t-projects .t-when { font-size: 0.8125rem; }

/* ---------- Formulier ---------- */
.form { display: grid; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.field input:not([type="checkbox"]), .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--control);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* voorkomt inzoomen op iOS */
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
/* Zelfde focusring als de rest van de site: 2px cyaan (M3) */
.field input:not([type="checkbox"]):focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--control);
  border-radius: var(--r-input);
}
/* Browser-autofill: veld blijft donker in plaats van wit/geel */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 9999s ease 0s;
}
.field [aria-invalid="true"] { border-color: var(--bad) !important; }
.err { font-size: 0.8125rem; color: var(--bad); min-height: 0; }
.err:empty { display: none; }

.btn-submit { width: 100%; }
.form-note { margin-top: -6px; font-size: 0.8125rem; line-height: 1.5; color: var(--dim); }
.btn-submit .icon-spin { display: none; }
.btn-submit.is-loading { pointer-events: none; }
.btn-submit.is-loading .icon:not(.icon-spin) { display: none; }
.btn-submit.is-loading .icon-spin { display: block; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status { font-size: 0.875rem; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--ok); }
.form-status.is-bad { color: var(--bad); }
.form-status a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 48px;
  padding: 22px var(--pad) 4px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--dim);
}
.foot-brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.foot-brand img { width: 20px; height: 20px; flex: none; }

/* ---------- 404 ---------- */
.card-404 .name { margin-top: 20px; }
.card-404 .bio { color: var(--dim); }
.cta-single .btn { flex: 1 1 100%; }
/* Tekst links, zoals de andere hoofdknoppen: witte tekst blijft op het violet-indigo-blauwe deel
   van de gradient (gecentreerd liep hij tot in het cyaan: contrast 3,0:1). */
.cta-single .btn { justify-content: flex-start; gap: 10px; }

/* ---------- Deel-venster ----------
   Desktop: gecentreerd venster. Mobiel (< 560px): bottom sheet die van onderen schuift
   (iOS-achtige curve) en met een veeg omlaag sluit (zie main.js). */
.sheet {
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet::backdrop { background: var(--scrim); }
.sheet-grip { display: none; }
.sheet-inner { padding: 18px 18px 20px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h2 { font-size: 1.0625rem; font-weight: 600; }
.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -8px -10px -8px 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--dim); cursor: pointer;
  transition: color 200ms ease, transform 160ms var(--ease-out);
}
.icon-btn:active { transform: scale(0.94); transition-duration: 60ms; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { color: var(--text); } }
.qr {
  padding: 14px;
  border-radius: var(--r-surface);
  background: var(--flai-paper);
}
.qr-svg { width: 100%; height: auto; }
.sheet-url { margin-top: 12px; text-align: center; font-size: 0.875rem; color: var(--dim); word-break: break-all; }
.sheet-actions { display: grid; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { width: 100%; }

.sheet {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 150ms ease, transform 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete;
}
.sheet[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete;
}
@starting-style { .sheet[open] { opacity: 0; transform: scale(0.96); } }
.sheet::backdrop { transition: opacity 220ms ease, overlay 220ms allow-discrete, display 220ms allow-discrete; opacity: 0; }
.sheet[open]::backdrop { opacity: 1; }
@starting-style { .sheet[open]::backdrop { opacity: 0; } }

@media (max-width: 559px) {
  .sheet {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    opacity: 1;
    transform: translateY(100%);
    transition: transform 240ms var(--ease-drawer), overlay 240ms allow-discrete, display 240ms allow-discrete;
    touch-action: pan-y;
  }
  .sheet[open] {
    opacity: 1;
    transform: translateY(0);
    transition: transform 420ms var(--ease-drawer), overlay 420ms allow-discrete, display 420ms allow-discrete;
  }
  @starting-style { .sheet[open] { opacity: 1; transform: translateY(100%); } }
  .sheet.is-dragging { transition: none; }
  .sheet-grip {
    display: block;
    width: 40px; height: 5px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: var(--line-strong);
  }
  .sheet-inner { padding-top: 10px; }
  .qr { max-width: 280px; margin: 0 auto; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-press);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  font-weight: 500;
  max-width: calc(100vw - 32px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: transform 180ms ease, opacity 160ms ease;
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: transform 280ms var(--ease-out), opacity 200ms ease;
}
/* Stil: alleen voor schermlezers (de bevestiging staat al zichtbaar op de knop of rij zelf) */
.toast.is-quiet { width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Mobiel: de toast staat altijd boven de plek van de snelbalk, ook als die (nog) niet zichtbaar is.
   Zo verspringt hij nooit. */
@media (max-width: 559px) {
  .js .toast { bottom: calc(var(--dock-space) + 10px); }
}
.toast-ico { color: var(--ok); }
.toast-ico .icon { width: 18px; height: 18px; }

/* ---------- Snelbalk (mobiel) ----------
   Verschijnt zodra "Contact opslaan" bovenaan volledig uit beeld is en blijft dan staan
   tot die knop weer in beeld komt (main.js). De kaart krijgt onderaan evenveel ruimte,
   zodat de balk nooit het formulier of de footer afdekt. */
:root { --dock-space: calc(12px + var(--dock-h, 62px) + env(safe-area-inset-bottom)); } /* marge + echte balkhoogte (main.js meet die) */
@media (max-width: 559px) {
  .js .card:not(.card-404) { padding-bottom: calc(var(--dock-space) + 24px); }
  /* Met Tab of "volgende veld" scrolt de browser het gefocuste veld boven de snelbalk,
     zodat het nooit eronder verdwijnt (WCAG 2.4.11). */
  html.js { scroll-padding-bottom: calc(var(--dock-space) + 16px); }
}
.dock {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  display: none;
  align-items: center;
  gap: 10px;
  max-width: 456px;
  margin: 0 auto;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* Rustig in en uit: korte verschuiving + fade, geen bounce.
     Uit is sneller dan in (het systeem reageert, de gebruiker wacht niet). */
  opacity: 0;
  transform: translateY(16px);
  transition: transform 180ms var(--ease-out), opacity 160ms ease;
}
.js .dock { display: flex; }
.dock.is-on {
  opacity: 1;
  transform: translateY(0);
  transition: transform 280ms var(--ease-out), opacity 200ms ease;
}
.dock-av {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  padding: 2px;
  background: var(--flai-gradient);
}
.dock-av img, .dock-av span {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid var(--surface);
  object-fit: cover;
  background: var(--flai-gradient);
  color: #fff; font-size: 0.75rem; font-weight: 650;
}

/* Grote tekst (em-media query schaalt mee met de tekstgrootte van de gsm): naam in de balk weglaten,
   de foto zegt het al; zo blijft er plaats voor "Opslaan" zonder dat iets afgesneden wordt. */


.dock .btn { flex: 1; min-height: 44px; padding: 0 14px; font-size: 0.9375rem; gap: 8px; }
.dock .icon-btn { margin: 0; width: 44px; height: 44px; color: var(--text); }
@media (min-width: 560px) { .js .dock { display: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dock { background: var(--surface); }
}

/* ---------- Opslaan-bevestiging op de hoofdknop ---------- */
.btn .icon-done { display: none; }
.btn.is-done .icon:not(.icon-done) { display: none; }
.btn.is-done .icon-done { display: block; animation: pop 200ms var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: scale(0.85); filter: blur(2px); } }

/* ---------- Formulier verzonden ---------- */
.form-done {
  display: none;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
  text-align: center;
}
.form-done .done-ico {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}
.form-done .done-ico .icon { width: 24px; height: 24px; }
.form-done h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.form-done p { margin-top: 6px; font-size: 0.9375rem; color: var(--dim); }
.form-done .btn { margin-top: 16px; }
.is-sent .form { display: none; }
.is-sent .form-done { display: block; animation: rise 360ms var(--ease-out) both; }

/* ---------- Entree bij laden (bovenste deel) ---------- */
.d0 { --d: 0; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; }
.v0 { --vd: 0; } .v1 { --vd: 1; } .v2 { --vd: 2; } .v3 { --vd: 3; } .v4 { --vd: 4; } .v5 { --vd: 5; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 380ms var(--ease-out) both; animation-delay: calc(var(--d) * 40ms); }
  .cover.rise { animation-name: fade; animation-duration: 500ms; }
  /* Het ene "authored" moment: de fast lane tekent zich één keer van links naar rechts */
  .cover::after { transform-origin: left center; animation: lane 900ms var(--ease-out) 120ms both; }
  @keyframes lane { from { transform: scaleX(0); opacity: 0.2; } }

  /* Lager op de pagina: pas tonen wanneer je erheen scrolt (IntersectionObserver in main.js).
     Alleen met JavaScript actief, zodat niets onzichtbaar blijft als het script niet laadt. */
  .js .reveal:not(.is-in) { opacity: 0; transform: translateY(10px); }
  .js .reveal { transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out); }
  .js .reveal .venture { opacity: 0; transform: translateY(10px); transition: opacity 340ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(60ms + var(--vd) * 40ms); }
  .js .reveal.is-in .venture { opacity: 1; transform: none; }
}

/* Minder beweging: geen verplaatsing of schaal, wel zachte opacity-overgangen
   zodat statuswissels (gekopieerd, venster open) zichtbaar blijven. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .link:active .ico, .copy:active .icon,
  .icon-btn:active { transform: none; }
  .copy .icon, .copy .icon-done, .copy.is-done .icon:not(.icon-done) { transform: none; }
  .link:hover .trail, .venture-link:hover .trail { transform: none; }
  .fold::details-content { transition: none; }
  .fold summary > .icon:last-child { transition: none; }
  .toast, .toast.is-on { transform: translate(-50%, 0); transition: opacity 200ms ease; }
  .sheet, .sheet[open] { transform: none; transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
  .sheet { opacity: 0; }
  .sheet[open] { opacity: 1; }
  @starting-style { .sheet[open] { transform: none; opacity: 0; } }
  .dock, .dock.is-on { transform: none; transition: opacity 200ms ease; }
  .btn.is-done .icon-done { animation: none; }
  .is-sent .form-done { animation: none; }
  .btn-submit.is-loading .icon-spin { animation: pulse 1200ms ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.35; } }
}

@media (max-width: 359px) {
  :root { --pad: 16px; }
  .name { font-size: 1.6875rem; }

}
.form-done:focus { outline: none; }

/* ---------- Ventures: accentkleuren (gegenereerd uit data.mjs) ---------- */
.venture-flai { --v-accent: #7C3AED; }
.venture-clean-and-clear-visuals { --v-accent: #E3A21A; }