:root {
  --background: 225 45% 5%;
  --foreground: 210 40% 96%;
  --card: 225 40% 7%;
  --card-foreground: 210 40% 96%;
  --popover: 225 40% 7%;
  --popover-foreground: 210 40% 96%;
  --primary: 217 91% 60%;
  --primary-foreground: 225 45% 5%;
  --secondary: 188 95% 43%;
  --secondary-foreground: 225 45% 5%;
  --muted: 220 25% 12%;
  --muted-foreground: 215 20% 55%;
  --accent: 220 25% 14%;
  --accent-foreground: 210 40% 96%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 220 20% 14%;
  --input: 220 20% 14%;
  --ring: 217 91% 60%;
  --chart-1: 217 91% 60%;
  --chart-2: 188 95% 43%;
  --chart-3: 142 71% 45%;
  --chart-4: 43 96% 56%;
  --chart-5: 0 84% 60%;
  --radius: 0.75rem;
  --sidebar-background: 225 45% 5%;
  --sidebar-foreground: 210 40% 96%;
  --sidebar-primary: 217 91% 60%;
  --sidebar-primary-foreground: 225 45% 5%;
  --sidebar-accent: 220 25% 14%;
  --sidebar-accent-foreground: 210 40% 96%;
  --sidebar-border: 220 20% 14%;
  --sidebar-ring: 217 91% 60%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-gradient {
  color: transparent;
  background-image: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.text-gradient-strong {
  color: transparent;
  background-image: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.glass-card-hover {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-hover:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.glow-blue {
  box-shadow: 0 0 50px rgba(59, 130, 246, 0.12), 0 0 100px rgba(59, 130, 246, 0.06);
}

.glow-cyan {
  box-shadow: 0 0 50px rgba(6, 182, 212, 0.12), 0 0 100px rgba(6, 182, 212, 0.06);
}

.btn-glow {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 4px 16px rgba(59, 130, 246, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glow:hover {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), 0 8px 24px rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.border-gradient {
  border-image: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(6, 182, 212, 0.3)) 1;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(59, 130, 246, 0.3);
  color: white;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: hsl(225 45% 5%);
}

::-webkit-scrollbar-thumb {
  background: hsl(220 20% 20%);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(217 91% 50%);
}