:root {
    --text-primary: rgba(255,255,255,0.92);
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    min-height: 100vh;
    background: #020812;
    color: var(--text-primary);
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}
.bg-canvas {
    position: fixed; inset: 0; z-index: 0;
    background: radial-gradient(ellipse at 20% 20%, #0a1a3a 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, #001a2e 0%, transparent 60%),
                radial-gradient(ellipse at 50% 50%, #020812 0%, #000 100%);
}
.orb {
    position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0;
    animation: orbDrift linear infinite;
}
.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,229,255,0.12) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation-duration: 25s;
}
.orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(68,138,255,0.1) 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
    animation-duration: 30s;
    animation-delay: -10s;
}
.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(29,233,182,0.08) 0%, transparent 70%);
    top: 40%;
    left: 40%;
    animation-duration: 20s;
    animation-delay: -5s;
}
.orb-4 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,215,64,0.06) 0%, transparent 70%);
    top: 10%;
    right: 20%;
    animation-duration: 18s;
    animation-delay: -8s;
}
@keyframes orbDrift {
    0%   {
        transform: translate(0,0) scale(1);
    }
    25%  {
        transform: translate(60px,-40px) scale(1.1);
    }
    50%  {
        transform: translate(30px,70px) scale(0.95);
    }
    75%  {
        transform: translate(-50px,20px) scale(1.05);
    }
    100% {
        transform: translate(0,0) scale(1);
    }
}
.particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0,229,255,0.6);
    animation: particleFloat linear infinite;
    box-shadow: 0 0 6px rgba(0,229,255,0.8);
}
@keyframes particleFloat {
    0%   {
        transform: translateY(100vh) translateX(0) scale(1);
        opacity: 0;
    }
    10%  {
        opacity: 1;
    }
    90%  {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) translateX(var(--dx,30px)) scale(0);
        opacity: 0;
    }
}