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

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

@layer base {
  body {
    @apply font-['Rajdhani'] text-gray-400 bg-[#050505] antialiased selection:bg-[#e60000] selection:text-white;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Syncopate'] text-white font-bold tracking-widest uppercase;
  }
}

@layer components {
  .btn-neon {
    @apply inline-flex items-center justify-center px-8 py-3 bg-transparent border-2 border-[#e60000] text-[#e60000] font-['Syncopate'] text-xs tracking-widest uppercase hover:bg-[#e60000] hover:text-white hover:shadow-[0_0_20px_rgba(230,0,0,0.5)] transition-all duration-300;
  }
  
  .btn-solid-neon {
    @apply inline-flex items-center justify-center px-8 py-3 bg-[#e60000] text-white font-['Syncopate'] text-xs tracking-widest uppercase shadow-[0_0_15px_rgba(230,0,0,0.3)] hover:bg-white hover:text-black hover:shadow-[0_0_20px_rgba(255,255,255,0.5)] transition-all duration-300;
  }
}

.text-neon { color: #e60000; }
.bg-neon { background-color: #e60000; }

.nav-scrolled {
  @apply bg-[#050505]/95 backdrop-blur-md border-b border-[#e60000]/20;
}

.glitch-wrapper {
  position: relative;
  overflow: hidden;
}

.service-card-apex {
  background: linear-gradient(145deg, #111 0%, #080808 100%);
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.service-card-apex::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: #e60000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card-apex:hover {
  transform: translateY(-5px);
  border-color: rgba(230,0,0,0.3);
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.service-card-apex:hover::before {
  transform: scaleX(1);
}