<section id="cta" class="h-screen w-full bg-gray-900 text-white flex items-center">
  <div class="max-w-4xl mx-auto px-4 text-center">
    <h2 class="text-4xl font-light text-white mb-8" data-aos="fade-up">
      {{ sections.cta.title }}
      {% if sections.cta.highlight %}
      <span class="block text-white/80">{{ sections.cta.highlight }}</span>
      {% endif %}
    </h2>
    
    <p class="text-xl text-white/70 mb-12 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
      {{ sections.cta.description }}
    </p>
    
    {% if sections.cta.buttons %}
    <div class="space-x-4" data-aos="fade-up" data-aos-delay="200">
      {% 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-medium hover:opacity-80 transition-opacity">
        {{ button.label }}
      </a>
      {% endfor %}
    </div>
    {% endif %}
    
    {% if sections.cta.trustIndicators %}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 pt-12 border-t border-white/10" data-aos="fade-up" data-aos-delay="300">
      {% 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">{{ indicator.label }}</div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</section>
