:root {
  --cyan-primary: #00D4FF;
  --cyan-dark: #00A8CC;
  --dark-bg: #0A0E17;
  --dark-card: #111827;
  --gray-text: #94A3B8;
}

/* Light theme */
body.light-theme {
  --cyan-primary: #0891B2;
  --cyan-dark: #0E7490;
  --dark-bg: #FFFFFF;
  --dark-card: #F8FAFC;
  --gray-text: #475569;
  background-color: #FFFFFF;
  color: #0F172A;
}

body { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.font-heading { font-family: 'Space Grotesk', sans-serif; }
.font-body { font-family: 'Inter', sans-serif; }

.gradient-text {
  background: linear-gradient(135deg, var(--cyan-primary) 0%, var(--cyan-dark) 50%, #0891B2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-bg {
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 168, 204, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-card) 100%);
}

.card-glow:hover { box-shadow: 0 0 40px rgba(0, 212, 255, 0.15); }

.btn-primary {
  background: linear-gradient(135deg, #00D4FF 0%, #00A8CC 100%);
  transition: all 0.3s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3); }

.btn-secondary {
  border: 1px solid rgba(0, 212, 255, 0.5);
  transition: all 0.3s ease;
}

.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: #00D4FF; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

.grid-pattern {
  background-image: 
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }

.filter-btn.active {
  background: rgba(0, 212, 255, 0.2);
  border-color: #00D4FF;
  color: #00D4FF;
}