ContentSteps Sections

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

<section class="cst-wrap"> <h2 class="cst-heading">Zo werkt BLURR</h2> <ol class="cst-list"> <li class="cst-item"> <div class="cst-number">1</div> <div class="cst-body"> <h3 class="cst-title">Intake &amp; strategie</h3> <p class="cst-desc">We beginnen met een diepgaande intake.</p> </div> </li><li class="cst-item"> <div class="cst-number">2</div> <div class="cst-body"> <h3 class="cst-title">Creatie &amp; productie</h3> <p class="cst-desc">Ons team zet de strategie om in campagnes.</p> </div> </li><li class="cst-item"> <div class="cst-number">3</div> <div class="cst-body"> <h3 class="cst-title">Activatie &amp; groei</h3> <p class="cst-desc">We lanceren, meten en optimaliseren continu.</p> </div> </li> </ol> </section>

<style>
.cst-wrap{padding:3rem 0;max-width:760px}
.cst-heading{font-size:2rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 2.5rem}
.cst-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.cst-item{display:flex;gap:2rem;position:relative;padding-bottom:2.5rem}
.cst-item:not(:last-child):before{content:"";position:absolute;left:1.5rem;top:3.5rem;bottom:0;width:2px;background:#e5e5e5}
.cst-number{width:3rem;height:3rem;border-radius:50%;background:var(--color-accent, #6366f1);color:#fff;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.cst-body{flex:1;padding-top:.5rem}
.cst-title{font-size:1.125rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.cst-desc{font-size:1rem;line-height:1.7;color:#555;margin:0}
</style>