@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --background: 222 47% 7%;
  --foreground: 210 40% 96%;

  --card: 222 47% 9%;
  --card-foreground: 210 40% 96%;

  --popover: 222 47% 9%;
  --popover-foreground: 210 40% 96%;

  --primary: 217 91% 60%;
  --primary-foreground: 222 47% 7%;

  --secondary: 187 82% 53%;
  --secondary-foreground: 222 47% 7%;

  --muted: 222 30% 16%;
  --muted-foreground: 215 20% 60%;

  --accent: 263 70% 76%;
  --accent-foreground: 222 47% 7%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 222 30% 18%;
  --input: 222 30% 18%;
  --ring: 217 91% 60%;

  --radius: 0.75rem;

  --neon-glow: 0 0 20px hsl(217 91% 60% / 0.4), 0 0 60px hsl(217 91% 60% / 0.1);
  --neon-glow-cyan: 0 0 20px hsl(187 82% 53% / 0.4), 0 0 60px hsl(187 82% 53% / 0.1);
  --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(187 82% 53%));
  --gradient-accent: linear-gradient(135deg, hsl(217 91% 60%), hsl(263 70% 76%));

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

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: var(--gradient-primary);
}

.text-gradient-accent {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: var(--gradient-accent);
}

.bg-gradient-primary {
  background-image: var(--gradient-primary);
}

.bg-gradient-accent {
  background-image: var(--gradient-accent);
}

.neon-glow {
  box-shadow: var(--neon-glow);
}

.neon-glow-cyan {
  box-shadow: var(--neon-glow-cyan);
}

.glass {
  background-color: hsla(var(--card), 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsla(var(--border), 0.5);
}

.grid-pattern {
  background-image:
    linear-gradient(hsla(var(--border), 0.3) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--border), 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

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


@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

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

.btn-telegram {
  background-color: #0088cc;
  color: white;
  transition: all 0.2s;
}

.btn-telegram:hover {
  background-color: #0077b3;
  box-shadow: 0 0 15px rgba(0, 136, 204, 0.4);
}