: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; }
}