*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #050B18;
  --navy2: #0A1628;
  --violet: #7B2FFF;
  --violet-light: #9B5FFF;
  --cyan: #00E5FF;
  --cyan-dim: #00B8CC;
  --white: #F0F4FF;
  --muted: #8892B0;
  --card-bg: rgba(11, 22, 48, 0.6);
  --glass: rgba(123, 47, 255, 0.08);
}

html { scroll-behavior: smooth; }

body {
  position: relative;
  font-family: 'Inter', sans-serif;
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
}

body.has-custom-cursor { cursor: none; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle at 20% 10%, rgba(0,229,255,0.1), transparent 30%),
              radial-gradient(circle at 80% 20%, rgba(123,47,255,0.12), transparent 35%),
              linear-gradient(180deg, #050B18 0%, #070D1C 48%, #050B18 100%);
}

.aurora-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora-bg span {
  position: absolute;
  width: 45vw;
  height: 45vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.24;
  mix-blend-mode: screen;
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
.aurora-bg span:nth-child(1) { left: -12%; top: 8%; background: rgba(0,229,255,0.55); }
.aurora-bg span:nth-child(2) { right: -14%; top: 28%; background: rgba(123,47,255,0.5); animation-delay: -6s; }
.aurora-bg span:nth-child(3) { left: 34%; bottom: -22%; background: rgba(0,184,204,0.38); animation-delay: -10s; }

.mouse-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 360px;
  height: 360px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,229,255,0.16), rgba(123,47,255,0.08) 42%, transparent 70%);
  transition: opacity 0.25s ease;
}
body:hover .mouse-glow { opacity: 1; }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1002;
  background: rgba(255,255,255,0.03);
}
.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 16px rgba(0,229,255,0.85);
}
