.purchase-step-card {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
        z-index: 10;
        position: relative;
    }
    
    .purchase-step-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    }

    .step-number {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        box-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
    }

    .payment-badge {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
    }

    .payment-badge:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    /* Added more visible, brighter animated blue lights with better blur and movement */
    .ambient-light {
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        pointer-events: none;
        z-index: 1;
    }

    .light-1 {
        top: 10%;
        left: 5%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(37,99,235,0.6) 0%, rgba(59,130,246,0.3) 40%, rgba(0,0,0,0) 70%);
        animation: float1 15s infinite ease-in-out;
    }

    .light-2 {
        bottom: 10%;
        right: 5%;
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(59,130,246,0.5) 0%, rgba(37,99,235,0.3) 40%, rgba(0,0,0,0) 70%);
        animation: float2 18s infinite ease-in-out;
    }

    .light-3 {
        top: 50%;
        left: 50%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(96,165,250,0.4) 0%, rgba(59,130,246,0.2) 50%, rgba(0,0,0,0) 70%);
        animation: float3 12s infinite ease-in-out;
        transform: translate(-50%, -50%);
    }

    @keyframes float1 {
        0%, 100% { 
            transform: translate(0, 0); 
            opacity: 0.6;
        }
        33% { 
            transform: translate(100px, -80px); 
            opacity: 0.8;
        }
        66% { 
            transform: translate(-50px, 100px); 
            opacity: 0.5;
        }
    }

    @keyframes float2 {
        0%, 100% { 
            transform: translate(0, 0); 
            opacity: 0.5;
        }
        33% { 
            transform: translate(-120px, 70px); 
            opacity: 0.7;
        }
        66% { 
            transform: translate(80px, -90px); 
            opacity: 0.6;
        }
    }

    @keyframes float3 {
        0%, 100% { 
            transform: translate(-50%, -50%) scale(1); 
            opacity: 0.4;
        }
        50% { 
            transform: translate(-50%, -50%) scale(1.3); 
            opacity: 0.6;
        }
    }