<!-- Features Grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
  <div class="card text-center fade-in">
    <div class="text-5xl text-blue-600 mb-4">
      <i class="fas fa-calendar-check"></i>
    </div>
    <h3 class="text-xl font-semibold mb-2">Smart Booking</h3>
    <p class="text-gray-600">Select time slots, pay securely, get instant confirmation</p>
  </div>
  
  <div class="card text-center fade-in">
    <div class="text-5xl text-green-600 mb-4">
      <i class="fas fa-shield-alt"></i>
    </div>
    <h3 class="text-xl font-semibold mb-2">Algerian Payments</h3>
    <p class="text-gray-600">Support for Edahabia, CIB, and all major cards</p>
  </div>
  
  <div class="card text-center fade-in">
    <div class="text-5xl text-purple-600 mb-4">
      <i class="fas fa-bolt"></i>
    </div>
    <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
    <p class="text-gray-600">Built on Cloudflare Workers for global performance</p>
  </div>
  
  <div class="card text-center fade-in">
    <div class="text-5xl text-red-600 mb-4">
      <i class="fas fa-heart"></i>
    </div>
    <h3 class="text-xl font-semibold mb-2">User Focused</h3>
    <p class="text-gray-600">Designed with Algerian users in mind</p>
  </div>
  
  <div class="card text-center fade-in">
    <div class="text-5xl text-yellow-600 mb-4">
      <i class="fas fa-cogs"></i>
    </div>
    <h3 class="text-xl font-semibold mb-2">Automated</h3>
    <p class="text-gray-600">Smart cleanup and confirmation system</p>
  </div>
</div>

<!-- How It Works -->
<div class="mb-16">
  <h2 class="text-3xl font-bold text-white text-center mb-8 fade-in">
    <i class="fas fa-cogs mr-3"></i>
    How It Works
  </h2>
  
  <div class="grid md:grid-cols-4 gap-6">
    <div class="text-center fade-in">
      <div class="text-3xl text-blue-600 mb-4">1</div>
      <h4 class="font-semibold">Select Time</h4>
      <p class="text-gray-600">Choose your preferred slot</p>
    </div>
    
    <div class="text-center fade-in">
      <div class="text-3xl text-blue-600 mb-4">2</div>
      <h4 class="font-semibold">Pay & Book</h4>
      <p class="text-gray-600">Secure payment with Algerian methods</p>
    </div>
    
    <div class="text-center fade-in">
      <div class="text-3xl text-green-600 mb-4">3</div>
      <h4 class="font-semibold">Instant Confirm</h4>
      <p class="text-gray-600">Automatic booking activation</p>
    </div>
    
    <div class="text-center fade-in">
      <div class="text-3xl text-purple-600 mb-4">4</div>
      <h4 class="font-semibold">Receive Details</h4>
      <p class="text-gray-600">Calendar invitation with meeting link</p>
    </div>
  </div>
</div>

<!-- CTA -->
<div class="text-center mb-16">
  <a href="/booking/" class="btn-primary">
    <i class="fas fa-calendar-plus mr-2"></i>
    Book Your Discovery Call Now
  </a>
</div>