<template>
    <section class="py-20 sm:py-24">
        <div class="relative mx-auto max-w-4xl overflow-hidden rounded-2xl bg-[var(--midnight-blue)] p-8 text-center text-white md:p-12">
            <div class="absolute -top-10 -left-10 h-40 w-40 rounded-full border-2 border-[var(--subtle-gold)]/20"></div>
            <div class="absolute -right-10 -bottom-10 h-40 w-40 rounded-full border-2 border-[var(--subtle-gold)]/20"></div>
            <h2 class="text-4xl font-bold md:text-5xl">Amplifiez Votre Oracle</h2>
            <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--linen)]">
                Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
            </p>
            <button
                class="mt-8 inline-flex h-12 max-w-[480px] min-w-[120px] flex-shrink-0 cursor-pointer items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-[var(--subtle-gold)]/30 hover:shadow-lg"
            >
                Réserver une Consultation
            </button>
        </div>
    </section>
</template>
