@props(['eyebrow', 'title', 'subtitle' => null])

<section class="relative overflow-hidden bg-navy text-bone">
    <div class="pointer-events-none absolute -top-32 -right-32 h-[500px] w-[500px] rounded-full bg-gold/10 blur-3xl"></div>
    <div class="mx-auto max-w-7xl px-6 pt-20 pb-16 md:pt-28 md:pb-20">
        <span class="font-mono text-[10px] font-medium uppercase tracking-widest text-gold">
            {{ $eyebrow }}
        </span>
        <h1 class="mt-4 max-w-4xl font-display text-5xl leading-[1.05] tracking-tight text-balance md:text-7xl">
            {!! $title !!}
        </h1>
        @if($subtitle)
            <p class="mt-6 max-w-3xl text-lg leading-relaxed text-bone/80 text-pretty">
                {!! $subtitle !!}
            </p>
        @endif
        {{ $slot ?? '' }}
    </div>
</section>