/*
  home.css — de opmaak van de publieke homepage en de pagina's die er
  dezelfde blokken van gebruiken (/prijzen, en wat daarna nog volgt).

  Stond tot 14 september 2026 als <style>-blok in website.html. Verplaatst
  toen de prijskaarten een eigen pagina kregen: twee pagina's die dezelfde
  kaarten tonen, moeten niet elk hun eigen kopie van de stijl hebben — dan
  lopen ze binnen een maand uit elkaar.

  Wordt geladen NA styles.css en site-nav.css, precies zoals het <style>-blok
  daar stond. Die volgorde is bewust: sommige regels hieronder overschrijven
  met opzet iets uit site-nav.css.
*/

  /* Deze pagina gebruikt bewust geen zijbalk-layout (dat is voor de
     ingelogde app) — dit is de publieke website, vrij toegankelijk,
     met een eigen bovenbalk en volle-breedte secties. */
  body { margin: 0; }
  a { color: inherit; }
  #scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 20;
    transition: width 0.1s linear;
  }
  .site-header {
    position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
  }
  .site-header-inner {
    max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
  }
  .site-brand { font-weight: 700; font-size: 17px; color: var(--navy); text-decoration: none; }

  /* Het menu heeft sinds 02-09-2026 een eigen bestand: /site-nav.css.
     Daar staat ook de mobiele variant in, die hier niet bestond.

     05-09-2026: de .site-nav-links-regels die hier nog stonden zijn
     daar ook naartoe verhuisd. Ze stonden ná de <link> hierboven en
     wonnen daardoor van de mobiele regels — met als gevolg een menu
     dat op een telefoon altijd openstond. Zet menu-opmaak dus niet
     terug in dit blok; hij hoort in /site-nav.css. */

  /* --- In beeld: echte schermen uit de app --- */
  .screen-block { display: grid; grid-template-columns: 1fr 1.25fr; gap: 44px; align-items: center; margin-bottom: 72px; }
  .screen-block:last-child { margin-bottom: 0; }
  .screen-block.omgekeerd { grid-template-columns: 1.25fr 1fr; }
  .screen-block.omgekeerd .screen-tekst { order: 2; }
  .screen-block.omgekeerd .screen-beeld { order: 1; }
  .screen-tekst h3 { font-size: 25px; margin: 10px 0 12px; line-height: 1.25; }
  .screen-tekst p { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin: 0 0 14px; }
  .screen-tekst ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 14.5px; line-height: 1.75; }
  .screen-tekst ul li { margin-bottom: 5px; }
  .screen-tekst ul li strong { color: var(--navy); }
  .screen-nummer {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 9px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  }
  .screen-beeld img {
    width: 100%; height: auto; display: block; border-radius: 12px;
    border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(15,23,42,0.13);
  }
  .screen-onderschrift { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; font-style: italic; }
  .screen-voetnoot {
    margin-top: 8px; padding: 14px 18px; border-radius: 10px; background: #F7F8FB;
    border: 1px solid var(--border); font-size: 13px; color: var(--text-muted); text-align: center;
  }
  @media (max-width: 860px) {
    .screen-block, .screen-block.omgekeerd { grid-template-columns: 1fr; gap: 24px; }
    .screen-block.omgekeerd .screen-tekst { order: 1; }
    .screen-block.omgekeerd .screen-beeld { order: 2; }
  }

  section { padding: 72px 24px; }
  .section-inner { max-width: 1100px; margin: 0 auto; }
  .section-inner.narrow { max-width: 760px; }

  /* ---- KLEUR PER VERDIENMODEL (alleen voor de publieke site) ----
     Bewust hier en niet in styles.css: die deelt de app zijn kleuren,
     waar --green "goed" en --red "fout" betekent. Die betekenis mag
     niet sneuvelen voor een mooiere homepage. */
  :root {
    --m1: #2F6FED;  --m1-soft: #EAF1FF;  --m1-dark: #1F55C4;  /* Producten & kassa   € 45 */
    --m2: #0E9F6E;  --m2-soft: #E6F6EF;  --m2-dark: #0A7A54;  /* Uren & opdrachten   € 59 */
    --m3: #D97706;  --m3-soft: #FDF3E4;  --m3-dark: #A85D05;  /* Afspraken & agenda  € 49 */
    --m4: #6D4AD0;  --m4-soft: #EFEAFB;  --m4-dark: #553BA6;  /* Projecten & dossiers € 79 */
    --band-blue: #F4F7FD;
    --band-green: #F3F8F6;
  }
  .model-1 { --mc: var(--m1); --mc-soft: var(--m1-soft); --mc-dark: var(--m1-dark); }
  .model-2 { --mc: var(--m2); --mc-soft: var(--m2-soft); --mc-dark: var(--m2-dark); }
  .model-3 { --mc: var(--m3); --mc-soft: var(--m3-soft); --mc-dark: var(--m3-dark); }
  .model-4 { --mc: var(--m4); --mc-soft: var(--m4-soft); --mc-dark: var(--m4-dark); }

  /* ---- HERO: licht, tweekoloms, kop links en beeld ernaast ----
     De belofte en het bewijs staan naast elkaar, zodat je ze allebei ziet
     zonder te scrollen. Kleur zit in de knop en het productbeeld, niet in
     een gekleurde achtergrond — dat leest rustiger en laat de kop harder
     aankomen. De donkere band is verplaatst naar de slotsectie onderaan. */
  .hero {
    background: #fff; color: var(--navy); text-align: left;
    padding-top: 64px; padding-bottom: 64px; position: relative; overflow: hidden;
  }
  .hero-grid {
    display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 44px; align-items: center;
  }
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero { padding-top: 44px; text-align: left; }
  }

  /* Sociale bewijskracht bóven de kop, zoals de badge die je bij andere
     SaaS-sites boven de titel ziet staan. */
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: 999px;
    padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--navy);
    background: #fff; margin-bottom: 20px; line-height: 1.35;
  }
  .hero-badge .ster { color: var(--m3); }

  .hero h1 {
    font-size: 46px; line-height: 1.04; letter-spacing: -0.03em; font-weight: 800;
    margin: 0 0 16px; max-width: 560px;
  }
  .hero p.lead {
    font-size: 16.5px; color: var(--text-muted); max-width: 460px;
    margin: 0 0 10px; line-height: 1.5;
  }
  .hero .hero-voor { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; }

  /* De onderdelen als labels: laat zien dat dit geen roosterapp is,
     zonder dat je het hoeft te beweren. */
  .hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; max-width: 500px; }
  .hero-chips span {
    font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    background: #F1F4F9; color: #3C4759;
  }

  .hero-ctas { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .hero-ctas .btn, .hero-ctas .btn-secondary {
    text-decoration: none; display: inline-block; padding: 13px 24px; border-radius: 10px; font-size: 14.5px;
  }
  .hero-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

  /* Toegevoegd 9 september 2026 na de websitereview.
     - .hero-fit  : voor wie dit is, direct onder de kop
     - .hero-phone: het telefoonnummer, nadrukkelijk aanwezig omdat de
                    pagina op zeven plekken om persoonlijk contact vraagt */
  .hero-fit {
    font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
    margin: 0 0 18px; padding-left: 12px; border-left: 3px solid var(--border);
  }
  .hero-fit strong { color: var(--text); }
  .hero-ctas-note { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
  .hero-phone {
    font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none;
    letter-spacing: .2px;
  }
  .hero-phone:hover { text-decoration: underline; }
  .hero-phone-note { font-size: 12.5px; color: var(--text-muted); }

  /* Klantcitaat boven de prijzen. Staat verborgen tot er een echte klant
     met naam geciteerd kan worden — zie de uitleg bij de section zelf. */
  .klantcitaat { padding: 10px 0 0; }
  .citaat {
    margin: 0; padding: 26px 30px; background: var(--card-bg);
    border-left: 4px solid var(--navy); border-radius: 12px;
  }
  .citaat p { margin: 0 0 10px; font-size: 19px; line-height: 1.55; font-weight: 600; }
  .citaat footer { font-size: 13.5px; color: var(--text-muted); }

  /* "We gebruiken het zelf" bij het oprichtersverhaal. Bewust ingetogen:
     het is geen klantbewijs en mag er ook niet als klantbewijs uitzien. */
  .zelf-gebruik {
    border-left: 3px solid var(--border); padding-left: 14px;
  }

  /* Het productbeeld: donkere lijst met een tabbalk erboven, zodat je in
     één blik ziet dat er meer schermen zijn dan het scherm dat je toont. */
  .hero-stage { position: relative; }
  .hero-stage::after {
    content: ""; position: absolute; inset: 18px -14px -16px 26px;
    background: var(--band-blue); border-radius: 18px; z-index: 0;
  }
  .hero-shot {
    position: relative; z-index: 1; margin: 0; max-width: none;
    background: var(--navy); border-radius: 16px; padding: 9px;
    box-shadow: 0 20px 60px rgba(23,32,51,0.22);
  }
  .hero-tabs { display: flex; gap: 3px; padding: 2px 4px 9px; overflow-x: auto; }
  .hero-tabs span {
    font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.55);
    padding: 5px 9px; border-radius: 7px; white-space: nowrap;
  }
  .hero-tabs span.actief { background: #fff; color: var(--navy); }
  .hero-shot-inner {
    background: var(--card-bg); border-radius: 10px; padding: 20px; text-align: left;
    display: grid; grid-template-columns: 1fr; gap: 14px; color: var(--navy);
  }
  @media (max-width: 720px) { .hero h1 { font-size: 32px; } }

  /* ---- VIER PUNTEN: wat andere pakketten niet doen ----
     Korte, harde formuleringen in vier kaarten. Elke kaart hangt aan een
     concreet gat bij een concurrent (zie concurrentie-analyse in Sales-leads):
     1 = Shiftbase doet interne kostenbeheersing, geen marge per opdrachtgever
     2 = niemand van de onderzochte pakketten rekent declarabiliteit uit
     3 = Nocore heeft marge, maar per maand in een BI-dashboard
     4 = SecuSoft heeft beide getallen, maar brengt ze nooit samen */
  #anders .card4-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px;
  }
  @media (max-width: 900px) { #anders .card4-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { #anders .card4-grid { grid-template-columns: 1fr; } }
  .card4 {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
    padding: 22px 20px 20px;
  }
  .card4 .c4-icon {
    width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; font-size: 18px; margin-bottom: 16px; background: var(--c4-soft);
  }
  .card4 .c4-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--c4); margin-bottom: 9px;
  }
  .card4 .c4-text { font-size: 14px; line-height: 1.45; color: var(--navy); font-weight: 600; margin: 0 0 12px; }
  .card4 .c4-sub { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }
  .card4:nth-child(1) { --c4: var(--m1-dark); --c4-soft: var(--m1-soft); }
  .card4:nth-child(2) { --c4: var(--m2-dark); --c4-soft: var(--m2-soft); }
  .card4:nth-child(3) { --c4: var(--m3-dark); --c4-soft: var(--m3-soft); }
  .card4:nth-child(4) { --c4: var(--m4-dark); --c4-soft: var(--m4-soft); }

  .hero::before, .hero::after { content: none; }
  .hero::before {
    top: -140px; right: -100px; width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(96,150,255,0.30), transparent 70%);
    animation: blobFloat 11s ease-in-out infinite;
  }
  .hero::after {
    top: 120px; left: -140px; width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(30,200,140,0.22), transparent 70%);
    animation: blobFloat 13s ease-in-out infinite reverse; animation-delay: 1.5s;
  }
  @keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-24px, 28px) scale(1.08); }
  }
  @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } }
  .hero > .section-inner { position: relative; z-index: 1; }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); color: var(--accent-dark);
    border: 1px solid #D6E4FF; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; margin-bottom: 22px;
  }
  .hero h1 { font-size: 42px; line-height: 1.15; margin: 0 0 18px; letter-spacing: -0.02em; max-width: 760px; margin-left:auto; margin-right:auto; }
  .hero p.lead { font-size: 17px; color: var(--text-muted); max-width: 600px; margin: 0 auto 34px; line-height: 1.55; }
  .hero-ctas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .hero-ctas .btn, .hero-ctas .btn-secondary {
    text-decoration: none; display: inline-block; padding: 13px 24px; border-radius: 10px; font-size: 14.5px;
  }
  .hero-note { font-size: 12.5px; color: var(--text-muted); }
  .hero-shot {
    margin: 52px auto 0; max-width: 920px; background: var(--navy); border-radius: 16px; padding: 10px;
    box-shadow: 0 20px 60px rgba(23,32,51,0.25);
  }
  .hero-shot-inner {
    background: var(--card-bg); border-radius: 10px; padding: 28px; text-align: left;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px;
  }
  @media (max-width: 720px) { .hero h1 { font-size: 30px; } .hero-shot-inner { grid-template-columns: 1fr; } }
  /* ================================================================
     PRODUCTBLOKKEN ("Zo ziet het eruit")
     ================================================================
     Geen schermafbeeldingen en geen stockfoto's, maar één uitvergroot
     stukje interface per blok, in HTML nagebouwd. Drie redenen:
     scherp op elk scherm, geen bestand dat veroudert zodra de app
     verandert, en we kunnen precies dát stukje laten zien waar het
     verhaal over gaat in plaats van een heel scherm waarin de lezer
     zelf moet zoeken.

     De bedragen komen overeen met de hero (winst vandaag EUR 684 uit
     EUR 1.850 omzet), zodat het over hetzelfde bedrijf op dezelfde dag
     blijft gaan. Verander je het ene, verander dan het andere mee. */
  .toon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  @media (max-width: 900px) { .toon-grid { grid-template-columns: 1fr; } }

  .toon-kaart {
    min-width: 0;
    display: flex; flex-direction: column;
    background: var(--mc-soft, var(--band-blue)); border-radius: 18px;
    padding: 26px 24px 0; overflow: hidden;
  }
  .toon-kaart .eyebrow {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 700; color: var(--mc-dark, var(--accent-dark)); margin-bottom: 8px;
  }
  .toon-kaart h3 {
    font-size: 19px; line-height: 1.25; letter-spacing: -0.01em;
    color: var(--navy); margin: 0 0 8px; text-wrap: balance;
  }
  .toon-kaart > p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 22px; }

  /* Het uitvergrote stukje interface. Steekt bewust onderaan uit de
     kaart: het suggereert dat er méér scherm is dan je hier ziet. */
  .toon-beeld {
    margin-top: auto; background: #fff;
    border: 1px solid var(--border); border-top-left-radius: 12px; border-top-right-radius: 12px;
    box-shadow: 0 -2px 18px rgba(16, 32, 64, 0.07);
    padding: 14px 16px 20px; margin-bottom: -8px;
  }
  .toon-beeld .kop {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 700; color: var(--text-muted); margin-bottom: 10px;
  }
  .toon-beeld .groot {
    font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .toon-regel {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--border);
    font-size: 12.5px; color: var(--navy);
  }
  .toon-regel:last-child { border-bottom: none; }
  .toon-regel strong { font-variant-numeric: tabular-nums; font-weight: 700; }
  .toon-regel.uitkomst { border-top: 2px solid var(--navy); border-bottom: none; padding-top: 9px; }

  /* Een dienst uit het rooster, met de loonkosten ernaast. */
  .toon-dienst {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-left: 3px solid var(--mc, var(--accent)); background: var(--mc-soft, var(--accent-soft));
    border-radius: 0 8px 8px 0; padding: 9px 12px; margin-bottom: 8px;
  }
  .toon-dienst:last-child { margin-bottom: 0; }
  .toon-dienst .wie { font-size: 12.5px; font-weight: 700; color: var(--navy); }
  .toon-dienst .wanneer { font-size: 11px; color: var(--text-muted); }
  .toon-dienst .kosten { font-size: 12.5px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

  .toon-vink { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--navy); padding: 6px 0; }
  .toon-vink .bol {
    width: 16px; height: 16px; border-radius: 50%; flex: none;
    background: var(--green); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .toon-vink .bol.open { background: var(--border); color: var(--text-muted); }

  /* Eén zin op een eigen band, direct onder de hero. Geen kader, geen
     icoon, geen aanhalingstekens: de zin moet het alleen doen. */
  .uitspraak { background: var(--navy-soft); padding: 46px 24px; text-align: center; }
  .uitspraak p {
    margin: 0; color: #fff; font-size: 27px; line-height: 1.35;
    letter-spacing: -0.015em; font-weight: 700; text-wrap: balance;
  }
  .uitspraak em { font-style: normal; color: #A9B6D0; }
  .uitspraak strong { color: #fff; box-shadow: inset 0 -0.42em 0 rgba(14, 159, 110, 0.55); }
  @media (max-width: 620px) {
    .uitspraak { padding: 34px 24px; }
    .uitspraak p { font-size: 21px; }
  }

  /* ================================================================
     MARGE PER OPDRACHTGEVER
     ================================================================
     Tekst links, de doorgerekende klant rechts. De kaart is bewust
     zwaarder aangezet dan de blokken erboven: dit is het bewijsstuk van
     de hele pagina, niet een van de drie voorbeelden. */
  .marge-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px; align-items: start;
  }
  @media (max-width: 900px) { .marge-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

  .marge-tekst h3 { font-size: 19px; margin: 0 0 12px; color: var(--navy); }
  .marge-tekst > p { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); margin: 0 0 16px; }
  .marge-lijst { margin: 0 0 16px; padding: 0; list-style: none; }
  .marge-lijst li {
    font-size: 14px; line-height: 1.65; color: var(--text-muted);
    padding: 0 0 0 20px; margin-bottom: 12px; position: relative;
  }
  .marge-lijst li::before {
    content: "—"; position: absolute; left: 0; top: 0; color: var(--m2);
  }
  .marge-lijst li strong { color: var(--navy); }
  .marge-slot { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); margin: 0; }
  .marge-slot .more { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--m2-dark); text-decoration: none; }
  .marge-slot .more:hover { text-decoration: underline; }

  .marge-kaart {
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 22px 24px 24px; box-shadow: 0 10px 30px rgba(16, 32, 64, 0.08);
  }
  .marge-kop {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
    padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  }
  .marge-klant { font-size: 16.5px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
  .marge-periode { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
  .marge-vlag {
    font-size: 15px; font-weight: 800; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .marge-vlag.rood { background: var(--red-soft); color: var(--red); }
  .marge-vlag.groen { background: var(--green-soft); color: var(--green); }

  /* Kopjes binnen de kaart: eerst wat eruit komt, dan wat erin gaat. */
  .marge-sectie {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    font-weight: 700; color: var(--text-muted); margin: 16px 0 4px;
  }

  /* Declarabiliteit als eigen regel, tussen de rekensom en het advies:
     het is geen kostenpost maar wel de verklaring eronder. */
  .marge-decl {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg);
  }
  .marge-decl-label { font-size: 13px; font-weight: 700; color: var(--navy); }
  .marge-decl-uitleg { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .marge-decl-waarde {
    font-size: 19px; font-weight: 800; color: var(--navy);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }

  .marge-advies {
    margin-top: 18px; padding: 16px 18px; border-radius: 12px;
    background: var(--m2-soft); border-left: 4px solid var(--m2);
  }
  .marge-advies-kop {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    font-weight: 700; color: var(--m2-dark); margin-bottom: 6px;
  }
  .marge-advies p { font-size: 14px; line-height: 1.6; color: var(--navy); margin: 0; }
  .marge-advies-voet { font-size: 12.5px !important; color: var(--text-muted) !important; margin-top: 8px !important; }

  /* ================================================================
     SECTOREN, GEGROEPEERD PER VERDIENMODEL
     ================================================================
     Bewust niet één platte lijst branches. De hele site zegt dat je
     verdienmodel bepaalt wat je nodig hebt, niet je branche — een los
     branchesraster zou dat verhaal onderuithalen. Zo ziet een
     schoonmaakbedrijf meteen in welk gezelschap het staat, en waarom. */
  /* Vier uitgelichte branches op de homepage, één per verdienmodel. De
     rest staat op /sectoren — twintig kaartjes op je voorpagina maken
     van een keuze een zoekopdracht. De hele kaart is de link, niet
     alleen het pijltje: een klein klikdoel is op een telefoon lastig. */
  /* minmax(0, 1fr) en niet 1fr: een vak in een grid is standaard minstens
     zo breed als zijn inhoud, en een foto van 700 pixels duwt de kolom dan
     breder dan het scherm. Met minmax(0, ...) mag het vak wél krimpen en
     schaalt de foto mee. Zelfde reden voor min-width: 0 op de kaart. */
  .uitgelicht-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  @media (max-width: 980px) { .uitgelicht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .uitgelicht-grid { grid-template-columns: minmax(0, 1fr); } }
  .uitgelicht {
    min-width: 0;
    display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
    background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--mc);
    border-radius: 14px; padding: 0 20px 18px;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  /* De foto loopt tot aan de rand van de kaart, dus de zijpadding staat op
     de losse onderdelen in plaats van op de kaart zelf. aspect-ratio houdt
     alle vier de kaarten even hoog, wat er ook op de foto staat. */
  .uitgelicht .foto {
    display: block; min-width: 0; margin: 0 -20px 16px; aspect-ratio: 16 / 10;
    background: var(--mc-soft); overflow: hidden;
  }
  .uitgelicht .foto img {
    width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block;
  }
  .uitgelicht:hover, .uitgelicht:focus-visible {
    transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16, 32, 64, 0.09);
  }
  .uitgelicht .model {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    font-weight: 700; color: var(--mc-dark); margin-bottom: 8px;
  }
  .uitgelicht .branche { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 8px; }
  .uitgelicht .wat { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin-bottom: 16px; }
  .uitgelicht .meer { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--mc-dark); }

  .sector-knop, .prijs-knop { text-align: center; margin-top: 28px; }
  .sector-knop p, .prijs-knop p { font-size: 12.5px; color: var(--text-muted); margin: 12px 0 0; }

  /* .btn in styles.css zet alleen kleur en gewicht; de vorm (padding,
     ronding, geen onderstreping) komt uit een regel per plek — zie
     .hero-ctas .btn en .pricing-card .btn. Zonder zo'n regel blijft een
     knop een onderstreepte link met een gekleurd vlak eromheen, en dat
     ziet eruit alsof de tekst geselecteerd is. Vandaar deze. */
  .sector-knop .btn, .sector-knop .btn-secondary,
  .prijs-knop .btn, .prijs-knop .btn-secondary {
    text-decoration: none; display: inline-block;
    padding: 13px 26px; border-radius: 10px; font-size: 14.5px; line-height: 1.2;
  }
  .sector-knop .btn-secondary, .prijs-knop .btn-secondary { border: 1px solid var(--border); }
  @media (prefers-reduced-motion: reduce) {
    .uitgelicht { transition: none; }
    .uitgelicht:hover, .uitgelicht:focus-visible { transform: none; }
  }

  /* Zes sectoren in één rij op de homepage; de volledige indeling per
     verdienmodel staat op /sectoren. */
  .sector-rij.zes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 880px) { .sector-rij.zes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 480px) { .sector-rij.zes { grid-template-columns: minmax(0, 1fr); } }
  .sector-rij.zes a { --mc: var(--m2); }

  /* De drie andere verdienmodellen: aanwezig, maar niet in de etalage. */
  .andere-modellen {
    margin-top: 28px; padding: 22px 24px; text-align: center;
    background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  }
  .andere-modellen h3 { font-size: 16px; margin: 0 0 8px; color: var(--navy); }
  .andere-modellen p {
    font-size: 13.5px; line-height: 1.65; color: var(--text-muted);
    margin: 0 auto 16px; max-width: 70ch;
  }
  .andere-modellen strong { color: var(--text); }
  .andere-modellen .btn-secondary {
    display: inline-block; text-decoration: none; border: 1px solid var(--border);
    padding: 11px 22px; border-radius: 10px; font-size: 14px; line-height: 1.2;
  }

  .sector-blok { margin-bottom: 34px; }
  .sector-blok:last-child { margin-bottom: 0; }
  .sector-kop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .sector-kop h3 {
    font-size: 16px; margin: 0; color: var(--navy);
    padding-left: 12px; border-left: 4px solid var(--mc, var(--accent));
  }
  .sector-kop .hoe { font-size: 13px; color: var(--text-muted); }
  .sector-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  @media (max-width: 880px) { .sector-rij { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .sector-rij { grid-template-columns: 1fr; } }
  .sector-rij a {
    display: block; background: #fff; border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px; text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .sector-rij a:hover, .sector-rij a:focus-visible {
    border-color: var(--mc, var(--accent)); transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 32, 64, 0.07);
  }
  .sector-rij .naam { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
  .sector-rij .wat { display: block; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
  @media (prefers-reduced-motion: reduce) {
    .sector-rij a { transition: none; }
    .sector-rij a:hover, .sector-rij a:focus-visible { transform: none; }
  }

  .mini-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
  .mini-card .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
  .mini-card .value { font-size: 20px; font-weight: 700; color: var(--navy); }
  .mini-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
  .mini-row:last-child { border-bottom: none; }

  .section-heading { text-align: center; margin-bottom: 46px; }
  .section-heading .eyebrow { color: var(--accent-dark); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
  .section-heading h2 { font-size: 28px; margin: 0 0 10px; letter-spacing: -0.01em; }
  .section-heading p { color: var(--text-muted); font-size: 14.5px; max-width: 560px; margin: 0 auto; }

  .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
  .feature-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 24px;
    box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .feature-card .icon {
    width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px;
  }
  .feature-card:nth-child(3n+2) .icon { background: var(--green-soft); }
  .feature-card:nth-child(3n) .icon { background: var(--orange-soft); }
  .feature-card h3 { font-size: 15px; margin: 0 0 8px; }
  .feature-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; }

  #voor-wie { background: var(--card-bg); }

  .story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .story-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 900px) { .story-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* .gelijk: kaarten in deze rij worden even hoog en hun "Lees hoe dat
     werkt →" zakt naar de onderkant, zodat die drie links op één lijn
     staan ook als de teksten niet even lang zijn. */
  .story-grid.gelijk .story-card { display: flex; flex-direction: column; min-width: 0; }
  .story-grid.gelijk .story-card p { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 12px; }
  .story-grid.gelijk .story-card p strong { color: var(--text); }
  .story-grid.gelijk .story-card .more { margin-top: auto; padding-top: 6px; }
  .uit-handen-voet {
    font-size: 12.5px; line-height: 1.7; color: var(--text-muted);
    text-align: center; max-width: 640px; margin: 22px auto 0;
  }
  @media (max-width: 800px) { .story-grid { grid-template-columns: 1fr; } }
  .story-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 26px;
    box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .story-card .icon-circle {
    width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 16px;
  }
  .story-card:nth-child(3n+2) .icon-circle { background: var(--green-soft); }
  .story-card:nth-child(3n) .icon-circle { background: var(--orange-soft); }
  .story-card h3 { font-size: 16px; margin: 0 0 12px; }
  .story-card .pain {
    background: var(--bg); border-left: 3px solid var(--border); border-radius: 8px;
    padding: 12px 14px; font-size: 13px; font-style: italic; color: var(--text-muted);
    line-height: 1.55; margin: 0 0 14px;
  }
  .story-card .solution { font-size: 13.5px; line-height: 1.6; margin: 0; }
  .story-card .solution .tag { font-weight: 700; color: var(--accent-dark); }
  /* Doorverwijzing naar de landingspagina van die branche — daar staat het
     verhaal uitgebreider, met de veelgestelde vragen van die sector. */
  .story-card .more {
    display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600;
    color: var(--accent-dark); text-decoration: none;
  }
  .story-card .more:hover { text-decoration: underline; }
  /* Koppelt een branche aan het verdienmodel waar hij onder valt — zo weet
     de lezer meteen welke prijskaart bij hem hoort. */
  .story-card .story-model {
    display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.02em; color: var(--accent-dark); background: var(--accent-soft);
    border: 1px solid #D6E4FF; border-radius: 999px; padding: 5px 11px; text-decoration: none;
  }
  .story-card .story-model:hover { background: #D6E4FF; }

  #over-ons { background: var(--bg); }
  .about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
  @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
  .about-text p { font-size: 14.5px; line-height: 1.72; color: var(--navy); margin: 0 0 16px; }
  .about-text p.lede { font-size: 16px; font-weight: 600; }
  .about-closer {
    font-size: 14.5px; font-weight: 700; color: var(--navy); border-left: 3px solid var(--accent);
    padding-left: 14px; margin: 24px 0 0;
  }
  .founder-badge { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
  .founder-avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: white;
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
  }
  .founder-badge .who { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
  .founder-badge .who strong { color: var(--navy); font-size: 13.5px; display: block; }

  .compare-wrap {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .compare-heading { padding: 18px 22px 4px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
  .compare-block { padding: 16px 22px 20px; }
  .compare-block.negative { background: var(--red-soft); }
  .compare-block.positive { background: var(--green-soft); }
  .compare-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
  .compare-block.negative .compare-label { color: #B42318; }
  .compare-block.positive .compare-label { color: var(--green); }
  .compare-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; }
  .compare-row span:first-child { color: var(--text-muted); }
  .compare-row span:last-child { font-weight: 600; text-align: right; }
  .compare-block.negative .compare-row span:last-child { color: #B42318; }
  .compare-block.positive .compare-row span:last-child { color: var(--green); }

  .pricing-card {
    max-width: 420px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px;
    padding: 36px; text-align: center; box-shadow: var(--shadow-md);
  }
  .pricing-card .amount { font-size: 46px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
  .pricing-card .amount span { font-size: 15px; font-weight: 500; color: var(--text-muted); }
  .pricing-card .per-user { font-size: 14px; color: var(--text-muted); margin: 6px 0 26px; }
  .pricing-list { text-align: left; margin: 0 0 28px; padding: 0; list-style: none; }
  .pricing-list li { display: flex; gap: 10px; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .pricing-list li:last-child { border-bottom: none; }
  .pricing-list li .check { color: var(--green); font-weight: 700; }
  .pricing-card .btn { text-decoration: none; display: block; padding: 13px; border-radius: 10px; font-size: 14px; }
  .pricing-card .plan-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--green); margin-bottom: 6px; }
  .pricing-card .plan-for { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 18px; min-height: 32px; }
  .pricing-card .plan-model {
    background: var(--accent-soft); border: 1px solid #D6E4FF; border-radius: 10px;
    padding: 11px 13px; font-size: 12.5px; line-height: 1.5; color: var(--navy);
    text-align: left; margin: 0 0 12px;
  }
  .pricing-card .plan-model strong { color: var(--accent-dark); }
  .pricing-card .plan-also { font-size: 12px; color: var(--text-muted); text-align: left; line-height: 1.5; margin: 0 0 20px; }
  .pricing-card .plan-also b { color: var(--navy); font-weight: 700; }
  .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; align-items: start; }
  .pricing-grid .pricing-card { max-width: none; margin: 0; padding: 30px 26px; }
  .pricing-grid .pricing-card .amount { font-size: 40px; }
  @media (max-width: 820px) { .pricing-grid { grid-template-columns: 1fr; } }

  /* ---- MODELKLEUR OP DE PRIJSKAARTEN ----
     Staat bewust HIER, ná de gewone .pricing-card-regels hierboven.
     Zelfde specificiteit betekent: wie het laatst komt, wint. Zet je dit
     bovenaan het style-blok, dan overschrijven de regels hierboven het
     weer en blijven alle vier de kaarten groen.
     Volgorde van de kaarten: kassa, uren, agenda, dossier. */
  .pricing-grid > .pricing-card:nth-child(1) { --mc: var(--m1); --mc-soft: var(--m1-soft); --mc-dark: var(--m1-dark); }
  .pricing-grid > .pricing-card:nth-child(2) { --mc: var(--m2); --mc-soft: var(--m2-soft); --mc-dark: var(--m2-dark); }
  .pricing-grid > .pricing-card:nth-child(3) { --mc: var(--m3); --mc-soft: var(--m3-soft); --mc-dark: var(--m3-dark); }
  .pricing-grid > .pricing-card:nth-child(4) { --mc: var(--m4); --mc-soft: var(--m4-soft); --mc-dark: var(--m4-dark); }
  .pricing-grid > .pricing-card { border-top: 4px solid var(--mc); }
  .pricing-grid > .pricing-card .plan-name { color: var(--mc-dark); }
  .pricing-grid > .pricing-card .pricing-list li .check { color: var(--mc); }
  .pricing-grid > .pricing-card .plan-model {
    background: var(--mc-soft); border-color: var(--mc-soft);
  }
  .pricing-grid > .pricing-card .plan-model strong { color: var(--mc-dark); }

  /* Herkenningsvraag: één regel waaraan een ondernemer meteen ziet of dit
     zijn model is. Staat bewust bóven de brancheopsomming — mensen zoeken
     eerst zichzelf, dan pas hun branche. */
  .pricing-card .plan-check {
    border-left: 3px solid var(--green); background: var(--green-soft);
    border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 0 0 14px;
    font-size: 12.5px; line-height: 1.5; color: var(--navy); text-align: left;
  }
  /* Uitklapbare brancheopsomming. Ingeklapt blijven de kaarten even hoog en
     rustig; wie twijfelt of zijn branche erbij hoort, klapt 'm open. */
  .plan-branches { text-align: left; margin: 0 0 20px; }
  .plan-branches > summary {
    cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600;
    color: var(--accent-dark); padding: 8px 0; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .plan-branches > summary::-webkit-details-marker { display: none; }
  .plan-branches > summary::after { content: "+"; font-size: 15px; font-weight: 700; }
  .plan-branches[open] > summary::after { content: "−"; }
  .plan-branches > summary:hover { text-decoration: underline; }
  .plan-branches .branch-group { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: 8px 0 0; }
  .plan-branches .branch-group b { display: block; color: var(--navy); font-weight: 700; margin-bottom: 1px; }

  /* Keuzehulp onder de prijskaarten: drie vragen, drie antwoorden. */
  .plan-picker {
    max-width: 980px; margin: 32px auto 0; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 18px; padding: 30px 32px;
    box-shadow: var(--shadow-md);
  }
  .plan-picker h3 { font-size: 17px; margin: 0 0 6px; color: var(--navy); }
  .plan-picker > p { font-size: 13.5px; color: var(--text-muted); margin: 0 0 20px; }
  .picker-rows { display: grid; gap: 10px; }
  .picker-row {
    display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  }
  .picker-row .num {
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent-dark); font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
  }
  .picker-row .q { font-size: 13.5px; line-height: 1.5; color: var(--navy); }
  .picker-row .a { font-size: 13px; font-weight: 700; color: var(--green); white-space: nowrap; }
  @media (max-width: 700px) {
    .picker-row { grid-template-columns: 28px 1fr; }
    .picker-row .a { grid-column: 2; white-space: normal; }
  }
  .plan-picker .picker-foot { font-size: 12.5px; color: var(--text-muted); margin: 18px 0 0; line-height: 1.6; }

  /* De bedragen direct onder de kop "Vanaf EUR 45 per maand". Een flexrij
     in plaats van een zin: de drie stukken blijven zo heel en breken als
     geheel naar de volgende regel. Het scheidingsteken staat in CSS en
     verdwijnt vanzelf aan het begin van een regel. */
  /* Gewone gecentreerde regel, geen flexrij: die gaf te grote gaten en
     zette de punt aan het begin van de volgende regel. Elk stuk staat in
     een eigen <span> met white-space:nowrap, zodat het als geheel naar
     de volgende regel gaat; de punt hoort bij het stuk ervóór, zodat een
     regel er nooit mee begint. */
  .section-heading .prijs-vanaf {
    font-size: 15.5px; color: var(--text-muted);
    /* LET OP de 'auto': .section-heading p hierboven centreert het blok met
       margin: 0 auto. Zet je hier margin: 2px 0 18px, dan overschrijf je die
       auto's en plakt de regel tegen de linkerkant — precies wat er misging. */
    max-width: 640px; margin: 2px auto 18px; line-height: 1.9;
  }
  .section-heading .prijs-vanaf span { white-space: nowrap; }
  /* --border is te licht om als scheidingsteken te lezen; dit is de
     stiltekleur van de tekst zelf, wat lichter gezet. */
  .section-heading .prijs-vanaf .punt { color: var(--text-muted); opacity: 0.45; padding: 0 5px; }
  .section-heading .prijs-vanaf strong { color: var(--navy); font-weight: 700; }

  /* Onboardingblok boven de prijskaarten. Staat er bewust vóór de
     bedragen: wie hier prijzen vergelijkt, vraagt zich meteen af welk
     model hij nodig heeft en of dit bij zijn manier van werken past.
     Dat antwoord ("daar kijken we samen naar") hoort dus vóór het
     prijskaartje, niet in de kleine lettertjes eronder. */
  .onboarding-note {
    max-width: 860px; margin: 26px auto 0; text-align: left;
    background: var(--accent-soft); border: 1px solid var(--border);
    border-left: 4px solid var(--accent-dark); border-radius: 14px;
    padding: 20px 24px;
  }
  .onboarding-note h3 { font-size: 15.5px; margin: 0 0 8px; color: var(--navy); }
  .onboarding-note p { font-size: 13.5px; line-height: 1.65; color: var(--text); margin: 0; }
  .onboarding-note p + p { margin-top: 10px; }

  .cta-band { background: var(--navy-soft); text-align: center; }
  .cta-band h2 { font-size: 28px; margin: 0 0 12px; color: white; letter-spacing: -0.01em; }
  .cta-band p { color: #C7CEE0; margin: 0 0 28px; font-size: 14.5px; }
  .cta-band-buttons { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
  .btn-secondary-dark {
    text-decoration: none; display: inline-block; padding: 13px 24px; border-radius: 10px; font-size: 14.5px;
    font-weight: 600; color: white; border: 1px solid rgba(255,255,255,0.3); transition: background-color 0.15s ease;
  }
  .btn-secondary-dark:hover { background: rgba(255,255,255,0.08); }

  /* Statbalk: feitelijke, niet-verzonnen bewijs meteen onder de hero */
  .stat-bar { background: var(--navy); padding: 40px 24px; }
  .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; max-width: 1100px; margin: 0 auto; }
  @media (max-width: 700px) { .stat-grid { grid-template-columns: 1fr; gap: 26px; } }
  .stat-value { font-size: 27px; font-weight: 700; color: white; letter-spacing: -0.01em; margin-bottom: 6px; }
  .stat-label { font-size: 12.5px; color: #B7C0D4; line-height: 1.5; max-width: 240px; margin: 0 auto; }

  /* Zo werkt het: 3-staps proces met verbindingslijn */
  /* Het verschil tussen een ratio en een bedrag — twee kolommen naast
     elkaar, zodat de lezer het zelf ziet in plaats van dat wij het beweren. */
  .verschil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 760px) { .verschil-grid { grid-template-columns: 1fr; } }
  .verschil-kaart {
    border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px;
    background: var(--card-bg); box-shadow: var(--shadow-sm);
  }
  .verschil-kaart.mijn { border-color: var(--navy); border-width: 2px; }
  .verschil-label {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 12px;
  }
  .verschil-kaart.mijn .verschil-label { color: var(--navy); }
  .verschil-quote { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 16px; }
  .verschil-kaart.mijn .verschil-quote { color: var(--green); }
  .verschil-lijst { list-style: none; margin: 0; padding: 0; }
  .verschil-lijst li {
    font-size: 14.5px; line-height: 1.55; padding: 8px 0 8px 22px; position: relative;
    border-top: 1px solid var(--border);
  }
  .verschil-lijst li::before { content: "—"; position: absolute; left: 0; color: var(--text-muted); }
  .verschil-kaart.mijn .verschil-lijst li::before { content: "✓"; color: var(--green); font-weight: 700; }
  .verschil-slot { margin-top: 22px; font-size: 15.5px; line-height: 1.65; }

  .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
  @media (max-width: 800px) { .step-grid { grid-template-columns: 1fr; gap: 18px; } }
  .step-grid::before {
    content: ""; position: absolute; top: 41px; left: 16.6%; right: 16.6%; height: 2px;
    background: repeating-linear-gradient(to right, var(--border) 0 8px, transparent 8px 14px); z-index: 0;
  }
  @media (max-width: 800px) { .step-grid::before { display: none; } }
  .step-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px;
    text-align: left; box-shadow: var(--shadow-sm); position: relative; z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .step-number {
    width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: white;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin-bottom: 16px;
  }
  .step-card h3 { font-size: 15.5px; margin: 0 0 8px; }
  .step-card p { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0; }

  /* FAQ — knop + geanimeerd paneel (soepeler dan het native details-"knapje") */
  .faq-list { display: flex; flex-direction: column; gap: 12px; }
  .faq-item {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 0 20px;
    box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .faq-item.open { border-color: #D6E4FF; box-shadow: var(--shadow-md); }
  .faq-question {
    all: unset; cursor: pointer; box-sizing: border-box; width: 100%; padding: 16px 0; font-size: 14px;
    font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  .faq-question .faq-icon {
    font-size: 18px; color: var(--text-muted); font-weight: 400; flex-shrink: 0; transition: transform 0.25s ease;
  }
  .faq-item.open .faq-question .faq-icon { transform: rotate(45deg); color: var(--accent-dark); }
  .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
  .faq-item.open .faq-answer { grid-template-rows: 1fr; }
  .faq-answer-inner { overflow: hidden; }
  .faq-answer p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; }

  /* Scroll-in animatie */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.in-view { opacity: 1; transform: none; }
  .reveal:nth-child(1) { transition-delay: 0ms; }
  .reveal:nth-child(2) { transition-delay: 70ms; }
  .reveal:nth-child(3) { transition-delay: 140ms; }
  .reveal:nth-child(4) { transition-delay: 210ms; }
  .reveal:nth-child(5) { transition-delay: 280ms; }
  .reveal:nth-child(6) { transition-delay: 350ms; }
  .reveal:nth-child(7) { transition-delay: 420ms; }
  .reveal:nth-child(8) { transition-delay: 490ms; }

  .site-footer { background: var(--navy); color: #B7C0D4; padding: 40px 24px; }
  .site-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-size: 12.5px; }
  .site-footer a { text-decoration: none; color: #B7C0D4; }
  .site-footer a:hover { color: white; }
  .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

  /* Fotoband: écht beeldmateriaal direct onder de hero, voor een minder "gemaakt" en
     betrouwbaarder gevoel — vergelijkbaar met hoe grote financiële merken echte mensen tonen. */
  .photo-band { padding-top: 0; padding-bottom: 56px; }
  .photo-band-media { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); }
  .photo-band-media img { width: 100%; height: 420px; object-fit: cover; display: block; background: var(--bg); }
  .photo-band-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 32px;
    background: linear-gradient(0deg, rgba(15,21,36,0.86) 0%, rgba(15,21,36,0.35) 55%, rgba(15,21,36,0) 100%);
    color: white;
  }
  .photo-band-caption strong { display: block; font-size: 19px; margin-bottom: 6px; letter-spacing: -0.01em; }
  .photo-band-caption span { font-size: 13.5px; color: #E4E8F2; max-width: 540px; display: block; line-height: 1.5; }
  @media (max-width: 700px) { .photo-band-media img { height: 280px; } .photo-band-caption { padding: 20px; } }

  /* Vertrouwenbalk: korte, feitelijke geruststellingen (beveiliging, Nederlands, persoonlijk)
     vlak na de hero — dezelfde functie als de trust-badges op bank-achtige websites. */
  .trust-strip { background: var(--card-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 24px; }
  .trust-strip-inner {
    max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center;
    gap: 28px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--navy);
  }
  .trust-strip-inner span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
  @media (max-width: 800px) { .trust-strip-inner { justify-content: flex-start; } }

  /* Sectorfoto's bovenaan elke "voor wie"-kaart, i.p.v. alleen een emoji-icoon. */
  .story-photo { margin: -26px -26px 18px; height: 150px; overflow: hidden; border-radius: 16px 16px 0 0; }
  .story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .story-card .icon-circle { margin-top: 2px; }

  /* Foto bij "Over ons" — de ondernemers achter GainOwner, i.p.v. alleen tekst. */
  .about-photo { border-radius: 16px; overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
  .about-photo img { width: 100%; height: 220px; object-fit: cover; display: block; }