/* Ultra-Modern Cyberpunk-inspired Design */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --neon-blue: #00f3ff;
  --neon-purple: #bc13fe;
  --glow: 0 0 20px rgba(188,19,254,0.8);
}

body {
  @apply bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 text-gray-100 overflow-x-hidden;
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Animated Cyber Grid Background */
body::before {
  content: '';
  @apply absolute inset-0 opacity-20 pointer-events-none;
  background-image: 
    linear-gradient(to right, rgba(0,243,255,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,243,255,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridScroll 40s linear infinite;
}

/* Holographic Navigation */
nav {
  @apply bg-gray-900/80 backdrop-blur-md py-6 border-b border-neon-blue/30 shadow-2xl;
  box-shadow: 0 0 40px rgba(0,243,255,0.2);
  animation: navGlow 3s ease-in-out infinite alternate;
}
nav h1 {
  @apply text-3xl font-black bg-clip-text text-transparent;
  background-image: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
  text-shadow: var(--glow);
}
nav button {
  @apply px-6 py-3 font-bold text-lg relative overflow-hidden transition-all duration-500;
}
nav button::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-neon-blue to-neon-purple opacity-0 transition-opacity duration-300;
}
nav button:hover::before {
  @apply opacity-20;
}

/* Cyberpunk Hero Section */
header {
  @apply relative py-32 text-center overflow-hidden;
  perspective: 1000px;
}
header::after {
  content: '';
  @apply absolute inset-0 bg-gradient-to-b from-neon-blue/10 to-neon-purple/10;
  animation: hologram 8s linear infinite;
}
header h1 {
  @apply text-7xl font-black mb-8 uppercase;
  text-shadow: 0 0 30px var(--neon-purple);
  animation: textFloat 6s ease-in-out infinite;
  background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
header a {
  @apply inline-block px-14 py-5 text-2xl font-bold bg-black/50 backdrop-blur-sm border-2 border-neon-blue rounded-none;
  box-shadow: var(--glow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
header a::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-neon-blue to-neon-purple opacity-20;
  animation: buttonScan 4s linear infinite;
}
header a:hover {
  @apply border-neon-purple bg-black/70 scale-105;
  box-shadow: 0 0 40px var(--neon-purple);
}

/* Neon Cards with Hover Matrix Effect */
article {
  @apply bg-gray-900/60 backdrop-blur-md border border-neon-blue/30 p-8 relative;
  transition: all 0.4s ease;
  box-shadow: var(--glow);
}
article::before {
  content: '';
  @apply absolute inset-0 bg-repeat opacity-10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%2300f3ff' d='M100 0L0 100l100 100 100-100z'/%3E%3C/svg%3E");
  background-size: 40px;
}
article:hover {
  @apply border-neon-purple translate-y-[-10px];
  box-shadow: 0 0 50px var(--neon-purple);
}

/* Animated Keyframes */
@keyframes navGlow {
  from { box-shadow: 0 0 30px rgba(0,243,255,0.2); }
  to { box-shadow: 0 0 50px rgba(188,19,254,0.3); }
}

@keyframes hologram {
  0% { opacity: 0.1; }
  50% { opacity: 0.3; }
  100% { opacity: 0.1; }
}

@keyframes textFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  25% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg); }
  75% { transform: translateY(10px) rotateX(-5deg) rotateY(-5deg); }
}

@keyframes buttonScan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes gridScroll {
  from { background-position: 0 0; }
  to { background-position: -1000px 1000px; }
}

/* Neon Table */
th {
  @apply bg-gradient-to-r from-neon-blue/30 to-neon-purple/30 text-neon-blue border-b border-neon-purple/50;
}
td {
  @apply bg-gray-900/50 border-b border-neon-blue/20;
}

/* Glowing Testimonials */
.testimonial {
  @apply bg-gray-900/60 border border-neon-purple/30 relative;
  box-shadow: 0 0 40px rgba(188,19,254,0.2);
}
.testimonial::after {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-neon-blue/10 to-neon-purple/10;
  animation: hologram 8s linear infinite;
}

/* Cyberpunk FAQ */
.faq {
  @apply bg-gray-900/60 border-l-4 border-neon-blue;
  transition: all 0.3s ease;
}
.faq:hover {
  @apply border-neon-purple bg-gray-900/80;
  box-shadow: var(--glow);
}