{{-- Expects: $title, $updated (version/date line, already fully composed) --}}
<section class="relative overflow-hidden">
    <div class="pointer-events-none absolute inset-0 bg-grid-slate [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black,transparent)]" aria-hidden="true"></div>

    <div class="relative mx-auto max-w-3xl px-4 pt-36 pb-12 text-center sm:px-6 sm:pt-44 sm:pb-16">
        <p class="animate-fade-in-up inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-1.5 text-sm font-medium text-emerald-700 dark:border-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400">
            🇪🇺 {{ __('Nederlands recht, EU-hosting') }}
        </p>
        <h1 class="animate-fade-in-up mt-8 text-4xl font-bold tracking-tight text-balance text-slate-900 [animation-delay:100ms] sm:text-5xl dark:text-white">
            {{ $title }}
        </h1>
        <p class="animate-fade-in-up mt-5 text-sm text-slate-500 [animation-delay:200ms] dark:text-slate-400">
            {{ $updated }}
        </p>
    </div>
</section>