:root {
    --primary-blue: #2563eb;
    --blue-light: #3b82f6;
    --blue-dark: #1d4ed8;
    --blue-glow: rgba(37, 99, 235, 0.5);
    --gray-900: #0f172a;
    --gray-800: #1e293b;
    --gray-700: #334155;
    --gray-600: #475569;
    --gray-400: #94a3b8;
    --gray-300: #cbd5e1;
    --white: #ffffff;
}
.background-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, var(--blue-glow) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--blue-glow) 0%, transparent 50%),
        radial-gradient(circle at 60% 40%, rgba(37, 99, 235, 0.3) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.1) 1px, transparent 1px);
    background-size: 100px 100px;
    pointer-events: none;
    z-index: -1;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(100px, 100px); }
}