Process Step Card with Navigation Controls

<section class="max-w-7xl mt-24 mr-auto mb-24 ml-auto pr-6 pl-6" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(3)">
      <div class="relative overflow-hidden rounded-3xl col-span-1 md:col-span-3 lg:col-span-6 flex flex-col bg-[#0f0d0c] border-amber-900/40 border [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll">
        <div class="sm:p-8 md:p-9 pt-6 pr-6 pb-6 pl-6">
          <div class="flex items-center justify-between">
            <p class="text-sm text-amber-400/80 font-sans">
              Our Roasting Process
            </p>
            <div class="flex items-center gap-1.5">
              <span class="size-2 rounded-full bg-amber-500"></span>
              <span class="size-2 rounded-full bg-amber-700/60"></span>
              <span class="size-2 rounded-full bg-amber-700/40"></span>
              <span class="size-2 rounded-full bg-amber-700/20"></span>
            </div>
          </div>

          <h2 class="mt-5 text-2xl sm:text-3xl md:text-4xl tracking-tight font-medium text-neutral-100 font-sans">
            Stage 1 — Bean Selection
          </h2>
          <p class="mt-3 text-sm sm:text-base text-neutral-300 max-w-2xl font-sans">
            We source beans directly from sustainable farms, ensuring fair trade
            practices and exceptional quality. Each origin is carefully vetted
            for flavor profile and ethical standards.
          </p>

          <div class="mt-8">
            <div class="flex items-baseline gap-2">
              <span class="text-3xl sm:text-4xl font-medium tracking-tight text-neutral-100 font-sans">
                12
              </span>
              <span class="text-xs uppercase text-neutral-400 font-sans">
                origins
              </span>
            </div>
            <p class="text-xs sm:text-sm text-neutral-400 mt-1 font-sans">
              Worldwide farm partnerships
            </p>
          </div>
        </div>

        <div class="sm:px-8 md:px-9 sm:pb-8 md:pb-9 border-amber-900/30 border-t mt-auto pr-6 pb-6 pl-6 pt-6">
          <div class="flex items-center justify-between">
            <div class="inline-flex items-center gap-2">
              <button class="inline-flex items-center justify-center size-9 rounded-xl bg-amber-950/40 border border-amber-900/40 hover:border-amber-700/60 transition">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
                  <path d="m12 19-7-7 7-7" class=""></path>
                  <path d="M19 12H5" class=""></path>
                </svg>
              </button>
              <button class="inline-flex items-center justify-center size-9 rounded-xl bg-amber-950/40 border border-amber-900/40 hover:border-amber-700/60 transition">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
                  <path d="M5 12h14" class=""></path>
                  <path d="m12 5 7 7-7 7" class=""></path>
                </svg>
              </button>
            </div>
            <div class="flex items-center gap-2 text-xs text-neutral-400 font-sans">
              <span>1/4</span>
            </div>
          </div>
        </div>
      </div>
    </section>