HowItWorks Sections

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

<section class="hiw-section"> <div class="hiw-head"> <h2 class="hiw-headline">Zo werkt het</h2> <p class="hiw-sub">In drie stappen naar meetbare groei.</p> </div> <div class="hiw-steps"> <div class="hiw-step"> <div class="hiw-step-top"> <div class="hiw-step-num">01</div> <div class="hiw-connector"></div> </div> <div class="hiw-step-body"> <span class="hiw-step-icon">→</span> <h3 class="hiw-step-title">Strategiegesprek</h3> <p class="hiw-step-desc">We leren jouw business kennen en bepalen de beste aanpak.</p> </div> </div><div class="hiw-step"> <div class="hiw-step-top"> <div class="hiw-step-num">02</div> <div class="hiw-connector"></div> </div> <div class="hiw-step-body"> <span class="hiw-step-icon">→</span> <h3 class="hiw-step-title">Campagne lancering</h3> <p class="hiw-step-desc">Binnen 10 werkdagen live met een bewezen campagnestructuur.</p> </div> </div><div class="hiw-step"> <div class="hiw-step-top"> <div class="hiw-step-num">03</div>  </div> <div class="hiw-step-body"> <span class="hiw-step-icon">→</span> <h3 class="hiw-step-title">Groei &amp; optimalisatie</h3> <p class="hiw-step-desc">Continu bijsturen op basis van data voor maximale ROI.</p> </div> </div> </div> </section>

<style>
.hiw-section{--color-accent: #6366f1;--color-primary: #0a0a0a;padding:72px 24px;font-family:system-ui,sans-serif;max-width:1100px;margin:0 auto}
.hiw-head{text-align:center;max-width:560px;margin:0 auto 56px;display:flex;flex-direction:column;gap:12px}
.hiw-headline{margin:0;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:900;color:var(--color-primary);letter-spacing:-.025em}
.hiw-sub{margin:0;font-size:1rem;line-height:1.65;color:#6b7280}
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hiw-steps{grid-template-columns:1fr 1fr}
.hiw-steps{grid-template-columns:1fr}
.hiw-step{display:flex;flex-direction:column;gap:16px}
.hiw-step-top{display:flex;align-items:center;gap:0}
.hiw-step-num{width:44px;height:44px;border-radius:50%;background:var(--color-accent);color:#fff;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px #6366f14d}
.hiw-connector{flex:1;height:2px;background:linear-gradient(90deg,var(--color-accent),#e5e7eb);margin-left:4px}
.hiw-connector{display:none}
.hiw-step-body{display:flex;flex-direction:column;gap:8px}
.hiw-step-icon{font-size:1.5rem}
.hiw-step-title{margin:0;font-size:1rem;font-weight:700;color:var(--color-primary)}
.hiw-step-desc{margin:0;font-size:.875rem;line-height:1.65;color:#6b7280}
</style>