/* OfferteLeeuw, gedeelde huisstijl (design-system v1.2)
   Wit als basis, petrol voor tekst, blauw #1C02AA voor interactie,
   oranje als merkaccent (met petrol tekst op knoppen). */
:root {
  --wit: #FFFFFF;
  --petrol: #0F2D37;
  --blauw: #1C02AA;
  --blauw-hover: #160087;
  --blauw-zacht: #F0EDFF;
  --oranje: #FF7A00;
  --oranje-hover: #F26500;
  --oranje-inkt: #B84D00;
  --oranje-kop: #EA6000;      /* koppen op wit: fel, haalt 3,4:1 */
  --oranje-zacht: #FFF1E5;
  --vlak: #F5F7F8;
  --rand: #DCE3E6;
  --rand-sterk: #7D8E95;
  --grijs: #53656B;
  --succes: #177245;
  --succes-zacht: #EAF6EF;
  --radius: 16px;
  --radius-groot: 24px;
  --knop-radius: 12px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; color: var(--petrol); background: var(--wit); line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; height: auto; }  /* verhouding blijft altijd behouden */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
header.site { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rand); }
.header-in { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 18px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; text-decoration: none; color: var(--petrol); }
.logo img { width: 40px; height: auto; }
nav.hoofdnav { display: flex; align-items: center; gap: 24px; }
nav.hoofdnav a.link { font-weight: 600; font-size: 15px; color: var(--petrol); text-decoration: none; }
nav.hoofdnav a.link:hover, nav.hoofdnav a.link[aria-current="page"] { color: var(--blauw); }
.knop-login { font-weight: 700; font-size: 14.5px; text-decoration: none; color: var(--petrol); border: 1.5px solid var(--rand); padding: 9px 20px; border-radius: 999px; }
.knop-login:hover { border-color: var(--petrol); }
.header-cta { font-weight: 700; font-size: 14.5px; text-decoration: none; background: var(--blauw); color: #fff; padding: 10px 20px; border-radius: 999px; }
.header-cta:hover { background: var(--blauw-hover); }
.menu-knop { display: none; width: 44px; height: 44px; padding: 10px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--wit); color: var(--petrol); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-knop span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s cubic-bezier(.22,1,.36,1), opacity .15s ease; }
.menu-knop.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-knop.is-open span:nth-child(2) { opacity: 0; }
.menu-knop.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Typografie & knoppen ---------- */
h1 { font-weight: 800; font-size: clamp(38px, 5.5vw, 62px); line-height: 1.06; letter-spacing: -0.03em; color: var(--petrol); }
h2 { font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 14px; color: var(--petrol); }
h3 { font-weight: 700; font-size: 20px; color: var(--petrol); }
.eyebrow { font-weight: 700; font-size: 14px; color: var(--oranje-inkt); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
p.sub { font-size: 19px; color: var(--grijs); margin: 20px 0 28px; max-width: 46ch; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 17px; text-decoration: none; border-radius: var(--knop-radius); padding: 15px 30px; min-height: 48px; }
.knop.blauw { background: var(--blauw); color: #fff; box-shadow: 0 8px 22px rgba(28,2,170,.22); }
.knop.blauw:hover { background: var(--blauw-hover); }
.knop.oranje { background: var(--oranje); color: #fff; box-shadow: 0 8px 22px rgba(255,122,0,.30); }
.knop.oranje:hover { background: var(--oranje-hover); }
.knop.stil { color: var(--petrol); background: #fff; border: 2px solid var(--rand); }
.knop.stil:hover { border-color: var(--blauw); color: var(--blauw); }
.cta-rij { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mini-note { font-size: 13.5px; color: var(--grijs); margin-top: 10px; }
a.tekstlink { color: var(--blauw); font-weight: 600; }
.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; }

/* ---------- Secties ---------- */
section { padding: 72px 0; }
section[id] { scroll-margin-top: 88px; }
.grijsvlak { background: var(--vlak); }
.sectiekop { max-width: 62ch; }
.sectiekop p { color: var(--grijs); }

/* Hero */
.hero { position: relative; padding: 68px 0 74px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fff 72%, #fffaf5 100%); }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr); gap: 64px; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 8px; }
.hero h1 { max-width: 12ch; }
.hero h1 span { color: var(--oranje-kop); white-space: nowrap; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--oranje-inkt); background: var(--oranje-zacht); border-radius: 999px; padding: 7px 15px; margin-bottom: 22px; }
.hero-zekerheden { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 25px; color: var(--grijs); font-size: 13.5px; }
.hero-zekerheden span { display: inline-flex; align-items: center; gap: 6px; }
.hero-zekerheden b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--succes-zacht); color: var(--succes); font-size: 12px; }
.hero-cta { padding: 18px 36px; min-height: 58px; font-size: 18.5px; }
.cta-rij .knop.stil { padding: 14px 26px; min-height: 50px; font-size: 16px; }
.hero-prijs { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--grijs); font-size: 13px; margin-top: 16px; padding: 8px 13px; border: 1px solid #ffd2a8; border-radius: 12px; background: var(--oranje-zacht); }
.hero-prijs b { color: var(--oranje-kop); font-size: 24px; line-height: 1; letter-spacing: -.03em; }
/* Eén rustig werkmoment: de vakman spreekt in en OfferteLeeuw werkt mee. */
.hero-figuur { position: relative; z-index: 1; width: 100%; max-width: 520px; margin-left: auto; aspect-ratio: 4 / 5; }
.hero-fotokader { position: absolute; inset: 0; z-index: 1; overflow: hidden; border: 1px solid rgba(15,45,55,.08); border-radius: 36px; background: var(--vlak); box-shadow: 0 24px 60px rgba(15,45,55,.14); }
.hero-foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }

/* Productdemo: één rustig WhatsApp-gesprek dat de hele werking laat zien. */
.chat-layout { display: grid; grid-template-columns: minmax(480px, 1.18fr) minmax(0, .82fr); gap: clamp(44px, 6vw, 84px); align-items: center; }
.chat-uitleg { max-width: 470px; margin-left: auto; }
.chat-intro { color: var(--grijs); font-size: 17px; max-width: 46ch; }
.chat-stappen { list-style: none; padding: 0; margin: 30px 0 24px; display: grid; gap: 18px; }
.chat-stappen li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; }
.chat-stappen li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--oranje); color: var(--petrol); font-size: 14px; font-weight: 800; }
.chat-stappen b { display: block; font-size: 16px; }
.chat-stappen p { margin-top: 2px; color: var(--grijs); font-size: 14.5px; line-height: 1.5; }
.chat-meer { display: inline-flex; gap: 7px; align-items: center; }
.vak-chat-sectie { overflow: clip; }
.vak-chat-sectie .sectiekop { max-width: 720px; margin-right: auto; margin-left: auto; text-align: center; }
.vak-chat-sectie .sectiekop p:last-child { max-width: 60ch; margin-right: auto; margin-left: auto; }
.vak-chat-component { margin-top: 38px; }
.vak-chat-demo { max-width: 630px; margin-right: auto; margin-left: auto; }

.chat-demo { width: 100%; max-width: 590px; margin-right: auto; overflow: hidden; border: 1px solid rgba(15,45,55,.11); border-radius: 30px; background: var(--wit); box-shadow: 0 24px 54px rgba(15,45,55,.12); }
.chat-demo.vak-chat-demo { max-width: 630px; margin-right: auto; margin-left: auto; }
.chat-kop { display: flex; align-items: center; min-height: 72px; padding: 12px 16px; border-bottom: 1px solid var(--rand); background: var(--wit); }
.chat-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--oranje-zacht); }
.chat-avatar img { width: 34px; height: 34px; object-fit: contain; }
.chat-identiteit { display: grid; margin-left: 11px; line-height: 1.25; }
.chat-identiteit b { font-size: 15px; }
.chat-identiteit small { color: var(--succes); font-size: 12px; }
.chat-pauze { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--rand); border-radius: 999px; background: var(--wit); color: var(--grijs); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.chat-pauze:hover { color: var(--petrol); border-color: var(--rand-sterk); }
.chat-pauze span:first-child { width: 12px; text-align: center; font-size: 10px; }

.chat-venster { position: relative; min-height: 810px; overflow: hidden; background-color: #f1eee9; background-image: radial-gradient(rgba(15,45,55,.055) .8px, transparent .8px); background-size: 18px 18px; }
.chat-dag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.82); color: var(--grijs); font-size: 11px; font-weight: 700; }
[data-chat-item] { opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; transition: opacity .22s ease-out, transform .26s cubic-bezier(.22,1,.36,1); }
[data-chat-item].is-visible { opacity: 1; transform: translateY(0) scale(1); }
.chat-bericht { position: absolute; max-width: 76%; padding: 10px 12px 8px; border-radius: 15px; color: var(--petrol); font-size: 14px; line-height: 1.42; box-shadow: 0 2px 8px rgba(15,45,55,.08); }
.chat-bericht small { display: block; margin-top: 3px; color: var(--grijs); font-size: 10px; text-align: right; }
.chat-bericht small b, .chat-fotos small b { color: #178c79; letter-spacing: -2px; }
.chat-bericht-eigen { right: 18px; background: #dcf8d5; border-bottom-right-radius: 4px; }
.chat-bericht-leo { left: 18px; background: var(--wit); border-bottom-left-radius: 4px; }
.chat-audio { top: 58px; width: 285px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.audio-play { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--succes); color: var(--wit); font-size: 11px; padding-left: 2px; }
.audio-golf { height: 30px; flex: 1; display: flex; align-items: center; gap: 3px; }
.audio-golf i { display: block; width: 3px; height: 16px; border-radius: 3px; background: #71978a; animation: chat-golf 1.15s ease-in-out infinite alternate; }
.audio-golf i:nth-child(2n) { height: 25px; animation-delay: -.45s; }
.audio-golf i:nth-child(3n) { height: 11px; animation-delay: -.75s; }
.audio-tijd { color: var(--grijs); font-size: 11px; }
@keyframes chat-golf { from { transform: scaleY(.55); } to { transform: scaleY(1); } }

.chat-fotos { top: 120px; width: 270px; padding: 7px; }
.chat-fotogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.chat-fotogrid img { display: block; width: 100%; height: 92px; object-fit: cover; border-radius: 9px; }
.chat-fotos small { display: block; padding: 5px 3px 0; color: var(--grijs); font-size: 10px; text-align: right; }
.chat-bericht[data-chat-item="trim"] { top: 242px; }
.chat-typen { position: absolute; top: 306px; left: 18px; display: flex; gap: 4px; padding: 13px 15px; border-radius: 15px 15px 15px 4px; background: var(--wit); box-shadow: 0 2px 8px rgba(15,45,55,.08); }
.chat-typen span { width: 6px; height: 6px; border-radius: 50%; background: var(--grijs); animation: chat-typ .75s ease-in-out infinite alternate; }
.chat-typen span:nth-child(2) { animation-delay: .16s; }
.chat-typen span:nth-child(3) { animation-delay: .32s; }
@keyframes chat-typ { to { transform: translateY(-4px); opacity: .45; } }
.chat-bericht[data-chat-item="question"] { top: 306px; }
.chat-bericht[data-chat-item="answer"] { top: 375px; }
.chat-kort { min-width: 112px; }
.chat-bezig { position: absolute; top: 438px; left: 18px; display: flex; align-items: center; gap: 10px; width: 292px; padding: 11px 13px; border-radius: 15px 15px 15px 4px; background: var(--wit); box-shadow: 0 2px 8px rgba(15,45,55,.08); }
.chat-bezig-logo { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--oranje-zacht); }
.chat-bezig-logo img { width: 25px; }
.chat-bezig b, .chat-bezig small { display: block; }
.chat-bezig b { font-size: 13px; }
.chat-bezig small { color: var(--grijs); font-size: 10px; }

.chat-offerte { position: absolute; top: 432px; left: 18px; right: 18px; padding: 17px; border: 1px solid var(--rand); border-radius: 18px; background: var(--wit); box-shadow: 0 14px 30px rgba(15,45,55,.13); }
.chat-offerte-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.chat-offerte-kop b { padding: 3px 9px; border-radius: 999px; background: var(--succes-zacht); color: var(--succes); font-size: 10px; }
.chat-offerte-regel { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--rand); font-size: 11px; }
.chat-offerte-regel b { white-space: nowrap; }
.chat-offerte-totaal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 11px; font-size: 12px; font-weight: 700; }
.chat-offerte-totaal b { color: var(--oranje-inkt); font-size: 21px; letter-spacing: -.03em; }
.chat-controle { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--rand); color: var(--succes); font-size: 11px; font-weight: 800; }
.chat-controle span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--succes); color: var(--wit); }

/* Compacte vakkeuze zonder een muur van losse kaarten. */
.vak-keuze { max-width: 860px; margin-top: 34px; border: 1px solid var(--rand); border-radius: var(--radius-groot); overflow: hidden; background: var(--wit); }
.vak-rij { display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: center; min-height: 96px; padding: 8px 22px 8px 12px; border-bottom: 1px solid var(--rand); text-decoration: none; }
.vak-rij:last-child { border-bottom: 0; }
.vak-rij:hover { background: var(--vlak); }
.vak-rij img { display: block; width: 76px; height: 76px; object-fit: contain; }
.vak-rij b, .vak-rij small { display: block; }
.vak-rij b { font-size: 18px; }
.vak-rij small { margin-top: 2px; color: var(--grijs); font-size: 13.5px; }
.vak-rij .pijl { color: var(--blauw); font-size: 22px; font-weight: 800; transition: transform .2s cubic-bezier(.22,1,.36,1); }
.vak-rij:hover .pijl { transform: translateX(4px); }
.vak-onder { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 20px; color: var(--grijs); font-size: 13.5px; }
.vakken-alle { position: relative; }
.vakken-alle summary { list-style: none; cursor: pointer; color: var(--blauw); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.vakken-alle summary::-webkit-details-marker { display: none; }
.vakken-alle summary::after { content: " ↓"; text-decoration: none; }
.vakken-alle[open] summary::after { content: " ↑"; }
.vak-links { position: absolute; top: calc(100% + 10px); left: 0; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 330px; padding: 10px; border: 1px solid var(--rand); border-radius: 14px; background: var(--wit); box-shadow: 0 14px 32px rgba(15,45,55,.13); }
.vak-links a { padding: 7px 9px; border-radius: 8px; color: var(--petrol); font-weight: 600; text-decoration: none; }
.vak-links a:hover { background: var(--vlak); color: var(--blauw); }

/* Eén duidelijk prijsanker op de homepage. */
.prijs-compact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr); gap: clamp(36px, 6vw, 76px); align-items: center; padding: clamp(34px, 5vw, 58px); border: 1px solid #ffd2a8; border-radius: 32px; background: var(--oranje-zacht); }
.prijs-verhaal > p:not(.eyebrow) { max-width: 56ch; color: var(--grijs); font-size: 16.5px; }
.prijs-punten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; padding: 0; margin: 26px 0 0; list-style: none; }
.prijs-punten li { display: flex; gap: 9px; color: #354a52; font-size: 14px; }
.prijs-punten li::before { content: "✓"; color: var(--succes); font-weight: 900; }
.prijs-anker { padding: 31px; border: 1px solid rgba(15,45,55,.09); border-radius: 24px; background: var(--wit); box-shadow: 0 16px 36px rgba(15,45,55,.09); }
.prijs-plan { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--blauw-zacht); color: var(--blauw); font-size: 12px; font-weight: 800; }
.prijs-vanaf { margin-top: 18px; color: var(--grijs); font-size: 12px; }
.prijs-bedrag { display: flex; align-items: center; gap: 12px; margin: 1px 0 22px; }
.prijs-bedrag b { font-size: 48px; line-height: 1; letter-spacing: -.04em; }
.prijs-bedrag span { color: var(--grijs); font-size: 12px; line-height: 1.45; }
.prijs-anker .knop { width: 100%; padding-inline: 18px; }
.prijs-rust { margin: 10px 0 12px; color: var(--grijs); font-size: 11.5px; text-align: center; }
.prijs-anker > .tekstlink { display: block; font-size: 13px; text-align: center; }

.faq-layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(440px, 1.28fr); gap: clamp(44px, 7vw, 90px); align-items: start; }
.faq-intro { max-width: 42ch; margin-bottom: 17px; color: var(--grijs); }
.faq-thuis .faq { max-width: none; }
.slot-sectie { padding-top: 12px; }

/* Uitklapmenu "Voor wie" */
.menu-vakken { position: relative; }
.menu-vakken > a.link { display: inline-flex; align-items: center; gap: 5px; padding: 10px 0; }
.uitklap { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 232px; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(15,45,55,.14); padding: 8px; margin: 0; list-style: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; z-index: 40; }
.menu-vakken:hover .uitklap, .menu-vakken:focus-within .uitklap { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.uitklap a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--petrol); }
.uitklap a:hover, .uitklap a[aria-current="page"] { background: var(--blauw-zacht); color: var(--blauw); }
.uitklap img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; object-position: 50% 12%; background: var(--vlak); flex: none; }

/* OfferteLeeuw-illustratie naast tekst (dashboardsectie) */
.leo-blok { background: var(--vlak); border: 1.5px solid var(--rand); border-radius: 28px; padding: 28px 28px 22px; text-align: center; }
.leo-blok-beeld { display: block; margin: 0 auto; width: 100%; max-width: 290px; aspect-ratio: 1 / 1; object-fit: contain; }
.leo-blok-tekst { margin-top: 8px; font-size: 17px; font-weight: 600; color: var(--petrol); }

.slot-leo-beeld { display: block; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: contain; object-position: center bottom; }

/* Stappenkaarten */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; align-items: stretch; }
.stap { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-groot); padding: 0 0 24px; overflow: hidden; box-shadow: 0 4px 18px rgba(15,45,55,.06); }
.stap img, .stap .stap-beeld { display: block; width: 100%; max-width: none; aspect-ratio: 1 / 1; object-fit: contain; object-position: bottom center; background: var(--vlak); margin: 0; }
.stap .tekst { padding: 18px 22px 0; }
.stap h3 { min-height: 2.6em; }
.stap h3 { font-size: 18px; margin-bottom: 7px; }
.stap p { font-size: 14.5px; color: var(--grijs); }

/* Vakken-grid */
.vakken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.vak-kaart { display: flex; align-items: center; gap: 16px; background: #fff; border: 1.5px solid var(--rand); border-radius: var(--radius); padding: 14px 18px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.vak-kaart:hover { border-color: var(--blauw); box-shadow: 0 8px 22px rgba(15,45,55,.08); }
.vak-kaart b { font-size: 17px; }
.vak-kaart span { display: block; font-size: 13.5px; color: var(--grijs); font-weight: 500; }
.vak-kaart .pijl { margin-left: auto; color: var(--blauw); font-weight: 800; }

/* Oranje merkvlak */
.oranjevlak { background: linear-gradient(135deg, var(--oranje) 0%, var(--oranje-hover) 100%); border-radius: 32px; padding: 56px; color: #fff; }
.oranjevlak .eyebrow { color: rgba(255,255,255,.9); }
.oranjevlak h2, .oranjevlak li, .oranjevlak li b { color: #fff; }
.oranjevlak .vink { background: #fff; color: var(--oranje-inkt); }
.leert-in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.leert-in ul { list-style: none; margin-top: 22px; display: grid; gap: 14px; padding: 0; }
.leert-in li { display: flex; gap: 12px; font-size: 16.5px; }
.vink { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--succes); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 900; }

/* Offertekaart (voorbeelddocument) */
.leert-kaart { background: #fff; border: 1.5px solid var(--rand); border-radius: var(--radius); padding: 28px; box-shadow: 0 12px 34px rgba(15,45,55,.08); color: var(--petrol); }
.oranjevlak .leert-kaart { border: 0; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.leert-kaart .kaartkop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.leert-kaart .regel { display: flex; justify-content: space-between; font-size: 14.5px; padding: 10px 4px; border-bottom: 1px dashed var(--rand); gap: 12px; }
.leert-kaart .regel:last-of-type { border: 0; }
.leert-kaart .badge { font-size: 12px; font-weight: 800; color: var(--oranje-inkt); background: var(--oranje-zacht); border: 1px solid #ffd9b3; padding: 2px 9px; border-radius: 999px; }
.badge-groen { font-size: 12px; font-weight: 800; color: var(--succes); background: var(--succes-zacht); border: 1px solid #bfe8bf; padding: 2px 9px; border-radius: 999px; }
.voorbeeld-label { font-size: 12px; font-weight: 700; color: var(--grijs); text-transform: uppercase; letter-spacing: .05em; }

/* Prijzen */
.prijzen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; align-items: stretch; }
.prijskaart { background: #fff; border: 1.5px solid var(--rand); border-radius: var(--radius-groot); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; }
.prijskaart.uitgelicht { border: 2.5px solid var(--blauw); box-shadow: 0 20px 44px rgba(28,2,170,.14); position: relative; }
.prijskaart .plan { font-weight: 700; font-size: 18px; }
.prijskaart .voor { font-size: 14px; color: var(--grijs); margin-top: 2px; }
.prijskaart .bedrag { font-weight: 800; font-size: 42px; }
.prijskaart .bedrag small { font-weight: 600; font-size: 14px; color: var(--grijs); }
.prijskaart ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 15px; color: #3d4d54; }
.prijskaart li { display: flex; gap: 9px; align-items: flex-start; }
.prijskaart li::before { content: "✓"; color: var(--succes); font-weight: 900; flex: none; }
.prijskaart .kies { margin-top: auto; text-align: center; font-weight: 700; font-size: 16px; padding: 13px 24px; border-radius: var(--knop-radius); text-decoration: none; border: 2px solid var(--rand); color: var(--petrol); }
.prijskaart .kies:hover { border-color: var(--blauw); color: var(--blauw); }
.prijskaart.uitgelicht .kies { background: var(--blauw); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(28,2,170,.28); }
.prijskaart.uitgelicht .kies:hover { background: var(--blauw-hover); }
.topper { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--blauw); color: #fff; font-weight: 700; font-size: 13px; padding: 5px 16px; border-radius: 999px; white-space: nowrap; }

/* Donker slotvlak */
.slotvlak { background: var(--petrol); border-radius: 32px; color: #fff; overflow: hidden; }
.slotvlak-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: stretch; min-height: 410px; padding: 56px 56px 0; }
.slotvlak-copy { align-self: center; padding-bottom: 56px; }
.slotvlak h2 { color: #fff; }
.slotvlak p { color: rgba(255,255,255,.85); font-size: 17px; max-width: 48ch; }
.slotvlak .knop { margin-top: 26px; }
.pil { display: inline-block; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }

/* Subpagina-kop */
.subhero { padding: 56px 0 32px; }
.subhero .kruimel { font-size: 13.5px; color: var(--grijs); margin-bottom: 16px; }
.subhero .kruimel a { color: var(--blauw); text-decoration: none; font-weight: 600; }
.subhero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.subhero .vak-leo { width: 100%; max-width: 330px; margin: 0 auto; display: block; aspect-ratio: 1 / 1; object-fit: contain; }

/* FAQ */
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--rand); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 17px; padding: 18px 34px 18px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 24px; font-weight: 600; color: var(--blauw); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--grijs); padding: 0 0 18px; max-width: 68ch; }
.faq details a { color: var(--blauw); }

/* Contentpagina (privacy e.d.) */
.prose { max-width: 760px; }
.prose h2 { font-size: 24px; margin: 36px 0 10px; }
.prose p, .prose li { color: #2e4048; font-size: 16px; }
.prose ul { padding-left: 22px; display: grid; gap: 6px; }

/* Checklist-blok */
.checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 26px; padding: 0; list-style: none; }
.checkgrid li { display: flex; gap: 11px; font-size: 16px; align-items: flex-start; }

footer.site { background: var(--petrol); color: #fff; padding: 52px 0 44px; margin-top: 48px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; font-size: 14.5px; }
.footer-grid .logo { font-size: 18px; color: #fff; margin-bottom: 10px; }
.footer-grid .logo img { width: 30px; }
.footer-grid p { color: rgba(255,255,255,.65); max-width: 30ch; }
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-onder { border-top: 1px solid rgba(255,255,255,.15); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.6); }

:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vak-kaart, .vak-rij .pijl, .menu-knop span, [data-chat-item] { transition: none; }
  .audio-golf i, .chat-typen span { animation: none; }
}

@media (max-width: 1020px) {
  .stappen { grid-template-columns: repeat(2, 1fr); }
  .vakken { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  [data-mobiel-stack] { grid-template-columns: 1fr !important; }
  .hero-in, .leert-in, .slotvlak-in, .subhero-in, .chat-layout, .prijs-compact, .faq-layout { grid-template-columns: 1fr; }
  .hero { padding-top: 52px; }
  .hero-in { gap: 42px; }
  .hero-copy { max-width: 680px; }
  .hero-figuur { width: min(100%, 620px); margin: 0 auto; }
  .chat-uitleg { max-width: 660px; margin-left: 0; order: -1; }
  .chat-demo { margin: 0 auto; }
  .prijs-punten { max-width: 680px; }
  .faq-layout { gap: 30px; }
  .slotvlak-in { min-height: 0; padding: 40px 28px 0; }
  .slotvlak-copy { padding-bottom: 12px; }
  .oranjevlak { padding: 36px 26px; }
  .slot-leo { max-width: 280px; margin: 0 auto; }
  nav.hoofdnav a.link, .menu-vakken { display: none; }
  .subhero .vak-leo { max-width: 240px; }
}
@media (max-width: 560px) {
  .stappen, .vakken, .checkgrid { grid-template-columns: 1fr; }
  .header-cta { display: none; }
  .logo { font-size: 19px; }
  .logo img { width: 34px; }
  section { padding: 52px 0; }
  .hero { padding: 38px 0 54px; }
  .hero h1 { font-size: clamp(38px, 12vw, 52px); }
  .hero h1 span { white-space: normal; }
  .hero .sub { font-size: 17px; }
  .hero .knop { width: 100%; }
  .hero-zekerheden { gap: 7px 13px; }
  .hero-figuur { max-width: 500px; }
  .hero-fotokader { border-radius: 28px; }
}

/* Duo-infokaarten (zo-werkt-het): rustig twee-koloms overzicht */
.duo-kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.info-kaart { background: #fff; border: 1.5px solid var(--rand); border-radius: var(--radius-groot); padding: 30px 30px 12px; }
.info-kaart h2 { margin-bottom: 8px; }
.info-rij { padding: 15px 0 17px; border-bottom: 1px solid var(--rand); }
.info-kaart .info-rij:last-child { border-bottom: 0; }
.info-rij b { display: block; font-size: 16.5px; font-weight: 700; color: var(--petrol); }
.info-rij p { margin-top: 3px; font-size: 14.5px; color: var(--grijs); line-height: 1.55; }
@media (max-width: 860px) { .duo-kaarten { grid-template-columns: 1fr; } }

/* Stap-lijniconen in plaats van grote OfferteLeeuw-beelden per kaart */
.stap-icoon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--blauw-zacht); color: var(--blauw); margin: 22px 0 0 22px; }
.stap-icoon svg { width: 26px; height: 26px; }

/* De compacte navigatie voorkomt wrappende links op tablets en kleine laptops. */
@media (max-width: 1080px) {
  .header-in { position: relative; }
  .menu-knop { display: flex; margin-left: auto; }
  nav.hoofdnav { display: none; position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 50; padding: 14px; border: 1px solid var(--rand); border-radius: 18px; background: var(--wit); box-shadow: 0 18px 40px rgba(15,45,55,.16); }
  nav.hoofdnav.is-open { display: grid; gap: 4px; }
  nav.hoofdnav.is-open a.link, nav.hoofdnav.is-open .menu-vakken { display: block; }
  nav.hoofdnav.is-open a.link, nav.hoofdnav.is-open .menu-vakken > a.link { width: 100%; padding: 10px 12px; border-radius: 10px; }
  nav.hoofdnav.is-open a.link:hover { background: var(--vlak); }
  nav.hoofdnav.is-open .uitklap { display: none; }
  nav.hoofdnav.is-open .knop-login, nav.hoofdnav.is-open .header-cta { display: flex; justify-content: center; margin-top: 5px; border-radius: 12px; }
}

@media (max-width: 560px) {
  .chat-stappen { gap: 15px; }
  .vak-chat-component { margin-top: 28px; }
  .chat-demo { border-radius: 22px; }
  .chat-kop { min-height: 66px; padding: 10px 12px; }
  .chat-pauze [data-chat-toggle-text] { display: none; }
  .chat-pauze { width: 36px; height: 36px; justify-content: center; padding: 0; }
  .chat-venster { min-height: 770px; }
  .chat-bericht-eigen { right: 12px; }
  .chat-bericht-leo { left: 12px; }
  .chat-audio { width: 245px; }
  .chat-fotos { top: 118px; width: 238px; }
  .chat-fotogrid img { height: 80px; }
  .chat-bericht[data-chat-item="trim"] { top: 224px; }
  .chat-typen, .chat-bericht[data-chat-item="question"] { top: 286px; left: 12px; }
  .chat-bericht[data-chat-item="answer"] { top: 352px; }
  .chat-bezig { top: 414px; left: 12px; width: 275px; }
  .chat-offerte { top: 408px; left: 12px; right: 12px; padding: 14px; }
  .chat-offerte-regel { gap: 8px; font-size: 10.5px; }
  .chat-offerte-totaal b { font-size: 19px; }
  .vak-rij { grid-template-columns: 64px 1fr auto; gap: 12px; min-height: 84px; padding: 8px 14px 8px 8px; }
  .vak-rij img { width: 64px; height: 64px; }
  .vak-onder { align-items: flex-start; flex-direction: column; gap: 8px; }
  .vakken-alle { width: 100%; }
  .vak-links { position: static; grid-template-columns: 1fr; min-width: 0; margin-top: 8px; }
  .prijs-compact { padding: 26px 18px; border-radius: 24px; }
  .prijs-punten { grid-template-columns: 1fr; }
  .prijs-anker { padding: 25px 20px; }
  .prijs-bedrag b { font-size: 43px; }
  .faq summary { font-size: 16px; }
  .slot-sectie { padding-top: 4px; }
}

.slot-sectie .slot-leo { display: flex; align-self: end; justify-content: center; background: transparent; border-radius: 0; padding: 0; margin: 0 auto; transform: none; box-shadow: none; }
.slot-sectie .slot-leo img { width: min(100%, 360px); max-width: none; max-height: none; margin: auto auto -1px; }

/* Skip-link: onzichtbaar tot toetsenbordfocus. */
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--blauw); color: #fff; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
/* Ondergrens leesbaarheid (design system: nooit onder 12px). */
.prijs-rust { font-size: 12.5px; }
.mini-note { font-size: 14px; }
/* Ruimere tikdoelen op aanraakschermen. */
@media (hover: none) {
  .vak-links a { padding: 11px 10px; }
  .footer-grid a { display: inline-block; padding: 4px 0; }
  .uitklap a { padding: 10px; }
}

/* ---------- Gereedschap: rekenhulpen op het blocnote ---------- */
.gereedschap-kop { padding-bottom: 8px; }
.gereedschap-in { grid-template-columns: 1.1fr .9fr; }
.gereedschap-leo { display: block; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 560 / 620; object-fit: contain; object-position: center bottom; }
.gereedschap-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.gereedschap-nav a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 9px; border: 1.5px solid var(--rand); border-radius: 999px; font-size: 14.5px; font-weight: 700; text-decoration: none; color: var(--petrol); }
.gereedschap-nav a:hover { border-color: var(--blauw); color: var(--blauw); }
.gereedschap-nav span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--oranje); color: var(--petrol); font-size: 12px; font-weight: 800; }

.blocnote-sectie { padding-top: 24px; }
.blocnote { position: relative; max-width: 980px; margin: 0 auto; padding: 58px clamp(22px, 5vw, 64px) 34px; background: #fff; border: 1px solid rgba(15,45,55,.10); border-radius: 6px 6px 22px 22px; box-shadow: 0 30px 70px rgba(15,45,55,.13), 0 2px 0 #e9eef0, 0 4px 0 #f3f6f7; }
.blocnote::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(180deg, transparent 0 39px, rgba(28,2,170,.055) 39px 40px); background-position: 0 58px; }
.blocnote-ringen { position: absolute; top: -14px; left: 0; right: 0; height: 30px; background: radial-gradient(circle at 50% 50%, #0F2D37 0 4px, #5f7680 4.5px 6px, transparent 6.5px) 0 0 / 44px 30px repeat-x; background-position-x: 22px; }
.blocnote-ringen::after { content: ""; position: absolute; inset: 14px 0 0; background: radial-gradient(circle at 50% 30%, var(--vlak) 0 5px, transparent 5.5px) 0 0 / 44px 30px repeat-x; background-position-x: 22px; }

.tool { position: relative; padding: 26px 0 38px; border-bottom: 2px dashed rgba(15,45,55,.18); }
.tool:last-of-type { border-bottom: 0; padding-bottom: 12px; }
.tool-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.tool-kop h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.tool-nr { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--oranje); color: var(--petrol); font-size: 17px; font-weight: 800; transform: rotate(-6deg); }
.tool-intro { max-width: 60ch; color: var(--grijs); }
.tool-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(26px, 5vw, 60px); margin-top: 22px; align-items: start; }
.velden { display: grid; gap: 18px; }
.veld label, .keuze legend { display: block; font-weight: 700; font-size: 15px; margin-bottom: 7px; }
.veld small { display: block; margin-top: 5px; color: var(--grijs); font-size: 13px; }
.schuif { display: grid; grid-template-columns: 1fr 88px; gap: 12px; align-items: center; }
input[type="range"] { width: 100%; accent-color: var(--blauw); height: 32px; }
.veld input[type="number"], .maten input[type="number"] { width: 100%; padding: 10px 12px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; font-weight: 700; font-size: 16px; color: var(--petrol); background: #fff; }
.veld input[type="number"]:focus, .maten input[type="number"]:focus { border-color: var(--blauw); outline: none; box-shadow: 0 0 0 3px rgba(28,2,170,.18); }
.maten { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.keuze { border: 0; padding: 0; margin: 0; }
.keuze label { display: inline-flex; margin: 0 8px 8px 0; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze span { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--rand); border-radius: 999px; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; }
.keuze input:checked + span { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.keuze input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 3px; }
.segment { display: inline-flex; padding: 4px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--vlak); }
.segment button { padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-weight: 700; font-size: 14.5px; color: var(--petrol); cursor: pointer; }
.segment button[aria-pressed="true"] { background: #fff; color: var(--blauw); box-shadow: 0 2px 8px rgba(15,45,55,.10); }
.vinkje { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.vinkje input { width: 18px; height: 18px; accent-color: var(--blauw); }

.uitkomst { position: relative; padding: 22px 24px 20px; border-radius: 18px; background: var(--oranje-zacht); border: 1px solid #ffd2a8; }
.uitkomst-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--oranje-inkt); }
.marker { position: relative; display: inline-block; margin: 6px 0 4px; padding: 6px 18px; font-size: clamp(34px, 4.5vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--petrol); }
.marker::before { content: ""; position: absolute; inset: -4px -8px -2px -6px; border: 3px solid var(--oranje); border-radius: 48% 52% 46% 54% / 58% 44% 56% 42%; transform: rotate(-2.5deg); }
.uitkomst-sub { color: #354a52; font-size: 15px; }
.uitkomst-rij { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #ffbf85; }
.uitkomst-rij div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; }
.uitkomst-rij dt { color: var(--grijs); }
.uitkomst-rij dd { margin: 0; font-weight: 800; font-size: 17px; white-space: nowrap; }
.uitkomst-rij dd.netto { color: var(--succes); }
.aanname { margin-top: 12px; font-size: 12.5px; color: var(--grijs); }

@media (max-width: 860px) {
  .gereedschap-in { grid-template-columns: 1fr; }
  .gereedschap-leo { max-width: 260px; }
  .tool-in { grid-template-columns: 1fr; }
  .blocnote { padding-top: 46px; }
}
@media (max-width: 560px) {
  .schuif { grid-template-columns: 1fr 76px; }
  .blocnote { border-radius: 4px 4px 18px 18px; }
  .marker { font-size: 32px; }
}

/* ---------- Snel uitrekenen: compacte strook op homepage en vakpagina's ---------- */
.snelrekenen-sectie { padding: 12px 0 76px; }

/* Proefrit-QR onder de hero: scannen op desktop, WhatsApp-knop op mobiel. */
.hero-proef { position: absolute; right: -22px; bottom: -34px; z-index: 3; display: flex; align-items: center; gap: 18px; max-width: 400px; padding: 18px 22px 18px 18px; border: 2px solid var(--oranje); border-radius: 20px; background: #fff; box-shadow: 0 22px 50px rgba(15,45,55,.22); }
.hero-proef img { width: 122px; height: 122px; flex: none; border-radius: 10px; }
.hero-proef div { display: grid; gap: 5px; }
.hero-proef b { font-size: 18.5px; letter-spacing: -.02em; }
.hero-proef span { font-size: 14px; color: var(--grijs); line-height: 1.45; }
.hero-proef-knop { display: none; margin-top: 6px; color: var(--blauw); font-weight: 700; font-size: 16px; text-decoration: none; }
@media (max-width: 1180px) { .hero-proef { right: -8px; bottom: -30px; max-width: 350px; padding: 15px 18px 15px 15px; } .hero-proef img { width: 104px; height: 104px; } }
@media (max-width: 860px) {
  /* Foto stroomt mee, zodat het proefrit-blok er netjes onder komt. */
  .hero-figuur { aspect-ratio: auto; }
  .hero-fotokader { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .hero-proef { position: static; max-width: none; margin-top: 18px; box-shadow: none; padding: 16px 18px; }
  .hero-proef img { display: none; }
  .hero-proef-knop { display: inline-flex; gap: 6px; }
}

/* Klantcitaten */
.citaten-sectie { padding-top: clamp(48px, 6vw, 76px); }
.citaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.citaat { position: relative; margin: 0; padding: 26px 26px 22px; border: 1.5px solid var(--rand); border-radius: var(--radius-groot); background: #fff; display: grid; gap: 12px; align-content: start; }
.citaat.is-voorbeeld { border-style: dashed; }
.cit-badge { justify-self: start; padding: 3px 9px; border-radius: 999px; background: var(--oranje-zacht); color: var(--oranje-inkt); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cit-sterren { color: var(--oranje); font-size: 18px; letter-spacing: 2px; }
.citaat blockquote { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--petrol); }
.citaat blockquote::before { content: "\201C"; margin-right: 2px; color: var(--oranje); font-weight: 800; }
.citaat figcaption { display: grid; font-size: 14px; color: var(--grijs); }
.citaat figcaption b { color: var(--petrol); }

/* Prijsregel in de hero + link naar alle prijzen */
.hero-prijs-link { display: inline-block; margin-top: 9px; color: var(--blauw); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.hero-prijs-link:hover { text-decoration: underline; }

/* ---------- Rekenstrook: het belangrijkste getal van de pagina ----------
   Petrol vlak: de enige plek waar het felle merkoranje wél contrast haalt
   (5,7:1), dus daar staan de cijfers zo groot mogelijk. */
.snel-strook { position: relative; display: grid; grid-template-columns: minmax(220px, .75fr) 1.25fr; gap: clamp(26px, 4vw, 56px); align-items: center; padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 56px); border-radius: 32px; background: var(--petrol); color: #fff; overflow: hidden; }
.snel-kop { position: relative; z-index: 1; }
.snel-kop .eyebrow { color: var(--oranje); margin-bottom: 8px; }
.snel-kop h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; margin-bottom: 0; }
.snel-tool { position: relative; z-index: 1; }
.snel-tool label { display: flex; justify-content: flex-start; align-items: baseline; gap: 9px; font-weight: 700; font-size: 15px; color: rgba(255,255,255,.82); margin-bottom: 6px; }
.snel-tool label b { padding: 2px 11px; border-radius: 999px; background: rgba(255,122,0,.16); color: var(--oranje); font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.snel-tool input[type="range"] { width: 100%; accent-color: var(--oranje); height: 34px; }
.snel-uitkomsten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; margin-top: 14px; }
.snel-uit { display: grid; gap: 4px; align-content: start; }
.snel-uit output { display: block; font-size: clamp(40px, 6.4vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--oranje); font-variant-numeric: tabular-nums; }
.snel-uit span { font-size: 14.5px; color: rgba(255,255,255,.78); line-height: 1.4; max-width: 26ch; }
.snel-noot { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13.5px; color: rgba(255,255,255,.66); max-width: 68ch; line-height: 1.55; }
.snel-meer { position: relative; z-index: 1; grid-column: 1 / -1; justify-self: start; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--oranje); text-decoration-thickness: 2px; }
.snel-meer:hover { color: var(--oranje); }
@media (max-width: 860px) { .snel-strook { grid-template-columns: 1fr; gap: 24px; padding: 30px 24px; border-radius: 24px; } }
@media (max-width: 480px) { .snel-uitkomsten { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Praktijkverhaal: tijdlijn van één schouw ---------- */
.verhaal { display: grid; grid-template-columns: minmax(0, .78fr) minmax(320px, 1.22fr); gap: clamp(32px, 5vw, 68px); align-items: start; }
.verhaal-intro p { color: var(--grijs); font-size: 17px; max-width: 42ch; }
.tijdlijn { position: relative; display: grid; gap: 26px; padding-left: 26px; margin: 0; list-style: none; }
.tijdlijn::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--oranje), var(--rand)); }
.tijdlijn li { position: relative; }
.tijdlijn li::before { content: ""; position: absolute; left: -26px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--wit); border: 3px solid var(--oranje); }
.tijdlijn time { display: block; font-size: 13px; font-weight: 800; color: var(--oranje-inkt); letter-spacing: .03em; }
.tijdlijn b { display: block; margin-top: 3px; font-size: 17.5px; }
.tijdlijn p { margin-top: 4px; color: var(--grijs); font-size: 15px; line-height: 1.55; max-width: 52ch; }
.tijdlijn .citaat-klant { display: inline-block; margin-top: 7px; padding: 8px 13px; border-radius: 14px 14px 14px 4px; background: var(--vlak); font-size: 14.5px; font-style: italic; color: var(--petrol); }
.tijdlijn .citaat-leeuw { background: var(--oranje-zacht); border-radius: 14px 14px 4px 14px; }

/* ---------- Reviews: waarom en hoe ---------- */
.reviewblok { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 64px); align-items: center; }
.review-beeld { position: relative; text-align: center; }
.review-beeld img { display: block; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: contain; }
.review-kaart { display: inline-flex; align-items: center; gap: 11px; margin-top: -6px; padding: 11px 16px; border: 1px solid var(--rand); border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(15,45,55,.12); }
.review-kaart .sterren { color: var(--oranje); font-size: 19px; letter-spacing: 2px; line-height: 1; }
.review-kaart b { display: block; font-size: 14.5px; }
.review-kaart span { display: block; font-size: 12.5px; color: var(--grijs); }
.review-punten { display: grid; gap: 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.review-punten li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; }
.review-punten .nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oranje); color: var(--petrol); font-size: 13px; font-weight: 800; }
.review-punten b { display: block; font-size: 16.5px; }
.review-punten p { margin-top: 2px; color: var(--grijs); font-size: 15px; line-height: 1.55; }
@media (max-width: 860px) { .verhaal, .reviewblok { grid-template-columns: 1fr; } .review-beeld img { max-width: 260px; } }

/* Volledig vakoverzicht op de homepage: geen uitklapmenu meer. */
.vak-keuze-breed { display: grid; grid-template-columns: 1fr 1fr; max-width: none; }
.vak-keuze-breed .vak-rij:nth-last-child(2) { border-bottom: 0; }
.vak-keuze-breed .vak-rij:nth-child(odd) { border-right: 1px solid var(--rand); }
.vak-extra { margin-top: 26px; }
.vak-extra p b { font-size: 15.5px; }
.vak-overig { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.vak-overig li { padding: 7px 13px; border: 1px solid var(--rand); border-radius: 999px; font-size: 14px; font-weight: 600; color: #3d4d54; background: #fff; }
@media (max-width: 720px) {
  .vak-keuze-breed { grid-template-columns: 1fr; }
  .vak-keuze-breed .vak-rij:nth-child(odd) { border-right: 0; }
  .vak-keuze-breed .vak-rij:nth-last-child(2) { border-bottom: 1px solid var(--rand); }
}

/* ---------- Waarom nu: argumentenblok op de tarievenpagina ---------- */
.deal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(30px, 5vw, 64px); align-items: center; }
.deal-punten { display: grid; gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.deal-punten li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.deal-punten .vink { width: 30px; height: 30px; font-size: 15px; }
.deal-punten b { display: block; font-size: 17px; }
.deal-punten p { margin-top: 3px; color: var(--grijs); font-size: 15px; line-height: 1.55; }
.deal-beeld { text-align: center; }
.deal-beeld img { display: block; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: contain; }
.deal-bijschrift { display: inline-block; margin-top: 4px; padding: 9px 16px; border-radius: 999px; background: var(--oranje-zacht); color: var(--oranje-inkt); font-size: 14.5px; font-weight: 700; }
.rekensom { margin-top: 30px; padding: 22px 26px; border: 1.5px solid var(--rand); border-radius: 20px; background: #fff; }
.rekensom dl { display: grid; gap: 10px; margin: 0; }
.rekensom div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15.5px; }
.rekensom dt { color: var(--grijs); }
.rekensom dd { margin: 0; font-weight: 700; white-space: nowrap; }
.rekensom .som { padding-top: 12px; border-top: 1.5px dashed var(--rand); font-size: 17px; }
.rekensom .som dd { color: var(--succes); font-size: 21px; font-weight: 800; }
@media (max-width: 860px) { .deal { grid-template-columns: 1fr; } .deal-beeld img { max-width: 280px; } }

/* Reviewregel in het Vakman-pakket: oranje gloed als aandachtstrekker. */
.prijskaart li.li-accent { margin: 4px -12px; padding: 10px 12px; border: 1px solid #ffd2a8; border-radius: 12px; background: var(--oranje-zacht); font-weight: 600; color: var(--petrol); }
.prijskaart li.li-accent::before { color: var(--oranje-inkt); }
.roadmap { max-width: 68ch; }
.roadmap b { color: var(--petrol); }

/* Zoekresultaten-mockup: jouw bedrijf bovenaan bij de concurrentie. */
.zoeklijst { margin-top: 14px; padding: 16px 18px 14px; border: 1.5px solid var(--rand); border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(15,45,55,.10); text-align: left; }
.zoeklijst-kop { display: flex; align-items: center; gap: 8px; padding: 8px 13px; margin-bottom: 12px; border: 1px solid var(--rand); border-radius: 999px; background: var(--vlak); color: var(--grijs); font-size: 13.5px; }
.zoeklijst-kop span { font-size: 15px; }
.zoeklijst ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.zoeklijst li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid transparent; border-radius: 12px; }
.zoeklijst li:not(.is-jij) { opacity: .62; }
.zoeklijst li.is-jij { border-color: #ffd2a8; background: var(--oranje-zacht); }
.zoek-naam { display: flex; align-items: center; gap: 8px; min-width: 0; }
.zoek-naam b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoek-pil { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--oranje); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.zoek-score { display: flex; align-items: baseline; gap: 7px; flex: none; }
.zoek-score b { font-size: 15px; font-variant-numeric: tabular-nums; }
.zoek-score .sterren { color: var(--oranje); font-size: 13px; letter-spacing: 1px; }
.zoek-score small { color: var(--grijs); font-size: 12px; white-space: nowrap; }
.zoeklijst li:not(.is-jij) .sterren { color: var(--rand-sterk); }
.zoeklijst-voet { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--rand); color: var(--grijs); font-size: 13px; line-height: 1.5; }
@media (max-width: 480px) {
  .zoeklijst li { flex-direction: column; align-items: flex-start; gap: 5px; }
  .zoek-score { gap: 6px; }
}

/* Laatste stap in de chat: akkoord vragen met een quick-reply-knop. */
.chat-akkoord { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--rand); }
.chat-akkoord p { font-size: 12px; color: var(--petrol); font-weight: 600; }
.chat-knop { display: block; margin-top: 7px; padding: 7px 12px; border: 1px solid #cfe3d8; border-radius: 10px; background: #f2fbf6; color: #128C7E; font-size: 12.5px; font-weight: 700; text-align: center; }

/* Uitnodigingsbonus: een maand gratis per aangemelde collega. */
.uitnodiging-sectie { padding-top: 12px; }
.uitnodiging { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr); gap: clamp(28px, 5vw, 56px); align-items: center; padding: clamp(28px, 4vw, 46px); border: 2px solid var(--oranje); border-radius: 28px; background: var(--oranje-zacht); }
.uitnodiging h2 { font-size: clamp(26px, 3.2vw, 36px); }
.uitnodiging > div > p { color: #3d4d54; max-width: 50ch; }
.uitnodiging-stappen { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.uitnodiging-stappen li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; }
.uitnodiging-stappen li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oranje); color: #fff; font-size: 13px; font-weight: 800; }
.uitnodiging-stappen b { display: block; font-size: 16px; }
.uitnodiging-stappen p { margin-top: 2px; color: var(--grijs); font-size: 14.5px; line-height: 1.5; }
.uitnodiging-kaart { padding: 24px; border: 1px solid #ffd2a8; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(15,45,55,.10); }
.uitnodiging-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--oranje-inkt); }
.uitnodiging-link { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 11px 13px; border: 1px dashed var(--rand-sterk); border-radius: 12px; background: var(--vlak); font-size: 14px; color: var(--grijs); word-break: break-all; }
.uitnodiging-link b { color: var(--petrol); }
.uitnodiging-teller { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.uitnodiging-teller div { padding: 13px; border-radius: 14px; background: var(--oranje-zacht); text-align: center; }
.uitnodiging-teller b { display: block; font-size: 28px; font-weight: 800; color: var(--oranje-inkt); line-height: 1; }
.uitnodiging-teller span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--grijs); }
.uitnodiging-kaart .mini-note { margin-top: 12px; text-align: center; }
@media (max-width: 860px) { .uitnodiging { grid-template-columns: 1fr; } }