---
---

---
---

<section class="relative py-32 md:py-48 px-8 md:px-16 bg-[#080a09] overflow-hidden -mt-32 z-20">
  <!-- Ambient Background -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent/5 rounded-full blur-[150px] animate-pulse-slow"></div>
  </div>

  <div class="max-w-7xl mx-auto relative z-10">
    <div class="mb-24 flex flex-col md:flex-row md:items-end justify-between gap-8">
      <div>
        <p class="text-mono tracking-ultra text-white/40 mb-6 font-bold uppercase">006 / Real Results</p>
        <h2 class="heading-serif text-5xl md:text-7xl text-white tracking-tight">
          Trusted by the best
        </h2>
      </div>
      <div class="h-px flex-1 bg-white/10 hidden md:block mb-6 ml-12"></div>
    </div>
    
    <div class="grid lg:grid-cols-12 gap-8">
      
      <!-- LEFT: Massive Hero Testimonial (8 cols) -->
      <div class="lg:col-span-8 group">
        <div class="bg-white/[0.03] backdrop-blur-xl border border-white/10 p-10 md:p-16 rounded-[2.5rem] shadow-2xl relative overflow-hidden h-full flex flex-col justify-between hover:bg-white/[0.05] transition-all duration-700">
          <div class="absolute -top-12 -right-12 w-64 h-64 bg-accent/10 blur-[80px] rounded-full opacity-50"></div>
          
          <div>
            <div class="text-accent mb-8">
              <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.896 14.321 15.298 14.927 13.208C15.532 11.118 16.311 9.471 17.265 8.267C18.217 7.062 19.343 5.973 20.642 5L22 6.75C20.701 7.876 19.662 9.174 18.883 10.646C18.104 12.117 17.714 13.4 17.714 14.496C17.714 14.773 17.779 15.05 17.909 15.327C18.039 15.603 18.277 15.836 18.624 16.026C18.97 16.216 19.446 16.311 20.052 16.311C20.657 16.311 21.176 16.505 21.609 16.892C22.042 17.279 22.259 17.854 22.259 18.616C22.259 19.378 22.021 20.007 21.544 20.503C21.068 20.999 20.419 21.247 19.598 21.247C18.516 21.247 17.564 20.922 16.742 20.273C15.92 19.623 15.228 18.649 14.666 17.351L14.017 21ZM1.99996 21L1.99996 18C1.99996 16.896 2.30396 15.298 2.91096 13.208C3.51696 11.118 4.29596 9.471 5.24896 8.267C6.20096 7.062 7.32696 5.973 8.62596 5L9.98396 6.75C8.68496 7.876 7.64596 9.174 6.86696 10.646C6.08796 12.117 5.69796 13.4 5.69796 14.496C5.69796 14.773 5.76296 15.05 5.89296 15.327C6.02296 15.603 6.26096 15.836 6.60796 16.026C6.95396 16.216 7.42996 16.311 8.03596 16.311C8.64196 16.311 9.15996 16.505 9.59296 16.892C10.026 17.279 10.242 17.854 10.242 18.616C10.242 19.378 10.004 20.007 9.52796 20.503C9.05196 20.999 8.40296 21.247 7.58196 21.247C6.49996 21.247 5.54796 20.922 4.72596 20.273C3.90396 19.623 3.21196 18.649 2.64996 17.351L1.99996 21Z"/></svg>
            </div>
            <p class="text-3xl md:text-5xl text-white font-serif italic leading-[1.2] mb-12 drop-shadow-sm">
              "It's like having a <span class="text-accent">dedicated analyst</span> on staff 24/7. We identified revenue leaks we didn't even know existed."
            </p>
          </div>
          
          <div class="flex items-center gap-6 border-t border-white/10 pt-8 mt-auto">
            <div class="w-14 h-14 rounded-full bg-gradient-to-br from-accent/40 to-blue-500/40 p-px">
              <div class="w-full h-full rounded-full bg-[#0c0e0d] flex items-center justify-center text-white font-mono text-sm font-bold">
                JD
              </div>
            </div>
            <div>
              <p class="text-white font-serif text-xl">John Doe</p>
              <p class="text-white/40 text-[10px] uppercase tracking-[0.2em] font-mono">Operations Director, HVAC Pro</p>
            </div>
          </div>
        </div>
      </div>

      <!-- RIGHT: Stacked Metrics & Secondary (4 cols) -->
      <div class="lg:col-span-4 flex flex-col gap-8">
        
        <!-- Metric 1 -->
        <div class="bg-white/[0.03] backdrop-blur-xl border border-white/10 p-8 rounded-[2rem] group hover:bg-white/[0.06] transition-all duration-500 flex flex-col justify-center flex-1">
          <p class="text-mono text-white/30 text-[10px] mb-4 uppercase tracking-[0.2em]">Efficiency Gains</p>
          <div class="flex items-baseline gap-2">
            <p class="text-6xl font-serif text-white group-hover:text-accent transition-colors">60%</p>
            <span class="text-accent text-xl">↑</span>
          </div>
          <p class="text-white/40 text-sm mt-2 font-light">Faster dispatch response times.</p>
        </div>

        <!-- Metric 2 -->
        <div class="bg-white/[0.03] backdrop-blur-xl border border-white/10 p-8 rounded-[2rem] group hover:bg-white/[0.06] transition-all duration-500 flex flex-col justify-center flex-1">
          <p class="text-mono text-white/30 text-[10px] mb-4 uppercase tracking-[0.2em]">Monthly Recovery</p>
          <div class="flex items-baseline gap-2">
            <p class="text-6xl font-serif text-white group-hover:text-accent transition-colors">$40k</p>
          </div>
          <p class="text-white/40 text-sm mt-2 font-light">Average revenue identified per user.</p>
        </div>

        <!-- Small Secondary Testimonial -->
        <div class="bg-accent p-8 rounded-[2rem] group hover:scale-[1.02] transition-all duration-500 shadow-[0_0_40px_rgba(0,255,136,0.1)]">
          <p class="text-[#080a09] text-lg font-serif italic leading-snug mb-6">
            "Finally, I can just ask questions instead of digging through reports."
          </p>
          <p class="text-[#080a09]/60 text-[10px] font-mono uppercase tracking-widest font-bold">Mike R. — Service Manager</p>
        </div>

      </div>

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