Customer Testimonial Carousel Section

<div class="sm:px-6 lg:px-8 flex flex-col gap-12 sm:gap-16 lg:gap-24 w-full max-w-[1400px] pr-4 pl-4 gap-x-12 gap-y-12 p-12 mx-auto">

  <!-- Top section -->
  <div class="grid grid-cols-1 md:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)] gap-x-10 gap-y-8 items-end md:items-start">
    <div class="max-w-2xl">
      <p class="text-xs sm:text-sm uppercase mb-3 sm:mb-4 font-medium tracking-tight text-neutral-400" style="">
        Customer stories
      </p>
      <h1 class="font-semibold tracking-tight space-y-1 text-amber-100" style="">
        <span class="block leading-[1.05] text-3xl sm:text-4xl md:text-5xl lg:text-6xl tracking-tight">
                Built for the teams
              </span>
        <span class="block text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-[1.05] tracking-tight text-neutral-50" style="">
                who move work forward.
              </span>
      </h1>
    </div>

    <div class="flex flex-col justify-between gap-6 sm:gap-8 h-full">
      <p
        class="leading-relaxed md:text-xl md:ml-auto sm:text-lg text-base font-light text-neutral-300 tracking-tighter max-w-xl ml-auto">
        Atlas was created to handle the real-world complexity of modern operations teams. Automate busywork, gain
        instant visibility, and keep stakeholders aligned.
      </p>
      <!-- Arrows -->
      <div class="hidden md:flex justify-end gap-3 mt-auto">
        <button id="prevBtn" class="group inline-flex h-11 w-11 items-center justify-center rounded-full border transition-colors focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-300/80 border-neutral-800 bg-neutral-950 text-neutral-400 hover:text-neutral-50 hover:border-neutral-600 hover:bg-neutral-900" style="">
                <svg xmlns="http://www.w3.org/2000/svg" class="lucide h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <polyline points="15 18 9 12 15 6" class=""></polyline>
                </svg>
              </button>
        <button id="nextBtn" class="group inline-flex h-11 w-11 items-center justify-center rounded-full border transition-colors focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-300/80 border-neutral-800 bg-neutral-950 text-neutral-400 hover:text-neutral-50 hover:border-neutral-600 hover:bg-neutral-900" style="">
                <svg xmlns="http://www.w3.org/2000/svg" class="lucide h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <polyline points="9 18 15 12 9 6" class=""></polyline>
                </svg>
              </button>
      </div>
    </div>
  </div>

  <!-- Carousel Container -->
  <div class="w-full">
    <div class="relative -mx-4 sm:-mx-6 lg:-mx-8">
      <!-- Added mask-image here to wrapper for cleaner edges, removed from track -->
      <div class="overflow-hidden sm:px-6 lg:px-8 pt-4 pr-4 pb-4 pl-4"
        style="mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);">
        <!-- Removed md:justify-center to allow manual JS centering logic -->
        <div
          class="flex transition-transform duration-500 ease-out gap-4 sm:gap-5 md:gap-6 lg:gap-8 items-center justify-start"
          style="transform: translateX(0px); transition: transform 500ms ease-out; margin-left: -82px;"
          id="carouselTrack">







          <article
            class="testimonial-card flex-shrink-0 w-[85vw] sm:w-[60vw] md:w-[450px] lg:w-[500px] min-h-[360px] sm:min-h-[420px] transition-all duration-500 ease-out flex flex-col bg-gradient-to-b rounded-2xl sm:rounded-3xl pt-6 sm:pt-10 pr-6 sm:pr-10 pb-6 sm:pb-10 pl-6 sm:pl-10 justify-between from-neutral-950 via-neutral-950 to-neutral-900 border border-neutral-800"
            style="position: relative; --border-gradient: linear-gradient(135deg, rgba(252, 211, 77, 0.15), rgba(252, 211, 77, 0)); --border-radius-before: 1.5rem; transform: scale(0.85); opacity: 0.4; filter: grayscale(100%); z-index: 10;">
            <p class="text-base sm:text-lg md:text-xl leading-relaxed font-[400] text-neutral-100 tracking-tight">
              "We rely on Atlas to orchestrate every handoff. The platform doesn't just automate tasks—it learns from
              our
              feedback, ships improvements weekly, and keeps our team in sync."
            </p>
            <div class="mt-6 sm:mt-8 flex items-center gap-4 flex-shrink-0">
              <div
                class="h-10 w-10 sm:h-12 sm:w-12 overflow-hidden rounded-full border bg-neutral-800 border-neutral-800">
                <img src="https://images.pexels.com/photos/1181690/pexels-photo-1181690.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=80" alt="Customer Avatar" class="h-full w-full object-cover opacity-90">
              </div>
              <div>
                <p class="text-sm sm:text-base font-[500] tracking-tight text-neutral-50">
                  Riley Chen, COO
                </p>
                <p class="text-xs sm:text-sm uppercase text-neutral-500 font-[400] tracking-tight mt-0.5">
                  Summit Product Studio
                </p>
              </div>
            </div>
          </article>
          <article
            class="testimonial-card flex-shrink-0 w-[85vw] sm:w-[60vw] md:w-[450px] lg:w-[500px] min-h-[360px] sm:min-h-[420px] transition-all duration-500 ease-out flex flex-col bg-gradient-to-b rounded-2xl sm:rounded-3xl pt-6 sm:pt-10 pr-6 sm:pr-10 pb-6 sm:pb-10 pl-6 sm:pl-10 justify-between from-neutral-950 via-neutral-950 to-neutral-900 border border-amber-300/70 shadow-2xl shadow-amber-900/10"
            style="position: relative; --border-gradient: linear-gradient(135deg, rgba(252, 211, 77, 0.15), rgba(252, 211, 77, 0)); --border-radius-before: 1.5rem; transform: scale(1); opacity: 1; filter: none; z-index: 20;">
            <p class="text-base sm:text-lg md:text-xl leading-relaxed font-[400] text-neutral-100 tracking-tight">
              "Atlas has transformed how we manage inbound requests. We resolve tickets 3× faster with fewer manual
              steps, and
              stakeholders get real-time updates without chasing us."
            </p>
            <div class="mt-6 sm:mt-8 flex items-center gap-4 flex-shrink-0">
              <div
                class="h-10 w-10 sm:h-12 sm:w-12 overflow-hidden rounded-full border bg-neutral-800 border-neutral-800">
                <img src="https://images.pexels.com/photos/1181686/pexels-photo-1181686.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=80" alt="Customer Avatar" class="h-full w-full object-cover opacity-90">
              </div>
              <div class="">
                <p class="text-sm sm:text-base font-[500] tracking-tight text-neutral-50">
                  Morgan Blake
                </p>
                <p class="text-xs sm:text-sm uppercase text-neutral-500 font-[400] tracking-tight mt-0.5">
                  Cascade Support Network
                </p>
              </div>
            </div>
          </article>
          <article
            class="testimonial-card flex-shrink-0 w-[85vw] sm:w-[60vw] md:w-[450px] lg:w-[500px] min-h-[360px] sm:min-h-[420px] transition-all duration-500 ease-out flex flex-col bg-gradient-to-b rounded-2xl sm:rounded-3xl pt-6 sm:pt-10 pr-6 sm:pr-10 pb-6 sm:pb-10 pl-6 sm:pl-10 justify-between from-neutral-950 via-neutral-950 to-neutral-900 border border-neutral-800"
            style="position: relative; --border-gradient: linear-gradient(135deg, rgba(252, 211, 77, 0.15), rgba(252, 211, 77, 0)); --border-radius-before: 1.5rem; transform: scale(0.85); opacity: 0.4; filter: grayscale(100%); z-index: 10;">
            <p class="text-base sm:text-lg md:text-xl leading-relaxed font-[400] text-neutral-100 tracking-tight">
              "It surfaces risks early and gives leadership a single source of truth. We've scaled from 5 to 22 projects
              per
              quarter without adding headcount. It's the backbone of our ops stack."
            </p>
            <div class="mt-6 sm:mt-8 flex items-center gap-4 flex-shrink-0">
              <div
                class="h-10 w-10 sm:h-12 sm:w-12 overflow-hidden rounded-full border bg-neutral-800 border-neutral-800">
                <img src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=80" alt="Customer Avatar" class="h-full w-full object-cover opacity-90">
              </div>
              <div>
                <p class="text-sm sm:text-base font-[500] tracking-tight text-neutral-50">
                  Taylor Reeves
                </p>
                <p class="text-xs sm:text-sm uppercase text-neutral-500 font-[400] tracking-tight mt-0.5">
                  Vertex Delivery Group
                </p>
              </div>
            </div>
          </article>
          <article
            class="testimonial-card flex-shrink-0 w-[85vw] sm:w-[60vw] md:w-[450px] lg:w-[500px] min-h-[360px] sm:min-h-[420px] transition-all duration-500 ease-out flex flex-col bg-gradient-to-b rounded-2xl sm:rounded-3xl pt-6 sm:pt-10 pr-6 sm:pr-10 pb-6 sm:pb-10 pl-6 sm:pl-10 justify-between from-neutral-950 via-neutral-950 to-neutral-900 border border-neutral-800"
            style="position: relative; --border-gradient: linear-gradient(135deg, rgba(252, 211, 77, 0.15), rgba(252, 211, 77, 0)); --border-radius-before: 1.5rem; transform: scale(0.85); opacity: 0.4; filter: grayscale(100%); z-index: 10;">
            <p class="text-base sm:text-lg md:text-xl leading-relaxed font-[400] text-neutral-100 tracking-tight">
              "The level of clarity and control Atlas gives our operations team is unlike anything we've used before.
              We've
              cut status meetings by over 40% and improved response times."
            </p>
            <div class="mt-6 sm:mt-8 flex items-center gap-4 flex-shrink-0">
              <div
                class="h-10 w-10 sm:h-12 sm:w-12 overflow-hidden rounded-full border bg-neutral-800 border-neutral-800">
                <img src="https://images.pexels.com/photos/1181424/pexels-photo-1181424.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=80" alt="Customer Avatar" class="h-full w-full object-cover opacity-90">
              </div>
              <div>
                <p class="text-sm sm:text-base font-[500] tracking-tight text-neutral-50">
                  Jordan Avery
                </p>
                <p class="text-xs sm:text-sm uppercase text-neutral-500 font-[400] tracking-tight mt-0.5">
                  Horizon Operations Collective
                </p>
              </div>
            </div>
          </article>
        </div>
      </div>

      <!-- Mobile Arrows (Visible only on sm and below) -->
      <div class="flex md:hidden justify-center gap-4 mt-8">
        <button id="prevBtnMobile" class="group inline-flex h-12 w-12 items-center justify-center rounded-full border transition-colors focus:outline-none active:bg-neutral-900 border-neutral-800 bg-neutral-950 text-neutral-400" style="">
                <svg xmlns="http://www.w3.org/2000/svg" class="lucide h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <polyline points="15 18 9 12 15 6" class=""></polyline>
                </svg>
              </button>
        <button id="nextBtnMobile" class="group inline-flex h-12 w-12 items-center justify-center rounded-full border transition-colors focus:outline-none active:bg-neutral-900 border-neutral-800 bg-neutral-950 text-neutral-400" style="">
                <svg xmlns="http://www.w3.org/2000/svg" class="lucide w-[20px] h-[20px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-icon-replaced="true" style="color: rgb(163, 163, 163); width: 20px; height: 20px">
                  <polyline points="9 18 15 12 9 6" class=""></polyline>
                </svg>
              </button>
      </div>

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