IconProcess icon

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

<section class="iprc"> <h2 class="iprc__title">Zo werken wij</h2> <div class="iprc__steps"> <div class="iprc__step"> <div class="iprc__head"> <div class="iprc__icon-wrap" aria-hidden="true"> <span class="iprc__icon">→</span> <span class="iprc__num">1</span> </div> <span class="iprc__connector" aria-hidden="true"></span> </div> <h3 class="iprc__name">Kennismaking</h3> <p class="iprc__body">Gratis strategiegesprek van 45 minuten, zonder verkooppraatje.</p> </div><div class="iprc__step"> <div class="iprc__head"> <div class="iprc__icon-wrap" aria-hidden="true"> <span class="iprc__icon"></span> <span class="iprc__num">2</span> </div> <span class="iprc__connector" aria-hidden="true"></span> </div> <h3 class="iprc__name">Strategie</h3> <p class="iprc__body">We maken een groeiplan op maat met concrete doelen en budget.</p> </div><div class="iprc__step"> <div class="iprc__head"> <div class="iprc__icon-wrap" aria-hidden="true"> <span class="iprc__icon">→</span> <span class="iprc__num">3</span> </div> <span class="iprc__connector" aria-hidden="true"></span> </div> <h3 class="iprc__name">Lancering</h3> <p class="iprc__body">Campagnes live in 5 werkdagen, inclusief alle creatives.</p> </div><div class="iprc__step"> <div class="iprc__head"> <div class="iprc__icon-wrap" aria-hidden="true"> <span class="iprc__icon">→</span> <span class="iprc__num">4</span> </div>  </div> <h3 class="iprc__name">Optimalisatie</h3> <p class="iprc__body">Wekelijkse aanpassingen op basis van data en resultaten.</p> </div> </div> </section>

<style>
.iprc{padding:3rem 0}
.iprc__title{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--color-primary, #0a0a0a);text-align:center;margin:0 0 3rem}
.iprc__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.iprc__step{text-align:center;padding:0 1rem}
.iprc__head{display:flex;align-items:center;justify-content:center;margin-bottom:1rem;position:relative}
.iprc__icon-wrap{position:relative;width:64px;height:64px;border-radius:50%;background:#f0f0ff;border:2px solid rgba(99,102,241,.25);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;z-index:1}
.iprc__num{position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:var(--color-accent, #6366f1);color:#fff;border-radius:50%;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.iprc__connector{flex:1;height:2px;background:#e0e0f0;margin-left:.5rem}
.iprc__name{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.iprc__body{font-size:.85rem;color:#777;line-height:1.6;margin:0}
.iprc__steps{grid-template-columns:1fr 1fr;gap:2rem}
.iprc__connector{display:none}
.iprc__steps{grid-template-columns:1fr}
</style>