@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --electric-blue: #00D4FF;
    --neon-orange: #FF6B35;
    --charcoal-dark: #1A1A2E;
    --charcoal-medium: #2D2D44;
    --charcoal-light: #3D3D5C;
    --glass-white: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--charcoal-dark);
    color: #FFFFFF;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.02em;
  }
  
  p, span, a, li, button, input, textarea, select {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
  
  strong, b {
    color: inherit;
  }
}

@layer components {
  .btn-primary {
    @apply px-8 py-4 bg-neon-orange text-white font-semibold rounded-xl 
           transition-all duration-300 hover:bg-orange-500 hover:scale-105 
           hover:shadow-lg hover:shadow-neon-orange/30 active:scale-95;
  }
  
  .btn-secondary {
    @apply px-8 py-4 border-2 border-electric-blue text-electric-blue 
           font-semibold rounded-xl transition-all duration-300 
           hover:bg-electric-blue hover:text-charcoal-dark hover:scale-105;
  }
  
  .glass-card {
    @apply bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-8;
  }
  
  .service-card {
    @apply glass-card transition-all duration-500 hover:border-neon-orange/50 
           hover:shadow-xl hover:shadow-neon-orange/10 hover:-translate-y-2;
  }
  
  .stat-number {
    @apply text-5xl md:text-6xl font-bold bg-gradient-to-r from-electric-blue to-neon-orange 
           bg-clip-text text-transparent;
  }
}

@layer utilities {
  .text-electric-blue {
    color: var(--electric-blue);
  }
  
  .text-neon-orange {
    color: var(--neon-orange);
  }
  
  .bg-charcoal-dark {
    background-color: var(--charcoal-dark);
  }
  
  .bg-charcoal-medium {
    background-color: var(--charcoal-medium);
  }
  
  .bg-charcoal-light {
    background-color: var(--charcoal-light);
  }
  
  .bg-electric-blue {
    background-color: var(--electric-blue);
  }
  
  .bg-neon-orange {
    background-color: var(--neon-orange);
  }
  
  .from-electric-blue {
    --gradient-from: var(--electric-blue);
  }
  
  .to-neon-orange {
    --gradient-to: var(--neon-orange);
  }
  
  .border-electric-blue {
    border-color: var(--electric-blue);
  }
  
  .border-neon-orange {
    border-color: var(--neon-orange);
  }
  
  .shadow-electric-blue\/30 {
    box-shadow: 0 10px 40px -10px rgba(0, 212, 255, 0.3);
  }
  
  .shadow-neon-orange\/30 {
    box-shadow: 0 10px 40px -10px rgba(255, 107, 53, 0.3);
  }
  
  .diagonal-grid {
    background-image: 
      linear-gradient(45deg, transparent 25%, rgba(0, 212, 255, 0.03) 25%, rgba(0, 212, 255, 0.03) 50%, transparent 50%, transparent 75%, rgba(0, 212, 255, 0.03) 75%, rgba(0, 212, 255, 0.03) 100%);
    background-size: 60px 60px;
  }
}


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

::-webkit-scrollbar-track {
  background: var(--charcoal-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--charcoal-light);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--electric-blue);
}


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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.6); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

.animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}


#mobile-menu {
  transition: all 0.3s ease-in-out;
}

#mobile-menu.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

#mobile-menu:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


#cookie-banner {
  transition: all 0.3s ease-in-out;
}

#cookie-banner.hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

#cookie-banner:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


.faq-item {
  transition: all 0.3s ease-in-out;
}

.faq-answer {
  transition: all 0.3s ease-in-out;
  max-height: 0;
  overflow: hidden;
}

.faq-answer.open {
  max-height: 500px;
}


a, button {
  transition: all 0.2s ease-in-out;
}


input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--electric-blue);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}


.loader {
  border: 3px solid var(--charcoal-light);
  border-top: 3px solid var(--electric-blue);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}