@layer utilities {
            .text-gradient {
                background: linear-gradient(90deg, #0066FF, #00DDEB, #A855F7);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            .bg-grid {
                background-image: 
                    linear-gradient(rgba(0, 102, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 102, 255, 0.05) 1px, transparent 1px);
                background-size: 40px 40px;
            }
            .glass {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .glass-dark {
                background: rgba(15, 23, 42, 0.7);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            .glow-border {
                position: relative;
                overflow: hidden;
            }
            .glow-border::before {
                content: '';
                position: absolute;
                inset: -2px;
                background: linear-gradient(45deg, #0066FF, #00DDEB, #A855F7, #0066FF);
                background-size: 400% 400%;
                z-index: -1;
                border-radius: inherit;
                animation: shimmer 3s linear infinite;
                filter: blur(8px);
                opacity: 0.7;
            }
            .card-hover {
                transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            .card-hover:hover {
                transform: translateY(-8px) scale(1.02);
            }
            .shine-effect {
                position: relative;
                overflow: hidden;
            }
            .shine-effect::after {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: linear-gradient(
                    to right,
                    transparent 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    transparent 100%
                );
                transform: rotate(30deg);
                transition: all 0.6s;
                opacity: 0;
            }
            .shine-effect:hover::after {
                animation: shine 1.5s ease-in-out;
                opacity: 1;
            }
            @keyframes shine {
                0% { left: -100%; }
                100% { left: 150%; }
            }
            .dot-line {
                background-image: radial-gradient(circle, #00DDEB 1px, transparent 1px);
                background-size: 20px 20px;
            }
        }