/* ============================================================
   V61 — V60 volledig behouden; alleen meer rust boven de vouw
   en gerichte mobiele leesbaarheid.
   ============================================================ */

/* DESKTOP: zelfde compositie, zelfde maten/breedtes, meer verticale ruimte.
   Hierdoor valt 'Drie dingen...' niet meer in de eerste blik. */
@media (min-width: 1001px){
  #top .hero-v20{
    min-height: calc(100vh - 122px) !important;
    display:flex !important;
    align-items:center !important;
  }
  #top .hero-v20 .hero-inner{
    width:100% !important;
    padding-top:34px !important;
    padding-bottom:42px !important;
  }
  #top{
    padding-bottom:18px !important;
  }
  #opbrengst{
    padding-top:8px !important;
  }
}

/* TABLET / PHONE: inhoud blijft hetzelfde, alleen stacken en leesbaarheid. */
@media (max-width: 900px){
  #top .hero-v20{
    min-height:auto !important;
    display:block !important;
  }
  #top .hero-v20 .hero-inner{
    padding:22px 0 30px !important;
  }
  #top .hero-grid-v20{
    grid-template-columns:1fr !important;
    gap:30px !important;
    align-items:start !important;
  }
  #top .hero-copy-v20{
    order:1;
  }
  #top .hero-perspectives{
    order:2;
    border-left:0 !important;
    border-top:1px solid rgba(209,177,122,.55) !important;
    padding:24px 0 0 !important;
    min-height:0 !important;
  }
  #top .hero-copy-v20 .hero-actions{
    width:100%;
  }
  #top .hero-tool-note{
    margin-bottom:0 !important;
  }
  #opbrengst{
    padding-top:10px !important;
  }
  #opbrengst h2{
    white-space:normal !important;
  }
}

@media (max-width: 700px){
  /* Header/nav: laat de bestaande mobiele navigatie intact, maar geef logo en CTA lucht. */
  .topbar{
    gap:10px !important;
  }
  .brand-full img{
    max-width:150px !important;
    height:auto !important;
  }
  .navlinks .btn{
    padding:10px 13px !important;
    font-size:13px !important;
  }

  /* Hero */
  #top.hero-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  #top .hero-v20 .hero-inner{
    padding:18px 0 30px !important;
  }
  #top .hero-kicker-main{
    font-size:9px !important;
    line-height:1.4 !important;
    letter-spacing:.14em !important;
  }
  #top .hero-copy-v20 h1{
    font-size:clamp(34px,10.2vw,42px) !important;
    line-height:1.02 !important;
    letter-spacing:-.03em !important;
    margin:10px 0 18px !important;
  }

  /* De drie herkenningssignalen blijven pills en wrappen rustig. */
  #top .hero-recognition{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-bottom:18px !important;
  }
  #top .hero-recognition span{
    width:auto !important;
    max-width:100% !important;
    padding:8px 11px !important;
    font-size:12px !important;
    line-height:1.3 !important;
  }
  #top .hero-audience{
    font-size:15px !important;
    line-height:1.55 !important;
    margin:0 0 15px !important;
  }

  /* CTA's onder elkaar, makkelijk tikbaar. */
  #top .hero-copy-v20 .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin-top:0 !important;
  }
  #top .hero-copy-v20 .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px 14px !important;
  }
  #top .hero-tool-note{
    font-size:11px !important;
    line-height:1.45 !important;
    margin-top:10px !important;
  }

  /* Gimmick komt onder de CTA's en blijft herkenbaar, maar compacter. */
  #top .hero-perspectives{
    padding-top:22px !important;
  }
  #top .hero-perspectives-label{
    font-size:23px !important;
    line-height:1.12 !important;
    margin-bottom:7px !important;
  }
  #top .hero-perspectives-intro{
    font-size:12px !important;
    line-height:1.5 !important;
    margin-bottom:14px !important;
  }
  #top .hero-perspective-row{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:6px !important;
    margin-bottom:14px !important;
  }
  #top .hero-perspective{
    min-width:0 !important;
    padding:8px 3px 7px !important;
  }
  #top .hero-perspective img{
    width:48px !important;
    height:auto !important;
  }
  #top .hero-perspective span{
    font-size:13px !important;
  }
  #hero-perspective-detail{
    padding-top:14px !important;
  }
  #hero-perspective-detail strong{
    font-size:22px !important;
  }
  #hero-perspective-detail p{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  /* De volgende sectie krijgt duidelijk afstand van de hero. */
  #opbrengst{
    padding-top:18px !important;
  }
  #opbrengst .section-card{
    padding-top:22px !important;
  }
  #opbrengst h2{
    white-space:normal !important;
    font-size:clamp(31px,9vw,38px) !important;
    line-height:1.08 !important;
  }
  #opbrengst .founder-strengths{
    grid-template-columns:1fr !important;
  }
  #opbrengst .founder-strengths > div,
  #opbrengst .founder-strengths > div:nth-child(2),
  #opbrengst .founder-strengths > div:last-child{
    padding:15px 0 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(209,177,122,.4) !important;
  }
  #opbrengst .founder-strengths > div:last-child{
    border-bottom:0 !important;
  }
  #opbrengst .founder-strengths strong{
    font-size:14px !important;
  }
  #opbrengst .founder-strengths span{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  /* Bestaande groene en interactieve blokken: één kolom, zonder inhoud te veranderen. */
  .value-dark-inner-v59{
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding:38px 16px !important;
  }
  .value-dark-copy-v59 h2{
    font-size:clamp(31px,9vw,39px) !important;
  }
  #vastlopen .dilemma-buttons{
    grid-template-columns:1fr !important;
  }
  #vastlopen .dilemma-detail-v59{
    grid-template-columns:1fr !important;
    padding:22px 18px !important;
    gap:20px !important;
  }

  /* Aanbod: duidelijke mobiele volgorde en tikbare CTA's. */
  #aanbod .sales-routes{
    grid-template-columns:1fr !important;
  }
  #aanbod .sales-card .btn{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
}