---
---

<section class="relative py-32 md:py-48 px-8 md:px-16 lg:px-24 bg-[#080a09] overflow-hidden -mb-1">
  <!-- Full Background Video -->
  <div class="absolute top-0 left-0 w-full h-[105%] z-0">
    <video 
      autoplay 
      muted 
      loop 
      playsinline
      class="w-full h-full object-cover opacity-60 saturate-150 contrast-125 brightness-100 parallax-video-bg scale-110"
    >
      <source src="/videos/features-ambient.mp4" type="video/mp4">
    </video>
    <!-- Left-weighted overlay for text readability with deep tint -->
    <div class="absolute inset-0 bg-gradient-to-r from-[#080a09] via-[#080a09]/80 to-blue-900/20"></div>
    <div class="absolute inset-0 bg-[#080a09]/30"></div>
    <!-- Bottom fade to blend with next section -->
    <div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#080a09] to-transparent"></div>
  </div>
  
  <!-- Content Overlay -->
  <div class="relative z-10 grid lg:grid-cols-2 gap-16 items-center">
    
    <!-- Left: Headline & Copy -->
    <div>
      <div class="flex items-center gap-4 mb-8">
        <span class="text-mono text-accent text-xs tracking-ultra uppercase border border-accent/30 px-3 py-1 rounded-full bg-accent/10 backdrop-blur-sm">001 / The New Standard</span>
      </div>

      <h2 class="heading-serif text-white mb-8 leading-[0.95] tracking-tight text-[clamp(3.5rem,6vw,5.5rem)]">
        We amplify your<br/>Service Titan.
      </h2>

      <p class="text-white/70 text-lg leading-relaxed mb-12 max-w-xl font-light">
        Most Service Titan users only scratch the surface of their CRM. We connect AI directly to your data, turning complex queries into simple conversations.
      </p>
      
      <div class="h-px w-24 bg-accent/50"></div>
    </div>

    <!-- Right: Interactive Feature Stack -->
    <div class="relative space-y-4">
      <!-- Vertical Connector Line -->
      <div class="absolute left-8 top-8 bottom-8 w-px bg-gradient-to-b from-transparent via-white/20 to-transparent"></div>

      <!-- Item 1 -->
      <div class="relative group">
        <div class="absolute left-8 top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-3 bg-[#080a09] border-2 border-white/20 rounded-full z-10 group-hover:border-accent group-hover:scale-125 transition-all duration-300"></div>
        <div class="ml-16 bg-white/[0.03] backdrop-blur-xl border border-white/10 p-6 rounded-2xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 hover:-translate-y-1 shadow-lg">
          <div class="flex justify-between items-start mb-2">
            <h3 class="text-xl text-white font-serif">Natural Language</h3>
            <span class="text-mono text-[10px] text-white/30">01</span>
          </div>
          <p class="text-white/50 text-sm font-light">Query your database as easily as asking a question.</p>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative group">
        <div class="absolute left-8 top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-3 bg-[#080a09] border-2 border-white/20 rounded-full z-10 group-hover:border-accent group-hover:scale-125 transition-all duration-300"></div>
        <div class="ml-16 bg-white/[0.03] backdrop-blur-xl border border-white/10 p-6 rounded-2xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 hover:-translate-y-1 shadow-lg">
          <div class="flex justify-between items-start mb-2">
            <h3 class="text-xl text-white font-serif">Revenue Alerts</h3>
            <span class="text-mono text-[10px] text-white/30">02</span>
          </div>
          <p class="text-white/50 text-sm font-light">Spot leaks and opportunities before they vanish.</p>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative group">
        <div class="absolute left-8 top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-3 bg-[#080a09] border-2 border-white/20 rounded-full z-10 group-hover:border-accent group-hover:scale-125 transition-all duration-300"></div>
        <div class="ml-16 bg-white/[0.03] backdrop-blur-xl border border-white/10 p-6 rounded-2xl hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 hover:-translate-y-1 shadow-lg">
          <div class="flex justify-between items-start mb-2">
            <h3 class="text-xl text-white font-serif">Optimization</h3>
            <span class="text-mono text-[10px] text-white/30">03</span>
          </div>
          <p class="text-white/50 text-sm font-light">Route technicians for maximum profit, not just proximity.</p>
        </div>
      </div>

    </div>
  </div>
</section>
