/* Kwitto — calm confidence. Same token system as the product UI
   (pragmatico-invoicing base.html); one accent, blue-biased neutrals. */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }

:root {
  --font-body:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:'Space Grotesk',var(--font-body);
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#eef1f5;
  --ink:#1c2733; --muted:#5c6b7a;
  --line:#d8dee6;
  --accent:#1662b8; --accent-ink:#ffffff;
  --accent-hover:#124f95; --accent-subtle:#e8f0fa;
  --ok:#1e7a4c; --ok-bg:#e6f4ec;
  --warn:#8a5800; --warn-bg:#fdf3dd;
  --radius:10px; --radius-s:6px;
  --shadow-1:0 1px 2px rgba(28,39,51,.05);
  --shadow-2:0 12px 32px rgba(28,39,51,.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12181f; --surface:#1a222b; --surface-2:#222d38;
    --ink:#e6ecf2; --muted:#94a2b0;
    --line:#2c3641;
    --accent:#5b9bd9; --accent-ink:#0e1319;
    --accent-hover:#79afe2; --accent-subtle:#1a2a3d;
    --ok:#5cc490; --ok-bg:#173226;
    --warn:#e0a83f; --warn-bg:#332a15;
    --shadow-1:none; --shadow-2:0 12px 32px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; font:16px/1.6 var(--font-body); color:var(--ink); background:var(--bg); }
.wrap { max-width:68rem; margin:0 auto; padding:0 1.4rem; }

header.site { position:sticky; top:0; z-index:10; background:var(--surface);
  border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; gap:1rem; padding-top:.7rem; padding-bottom:.7rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display);
  font-weight:600; font-size:1.15rem; color:inherit; text-decoration:none; }
.brand img { width:30px; height:30px; }
.brand strong { color:var(--accent); font-weight:600; }
.brand .by { color:var(--muted); font-weight:400; font-size:.72rem; letter-spacing:.02em; }
header.site nav { margin-left:auto; display:flex; gap:.4rem; align-items:center; }
header.site nav a { color:var(--ink); text-decoration:none; padding:.35rem .7rem;
  border-radius:var(--radius-s); font-size:.9rem; }
header.site nav a:hover { background:var(--accent-subtle); }

h1, h2, h3 { font-family:var(--font-display); letter-spacing:-.015em; text-wrap:balance; }
h1 { font-size:clamp(2rem, 5vw, 3.1rem); line-height:1.08; margin:0 0 1rem; font-weight:700; }
h2 { font-size:clamp(1.4rem, 3vw, 1.9rem); margin:0 0 .5rem; font-weight:700; }
h3 { font-size:1.05rem; margin:0 0 .35rem; font-weight:600; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  font-weight:600; color:var(--accent); margin:0 0 .6rem; }
.sub { color:var(--muted); font-size:1.08rem; max-width:34rem; margin:0 0 1.6rem; }
section { padding:4.2rem 0; }
section + section { border-top:1px solid var(--line); }
.section-intro { color:var(--muted); max-width:40rem; margin:0 0 2rem; }

.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
@media (max-width: 820px) { .hero .wrap { grid-template-columns:1fr; } }
.cta-row { display:flex; gap:.7rem; flex-wrap:wrap; }
.btn { display:inline-block; padding:.6rem 1.3rem; border-radius:var(--radius-s);
  font-weight:600; text-decoration:none; font-size:.95rem; }
.btn.primary { background:var(--accent); color:var(--accent-ink); }
.btn.primary:hover { background:var(--accent-hover); }
.btn.ghost { color:var(--ink); border:1px solid var(--line); }
.btn.ghost:hover { background:var(--accent-subtle); }
a:focus-visible, .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Invoice mock */
.invoice-mock { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-2); padding:1.3rem 1.4rem;
  max-width:24rem; justify-self:center; width:100%;
  font-variant-numeric:tabular-nums; }
.invoice-mock .head { display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:2px solid var(--accent); padding-bottom:.6rem; margin-bottom:.8rem; }
.invoice-mock .head b { font-family:var(--font-display); }
.invoice-mock .head span { font-size:.75rem; color:var(--muted); }
.invoice-mock table { width:100%; border-collapse:collapse; font-size:.82rem; }
.invoice-mock td { padding:.25rem 0; }
.invoice-mock td:last-child { text-align:right; }
.invoice-mock tr.total td { border-top:1px solid var(--line); font-weight:700; padding-top:.45rem; }
.pill { display:inline-block; padding:.05rem .55rem; border-radius:999px;
  font-size:.72rem; font-weight:600; }
.pill.open { color:var(--warn); background:var(--warn-bg); }
.pill.paid { color:var(--ok); background:var(--ok-bg); }
.payblock { display:flex; gap:.9rem; align-items:center; margin-top:1rem;
  background:var(--accent-subtle); border-radius:var(--radius-s); padding:.7rem .9rem; }
.payblock svg { flex:none; }
.payblock p { margin:0; font-size:.78rem; color:var(--muted); }
.payblock p b { color:var(--ink); font-size:.85rem; display:block; }

/* Ladder */
.ladder { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1rem; counter-reset:trede; }
.step { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.3rem 1.4rem; box-shadow:var(--shadow-1); position:relative; }
.step::before { counter-increment:trede; content:counter(trede);
  font-family:var(--font-display); font-weight:700; color:var(--accent);
  border:2px solid var(--accent); border-radius:50%; width:1.7rem; height:1.7rem;
  display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; font-size:.9rem; }
.step p { margin:0; font-size:.9rem; color:var(--muted); }
.step .soon { display:inline-block; margin-top:.6rem; font-size:.72rem; font-weight:600;
  color:var(--muted); background:var(--surface-2); border-radius:999px; padding:.1rem .6rem; }

/* Cards (intake channels e.d. — geen nummering: geen volgorde) */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem; box-shadow:var(--shadow-1); }
.card p { margin:0; font-size:.9rem; color:var(--muted); }
.section-note { color:var(--muted); font-size:.9rem; max-width:40rem; margin:1.6rem 0 0; }
.section-note .soon { display:inline-block; margin-left:.4rem; font-size:.72rem; font-weight:600;
  color:var(--muted); background:var(--surface-2); border-radius:999px; padding:.1rem .6rem; }

/* Features */
.features { display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:1rem; }
.feature { border-left:2px solid var(--accent); padding:.2rem 0 .2rem 1rem; }
.feature p { margin:0; font-size:.9rem; color:var(--muted); }

/* Proof */
.proof { background:var(--surface); }
.proof .wrap { max-width:46rem; text-align:center; }
.proof p { color:var(--muted); }

footer.site { border-top:1px solid var(--line); padding:2rem 0 2.6rem; }
footer.site .wrap { display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  color:var(--muted); font-size:.85rem; }
footer.site a { color:var(--accent); text-decoration:none; }
footer.site a:hover { text-decoration:underline; }
footer.site .byline { margin-left:auto; }
footer.site .byline strong { color:var(--accent); }

/* 4 viewports (DIRK-conventie): 1199 / 768 / 640 / 480 */
@media (max-width: 1199px) {
  .hero .wrap { gap:2.2rem; }
}
@media (max-width: 768px) {
  header.site .wrap { flex-wrap:wrap; row-gap:.1rem; padding-top:.55rem; padding-bottom:.55rem; }
  /* Merk gecentreerd boven de nav-rij — links oogt scheef naast vier ankers. */
  .brand { white-space:nowrap; width:100%; justify-content:center; }
  header.site nav { margin-left:0; width:100%; gap:.1rem; justify-content:space-between; }
  header.site nav a { padding:.25rem .45rem; font-size:.85rem; }
  section { padding:3.2rem 0; }
  .hero .wrap { gap:2rem; }
}
@media (max-width: 640px) {
  .wrap { padding-left:1.1rem; padding-right:1.1rem; }
  section { padding:2.8rem 0; }
  .sub { font-size:1rem; }
}
@media (max-width: 480px) {
  header.site nav a[href^="https"] { display:none; }  /* Pragmatico staat in de footer */
  .cta-row .btn { flex:1 1 auto; text-align:center; }
  .invoice-mock { padding:1.1rem 1rem; }
  .payblock { gap:.7rem; padding:.6rem .7rem; }
  section { padding:2.4rem 0; }
  /* Byline blijft rechts tegen de kantlijn, ook op klein. */
  footer.site .wrap { row-gap:.3rem; }
}