Two-Column Pricing Plans Section

<section class="w-full bg-black text-white relative border-b border-white/10">
        <!-- Top Header Section -->
        <div class="container border-x max-w-7xl border-white/10 mr-auto ml-auto pr-6 pl-6">
          <div class="flex flex-col lg:flex-row lg:items-end justify-between py-24 gap-12">
            <!-- Main Title -->
            <div class="flex-1 aura-reveal">
              <h1 class="text-6xl md:text-7xl lg:text-8xl font-oswald uppercase tracking-tight leading-[0.9]">
                Simple Pricing Plans
              </h1>
            </div>

            <!-- Right Description & Counter -->
            <div class="flex flex-col justify-end items-start lg:items-end lg:text-right max-w-md gap-12 aura-reveal" style="animation-delay: 100ms;">
              <p class="text-zinc-400 text-lg leading-relaxed text-left lg:text-left">
                No hourly rates. No surprise charges. No scope creep penalties.
                Just transparent pricing for transformational work.
              </p>
              <div class="w-full flex justify-end">
                <span class="text-sm text-zinc-500 font-mono">003 — 003</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Pricing Grid -->
        <div class="container max-w-7xl mx-auto border-x border-t border-white/10">
          <div class="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-white/10">
            <!-- Plan 1: Website Design & Development -->
            <div class="flex flex-col p-8 md:p-12 h-full flashlight-card aura-reveal" style="--mouse-x: 584px; --mouse-y: 63.109375px;">
              <div class="mb-16">
                <h2 class="text-3xl font-normal mb-6">Monthly Pass</h2>
                <p class="text-zinc-400 leading-relaxed max-w-lg">
                  Full access to our global node network for a month. Perfect
                  for testing the waters.
                </p>
              </div>

              <div class="border-t border-white/10 pt-12 mt-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                  <!-- Left Column: Includes -->
                  <div class="">
                    <span class="block text-zinc-500 text-sm mb-6">
                      Include
                    </span>
                    <ul class="space-y-4 text-sm text-zinc-300">
                      <li class="flex items-start gap-3">
                        <span class="text-zinc-600">—</span>
                        Website strategy and UX design
                      </li>
                      <li class="flex items-start gap-3">
                        <span class="text-zinc-600">—</span>
                        Custom web design
                      </li>
                      <li class="flex items-start gap-3">
                        <span class="text-zinc-600">—</span>
                        Responsive development
                      </li>
                    </ul>

                    <div class="mt-24">
                      <div class="text-4xl lg:text-5xl font-normal tracking-tight">
                        $9.99
                      </div>
                    </div>
                  </div>

                  <!-- Right Column: Timeline & Team -->
                  <div class="flex flex-col h-full">
                    <div class="mb-10">
                      <span class="block text-zinc-500 text-sm mb-2">
                        Timeline
                      </span>
                      <div class="text-white">12-18 weeks</div>
                    </div>

                    <div class="mb-12">
                      <span class="block text-zinc-500 text-sm mb-2">Team</span>
                      <div class="text-white leading-relaxed text-sm">
                        Strategist, 2 Designers, 2 Developers, Project Manager
                      </div>
                    </div>

                    <div class="mt-auto pt-6">
                      <button class="w-full py-4 px-6 bg-zinc-900 border border-white/10 text-white text-sm hover:bg-zinc-800 transition-colors">
                        Start Your Project
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Plan 2: Product Design & Development -->
            <div class="flex flex-col p-8 md:p-12 h-full">
              <div class="mb-16">
                <h2 class="text-3xl font-normal mb-6">Annual Pro</h2>
                <p class="text-zinc-400 leading-relaxed max-w-lg">
                  Maximum savings for the dedicated gamer. Includes priority
                  routing and beta features.
                </p>
              </div>

              <div class="border-t border-white/10 pt-12 mt-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                  <!-- Left Column: Includes -->
                  <div class="">
                    <span class="block text-zinc-500 text-sm mb-6">
                      Include
                    </span>
                    <ul class="space-y-4 text-sm text-zinc-300">
                      <li class="flex items-start gap-3">
                        <span class="text-zinc-600">—</span>
                        Priority Node Access
                      </li>
                      <li class="flex items-start gap-3">
                        <span class="text-zinc-600">—</span>
                        Early Access Features
                      </li>
                      <li class="flex items-start gap-3">
                        <span class="text-zinc-600">—</span>
                        Multi-Device Support
                      </li>
                    </ul>

                    <div class="mt-24">
                      <div class="text-4xl lg:text-5xl font-normal tracking-tight">
                        $89.99
                      </div>
                    </div>
                  </div>

                  <!-- Right Column: Timeline & Team -->
                  <div class="flex flex-col h-full">
                    <div class="mb-10">
                      <span class="block text-zinc-500 text-sm mb-2">
                        Timeline
                      </span>
                      <div class="text-white">16-24 weeks</div>
                    </div>

                    <div class="mb-12">
                      <span class="block text-zinc-500 text-sm mb-2">Team</span>
                      <div class="text-white leading-relaxed text-sm">
                        Product Strategist, UX Researcher, 2 Designers, 2-3
                        Developers
                      </div>
                    </div>

                    <div class="mt-auto pt-6">
                      <button class="w-full py-4 px-6 bg-zinc-900 border border-white/10 text-white text-sm hover:bg-zinc-800 transition-colors">
                        Start Your Project
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>