<section class="relative min-h-screen pt-20 overflow-hidden font-family-cinzel" id="hero">
  <div class="absolute inset-0 bg-cover bg-center font-family-cinzel" style="background-image: url('{{ sections.hero.heroImage.src }}');"></div>
  <div class="absolute inset-0 bg-gradient-to-r from-purple-900/90 to-transparent font-family-cinzel"></div>
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 font-family-cinzel">
    <div class="max-w-2xl font-family-cinzel">
      <h1 class="text-4xl sm:text-5xl md:text-6xl font-family-cinzel font-bold text-white leading-tight mb-6 tracking-wide text-left">{{ sections.hero.title }}</h1>
      <p class="text-lg sm:text-xl text-white/80 mb-8 font-family-cinzel leading-relaxed text-left">{{ sections.hero.description }}</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-start">
        <a href="{{ sections.hero.ctaButtons[0].url }}" class="inline-block px-8 py-3 bg-white text-purple-900 font-family-cinzel font-medium rounded-lg shadow-md hover:bg-purple-100 transition duration-300 ease-in-out" aria-label="{{ sections.hero.ctaButtons[0].label }}">{{ sections.hero.ctaButtons[0].label }}</a>
        <a href="{{ sections.hero.ctaButtons[1].url }}" class="inline-block px-8 py-3 bg-transparent border-2 border-white text-white font-family-cinzel font-medium rounded-lg shadow-md hover:bg-white/10 transition duration-300 ease-in-out" aria-label="{{ sections.hero.ctaButtons[1].label }}">{{ sections.hero.ctaButtons[1].label }}</a>
      </div>
    </div>
  </div>
</section>