Split hero: tekst links, beeld rechts

<!-- Split hero: tekst links, beeld rechts · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="shv">
  <div class="shv__inner">
    <div class="shv__col shv__text">
      <span class="shv__eyebrow">[ NEDDEV · STUDIO 2026 ]</span>
      <h2 class="shv__h1">Wij bouwen<br><em>digitale</em> ankers.</h2>
      <p class="shv__lead">Strategie, design en engineering onder één dak. Geen ruis, geen sjablonen. Alleen werk dat blijft staan.</p>
      <div class="shv__cta">
        <a href="#" class="shv__btn shv__btn--solid">Start een project<span>→</span></a>
        <a href="#" class="shv__btn shv__btn--ghost">Bekijk werk</a>
      </div>
    </div>
    <div class="shv__col shv__visual" data-shv-par>
      <div class="shv__frame">
        <div class="shv__grid"></div>
        <span class="shv__tag">/ live deploy</span>
        <span class="shv__num">98</span>
        <span class="shv__numlabel">Lighthouse · gemiddeld over 40+ sites</span>
      </div>
    </div>
  </div>
</section>
</div>

/* Split hero: tekst links, beeld rechts · NedDev · eigen werk. */
.shv{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.shv__inner{max-width:900px;margin:0 auto;padding:54px 28px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:440px;box-sizing:border-box}
.shv__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#F5480F;display:block;margin-bottom:20px}
.shv__h1{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(34px,5vw,54px);line-height:.96;letter-spacing:-.02em;margin:0 0 20px}
.shv__h1 em{font-style:italic;color:#F5480F}
.shv__lead{font-family:'Switzer',sans-serif;font-size:16px;line-height:1.55;color:#444;max-width:34ch;margin:0 0 30px}
.shv__cta{display:flex;gap:12px;flex-wrap:wrap}
.shv__btn{font-family:'Switzer',sans-serif;font-weight:600;font-size:14px;padding:13px 22px;border-radius:2px;text-decoration:none;display:inline-flex;gap:8px;align-items:center;transition:transform .25s ease,background .25s ease}
.shv__btn--solid{background:#0a0a0a;color:#fff}
.shv__btn--solid span{transition:transform .25s ease}
.shv__btn--solid:hover{background:#F5480F}.shv__btn--solid:hover span{transform:translateX(4px)}
.shv__btn--ghost{background:transparent;color:#0a0a0a;border:1px solid rgba(10,10,10,.12)}
.shv__btn--ghost:hover{background:#f4f3f1}
.shv__visual{position:relative;will-change:transform}
.shv__frame{position:relative;background:#0a0a0a;border-radius:6px;aspect-ratio:4/5;overflow:hidden;padding:26px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end}
.shv__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:34px 34px}
.shv__tag{position:absolute;top:22px;left:22px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#F5480F;letter-spacing:.1em}
.shv__num{font-family:'Boldonse',sans-serif;font-size:88px;line-height:.8;color:#fff;position:relative}
.shv__numlabel{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.08em;margin-top:10px}
@media(max-width:720px){.shv__inner{grid-template-columns:1fr;gap:28px;padding:38px 20px}.shv__visual{order:-1}}

// Split hero: tekst links, beeld rechts · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.shv')||root;
var par=root.querySelector('[data-shv-par]');
if(par && !matchMedia('(prefers-reduced-motion: reduce)').matches){
  var onScroll=function(){var r=root.getBoundingClientRect();var p=(r.top/window.innerHeight);par.style.transform='translateY('+(p*-22)+'px)';};
  (root.scrollParent||window).addEventListener('scroll',onScroll,{passive:true});
  window.addEventListener('scroll',onScroll,{passive:true});onScroll();
}
}
init(document.querySelector('.jouw-container'));