src/components/heading/HeadingHighlight.astro
---
// HeadingHighlight, recovered from blurr-components.pages.dev
---
<div class="hd-highlight"> <h2 class="hd-highlight__title"> <span>Wij leveren </span> <mark class="hd-highlight__mark">aantoonbare groei</mark> <span> voor jouw bedrijf.</span> </h2> <p class="hd-highlight__sub">Geen vage beloften, alleen concrete resultaten.</p> </div>
<style>
.hd-highlight{padding:2.5rem 0;max-width:720px}
.hd-highlight__title{margin:0 0 1rem;font-size:clamp(2rem,5vw,3.25rem);font-weight:800;color:var(--color-primary);line-height:1.2;letter-spacing:-.02em}
.hd-highlight__mark{background:linear-gradient(to bottom,transparent 55%,rgba(99,102,241,.25) 55%);color:inherit;padding:0 .1em}
.hd-highlight__sub{margin:0;font-size:1.05rem;color:#555;line-height:1.65}
</style>