IconBento icon

---
// IconBento, recovered from blurr-components.pages.dev
---

<section class="ib__section"> <div class="ib__header"> <p class="ib__eyebrow">Onze kracht</p> <h2 class="ib__headline">Wat ons anders maakt</h2> </div> <div class="ib__grid"> <div class="ib__card ib__card--wide ib__card--accent" style="--delay: 0ms"> <span class="ib__icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></span> <p class="ib__title">Data-first</p> <p class="ib__desc">Elke beslissing is gebaseerd op data, niet gevoel.</p> </div><div class="ib__card" style="--delay: 90ms"> <span class="ib__icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span> <p class="ib__title">Snel resultaat</p> <p class="ib__desc">Eerste leads binnen 2 weken.</p> </div><div class="ib__card ib__card--dark" style="--delay: 180ms"> <span class="ib__icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></span> <p class="ib__title">Transparant</p> <p class="ib__desc">Je ziet exact waar je budget naartoe gaat.</p> </div><div class="ib__card" style="--delay: 270ms"> <span class="ib__icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></span> <p class="ib__title">Dedicated team</p> <p class="ib__desc">Jouw vaste specialist, niet steeds iemand anders.</p> </div><div class="ib__card ib__card--wide" style="--delay: 360ms"> <span class="ib__icon-wrap" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></span> <p class="ib__title">Schaalbaar</p> <p class="ib__desc">Groeit mee met jouw ambitie, van startup tot enterprise.</p> </div> </div> </section>

<style>
.ib__section{padding:5rem 1.5rem;max-width:72rem;margin-inline:auto}
.ib__header{text-align:center;margin-bottom:2.5rem}
.ib__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin:0 0 .75rem}
.ib__headline{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:var(--color-primary);margin:0;line-height:1.15}
.ib__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}
.ib__card{border-radius:1rem;padding:1.5rem;border:1px solid rgba(0,0,0,.08);background:var(--color-bg);display:flex;flex-direction:column;gap:.75rem;opacity:0;transform:translateY(16px);transition:box-shadow .22s ease}
.ib__card:hover{box-shadow:0 6px 20px #00000012}
.ib__card--visible{animation:ib-fadein .5s ease forwards;animation-delay:var(--delay, 0ms)}
.ib__card--wide{grid-column:span 2}
.ib__card--tall{grid-row:span 2}
.ib__card--accent{background:#6366f10f;border-color:#6366f126}
.ib__card--dark{background:#0a0a0a;border-color:transparent}
.ib__card--dark .ib__title{color:#fff}
.ib__card--dark .ib__desc{color:#ffffff8c}
.ib__card--dark .ib__icon-wrap{color:#fff}
.ib__icon-wrap{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--color-accent)}
.ib__card--accent .ib__icon-wrap{color:var(--color-accent)}
.ib__icon-wrap svg{width:100%;height:100%}
.ib__title{font-size:1.0625rem;font-weight:700;color:var(--color-primary);margin:0;line-height:1.3}
.ib__desc{font-size:.9rem;color:var(--color-muted);margin:0;line-height:1.65}
.ib__grid{grid-template-columns:1fr}
.ib__card--wide,.ib__card--tall{grid-column:1;grid-row:auto}
</style>