:root {
  /* Forward8 brand — from www.forward8.nl prototype */
  --navy-deep: #0B1132;   /* nacht — hero, footer */
  --navy: #141E50;        /* navy — header, primary */
  --navy-lift: #1A2560;
  --paper: #F4F6FA;       /* koel licht */
  --paper-shade: #E8ECF6;
  --orange: #E78A47;      /* oranje op donker */
  --ember: #9C5313;       /* oranje op licht */
  --white: #FFFFFF;
  --ink: #141E50;
  --ink-2: #5C6480;       /* lopende tekst op licht */
  --ink-3: #646E93;       /* micro-labels */
  --dim: rgba(255, 255, 255, 0.60);
  --hair: rgba(255, 255, 255, 0.14);
  --hair-d: #D9DEEA;

  /* Semantic aliases used by the app */
  --primary: var(--navy);
  --primary-dark: var(--navy-deep);
  --accent: var(--orange);
  --bg: var(--navy);
  --bg-soft: var(--navy-lift);
  --border: var(--hair);
  --text: #FFFFFF;
  --text-muted: var(--dim);
  --strong: #16a34a;
  --possible: #b45309;
  --weak: #94a3b8;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(20, 30, 80, 0.08), 0 8px 24px rgba(20, 30, 80, 0.06);

  /* --f/--d zijn één familie (Poppins), zoals de bron-site die ook één familie
     voor kop en tekst gebruikt. De systeem-uitwijkingen staan erbij zodat de
     site leesbaar blijft als fonts.googleapis.com geblokkeerd wordt. */
  --f: 'Poppins', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* --m (Geist Mono) is op #6ace4b5b uit de sheet gehaald: de opdrachtgever
     koos ervoor de label-role mee te laten doen met Poppins, zoals de rest van
     de site. Hoofdletters en letter-spacing zijn wél gebleven, zodat die regels
     nog als label lezen. Het lettertype wordt ook niet meer bijgeladen — zie
     de fonts-link in index.html en legal/*.html. */
  --d: 'Poppins', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Betamaxx-feedbackknop: de widget CSS gebruikt var(--bmx-font, inherit) overal.
     Zet hem expliciet op dezelfde familie als de rest van de sheet, dan is de
     bubbelfonte gelijk aan de rest en hangt hij niet af van waar hij in de DOM staat.
     De widget-bestanden zelf blijven onveranderd (stock). */
  --bmx-font: 'Poppins', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* Native form controls render in dark mode so the dropdown/option popup is readable
   (white text on a white popup was unreadable). The option list gets an explicit
   dark background + light text as a fallback. */
select { color-scheme: dark; }
select option { color: var(--text); background: var(--bg-soft); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--f);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

.site-header {
  border-bottom: 1px solid var(--hair);
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 34px; width: auto; display: block; }
.site-nav a { margin-left: 24px; color: var(--dim); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--white); }

/* ---- Header-menu "AI Ventures" ----
   Zelfde uiterlijk als de gewone headerlinks, maar dan een knop die een lijst
   openklapt. Breed: zwevend paneel onder de knop. Smal (<= 640px): in de normale
   stroom, als gewone uitgeklapte lijst — geen zwevend paneel op een telefoon. */
.nav-group { position: relative; display: inline-block; margin-left: 24px; }
.nav-trigger {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: var(--dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--white); }

/* Menuknop voor de telefoon (#6ac7b3e6, vormgeving herzien in #6ac88f47).
   Wordt door nav.js ingezet en blijft op brede schermen verborgen. Het icoon
   bestaat uit drie echte streepjes (spans); de eerdere versie tekende twee
   randen met padding, dus er stonden maar twee streepjes naast het woord
   "Menu". De toegankelijke naam staat in aria-label. Bij openen worden de
   streepjes een kruis. Kleuren: bestaande tokens. */
.nav-toggle {
  display: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--dim);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { color: var(--white); }
.nav-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.nav-toggle-bars { position: relative; display: block; width: 24px; height: 18px; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 8px; }
.nav-toggle-bars span:nth-child(3) { top: 16px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars span { transition: none; }
}
.nav-trigger::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
}
.nav-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--navy-lift);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 20;
}
.nav-menu[hidden] { display: none; }
.nav-menu li { margin: 0; }
.nav-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--dim);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.nav-menu a:hover, .nav-menu a:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

#app { flex: 1; width: 100%; padding: 40px 20px 80px; }

/* Lange Nederlandse samenstellingen ("Abonnementsvoorwaarden",
   "Gebruiksvoorwaarden") zijn op een telefoon breder dan het scherm. Zonder
   deze regel loopt zo'n woord buiten de pagina en gaat de hele site zijwaarts
   scrollen — de abonnementspagina was daardoor onleesbaar. */
h1, h2, h3 { overflow-wrap: break-word; }

.site-footer { border-top: 1px solid var(--hair); background: var(--navy); color: var(--dim); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; font-size: 0.9rem; color: var(--dim); }
.footer-nav a { margin-left: 16px; color: var(--dim); text-decoration: none; }
.footer-nav a:hover { color: var(--white); }
/* TIJDELIJK verborgen op verzoek: Privacy, Voorwaarden, Abonnement, Cookies.
   De footer staat statisch in index.html en alle legal/*.html; alleen de links
   naar /legal/ gaan weg, Admin en de © blijven. De pagina's zelf bestaan nog.
   Terugzetten = deze ene regel verwijderen. */
.footer-nav a[href^="/legal/"] { display: none; }

/* ---- Landing / search ---- */
.hero {
  text-align: center;
  padding: 64px 0 40px;
  background: var(--navy);
  color: var(--white);
  margin-bottom: 32px;
}
.hero .eyebrow {
  font-family: var(--d);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
}
.hero h1 { font-size: 2.2rem; margin: 0 0 8px; font-family: var(--d); color: var(--white); }
.hero p { color: var(--dim); margin: 0 0 32px; }
/* De verplaatste hero-kop van de home (#6ac694bb) staat op About als lead-regel
   onder de paginakop. Geen nieuwe kleur of lettertype: dezelfde tokens als .hero h1. */
.hero .hero-lead { color: var(--white); font-family: var(--d); font-size: 1.35rem; margin: 0 0 14px; max-width: 720px; }

/* De homepage-hero is zwaarder dan de andere heroes. De modifier staat er
   bewust op: de portfolio- en de about-pagina delen .hero en moeten hun
   kleinere titel houden (tickets #6ac56023 / #6ac60009). Alleen de grootte en
   het ademruim van de kop veranderen — kleur, lettertype en velden blijven. */
.hero--home { padding: 72px 0 80px; }
.hero--home h1 {
  font-size: 3.4rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

/* Cijferbalk — de vijf cijfers van de oude marketing-site, in de hero zodat
   ze zonder scrollen zichtbaar zijn. Breed op een rij, lijst op de telefoon. */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 40px;
  margin: 0 0 28px;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-fig {
  font-family: var(--d);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.stat-lab {
  font-family: var(--d);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* Legal-regel onder in de footer, letterlijk van de oude marketing-site
   (DESIGN-NOTES §2.7.4). Statische HTML op alle zes pagina's — de vijf
   juridische pagina's laden geen app.js — met een scheidingslijn ervoor en
   een jaartal dat nav.js berekent. */
.footer-legal {
  padding: 0 0 24px;
  font-size: 0.82rem;
  color: var(--dim);
}
.footer-legal p { margin: 2px 0; }

/* Eén herbruikbare oranje scheidingslijn tussen de homepage-blokken, zoals de
   oude site zijn blokken brak. Geen nieuwe kleur: het bestaande oranje. */
.section-rule {
  border: none;
  border-top: 2px solid var(--accent);
  height: 0;
  margin: 48px 0;
  opacity: 1;
}

/* De vier pijlers. */
.krachten h2, .team h2 { font-size: 1.9rem; margin: 0 0 12px; color: var(--white); }
.krachten .lead { color: var(--dim); margin: 0 0 28px; max-width: 720px; }
.krachten-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}
.kracht-nr {
  font-family: var(--d);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin: 0 0 4px;
}
.kracht h3, .person h3 { margin: 0 0 6px; color: var(--white); }
.kracht p, .person p { color: var(--dim); margin: 0; }

/* Team — portret naast naam, rolregel en bio (zie furtherop voor .portret). */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}
/* Team — portret naast de tekst, overgenomen van www.forward8.nl
   (DESIGN-NOTES §9.3). Geen nieuwe kleur of lettertype: de portretkleuren die
   de oude site gebruikte, staan al in :root. Twee kleine afwijkingen, beide
   bewust: de initialen-watermark neemt var(--hair) in plaats van de witwaarde
   van de oude site, en de placeholder tekent in var(--dim) — dat is exact
   dezelfde kleur als daar. */
.person {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
  align-content: start;
  min-width: 0;
}
.person > .portret { grid-row: span 4; }
.portret {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--navy-deep);
  border: 1px solid var(--hair);
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portret::before {
  content: attr(data-init);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.04em;
  color: var(--hair);
}
.portret span {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: var(--d);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.portret img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.08) brightness(0.94);
}
/* Duotoon: de twee foto's hebben heel verschillend licht; deze laag maakt er
   één geheel van zodra de foto geladen is (klasse .has komt uit app.js). */
.portret::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: color;
  opacity: 0;
  pointer-events: none;
}
.portret.has::after { opacity: 0.66; }
.portret.has::before,
.portret.has span { opacity: 0; }

.person-role {
  font-family: var(--d);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin: 0 0 8px !important;
}

.search-box {
  display: flex;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  box-shadow: var(--shadow);
  background: rgba(255, 255, 255, 0.08);
}
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  padding: 10px 16px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
}
.search-box input::placeholder { color: rgba(255, 255, 255, 0.55); }
.search-box button {
  border: none;
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  /* Zonder deze regel valt een <button> terug op de browserdefault van 13,33px;
     dat is op elke schermgrootte te klein voor een hoofdknop (#6ac7b3e6). */
  font-size: 1rem;
  padding: 10px 24px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.search-box button:hover { background: var(--ember); }
.examples { text-align: center; margin-top: 24px; color: var(--dim); font-size: 0.95rem; }
.examples button {
  border: 1px solid var(--hair);
  /* idem: zonder font-size geeft de browser 13,33px (#6ac7b3e6) */
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 4px;
  cursor: pointer;
  color: var(--white);
  font-family: inherit;
}
.examples button:hover { border-color: var(--orange); color: var(--orange); }

/* ---- De logo-band op de home ----
   Twee identieke groepen, de band schuift precies één groep op (-50%) en
   begint dan opnieuw — dus geen sprong. De tegels zijn wit, als op de
   zoekresultaten: deze woordmerken zijn voor licht papier gemaakt en vallen
   op het navy anders niet op. */
.logo-reel {
  position: relative;
  height: 58px;
  margin-top: 44px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* De band staat buiten de stroom: een baan van max-content breed duwt anders
   de pagina op een smal scherm breder dan het venster (#app is hier een
   flex-item met margin:0 auto en wordt zo breed als zijn breedste kind). */
.logo-reel-track {
  position: absolute;
  top: 6px;
  left: 0;
  display: flex;
  width: max-content;
  animation: reel-scroll 30s linear infinite;
}
.logo-reel:hover .logo-reel-track,
.logo-reel:focus-within .logo-reel-track { animation-play-state: paused; }
.reel-group { display: flex; flex: 0 0 auto; }
.reel-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 46px;
  max-width: 190px;
  padding: 8px 14px;
  margin-right: 18px;
  background: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.reel-item:hover, .reel-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.reel-item img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@keyframes reel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Wie beweging uitschakelt, krijgt de band niet draaiend maar schuifbaar —
   de bedrijven blijven zo gewoon bereikbaar. */
@media (prefers-reduced-motion: reduce) {
  .logo-reel { overflow-x: auto; }
  .logo-reel-track { animation: none; }
  .reel-group[aria-hidden="true"] { display: none; }
}

/* ---- Results ---- */
.result-head { margin-bottom: 24px; }
.result-head h2 { margin: 0 0 4px; }
.result-head .muted { color: var(--text-muted); }

/* Loading visual for async actions (search, AI draft, submit) */
.loading-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  color: var(--text-muted);
  font-weight: 500;
}
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 3px solid var(--hair);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.filters select, .filters input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 6px; }

/* Kaarttitel die tegelijk een link is: dezelfde verschijning als de titel, zonder
   onderstreping. Stond eerder als style="…" in de HTML — een Content-Security-
   Policy met style-src 'self' laat inline stijlen niet toe, dus het hoort hier. */
.card h3 .card-link { color: inherit; text-decoration: none; }

/* Knoppenrij onderaan een profielkaart, met lucht erboven (was style="margin-top:20px"). */
.actions.actions-spaced { margin-top: 20px; }
.card .meta { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 8px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.badge.strong { background: rgba(22, 163, 74, 0.18); color: #4ade80; }
.badge.possible { background: rgba(180, 83, 9, 0.18); color: #fbbf24; }
.badge.weak { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
.score { font-weight: 700; }

/* ── Venture-woordmerken ────────────────────────────────────────────────
   De logo's komen uit de "AI ventures"-sectie van forward8.nl, die op koel
   papier staat; dit platform is donker navy. Een wit tegeltje houdt élk
   woordmerk leesbaar — het donkerblauwe van MAD-Quality en QonneQt verdwijnt
   anders volledig in de achtergrond — zonder per logo een eigen variant.
   Het tegeltje is bewust een eigen vlak, net als de ico-tegels op forward8.nl. */
.venture-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  max-width: 190px;
  padding: 8px 14px;
  margin: 0 0 12px;
  background: #fff;
  border-radius: 8px;
}
.venture-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.venture-profile .venture-logo { height: 56px; padding: 10px 16px; }
.v-thumb { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 30px; padding: 4px 6px; background: #fff; border-radius: 6px; vertical-align: middle; }
.v-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ---- Portfolio (de acht ventures van de oude marketing-site) ----
   Zelfde kaartjes-taal als de zoekresultaten: --bg-soft vlak, --border, --radius.
   Geen nieuwe kleuren en geen beweging — de woordmerken staan op een wit tegeltje
   zoals hierboven, zodat ook het donkerblauwe merk leesbaar blijft op navy. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.pf-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
}
.pf-card:hover, .pf-card:focus-visible {
  border-color: var(--orange);
  outline: none;
}
.pf-cat {
  font-family: var(--d);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.pf-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-name { font-family: var(--d); font-weight: 700; font-size: 1.1rem; color: var(--white); overflow-wrap: break-word; }
.pf-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  max-width: 130px;
  padding: 5px 10px;
  background: #fff;
  border-radius: 6px;
}
.pf-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Tekst-tegel voor een bedrijf zonder woordmerk (Nela): nooit een gebroken afbeelding. */
.pf-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--orange);
  color: #fff;
  border-radius: 6px;
  font-family: var(--d);
  font-weight: 700;
}
.pf-line { color: var(--dim); font-size: 0.95rem; line-height: 1.5; overflow-wrap: break-word; }
.pf-url { font-family: var(--d); font-size: 0.78rem; color: var(--text-muted); overflow-wrap: break-word; }

/* Het logo-veld in de admin: zelfde donkere invoer als de rest van de admin,
   want een kaal <input> valt hier terug op browser-wit. */
.logo-edit { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.logo-edit input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 1rem; background: rgba(255, 255, 255, 0.06); color: var(--text); }
.logo-edit input::placeholder { color: rgba(255, 255, 255, 0.5); }
.logo-edit input:focus { outline: none; border-color: var(--orange); }
/* Bestandskiezer naast de uploadknop (#6ad9c2a1): geen kader of tekstveld-opvulling. */
.logo-edit input[type=file] { padding: 6px 0; border: 0; background: none; }
.reason { color: var(--text-muted); }
.no-match { text-align: center; padding: 40px; color: var(--text-muted); }
.no-match form { margin-top: 16px; display: flex; gap: 8px; justify-content: center; }
.no-match input { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; background: rgba(255, 255, 255, 0.06); color: var(--text); }
.no-match input::placeholder { color: rgba(255, 255, 255, 0.5); }
.no-match button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; font-family: inherit; }

/* ---- Forms ---- */
.form { max-width: 560px; margin: 0 auto; }
.form label { display: block; font-weight: 600; margin: 16px 0 6px; }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.form input::placeholder, .form textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.form textarea { min-height: 100px; resize: vertical; }
.form .hint { color: var(--text-muted); font-size: 0.85rem; }
.form .actions { margin-top: 24px; display: flex; gap: 12px; }
/* ---- Admin: venture bewerken na goedkeuring (#6acf2632) ---- */
.admin-edit { max-width: none; margin: 12px 0 0; }
.admin-edit .field-error { margin: 6px 0 0; color: #fca5a5; font-size: 0.9rem; }
.admin-edit .field-error:empty { display: none; }
.admin-edit [aria-invalid="true"] { border-color: #fca5a5; }
.admin-edit .actions { margin-top: 20px; }
.logo-hint { margin: 2px 0 6px; font-size: 0.9rem; }
/* ---- Contactformulier (#6ac88f07) ---- */
.contact-form .req { color: var(--orange); }
.contact-form .opt { color: var(--dim); font-weight: 400; font-size: 0.85rem; }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: #fca5a5; }
.contact-form .field-error { margin: 6px 0 0; color: #fca5a5; font-size: 0.9rem; }
.contact-form textarea { min-height: 140px; }
/* Honeypot: voor mensen onzichtbaar en buiten beeld, voor bots een gewoon veld.
   Niet display:none, want sommige bots slaan verborgen velden over. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 12px; }

.btn {
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}
.btn:disabled { opacity: 0.7; cursor: default; }
/* Inline spinner inside a button (loading state) */
.btn .spinner {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: middle;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
}
.btn-secondary .spinner {
  border-color: var(--hair);
  border-top-color: var(--orange);
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--ember); }
.btn-secondary { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); }
.btn-link {
  background: none;
  border: none;
  color: var(--ember);
  padding: 4px 0;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.95rem;
  text-decoration: underline;
}
.btn-danger { background: #dc2626; color: #fff; }

/* ---- Modal (AI draft loading) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 17, 50, 0.55);
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 420px;
  width: 100%;
  padding: 32px 28px;
  text-align: center;
}
.modal-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.modal-spinner .spinner {
  width: 36px;
  height: 36px;
  border-width: 4px;
  border-color: var(--hair);
  border-top-color: var(--orange);
}
.modal h3 { margin: 0 0 8px; font-family: var(--d); }
.modal .hint { margin: 0; }
.word-count { text-align: right; font-size: 0.85rem; color: var(--text-muted); }
.status-banner { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.status-banner.info { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.status-banner.warn { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.status-banner.ok { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.status-banner.err { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
/* Foutmelding van "Concept schrijven met AI" (#6ad1c06a). Eerst plakte hij aan
   de knop erboven en zaten kop, reden, uitleg en knoppen op 2–4px van elkaar;
   nu heeft elk deel een eigen blok met lucht, en staan de twee knoppen op één
   rij. Linkerrand als signaal, zodat het vlak niet op een gewone kaart lijkt. */
.status-banner.ai-fout {
  margin: 20px 0 24px;
  padding: 20px 24px;
  border-left: 4px solid #ef4444;
  line-height: 1.55;
}
.ai-fout p { margin: 0; }
.ai-fout-titel { font-weight: 600; font-size: 1.05rem; color: #fecaca; }
.ai-fout-reden { margin-top: 4px !important; font-size: 0.9rem; opacity: 0.8; }
.ai-fout-uitleg { margin-top: 12px !important; color: var(--text); }
.ai-fout-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* Wit op oranje haalt 2.58:1 — onder de leesnorm van 4.5:1. Binnen deze melding
   staat de hoofdknop daarom in navy op oranje (6.1:1). De site-brede .btn-accent
   heeft hetzelfde probleem, maar die aanpassen raakt elke oranje knop en is een
   ontwerpkeuze voor de opdrachtgever (DESIGN-NOTES §37). */
.ai-fout-acties .btn-accent { color: var(--navy); }
.ai-fout-acties .btn-accent:hover { background: #f0a06a; }
@media (max-width: 640px) {
  .status-banner.ai-fout { padding: 16px 18px; }
  .ai-fout-acties .btn { flex: 1 1 100%; }
}

/* ---- Logo-vak in het registratieformulier (#6ad9404d) ----
   Zelfde adem als de melding erboven: één blok met lucht rond de onderdelen.
   Bewust géén rode of oranje rand: "geen logo gevonden" is een feit, geen
   fout — een profiel zonder logo is compleet, en niets hier is verplicht.
   De proef staat op wit: de site is donker, en een logo met donkere lijnen
   op een donkere tegel is onzichtbaar — op wit is het elk logo. */
.logo-vak { margin: 24px 0; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); }
.logo-vak p { margin: 0; }
.logo-vak-titel { font-weight: 600; font-size: 1.05rem; margin-bottom: 8px !important; }
.logo-vak .hint + .hint { margin-top: 6px !important; }
.logo-vak-rij { display: flex; align-items: center; gap: 16px; }
.logo-vak-proef { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 8px; padding: 6px; flex: 0 0 auto; }
.logo-vak-opties { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.logo-vak-optie { flex: 1 1 260px; }
.logo-vak-optie label { margin: 0 0 6px; }
.logo-vak-optie .actions { margin-top: 10px; }
.logo-vak-fout { margin-top: 12px !important; color: #fca5a5; }
@media (max-width: 640px) {
  .logo-vak { padding: 16px 18px; }
  .logo-vak-proef { width: 56px; height: 56px; }
}

/* ---- Admin ---- */
.admin-login { max-width: 400px; margin: 60px auto; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 32px; box-shadow: var(--shadow); text-align: center; }
.admin-login-brand { display: flex; justify-content: center; margin-bottom: 20px; }
.admin-login-brand .brand-logo { height: 40px; width: auto; }
.admin-login h2 { margin: 0 0 8px; font-family: var(--d); }
.admin-login .hint { margin: 0 0 24px; }
.admin-login label { display: block; font-weight: 600; margin: 16px 0 6px; text-align: left; }
.admin-login input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.admin-login input::placeholder { color: rgba(255, 255, 255, 0.5); }
.admin-login input:focus { outline: none; border-color: var(--orange); }
.admin-login .actions { margin-top: 24px; display: flex; justify-content: center; }
.admin-login .actions .btn { width: 100%; }
.admin-nav { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.admin-nav a { padding: 8px 14px; border-radius: 8px; background: var(--bg-soft); color: var(--text); text-decoration: none; font-weight: 500; }
.admin-nav a.active { background: var(--primary); color: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
th { color: var(--text-muted); font-weight: 600; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.pill.draft { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
.pill.submitted { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.pill.screened { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
.pill.published { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.pill.rejected { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.pill.subscription_pending { background: rgba(168, 85, 247, 0.18); color: #d8b4fe; }

/* ---- Subscription ---- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.tier { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; }
.tier h3 { margin: 0 0 8px; }
.tier .price { font-size: 1.4rem; font-weight: 700; color: var(--text-muted); margin-bottom: 16px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 20px; color: var(--text-muted); }
.tier li { margin: 6px 0; }

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; gap: 8px; }
  /* Header op de telefoon (#6ac7b3e6). Vóór deze wijziging stapelden logo en
     alle vier de links onder elkaar: 201px aan een scherm van 492px (41%),
     vastgezet met position: sticky, waardoor het zoekvak onder de vouw viel.
     Nu: één rij met logo en menuknop; de links komen eronder als ze opengeklapt
     zijn. Zonder JavaScript blijft de oude stapeling staan (de knop wordt door
     nav.js geplaatst en de verborgen toestand hangt aan .js-nav). */
  .header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 8px;
    height: auto;
    min-height: 56px;
    padding: 6px 0;
  }
  .nav-toggle { display: inline-flex; }
  .hero h1 { font-size: 1.6rem; }
  .hero { padding: 40px 0 20px; }
  .hero p { margin-bottom: 24px; }
  /* De homepage-kop blijft groter dan de andere heroes, maar op een telefoon
     past 3.4rem niet; dit is nog steeds duidelijk groter dan de 1.6rem van
     daarvoor (gemeten 25.6px → 30.4px). De cijferbalk staat niet meer op de
     home (#6ac60009), dus het gedwonge knijpen hieronder is weer teruggezet. */
  .hero--home { padding: 24px 0 48px; }
  .hero--home h1 { font-size: 1.9rem; line-height: 1.2; margin-bottom: 6px; }
  .stats { gap: 10px 0; margin-bottom: 20px; }
  .stat { flex-direction: row; align-items: baseline; gap: 8px; width: 100%; justify-content: center; }
  .stat-fig { font-size: 1.25rem; }
  .section-rule { margin: 36px 0; }
  .krachten-grid, .team-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Op een telefoon is 196px portret te breed naast de bio; de foto blijft
   naast de tekst staan, maar smaller, zodat de tekst leesbaar blijft. */
  .person { grid-template-columns: 108px minmax(0, 1fr); gap: 0 18px; }
  .portret::before { font-size: 1.6rem; }
  .krachten h2, .team h2 { font-size: 1.45rem; }

  /* Kopformaat: de browserdefault van 2em (32px) is op een telefoon te groot
     en een lange samenstelling paste er niet op. Afbreken op lettergrepen
     (lang="nl") leest prettiger dan midden in een woord breken. */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
  h1, h2, h3 { hyphens: auto; }

  /* Raakvlakken: een link van 21px hoog is met een duim niet te raken. */
  .brand { min-height: 44px; }
  .site-nav { display: flex; justify-content: center; gap: 4px; }
  /* Met de menuknop van nav.js is de navigatie standaard dicht; zonder dat
     script (class .js-nav afwezig) blijft alles zichtbaar zoals het was. */
  .js-nav .site-nav { display: none; }
  /* Volledig scherm (#6ac88f47): het geopende menu is een vaste laag over de
     hele viewport in plaats van een uitklapper onder de header. Logo en kruisknop
     blijven erboven (z-index 2) zodat je altijd kunt sluiten; de links beginnen
     eronder. De laag scrolt zelf als het scherm te laag is (liggend), en de
     pagina erachter scrolt niet mee (html.nav-open). */
  .js-nav .site-nav.is-open {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 72px 20px 32px;
    background: var(--navy-deep);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: nav-layer-in 0.18s ease-out;
  }
  @media (prefers-reduced-motion: reduce) { .js-nav .site-nav.is-open { animation: none; } }
  .js-nav .brand, .js-nav .nav-toggle { position: relative; z-index: 2; }
  html.nav-open { overflow: hidden; }
  .js-nav .site-nav.is-open > a,
  .js-nav .site-nav.is-open .nav-trigger {
    font-size: 1.5rem;
    min-height: 60px;
    padding: 0;
    color: var(--white);
    justify-content: flex-start;
    border-bottom: 1px solid var(--hair);
  }
  .js-nav .site-nav.is-open .nav-trigger { width: 100%; justify-content: space-between; }
  .js-nav .site-nav.is-open .nav-trigger::after { display: block; border-left-width: 6px; border-right-width: 6px; border-top-width: 6px; }
  .js-nav .site-nav.is-open .nav-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
  .js-nav .site-nav.is-open .nav-menu a {
    justify-content: flex-start;
    font-size: 1.2rem;
    min-height: 52px;
    padding: 0 0 0 18px;
    color: var(--dim);
    border-radius: 0;
    border-bottom: 1px solid var(--hair);
  }
  .js-nav .site-nav.is-open .nav-menu a:hover,
  .js-nav .site-nav.is-open .nav-menu a:focus-visible { background: none; color: var(--white); }
  @keyframes nav-layer-in { from { opacity: 0; } to { opacity: 1; } }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; padding: 0 10px; }
  /* Het AI Ventures-menu wordt op een telefoon geen zwevend paneel maar een
     gewone uitgeklapte lijst onder de knop, in de normale stroom. */
  .nav-group { margin-left: 0; flex: 1 1 100%; }
  .nav-trigger { width: 100%; justify-content: center; }
  .nav-trigger::after { display: none; }
  .nav-menu,
  .nav-menu[hidden] {
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  /* Het submenu volgt zijn eigen knop: daarvóór forceerde deze regel
     display: block ook over het hidden-attribuut, waardoor het AI Ventures-
     menu op de telefoon nooit dicht kon en de header 88px extra kostte. */
  .nav-menu { display: block; }
  .nav-menu[hidden] { display: none; }
  .nav-menu a { justify-content: center; white-space: normal; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .examples button { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; }
  .search-box button { min-height: 44px; }

  /* Stack the pill search box on small screens: input on top, button below */
  .search-box { flex-direction: column; border-radius: 16px; }
  .search-box input { width: 100%; }
  .search-box button { width: 100%; }

  /* Let action buttons wrap instead of overflowing */
  .form .actions { flex-wrap: wrap; }
  .form .actions .btn { flex: 1 1 auto; }

  /* No-match email form: stack input + button */
  .no-match form { flex-direction: column; }
  .no-match form input, .no-match form button { width: 100%; }

  /* Footer nav links wrap onto multiple lines */
  .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
  .footer-nav a { margin-left: 0; }

  /* Admin tables scroll horizontally instead of breaking the layout */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Reduce padding on the main app area for small screens */
  #app { padding: 24px 16px 60px; }

  .card { padding: 16px; }
  .no-match { padding: 24px 16px; }
}

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 12px; }
  .krachten-grid, .team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Modelgebruik (#6ada797c): getallen rechts, staafje naast de per-dag-regels. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-balk { width: 34%; }
.ai-balk span { display: block; height: 8px; border-radius: 4px; background: var(--orange, #e07a3f); min-width: 2px; }