Interactive Budget Slider CTA Section

<section class="relative z-10 animate-on-scroll is-visible">
  <div class="max-w-7xl md:py-18 mr-auto ml-auto pt-12 pr-6 pb-12 pl-6">
    <div class="md:p-12 border-white/10 border rounded-3xl pt-8 pr-8 pb-8 pl-8 hover-lift transition-all duration-500">
      <div class="mx-auto max-w-3xl text-center">
        <h3 class="text-3xl md:text-4xl tracking-tight font-jakarta font-medium">Let's Work Together</h3>
        <p class="mt-3 text-white/70 font-geist">Tell us about your mission and we'll share a tailored flight plan
          within 48 hours.</p>

        <!-- Steps -->
        <div class="mt-8 flex items-center justify-center gap-4">
          <div id="step1"
            class="size-10 rounded-full flex items-center justify-center bg-indigo-600 text-white font-semibold bg-violet-600 font-geist transition-all duration-500 hover:scale-110 animate-glow"
            style="">01</div>
          <div id="step2"
            class="size-10 rounded-full flex items-center justify-center bg-white/10 text-white/60 font-semibold font-geist transition-all duration-500 hover:scale-110">
            02</div>
          <div id="step3"
            class="size-10 rounded-full flex items-center justify-center bg-white/10 text-white/60 font-semibold font-geist transition-all duration-500 hover:scale-110">
            03</div>
          <div id="step4"
            class="size-10 rounded-full flex items-center justify-center bg-white/10 text-white/60 font-semibold font-geist transition-all duration-500 hover:scale-110">
            04</div>
        </div>

        <div class="mt-10">
          <p class="text-lg tracking-tight font-semibold font-geist">What's your project budget?</p>
          <p class="text-sm text-white/60 mt-1 font-geist">Select the range that matches your scope. We'll fine‑tune
            together.</p>

          <!-- Custom Slider -->
          <div class="mt-6">
            <div id="budgetSlider"
              class="relative noselect border-white/10 border rounded-2xl h-14 hover:border-white/20 transition-all duration-300">
              <div class="absolute left-4 right-4 top-1/2 -translate-y-1/2 h-1.5 rounded-full bg-white/10"></div>

              <!-- Ticks -->
              <div class="absolute left-4 right-4 top-1/2 -translate-y-1/2 flex justify-between">
                <div class="h-3 w-px bg-white/20"></div>
                <div class="h-3 w-px bg-white/20"></div>
                <div class="h-3 w-px bg-white/20"></div>
                <div class="h-3 w-px bg-white/20"></div>
                <div class="h-3 w-px bg-white/20"></div>
              </div>

              <!-- Handle -->
              <button id="sliderHandle" class="slider-handle absolute top-1/2 -translate-y-1/2 size-6 soft-glow bg-gradient-to-tr from-indigo-600 to-blue-500 border-white/10 border rounded-full transition-all duration-300 hover:scale-125 hover:animate-glow" style="left: 87.7895px; transform: translateY(-50%) scale(1);"></button>

              <!-- Value Badge -->
              <div id="budgetBadge" class="absolute -bottom-8 left-0 translate-x-0 transition-all duration-300"
                style="left: 75.7895px;">
                <div
                  class="inline-flex items-center gap-1 rounded-lg bg-indigo-600 px-2.5 py-1 soft-glow animate-pulse">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    data-lucide="coins" class="lucide lucide-coins size-3.5">
                    <circle cx="8" cy="8" r="6" class=""></circle>
                    <path d="M18.09 10.37A6 6 0 1 1 10.34 18" class=""></path>
                    <path d="M7 6h1v4" class=""></path>
                    <path d="m16.71 13.88.7.71-2.82 2.82" class=""></path>
                  </svg>
                  <span id="budgetValue" class="text-xs font-semibold tracking-tight font-geist">$15k</span>
                </div>
              </div>
            </div>
            <div class="mt-3 flex justify-between text-xs text-white/50">
              <span class="font-geist transition-colors duration-300 hover:text-white/80">$5k</span>
              <span class="font-geist transition-colors duration-300 hover:text-white/80">$25k</span>
              <span class="font-geist transition-colors duration-300 hover:text-white/80">$50k</span>
              <span class="font-geist transition-colors duration-300 hover:text-white/80">$75k</span>
              <span class="font-geist transition-colors duration-300 hover:text-white/80">$100k+</span>
            </div>
          </div>

          <button id="nextStepBtn" class="mt-8 inline-flex items-center gap-2 rounded-full bg-gradient-to-tr from-indigo-600 to-blue-500 px-5 py-3 text-sm font-semibold tracking-tight soft-glow hover-lift transition-all duration-300 hover:animate-glow group">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right size-4 transition-transform duration-300 group-hover:translate-x-1"><path d="m9 18 6-6-6-6" class=""></path></svg>
                <span class="font-geist">Next step</span>
              </button>
        </div>
      </div>
    </div>
  </div>
</section>