:root {
  --primary: #6366f1; /* Futuristic Indigo */
  --primary-light: #818cf8;
  --primary-glow: rgba(99, 102, 241, 0.35);
  
  --secondary: #06b6d4; /* Cyber Cyan */
  --accent: #ec4899; /* Neon Fuchsia */
  --emerald: #10b981;
  
  --bg-dark: #05070f;
  --bg-card: rgba(13, 17, 30, 0.75);
  --bg-card-hover: rgba(22, 29, 49, 0.9);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(99, 102, 241, 0.4);
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  overflow-x: hidden;
  position: relative;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 25%, rgba(6, 182, 212, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 50% 70%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 60px 60px, 60px 60px;
  background-attachment: fixed;
}

/* Glassmorphism */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
}

.glass-nav {
  background: rgba(5, 7, 15, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-glass);
}

/* Glow Badges & Gradients */
.ai-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 30%, #818cf8 70%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-accent-text {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* AI Neural Pulse Animation */
@keyframes aiPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

.animate-ai-glow {
  animation: aiPulse 8s ease-in-out infinite;
}

/* Glowing Border on Hover */
.ai-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.ai-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.ai-card:hover {
  transform: translateY(-8px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 25px 50px -15px rgba(99, 102, 241, 0.2);
}

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

/* Grid Line Animation Indicator */
.tag-ai {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(6, 182, 212, 0.15));
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}