Cinematic Floating Testimonials Section

<section class="sm:py-32 overflow-hidden bg-[#09090b] pt-24 pb-24 relative">
  <style>
    @keyframes float-1 {

      0%,
      100% {
        transform: translateY(0px) rotate(0deg);
      }

      50% {
        transform: translateY(-12px) rotate(0.5deg);
      }
    }

    @keyframes float-2 {

      0%,
      100% {
        transform: translateY(0px) rotate(0deg);
      }

      50% {
        transform: translateY(-16px) rotate(-0.5deg);
      }
    }

    @keyframes float-3 {

      0%,
      100% {
        transform: translateY(0px) rotate(0deg);
      }

      50% {
        transform: translateY(-10px) rotate(0.5deg);
      }
    }

    @keyframes laser-scan {
      0% {
        top: -10%;
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        top: 110%;
        opacity: 0;
      }
    }
  </style>

  <!-- Cinematic Ambient Lighting -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[800px] h-[600px] bg-indigo-500/5 rounded-full blur-[120px] pointer-events-none z-0">
  </div>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- Header -->
    <div class="text-center mb-24 scroll-animate">
      <div
        class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-800 bg-zinc-900/50 mb-6 shadow-inner">
        <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_8px_#6366f1] animate-pulse"></div>
        <span class="text-[10px] font-mono text-zinc-400 tracking-widest uppercase">
              Verified Node Telemetry
            </span>
      </div>
      <h2 class="text-4xl md:text-5xl font-medium tracking-tight text-zinc-100 drop-shadow-md">
        Trusted by leading teams
      </h2>
    </div>

    <!-- Cascading Holographic Layout -->
    <div class="relative w-full max-w-5xl mx-auto flex flex-col gap-12 md:gap-0 pb-12 perspective-1000">
      <!-- Central Physical Connection Line (Desktop Only) -->
      <div class="hidden md:block absolute top-[5%] bottom-[5%] left-[50%] -translate-x-1/2 w-px bg-zinc-800/60 z-0">
        <div
          class="absolute top-0 left-1/2 -translate-x-1/2 w-[2px] h-48 bg-indigo-500 rounded-full shadow-[0_0_15px_#6366f1]"
          style="animation: laser-scan 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;"></div>
      </div>

      <!-- Node 1: Top Left -->
      <div
        class="md:w-[65%] tactile-glass p-8 md:p-12 rounded-[2.5rem] border border-zinc-700/50 relative z-10 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] hover:z-50 hover:-translate-y-4 hover:shadow-[0_40px_80px_rgba(0,0,0,0.8)] hover:border-indigo-500/40 group overflow-hidden scroll-animate md:-ml-6 shadow-[0_20px_40px_rgba(0,0,0,0.4)]"
        style="animation: float-1 8s ease-in-out infinite;">
        <!-- Interactive Gradient Reveal -->
        <div
          class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
        </div>

        <!-- Subtle Oversized Quote -->
        <div
          class="absolute -top-10 -right-4 text-[180px] font-serif text-white opacity-[0.02] group-hover:opacity-[0.06] transition-all duration-700 pointer-events-none leading-none group-hover:rotate-12 group-hover:scale-110">
          "
        </div>

        <div class="relative z-10 flex flex-col md:flex-row gap-6 md:gap-8 items-start">
          <!-- Tactile Avatar Module -->
          <div
            class="w-16 h-16 rounded-2xl tactile-inset p-1.5 flex-shrink-0 border border-zinc-800 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] relative group-hover:border-indigo-500/40 transition-colors duration-700">
            <div
              class="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-zinc-900 border border-zinc-700 flex items-center justify-center z-20 shadow-lg group-hover:border-indigo-500/50 transition-colors">
              <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></div>
            </div>
            <div
              class="w-full h-full rounded-xl bg-zinc-800 bg-[url('https://i.pravatar.cc/100?img=1')] bg-cover grayscale group-hover:grayscale-0 transition-all duration-700 filter contrast-125">
            </div>
          </div>

          <div class="flex-1">
            <div class="flex flex-wrap items-center gap-3 mb-6">
              <span class="text-[10px] font-mono text-zinc-200 tracking-widest uppercase border border-zinc-700 bg-zinc-800/80 rounded px-3 py-1.5 shadow-inner group-hover:border-indigo-500/40 group-hover:text-indigo-300 transition-colors duration-700">
                    Sarah Jenkins
                  </span>
              <span class="text-[10px] font-mono text-zinc-500 tracking-widest uppercase">
                    CTO @ TechFlow
                  </span>
            </div>
            <p
              class="text-xl md:text-2xl font-normal text-zinc-300 leading-relaxed tracking-tight group-hover:text-white transition-colors duration-700">
              "Nexus completely transformed how we ship models. The physical
              control over the infrastructure layer is unmatched."
            </p>
          </div>
        </div>
      </div>

      <!-- Node 2: Middle Right (Offset & Overlapping) -->
      <div
        class="md:w-[70%] md:ml-auto tactile-glass p-8 md:p-12 rounded-[2.5rem] border border-zinc-700/50 relative z-20 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] hover:z-50 hover:-translate-y-4 hover:shadow-[0_40px_80px_rgba(0,0,0,0.8)] hover:border-indigo-500/40 group overflow-hidden scroll-animate md:-mt-16 md:-mr-6 shadow-[0_25px_50px_rgba(0,0,0,0.5)]"
        style="animation: float-2 9s ease-in-out infinite 1s;">
        <div
          class="absolute inset-0 bg-gradient-to-bl from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
        </div>
        <div
          class="absolute -bottom-10 -left-6 text-[180px] font-serif text-white opacity-[0.02] group-hover:opacity-[0.06] transition-all duration-700 pointer-events-none leading-none group-hover:-rotate-12 group-hover:scale-110">
          "
        </div>

        <div class="relative z-10 flex flex-col md:flex-row-reverse gap-6 md:gap-8 items-start text-left md:text-right">
          <div
            class="w-16 h-16 rounded-2xl tactile-inset p-1.5 flex-shrink-0 border border-zinc-800 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] relative group-hover:border-indigo-500/40 transition-colors duration-700">
            <div
              class="absolute -bottom-1.5 -left-1.5 w-4 h-4 rounded-full bg-zinc-900 border border-zinc-700 flex items-center justify-center z-20 shadow-lg group-hover:border-indigo-500/50 transition-colors">
              <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></div>
            </div>
            <div
              class="w-full h-full rounded-xl bg-zinc-800 bg-[url('https://i.pravatar.cc/100?img=11')] bg-cover grayscale group-hover:grayscale-0 transition-all duration-700 filter contrast-125">
            </div>
          </div>

          <div class="flex-1 flex flex-col md:items-end">
            <div class="flex flex-wrap items-center gap-3 mb-6">
              <span class="text-[10px] font-mono text-zinc-500 tracking-widest uppercase">
                    Lead Dev @ StartupX
                  </span>
              <span class="text-[10px] font-mono text-zinc-200 tracking-widest uppercase border border-zinc-700 bg-zinc-800/80 rounded px-3 py-1.5 shadow-inner group-hover:border-indigo-500/40 group-hover:text-indigo-300 transition-colors duration-700">
                    Marcus Rhodes
                  </span>
            </div>
            <p
              class="text-xl md:text-2xl font-normal text-zinc-300 leading-relaxed tracking-tight group-hover:text-white transition-colors duration-700">
              "The edge routing latency is incredible. We saw our response
              times drop by 40% globally within a week."
            </p>
          </div>
        </div>
      </div>

      <!-- Node 3: Bottom Center/Left (Offset & Overlapping) -->
      <div
        class="md:w-[68%] md:ml-[15%] tactile-glass p-8 md:p-12 rounded-[2.5rem] border border-zinc-700/50 relative z-30 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] hover:z-50 hover:-translate-y-4 hover:shadow-[0_40px_80px_rgba(0,0,0,0.8)] hover:border-indigo-500/40 group overflow-hidden scroll-animate md:-mt-20 shadow-[0_30px_60px_rgba(0,0,0,0.6)]"
        style="animation: float-3 10s ease-in-out infinite 2s;">
        <div
          class="absolute inset-0 bg-gradient-to-t from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
        </div>
        <div
          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[240px] font-serif text-white opacity-[0.015] group-hover:opacity-[0.05] transition-all duration-1000 pointer-events-none leading-none group-hover:scale-125">
          "
        </div>

        <div class="relative z-10 flex flex-col md:flex-row gap-6 md:gap-8 items-start">
          <div
            class="w-16 h-16 rounded-2xl tactile-inset p-1.5 flex-shrink-0 border border-zinc-800 shadow-[inset_0_2px_10px_rgba(0,0,0,0.8)] relative group-hover:border-indigo-500/40 transition-colors duration-700">
            <div
              class="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-zinc-900 border border-zinc-700 flex items-center justify-center z-20 shadow-lg group-hover:border-indigo-500/50 transition-colors">
              <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></div>
            </div>
            <div
              class="w-full h-full rounded-xl bg-zinc-800 bg-[url('https://i.pravatar.cc/100?img=5')] bg-cover grayscale group-hover:grayscale-0 transition-all duration-700 filter contrast-125">
            </div>
          </div>

          <div class="flex-1">
            <div class="flex flex-wrap items-center gap-3 mb-6">
              <span class="text-[10px] font-mono text-zinc-200 tracking-widest uppercase border border-zinc-700 bg-zinc-800/80 rounded px-3 py-1.5 shadow-inner group-hover:border-indigo-500/40 group-hover:text-indigo-300 transition-colors duration-700">
                    Amanda Lee
                  </span>
              <span class="text-[10px] font-mono text-zinc-500 tracking-widest uppercase">
                    VP Eng @ CloudScale
                  </span>
            </div>
            <p
              class="text-xl md:text-2xl font-normal text-zinc-300 leading-relaxed tracking-tight group-hover:text-white transition-colors duration-700">
              "Integrated flawlessly into our CI/CD pipelines. The hardware
              autoscaling handles Black Friday without manual intervention."
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>