HeadingAccent heading

---
/**
 * HeadingAccent — heading-blok op een volvlak accent-achtergrond.
 * Eyebrow, titel en sub. Links uitgelijnd op de rail.
 *
 * Props:
 * - eyebrow?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  eyebrow?: string;
  title?: string;
  sub?: string;
}

const {
  eyebrow = 'Aanbieding',
  title = 'Start vandaag nog',
  sub = 'Boek een gratis strategiegesprek en ontdek jouw groeipotentieel.',
} = Astro.props;
---

<section class="bl-section hd-accent-section">
  <div class="bl-inner hd-accent">
    {eyebrow && <span class="hd-accent__eyebrow">{eyebrow}</span>}
    <h2 class="hd-accent__title">{title}</h2>
    {sub && <p class="hd-accent__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-accent{background:var(--color-accent);padding:3rem 2.5rem;border-radius:1rem}
.hd-accent__eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffffffb3;margin-bottom:.75rem}
.hd-accent__title{margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.02em}
.hd-accent__sub{margin:0;max-width:480px;font-size:1.05rem;color:#fffc;line-height:1.65}
</style>