Dark Pricing Section with Pro Plan Card

<div class="mx-auto max-w-7xl">
  <div
    class="flex flex-col gap-x-16 gap-y-16 rounded-3xl border border-[#ffffff]/10 bg-[#0A0A0C] mt-24 mb-24 px-8 pt-8 pb-16"
  >
  <!-- Header Section -->
  <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 w-full">
    <div class="flex flex-col gap-6 max-w-3xl">
      <div class="flex gap-3 items-center scroll-item scroll-fade-up" style="animation-play-state: running;">
        <span class="flex items-center justify-center text-[11px] font-medium text-blue-400 font-mono bg-blue-500/10 w-7 h-7 border-blue-500/20 border rounded-lg shadow-[0_0_10px_rgba(59,130,246,0.2)]">
                  04
                </span>
        <span class="uppercase text-sm font-medium text-gray-500 tracking-widest font-sans">
                  PRICING
                </span>
      </div>
      <h2
        class="md:text-5xl lg:text-6xl leading-[1.1] text-4xl text-white font-oswald font-light tracking-tight scroll-item scroll-fade-up delay-100"
        style="animation-play-state: running;">
        Simple pricing for
        <span class="text-gray-600 font-oswald font-light tracking-tight">
                  everyone.
                </span>
      </h2>
      <p class="text-lg text-gray-400 font-light max-w-xl leading-relaxed font-sans scroll-item scroll-fade-up delay-200"
        style="animation-play-state: running;">
        Leverage AI-driven insights to forecast trends, optimize
        spending, and maximize returns across all your financial
        channels with precision.
      </p>
    </div>

    <div class="z-10 flex flex-col items-center md:items-end relative">
      <div class="flex bg-[#111111] border-white/10 border rounded-full p-1.5 backdrop-blur-sm items-center">
        <button class="transition-transform hover:scale-[1.02] text-sm font-semibold text-black bg-[#ffffff] rounded-full px-8 py-2.5 shadow-[0_0_15px_rgba(14,165,233,0.3)]">
                  Monthly
                </button>
        <button class="px-8 py-2.5 rounded-full text-gray-400 hover:text-white font-medium text-sm transition-colors font-sans">
                  Yearly
                </button>
      </div>
    </div>
  </div>

  <!-- Features Grid -->
  <section
    class="flex flex-col overflow-hidden pt-0 pr-0 pb-0 pl-0 relative gap-x-12 gap-y-12 items-center justify-center">
    <!-- Background Glow Effects -->
    <div
      class="pointer-events-none absolute top-0 right-0 bottom-0 left-0 gap-x-12 gap-y-12 scroll-item scroll-blur-in delay-300"
      style="visibility: hidden; animation-play-state: running;">
      <div
        class="absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-gradient-to-b from-transparent via-purple-500/30 to-transparent"
        style=""></div>
      <div
        class="w-px bg-gradient-to-b from-transparent via-purple-500/10 to-transparent opacity-50 absolute top-0 bottom-0 left-1/4 gap-x-12 gap-y-12">
      </div>
      <div
        class="absolute right-1/4 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-purple-500/10 to-transparent opacity-50"
        style=""></div>
      <div class="absolute top-0 inset-x-0 h-64 bg-gradient-to-b from-purple-900/10 to-transparent opacity-30"></div>
    </div>

    <!-- Header Section -->

    <!-- Pricing Card -->
    <div
      class="overflow-hidden z-10 group bg-[#0A0A0C] w-full max-w-6xl border-white/10 border rounded-[3rem] relative shadow-2xl gap-x-12 gap-y-12">
      <!-- Card Background -->
      <div
        class="pointer-events-none bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#1a1a2e] via-[#0A0A0C] to-[#0A0A0C] absolute top-0 right-0 bottom-0 left-0 gap-x-12 gap-y-12">
      </div>
      <!-- Stars Effect -->
      <div class="absolute inset-0 opacity-20"
        style="background-image: radial-gradient(white 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle, black 40%, transparent 100%);">
      </div>

      <div
        class="grid grid-cols-1 md:grid-cols-2 md:p-16 min-h-[450px] pt-10 pr-10 pb-10 pl-10 relative gap-x-12 gap-y-12">
        <!-- Left Column -->
        <div class="flex flex-col gap-8 h-full gap-x-12 gap-y-12 items-start justify-between">
          <!-- Icon & Title -->
          <div class="flex items-center gap-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              class="text-sky-400">
              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
                class=""></path>
              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
                class=""></path>
              <path d="M9 12H4s.55-3.03 2-4c1.62-1.1 4-1 4-1s.25 2.25 0 4z" class=""></path>
              <path d="M15 13v5s3.03-.55 4-2c1.1-1.62 1-4 1-4s-2.25-.25-4 0z" class=""></path>
            </svg>
            <span class="text-3xl font-light text-white tracking-tight font-oswald">
                      Pro Plan
                    </span>
          </div>

          <!-- Price -->
          <div class="mt-auto gap-x-12 gap-y-12">
            <div class="flex items-baseline gap-3 mb-2">
              <span class="text-9xl font-light text-white tracking-tight font-oswald">
                        $19
                      </span>
              <span class="text-3xl font-light text-white tracking-tight font-oswald opacity-90">
                        / mo
                      </span>
            </div>
            <p class="text-gray-400 text-lg font-light font-sans" style="">
              Best for startups and growing teams
            </p>
          </div>
        </div>

        <!-- Right Column -->
        <div class="flex flex-col justify-between h-full gap-10">
          <!-- Features List -->
          <ul class="space-y-6 pt-2">
            <li class="flex items-center gap-4 text-white text-xl font-light font-sans" style="">
              <span class="w-1.5 h-1.5 rounded-full bg-white shrink-0"></span>
              Unlimited Account Sync
            </li>
            <li class="flex items-center gap-4 text-white text-xl font-light font-sans" style="">
              <span class="w-1.5 h-1.5 rounded-full bg-white shrink-0"></span>
              AI-Powered Forecasting
            </li>
            <li class="flex items-center gap-4 text-white text-xl font-light font-sans" style="">
              <span class="w-1.5 h-1.5 rounded-full bg-white shrink-0"></span>
              Advanced Export (CSV/PDF)
            </li>
            <li class="flex items-center gap-4 text-white text-xl font-light font-sans" style="">
              <span class="w-1.5 h-1.5 rounded-full bg-white shrink-0"></span>
              Priority Support
            </li>
          </ul>

          <!-- CTA Button -->
          <div class="flex justify-start md:justify-end mt-auto pt-4">
            <button class="sm:w-auto hover:bg-blue-500/10 hover:border-blue-400 hover:shadow-[0_0_35px_rgba(59,130,246,0.6),inset_0_0_20px_rgba(59,130,246,0.4)] hover:scale-[1.02] transition-all duration-300 flex group text-base font-medium text-white bg-black/60 w-full border-blue-500 border rounded-full pt-3.5 pr-8 pb-3.5 pl-8 shadow-[0_0_20px_rgba(59,130,246,0.5),inset_0_0_10px_rgba(59,130,246,0.2)] gap-x-2 gap-y-2 items-center justify-center">
                      Start For Free
                    </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>