src/components/hero/HeroBold.astro
---
// HeroBold, recovered from blurr-components.pages.dev
---
<section class="hbo hbo--light"> <div class="hbo-inner"> <h1 class="hbo-headline"> Meer leads. <em class="hbo-accent"> Meer omzet.</em> </h1> <p class="hbo-sub">Data-gedreven marketing die écht werkt.</p> <a href="#" class="hbo-cta">Gratis gesprek →</a> </div> </section>
<style>
.hbo{padding:6rem 2rem 5rem;overflow:hidden}
.hbo--light{background:#fff;color:#0a0a0a}
.hbo--dark{background:#0a0a0a;color:#fff}
.hbo-inner{max-width:1200px;margin:0 auto}
.hbo-headline{font-size:clamp(3.5rem, 5vw, 5rem);font-weight:900;line-height:.95;letter-spacing:-.04em;margin:0 0 2rem}
.hbo-accent{font-style:italic;color:var(--color-accent, #6366f1)}
.hbo-sub{font-size:1.125rem;color:#6b7280;max-width:520px;line-height:1.65;margin-bottom:2.5rem}
.hbo--dark .hbo-sub{color:#ffffff80}
.hbo-cta{display:inline-flex;align-items:center;font-size:1rem;font-weight:600;color:var(--color-accent, #6366f1);text-decoration:none}
.hbo-cta:hover{gap:.25rem}
</style>