src/components/heading/HeadingGradient.astro
---
// HeadingGradient, recovered from blurr-components.pages.dev
---
<div class="hd-gradient"> <span class="hd-gradient__eyebrow">Over ons</span> <h2 class="hd-gradient__title">Resultaten die spreken</h2> <p class="hd-gradient__sub">Data-gedreven marketing die jouw omzet laat groeien.</p> </div>
<style>
.hd-gradient{padding:2.5rem 0;text-align:center}
.hd-gradient__eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.75rem}
.hd-gradient__title{margin:0 0 1rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;background:linear-gradient(135deg,var(--color-accent) 0%,#a855f7 50%,#ec4899 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}
.hd-gradient__sub{margin:0 auto;max-width:520px;font-size:1.05rem;color:#555;line-height:1.65}
</style>