---
---

<section class="relative py-32 md:py-48 px-8 md:px-16 bg-[#080a09] text-white overflow-hidden -mt-px">
  <!-- Video Background -->
  <div class="absolute inset-0 z-0">
    <video 
      autoplay 
      muted 
      loop 
      playsinline
      class="w-full h-full object-cover opacity-40 saturate-150 contrast-125 brightness-110 parallax-video scale-125"
    >
      <source src="/videos/features-ambient.mp4" type="video/mp4">
    </video>
    <!-- Richer overlays -->
    <div class="absolute inset-0 bg-gradient-to-b from-[#080a09] via-transparent to-[#080a09] opacity-80"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-accent/5 opacity-50"></div>
    <div class="absolute inset-0 bg-[#080a09]/40"></div>
  </div>

  <div class="max-w-7xl mx-auto relative z-10">
    
    <!-- SECTION: FEATURES -->
    <div>
      <div class="text-center mb-24">
        <p class="text-mono tracking-ultra text-white/40 mb-6 font-bold uppercase">005 / The Platform</p>
        <h2 class="heading-serif text-5xl md:text-7xl text-white mb-8 tracking-tight">
          Everything you need
        </h2>
      </div>
      
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Feature 1 -->
        <div class="bg-white/[0.03] backdrop-blur-xl p-12 border border-white/10 rounded-3xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group shadow-xl relative overflow-hidden">
          <div class="absolute top-0 right-0 w-32 h-32 bg-accent/5 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-accent/10 transition-colors"></div>
          <div class="w-12 h-12 mb-8 text-white/30 group-hover:text-accent transition-all duration-300 group-hover:scale-110 drop-shadow-[0_0_15px_rgba(0,255,136,0)] group-hover:drop-shadow-[0_0_15px_rgba(0,255,136,0.3)]">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
            </svg>
          </div>
          <h3 class="text-2xl text-white mb-4 font-serif">Natural Language Queries</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Ask anything in plain English. No dashboards to navigate. No filters to configure. Just ask questions like you would to a colleague.</p>
        </div>
        
        <!-- Feature 2 -->
        <div class="bg-white/[0.03] backdrop-blur-xl p-12 border border-white/10 rounded-3xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group shadow-xl relative overflow-hidden">
          <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-blue-500/10 transition-colors"></div>
          <div class="w-12 h-12 mb-8 text-white/30 group-hover:text-accent transition-all duration-300 group-hover:scale-110 drop-shadow-[0_0_15px_rgba(0,255,136,0)] group-hover:drop-shadow-[0_0_15px_rgba(0,255,136,0.3)]">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
            </svg>
          </div>
          <h3 class="text-2xl text-white mb-4 font-serif">Proactive Alerts</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Get notified about opportunities. Revenue leaks, route inefficiencies, and unscheduled high-value jobs are brought to your attention automatically.</p>
        </div>
        
        <!-- Feature 3 -->
        <div class="bg-white/[0.03] backdrop-blur-xl p-12 border border-white/10 rounded-3xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group shadow-xl relative overflow-hidden">
          <div class="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-purple-500/10 transition-colors"></div>
          <div class="w-12 h-12 mb-8 text-white/30 group-hover:text-accent transition-all duration-300 group-hover:scale-110 drop-shadow-[0_0_15px_rgba(0,255,136,0)] group-hover:drop-shadow-[0_0_15px_rgba(0,255,136,0.3)]">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 7m0 13V7"></path>
            </svg>
          </div>
          <h3 class="text-2xl text-white mb-4 font-serif">Route Optimization</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Maximize technician efficiency. See where your team is and where they should be to capture the most revenue with the least drive time.</p>
        </div>
        
        <!-- Feature 4 -->
        <div class="bg-white/[0.03] backdrop-blur-xl p-12 border border-white/10 rounded-3xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group shadow-xl relative overflow-hidden">
          <div class="absolute top-0 right-0 w-32 h-32 bg-accent/5 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-accent/10 transition-colors"></div>
          <div class="w-12 h-12 mb-8 text-white/30 group-hover:text-accent transition-all duration-300 group-hover:scale-110 drop-shadow-[0_0_15px_rgba(0,255,136,0)] group-hover:drop-shadow-[0_0_15px_rgba(0,255,136,0.3)]">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <h3 class="text-2xl text-white mb-4 font-serif">Revenue Recovery</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Find hidden value in your CRM. Identify past customers due for service or high-value quotes that haven't been followed up on.</p>
        </div>
        
        <!-- Feature 5 -->
        <div class="bg-white/[0.03] backdrop-blur-xl p-12 border border-white/10 rounded-3xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group shadow-xl relative overflow-hidden">
          <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-blue-500/10 transition-colors"></div>
          <div class="w-12 h-12 mb-8 text-white/30 group-hover:text-accent transition-all duration-300 group-hover:scale-110 drop-shadow-[0_0_15px_rgba(0,255,136,0)] group-hover:drop-shadow-[0_0_15px_rgba(0,255,136,0.3)]">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
          <h3 class="text-2xl text-white mb-4 font-serif">Zero Setup</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Connects to your existing Service Titan instance in minutes. No complex configuration or training required for your team.</p>
        </div>
        
        <!-- Feature 6 -->
        <div class="bg-white/[0.03] backdrop-blur-xl p-12 border border-white/10 rounded-3xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group shadow-xl relative overflow-hidden">
          <div class="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-purple-500/10 transition-colors"></div>
          <div class="w-12 h-12 mb-8 text-white/30 group-hover:text-accent transition-all duration-300 group-hover:scale-110 drop-shadow-[0_0_15px_rgba(0,255,136,0)] group-hover:drop-shadow-[0_0_15px_rgba(0,255,136,0.3)]">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
          </div>
          <h3 class="text-2xl text-white mb-4 font-serif">Secure & Private</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Enterprise-grade security. Your data stays protected and is used only to generate insights for your specific business.</p>
        </div>
      </div>
    </div>

  </div>
</section>