Interactive Pricing Cards with Draggable Tiers

<div
  class="antialiased bg-gray-50 text-gray-900 min-h-screen flex flex-col items-center justify-center overflow-x-hidden relative font-['Inter',sans-serif] font-light selection:bg-cyan-500/20 py-20 md:py-0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');

    .perspective-1200 {
      perspective: 1200px;
    }
  </style>

  <!-- Background Layers -->
  <div class="fixed inset-0 z-0 flex items-center justify-center pointer-events-none overflow-hidden">
    <div
      class="absolute w-[70vw] h-[70vw] max-w-[900px] max-h-[900px] rounded-full blur-[120px] opacity-30 animate-[pulse_6s_ease-in-out_infinite]"
      style="background: radial-gradient(circle, rgba(34,211,238,0.2) 0%, transparent 70%); left: 5%; top: 10%;"></div>
    <div
      class="absolute w-[70vw] h-[70vw] max-w-[900px] max-h-[900px] rounded-full blur-[120px] opacity-30 animate-[pulse_8s_ease-in-out_infinite]"
      style="background: radial-gradient(circle, rgba(251,146,60,0.2) 0%, transparent 70%); right: 5%; bottom: 10%;">
    </div>
  </div>
  <canvas id="noiseCanvas"
    class="fixed inset-0 pointer-events-none z-50 opacity-[0.03] w-full h-full mix-blend-multiply"></canvas>

  <!-- Header Section -->
  <div class="relative z-10 text-center mb-10 md:mb-16 px-6 flex flex-col items-center w-full max-w-3xl mx-auto">
    <div
      class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/80 border border-gray-200/50 mb-6 backdrop-blur-md"
      style="box-shadow: 0 4px 12px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,1);">
      <div class="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-pulse"></div>
      <span class="text-xs text-gray-500 tracking-widest uppercase font-medium">Service Levels</span>
    </div>
    <h1 class="text-4xl md:text-5xl tracking-tight text-gray-900 mb-4 font-normal">Choose Your Configuration</h1>
    <p class="text-sm text-gray-500 max-w-md typewriter-text h-10 md:h-auto"
      data-text="Select the bandwidth and security parameters for your environment."></p>
  </div>

  <!-- Main Container -->
  <div
    class="relative w-full max-w-5xl mx-auto px-6 flex flex-col md:flex-row items-center justify-center gap-10 md:gap-8 z-10 perspective-1200">

    <!-- Tier 1: Standard Node -->
    <div class="draggable-card cursor-grab select-none relative w-full max-w-sm md:w-[22rem] h-[32rem] z-10">
      <div
        class="relative w-full h-full rounded-3xl p-8 flex flex-col group transition-all duration-700 ease-out hover:-translate-y-4 hover:rotate-0 md:-rotate-6 md:translate-x-12"
        style="background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%); box-shadow: 2px 4px 8px rgba(0,0,0,0.02), 8px 16px 24px rgba(0,0,0,0.03), 64px 96px 128px rgba(0,0,0,0.12), 80px 120px 160px rgba(6, 182, 212, 0.15), inset 0 1px 1px rgba(255,255,255,1), 0 0 0 1px rgba(0,0,0,0.04);">
        <div class="flex justify-between items-start relative z-10 mb-8">
          <div class="w-16 h-16 rounded-xl p-2.5 flex items-end justify-between gap-0.5 bg-white shadow-sm">
            <div class="w-full bg-cyan-500/90 rounded-t-sm animate-pulse"
              style="height: 40%; animation-duration: 0.7s;"></div>
            <div class="w-full bg-cyan-500/90 rounded-t-sm animate-pulse"
              style="height: 85%; animation-duration: 1.2s; animation-delay: 0.2s;"></div>
            <div class="w-full bg-cyan-500/90 rounded-t-sm animate-pulse"
              style="height: 100%; animation-duration: 1.5s; animation-delay: 0.1s;"></div>
            <div class="w-full bg-cyan-500/90 rounded-t-sm animate-pulse"
              style="height: 30%; animation-duration: 0.8s; animation-delay: 0.7s;"></div>
          </div>
          <div class="flex flex-col items-end">
            <div class="flex items-center gap-1.5 text-cyan-600 font-normal">
              <iconify-icon icon="solar:box-linear" class="text-lg"></iconify-icon>
              <span class="tracking-tight">INIT</span>
            </div>
            <div class="text-[10px] text-cyan-600/70 mt-1 uppercase tracking-widest">Base Node</div>
          </div>
        </div>
        <div class="relative z-10 mb-6">
          <div class="flex items-end gap-2 mb-2">
            <span class="text-5xl tracking-tight text-cyan-500 font-normal">0</span>
            <span class="text-sm text-cyan-600/70 mb-1 tracking-widest uppercase">/ Mo</span>
          </div>
          <h2 class="text-xl tracking-tight text-gray-900 mb-2 font-normal">Standard Node</h2>
          <p class="text-xs text-gray-500 leading-relaxed typewriter-text min-h-[2.5rem]"
            data-text="Essential telemetry and foundational security layers."></p>
        </div>
        <div class="relative z-10 flex flex-col gap-3 mb-8 flex-grow">
          <div class="w-full h-px mb-1 bg-black/5"></div>
          <div class="flex items-center gap-3 text-xs text-gray-600">
            <iconify-icon icon="solar:shield-check-linear" class="text-cyan-500 text-base"></iconify-icon>
            <span>Standard Encryption</span>
          </div>
          <div class="flex items-center gap-3 text-xs text-gray-600">
            <iconify-icon icon="solar:database-linear" class="text-cyan-500 text-base"></iconify-icon>
            <span>Metered Bandwidth</span>
          </div>
        </div>
        <button class="relative z-10 w-full py-3.5 px-5 rounded-xl flex items-center justify-between group/btn transition-all duration-300 hover:bg-gray-50 bg-white border border-black/5 shadow-sm">
                    <span class="text-xs text-cyan-600 tracking-widest uppercase font-medium">Deploy</span>
                    <iconify-icon icon="solar:alt-arrow-right-linear" class="text-cyan-500 text-lg group-hover/btn:translate-x-1 transition-transform"></iconify-icon>
                </button>
      </div>
    </div>

    <!-- Tier 2: Premium Relay -->
    <div class="draggable-card cursor-grab select-none relative w-full max-w-sm md:w-[22rem] h-[32rem] z-0">
      <div
        class="relative w-full h-full rounded-3xl p-8 flex flex-col group transition-all duration-700 ease-out hover:-translate-y-4 hover:rotate-0 md:rotate-6 md:-translate-x-12"
        style="background: linear-gradient(145deg, #ffffff 0%, #fff7ed 100%); box-shadow: 2px 4px 8px rgba(0,0,0,0.02), 8px 16px 24px rgba(0,0,0,0.03), 64px 96px 128px rgba(0,0,0,0.12), 80px 120px 160px rgba(249, 115, 22, 0.15), inset 0 1px 1px rgba(255,255,255,1), 0 0 0 1px rgba(0,0,0,0.04);">
        <div class="flex justify-between items-start relative z-10 mb-8">
          <div class="w-16 h-16 rounded-xl p-2.5 flex items-end justify-between gap-0.5 bg-white shadow-sm">
            <div class="w-full bg-orange-500/90 rounded-t-sm animate-pulse"
              style="height: 60%; animation-duration: 0.9s;"></div>
            <div class="w-full bg-orange-500/90 rounded-t-sm animate-pulse"
              style="height: 90%; animation-duration: 1.1s; animation-delay: 0.1s;"></div>
            <div class="w-full bg-orange-500/90 rounded-t-sm animate-pulse"
              style="height: 50%; animation-duration: 0.8s; animation-delay: 0.6s;"></div>
            <div class="w-full bg-orange-500/90 rounded-t-sm animate-pulse"
              style="height: 75%; animation-duration: 1.3s; animation-delay: 0.3s;"></div>
          </div>
          <div class="flex flex-col items-end">
            <div class="flex items-center gap-1.5 text-orange-600 font-normal">
              <iconify-icon icon="solar:layers-linear" class="text-lg"></iconify-icon>
              <span class="tracking-tight">PLUS</span>
            </div>
            <div class="text-[10px] text-orange-600/70 mt-1 uppercase tracking-widest">Ultra Relay</div>
          </div>
        </div>
        <div class="relative z-10 mb-6">
          <div class="flex items-end gap-2 mb-2">
            <span class="text-5xl tracking-tight text-orange-500 font-normal">50</span>
            <span class="text-sm text-orange-600/70 mb-1 tracking-widest uppercase">/ Mo</span>
          </div>
          <h2 class="text-xl tracking-tight text-gray-900 mb-2 font-normal">Premium Relay</h2>
          <p class="text-xs text-gray-500 leading-relaxed typewriter-text min-h-[2.5rem]"
            data-text="High-speed pathways featuring intelligent failover."></p>
        </div>
        <div class="relative z-10 flex flex-col gap-3 mb-8 flex-grow">
          <div class="w-full h-px mb-1 bg-black/5"></div>
          <div class="flex items-center gap-3 text-xs text-gray-600">
            <iconify-icon icon="solar:shield-keyhole-linear" class="text-orange-500 text-base"></iconify-icon>
            <span>Advanced Cryptography</span>
          </div>
          <div class="flex items-center gap-3 text-xs text-gray-600">
            <iconify-icon icon="solar:infinity-linear" class="text-orange-500 text-base"></iconify-icon>
            <span>Unlimited Transfer</span>
          </div>
        </div>
        <button class="relative z-10 w-full py-3.5 px-5 rounded-xl flex items-center justify-between group/btn transition-all duration-300 hover:bg-[#fffcf9] bg-white border border-black/5 shadow-sm">
                    <span class="text-xs text-orange-600 tracking-widest uppercase font-medium">Deploy</span>
                    <iconify-icon icon="solar:alt-arrow-right-linear" class="text-orange-500 text-lg group-hover/btn:translate-x-1 transition-transform"></iconify-icon>
                </button>
      </div>
    </div>
  </div>

  <!-- Logic Layer -->
  <script>
    // WebGL Noise Background Logic
        (function() {
            const c = document.getElementById('noiseCanvas');
            const gl = c.getContext('webgl', { alpha: true });
            if (!gl) return;
            const pid = gl.createProgram();
            const shader = (type, src) => {
                const s = gl.createShader(type);
                gl.shaderSource(s, src);
                gl.compileShader(s);
                gl.attachShader(pid, s);
            };
            shader(gl.VERTEX_SHADER, 'attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}');
            shader(gl.FRAGMENT_SHADER, 'precision lowp float;uniform float t;float rand(vec2 n){return fract(sin(dot(n,vec2(12.9898,4.1414)))*43758.5453);}void main(){vec2 uv=gl_FragCoord.xy;float n=rand(uv+vec2(t,-t));gl_FragColor=vec4(vec3(n),1.0);}');
            gl.linkProgram(pid); gl.useProgram(pid);
            gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
            const p = gl.getAttribLocation(pid, 'p');
            gl.enableVertexAttribArray(p); gl.vertexAttribPointer(p, 2, gl.FLOAT, false, 0, 0);
            const tLoc = gl.getUniformLocation(pid, 't');
            const resize = () => { c.width = window.innerWidth; c.height = window.innerHeight; gl.viewport(0,0,c.width,c.height); };
            window.addEventListener('resize', resize); resize();
            let time = 0;
            const draw = () => { time += 0.05; gl.uniform1f(tLoc, time); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); requestAnimationFrame(draw); };
            draw();
        })();

        // Typewriter Effect Logic
        document.querySelectorAll('.typewriter-text').forEach(el => {
            const text = el.getAttribute('data-text');
            let i = 0;
            const type = () => {
                if (i < text.length) { el.innerHTML += text.charAt(i); i++; setTimeout(type, 35); }
            };
            setTimeout(type, 800 + Math.random() * 500);
        });

        // Draggable Cards Logic
        document.querySelectorAll('.draggable-card').forEach(wrapper => {
            let isDragging = false, startX, startY, currentX = 0, currentY = 0;
            const originalZ = window.getComputedStyle(wrapper).zIndex;
            const start = (e) => {
                if (e.target.closest('button')) return;
                isDragging = true; wrapper.style.transition = 'none'; wrapper.style.zIndex = '50';
                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                const clientY = e.touches ? e.touches[0].clientY : e.clientY;
                startX = clientX - currentX; startY = clientY - currentY;
                wrapper.classList.replace('cursor-grab', 'cursor-grabbing');
            };
            const move = (e) => {
                if (!isDragging) return;
                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
                const clientY = e.touches ? e.touches[0].clientY : e.clientY;
                currentX = clientX - startX; currentY = clientY - startY;
                wrapper.style.transform = `translate(${currentX}px, ${currentY}px)`;
            };
            const end = () => {
                if (!isDragging) return;
                isDragging = false; wrapper.style.zIndex = originalZ;
                wrapper.style.transition = 'transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)';
                currentX = 0; currentY = 0; wrapper.style.transform = `translate(0px, 0px)`;
                wrapper.classList.replace('cursor-grabbing', 'cursor-grab');
            };
            wrapper.addEventListener('mousedown', start);
            window.addEventListener('mousemove', move);
            window.addEventListener('mouseup', end);
            wrapper.addEventListener('touchstart', start, {passive: true});
            window.addEventListener('touchmove', (e) => { if(isDragging) e.preventDefault(); move(e); }, {passive: false});
            window.addEventListener('touchend', end);
        });
  </script>
</div>