:root {
  --navy: #0e2744;
  --navy-2: #14304f;
  --navy-3: #1b3d61;
  --green: #1db954;
  --green-dark: #159a45;
  --ink: #0e2744;
  --muted: #6b7c90;
  --line: #e6edf4;
  --bg: #f5f8fb;
  --white: #ffffff;
  --orange: #f59e0b;
  --shadow: 0 24px 60px rgba(14, 39, 68, 0.14);
  --shadow-sm: 0 8px 24px rgba(14, 39, 68, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.app-root { min-height: 100vh; background: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 650;
  cursor: pointer;
  transition: 0.15s ease;
}
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 18px rgba(29, 185, 84, 0.28); }
.btn-primary:hover { background: var(--green-dark); }
.btn-ghost { background: #fff; color: var(--navy); border: 1px solid #d7e0ea; }
.btn-ghost:hover { background: #f8fafc; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

.pub-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.logo-word {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}
.logo small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #5b6b80;
  margin-top: 3px;
}
.logo-mark {
  height: 46px;
  width: auto;
  aspect-ratio: 126 / 172;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}
.logo-header { font-size: 20px; gap: 13px; }
.logo-header .logo-mark { height: 54px; }
.logo-header small { font-size: 13.5px; margin-top: 3px; }
.logo-sidebar {
  color: #fff;
  gap: 11px;
  font-size: 14.5px;
}
.logo-sidebar .logo-mark { height: 40px; }
.logo-sidebar small { display: none; }
.logo-mobile { font-size: 16px; gap: 9px; }
.logo-mobile .logo-mark { height: 36px; }
.logo-compact { font-size: 14.5px; gap: 8px; }
.logo-compact .logo-mark { height: 34px; }
.logo-compact small { display: none; }

.boot-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--navy);
}
.boot-screen img { height: 56px; width: auto; }
.boot-screen strong { font-size: 20px; letter-spacing: -0.04em; }
.boot-screen span { color: var(--muted); font-size: 14px; }

.mini-side .logo, .phone-body .logo { font-size: 10px; gap: 6px; }
.mini-side .logo-mark, .phone-body .logo-mark { height: 24px; width: auto; }
.mini-side .logo-word, .phone-body .logo-word { font-size: 10px; }
.mini-side .brand { margin: 0 2px 14px; }
.pub-nav {
  max-width: 1200px; margin: 0 auto; padding: 13px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pub-nav > a { display: flex; align-items: center; min-width: 0; }
.pub-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; color: var(--navy); }
.pub-links a:hover { color: var(--green-dark); }
.pub-actions { display: flex; align-items: center; gap: 16px; font-weight: 600; font-size: 14px; }
.disclaimer {
  background: #eef3f8; color: #617388; text-align: center;
  font-size: 12.5px; padding: 9px 16px; border-top: 1px solid #e5ecf3; border-bottom: 1px solid #e5ecf3;
}
.disclaimer i {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid #8ea0b3; font-style: normal; font-size: 11px; margin-right: 6px; vertical-align: middle;
}
.disclaimer-en { display: block; margin-top: 4px; font-weight: 500; color: #6b7c90; }
.disclaimer-kvk { background: #f8fafc; font-weight: 600; color: #4b5d73; }

.hero {
  max-width: 1200px; margin: 0 auto; padding: 52px 28px 20px;
  display: grid; grid-template-columns: 0.92fr 1.18fr; gap: 28px; align-items: start;
}
.kicker {
  color: var(--green); font-weight: 800; letter-spacing: 0.08em; font-size: 12px; margin: 0 0 16px;
  display: inline-block; border-bottom: 3px solid var(--green); padding-bottom: 6px;
}
.hero h1, .page h1 { font-size: 42px; line-height: 1.12; letter-spacing: -0.045em; margin: 0 0 16px; }
.hero h1 em { font-style: normal; color: var(--green); }
.lead { color: var(--muted); max-width: 44ch; margin: 0 0 26px; font-size: 16px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px 7px 7px; font-size: 13px; color: var(--muted); box-shadow: var(--shadow-sm);
}
.ai-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--green); }
.ai-dot.demo-dot { background: var(--navy); }

.stage { position: relative; min-height: 560px; padding: 8px 70px 48px 0; }
.desktop-frame {
  background: #fff; border: 1px solid #d9e3ee; border-radius: 18px;
  box-shadow: var(--shadow); overflow: hidden; height: 500px;
  display: grid; grid-template-columns: 158px 1fr; text-decoration: none; color: inherit;
}
.mini-side { background: var(--navy); color: #c5d3e2; padding: 14px 10px; font-size: 11px; font-weight: 600; }
.mini-side .brand { color: #fff; font-size: 11px; margin: 0 6px 16px; line-height: 1.2; }
.mini-side div { padding: 8px 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.mini-side .active { background: #1e4a73; color: #fff; box-shadow: inset 3px 0 0 var(--green); }
.mini-badge { background: var(--green); color: #fff; border-radius: 99px; padding: 0 6px; font-size: 10px; }
.mini-main { background: #f6f8fb; padding: 12px 12px 10px; min-width: 0; }
.mini-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11px; }
.mini-head b { font-size: 16px; }
.mini-user { display: flex; align-items: center; gap: 8px; color: var(--muted); text-align: right; }
.mini-ava { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #7dd3c7, #334155); }
.mini-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
.mini-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 9px; color: var(--muted); }
.mini-card b { display: block; font-size: 16px; color: var(--ink); }
.mini-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 8px; }
.mini-list, .mini-ai { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.mini-list h4, .mini-ai h4 { margin: 0 0 8px; font-size: 11px; }
.mini-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 9px; }
.mini-row .sender, .mini-row .sender svg { width: 22px; height: 22px; border-radius: 6px; }
.mini-row:last-child { border-bottom: 0; }
.mini-ai { background: #eef6ff; position: relative; }
.mini-new { position: absolute; top: 8px; right: 8px; background: var(--orange); color: #fff; font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.mini-ai p { margin: 0 0 6px; font-size: 10px; font-weight: 700; }
.mini-ai li { font-size: 9px; color: var(--muted); margin: 4px 0; }
.mini-link { color: #2563eb; font-size: 13px; font-weight: 700; }
.mini-ai .mini-link { font-size: 10px; }

.phone-frame {
  position: absolute; right: -8px; bottom: 8px; width: 232px; height: 456px;
  background: #111827; border-radius: 32px; padding: 10px 8px 14px;
  box-shadow: var(--shadow); z-index: 3; text-decoration: none; color: inherit;
}
.phone-screen { background: #fff; height: 100%; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.phone-notch { width: 72px; height: 8px; background: #111827; border-radius: 8px; margin: 8px auto 0; }
.phone-body { padding: 8px 10px 0; flex: 1; overflow: hidden; }
.phone-hello { font-size: 15px; font-weight: 800; margin: 10px 0 2px; }
.phone-co { font-size: 10px; color: var(--muted); margin-bottom: 10px; }
.phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phone-nav { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); padding: 8px 4px; font-size: 8px; text-align: center; color: var(--muted); font-weight: 700; }
.phone-nav span.active { color: var(--green-dark); }

.features {
  max-width: 1200px; margin: 8px auto 0; padding: 36px 28px 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature h3 { margin: 0 0 4px; font-size: 17px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }
.icon-circle {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--green);
  color: var(--green); display: grid; place-items: center; flex: none;
}

.trust {
  background: #eef3f8; padding: 18px 28px; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; flex-wrap: wrap; color: var(--navy); font-weight: 600; font-size: 14px;
}
.trust-left { display: flex; gap: 28px; flex-wrap: wrap; }
.q-mini { text-align: right; }
.q-mini b { display: block; letter-spacing: 0.08em; }
.q-mini span { font-size: 12px; font-weight: 500; color: var(--muted); }

.pub-footer { background: var(--navy); color: #c5d0dc; padding: 26px 28px; font-size: 13px; }
.pub-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.footer-brand { display: inline-flex; margin-bottom: 10px; }
.footer-note { color: #9fb0c3; }
.pub-footer .logo { font-size: 16px; }
.pub-footer .logo-mark { height: 36px; }
.q-brand { text-align: right; color: #fff; font-weight: 800; }
.q-brand span { display: block; font-size: 12px; font-weight: 500; color: #9fb0c3; }

.page { max-width: 880px; margin: 0 auto; padding: 48px 24px 80px; }
.steps { display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.step b { width: 48px; height: 48px; border-radius: 50%; background: #e8f8ee; color: var(--green-dark); display: grid; place-items: center; }
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.price-card { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.price-card.hl { border-color: var(--green); box-shadow: 0 10px 30px rgba(29, 185, 84, 0.16); }
.price-card .amt { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
.price-card ul { padding-left: 18px; color: var(--muted); }
.form { display: grid; gap: 12px; max-width: 480px; }
.form input, .form textarea, .form select { border: 1px solid #d5dee8; border-radius: 12px; padding: 12px 14px; background: #fff; }
.note { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--muted); font-size: 13px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px 1fr; background: var(--bg); }
.sidebar { background: var(--navy); color: #c9d6e4; display: flex; flex-direction: column; padding: 18px 12px; }
.side-logo { color: #fff; margin: 4px 4px 22px; display: flex; }
.side-logo .logo-sidebar { font-size: 15px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #c9d6e4; font-weight: 600; font-size: 14px; }
.nav-item:hover { background: var(--navy-3); color: #fff; }
.nav-item.active { background: #1e4a73; color: #fff; box-shadow: inset 3px 0 0 var(--green); }
.nav-item .badge { margin-left: auto; background: var(--green); color: #fff; min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; }
.side-foot { margin-top: auto; }

.app-main { min-width: 0; }
.demo-banner {
  background: #eef3f8;
  color: #4b5d73;
  font-size: 12.5px;
  padding: 10px 28px;
  border-bottom: 1px solid #e5ecf3;
  line-height: 1.45;
}
.demo-banner a { font-weight: 700; color: var(--navy); margin-left: 10px; white-space: nowrap; }
.demo-banner .disclaimer-en { display: block; margin-top: 2px; }
.app-top { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px 10px; }
.app-top h1 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.profile { display: flex; align-items: center; gap: 10px; position: relative; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(160deg, #9fd6cf 0%, #64748b 55%, #1e293b 100%);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #dbe4ee;
}
.who { text-align: right; }
.who b { display: block; font-size: 13px; }
.who span { color: var(--muted); font-size: 12px; }
.bell {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; cursor: pointer; position: relative;
}
.bell[data-count]::after {
  content: attr(data-count); position: absolute; top: -4px; right: -4px;
  background: var(--green); color: #fff; font-size: 10px; min-width: 16px; height: 16px;
  border-radius: 99px; display: grid; place-items: center;
}
.panel {
  position: absolute; right: 0; top: 48px; width: 320px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 12; overflow: hidden;
}
.panel header { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 700; }
.n-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.n-item.unread { background: #f0fdf4; }
.n-item small { color: var(--muted); }

.app-body { padding: 8px 28px 40px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.metric {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-sm); cursor: pointer;
  color: inherit;
}
.metric:hover { border-color: #c9d8e6; }
.metric b { display: block; font-size: 28px; letter-spacing: -0.04em; }
.metric span { color: var(--muted); font-size: 13px; }
.m-icon { width: 42px; height: 42px; border-radius: 12px; background: #e8f8ee; color: var(--green-dark); display: grid; place-items: center; flex: none; }

.dash-grid { display: grid; grid-template-columns: 1.45fr 0.9fr; gap: 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 12px; box-shadow: var(--shadow-sm); }
.card h2 { margin: 0 0 12px; font-size: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-head a { color: #2563eb; font-size: 13px; font-weight: 700; }
.mail-row {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 6px; border-radius: 12px; cursor: pointer;
}
.mail-row:hover { background: #f8fafc; }
.mail-row p { margin: 0; font-size: 13px; color: var(--muted); }
.sender { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; flex: none; }
.sender svg { width: 42px; height: 42px; display: block; }
.tag { display: inline-flex; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag-action { background: #dbeafe; color: #1d4ed8; }
.tag-new { background: #e8f8ee; color: var(--green-dark); }
.tag-done { background: #eef2f6; color: #64748b; }
.time { color: var(--muted); font-size: 12px; text-align: right; display: grid; gap: 4px; justify-items: end; }

.ai-card { position: relative; background: #eef6ff; }
.ai-new { position: absolute; top: 14px; right: 14px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 4px 8px; border-radius: 6px; }
.ai-meta { color: var(--muted); font-size: 13px; }
.ai-meta div { margin: 8px 0; display: flex; gap: 8px; align-items: flex-start; }
.ai-meta strong { color: var(--ink); }
.check { color: var(--green); font-weight: 800; }

.doc-layout { display: grid; grid-template-columns: 1.3fr 0.8fr; gap: 16px; }
.preview-paper { min-height: 420px; background: linear-gradient(#fff, #f8fafc); border: 1px dashed #cbd5e1; border-radius: 12px; padding: 28px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.actie-centrum { margin-top: 16px; }
.ws-section-title { margin: 4px 0 0; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.trust-conf {
  display: grid; gap: 2px; margin: 8px 0 10px; font-size: 13px; color: var(--ink);
}
.trust-conf small { color: var(--muted); font-size: 11px; font-weight: 500; }
.ws-item {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: #fff;
}
.ws-item-done { background: #f8fafc; }
.ws-item-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.ws-item p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.ws-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ws-instruct { display: grid; gap: 8px; margin: 10px 0 8px; }
.ws-instruct label { font-size: 13px; font-weight: 700; display: grid; gap: 6px; }
.ws-instruct textarea { font-weight: 500; width: 100%; border: 1px solid #d5dee8; border-radius: 12px; padding: 10px 12px; }
.actie-centrum h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.actie-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.suggest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 4px; }
.suggest-card {
  background: #f4f9ff; border: 1px solid #d7e6f5; border-radius: 14px; padding: 14px 14px 12px;
}
.suggest-inline { margin: 0 0 16px; }
.suggest-kicker {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--green-dark);
  margin-bottom: 6px;
}
.suggest-card h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: -0.02em; }
.suggest-card p { margin: 0; font-size: 13px; color: var(--muted); }
.suggest-reason { margin-top: 8px !important; }
.suggest-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.pref-card { margin-top: 16px; }
.pref-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.pref-list label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; cursor: pointer; }
.pref-add { display: flex; gap: 8px; flex-wrap: wrap; }
.pref-add input { flex: 1; min-width: 220px; border: 1px solid #d5dee8; border-radius: 12px; padding: 10px 12px; }
.ws-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.ws-tab {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); background: #fff; color: var(--navy);
}
.ws-tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pref-hero { margin: 0 0 16px; }
.pref-hero h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.03em; }
.pref-hero p { margin: 0; color: var(--muted); }
.pref-flash { background: #e8f8ee; border-radius: 12px; padding: 10px 12px; color: var(--green-dark); font-weight: 600; }
.pref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 16px; }
.pref-tile {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff;
  box-shadow: var(--shadow-sm);
}
.pref-tile h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: -0.02em; }
.pref-tile p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.pref-edit { display: grid; gap: 8px; }
.pref-edit input { width: 100%; border: 1px solid #d5dee8; border-radius: 12px; padding: 10px 12px; }
.pref-add-stack { display: grid; gap: 10px; }
.pref-add-stack label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.memory-card, .memory-dash { margin-top: 16px; }
.memory-dash { max-width: 420px; }
.memory-dash p { margin: 0 0 10px; }
.memory-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.memory-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 600; }
.learn-card { margin: 0 0 12px; background: #f0fdf4; border-color: #bbf7d0; }
.ai-states { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 12px; }
.ai-states li { padding: 5px 10px; border-radius: 999px; background: #eef2f6; color: var(--muted); font-size: 11px; font-weight: 700; }
.ai-states li.done { background: #e8f8ee; color: var(--green-dark); }
.ai-states li.now { background: var(--navy); color: #fff; }
.goal-card em { font-style: normal; font-size: 11px; color: var(--green-dark); margin-left: 6px; }
.actie-row {
  display: flex; justify-content: space-between; gap: 10px; align-items: flex-start;
  padding: 10px 8px; border-radius: 12px; border: 1px solid transparent;
}
.actie-row:hover { background: #f8fafc; border-color: var(--line); }
.actie-row p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.actie-empty { color: var(--muted); font-size: 13px; margin: 0; }
.ai-steps {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0 0 16px; list-style: none;
}
.ai-steps li {
  padding: 6px 12px; border-radius: 999px; background: #eef2f6; color: var(--muted);
  font-size: 12px; font-weight: 700;
}
.ai-steps li.done { background: #e8f8ee; color: var(--green-dark); }
.ai-steps li.now { background: var(--navy); color: #fff; }
.goal-grid { display: grid; gap: 8px; margin-bottom: 12px; }
.goal-card {
  text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px;
  padding: 10px 12px; cursor: pointer;
}
.goal-card strong { display: block; font-size: 14px; }
.goal-card span { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.goal-card.on { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); background: #f3fbf6; }
.goal-card:disabled { opacity: 0.65; cursor: default; }
.ai-instruct { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.ai-instruct textarea { font-weight: 500; width: 100%; resize: vertical; }
.draft-meta { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.draft-paper {
  background: linear-gradient(#fff, #f8fafc); border: 1px dashed #cbd5e1; border-radius: 12px;
  padding: 20px 22px; margin-bottom: 12px;
}
.draft-paper pre {
  margin: 0; white-space: pre-wrap; font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px; line-height: 1.55; color: var(--ink);
}
.draft-editor {
  width: 100%; min-height: 280px; border: 1px solid #d5dee8; border-radius: 12px;
  padding: 14px; margin-bottom: 12px; font: inherit; line-height: 1.55;
}
.draft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dagstart { margin-bottom: 16px; background: linear-gradient(180deg, #f4fbf7 0%, #fff 88px); }
.dagstart-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dagstart-hero h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.03em; }
.dagstart-hero p { margin: 0; color: var(--muted); }
.dagstart-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
}
.dagstart-stats div {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.dagstart-stats b { display: block; font-size: 24px; letter-spacing: -0.04em; }
.dagstart-stats span { color: var(--muted); font-size: 13px; }
.dagstart-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dagstart-cols h3, .dagstart-summary h3 {
  margin: 0 0 8px; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase;
}
.dag-item {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: #fff;
}
.dag-item-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.dag-item-head strong { display: block; font-size: 14px; }
.dag-item-head span { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
.dag-item p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.dag-rule { color: var(--ink) !important; font-weight: 650; }
.dag-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; }
.dag-now .dag-dot { background: #ef4444; }
.dag-soon .dag-dot { background: #f59e0b; }
.dag-done .dag-dot { background: var(--green); }
.why-ai { margin: 0 0 10px; }
.why-ai summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: #2563eb; list-style: none;
}
.why-ai summary::-webkit-details-marker { display: none; }
.why-ai p { margin: 8px 0 4px; font-size: 12px; font-weight: 700; color: var(--ink); }
.why-ai ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.why-ai li { display: flex; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
.dagstart-summary {
  margin-top: 8px; padding: 14px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--line);
}
.dagstart-summary p { margin: 0 0 8px; font-size: 14px; }
.dagstart-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.adm-metrics { margin-bottom: 16px; }
.adm-metrics .metric { cursor: default; }
.adm-invoice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.adm-invoice { margin: 0; box-shadow: none; }
.adm-invoice.on { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.adm-invoice-hit { display: block; color: inherit; }
.adm-invoice .ai-meta { margin: 8px 0 10px; }
.adm-choose {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.adm-choose strong { display: block; margin-bottom: 8px; font-size: 14px; }
.adm-propose-grid { display: grid; gap: 10px; }
.adm-propose {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.adm-propose p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.adm-flag { font-size: 18px; }
.adm-cat-list { display: grid; gap: 10px; }
.adm-cat {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.adm-cat p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.adm-cat-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-cat-form select, .pref-edit select {
  border: 1px solid #d5dee8; border-radius: 12px; padding: 8px 10px; background: #fff;
}
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.q-chat { position: relative; z-index: 40; }
.q-chat-fab {
  position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border: 0;
  border-radius: 50%; background: var(--navy); color: #fff; padding: 0;
  box-shadow: 0 10px 28px rgba(14, 39, 68, 0.32), 0 0 0 4px rgba(29, 185, 84, 0.16);
  cursor: pointer; z-index: 41; display: grid; place-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.q-chat-fab img { width: 30px; height: 30px; object-fit: contain; display: block; pointer-events: none; }
.q-chat-fab-dot {
  position: absolute; right: 6px; top: 6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--green); border: 2px solid #fff;
}
.q-chat-fab:hover { background: var(--navy-2); transform: translateY(-1px); }
.q-chat.open .q-chat-fab {
  background: var(--navy);
  box-shadow: 0 12px 28px rgba(14, 39, 68, 0.36), 0 0 0 4px rgba(29, 185, 84, 0.34);
}
.q-chat-panel {
  position: fixed; right: 22px; bottom: 92px; width: min(380px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 120px)); background: #fff; border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr;
  overflow: hidden; z-index: 41;
}
.q-chat-panel[hidden] { display: none !important; }
.q-chat-head {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--navy); color: #fff;
}
.q-chat-head-mark { width: 28px; height: 28px; object-fit: contain; }
.q-chat-head span { display: block; font-size: 11px; font-weight: 500; opacity: 0.78; }
.q-chat-close {
  border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.q-chat-panel [data-qchat-body] {
  display: grid; grid-template-rows: 1fr auto auto auto; min-height: 0;
}
.q-chat-log {
  overflow: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(#f7fafc, #fff 48%);
}
.q-chat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.q-chat-row-bot { justify-content: flex-start; }
.q-chat-row-user { justify-content: flex-end; }
.q-chat-avatar {
  width: 26px; height: 26px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 50%; padding: 3px;
}
.q-chat-msg { max-width: min(292px, 86%); padding: 10px 12px; font-size: 13.5px; line-height: 1.45; }
.q-chat-msg p { margin: 0 0 8px; }
.q-chat-msg p:last-child { margin-bottom: 0; }
.q-chat-bot {
  background: #fff; border: 1px solid #e3ebf3; color: var(--ink);
  border-radius: 16px 16px 16px 5px; box-shadow: 0 4px 12px rgba(14, 39, 68, 0.04);
}
.q-chat-user {
  background: var(--navy); color: #fff;
  border-radius: 16px 16px 5px 16px;
}
.q-chat-list, .q-chat-bullets { margin: 0 0 8px; padding-left: 18px; }
.q-chat-bullets { list-style: disc; }
.q-chat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.q-chat-note { margin: 8px 0 0 !important; font-size: 11px; color: var(--muted); }
.q-chat-user .q-chat-note { color: #dbeafe; }
.q-chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.q-chat-chip {
  border: 1px solid #d7e0ea; background: #fff; color: var(--navy); border-radius: 999px;
  padding: 7px 11px; font-size: 12px; font-weight: 650; cursor: pointer;
}
.q-chat-chip:hover { background: #f4f9ff; border-color: #c5d6e8; }
.q-chat-form { display: flex; gap: 8px; padding: 0 12px 8px; }
.q-chat-form input {
  flex: 1; border: 1px solid #d5dee8; border-radius: 999px; padding: 10px 14px;
}
.q-chat-foot { margin: 0; padding: 0 12px 10px; font-size: 11px; color: var(--muted); }
.urgency-high { background: #fee2e2; color: #b91c1c; }
.urgency-mid { background: #ffedd5; color: #c2410c; }
.urgency-low { background: #e8f8ee; color: var(--green-dark); }
.mob-hello { display: none; }
.mobile-top, .bottom-nav { display: none; }

@media (max-width: 1080px) {
  .hero, .features, .pricing, .dash-grid, .doc-layout, .actie-cols, .suggest-grid, .pref-grid, .dagstart-cols, .dagstart-stats, .adm-invoice-grid { grid-template-columns: 1fr; }
  .mini-cards { grid-template-columns: 1fr 1fr; }
  .mini-split { grid-template-columns: 1fr; }
  .pub-links { display: none; }
  .phone-frame { position: static; width: min(280px, 100%); height: 520px; margin: 20px auto 0; display: block; }
  .stage { min-height: 0; padding: 0; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .mobile-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--line); }
  .mobile-top .logo { font-size: 16px; }
  .mobile-top .logo-mark { height: 36px; }
  .logo-header { font-size: 18px; gap: 11px; }
  .logo-header .logo-mark { height: 47px; }
  .logo-header small { font-size: 12.5px; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 10; }
  .bottom-nav a { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
  .bottom-nav a.active { color: var(--green-dark); }
  .q-chat-fab { bottom: 72px; }
  .q-chat-panel { bottom: 138px; height: min(480px, calc(100vh - 160px)); }
  .app-top, .app-body { padding-left: 16px; padding-right: 16px; }
  .demo-banner { padding-left: 16px; padding-right: 16px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .hero h1, .page h1 { font-size: 30px; }
  .mob-hello { display: block; font-size: 22px; font-weight: 800; margin: 0 0 12px; }
  .mob-hello span { font-size: 14px; font-weight: 500; color: var(--muted); }
}