.cursor-canvas {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 9999;
            
        }

        .cursor-dot {
            position: fixed;
            width: 10px;
            height: 10px;
            background: #6003a8;
            border-radius: 50%;
            pointer-events: none;
            z-index: 10000;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px #6003a8;
        }

        /* Floating geometric shapes */
        .bg-shape {
            position: absolute;
            opacity: 0.1;
            animation: float 6s ease-in-out infinite;
        }

        .bg-shape:nth-child(1) {
            top: 20%;
            left: 10%;
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 50px solid #8a2be2;
        }

        .bg-shape:nth-child(2) {
            top: 70%;
            right: 15%;
            width: 40px;
            height: 40px;
            background: linear-gradient(45deg, #00ffff, #8a2be2);
            border-radius: 8px;
            animation-delay: -2s;
        }
/* 
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        } */