/* ─── Base ─── */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--green); color: #000; }

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

/* ─── Background field ─── */
.field {
  position: fixed; inset: 0; z-index: var(--z-field); pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1100px 700px at 78% 12%, rgba(43, 91, 255, 0.28), transparent 60%),
    radial-gradient(900px 600px at 12% 88%, rgba(52, 226, 122, 0.18), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(92, 130, 255, 0.14), transparent 70%),
    var(--bg);
}
.field::before {
  content: ""; position: absolute; inset: -1px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.field::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 3px 3px;
  opacity: .4;
  mix-blend-mode: overlay;
}

/* ─── Noise overlay ─── */
.noise { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-noise); opacity: .06; mix-blend-mode: overlay; }
.noise svg { width: 100%; height: 100%; }

/* ─── Layout ─── */
main { position: relative; z-index: var(--z-content); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

/* ─── Nav ─── */
nav.top {
  position: sticky; top: 0; z-index: var(--z-nav);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(180deg, rgba(19, 22, 42, 0.78), rgba(19, 22, 42, 0.4));
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; position: relative; flex-shrink: 0; }
.brand-name {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--text-wordmark); font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: var(--ink);
}
/* 30px i.p.v. 36: met zeven items (Partner erbij) had de balk 1030px nodig,
   terwijl de links pas onder 900px opgaan in het burgermenu. */
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 14.5px; color: var(--ink-dim); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 500;
  border: 1px solid var(--line-strong);
  transition: all .2s ease;
  white-space: nowrap;
}
.btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.04); }
.btn-primary {
  background: var(--ink); color: #000; border-color: transparent;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 12px 40px rgba(255, 255, 255, 0.25); }

.btn-glow {
  position: relative; isolation: isolate; overflow: hidden;
  background: #2B5BFF; color: #000; border-color: transparent; font-weight: 600;
  box-shadow: 0 10px 40px rgba(43, 91, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  border: none;
}
.btn-glow::before {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 200%; z-index: -1;
  background: linear-gradient(100deg,
    #2B5BFF 0%, #34E27A 16.66%, #5C82FF 33.33%,
    #2B5BFF 50%, #34E27A 66.66%, #5C82FF 83.33%,
    #2B5BFF 100%);
  animation: btn-flow 6s linear infinite;
  will-change: transform;
}
.btn-glow:hover { border: none; transform: translateY(-1px); box-shadow: 0 16px 50px rgba(43, 91, 255, 0.55); background: #2B5BFF; }
.btn-glow .dot { display: none; }
@keyframes btn-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--green); box-shadow: var(--glow-green); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

.nav-burger {
  display: none; flex-direction: column; gap: 5px; padding: 10px; background: none; border: none;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-burger span { width: 22px; height: 1.5px; background: var(--ink); display: block; transition: transform .25s var(--ease), opacity .2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* ─── Mobile nav sheet ─── */
.nav-sheet {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(10, 12, 22, 0.55); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.nav-sheet.open { opacity: 1; pointer-events: auto; }
.nav-sheet-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw);
  background: linear-gradient(180deg, rgba(20, 22, 38, 0.98), rgba(10, 12, 22, 1));
  border-left: 1px solid var(--line-strong);
  padding: 96px 28px 32px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform .3s var(--ease);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
}
.nav-sheet.open .nav-sheet-panel { transform: none; }
.nav-sheet a.sheet-link {
  font-size: 22px; font-weight: 500; color: var(--ink-dim);
  padding: 14px 0; border-bottom: 1px solid var(--line);
  transition: color .15s ease;
}
.nav-sheet a.sheet-link:hover, .nav-sheet a.sheet-link:focus-visible { color: var(--ink); }
.nav-sheet .sheet-cta { margin-top: 24px; justify-content: center; }
.nav-sheet-close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--ink-dim); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
}
.nav-sheet-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }

/* ─── Hero ─── */
.hero {
  position: relative; padding: 80px 0 120px;
  min-height: calc(100vh - 72px);
  display: flex; flex-direction: column; justify-content: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: var(--text-eyebrow); color: var(--ink-dim); font-family: "JetBrains Mono", monospace;
  background: rgba(255, 255, 255, 0.02);
}
.eyebrow .badge {
  background: var(--green); color: #000; font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
}
.h1 {
  font-size: var(--text-h1);
  line-height: 0.92; letter-spacing: -0.045em; font-weight: 500;
  margin: 28px 0 0;
  text-wrap: balance;
}
.h1 .italic { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.h1 .strike { position: relative; display: inline-block; color: var(--ink-mute); opacity: .55; }
.h1 .strike::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  color: transparent;
  text-decoration: line-through 3px var(--green);
  text-decoration-skip-ink: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s var(--ease) .25s;
  pointer-events: none;
}
.h1.in .strike::before,
.h1:not(.reveal) .strike::before { clip-path: inset(0 0 0 0); }
.h1 .grad {
  background: linear-gradient(100deg, #fff 0%, #5C82FF 40%, #34E27A 70%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s linear infinite;
}
@keyframes sheen { to { background-position: -200% 0; } }

.hero-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; margin-top: 56px;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero-lede { font-size: var(--text-lede); color: var(--ink-dim); line-height: 1.45; max-width: 520px; }
.hero-lede b { color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

/* Screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Hero H1 — bold statement above the terminal */
.hero-h1 { margin-top: 24px; margin-bottom: 8px; }

/* ─── Hero terminal (Tempo schrijft de hero, terminal-stijl) ─── */
.hero-terminal {
  width: 100%; max-width: 980px; margin: 40px auto 0;
  border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 23, 40, 0.85), rgba(10, 13, 26, 0.92));
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 64px rgba(43, 91, 255, 0.10);
  font-family: "JetBrains Mono", monospace;
  overflow: hidden;
  animation: ht-in .4s ease both;
}
.hero-terminal .ht-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}
.hero-terminal .ht-dot {
  width: 11px; height: 11px; border-radius: var(--radius-pill);
}
.hero-terminal .ht-dot-r { background: #FF5F57; }
.hero-terminal .ht-dot-y { background: #FEBC2E; }
.hero-terminal .ht-dot-g { background: #28C840; }
.hero-terminal .ht-title {
  margin-left: 14px; font-size: 12px; color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.hero-terminal .ht-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--green); letter-spacing: 0.06em;
}
.hero-terminal .ht-status-dot {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}

.hero-terminal .ht-body {
  padding: 36px 36px 32px;
  font-size: 16px; line-height: 1.65; color: #d0d4e8;
}
.hero-terminal .ht-intro {
  margin: 0 0 18px;
  color: #6b7290; font-style: italic;
}
.hero-terminal .ht-intro::before {
  content: "// ";
  color: var(--ink-mute);
}
.hero-terminal .ht-list {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.hero-terminal .ht-list li {
  position: relative; padding-left: 28px;
  color: var(--ink);
}
.hero-terminal .ht-list li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 600;
}
.hero-terminal .ht-list em {
  font-style: normal;
  color: var(--green);
}
.hero-terminal .ht-prompt {
  margin: 0 0 22px;
  color: var(--ink);
}
.hero-terminal .ht-prompt::before {
  content: "tempo > ";
  color: #5C82FF; font-weight: 600;
}

.hero-terminal .ht-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: "Space Grotesk", sans-serif;
}
.hero-terminal .ht-chip {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 13px;
  color: var(--ink); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 10px 16px; font-weight: 500;
  transition: background .2s, border-color .2s, transform .15s, color .2s, box-shadow .2s;
}
.hero-terminal .ht-chip:hover {
  background: rgba(52, 226, 122, 0.08);
  border-color: var(--green); color: var(--green);
  transform: translateY(-1px);
}
.hero-terminal .ht-chip-prime {
  background: var(--grad); color: #000; font-weight: 600;
  border-color: transparent;
}
.hero-terminal .ht-chip-prime:hover {
  color: #000; background: var(--grad);
  box-shadow: 0 8px 22px rgba(52, 226, 122, 0.35);
  transform: translateY(-1px);
}
.hero-terminal .ht-chip:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px;
}

/* Tighter on small screens */
@media (max-width: 720px) {
  .hero-terminal { margin-top: 36px; border-radius: 14px; }
  .hero-terminal .ht-bar { padding: 10px 14px; }
  .hero-terminal .ht-title { margin-left: 10px; font-size: 11px; }
  .hero-terminal .ht-body { padding: 22px 20px 20px; font-size: 14px; line-height: 1.55; }
  .hero-terminal .ht-list li { padding-left: 22px; }
  .hero-terminal .ht-chip { font-size: 12px; padding: 8px 12px; }
}

@keyframes ht-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.meta-row { display: flex; align-items: center; gap: 28px; margin-top: 40px; color: var(--ink-mute); font-family: "JetBrains Mono", monospace; font-size: var(--text-meta); letter-spacing: 0.04em; flex-wrap: wrap; }
.meta-row span { display: flex; align-items: center; gap: 8px; }
.meta-row .pip { width: 5px; height: 5px; border-radius: var(--radius-pill); }

.pip { display: inline-block; }
.pip-pulse { animation: pulse 1.6s ease-in-out infinite; }

/* ─── Hero neural-mesh visual ─── */
.orb-stage { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 560px; justify-self: end; }
.mesh { width: 100%; height: 100%; position: relative; z-index: 2; overflow: visible; }
.mesh-halo {
  position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(43, 91, 255, 0.35) 0%, rgba(43, 91, 255, 0.12) 40%, transparent 70%);
  filter: blur(20px);
  animation: halo-pulse 5s ease-in-out infinite;
}
@keyframes halo-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
.sweep { transform-origin: 300px 300px; animation: sweep-rot 9s linear infinite; }
@keyframes sweep-rot { to { transform: rotate(360deg); } }
.mesh .node-bg { transition: opacity .3s; }
.mesh .node-core { filter: url(#f-glow); }
.mesh .edge { stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.8; fill: none; }
.mesh .edge.hot { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.1; }
.mesh .pulse { fill: #fff; filter: url(#f-glow); }
.node-pulse { transform-origin: center; transform-box: fill-box; animation: node-breath 3s ease-in-out infinite; }
@keyframes node-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 980px) { .orb-stage { margin: 0 auto; } }

.codestrip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 80%; font-family: "JetBrains Mono", monospace; font-size: 10px; color: rgba(255, 255, 255, 0.5);
  text-align: center; pointer-events: none; text-shadow: 0 0 8px rgba(43, 91, 255, 0.6);
  z-index: 3;
}

/* Decorative dashed rings — very subtle scaffolding behind the mesh */
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.07); pointer-events: none; }
.ring.r2 { inset: 12%; }
.ring.r3 { inset: -4%; border-style: solid; border-color: rgba(43, 91, 255, 0.08); }

/* hero float-cards */
.float-card {
  position: absolute; background: rgba(15, 17, 30, 0.86); backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px 14px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-dim);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  z-index: 4;
}
.float-card .led { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--green); box-shadow: 0 0 10px var(--green); }
.float-card.fc-1 { top: 8%; left: -8%; animation: float 6s ease-in-out infinite; }
.float-card.fc-2 { bottom: 14%; left: -2%; animation: float 7s ease-in-out infinite reverse; }
.float-card.fc-3 { top: 30%; right: -10%; animation: float 8s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 980px) { .float-card { display: none; } }

/* ─── Section header ─── */
section { position: relative; padding: var(--space-9) 0; z-index: var(--z-content); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; flex-wrap: wrap; }
.sec-tag { font-family: "JetBrains Mono", monospace; font-size: var(--text-meta); color: var(--green); letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.sec-tag::before { content: ""; width: 24px; height: 1px; background: var(--green); }
.sec-title {
  font-size: var(--text-h2); line-height: 0.95; letter-spacing: -0.035em; font-weight: 500;
  margin: 18px 0 0; max-width: 14ch; text-wrap: balance;
}
.sec-title .italic { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; }
.sec-aside { max-width: 380px; color: var(--ink-dim); font-size: 16px; line-height: 1.5; }

/* ─── Marquee ─── */
.marquee {
  position: relative; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(43, 91, 255, 0.04), rgba(52, 226, 122, 0.04));
  overflow: hidden;
}
.marquee-track { display: flex; gap: 64px; animation: scroll 120s linear infinite; width: max-content; }
.marquee-track span { display: inline-flex; align-items: center; gap: 18px; font-size: clamp(28px, 3.5vw, 52px); font-family: "Instrument Serif", serif; font-style: italic; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.marquee-track .star { font-family: "Space Grotesk", sans-serif; font-style: normal; color: var(--green); font-size: 24px; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ─── Bento ─── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; position: relative; overflow: hidden;
  transition: transform .35s ease, border-color .3s ease;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card .kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.card h3 { font-size: var(--text-h3); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 14px; }
.card p { color: var(--ink-dim); font-size: var(--text-body); line-height: 1.55; margin: 0; }
.card .num { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } }

.c-1 { grid-column: span 4; min-height: 480px; display: flex; flex-direction: column; justify-content: space-between; }
.c-2 { grid-column: span 2; min-height: 480px; }
.c-3 { grid-column: span 2; min-height: 280px; }
.c-4 { grid-column: span 2; min-height: 280px; }
.c-5 { grid-column: span 2; min-height: 280px; }
.c-6 { grid-column: span 6; min-height: 300px; display: flex; align-items: stretch; padding: 0; overflow: hidden; }
@media (max-width: 980px) {
  .c-1, .c-2, .c-3, .c-4, .c-5, .c-6 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .c-1, .c-2, .c-3, .c-4, .c-5, .c-6 { grid-column: span 1; }
}

.card.feat {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(43, 91, 255, 0.18), transparent 60%),
    radial-gradient(400px 200px at 0% 100%, rgba(52, 226, 122, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
}
.feat-visual {
  flex: 1; height: 220px; min-height: 220px; max-height: 220px; margin: 14px 0 24px;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3);
  position: relative; overflow: hidden;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  display: flex; flex-direction: column;
}
.terminal-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tdot { width: 10px; height: 10px; border-radius: var(--radius-pill); }
.terminal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; color: #c8cce0; flex: 1; overflow: hidden; justify-content: flex-end; }
.terminal-body .ln { display: flex; gap: 10px; white-space: pre; min-height: 18px; flex-shrink: 0; }
.terminal-body .ln .ks { color: #5C82FF; }
.terminal-body .ln .vs { color: #34E27A; }
.terminal-body .ln .cm { color: #5a607a; font-style: italic; }
.caret { display: inline-block; width: 8px; height: 14px; background: var(--green); margin-left: 2px; vertical-align: -3px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.stat-big { font-size: 96px; line-height: 0.9; letter-spacing: -0.06em; font-weight: 500; background: linear-gradient(180deg, #fff, #5C82FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }

.pillset { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pillset .pill { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; color: var(--ink-dim); background: rgba(255, 255, 255, 0.02); }

.cta-strip { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 42px 48px; gap: 32px; background: linear-gradient(100deg, rgba(27, 31, 140, 0.4), rgba(43, 91, 255, 0.18) 40%, rgba(52, 226, 122, 0.18)); }
.cta-strip h3 { font-size: clamp(28px, 4vw, 46px); margin: 0; line-height: 1; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.cta-strip .italic { font-family: "Instrument Serif", serif; font-style: italic; }
@media (max-width: 720px) { .cta-strip { flex-direction: column; align-items: flex-start; padding: 32px; } }

/* ─── Workflow ─── */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
@media (max-width: 980px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .flow { grid-template-columns: 1fr; } }
.step {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  min-height: 280px; display: flex; flex-direction: column; position: relative;
}
.step .stepnum { font-family: "JetBrains Mono", monospace; font-size: var(--text-meta); color: var(--green); margin-top: auto; }
.step h4 { font-size: var(--text-h4); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; margin: 20px 0 10px; }
/* min-height = 3 regels (14.5px * 1.5). Het tekstblok in een .step wordt door
   margin-top:auto op .stepnum naar de onderkant geduwd, dus een kortere tekst
   tilt nummer en titel omhoog en staan de titels tussen kaarten niet op één
   lijn. Ruimte reserveren houdt ze uitgelijnd, ook als de copy verandert. */
.step p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.5; margin: 0; min-height: 66px; }
.step .stepicon {
  width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-family: "JetBrains Mono", monospace; color: var(--green);
  background: rgba(52, 226, 122, 0.06);
}

/* ─── Branche grid ─── */
#branches { padding: var(--space-8) 0; }
#branches .sec-head { margin-bottom: 40px; }
.branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--line); }
@media (max-width: 980px) { .branches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .branches { grid-template-columns: 1fr; } }
.branche {
  background: var(--bg);
  padding: 34px 28px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between;
  transition: background .3s; cursor: pointer; position: relative; overflow: hidden;
}
.branche:hover { background: linear-gradient(180deg, rgba(43, 91, 255, 0.08), rgba(0, 0, 0, 0)); }
.branche .bnum { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); }
.branche h4 { font-size: var(--text-h4); letter-spacing: -0.02em; font-weight: 500; margin: 0; line-height: 1.1; }
.branche .arrow {
  opacity: 0; transform: translateX(-6px); transition: .3s;
  color: var(--green); font-family: "JetBrains Mono", monospace; font-size: 14px; align-self: flex-start; margin-top: 14px;
}
.branche:hover .arrow { opacity: 1; transform: translateX(0); }

/* ─── Testimonial carousel ─── */
.quote {
  padding: 96px 0 96px; position: relative; overflow: hidden;
}
.quote::before, .quote::after {
  content: ""; position: absolute; pointer-events: none; filter: blur(90px); opacity: .35;
  width: 340px; height: 340px; border-radius: var(--radius-pill); z-index: -1;
}
.quote::before {
  background: radial-gradient(circle, rgba(43, 91, 255, .28), transparent 70%); top: -60px; left: -80px;
  animation: float-a 14s ease-in-out infinite;
}
.quote::after {
  background: radial-gradient(circle, rgba(52, 226, 122, .22), transparent 70%); bottom: -60px; right: -80px;
  animation: float-b 16s ease-in-out infinite;
}
@keyframes float-a { 50% { transform: translate(40px, 30px) scale(1.1); } }
@keyframes float-b { 50% { transform: translate(-30px, -40px) scale(1.15); } }
.quote-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 56px; flex-wrap: wrap; }
.quote-stage { position: relative; min-height: 340px; }
.qcard {
  position: absolute; inset: 0; opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
  display: flex; flex-direction: column;
}
.qcard.active { opacity: 1; transform: none; pointer-events: auto; }
.qcard blockquote {
  font-size: clamp(26px, 3.2vw, 46px); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em;
  margin: 0; font-family: "Instrument Serif", serif; font-style: italic; max-width: 24ch; text-wrap: balance; color: #fff;
}
.qcard blockquote em { font-style: italic; font-weight: 500; background: linear-gradient(120deg, var(--green), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qmeta { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 32px; color: var(--ink-dim); font-size: 14px; }
.qav {
  width: 48px; height: 48px; border-radius: var(--radius-pill); flex-shrink: 0; display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; color: #fff; letter-spacing: 0.02em;
  position: relative;
}
.qname { color: #fff; font-weight: 500; font-size: 15px; }
.qrole { font-size: 12px; color: var(--ink-mute); font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; margin-top: 2px; }
.qchip {
  margin-left: auto; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: 11px; color: var(--green); font-family: "JetBrains Mono", monospace; letter-spacing: 0.06em;
  background: rgba(52, 226, 122, 0.05);
}
.quote-controls { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.quote-dots { display: flex; gap: 6px; flex: 1; }
.qdot {
  flex: 1; height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-pill);
  position: relative; overflow: hidden; cursor: pointer; transition: background .3s; border: none; padding: 0;
}
.qdot:hover { background: rgba(255, 255, 255, 0.15); }
.qdot .fill { position: absolute; inset: 0; background: var(--grad); width: 0; border-radius: var(--radius-pill); }
.qdot.active .fill { animation: qfill 6.4s linear forwards; }
@keyframes qfill { from { width: 0; } to { width: 100%; } }
.quote-nav { display: flex; gap: 8px; }
.qnav {
  width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.02);
  display: grid; place-items: center; color: var(--ink-dim); cursor: pointer; transition: .2s;
}
.qnav:hover { color: #fff; border-color: var(--green); background: rgba(52, 226, 122, 0.06); }
.qcount { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.08em; min-width: 54px; text-align: right; }

/* ─── Client logo bar ─── */
.clients { padding: 24px 0 56px; }
.clients-tag {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); text-align: center; margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px; justify-content: center;
}
.clients-tag::before, .clients-tag::after { content: ""; flex: 1; max-width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.clients-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.cli {
  background: #0b0e1c; padding: 34px 28px; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: background .3s; position: relative;
}
.cli:hover { background: #10142a; }
.cli .cli-name {
  font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.01em; line-height: 1.05;
  text-align: center; word-break: break-word; overflow-wrap: anywhere;
}
.cli .cli-sub {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-mute); text-transform: uppercase;
}
.cli-1 .cli-name, .cli-2 .cli-name { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; font-size: 22px; }
.cli-3 .cli-name, .cli-4 .cli-name, .cli-5 .cli-name, .cli-6 .cli-name {
  font-family: "Sora", sans-serif; font-weight: 400; letter-spacing: -0.01em; font-size: 18px;
}
.gov-badge {
  position: absolute; top: 10px; right: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.12em;
  color: var(--green); background: rgba(52, 226, 122, 0.08); border: 1px solid rgba(52, 226, 122, 0.25);
  padding: 3px 7px; border-radius: var(--radius-pill); text-transform: uppercase;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.cli:hover .gov-badge { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
  .clients-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .clients-row { grid-template-columns: 1fr; }
  .cli { min-height: 140px; padding: 22px 18px; }
}

/* Touch devices: always show hover-only hints (no :hover available) */
@media (hover: none) {
  .gov-badge { opacity: 1; transform: none; }

  /* Branches: show the green arrow text, but NOT the lighter card background.
     Otherwise all 8 tiles look "active" at once. */
  .branche .arrow { opacity: 1; transform: none; }
  .branche:hover { background: var(--bg); }
}

/* ─── Final CTA ─── */
.end { padding: 120px 0 140px; position: relative; text-align: center; }
.end::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 50% 60%, rgba(43, 91, 255, 0.25), transparent 60%),
              radial-gradient(600px 300px at 30% 30%, rgba(52, 226, 122, 0.18), transparent 60%);
  pointer-events: none;
}
.end .h1 { margin: 0; font-size: clamp(56px, 10vw, 180px); }
.end p { color: var(--ink-dim); max-width: 560px; margin: 24px auto 36px; font-size: 18px; line-height: 1.5; }
.end-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ─── Footer ─── */
footer { border-top: 1px solid var(--line); padding: 48px 0 64px; color: var(--ink-mute); font-size: 13px; position: relative; z-index: var(--z-content); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; align-items: center; }
.foot-brand { display: flex; align-items: center; gap: 18px; }
.foot-divider { width: 1px; height: 28px; background: var(--line-strong); margin: 0 4px; }
.foot-slogan {
  font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400;
  font-size: 24px; letter-spacing: -0.01em; color: var(--ink-dim); line-height: 1;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.foot-slogan-em {
  background: linear-gradient(120deg, var(--green), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
}
.foot-slogan-rest { color: var(--ink-dim); }
.foot-slogan-cursor {
  display: inline-block; width: 2px; height: 18px; margin-left: 6px;
  background: var(--green); transform: translateY(2px);
  animation: footBlink 1.1s steps(2, end) infinite;
}
@keyframes footBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ─── Brand mark sizing (img referencing /brand/logo-mark.svg) ─── */
.brand-mark { flex-shrink: 0; display: block; }

/* ─── Chat widget ─── */
/* ─── Tempo peek-bubble (proactive nudge after 8s) ─── */
.tempo-peek {
  position: fixed; right: 24px; bottom: 104px;
  z-index: var(--z-chat);
  max-width: 280px;
  padding: 14px 16px 14px 16px;
  background: linear-gradient(180deg, rgba(26, 30, 50, 0.96), rgba(20, 23, 40, 0.96));
  border: 1px solid rgba(52, 226, 122, 0.32);
  border-radius: 14px;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 0 40px rgba(52, 226, 122, 0.12);
  cursor: pointer;
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .3s ease, transform .3s var(--ease, ease);
  font-family: "Space Grotesk", sans-serif;
}
.tempo-peek.show { opacity: 1; transform: translateY(0) scale(1); }
.tempo-peek::after {
  /* small tail pointing at the launcher */
  content: ""; position: absolute; right: 22px; bottom: -7px;
  width: 14px; height: 14px;
  background: linear-gradient(180deg, rgba(26, 30, 50, 0.96), rgba(20, 23, 40, 0.96));
  border-right: 1px solid rgba(52, 226, 122, 0.32);
  border-bottom: 1px solid rgba(52, 226, 122, 0.32);
  transform: rotate(45deg);
}
.tempo-peek .tp-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: none; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--ink-mute); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.tempo-peek .tp-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.tempo-peek .tp-head {
  display: flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--ink-dim); letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.tempo-peek .tp-dot {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
.tempo-peek .tp-name { color: var(--ink); font-weight: 600; }
.tempo-peek .tp-sep { color: var(--ink-mute); }
.tempo-peek .tp-status { color: var(--green); }
.tempo-peek .tp-msg {
  color: var(--ink); font-size: 14px; line-height: 1.4;
}
.tempo-peek .tp-cue {
  margin-top: 8px; font-family: "JetBrains Mono", monospace;
  font-size: 10px; color: var(--green); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tempo-peek:hover { border-color: rgba(52, 226, 122, 0.55); }
@media (max-width: 720px) {
  .tempo-peek { right: 16px; bottom: 84px; max-width: calc(100vw - 100px); }
  .tempo-peek::after { right: 18px; }
}

.chat-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-chat);
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: var(--grad); color: #000; font-weight: 600;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 16px 50px rgba(43, 91, 255, 0.45), 0 0 0 4px rgba(43, 91, 255, 0.18);
  transition: transform .25s ease, box-shadow .25s ease;
  border: none;
}
.chat-launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 24px 60px rgba(43, 91, 255, 0.55), 0 0 0 6px rgba(52, 226, 122, 0.18); }
.chat-launcher .pulse-ring { position: absolute; inset: -6px; border-radius: var(--radius-pill); border: 2px solid var(--green); animation: ripple 1.8s ease-out infinite; pointer-events: none; }
@keyframes ripple { 0% { opacity: .8; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.25); } }

.chat-window {
  position: fixed; right: 24px; bottom: 104px; z-index: var(--z-chat);
  width: 380px; max-width: calc(100vw - 48px); height: 560px; max-height: calc(100vh - 140px);
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 22, 38, 0.92), rgba(10, 12, 22, 0.96));
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(.96); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.chat-window.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.chat-head .agent { display: flex; align-items: center; gap: 12px; }
.agent-avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--grad); position: relative; flex-shrink: 0; display: grid; place-items: center; }
.agent-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: var(--radius-pill); background: var(--green); border: 2px solid #0a0c16; }
.agent-name { font-size: 14px; font-weight: 500; }
.agent-status { font-size: 11px; color: var(--ink-mute); font-family: "JetBrains Mono", monospace; letter-spacing: 0.06em; }
.chat-close { padding: 6px; color: var(--ink-dim); border-radius: 8px; display: grid; place-items: center; }
.chat-close:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.chat-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-pill); }
.msg { max-width: 85%; padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg.bot { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-bottom-left-radius: 6px; align-self: flex-start; }
.msg.user { background: var(--grad); color: #000; border-bottom-right-radius: 6px; align-self: flex-end; font-weight: 500; }
.msg.bot.think { color: var(--ink-mute); font-family: "JetBrains Mono", monospace; font-size: 12px; padding: 8px 12px; }
.think .d { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: var(--radius-pill); margin-right: 3px; animation: bob 1.2s ease-in-out infinite; }
.think .d:nth-child(2) { animation-delay: .15s; }
.think .d:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
.msg p { margin: 0 0 8px; }
.msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 4px 0 8px; padding-left: 20px; }

.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.sugg { font-size: 12px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-dim); cursor: pointer; background: rgba(255, 255, 255, 0.02); transition: .2s; font-family: inherit; }
.sugg:hover { color: #fff; border-color: var(--green); background: rgba(52, 226, 122, 0.06); }

.chat-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.chat-foot input {
  flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 12px 16px; color: #fff; font-family: inherit; font-size: 14px; outline: none; transition: border-color .2s;
}
.chat-foot input:focus { border-color: var(--blue); }
.chat-send {
  width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--grad); color: #000;
  display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}
.chat-send:disabled { opacity: .4; cursor: not-allowed; }
.chat-tos { padding: 0 20px 12px; font-size: 10px; color: var(--ink-mute); font-family: "JetBrains Mono", monospace; text-align: center; }

/* ─── Lead capture card inside chat ─── */
/* ─── Click-to-chat affordances (data-chat-prompt) ─── */
.askable { cursor: pointer; }
.askable:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
/* WhatWeDo cards: hover hint that this opens Tempo */
.card.askable { position: relative; }
.card.askable::after {
  content: "vraag Tempo →";
  position: absolute;
  bottom: 14px; right: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--green);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.card.askable:hover::after,
.card.askable:focus-visible::after { opacity: 1; transform: translateX(0); }

/* HowWeWork step cards: subtle lift + green border on hover */
.step.askable {
  transition: border-color .2s, transform .2s, background .2s;
}
.step.askable:hover {
  border-color: rgba(52, 226, 122, 0.4);
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(52, 226, 122, 0.04), rgba(255, 255, 255, 0.005));
}
.step.askable::after {
  content: "vraag Tempo →";
  position: absolute;
  bottom: 14px; right: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--green);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.step.askable:hover::after,
.step.askable:focus-visible::after { opacity: 1; transform: translateX(0); }

/* Testimonial chip becomes a subtle pill button */
.qchip.askable {
  transition: background .2s, border-color .2s, color .2s;
}
.qchip.askable:hover {
  border-color: var(--green);
  color: var(--green);
}

/* ─── Conversational lead capture (Tempo tool calling) ─── */
.capture-pill {
  align-self: stretch;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(52, 226, 122, 0.06);
  border: 1px solid rgba(52, 226, 122, 0.22);
  font-family: "JetBrains Mono", monospace;
  animation: capture-in .25s ease;
}
.capture-pill > .pulse-dot {
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--green); box-shadow: 0 0 12px var(--green);
  animation: pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.capture-pill > .capture-label {
  font-size: 11px; color: var(--green); letter-spacing: 0.04em;
}
.capture-pill > .pulse-dot,
.capture-pill > .capture-label {
  display: inline-block; vertical-align: middle;
}
.capture-pill > .pulse-dot + .capture-label { margin-left: 8px; }

.capture-fields {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
}
.capture-field {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; line-height: 1.4;
  animation: capture-in .2s ease;
}
.capture-field .cf-mark {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; min-width: 14px;
}
.capture-field.filled .cf-mark { color: var(--green); }
.capture-field.pending .cf-mark { color: var(--ink-mute); }
.capture-field .cf-label { color: var(--ink-mute); min-width: 64px; }
.capture-field.filled .cf-value { color: var(--ink); font-family: "Space Grotesk", sans-serif; }

.lead-success {
  align-self: stretch;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(52, 226, 122, 0.10), rgba(43, 91, 255, 0.05));
  border: 1px solid rgba(52, 226, 122, 0.32);
  border-left: 3px solid var(--green);
  box-shadow: 0 8px 22px rgba(52, 226, 122, 0.12);
  animation: success-in .35s var(--ease, ease);
}
.lead-success .ls-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
}
.lead-success .ls-check {
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  background: var(--green); color: #000;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.lead-success .ls-title { color: var(--ink); }
.lead-success .ls-body {
  font-size: 12px; color: var(--ink-dim); line-height: 1.5;
  font-family: "JetBrains Mono", monospace;
}
.lead-success .ls-body > div + div { margin-top: 2px; }

@keyframes capture-in  { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes success-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Mobile polish (≤720px) ─── */
@media (max-width: 720px) {
  /* Tighter vertical rhythm */
  section { padding: 72px 0; }
  .hero { padding: 48px 0 72px; min-height: auto; }
  #branches { padding: 56px 0; }
  .end { padding: 96px 0; }
  .clients { padding: 16px 0 40px; }
  .quote { padding: 64px 0 64px; }
  .quote-head { margin-bottom: 36px; }

  /* Hero meta row — wrap, smaller gap */
  .meta-row { gap: 12px 16px; margin-top: 28px; }
  .hero-cta { gap: 10px; }

  /* Section header stacks naturally */
  .sec-head { gap: 16px; margin-bottom: 32px; }
  .sec-aside { max-width: 100%; }

  /* Bento + cards — tighter padding */
  .card { padding: 24px; }
  .bento { gap: 12px; }
  .c-1, .c-2, .c-3, .c-4, .c-5, .c-6 { min-height: auto; }
  .stat-big { font-size: 72px; }

  /* Chat launcher closer to corner */
  .chat-launcher { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .chat-window { right: 8px; bottom: 80px; width: calc(100vw - 16px); height: calc(100vh - 100px); border-radius: 20px; }

  /* Footer stacks */
  .foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot-brand { flex-wrap: wrap; }

  /* CTA in cta-strip — full width buttons */
  .cta-strip .btn { width: 100%; justify-content: center; }
}

/* ≤ 480px — really small phones */
@media (max-width: 480px) {
  section { padding: 56px 0; }
  .stat-big { font-size: 60px; }
  .h1 { letter-spacing: -0.035em; }
  .clients-tag { font-size: 10px; }
  .clients-tag::before, .clients-tag::after { max-width: 40px; }
}

/* Tweede route onder de hoofd-CTA: wie al een project heeft lopen zoekt geen
   nieuwe bouw maar continuïteit. Rustig gezet, de primaire CTA blijft leidend. */
.end-alt {
  margin-top: 10px; font-size: 15px; color: var(--ink-mute);
}
.end-alt a { color: var(--green); border-bottom: 1px solid rgba(52, 226, 122, .35); }
.end-alt a:hover { border-bottom-color: var(--green); }


/* Stap 04 is de doorstap naar /partner. In de verloopkleuren zodat het opvalt
   tussen de drie projectstappen: dit is waar het verhaal doorloopt. */
.step-partner {
  text-decoration: none; color: inherit;
  border-color: transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.step-partner h4 {
  /* horizontaal verloop i.p.v. var(--grad) op 135deg: over een kort woord als
     "Partnerplan" zie je bij die hoek bijna alleen het blauwe uiteinde. */
  background: linear-gradient(90deg, #2B5BFF 0%, #34E27A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
}
.step-partner .stepicon { border-color: rgba(52, 226, 122, .45); }
.step-partner::after {
  content: "bekijk het partnerplan →";
  position: absolute; right: 28px; top: 38px;
  font-family: "JetBrains Mono", monospace; font-size: var(--text-meta);
  color: var(--green); opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.step-partner:hover, .step-partner:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(43, 91, 255, .22);
}
.step-partner:hover::after, .step-partner:focus-visible::after {
  opacity: 1; transform: translateX(0);
}