/* =====================================================================
     PAGINA-SPECIFIEK: homepage v2 (conversie) — herzien 2026-09-13
     Scope #cvhome2, zodat v1 (#cvhome) volledig intact blijft.

     WAT ER OP 13-09 IS VERANDERD EN WAAROM
     Ronald keek op staging en had op elk punt gelijk:
     · de vier pijlers stonden als knopblokjes en nodigden uit tot klikken
       terwijl er niets achter zat. Nu een gewone lijst met streepjes.
     · de tools stonden onderaan en zagen er niet klikbaar uit. Ze staan nu
       direct onder de hero en elke kaart draagt een zichtbare actieregel.
     · het specificatieblad met referentie/afkap/streefwaarde is van de pagina
       af. Dat is aanvullende uitleg en geen opwarmer.
     · de bewijssectie besloeg een volle sectie met vier kaarten en drie
       stappen naast elkaar. Nu één compacte band met de stappen onder elkaar.

     ONTWERPPLAN
     Kleur  : alleen tokens uit fable-tokens.css. Grond --bg, rustbanden
              --bg-alt, en één felle zet: de nieuwsbriefband op --teal-dark.
     Type   : --serif voor h1/h2, --sans voor alles wat gelezen of geklikt wordt.
     Layout : volle-breedte banden (.band > .wrap), asymmetrische hero.
     Klikbaarheid: alles wat een link is draagt een pijlregel in --teal.
              Niets dat géén link is krijgt een kader, een vlak of een cijfer
              in een cirkel. Dat was precies de verwarring.
     ===================================================================== */
  #cvhome2 *,#cvhome2 *::before,#cvhome2 *::after{box-sizing:border-box;}
  #cvhome2 a:focus-visible,#cvhome2 button:focus-visible,#cvhome2 input:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px;}
  #cvhome2 .band--deep a:focus-visible,#cvhome2 .band--deep button:focus-visible{outline-color:#fff;}
  #cvhome2 .wrap{max-width:1220px; margin:0 auto; padding:0 32px;}

  /* ---------- banden ---------- */
  #cvhome2 .band{padding:56px 0; background:var(--bg);}
  #cvhome2 .band--alt{background:var(--bg-alt);}
  #cvhome2 .band--deep{background:var(--teal-dark); color:#fff; padding:64px 0;}
  #cvhome2 .band--nl{padding:48px 0 56px;}
  #cvhome2 .hero-band{background:radial-gradient(120% 80% at 88% -10%, rgba(10,110,110,.08), transparent 60%), var(--bg); padding:40px 0 48px;}

  /* ---------- hero ---------- */
  #cvhome2 .hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  /* de drie punten op één regel: kleiner, krappe spatiëring, en elk punt
     onbreekbaar met een gescheiden stip ertussen. Stond eerst 2+1. */
  #cvhome2 .eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 24px; font-size:11.5px; font-weight:600; letter-spacing:.035em; color:var(--teal-dark); text-transform:uppercase;}
  #cvhome2 .eyebrow span{white-space:nowrap; display:inline-flex; align-items:center; gap:10px;}
  #cvhome2 .eyebrow span:not(:last-child)::after{content:""; width:4px; height:4px; border-radius:50%; background:var(--copper); flex:none;}
  #cvhome2 .hero h1{font-family:var(--serif); font-weight:400; font-size:clamp(35px,4.5vw,58px); line-height:1.04; letter-spacing:-.022em; color:var(--ink); margin:0 0 22px; text-wrap:balance;}
  #cvhome2 .hero h1 em{font-style:italic; color:var(--teal);}
  #cvhome2 .sub{font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink-soft); max-width:40ch; margin:0 0 16px;}
  #cvhome2 .direction{font-size:16.5px; font-weight:500; line-height:1.68; color:var(--ink-soft); max-width:50ch; margin:0 0 28px;}
  #cvhome2 .cta{display:flex; gap:14px; flex-wrap:wrap;}
  #cvhome2 .cta-fine{font-size:14px; font-weight:500; line-height:1.55; color:var(--muted); max-width:50ch; margin:14px 0 0;}

  #cvhome2 .btn{font-family:var(--sans); font-size:16px; font-weight:600; padding:16px 30px; border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; gap:9px; border:1.5px solid transparent; cursor:pointer;}
  #cvhome2 .btn--primary{background:var(--teal); color:#fff; box-shadow:0 8px 22px rgba(10,110,110,.22);}
  #cvhome2 .btn--primary:hover{background:var(--teal-dark);}
  #cvhome2 .btn--ghost{background:#fff; color:var(--teal-dark); border-color:rgba(10,110,110,.35);}
  #cvhome2 .btn--ghost:hover{border-color:var(--teal); background:var(--teal-light);}
  #cvhome2 .btn .arw{transition:transform .2s ease;}
  #cvhome2 .btn:hover .arw{transform:translateX(3px);}

  /* ---------- quizkaart: uitnodigend, maar alleen de knop is klikbaar ---------- */
  #cvhome2 .quizcard{background:#fff; border:1px solid var(--line); border-top:4px solid var(--teal); border-radius:18px; padding:30px; box-shadow:0 18px 50px rgba(26,26,46,.10);}
  #cvhome2 .qc-kicker{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--teal-dark); background:var(--teal-light); border-radius:99px; padding:5px 12px; margin-bottom:14px;}
  #cvhome2 .quizcard h2{font-family:var(--serif); font-weight:400; font-size:clamp(23px,2.1vw,29px); line-height:1.14; color:var(--ink); margin:0 0 10px; text-wrap:balance;}
  #cvhome2 .qc-intro{font-size:15.5px; font-weight:500; line-height:1.62; color:var(--ink-soft); margin:0 0 20px;}
  #cvhome2 .qc-label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 8px;}
  /* GEEN kaders en GEEN cijfercirkels: dit is een opsomming, geen menu */
  #cvhome2 .qc-pillars{list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;}
  #cvhome2 .qc-pillars li{position:relative; padding-left:16px; font-size:15.5px; font-weight:500; line-height:1.45; color:var(--ink);}
  #cvhome2 .qc-pillars li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:1.5px; background:var(--copper);}
  #cvhome2 .qc-btn{width:100%; justify-content:center;}
  #cvhome2 .qc-fine{font-size:12.5px; line-height:1.5; color:var(--muted); margin:12px 0 0; text-align:center;}

  /* ---------- kerncijfers ---------- */
  #cvhome2 .proof{list-style:none; margin:48px 0 0; padding:26px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  #cvhome2 .proof b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.2vw,40px); color:var(--teal); line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
  #cvhome2 .proof span{display:block; font-size:14px; font-weight:500; line-height:1.45; color:var(--ink-soft); margin-top:8px;}
  #cvhome2 .proof li:not(:first-child){border-left:1px solid var(--line); padding-left:24px;}

  /* ---------- sectiekoppen ---------- */
  #cvhome2 .sec{margin:0 0 28px;}
  #cvhome2 .sec-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--copper-txt); margin:0 0 12px;}
  #cvhome2 .sec-eyebrow::before{content:""; width:24px; height:2px; background:var(--copper);}
  #cvhome2 .sec h2,#cvhome2 .waarom h2,#cvhome2 .nlband h2{font-family:var(--serif); font-weight:400; font-size:clamp(27px,3vw,38px); line-height:1.1; letter-spacing:-.012em; margin:0 0 12px; text-wrap:balance;}
  #cvhome2 .sec-lede{font-size:17px; font-weight:500; line-height:1.68; color:var(--ink-soft); max-width:66ch; margin:0;}

  /* ---------- tools: het moet méteen duidelijk zijn dat je hierop klikt ---------- */
  #cvhome2 .tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:18px;}
  #cvhome2 .tool{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px 22px 20px; text-decoration:none; color:inherit; box-shadow:0 2px 12px rgba(26,26,46,.05); cursor:pointer;}
  #cvhome2 .tool-h{font-family:var(--sans); font-size:16px; font-weight:700; line-height:1.3; color:var(--ink); margin-bottom:8px;}
  #cvhome2 .tool-p{font-size:14.5px; font-weight:500; line-height:1.6; color:var(--ink-soft); margin-bottom:18px;}
  /* de actieregel is wat de kaart als knop laat lezen */
  #cvhome2 .tool-go{margin-top:auto; align-self:flex-start; font-size:13.5px; font-weight:700; color:var(--teal-dark); background:var(--teal-light); border-radius:8px; padding:9px 14px; display:inline-flex; align-items:center; gap:7px;}
  #cvhome2 .tool-go .arw{transition:transform .2s ease;}
  #cvhome2 .tool:hover{border-color:var(--teal); box-shadow:0 14px 32px rgba(26,26,46,.11); transform:translateY(-3px);}
  #cvhome2 .tool:hover .tool-go{background:var(--teal); color:#fff;}
  #cvhome2 .tool:hover .tool-go .arw{transform:translateX(3px);}
  /* De quizkaart is de primaire CTA van de pagina en moet zich onderscheiden van
     de vier rekentools ernaast. Een kale streep van 4px bovenop een afgeronde
     kaart las als een losse rail (Ronald, 14-09). Nu: dunnere accentlijn die de
     ronding volgt, plus een lichte warme vulling, zodat de kaart als geheel
     anders oogt in plaats van alleen de bovenrand. */
  #cvhome2 .tool--quiz{border-top:3px solid var(--copper); border-radius:14px; background:linear-gradient(180deg,rgba(193,127,62,.05) 0,#fff 120px);}

  /* ---------- kennisgebieden ---------- */
  #cvhome2 .areas{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  #cvhome2 .area{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; text-decoration:none; color:inherit; box-shadow:0 2px 12px rgba(26,26,46,.05); cursor:pointer;}
  #cvhome2 .area .a-ic{width:46px; height:46px; border-radius:12px; background:var(--teal-light); display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex:none;}
  #cvhome2 .area-kg{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:8px;}
  #cvhome2 .area h3{font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.22; margin:0 0 10px; color:var(--ink); text-wrap:balance;}
  #cvhome2 .area p{font-size:15.5px; font-weight:500; line-height:1.6; color:var(--ink-soft); margin:0 0 18px;}
  #cvhome2 .area-go{margin-top:auto; align-self:flex-start; font-size:13.5px; font-weight:700; color:var(--teal-dark); background:var(--teal-light); border-radius:8px; padding:9px 14px; display:inline-flex; align-items:center; gap:7px;}
  #cvhome2 .area-go .arw{transition:transform .2s ease;}
  #cvhome2 .area:hover{border-color:var(--teal); box-shadow:0 14px 34px rgba(26,26,46,.11); transform:translateY(-3px);}
  #cvhome2 .area:hover .area-go{background:var(--teal); color:#fff;}
  #cvhome2 .area:hover .area-go .arw{transform:translateX(3px);}

  /* ---------- waarom je ons kunt geloven: compact, stappen ónder elkaar ---------- */
  #cvhome2 .waarom{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:start;}
  #cvhome2 .waarom-stappen{list-style:none; counter-reset:w; margin:22px 0 0; padding:0;}
  #cvhome2 .waarom-stappen li{counter-increment:w; position:relative; padding-left:34px; font-size:16px; font-weight:500; line-height:1.65; color:var(--ink-soft); margin-bottom:14px;}
  #cvhome2 .waarom-stappen li::before{content:counter(w); position:absolute; left:0; top:1px; width:23px; height:23px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--teal-dark); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;}
  #cvhome2 .waarom-stappen b{color:var(--ink); font-weight:700;}
  /* Was een onderstreepte tekstlink op 15px en viel weg tussen de genummerde
     stappen (Ronald, 14-09). Nu een echte knop, zelfde maat als .tool-go. */
  #cvhome2 .waarom-foot{margin:26px 0 0;}
  #cvhome2 .waarom-foot .btn-meth{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; text-decoration:none; color:#fff; background:var(--teal); border-radius:10px; padding:13px 20px; transition:background .2s ease, transform .2s ease;}
  #cvhome2 .waarom-foot .btn-meth:hover{background:var(--teal-dark); transform:translateY(-1px);}

  #cvhome2 .tierstrip{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;}
  #cvhome2 .ts-h{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 16px;}
  #cvhome2 .tierstrip ul{list-style:none; margin:0; padding:0;}
  #cvhome2 .tierstrip li{display:grid; grid-template-columns:34px auto; column-gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);}
  #cvhome2 .tierstrip li:last-child{border-bottom:none;}
  /* het balkjes-icoon is de sitebrede bewijstaal: hetzelfde beeld in de badge bij
     een bewering, op de hub-kaart en op /methodologie. Stippen hoorden daar niet. */
  #cvhome2 .cv-grade--4{display:inline-flex; align-items:flex-end; gap:3px; height:24px; flex:none;}
  #cvhome2 .cv-grade--4 b{width:6px; border-radius:2px; background:var(--t-leeg); display:block;}
  #cvhome2 .cv-grade--4 b:nth-child(1){height:40%;}
  #cvhome2 .cv-grade--4 b:nth-child(2){height:60%;}
  #cvhome2 .cv-grade--4 b:nth-child(3){height:80%;}
  #cvhome2 .cv-grade--4 b:nth-child(4){height:100%;}
  #cvhome2 .cv-grade--4.g4--sterk b{background:var(--t-sterk);}
  #cvhome2 .cv-grade--4.g4--redelijk b:nth-child(-n+3){background:var(--t-redelijk);}
  #cvhome2 .cv-grade--4.g4--wisselend b:nth-child(-n+2){background:var(--t-wisselend);}
  #cvhome2 .cv-grade--4.g4--beperkt b:nth-child(1){background:var(--t-beperkt);}
  #cvhome2 .tierstrip b{grid-column:2; font-size:15px; font-weight:700; color:var(--ink);}
  #cvhome2 .tierstrip li span:last-child{grid-column:2; display:block; font-size:14.5px; font-weight:500; line-height:1.55; color:var(--ink-soft); margin-top:2px;}
  #cvhome2 .ts-foot{font-size:12.5px; line-height:1.55; color:var(--muted); margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);}

  /* ---------- nieuwsbrief op de donkere band ---------- */
  #cvhome2 .nlband{border:1px solid rgba(255,255,255,.20); border-radius:20px; padding:40px; display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center;}
  #cvhome2 .nlband--deep h2{color:#fff;}
  #cvhome2 .nlband--deep p{font-size:16.5px; font-weight:500; line-height:1.6; color:var(--teal-light); margin:0;}
  #cvhome2 .nlband .nlform{display:flex; flex-direction:column; gap:10px;}
  #cvhome2 .nlband .nlform label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  #cvhome2 .nlband input{width:100%; padding:15px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.30); background:#fff; font-family:var(--sans); font-size:15px; color:var(--ink);}
  #cvhome2 .nlband input:focus{outline:none; border-color:#fff;}
  #cvhome2 .nlband button{background:#fff; color:var(--teal-dark); border:none; border-radius:10px; padding:15px; font-family:var(--sans); font-size:15px; font-weight:700; cursor:pointer;}
  #cvhome2 .nlband button:hover{background:var(--teal-light);}
  #cvhome2 .nlband--deep .fine{font-size:12.5px; color:var(--teal-light);}
  #cvhome2 .band--deep .byline{font-size:13px; line-height:1.6; color:var(--teal-light); margin:32px 0 0; max-width:80ch;}

  @media (prefers-reduced-motion:no-preference){
    #cvhome2 .area,#cvhome2 .tool{transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
    #cvhome2 .tool-go,#cvhome2 .area-go{transition:background .2s ease, color .2s ease;}
  }

  /* ---------- responsief ---------- */
  @media (max-width:1000px){
    #cvhome2 .waarom{grid-template-columns:1fr; gap:34px;}
  }
  @media (max-width:900px){
    #cvhome2 .band{padding:48px 0;}
    #cvhome2 .hero{grid-template-columns:1fr; gap:36px;}
    #cvhome2 .sub,#cvhome2 .direction,#cvhome2 .cta-fine{max-width:60ch;}
    #cvhome2 .areas{grid-template-columns:1fr;}
    #cvhome2 .nlband{grid-template-columns:1fr; gap:26px; padding:30px;}
  }
  @media (max-width:620px){
    #cvhome2 .qc-pillars{grid-template-columns:1fr;}
    #cvhome2 .wrap{padding:0 20px;}
    #cvhome2 .band{padding:40px 0;}
    #cvhome2 .hero-band{padding:26px 0 36px;}
    #cvhome2 .proof{grid-template-columns:1fr; gap:20px; margin-top:36px;}
    #cvhome2 .proof li:not(:first-child){border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:18px;}
    #cvhome2 .btn{flex:1 1 auto; justify-content:center;}
    #cvhome2 .quizcard{padding:22px;}
  }