<section id="cta" class="py-24 bg-gray-900 text-white">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <div class="space-y-8" data-aos="fade-up">
      {% if sections.cta.badge %}
      <div class="inline-flex items-center bg-white/10 backdrop-blur-sm border border-white/20 px-4 py-2">
        <span class="w-2 h-2 bg-white mr-3"></span>
        <span class="text-white/90 text-xs uppercase tracking-widest font-light">{{ sections.cta.badge }}</span>
      </div>
      {% endif %}
      
      <h2 class="text-4xl md:text-5xl font-light text-white leading-tight">
        {{ sections.cta.title }}
        {% if sections.cta.highlight %}
        <span class="block text-white/80">{{ sections.cta.highlight }}</span>
        {% endif %}
      </h2>
      
      <div class="w-16 h-px bg-white/30 mx-auto"></div>
      
      <p class="text-xl text-white/70 max-w-2xl mx-auto font-light leading-relaxed">
        {{ sections.cta.description }}
      </p>
      
      {% if sections.cta.buttons %}
      <div class="flex flex-col sm:flex-row gap-6 justify-center pt-4">
        {% for button in sections.cta.buttons %}
        <a href="{{ button.url }}" 
           class="inline-block bg-white text-gray-900 px-8 py-3 text-sm font-light tracking-widest uppercase hover:bg-gray-100 transition-colors duration-300">
          {{ button.label }}
        </a>
        {% endfor %}
      </div>
      {% endif %}
      
      {% if sections.cta.trustIndicators %}
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 pt-16 border-t border-white/10">
        {% for indicator in sections.cta.trustIndicators %}
        <div class="text-center">
          <div class="text-3xl font-light text-white mb-2">{{ indicator.value }}</div>
          <div class="text-white/60 text-sm font-light uppercase tracking-wide">{{ indicator.label }}</div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</section>