Feature grid in 3 kolommen

<!-- Feature grid in 3 kolommen · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="fg3">
  <div class="fg3__inner">
    <header class="fg3__head">
      <span class="fg3__eyebrow">/ wat we leveren</span>
      <h2 class="fg3__h2">Eén team. Hele stack.</h2>
    </header>
    <div class="fg3__grid">
      <article class="fg3__card"><span class="fg3__idx">01</span><h3>Strategie & SEO</h3><p>Marktdata, zoekwoorden en een plan dat ranked. Geen giswerk.</p><span class="fg3__more">Meer →</span></article>
      <article class="fg3__card"><span class="fg3__idx">02</span><h3>Design</h3><p>SOTA-2026 interfaces, op maat. Nul templates, nul AI-tells.</p><span class="fg3__more">Meer →</span></article>
      <article class="fg3__card"><span class="fg3__idx">03</span><h3>Engineering</h3><p>Next.js, Laravel, geharde infra. Gebouwd om te schalen.</p><span class="fg3__more">Meer →</span></article>
    </div>
  </div>
</section>
</div>

/* Feature grid in 3 kolommen · NedDev · eigen werk. */
.fg3{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.fg3__inner{max-width:900px;margin:0 auto;padding:52px 28px;box-sizing:border-box}
.fg3__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.fg3__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(30px,4.5vw,46px);line-height:.98;letter-spacing:-.02em;margin:14px 0 34px}
.fg3__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fg3__card{position:relative;border:1px solid rgba(10,10,10,.12);border-radius:4px;padding:26px 22px 22px;background:#fff;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;overflow:hidden}
.fg3__card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#F5480F;transform:scaleY(0);transform-origin:top;transition:transform .35s ease}
.fg3__card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -22px rgba(10,10,10,.4)}
.fg3__card:hover:before{transform:scaleY(1)}
.fg3__idx{font-family:'JetBrains Mono',monospace;font-size:12px;color:#bbb;letter-spacing:.1em}
.fg3__card h3{font-family:'Switzer',sans-serif;font-weight:600;font-size:19px;margin:30px 0 10px}
.fg3__card p{font-family:'Switzer',sans-serif;font-size:14px;line-height:1.55;color:#555;margin:0 0 22px}
.fg3__more{font-family:'JetBrains Mono',monospace;font-size:11px;color:#0a0a0a;letter-spacing:.06em}
.fg3__card:hover .fg3__more{color:#F5480F}
@media(max-width:720px){.fg3__grid{grid-template-columns:1fr}}