/* LawBot Business: compleet designsysteem voor de Ondernemers-tak (/business).
   Parity met business.html. Laadt standalone i.p.v. de Pro-style.css, zodat er geen
   cascade-interferentie tussen de twee merken is. Fonts komen uit fonts.css (gedeeld).
   Frisser accent (--groen #5f8a5f) en business-eigen componenten (triage, pakketten,
   info-kaarten, stappen, cyclus). */
:root {
  color-scheme: light;
  --papier: #f5f0e8; --papier-2: #efe9de; --kaart: #fdfbf7; --beige: #c9c1b8;
  --salie: #9b9a86; --inkt: #54483f; --inkt-zacht: #6f6155;
  /* Ondernemers-accent: een frisser groen dan de gedempte Pro-tint, binnen dezelfde familie. */
  --groen: #5f8a5f; --groen-donker: #4e7350; --groen-tint: #e8efe6;
  --oranje: #b3832f; --fout: #a4453b;
  --schaduw: 0 18px 45px rgba(84,72,63,.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--papier); color:var(--inkt); line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--groen-donker); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:72rem; margin-inline:auto; padding-inline:1.4rem; }
.ic { width:1.15em; height:1.15em; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em; flex:none; }
section { scroll-margin-top:5.5rem; }

/* ── Header ─────────────────────────────────────────────────────────── */
.top { position:sticky; top:0; z-index:50; background:rgba(245,240,232,.88);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--beige); }
.top-in { display:flex; align-items:center; gap:1.4rem; padding-block:.7rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.12rem;
  color:var(--inkt); letter-spacing:-.01em; }
.brand:hover { text-decoration:none; }
.brand img { width:30px; height:30px; border-radius:50%; }
.brand .biz { color:var(--groen); }
.byline { margin-left:auto; font-size:.78rem; color:var(--salie); white-space:nowrap; }
.badge-test { display:none; background:var(--oranje); color:#fff; font-size:.72rem; font-weight:700;
  padding:.2rem .6rem; border-radius:999px; letter-spacing:.04em; }
.badge-test.aan { display:inline-block; }
.top-acties { display:flex; align-items:center; gap:1rem; }
.top-acties .account { font-size:.9rem; color:var(--inkt-zacht); white-space:nowrap; }
@media (max-width:720px) { .byline, .top-acties .account { display:none; } }

/* ── Product-switch (LawBot voor advocaten / voor ondernemers) ───────── */
.switch-balk { display:flex; justify-content:center; padding:1.1rem 1.5rem .1rem; }
.prod-switch { display:inline-flex; background:var(--papier-2); border:1px solid var(--beige);
  border-radius:16px; padding:.3rem; gap:.2rem; }
.prod-switch a { display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding:.5rem 1.5rem; border-radius:12px; color:var(--inkt-zacht); line-height:1.2;
  transition:background .15s ease, color .15s ease; }
.prod-switch a:hover { color:var(--inkt); text-decoration:none; }
.prod-switch a b { font-size:.95rem; font-weight:700; letter-spacing:-.01em; }
.prod-switch a small { font-size:.72rem; font-weight:500; opacity:.75; }
.prod-switch a[aria-current] { background:var(--groen); color:#fff; box-shadow:0 4px 12px rgba(84,72,63,.16); }
.prod-switch a[aria-current] small { opacity:.85; }
@media (max-width:520px) { .prod-switch a { padding:.5rem 1.05rem; } .prod-switch a b { font-size:.88rem; } }

/* ── Knoppen ────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.5rem; border:0; cursor:pointer;
  border-radius:10px; font:inherit; font-weight:700; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--groen); color:#fff; padding:.85rem 1.35rem; font-size:1rem;
  transition:background .15s ease, transform .15s ease; }
.btn-primary:hover { background:var(--groen-donker); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--inkt); padding:.85rem 1.2rem;
  border:1px solid rgba(84,72,63,.3); transition:background .15s ease; }
.btn-ghost:hover { background:var(--kaart); }
.btn-klein { padding:.55rem 1rem; font-size:.9rem; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; padding-block:4.2rem 3.4rem; }
.blob { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.b1 { width:34rem; height:34rem; right:-9rem; top:-11rem; background:rgba(95,111,98,.28); }
.b2 { width:26rem; height:26rem; left:-10rem; bottom:-12rem; background:rgba(155,154,134,.3); }
.hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
@media (max-width:980px) { .hero-grid { grid-template-columns:1fr; } }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-size:.86rem; font-weight:600;
  color:var(--inkt-zacht); border:1px solid var(--beige); background:var(--kaart);
  border-radius:999px; padding:.35rem 1rem; margin-bottom:1.3rem; }
h1 { font-size:clamp(2.05rem,4.4vw,3.1rem); line-height:1.12; letter-spacing:-.02em; margin-bottom:1rem; }
.lead { font-size:1.13rem; color:var(--inkt-zacht); max-width:34rem; margin-bottom:1.6rem; }
.hero-cta { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.hero-punten { list-style:none; display:flex; flex-direction:column; gap:.45rem;
  font-size:.95rem; color:var(--inkt-zacht); }
.hero-punten .ic { color:var(--groen); }

/* Triage-kaartje (statisch, geen animatie) */
.triage { background:var(--kaart); border:1px solid var(--beige); border-radius:16px;
  box-shadow:var(--schaduw); padding:1.4rem; max-width:26rem; margin-inline:auto; }
.triage h3 { font-size:.92rem; color:var(--inkt-zacht); font-weight:600; margin-bottom:.9rem; }
.triage-rij { display:flex; gap:.7rem; align-items:flex-start; padding-block:.55rem; }
.triage-rij + .triage-rij { border-top:1px dashed var(--beige); }
.stip { width:.8rem; height:.8rem; border-radius:50%; margin-top:.35rem; flex:none; }
.s-groen { background:#5f8a5f; } .s-oranje { background:var(--oranje); } .s-rood { background:var(--fout); }
.triage-rij b { display:block; font-size:.95rem; }
.triage-rij span { font-size:.86rem; color:var(--inkt-zacht); line-height:1.45; }

/* ── Secties ────────────────────────────────────────────────────────── */
.sectie { padding-block:3.6rem; }
.sectie.alt { background:var(--papier-2); border-block:1px solid rgba(201,193,184,.5); }
.sec-head { max-width:44rem; margin-bottom:2.2rem; }
.sec-label { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--salie); margin-bottom:.5rem; }
h2 { font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.015em; margin-bottom:.6rem; }
.sec-lead { color:var(--inkt-zacht); font-size:1.04rem; }

.kaart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.1rem; }
.info-kaart { background:var(--kaart); border:1px solid var(--beige); border-radius:14px; padding:1.3rem; }
.info-kaart .ic { width:1.5em; height:1.5em; color:var(--groen); margin-bottom:.6rem; }
.info-kaart h3 { font-size:1.02rem; margin-bottom:.35rem; }
.info-kaart p { font-size:.92rem; color:var(--inkt-zacht); }

.stappen { counter-reset:stap; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.1rem; }
.stap { background:var(--kaart); border:1px solid var(--beige); border-radius:14px; padding:1.3rem 1.3rem 1.3rem 3.3rem; position:relative; }
.stap::before { counter-increment:stap; content:counter(stap); position:absolute; left:1.1rem; top:1.15rem;
  width:1.6rem; height:1.6rem; border-radius:50%; background:var(--groen-tint); color:var(--groen-donker);
  font-weight:800; font-size:.9rem; display:grid; place-items:center; }
.stap h3 { font-size:1rem; margin-bottom:.3rem; }
.stap p { font-size:.92rem; color:var(--inkt-zacht); }

.privacy-strook { display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center;
  background:var(--groen-tint); border:1px solid var(--beige); border-radius:14px; padding:1.2rem 1.4rem; }
.privacy-strook p { font-size:.93rem; color:var(--inkt); max-width:52rem; }
.privacy-strook .ic { width:1.6em; height:1.6em; color:var(--groen-donker); }

/* ── Pakketten & checkout ───────────────────────────────────────────── */
.cyclus { display:inline-flex; border:1px solid var(--beige); border-radius:999px; background:var(--kaart);
  padding:.25rem; gap:.25rem; margin-bottom:1.4rem; }
.cyclus button { border:0; background:transparent; font:inherit; font-weight:600; font-size:.92rem;
  color:var(--inkt-zacht); padding:.4rem 1.1rem; border-radius:999px; cursor:pointer; }
.cyclus button.actief { background:var(--groen); color:#fff; }
.voordeel-chip { font-size:.72rem; font-weight:700; color:var(--groen-donker); background:var(--groen-tint);
  border-radius:999px; padding:.1rem .5rem; margin-left:.3rem; display:none; }
.voordeel-chip.aan { display:inline-block; }

.pakket-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); gap:1.1rem; margin-bottom:1.6rem; }
.pakket { text-align:left; cursor:pointer; font:inherit; background:var(--kaart);
  border:2px solid var(--beige); border-radius:16px; padding:1.3rem; transition:border-color .15s ease; position:relative; }
.pakket:hover { border-color:var(--salie); }
.pakket.actief { border-color:var(--groen); background:#f3f4ef; }
.pakket.actief::after { content:"✓ gekozen"; position:absolute; top:1rem; right:1rem; font-size:.75rem;
  font-weight:700; color:var(--groen-donker); background:var(--groen-tint); border-radius:999px; padding:.15rem .55rem; }
.pakket-naam { font-size:.9rem; font-weight:700; color:var(--inkt-zacht); text-transform:uppercase; letter-spacing:.06em; }
.pakket .prijs { font-size:1.9rem; font-weight:800; color:var(--inkt); display:block; margin-block:.3rem .1rem; }
.pakket small { color:var(--inkt-zacht); font-size:.85rem; line-height:1.5; display:block; }
.pakket .voor-wie { margin-top:.4rem; font-size:.88rem; color:var(--inkt-zacht); font-style:italic; }
.vinkjes { list-style:none; margin-top:.8rem; display:flex; flex-direction:column; gap:.35rem; font-size:.88rem; color:var(--inkt-zacht); }
.vinkjes .ic { color:var(--groen); }

.kaartje { background:var(--kaart); border:1px solid var(--beige); border-radius:16px;
  box-shadow:var(--schaduw); padding:1.6rem; max-width:30rem; }
.kaartje label { display:block; font-size:.85rem; font-weight:600; color:var(--inkt-zacht); margin:.8rem 0 .3rem; }
.kaartje input[type=email], .kaartje input[type=text] { width:100%; padding:.75rem .95rem; border-radius:10px; border:1px solid var(--beige);
  background:#fff; color:var(--inkt); font-size:1rem; }
.kaartje input:focus { outline:2px solid var(--groen); outline-offset:1px; border-color:var(--groen); }
.av { display:flex; gap:.55rem; align-items:flex-start; margin-top:.9rem; font-size:.85rem; color:var(--inkt-zacht); }
.av input { margin-top:.25rem; accent-color:var(--groen); }
.kaartje .btn-primary { margin-top:1.1rem; width:100%; justify-content:center; }
.fout { color:var(--fout); margin-top:.8rem; font-size:.9rem; font-weight:600; }
.klein { font-size:.82rem; color:var(--salie); margin-top:1rem; }

/* ── FAQ & footer ───────────────────────────────────────────────────── */
.faq-lijst { max-width:46rem; }
.faq-lijst details { background:var(--kaart); border:1px solid var(--beige); border-radius:12px;
  padding:1rem 1.2rem; margin-bottom:.7rem; }
.faq-lijst summary { font-weight:600; cursor:pointer; }
.faq-lijst p { margin-top:.6rem; color:var(--inkt-zacht); font-size:.95rem; }
footer { border-top:1px solid var(--beige); padding-block:2.2rem; }
.foot { display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; align-items:center;
  font-size:.86rem; color:var(--inkt-zacht); }
.foot nav { display:flex; gap:1.1rem; flex-wrap:wrap; }

/* ── Testimonials (optioneel blok, Fase 3) ─────────────────────────────── */
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1.1rem; }
.testimonial-kaart { display:flex; flex-direction:column; gap:1rem; }
.testimonial-kaart blockquote { font-size:1rem; color:var(--inkt); line-height:1.6; }
.testimonial-kaart figcaption { display:flex; align-items:center; gap:.7rem; }
.tm-foto { width:2.6rem; height:2.6rem; border-radius:50%; object-fit:cover; flex:none; }
.tm-wie { display:flex; flex-direction:column; line-height:1.3; }
.tm-wie small { color:var(--inkt-zacht); font-size:.85rem; }