src/components/heading/HeadingCenter.astro
---
// HeadingCenter, recovered from blurr-components.pages.dev
---
<div class="hcen"> <div class="hcen__dots" aria-hidden="true"> <span class="hcen__dot"></span> <span class="hcen__dot hcen__dot--accent"></span> <span class="hcen__dot"></span> </div> <p class="hcen__label">Onze aanpak</p> <h2 class="hcen__headline">Groei op autopilot</h2> <p class="hcen__sub">Wij nemen het campagnebeheer volledig over.</p> </div>
<style>
.hcen{text-align:center;padding:3rem 1.5rem 2rem;max-width:680px;margin:0 auto}
.hcen__dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:.75rem}
.hcen__dot{width:6px;height:6px;border-radius:50%;background:#d4d4d4}
.hcen__dot--accent{background:var(--color-accent, #6366f1);width:8px;height:8px}
.hcen__label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin:0 0 .75rem}
.hcen__headline{font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 .85rem;line-height:1.2;letter-spacing:-.025em}
.hcen__sub{font-size:1rem;color:#666;line-height:1.7;margin:0}
</style>