HeadingDark heading

---
/**
 * HeadingDark — gecentreerde sectiekop als donkere, afgeronde kaart.
 * Eyebrow, titel en sub op een diepe achtergrond.
 *
 * Props:
 * - eyebrow?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  eyebrow?: string;
  title?: string;
  sub?: string;
}

const { eyebrow, title, sub } = Astro.props;
---

<section class="bl-section hd-dark-section">
  <div class="bl-inner">
    <div class="hd-dark">
      {eyebrow && <span class="hd-dark__eyebrow">{eyebrow}</span>}
      {title && <h2 class="hd-dark__title">{title}</h2>}
      {sub && <p class="hd-dark__sub">{sub}</p>}
    </div>
  </div>
</section>

<style>
.hd-dark{background:#0a0a0a;padding:4rem 2.5rem;text-align:center;border-radius:1rem}
.hd-dark__eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.75rem}
.hd-dark__title{margin:0 0 1rem;font-size:clamp(2rem,5vw,3.25rem);font-weight:800;line-height:1.1;color:#fff;letter-spacing:-.02em}
.hd-dark__sub{margin:0;font-size:1.0625rem;color:#aaa;line-height:1.65}
</style>