HeadingCentered heading

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

<section class="hcn__section hcn__align-center hcn__size-lg"> <div class="hcn__inner" style="max-width: 640px"> <span class="hcn__eyebrow"> Onze diensten <span class="hcn__divider" aria-hidden="true"></span> </span> <h2 class="hcn__headline">Alles wat je nodig hebt om <em>online</em> te groeien</h2> <p class="hcn__sub">Van zoekmachine advertenties tot volledig beheerde social media campagnes, wij leveren resultaten die meetbaar zijn.</p> </div> </section>

<style>
.hcn__section{padding:5rem 1.5rem;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.hcn__section.hcn--visible{opacity:1;transform:translateY(0)}
.hcn__align-center{text-align:center}
.hcn__align-left{text-align:left}
.hcn__inner{margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.hcn__align-center .hcn__inner{align-items:center}
.hcn__align-left .hcn__inner{align-items:flex-start}
.hcn__eyebrow{display:flex;flex-direction:column;align-items:inherit;gap:.75rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.hcn__divider{display:block;width:40px;height:3px;background:var(--color-accent);border-radius:2px}
.hcn__headline{margin:0;font-weight:800;letter-spacing:-.02em;color:var(--color-primary);line-height:1.1}
.hcn__headline em{font-style:italic;color:var(--color-accent)}
.hcn__size-sm .hcn__headline{font-size:clamp(1.5rem,3vw,2rem)}
.hcn__size-md .hcn__headline{font-size:clamp(2rem,4vw,3.5rem)}
.hcn__size-lg .hcn__headline{font-size:clamp(2.5rem,5vw,4rem)}
.hcn__size-xl .hcn__headline{font-size:clamp(2.5rem,6vw,5rem)}
.hcn__sub{margin:0;font-size:1.125rem;line-height:1.7;color:var(--color-muted);max-width:580px}
</style>