/* plotta-site.css — de vormgeving van de PUBLIEKE site.
 *
 * Geknipt uit het <style>-blok van index.html op 2026-08-25. Alles wat NIET met
 * #app-layer begint staat hier; de app-specifieke regels bleven in index.html.
 * Die knip kon mechanisch omdat een #app-layer-selector een id bevat en dus altijd
 * wint van een klasse-selector: de cascade kan door het splitsen niet omdraaien.
 * Gemeten voor de knip: geen enkel @media-blok bevatte beide soorten, en er was
 * maar één site-regel met een id (#screen-vwo, een publieke pagina).
 *
 * WAAROM DIT EEN APART BESTAND IS: de losse marketingpagina's die hierna komen
 * (/prijzen, /hoe-het-werkt, ...) laden dit bestand en hoeven de stijlen dus niet
 * te kopiëren. index.html laadt het óók, gevolgd door zijn eigen app-CSS. Eén
 * kopie, twee gebruikers.
 *
 * De @keyframes staan hier omdat animaties door beide kanten gebruikt worden.
 */

/* ===== MARKETINGSITE: hetzelfde palet als de app =====
     Eén merk, één ontwerp. Wie op de site het licht ziet en in de app het
     donker, denkt dat hij bij een ander bedrijf is beland. */
  :root {
    /* ===== Merk-palet 2.0 (vormgeving-brief) =====
       Off-white canvas, sage, green-900 inkt, accent #9ACB7A ALLEEN op
       acties/nadruk. De bestaande token-NAMEN blijven bestaan zodat de hele app
       het nieuwe palet in één keer erft; hun WAARDEN zijn hergeprogrammeerd.
       Vertaalregel (geen 1:1 ruil): oranje-als-tekst -> groen-700 (leesbaar, AA);
       oranje-als-nadruk/vlak -> accentgroen; primaire knop -> green-900. */

    /* canonieke brief-tokens, voor nieuwe componenten */
    --off-white:#FCFCFA; --sage-100:#E7EDDF; --sage-300:#C9D6C1;
    --green-700:#1D3B2A; --green-900:#0F1F17; --accent:#9ACB7A;
    --ink-60:#5A6B62; --ink-40:#8A968E;
    --radius:12px; --radius-lg:20px; --radius-btn:10px;
    --shadow-subtle:0 4px 16px rgba(15,31,23,.06);

    --wash:#E7EDDF;
    --paneel:#C9D6C1;
    --vel:#FCFCFA;
    --rail:#0F1F17;

    --abyss:#E7EDDF;
    --hull:#FFFFFF;
    --hull-2:#F4F5F0;
    --line:#E5E9E2;
    --line-soft:#F0F1EB;
    --fog:#5A6B62;   /* ink-60: leesbaar op de sage-achtergrond */
    --mist:#5A6B62;
    --foam:#0F1F17;
    --signal:#1D3B2A;   /* was oranje-tekst; nu groen-700 nadruk (99x als TEKST) */
    --signal-dim:#0F1F17;
    --beam:#9ACB7A;     /* accent: alleen vlakken/nadruk, nooit fijne tekst */
    --warn:#7A5A12;  --warn-bg:#F3E9D2;
    --danger:#9E3B28; --danger-bg:#F3DED8;   /* fout = terracotta, geen fel rood */
    --ok:#2F6B43;    --ok-bg:#E4EFE4;
    --ok-dim:#2F6B43;
    --ok-tekst:#2F6B43; --warn-tekst:#7A5A12; --danger-tekst:#9E3B28;
    --paper:#FFFFFF;
    --ink:#0F1F17;
    --ink-soft:#5A6B62;
    --card-line:#E5E9E2;
    --violet:#1D3B2A; --violet-dim:#0F1F17;   /* was oranje-tekst; nu groen-700 */
    --beam-tekst:#1D3B2A;   /* groen-700 als nadruk-tekst op licht: AA */
    --beam-knop:#0F1F17;    /* green-900 primaire knop, witte tekst */
    --f1:#9AA29D; --f2:#7FA0B8; --f3:#5F8A72; --f4:#D2A044; --f5:#2F6B43; --f6:#9ACB7A;

    --schaduw-zweef:
      0 2px 4px rgba(28,40,34,.04),
      0 12px 24px rgba(28,40,34,.07),
      0 46px 80px -28px rgba(28,40,34,.32);
    --card-shadow:0 8px 22px -8px rgba(28,40,34,0.15);
  }

  * { box-sizing:border-box; }

  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

  body {
    margin:0; background:var(--abyss); color:var(--foam);
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased;
  }

  .mono { font-family:'SF Mono',ui-monospace,'Cascadia Mono',Menlo,monospace; }

  a { color:inherit; text-decoration:none; }

  h1,h2,h3 { line-height:1.12; margin:0; font-family:'Newsreader',Georgia,serif; font-weight:600; letter-spacing:-0.015em; }


  /* ===== layout helpers ===== */
  .wrap { max-width:1140px; margin:0 auto; padding:0 28px; }

  .screen { display:none; }

  .screen.active { display:block; }

  .eyebrow { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--beam-tekst); margin:0 0 14px; font-weight:600; }


  /* ===== nav ===== */
  header.nav {
    position:sticky; top:0; z-index:50;
    background:rgba(252,252,250,0.86); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
  }

  .nav-inner { display:flex; align-items:center; gap:14px; height:64px; }

  .brand { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; letter-spacing:-0.01em; cursor:pointer; }

  .brand .logo { width:28px; height:28px; border-radius:8px; background:transparent; display:flex; align-items:center; justify-content:center; }

  .brand .logo svg { width:16px; height:16px; }

  .brand b { color:var(--signal); font-weight:700; }

  .nav-links { display:flex; gap:6px; margin-left:auto; align-items:center; }

  .nav-links a { font-size:14px; color:var(--mist); padding:8px 14px; border-radius:8px; transition:all .15s; cursor:pointer; }

  .nav-links a:hover { color:var(--foam); background:var(--hull); }

  .btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:9px 18px; border-radius:9px; border:1px solid transparent; cursor:pointer; transition:all .15s; font-family:inherit; }

  .btn-primary { background:var(--beam-knop); color:#fff; }

  /* De CTA in de navigatie is een LINK geworden (was een <button>), zodat je hem
     kunt kopiëren en in een nieuw tabblad kunt openen. Daarmee ging hij wel
     .nav-links a volgen, en die selector is specifieker dan .btn-primary: de
     knoptekst werd grijsgroen op donkergroen. Deze regel zet dat recht, en moet
     specifieker blijven dan .nav-links a. */
  .nav-links a.btn-primary,
  .nav-links a.btn-primary:hover { color:#fff; }

  .btn-primary:hover { background:#1D3B2A; transform:translateY(-1px); }

  .btn-ghost { background:var(--hull); color:var(--mist); border-color:var(--line); }

  .btn-ghost:hover { color:var(--foam); border-color:var(--violet); }

  .btn-lg { padding:13px 26px; font-size:15px; }

  .nav-toggle { display:none; }


  /* ===== hero ===== */
  .hero { position:relative; overflow:hidden; padding:88px 0 64px; background:var(--off-white); }

  .hero-glow { position:absolute; top:-160px; right:-80px; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle,rgba(154,203,122,0.20),transparent 62%); pointer-events:none; }

  .hero-glow.b { top:140px; right:auto; left:-200px; width:480px; height:480px; background:radial-gradient(circle,rgba(201,214,193,0.28),transparent 60%); }

  .hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; position:relative; }

  .hero h1 { font-size:52px; margin-bottom:22px; }

  .hero h1 .hl { color:var(--beam-tekst); font-style:italic; font-weight:600; }

  .hero .lede { font-size:19px; color:var(--mist); margin-bottom:32px; max-width:520px; }

  .hero-cta { display:flex; flex-direction:column; gap:13px; align-items:flex-start; }

  .hero-cta-sub { display:flex; gap:13px; flex-wrap:wrap; }

  .hero-note { font-size:13px; color:var(--fog); margin-top:18px; display:flex; align-items:center; gap:8px; }

  .hero-note .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }


  /* ===== hero visual: het merk-object (kompas). De schaduw komt uit
     snippets/plotta-object-shadow.css via .plotta-object — nooit uit de PNG. ===== */
  .hero-visual { display:flex; justify-content:center; align-items:center; }

  .hero-visual .plotta-object { display:block; width:100%; max-width:460px; margin:0 auto; }

  .hero-object { display:block; width:100%; height:auto; }

  @media (max-width:900px){ .hero-visual .plotta-object { max-width:360px; } }

  @media (max-width:560px){ .hero-visual .plotta-object { max-width:260px; } }


  /* ===== "Marketing is ingewikkeld. Je volgende actie niet." (mockup-sectie) ===== */
  .wwd { padding:66px 0 74px; background:var(--sage-100); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

  .wwd-head { text-align:center; max-width:720px; margin:0 auto 46px; }

  .wwd-head h2 { font-size:38px; line-height:1.14; }

  .wwd-row { display:grid; grid-template-columns:repeat(5,1fr); gap:26px; }

  .wwd-item { text-align:center; }

  .wwd-ic { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:var(--vel); border:1px solid var(--line); margin-bottom:15px; }

  .wwd-ic svg { width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

  .wwd-item h3 { font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-size:15px; font-weight:600; letter-spacing:0; margin:0 0 6px; color:var(--ink); }

  .wwd-item p { font-size:13.5px; color:var(--ink-soft); line-height:1.5; max-width:190px; margin:0 auto; }

  .wwd-note { text-align:center; margin:46px 0 0; font-size:14px; color:var(--fog); }

  @media (max-width:860px){ .wwd-row { grid-template-columns:repeat(2,1fr); gap:34px 24px; } .wwd-head h2 { font-size:30px; } }

  @media (max-width:480px){ .wwd-row { grid-template-columns:1fr; } }

  .hv-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }

  .hv-head .hh-lbl { font-size:11px; color:var(--fog); letter-spacing:0.1em; display:flex; align-items:center; gap:6px; }

  .hv-head .hh-lbl svg { width:13px; height:13px; color:var(--beam-tekst); }

  .hv-head .hh-live { font-size:11px; color:var(--ok-tekst); }

  .hv-cycle { position:relative; padding-left:34px; }

  .hv-loop { position:absolute; left:0; top:0; width:34px; height:100%; }

  .hv-steps { display:flex; flex-direction:column; gap:2px; }

  .hv-step { display:flex; gap:11px; align-items:flex-start; padding:6px 0; }

  .hv-conn { height:9px; border-left:1.4px solid var(--line); margin-left:13px; }

  .hv-ic { width:28px; height:28px; border-radius:8px; background:var(--hull-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--fog); }

  .hv-ic svg { width:15px; height:15px; }

  .hv-ic.beam { color:var(--beam-tekst); }

  .hv-ic.impact { background:var(--ok-bg); color:var(--ok-tekst); }

  .hv-lbl { font-size:9.5px; letter-spacing:0.09em; color:var(--fog); }

  .hv-lbl.beam { color:var(--beam-tekst); }

  .hv-lbl.green { color:var(--ok-tekst); }

  .hv-txt { font-size:13.5px; color:var(--foam); line-height:1.3; }

  .hv-txt.strong { font-size:14px; font-weight:500; }

  .hv-sub { font-size:10.5px; color:var(--fog); margin-top:2px; }


  .layers-5 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; }

  .layer-uniek { position:relative; }

  .layer-uniek::after { content:''; position:absolute; inset:-2px; border-radius:14px;
                        border:1.5px solid var(--beam); opacity:.35; pointer-events:none; }

  @media (max-width:1100px){ .layers-5 { grid-template-columns:repeat(2,1fr) !important; } }

  @media (max-width:640px){ .layers-5 { grid-template-columns:1fr !important; } }


  /* ===== BEWIJS ===== */
  .bewijs { background:var(--paneel); }

  .bewijs .wrap { position:relative; }

  /* Object NAAST de kop (rij): de linkerrand van het object valt op de
     linkerrand van de contentkolom = de linkerrand van het linker citaat-blok.
     Geen tekstoverlap. Schaduw komt uit de snippet (.plotta-object). */
  .bw-top { display:flex; align-items:center; gap:46px; margin:0 0 46px; }

  .bw-object { flex-shrink:0; display:block; width:clamp(200px,24vw,280px); margin:0; }

  .bw-object img { display:block; width:100%; height:auto; }

  .bw-kop { position:relative; z-index:2; text-align:left; flex:1; min-width:0; margin:0; }

  .eyebrow-pill { display:inline-block; background:rgba(255,255,255,.6); color:var(--green-700); font-size:12px; padding:7px 15px; border-radius:999px; margin:0 0 22px; }

  .bw-kop h2 { font-size:clamp(30px,4vw,44px); line-height:1.12; letter-spacing:-0.02em; font-weight:500; margin:0 0 18px; }

  .bw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:2; }

  .bw-kaart { background:var(--paper); border:1px solid rgba(15,31,23,.06); border-radius:16px;
    padding:28px 26px; box-shadow:var(--shadow-subtle); }

  .bw-quote { font-family:'Newsreader',serif; font-style:italic; font-weight:500; font-size:24px;
    letter-spacing:-0.01em; line-height:1.2; color:var(--ink); margin:0 0 14px; }

  .bw-kaart p { font-size:15px; color:var(--ink-soft); line-height:1.6; margin:0; }

  .bw-foot { text-align:center; max-width:660px; margin:46px auto 0; }

  .bw-foot-big { font-size:18px; line-height:1.6; color:var(--ink); margin:0 0 22px; }

  .bw-foot-big b { font-weight:600; }

  /* Duidelijke knop (green-900 vlak, off-white tekst), geen vage schaduw. */
  .bw-cta { display:inline-flex; align-items:center; gap:8px; background:var(--green-900); color:var(--off-white);
    font-weight:600; font-size:15px; padding:13px 24px; border-radius:10px; text-decoration:none; box-shadow:none; transition:background .15s; }

  .bw-cta:hover { background:var(--green-700); }

  .bw-cta::after { content:'\00a0→'; }

  @media (max-width:860px){ .bw-grid { grid-template-columns:1fr; } }

  @media (max-width:767px){ .bw-top { flex-direction:column; align-items:flex-start; gap:22px; } .bw-object { width:160px; } .bw-kop { max-width:100%; } }


  /* ===== sections ===== */
  section { padding:72px 0; }

  .section-head { text-align:center; max-width:680px; margin:0 auto 52px; }

  .section-head h2 { font-size:36px; margin-bottom:16px; }

  .section-head p { font-size:17px; color:var(--mist); }


  /* Merk-objecten (warmte-laag, brief §3A): stille sage/klei-renders, één per
     beeld, vrij op de achtergrond. Hoogte vast, breedte uit de intrinsieke
     verhouding (width/height-attributen) zodat er geen layout-shift is. */
  .mk-object { display:block; width:auto; height:126px; }

  .mk-object.staand { height:150px; }

  /* De wrapper centreert het object en geeft ruimte; de schaduw zit in de snippet. */
  .bw-kop .plotta-object, .section-head .plotta-object, .cta-block .plotta-object {
    display:block; width:max-content; max-width:76%; margin:0 auto 20px; }

  @media (max-width:560px){
    .mk-object { height:104px; } .mk-object.staand { height:124px; }
    .bw-kop .plotta-object, .section-head .plotta-object, .cta-block .plotta-object { margin-bottom:14px; } }


  /* problem strip */
  .prob { background:var(--hull); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }

  .prob-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

  .prob-card { padding:8px 4px; }

  .prob-card .ic { width:42px; height:42px; border-radius:11px; background:var(--danger-bg); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }

  .prob-card .ic svg { width:21px; height:21px; stroke:var(--danger); }

  .prob-card h3 { font-size:18px; margin-bottom:9px; }

  .prob-card p { font-size:14.5px; color:var(--fog); margin:0; }


  /* how it works - 3 layers */
  .layers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; }

  .layer { background:var(--hull); border:1px solid var(--line); border-radius:15px; padding:28px 24px; position:relative; transition:all .2s; }

  .layer:hover { border-color:var(--signal-dim); transform:translateY(-3px); }

  .layer .step { font-family:'SF Mono',monospace; font-size:12px; color:var(--beam-tekst); font-weight:700; margin-bottom:16px; }

  .layer .lic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

  .layer:nth-child(1) .lic { background:var(--inset,#F4F5F0); }

  .layer:nth-child(1) .lic svg { stroke:var(--signal); }

  .layer:nth-child(2) .lic { background:#E7EDDF; }

  .layer:nth-child(2) .lic svg { stroke:var(--beam); }

  .layer:nth-child(3) .lic { background:rgba(79,197,138,0.14); }

  .layer:nth-child(3) .lic svg { stroke:var(--ok); }

  .layer .lic svg { width:23px; height:23px; fill:none; stroke-width:1.8; }

  .layer h3 { font-size:20px; margin-bottom:11px; }

  .layer p { font-size:14.5px; color:var(--fog); margin:0; }

  .layer-arrow { position:absolute; top:50%; right:-22px; transform:translateY(-50%); z-index:2; color:var(--fog); }

  .layer-arrow svg { width:24px; height:24px; }


  /* features grid */
  .feat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

  .feat { display:flex; gap:16px; background:var(--hull); border:1px solid var(--line); border-radius:13px; padding:22px 22px; }

  .feat .fic { flex-shrink:0; width:40px; height:40px; border-radius:10px; background:var(--hull-2); display:flex; align-items:center; justify-content:center; }

  .feat .fic svg { width:20px; height:20px; stroke:var(--signal); fill:none; stroke-width:1.8; }

  .feat h3 { font-size:16px; margin-bottom:6px; }

  .feat p { font-size:14px; color:var(--fog); margin:0; }


  /* outcome / results band */
  .band { background:linear-gradient(135deg,var(--hull-2),var(--hull)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

  .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; }

  .stat .big { font-size:46px; font-weight:700; letter-spacing:-0.03em; color:var(--signal); margin-bottom:6px; }

  .stat .lbl { font-size:14px; color:var(--mist); }


  /* ══ BLOK 3 · HOE (4 stappen) ══ */
  .how-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

  .how-step { background:var(--vel); border:1px solid var(--line); border-radius:16px; padding:26px 22px; }

  .how-num { font-family:'SF Mono',ui-monospace,Menlo,monospace; font-size:13px; font-weight:700; letter-spacing:0.08em; color:var(--green-700); background:var(--sage-100); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

  .how-step h3 { font-family:'Newsreader',serif; font-weight:500; font-size:20px; line-height:1.2; letter-spacing:-0.01em; color:var(--ink); margin:0 0 9px; }

  .how-step p { font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin:0; }

  @media (max-width:860px){ .how-steps { grid-template-columns:repeat(2,1fr); } }

  @media (max-width:480px){
    .how-steps { grid-template-columns:1fr; gap:14px; }
    /* Eén kaart per stap onder elkaar, met het nummer NAAST de kop. Erboven
       kostte het een eigen regel plus 18px marge, vier keer achter elkaar,
       voor een cijfer dat alleen de volgorde aangeeft. */
    .how-step { display:grid; grid-template-columns:38px 1fr; column-gap:14px; padding:18px 16px; }
    .how-num { margin-bottom:0; grid-row:1; }
    .how-step h3 { grid-column:2; grid-row:1; align-self:center; margin:0; }
    .how-step p { grid-column:2; margin-top:8px; }
  }


  /* ══ BLOK · DE PLOTTA BRAIN (waar het advies vandaan komt) ══ */
  .brainsec{ background:var(--sage-100); padding:82px 24px; position:relative; overflow:hidden; }

  .brainsec .wrap{ position:relative; z-index:1; }

  .brainsec-head{ max-width:640px; margin:0 auto 34px; text-align:center; }

  .brainsec-eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal); font-weight:700; margin:0 0 12px; }

  .brainsec h2{ font-size:40px; line-height:1.08; margin:0 0 14px; }

  .brainsec-lead{ font-size:17px; line-height:1.6; color:var(--mist); margin:0 auto; max-width:56ch; }

  .brainsec-bronnen{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

  .brainsec-bron{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 16px 16px;
    position:relative; overflow:hidden; box-shadow:0 10px 26px -14px rgba(28,40,34,.2); }

  .brainsec-bron::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--kl); }

  .brainsec-rij{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }

  .brainsec-ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

  .brainsec-ic svg{ width:17px; height:17px; stroke:#fff; fill:none; stroke-width:1.9; }

  .brainsec-bron h3{ font-size:14.5px; font-weight:700; line-height:1.2; margin:0; }

  .brainsec-bron p{ font-size:12.5px; line-height:1.5; color:var(--mist); margin:0 0 12px; }

  .brainsec-tag{ display:inline-block; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--sage-100); color:var(--signal); }

  .brainsec-funnel{ width:100%; height:64px; display:block; }

  .brainsec-brain{ width:640px; max-width:100%; margin:0 auto; background:linear-gradient(180deg,#16321F,#0F1F17); color:#fff; border-radius:16px;
    padding:20px 26px; display:flex; align-items:center; gap:18px; box-shadow:0 18px 40px -18px rgba(15,31,23,.5); }

  .brainsec-brain-ic{ width:50px; height:50px; border-radius:13px; background:rgba(154,203,122,.18); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

  .brainsec-brain-ic svg{ width:27px; height:27px; stroke:var(--accent); fill:none; stroke-width:1.7; }

  .brainsec-brain h3{ font-size:21px; margin:0 0 3px; color:#fff; }

  .brainsec-brain p{ font-size:13px; line-height:1.5; color:#C9D6C1; margin:0; }

  .brainsec-pijl{ display:flex; justify-content:center; align-items:center; height:40px; color:var(--sage-300); }

  .brainsec-pijl svg{ width:25px; height:25px; }

  .brainsec-out{ width:640px; max-width:100%; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:14px;
    padding:17px 22px; display:flex; align-items:center; gap:16px; box-shadow:0 10px 26px -14px rgba(28,40,34,.2); }

  .brainsec-out-ic{ width:44px; height:44px; border-radius:11px; background:var(--sage-100); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

  .brainsec-out-ic svg{ width:24px; height:24px; stroke:var(--signal); fill:none; stroke-width:1.7; }

  .brainsec-out h3{ font-size:16px; font-weight:700; margin:0 0 3px; }

  .brainsec-out p{ font-size:13px; line-height:1.5; color:var(--mist); margin:0; }

  @media (max-width:820px){
    .brainsec-bronnen{ grid-template-columns:repeat(2,1fr); }
    .brainsec-funnel{ display:none; }
    .brainsec h2{ font-size:31px; }
    .brainsec-brain, .brainsec-out{ width:100%; }
    .brainsec-pijl{ height:26px; }
  }


  /* ══ BLOK 4 · PRODUCT IN BEELD (Deze week-kaart) ══ */
  .pv-product { background:var(--sage-100); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

  .pv-head { text-align:center; max-width:620px; margin:0 auto 40px; }

  .pv-head h2 { font-family:'Newsreader',serif; font-weight:500; font-size:clamp(28px,4vw,42px); letter-spacing:-0.02em; line-height:1.12; margin:0 0 14px; color:var(--ink); }

  .pv-head p { color:var(--ink-soft); font-size:18px; line-height:1.6; margin:0; }

  .pv-app { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 70px rgba(15,31,23,.16); overflow:hidden; display:grid; grid-template-columns:200px 1fr; max-width:900px; margin:0 auto; }

  .pv-side { background:#FBFBF8; border-right:1px solid var(--line); padding:20px 16px; display:flex; flex-direction:column; gap:4px; min-height:420px; }

  .pv-brand { display:flex; align-items:center; gap:9px; margin:4px 4px 22px; }

  .pv-brand span { font-family:'Newsreader',serif; font-weight:500; font-size:19px; color:var(--ink); }

  .pv-nav { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft); padding:9px 10px; border-radius:9px; }

  .pv-nav.active { background:#fff; color:var(--green-900); font-weight:600; border:1px solid var(--line); box-shadow:0 1px 3px rgba(15,31,23,0.06); }

  .pv-nav i { width:15px; height:15px; border:1.6px solid currentColor; border-radius:4px; opacity:.6; display:block; flex-shrink:0; }

  .pv-nav.active i { border-color:var(--green-700); opacity:1; }

  .pv-user { margin-top:auto; display:flex; align-items:center; gap:10px; padding:8px 6px; }

  .pv-av { width:30px; height:30px; border-radius:8px; background:var(--green-900); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; flex-shrink:0; }

  .pv-nm { font-size:13px; font-weight:600; color:var(--ink); }

  .pv-co { font-size:11px; color:var(--ink-40,#8A968E); }

  .pv-main { padding:30px 32px 34px; }

  .pv-greet { color:var(--ink-soft); font-size:14px; margin-bottom:4px; }

  .pv-lead { font-family:'Newsreader',serif; font-weight:500; font-size:30px; letter-spacing:-0.015em; line-height:1.1; margin:0 0 22px; color:var(--ink); }

  .pv-rec { background:#F5F6F1; border:1px solid var(--line); border-radius:14px; padding:22px; display:grid; grid-template-columns:1.3fr 1fr; gap:22px; box-shadow:0 4px 16px rgba(15,31,23,.05); }

  .pv-lbl { font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-40,#8A968E); margin-bottom:10px; }

  .pv-obs { font-family:'Newsreader',serif; font-size:20px; line-height:1.25; letter-spacing:-.01em; margin-bottom:14px; color:var(--ink); }

  .pv-impact { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-soft); }

  .pv-dots { display:inline-flex; gap:4px; }

  .pv-dots i { width:8px; height:8px; border-radius:50%; background:var(--sage-300); display:block; }

  .pv-dots.m i:nth-child(-n+2) { background:var(--green-700); }

  .pv-why p { font-size:14px; color:var(--ink-soft); margin:0 0 16px; line-height:1.55; }

  /* font-family erft NIET in een button: zonder inherit rendert deze knop in
     de systeemfont (gemeten: Arial) terwijl de rest van de mockup Inter is. */
  .pv-btn { display:inline-flex; align-items:center; gap:8px; background:var(--green-900); color:var(--off-white); font-family:inherit; font-weight:600; font-size:14px; padding:11px 18px; border-radius:10px; border:none; cursor:pointer; }

  .pv-btn::after { content:'\00a0→'; }

  .pv-recent { margin-top:18px; }

  .pv-rh { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40,#8A968E); margin-bottom:10px; }

  .pv-row { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); }

  .pv-ck { width:16px; height:16px; border-radius:5px; background:var(--ok-bg); color:var(--ok-tekst); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }

  .pv-row-imp { margin-left:auto; color:var(--ink-40,#8A968E); }

  .pv-cta { text-align:center; margin-top:34px; }

  @media (max-width:700px){
    .pv-app { grid-template-columns:1fr; }
    .pv-side { flex-direction:row; flex-wrap:wrap; align-items:center; min-height:0;
               border-right:none; border-bottom:1px solid var(--line); }
    .pv-user { margin:0 0 0 auto; }
    .pv-rec { grid-template-columns:1fr; }
    /* De namaak-rail wikkelde tot een rij van vijf items met een leeg vierkantje
       ervoor: dat leest als een formulier met aanvinkhokjes, niet als navigatie.
       Op mobiel houdt de mockup dus alleen zijn kopregel over -- merk links,
       gebruiker rechts -- precies zoals de echte app daar sinds deze herbouw
       ook doet. Eerlijker beeld, en het scherm gaat over de advieskaart. */
    .pv-side .pv-nav { display:none; }

    /* "Verwachte impact : Gemiddeld" -- de dubbele punt tussen twee spans is
       een eigen flex-item en kreeg aan weerszijden een gap van 8px, dus hij
       zweefde los zodra het label over twee regels ging. In gewone tekstflow
       plakt hij weer aan het woord ervoor; de stippen blijven inline. */
    .pv-impact { display:block; }
    .pv-impact .pv-dots { display:inline-flex; vertical-align:middle; margin-right:7px; }
  }


  /* ══ BLOK 6 · OPRICHTERSQUOTE ══ */
  .pv-founder { background:var(--green-900); color:var(--off-white); text-align:center; }

  .pv-q { font-family:'Newsreader',serif; font-weight:500; font-size:clamp(28px,4vw,42px); line-height:1.25; letter-spacing:-.015em; max-width:20ch; margin:0 auto 30px; }

  .pv-who { display:inline-flex; align-items:center; gap:12px; }

  .pv-fav { width:44px; height:44px; border-radius:50%; background:#22331f; display:flex; align-items:center; justify-content:center; font-family:'Newsreader',serif; font-size:18px; color:var(--accent); flex-shrink:0; }

  .pv-fn { text-align:left; }

  .pv-fn b { display:block; font-size:15px; font-weight:600; }

  .pv-fn span { font-size:13px; color:rgba(231,237,223,.65); }


  /* ══ BLOK 5 · VONDSTEN ══ */
  .res-finds { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

  .res-find { display:flex; gap:15px; align-items:flex-start; background:var(--vel); border:1px solid var(--line); border-radius:16px; padding:24px 22px; }

  .res-find-ic { flex-shrink:0; width:40px; height:40px; border-radius:11px; background:var(--sage-100); display:flex; align-items:center; justify-content:center; }

  .res-find-ic svg { width:20px; height:20px; stroke:var(--green-700); }

  .res-find p { font-family:'Newsreader',serif; font-weight:500; font-size:18px; line-height:1.35; color:var(--ink); margin:0; }

  @media (max-width:860px){ .res-finds { grid-template-columns:1fr; } }


  /* for whom */
  .whom-grid { display:flex; flex-wrap:wrap; gap:18px; }

  .whom-grid .whom { flex:1 1 300px; }

  .whom-np { margin:24px 0 0; text-align:center; font-size:14px; color:var(--mist); }

  .binnenkort { display:flex; align-items:center; justify-content:center; min-height:50vh; padding:24px; }

  .uitlog-btn { display:flex; align-items:center; gap:8px; width:100%; margin-top:8px; padding:9px 10px; background:transparent; border:1px solid var(--line); border-radius:9px; color:var(--fog); font-size:13px; font-family:inherit; cursor:pointer; transition:all .15s; }

  .uitlog-btn:hover { color:var(--foam); border-color:var(--fog); }

  .uitlog-btn svg { width:15px; height:15px; flex-shrink:0; }

  .fn-bar { display:flex; align-items:center; gap:12px; margin:16px 0 8px; }

  .fn-status { font-size:13px; color:var(--fog); }

  .fn-h { font-size:16px; margin:22px 0 10px; }

  .fn-fases { display:flex; flex-direction:column; gap:8px; }

  .fn-fase { display:grid; grid-template-columns:170px 1fr; gap:12px; align-items:start; background:var(--hull); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }

  .fn-fase-naam { font-size:13.5px; color:var(--foam); display:flex; align-items:center; gap:7px; }

  .fn-fase-naam .d { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

  .fn-evs { display:flex; flex-wrap:wrap; gap:6px; }

  .fn-ev { font-size:12px; padding:4px 9px; border-radius:20px; border:1px solid var(--line); color:var(--fog); cursor:pointer; background:transparent; }

  .fn-ev.aan { background:var(--beam); border-color:var(--beam); color:var(--ink); font-weight:600; }

  .fn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }

  .fn-veld { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--fog); }

  .fn-veld select, .fn-veld input { background:var(--hull); border:1px solid var(--line); border-radius:8px; padding:9px 10px; color:var(--foam); font-size:14px; font-family:inherit; }

  .fn-chips { display:flex; flex-wrap:wrap; gap:7px; }

  .fn-acties { display:flex; align-items:center; gap:12px; margin-top:22px; }

  .fn-melding { font-size:13px; color:var(--ok-tekst); }

  @keyframes vbgKlop {
    0%   { box-shadow:0 0 0 0 rgba(194,68,63,.5); }
    70%  { box-shadow:0 0 0 8px rgba(194,68,63,0); }
    100% { box-shadow:0 0 0 0 rgba(194,68,63,0); }
  }


  /* ===== VERBREKEN / VERWIJDEREN ===== */
  .bw-lead { max-width:680px; margin:0; font-size:18px; line-height:1.6; color:var(--ink-soft); }

  .dl-mbox { background:var(--vel,#FCFCFA); border-radius:16px; padding:28px; max-width:540px;
             width:100%; max-height:88vh; overflow:auto;
             box-shadow:0 46px 80px -28px rgba(28,40,34,.4); }

  .dl-mbox h3 { font-size:19px; margin:0 0 18px; color:var(--foam,#0F1F17); }

  .dl-rk-optie { border:1.5px solid var(--line,#E5E9E2); border-radius:12px; padding:16px 18px;
                 margin-bottom:12px; cursor:pointer; transition:all .13s; }

  .dl-rk-optie:hover { border-color:var(--beam,#9ACB7A); }

  .dl-rk-optie.aan { border-color:var(--beam,#9ACB7A); background:#FDF6F1; }

  .dl-rk-kop { font-size:14px; font-weight:600; margin-bottom:5px; color:var(--foam,#0F1F17); }

  .dl-rk-optie p { font-size:13px; color:var(--mist,#5A6B62); line-height:1.55; margin:0 0 12px; }

  .dl-rk-rij { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--foam,#0F1F17); }

  .dl-num { width:88px; min-width:0 !important; text-align:center; }

  .dl-rk-uit { margin-top:10px; }

  .dl-rk-som { font-family:'SF Mono',monospace; font-size:16px; font-weight:600; color:var(--warn,#7A5A12); }

  .dl-mvoet { display:flex; gap:10px; align-items:center; margin-top:18px; }

  .dl-annuleer { background:transparent; border:none; color:var(--fog,#6E7873);
                 font-family:inherit; font-size:13px; cursor:pointer; padding:8px; }

  .dl-annuleer:hover { color:var(--foam,#0F1F17); }

  @keyframes tcapLaad { from { transform:scaleX(0); } to { transform:scaleX(1); } }

  @keyframes tkrFlits { 0%,70%{ background:var(--sage-100); box-shadow:0 0 0 2px var(--sage-300); } 100%{ background:transparent; box-shadow:none; } }

  @keyframes tkgFlits { 0%,70%{ box-shadow:0 0 0 2px var(--sage-300); } 100%{ box-shadow:var(--card-shadow); } }

  .binnenkort .bk-box { max-width:520px; text-align:center; background:var(--hull); border:1px solid var(--line); border-radius:16px; padding:32px 28px; }

  .binnenkort .bk-box h2 { font-size:22px; margin-bottom:10px; }

  .binnenkort .bk-box p { color:var(--fog); font-size:14.5px; line-height:1.6; margin:0; }

  .whom { background:var(--hull); border:1px solid var(--line); border-radius:13px; padding:26px 24px; }

  .whom h3 { font-size:17px; margin-bottom:10px; display:flex; align-items:center; gap:9px; }

  .whom h3 .d { width:9px; height:9px; border-radius:50%; }

  .whom p { font-size:14px; color:var(--fog); margin:0; }

  .whom ul { margin:13px 0 0; padding:0 0 0 4px; list-style:none; }

  .whom li { font-size:13.5px; color:var(--mist); padding:5px 0 5px 22px; position:relative; }

  .whom li::before { content:'→'; position:absolute; left:0; color:var(--beam-tekst); }


  /* CTA block */
  .cta-block { text-align:center; background:linear-gradient(160deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:20px; padding:56px 40px; position:relative; overflow:hidden; }

  .cta-block .glow { position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:400px; height:300px; background:radial-gradient(circle,rgba(154,203,122,0.20),transparent 60%); pointer-events:none; }

  .cta-block h2 { font-size:34px; margin-bottom:16px; position:relative; }

  .cta-block p { font-size:17px; color:var(--mist); margin-bottom:30px; max-width:520px; margin-left:auto; margin-right:auto; position:relative; }


  /* ===== leadmagnet: het e-book achter e-mail ===== */
  .pdf-lead-sec { padding-top:8px; }

  .pdf-lead { position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--line);
    border-radius:20px; padding:40px; display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center;
    box-shadow:0 1px 2px rgba(15,31,23,0.04); }

  .pdf-lead::before { content:""; position:absolute; top:-120px; right:-60px; width:320px; height:260px;
    background:radial-gradient(circle, rgba(154,203,122,0.22), transparent 62%); pointer-events:none; }

  .pl-copy { position:relative; }

  .pl-copy h2 { font-size:30px; line-height:1.15; margin:10px 0 12px; }

  .pl-lead { font-size:16px; color:var(--ink-soft); line-height:1.6; margin:0; }

  .pl-form { position:relative; }

  .pl-row { display:flex; gap:10px; flex-wrap:wrap; }

  .pl-input { flex:1 1 220px; min-width:0; padding:14px 16px; font-size:15px; color:var(--ink);
    border:1px solid var(--line); border-radius:12px; background:var(--paper); font-family:inherit; }

  .pl-input::placeholder { color:var(--ink-soft); opacity:0.7; }

  .pl-input:focus { outline:none; border-color:var(--beam); box-shadow:0 0 0 3px rgba(154,203,122,0.28); }

  .pl-consent { display:flex; gap:10px; align-items:flex-start; margin-top:15px; font-size:13px;
    color:var(--ink-soft); line-height:1.5; cursor:pointer; }

  .pl-consent input { margin:2px 0 0; width:16px; height:16px; flex:0 0 auto; accent-color:var(--ok); cursor:pointer; }

  .pl-note { font-size:12px; color:var(--ink-soft); margin:9px 0 0; opacity:0.85; }

  .pl-status { font-size:13px; margin-top:9px; color:var(--ink-soft); }

  .pl-status.fout { color:#A8443D; font-weight:600; }

  .pl-status:empty { margin-top:0; }

  .pl-klaar { display:flex; gap:13px; align-items:center; }

  .pl-klaar-ic { width:38px; height:38px; border-radius:50%; background:var(--ok); color:#fff; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; }

  .pl-klaar-ic svg { width:19px; height:19px; }

  .pl-klaar-t { font-weight:700; color:var(--ink); font-size:16px; }

  .pl-klaar-s { font-size:13px; color:var(--ink-soft); margin-top:2px; }

  @media (max-width:760px){
    .pdf-lead { grid-template-columns:1fr; gap:24px; padding:28px 22px; }
    .pl-copy h2 { font-size:24px; }
    /* Het invoerveld pakt de volle breedte, de knop eronder niet: dat leest als
       twee losse dingen in plaats van één handeling. Onder elkaar, even breed. */
    .pl-row { flex-direction:column; align-items:stretch; }
    .pl-row .btn { width:100%; justify-content:center; }
  }


  /* ===== pricing ===== */
  .price-hero { padding:72px 0 20px; text-align:center; }

  .price-hero h1 { font-size:44px; margin-bottom:16px; }

  .price-hero p { font-size:18px; color:var(--mist); max-width:560px; margin:0 auto; }

  /* Eén object met schaduw, rustig gecentreerd boven de kop; overlapt niets. */
  .price-object { display:inline-block; width:clamp(120px,15vw,168px); margin:0 auto 20px; }

  .price-object img { display:block; width:100%; height:auto; }

  @media (max-width:600px){ .price-object { width:104px; } }

  .price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; padding-top:14px; }

  .plan { background:var(--hull); border:1px solid var(--line); border-radius:17px; padding:32px 28px; display:flex; flex-direction:column; position:relative; }

  .plan.feat-plan { border-color:var(--signal-dim); box-shadow:0 20px 50px -25px rgba(15,31,23,0.28); }

  .plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--beam); color:var(--green-900); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 14px; border-radius:20px; }

  .plan h3 { font-size:20px; margin-bottom:4px; }

  .plan .phor { font-size:12.5px; color:var(--signal); font-weight:600; margin:0 0 10px; min-height:34px; }

  .plan .ptag { font-size:13.5px; color:var(--fog); margin-bottom:22px; min-height:38px; }

  .plan .price { display:flex; align-items:baseline; gap:5px; margin-bottom:4px; }

  .plan .price .cur { font-size:22px; font-weight:600; color:var(--mist); }

  .plan .price .amt { font-size:42px; font-weight:700; letter-spacing:-0.03em; }

  .plan .price .per { font-size:14px; color:var(--fog); }

  .plan .price-note { font-size:12.5px; color:var(--fog); margin-bottom:24px; }

  .plan ul { list-style:none; margin:0 0 28px; padding:0; flex:1; }

  .plan li { font-size:14px; color:var(--mist); padding:9px 0 9px 28px; position:relative; border-bottom:1px solid var(--line-soft); }

  .plan li:last-child { border-bottom:none; }

  /* Rustig vinkje in ink-soft (geen decoratief groen; groen blijft voor acties). */
  .plan li svg { position:absolute; left:0; top:11px; width:17px; height:17px; stroke:var(--ink-soft); fill:none; stroke-width:2.2; }

  .plan li.off { color:var(--fog); }

  .plan li.off svg { stroke:var(--line); }

  /* "Binnenkort"-items: het vinkje gedempt, en een klein gedempt pill-label. */
  .plan li.soon svg { stroke:var(--ink-40,#8A968E); }

  .plan li.soon > span:first-of-type { color:var(--ink-soft); }

  .soon-pill { display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:0.02em;
    color:var(--ink-40,#8A968E); background:var(--sage-100); border:1px solid var(--line);
    border-radius:999px; padding:1px 8px; margin-left:4px; white-space:nowrap; vertical-align:middle; }

  .plan .btn { width:100%; justify-content:center; }

  /* Add-on-banner onder de pakketten: rustig sage-vlak, prijs + CTA rechts. */
  .price-addon { display:flex; align-items:center; gap:28px; flex-wrap:wrap;
    background:var(--sage-100); border:1px solid var(--line); border-radius:20px; padding:28px 32px; margin-top:32px;
    box-shadow:0 1px 2px rgba(16,24,20,.04), 0 10px 30px rgba(31,90,60,.07); }

  .price-addon .pa-mid { flex:1; min-width:260px; }

  .price-addon .pa-eyebrow { display:inline-block; font-family:'SF Mono',monospace; font-size:11px; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--green-700); background:rgba(255,255,255,.6);
    padding:4px 11px; border-radius:999px; margin-bottom:12px; }

  .price-addon .pa-h { font-family:'Newsreader',serif; font-weight:500; font-size:23px; line-height:1.2;
    letter-spacing:-0.01em; color:var(--ink); margin:0 0 8px; }

  .price-addon .pa-p { font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0; max-width:62ch; }

  .price-addon .pa-right { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; }

  .price-addon .pa-prijs { display:flex; align-items:baseline; gap:3px; }

  .price-addon .pa-prijs .cur { font-size:20px; font-weight:600; color:var(--ink-soft); }

  .price-addon .pa-amt { font-size:38px; font-weight:700; letter-spacing:-0.03em; color:var(--ink); }

  .price-addon .pa-per { font-size:14px; color:var(--ink-soft); }

  .price-addon .pa-overleg { font-family:'Newsreader',serif; font-size:29px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); white-space:nowrap; }

  .price-addon .pa-note { font-size:12.5px; color:var(--ink-soft); margin:2px 0 14px; }

  @media (max-width:760px){
    .price-addon { flex-direction:column; align-items:flex-start; }
    .price-addon .pa-right { align-items:flex-start; width:100%; }
  }

  .price-faq { max-width:760px; margin:64px auto 0; }

  .price-faq h2 { font-size:26px; text-align:center; margin-bottom:32px; }

  .faq-item { border-bottom:1px solid var(--line-soft); padding:18px 0; }

  .faq-item h3 { font-size:16px; margin-bottom:8px; color:var(--foam); }

  .faq-item p { font-size:14.5px; color:var(--fog); margin:0; }


  /* ===== login ===== */
  .login-wrap { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:40px 24px; position:relative; overflow:hidden; }

  .login-glow { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(154,203,122,0.12),transparent 62%); pointer-events:none; top:-160px; right:-100px; }

  .login-card { width:100%; max-width:410px; background:linear-gradient(165deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:18px; padding:40px 36px; position:relative; box-shadow:0 30px 70px -25px rgba(0,0,0,0.6); }

  .login-card .brand { justify-content:center; margin-bottom:8px; font-size:22px; }

  .login-card .sub { text-align:center; font-size:14px; color:var(--fog); margin-bottom:30px; }

  .field { margin-bottom:18px; }

  .field label { display:block; font-size:13px; color:var(--mist); margin-bottom:7px; font-weight:500; }

  .field input { width:100%; background:var(--abyss); border:1px solid var(--line); border-radius:10px; padding:13px 15px; color:var(--foam); font-size:15px; font-family:inherit; transition:border-color .15s; }

  .field input:focus { outline:none; border-color:var(--signal); }

  .field input::placeholder { color:var(--fog); }

  .login-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; font-size:13px; }

  .login-row label { display:flex; align-items:center; gap:7px; color:var(--mist); cursor:pointer; }

  .login-row a { color:var(--signal); }

  .login-card .btn { width:100%; justify-content:center; }

  .login-divider { display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--fog); font-size:12px; }

  .login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:var(--line-soft); }

  .login-sso { width:100%; justify-content:center; background:var(--abyss); border:1px solid var(--line); color:var(--mist); }

  .login-sso:hover { border-color:var(--signal); color:var(--foam); }

  .login-sso svg { width:18px; height:18px; }

  .login-foot { text-align:center; font-size:13px; color:var(--fog); margin-top:26px; }

  .login-foot a { color:var(--signal); }

  .login-back { position:absolute; top:24px; left:24px; font-size:13px; color:var(--fog); display:flex; align-items:center; gap:6px; cursor:pointer; }

  .login-back:hover { color:var(--mist); }

  .login-back svg { width:15px; height:15px; }


  /* ===== footer ===== */
  footer.site { border-top:1px solid var(--line-soft); background:var(--hull); padding:48px 0 32px; }

  .foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:38px; }

  .foot-brand .brand { margin-bottom:14px; }

  .foot-brand p { font-size:13.5px; color:var(--fog); margin:0; max-width:260px; }

  .foot-col h4 { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mist); margin:0 0 14px; }

  .foot-col a { display:block; font-size:14px; color:var(--fog); padding:5px 0; cursor:pointer; }

  .foot-col a:hover { color:var(--foam); }

  .foot-bottom { padding-top:14px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--fog); }

  .foot-legal { padding-top:8px; font-size:12px; color:var(--fog); }

  .foot-eu { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--fog); padding:16px 0 4px; border-top:1px solid var(--line-soft); margin-top:8px; }

  .foot-eu svg { width:17px; height:17px; color:var(--beam,#1D3B2A); flex-shrink:0; }

  .foot-bottom .made { display:flex; align-items:center; gap:7px; }


  /* ===== responsive ===== */
  @media (max-width:900px) {
    .hero-grid { grid-template-columns:1fr; gap:40px; }
    .hero h1 { font-size:40px; }
    .hero-visual { max-width:440px; }
    .prob-grid, .layers, .stats, .whom-grid, .price-grid { grid-template-columns:1fr; }
    .feat-grid { grid-template-columns:1fr; }
    .layer-arrow { display:none; }
    .foot-grid { grid-template-columns:1fr 1fr; gap:26px; }
    .nav-links { display:none; }
    .nav-links.open { display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:var(--hull); border-bottom:1px solid var(--line); padding:14px 28px; gap:4px; }
    .nav-links.open a { padding:11px 14px; }
    .nav-toggle { display:flex; margin-left:auto; background:var(--hull); border:1px solid var(--line); border-radius:8px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; }
    .nav-toggle svg { width:20px; height:20px; stroke:var(--mist); }
  }

  @media (max-width:560px) {
    .wrap { padding:0 18px; }
    .hero { padding:56px 0 40px; }
    .hero h1 { font-size:32px; }
    .hero .lede { font-size:17px; }

    /* ── ÉÉN ACTIE, DAN PAS DE REST ──
       De hero had drie knoppen onder elkaar, elk zo breed als zijn eigen tekst.
       Dat is 300px keuzestress voordat je iets van het verhaal hebt gezien, en
       geen van de drie wint. Nu: één volle knop die de actie IS, met de twee
       alternatieven eronder als een lichtere tweede laag. Ze verdwijnen niet,
       ze krijgen alleen het gewicht dat bij ze hoort. */
    .hero-cta { align-items:stretch; gap:10px; }
    .hero-cta > .btn-primary { width:100%; justify-content:center; }
    .hero-cta-sub {
      display:grid; grid-template-columns:1fr 1fr; gap:8px; flex-wrap:nowrap;
    }
    .hero-cta-sub .btn {
      width:100%; justify-content:center; text-align:center;
      font-size:14.5px; padding:12px 10px; min-height:48px; line-height:1.25;
    }
    .section-head h2 { font-size:28px; }
    section { padding:52px 0; }
    .cta-block { padding:40px 24px; }
    .cta-block h2 { font-size:26px; }
    .foot-grid { grid-template-columns:1fr; }
    .foot-bottom { flex-direction:column; gap:12px; text-align:center; }
    .foot-legal { text-align:center; }
    /* Footerlinks stonden 32px uit elkaar. In een kolom van tien links naast
       elkaar is dat mistikken; met een duim heb je 44px nodig. */
    .foot-col a { padding:11px 0; }
    .nav-toggle { width:44px; height:44px; }
    /* Zelfde reden: de kleinste knopmaat bleef op 42px steken. De knoppen in de
       productmockup (.pv-btn) horen hier NIET bij: dat is een afbeelding van de
       app, geen bediening. */
    .btn { min-height:44px; }
  }


  /* ===== VERWERKERSOVEREENKOMST (site-niveau, concept-document) ===== */
  .vwo-topbar { border-bottom:1px solid var(--line-soft); padding:18px 0; }

  .vwo-wrap { max-width:760px; padding-top:38px; padding-bottom:80px; }

  .vwo-cover { text-align:center; padding:8px 0 34px; border-bottom:1px solid var(--line-soft); margin-bottom:34px; }

  .vwo-object { display:block; width:150px; height:150px; margin:0 auto 18px; filter:drop-shadow(0 16px 28px rgba(15,31,23,0.16)); }

  .vwo-object img { width:100%; height:100%; object-fit:contain; }

  .vwo-cover h1 { font-size:38px; line-height:1.1; margin:6px 0 20px; }

  .vwo-concept { display:inline-block; text-align:left; max-width:600px; background:var(--hull); border:1px solid #E7C9BE; border-left:3px solid #C67A5E; border-radius:12px; padding:12px 16px; font-size:13.5px; color:var(--mist); line-height:1.55; margin-bottom:22px; }

  .vwo-concept b { color:#A8443D; }

  .vwo-lead { font-size:16px; line-height:1.65; color:var(--mist); max-width:620px; margin:0 auto 24px; }

  .vwo-kort { list-style:none; margin:0 auto; padding:0; max-width:620px; text-align:left; display:flex; flex-direction:column; gap:12px; }

  .vwo-kort li { position:relative; padding-left:28px; font-size:14.5px; line-height:1.55; color:var(--fog); }

  .vwo-kort li b { color:var(--ink); font-weight:600; }

  .vwo-kort li::before { content:''; position:absolute; left:2px; top:7px; width:11px; height:11px; border-radius:50%; background:var(--beam,#1D3B2A); }


  .vwo-doc { font-size:14.5px; line-height:1.7; color:var(--mist); }

  .vwo-meta { font-family:'SF Mono',monospace; font-size:12px; color:var(--fog); margin:0 0 26px; }

  .vwo-doc h2 { font-size:19px; color:var(--ink); margin:28px 0 8px; }

  .vwo-doc p { margin:0 0 12px; }

  .vwo-doc a { color:var(--signal-dim); text-decoration:underline; }

  .vwo-hr { border:none; border-top:1px solid var(--line-soft); margin:38px 0 8px; }

  .vwo-annex-kop { font-size:17px; }

  .vwo-annex-noot { font-size:12.5px; color:var(--fog); font-style:italic; margin:-2px 0 12px; }

  .vwo-tabel { width:100%; border-collapse:collapse; margin:6px 0 20px; font-size:13.5px; }

  .vwo-tabel th, .vwo-tabel td { text-align:left; vertical-align:top; padding:9px 12px; border:1px solid var(--line-soft); }

  .vwo-tabel th { background:var(--hull); color:var(--ink); font-weight:600; width:32%; }

  .vwo-tabel tr:first-child th { width:auto; }

  .vwo-lijst { margin:6px 0 20px; padding-left:20px; display:flex; flex-direction:column; gap:8px; }

  .vwo-lijst li { line-height:1.6; }

  .vwo-sign { display:flex; gap:28px; flex-wrap:wrap; margin:22px 0 8px; }

  .vwo-sign-col { flex:1; min-width:220px; }

  .vwo-sign-l { font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:34px; }

  .vwo-sign-line { border-bottom:1px solid var(--mist); }

  .vwo-sign-m { font-size:12px; color:var(--fog); margin-top:6px; }

  .vwo-slot { font-size:13px; color:var(--fog); margin-top:26px; padding-top:16px; border-top:1px solid var(--line-soft); }

  .vwo-acties { display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }


  @media (max-width:600px){
    .vwo-cover h1 { font-size:30px; }
    .vwo-tabel th { width:auto; }
    .vwo-tabel, .vwo-tabel tr, .vwo-tabel th, .vwo-tabel td { display:block; }
    .vwo-tabel th { border-bottom:none; }
    .vwo-tabel td { border-top:none; margin-bottom:2px; }
  }


  @media print {
    body { background:#fff; }
    header.nav, .vwo-topbar, .vwo-acties, footer.site { display:none !important; }
    /* Hier stond '#screen-vwo { position:static }'. Dat id bestaat niet meer sinds
       de juridische documenten eigen pagina's kregen, en de regel deed toch al
       niets: .screen zet alleen display, nooit position. */
    .vwo-object { filter:none; }
    .vwo-concept { border-color:#999; }
    .vwo-doc, .vwo-lead, .vwo-kort li { color:#000; }
  }

  @keyframes livePuls { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

  /* Site-taalknop (marketingpagina-nav) */
  .site-lang { display:inline-flex; align-items:center; gap:4px; background:transparent; border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:5px 9px; cursor:pointer; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; color:inherit; }

  .site-lang .lang-opt { opacity:0.5; transition:opacity .12s; }

  .site-lang .lang-opt.active { opacity:1; color:var(--beam,#1D3B2A); }

  .site-lang .lang-sep { opacity:0.35; }

  .site-lang:hover .lang-opt:not(.active) { opacity:0.8; }

  @keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

  @keyframes afgIn { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

  @keyframes genspin { to { transform:rotate(360deg); } }

  @keyframes vbpulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  @keyframes kpPulse { 0%,100%{ opacity:.35; } 50%{ opacity:1; } }


/* login-foutmelding */
.login-error { display:none; background:var(--danger-bg); color:var(--danger-tekst); font-size:13px; padding:10px 13px; border-radius:9px; margin-bottom:16px; border:1px solid #5a2f2b; }

  /* ═══ /hoe-het-werkt ═══════════════════════════════════════════════════════
     Deze pagina moet overtuigen, niet alleen informeren: hier komt iemand kijken
     of Plotta te vertrouwen is. Vandaar veel lucht, één idee per blok, en de
     drie-bronnen-uitleg als visueel hoogtepunt. */

  /* De vier stappen, om en om links/rechts met hun object ernaast. */
  .hw-stap { display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:center;
             padding:52px 0; border-top:1px solid var(--line); }
  .hw-stap:first-of-type { border-top:none; }
  .hw-stap:nth-child(even) .hw-tekst { order:2; }
  .hw-stap:nth-child(even) .hw-beeld { order:1; }
  .hw-num { display:inline-flex; align-items:center; justify-content:center;
            width:34px; height:34px; border-radius:50%; background:var(--green-900);
            color:#fff; font-family:'SF Mono',ui-monospace,monospace; font-size:13px;
            font-weight:600; margin-bottom:16px; }
  .hw-stap h2 { font-size:29px; line-height:1.16; margin:0 0 12px; }
  .hw-kern { font-size:17.5px; line-height:1.55; color:var(--foam); font-weight:500; margin:0 0 10px; }
  .hw-uitleg { font-size:15.5px; line-height:1.65; color:var(--fog); margin:0; max-width:52ch; }
  .hw-beeld { display:flex; justify-content:center; }
  .hw-beeld img { width:100%; max-width:260px; height:auto; }

  /* De drie bronnen: het hart van de pagina. Elke bron een eigen kleur, en
     daaronder de samenkomst. */
  .hw-bron-sec { background:var(--sage-100); padding:64px 0 70px; margin:60px 0 0;
                 border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .hw-bron-kop { text-align:center; max-width:640px; margin:0 auto 42px; }
  .hw-bron-kop h2 { font-size:34px; line-height:1.15; margin:0 0 14px; }
  .hw-bron-kop p { font-size:17px; line-height:1.6; color:var(--fog); margin:0; }
  .hw-bronnen { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
  .hw-bron { background:var(--hull); border:1px solid var(--line); border-radius:var(--radius-lg);
             padding:26px 24px 24px; border-top:3px solid var(--kl); display:flex; flex-direction:column; }
  .hw-bron-ic { display:inline-flex; align-items:center; justify-content:center;
                width:38px; height:38px; border-radius:11px; background:var(--kl);
                margin-bottom:15px; }
  .hw-bron-ic svg { width:19px; height:19px; stroke:#fff; fill:none; stroke-width:1.9; }
  .hw-bron h3 { font-size:17.5px; margin:0 0 9px; }
  .hw-bron p { font-size:14.5px; line-height:1.6; color:var(--fog); margin:0 0 16px; flex:1; }
  .hw-bron-tag { display:inline-block; align-self:flex-start; font-size:11.5px; font-weight:600;
                 letter-spacing:.04em; text-transform:uppercase; color:var(--kl);
                 background:var(--hull-2); border-radius:999px; padding:5px 11px; }

  /* De samenkomst: drie pijlen naar één uitkomst. */
  .hw-samen { margin-top:26px; text-align:center; }
  /* Dezelfde drie kolommen als de bronnen, zodat elke pijl ONDER zijn eigen kaart
     staat. Met een vaste gap liep dat mis: de kolommen schalen mee met de breedte
     en de pijlen niet. */
  .hw-pijlen { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:14px; }
  .hw-pijlen span { justify-self:center; width:2px; height:34px; background:var(--sage-300);
                    position:relative; border-radius:1px; }
  .hw-pijlen span::after { content:''; position:absolute; bottom:-1px; left:-4px;
                           border-left:5px solid transparent; border-right:5px solid transparent;
                           border-top:7px solid var(--sage-300); }
  .hw-uitkomst { display:inline-block; background:var(--green-900); color:#fff;
                 border-radius:var(--radius-lg); padding:22px 30px; max-width:560px; }
  .hw-uitkomst h3 { color:#fff; font-size:19px; margin:0 0 7px; }
  .hw-uitkomst p { color:#C9D6C1; font-size:14.5px; line-height:1.6; margin:0; }

  /* De drie horden voor een advies naar buiten mag. */
  .hw-horden { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
  .hw-horde { background:var(--hull); border:1px solid var(--line); border-radius:var(--radius);
              padding:20px 20px 18px; }
  .hw-horde-n { font-family:'SF Mono',ui-monospace,monospace; font-size:12px; color:var(--ok-tekst);
                font-weight:600; margin-bottom:7px; }
  .hw-horde h3 { font-size:15.5px; margin:0 0 7px; }
  .hw-horde p { font-size:14px; line-height:1.6; color:var(--fog); margin:0; }
  .hw-slot { margin-top:22px; font-size:15px; line-height:1.65; color:var(--fog);
             text-align:center; max-width:62ch; margin-left:auto; margin-right:auto; }

  @media (max-width:860px){
    .hw-stap { grid-template-columns:1fr; gap:24px; padding:38px 0; }
    .hw-stap:nth-child(even) .hw-tekst { order:1; }
    .hw-stap:nth-child(even) .hw-beeld { order:2; }
    .hw-beeld img { max-width:180px; }
    .hw-stap h2 { font-size:24px; }
    .hw-bronnen, .hw-horden { grid-template-columns:1fr; }
    .hw-pijlen { gap:0; }
    .hw-pijlen span:not(:first-child) { display:none; }
    .hw-bron-kop h2 { font-size:27px; }
  }