/* PulsePass Ultra-Modern Futuristic Design System */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --bg-primary: #07090e;
  --bg-secondary: #0d111b;
  --bg-card: rgba(16, 21, 34, 0.75);
  --bg-card-hover: rgba(22, 30, 48, 0.88);
  --neon-lime: #ccff00;
  --neon-cyan: #00f0ff;
  --neon-pink: #ff2a85;
  --neon-purple: #9d4edd;
  --text-primary: #f8fafc;
  --text-muted: #94a3b8;
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-neon-lime: rgba(204, 255, 0, 0.4);
  --border-neon-cyan: rgba(0, 240, 255, 0.4);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  selection-background-color: var(--neon-lime);
  selection-color: #000;
}

::selection {
  background: var(--neon-lime);
  color: #050608;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

.font-mono-tech {
  font-family: 'Space Grotesk', monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #080a10;
}
::-webkit-scrollbar-thumb {
  background: #1e2638;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
}

/* Ambient Glow Gradients */
.glow-bg-cyan {
  background: radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
}
.glow-bg-lime {
  background: radial-gradient(circle at 50% 50%, rgba(204, 255, 0, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
}
.glow-bg-mesh {
  background: 
    radial-gradient(at 10% 20%, rgba(0, 240, 255, 0.08) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(204, 255, 0, 0.08) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(157, 78, 221, 0.06) 0px, transparent 50%);
}

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

.glass-panel-interactive {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-interactive:hover {
  background: var(--bg-card-hover);
  border-color: rgba(0, 240, 255, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -10px rgba(0, 240, 255, 0.18);
}

.glass-panel-lime:hover {
  border-color: rgba(204, 255, 0, 0.45);
  box-shadow: 0 12px 30px -10px rgba(204, 255, 0, 0.2);
}

/* Neon Text and Border Glows */
.text-neon-lime {
  color: var(--neon-lime);
  text-shadow: 0 0 16px rgba(204, 255, 0, 0.4);
}

.text-neon-cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

.neon-border-cyan {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.35), inset 0 0 15px rgba(0, 240, 255, 0.1);
}

.neon-border-lime {
  border-color: var(--neon-lime);
  box-shadow: 0 0 15px rgba(204, 255, 0, 0.35), inset 0 0 15px rgba(204, 255, 0, 0.1);
}

/* High-tech Gradient Buttons */
.btn-neon-primary {
  background: linear-gradient(135deg, #ccff00 0%, #a3e635 100%);
  color: #07090e;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.35);
}
.btn-neon-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(204, 255, 0, 0.6);
}

.btn-neon-secondary {
  background: rgba(0, 240, 255, 0.1);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.4);
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-neon-secondary:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00f0ff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  transform: translateY(-2px);
}

/* Subtle Animated Grid Background */
.cyber-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Pulse Badge */
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.4; }
}

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

/* Floating animation */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

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

/* Card Glow Ribbon */
.card-glow-top {
  position: relative;
  overflow: hidden;
}
.card-glow-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-lime), transparent);
}

.card-glow-cyan::before {
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}

/* Modal styles */
.modal-backdrop {
  background: rgba(4, 6, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Hide scrollbar for category tabs */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}