Responsive Pricing Plans Section (Tailwind CSS)

<div class="max-w-7xl sm:px-8 lg:px-10 mr-auto ml-auto pr-6 pl-6">
    <!-- Header -->
    <div class="flex flex-col items-center text-center mb-16">
      <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 ring-1 ring-emerald-500/20 text-emerald-300 text-sm font-medium mb-8">
        <div class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></div>
        <span class="text-xs font-medium font-sans">Pricing</span>
      </div>
      <h2 class="text-4xl md:text-5xl text-white mb-6 font-manrope font-light tracking-tighter" style="">
        Scale with
        <span class="bg-gradient-to-r from-emerald-400 via-emerald-500 to-blue-500 bg-clip-text text-transparent font-manrope font-light tracking-tighter" style="">flexible pricing</span>
      </h2>
      <p class="text-lg text-white/70 max-w-2xl mx-auto leading-relaxed font-sans">Choose a plan that grows with your data needs and unlocks the intelligence your team deserves.</p>
    </div>

    <!-- Plans -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Starter -->
      <article class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-[#0f1419]/90 via-[#131a24]/95 to-[#0a0f14]/90 border border-white/[0.08] shadow-lg backdrop-blur-xl transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/10 hover:border-emerald-500/20">
        <!-- Ambient glow -->
        <div class="absolute -inset-1 bg-gradient-to-r from-emerald-500/5 via-transparent to-blue-500/5 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        
        <div class="relative p-8">
          <!-- Header -->
          <div class="flex items-center justify-between mb-6">
            <div class="inline-flex items-center gap-2 text-white/60">
              <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/[0.06] ring-1 ring-white/10 text-white/80 text-xs font-medium font-sans">01</span>
              <div class="flex items-center gap-1">
                <span class="h-1.5 w-1.5 rounded-full bg-emerald-400/80"></span>
                <span class="h-1.5 w-1.5 rounded-full bg-emerald-400/40"></span>
                <span class="h-1.5 w-1.5 rounded-full bg-emerald-400/20"></span>
              </div>
            </div>
            <div class="inline-flex items-center gap-2 px-2 py-1 rounded-lg bg-white/[0.06] ring-1 ring-white/10 text-white/70 text-xs font-sans">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              2 weeks setup
            </div>
          </div>

          <!-- Title & Price -->
          <div class="mb-8">
            <h3 class="text-2xl text-white mb-2 font-manrope font-light tracking-tighter" style="">Starter</h3>
            <p class="text-white/60 text-sm mb-4 font-sans">Perfect for small teams getting started with data-driven insights.</p>
            <div class="flex items-baseline gap-2">
              <span class="text-3xl text-white font-manrope font-light tracking-tighter" style="">$299</span>
              <span class="text-white/50 text-sm font-sans">/month</span>
            </div>
          </div>

          <!-- CTA Button -->
          <button class="w-full inline-flex items-center justify-center gap-2 h-12 px-6 rounded-2xl bg-white/[0.06] hover:bg-white/[0.12] text-white font-medium transition-all duration-200 ring-1 ring-white/10 hover:ring-white/20 mb-8 font-sans">
            Get Started
            <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=""><path d="m9 18 6-6-6-6" class=""></path></svg>
          </button>

          <!-- Features -->
          <div class="space-y-4">
            <p class="text-xs text-white/50 font-medium tracking-widest uppercase mb-4 font-sans">What's included</p>
            <ul class="space-y-3">
              <li class="flex items-start gap-3">
                <div class="mt-0.5 h-5 w-5 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </div>
                <span class="text-sm text-white/80 font-sans">Up to 10K tracked events per month</span>
              </li>
              <li class="flex items-start gap-3">
                <div class="mt-0.5 h-5 w-5 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </div>
                <span class="text-sm text-white/80 font-sans">Basic attribution modeling</span>
              </li>
              <li class="flex items-start gap-3">
                <div class="mt-0.5 h-5 w-5 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </div>
                <span class="text-sm text-white/80 font-sans">5 integrations included</span>
              </li>
              <li class="flex items-start gap-3">
                <div class="mt-0.5 h-5 w-5 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </div>
                <span class="text-sm text-white/80 font-sans">Email support</span>
              </li>
            </ul>
          </div>
        </div>
      </article>

      <!-- Pro -->
      <article class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-[#0f1419]/90 via-[#131a24]/95 to-[#0a0f14]/90 border border-emerald-500/30 shadow-2xl shadow-emerald-500/10 backdrop-blur-xl ring-1 ring-emerald-500/20 transform scale-105">
        <!-- Animated glow -->
        <div class="absolute -inset-2 bg-gradient-to-r from-emerald-500/10 via-blue-500/10 to-emerald-500/10 rounded-3xl blur-xl animate-pulse"></div>
        
        <div class="relative pt-8 pr-8 pb-8 pl-8">
  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <div class="inline-flex items-center gap-2 text-white/60">
      <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 text-emerald-300 text-xs font-medium font-sans">02</span>
      <div class="flex items-center gap-1">
        <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-emerald-400/60"></span>
      </div>
    </div>
    <div class="inline-flex items-center gap-2 px-2 py-1 rounded-lg bg-emerald-500/20 ring-1 ring-emerald-500/30 text-emerald-300 text-xs font-sans">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
      1 week setup
    </div>
  </div>

  <!-- Title & Price -->
  <div class="mb-8">
    <h3 class="text-2xl text-white mb-2 font-manrope font-light tracking-tighter" style="">Professional</h3>
    <p class="text-white/60 text-sm mb-4 font-sans">Advanced analytics for growing teams and scale-ready insights.</p>
    <div class="flex items-baseline gap-2">
      <span class="text-3xl text-white font-manrope font-light tracking-tighter" style="">$799</span>
      <span class="text-white/50 text-sm font-sans">/month</span>
    </div>
  </div>

  <!-- CTA Button -->
  <button class="w-full inline-flex items-center justify-center gap-2 h-12 px-6 rounded-2xl bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white font-medium transition-all duration-200 shadow-lg shadow-emerald-500/25 ring-1 ring-emerald-500/30 mb-8 font-sans">
    Start Professional
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A 14z" class=""></path></svg>
  </button>

  <!-- Features -->
  <div class="space-y-4">
    <p class="text-xs text-emerald-300 font-medium tracking-widest uppercase mb-4 font-sans">Everything in Starter, plus</p>
    <ul class="space-y-3">
      <li class="flex items-start gap-3">
        <div class="mt-0.5 h-5 w-5 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
        </div>
        <span class="text-sm text-white/80 font-sans">Up to 100K tracked events</span>
      </li>
      <li class="flex items-start gap-3">
        <div class="mt-0.5 h-5 w-5 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
        </div>
        <span class="text-sm text-white/80 font-sans">AI-powered predictive insights</span>
      </li>
      <li class="flex items-start gap-3">
        <div class="mt-0.5 h-5 w-5 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
        </div>
        <span class="text-sm text-white/80 font-sans">Unlimited integrations</span>
      </li>
      <li class="flex items-start gap-3">
        <div class="mt-0.5 h-5 w-5 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
        </div>
        <span class="text-sm text-white/80 font-sans">Priority support &amp; onboarding</span>
      </li>
    </ul>
  </div>
</div>
      </article>

      <!-- Enterprise -->
      <article class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-[#0f1419]/90 via-[#131a24]/95 to-[#0a0f14]/90 border border-white/[0.08] shadow-lg backdrop-blur-xl transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10 hover:border-blue-500/20">
        <!-- Ambient glow -->
        <div class="absolute -inset-1 bg-gradient-to-r from-blue-500/5 via-transparent to-violet-500/5 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        
        <div class="relative p-8">
          <!-- Header -->
          <div class="flex items-center justify-between mb-6">
            <div class="inline-flex items-center gap-2 text-white/60">
              <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/[0.06] ring-1 ring-white/10 text-white/80 text-xs font-medium font-sans">03</span>
              <div class="flex items-center gap-1">
                <span class="h-1.5 w-1.5 rounded-full bg-blue-400"></span>
                <span class="h-1.5 w-1.5 rounded-full bg-blue-400"></span>
                <span class="h-1.5 w-1.5 rounded-full bg-blue-400"></span>
              </div>
            </div>
            <div class="inline-flex items-center gap-2 px-2 py-1 rounded-lg bg-white/[0.06] ring-1 ring-white/10 text-white/70 text-xs font-sans">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              Custom setup
            </div>
          </div>

          <!-- Title & Price -->
          <div class="mb-8">
            <h3 class="text-2xl text-white mb-2 font-manrope font-light tracking-tighter" style="">Enterprise</h3>
            <p class="text-white/60 text-sm mb-4 font-sans">Custom solutions for large organizations with advanced needs.</p>
            <div class="flex items-baseline gap-2">
              <span class="text-3xl text-white font-manrope font-light tracking-tighter" style="">Custom</span>
              <span class="text-white/50 text-sm font-sans">pricing</span>
            </div>
          </div>

          <!-- CTA Button -->
          <button class="w-full inline-flex items-center justify-center gap-2 h-12 px-6 rounded-2xl bg-white/[0.06] hover:bg-white/[0.12] text-white font-medium transition-all duration-200 ring-1 ring-white/10 hover:ring-white/20 mb-8 font-sans">
            Contact Sales
            <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=""><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" class=""></path><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" class=""></path></svg>
          </button>

          <!-- Features -->
          <div class="space-y-4">
            <p class="text-xs text-white/50 font-medium tracking-widest uppercase mb-4 font-sans">Everything in Professional, plus</p>
            <ul class="space-y-3">
              <li class="flex items-start gap-3">
                <div class="mt-0.5 h-5 w-5 rounded-full bg-blue-500/20 ring-1 ring-blue-500/30 flex items-center justify-center flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </div>
                <span class="text-sm text-white/80 font-sans">Unlimited tracked events</span>
              </li>
              <li class="flex items-start gap-3">
                <div class="mt-0.5 h-5 w-5 rounded-full bg-blue-500/20 ring-1 ring-blue-500/30 flex items-center justify-center flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </div>
                <span class="text-sm text-white/80 font-sans">Dedicated infrastructure &amp; SLA</span>
              </li>
              <li class="flex items-start gap-3">
                <div class="mt-0.5 h-5 w-5 rounded-full bg-blue-500/20 ring-1 ring-blue-500/30 flex items-center justify-center flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </div>
                <span class="text-sm text-white/80 font-sans">Custom integrations &amp; API access</span>
              </li>
              <li class="flex items-start gap-3">
                <div class="mt-0.5 h-5 w-5 rounded-full bg-blue-500/20 ring-1 ring-blue-500/30 flex items-center justify-center flex-shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                </div>
                <span class="text-sm text-white/80 font-sans">Dedicated customer success manager</span>
              </li>
            </ul>
          </div>
        </div>
      </article>
    </div>

    <!-- Footnote -->
    <div class="mt-16 flex flex-col items-center text-center">
      <p class="text-white/50 text-sm font-sans">
        Need a custom solution? 
        <a href="#" class="text-emerald-400 hover:text-emerald-300 underline underline-offset-4 transition-colors font-sans" title="Link disabled in preview mode">
          Let's talk about your requirements
        </a>
      </p>
    </div>
  </div>