Responsive Dark Feature Section with Interactive Cards

<div
  class="group relative w-full max-w-[400px] mx-auto bg-[#0F0F11] border border-white/10 rounded-3xl p-6 xl:p-8 hover:border-[#7377F6]/40 transition-all duration-500 overflow-hidden">

  <!-- soft background blob -->
  <div
    class="absolute -bottom-12 -right-12 w-48 h-48 rounded-full bg-[#7377F6]/5 blur-3xl transition-all duration-700 group-hover:scale-110">
  </div>

  <div class="relative z-10">
    <!-- Reduced top padding -->
    <section class="pt-2 flex items-center justify-center">
      <div class="w-full relative">

        <!-- Card -->
        <div class="relative overflow-hidden bg-[#0F0F11] border border-white/10 ring-1 ring-white/5 rounded-2xl">
          <!-- inner glow -->
          <div
            class="absolute -bottom-12 -right-12 w-48 h-48 rounded-full bg-white/5 blur-3xl transition-all duration-700 group-hover:scale-110">
          </div>

          <div class="p-3 xl:p-4">
            <!-- ✨ Responsive visual frame -->
            <div class="relative w-full aspect-[16/9] bg-[#0F0F11] ring-1 ring-white/10 rounded-xl overflow-hidden">

              <!-- vertical grid lines -->
              <div class="absolute inset-y-0 left-[10%] w-px bg-white/5"></div>
              <div class="absolute inset-y-0 left-[30%] w-px bg-white/5"></div>
              <div class="absolute inset-y-0 left-1/2 w-px bg-white/5"></div>
              <div class="absolute inset-y-0 left-[70%] w-px bg-white/5"></div>
              <div class="absolute inset-y-0 left-[90%] w-px bg-white/5"></div>

              <!-- focus line + glow -->
              <div
                class="absolute [left:36%] [top:12%] [height:70%] w-px bg-gradient-to-b from-transparent via-[#A78BFA] to-transparent">
              </div>
              <div class="absolute [left:36%] [top:9%] -translate-x-1/2 rounded-full pointer-events-none
                          w-[clamp(40px,6vw,64px)] h-[clamp(40px,6vw,64px)]"
                style="background: radial-gradient(50% 50% at 50% 50%, rgba(167,139,250,0.35) 0%, rgba(167,139,250,0.18) 35%, rgba(167,139,250,0.08) 55%, rgba(0,0,0,0) 75%);">
              </div>
              <div
                class="absolute [left:36%] [top:14%] -translate-x-1/2 w-2.5 h-2.5 rounded-full bg-[#A78BFA] ring-2 ring-white/20">
              </div>

              <!-- Phases -->
              <div class="absolute [left:6%] [top:10%] [width:38%] h-[clamp(32px,3.2vw,40px)]
                          rounded-lg bg-white/10 ring-1 ring-white/10 overflow-hidden">
                <div class="absolute inset-y-0 left-0 flex items-center px-[clamp(10px,1.2vw,14px)]">
                  <span class="text-slate-300 font-medium tracking-tight"
                        style="font-size:clamp(12px,1.05vw,16px)">Phases</span>
                </div>
                <div class="absolute right-0 top-0 bottom-0 w-[26%] bg-white/15"></div>
              </div>

              <!-- Business Plan -->
              <div class="absolute [left:6%] [top:42%] [width:58%] h-[clamp(34px,3.4vw,44px)]
                          rounded-lg bg-white/15 ring-1 ring-white/10 shadow-lg">
                <div class="h-full flex items-center px-[clamp(10px,1.2vw,14px)]">
                  <span class="text-slate-300 font-medium tracking-tight"
                        style="font-size:clamp(12px,1.05vw,16px)">Business Plan</span>
                </div>
              </div>

              <!-- AI Strategy (highlight) -->
              <div class="absolute [left:28%] [top:60%] [width:60%] h-[clamp(34px,3.4vw,44px)]
                          rounded-lg ring-1 ring-white/10 shadow-lg"
                style="background:linear-gradient(90deg,#6D28D9 0%,#9F67FF 45%,#E985FF 70%,#F6C28B 100%);">
                <div class="h-full flex items-center px-[clamp(12px,1.4vw,16px)]">
                  <span class="text-white font-medium tracking-tight"
                        style="font-size:clamp(12px,1.15vw,18px)">AI Strategy</span>
                </div>
              </div>

              <!-- LLM -->
              <div class="absolute [left:38%] [bottom:8%] [width:46%] h-[clamp(32px,3.2vw,42px)]
                          rounded-lg border border-white/10 bg-transparent">
                <div class="h-full flex items-center px-[clamp(10px,1.2vw,14px)]">
                  <span class="text-slate-400 font-medium tracking-tight"
                        style="font-size:clamp(11px,1vw,14px)">LLM</span>
                </div>
              </div>
            </div>
            <!-- /visual -->
          </div>
        </div>
      </div>
    </section>

    <!-- Text Section with spacing -->
    <div class="mt-6">
      <h3 class="text-xl font-semibold text-white tracking-tight mb-3">
        Plan your AI strategy with clarity
      </h3>
      <p class="leading-relaxed text-neutral-300 mb-4">
        Visualize every phase of your project — from business planning to
        AI implementation — with a clear, structured timeline that keeps your team aligned.
      </p>

      <div class="flex items-center text-[#7377F6] text-sm font-medium group-hover:translate-x-1 transition-transform">
        Learn more
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="ml-1">
          <path d="M5 12h14" />
          <path d="m12 5 7 7-7 7" />
        </svg>
      </div>
    </div>
  </div>
</div>