/* ═══ PREMIUM OVERHAUL ═══ */

/* Rich background with subtle grid pattern */
body {
  background: #050810;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0,212,170,0.08), transparent),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(56,189,248,0.05), transparent);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black 20%, transparent 70%);
}

/* Better navbar */
.navbar {
  background: rgba(5,8,16,0.75) !important;
  border-bottom: 1px solid rgba(0,212,170,0.08) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.nav-brand {
  gap: 12px !important;
}

.nav-link {
  position: relative;
  padding: 6px 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00d4aa, #38bdf8);
  transition: width 0.3s ease;
  border-radius: 1px;
}
.nav-link:hover::after { width: 100%; }

.btn-primary {
  background: linear-gradient(135deg, #00d4aa, #0891b2) !important;
  box-shadow: 0 2px 12px rgba(0,212,170,0.25);
}
.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(0,212,170,0.4) !important;
  transform: translateY(-1px);
}

/* Hero orbs brighter */
.orb-1 { opacity: 0.4 !important; filter: blur(100px) !important; }
.orb-2 { opacity: 0.3 !important; filter: blur(100px) !important; }

/* Better hero badge */
.hero-badge {
  background: rgba(0,212,170,0.08) !important;
  border: 1px solid rgba(0,212,170,0.2) !important;
  backdrop-filter: blur(10px);
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600 !important;
  animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,212,170,0); }
  50% { box-shadow: 0 0 20px 4px rgba(0,212,170,0.1); }
}

/* Better title */
.hero-title {
  font-size: 56px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -2px !important;
  text-shadow: 0 0 80px rgba(0,212,170,0.15);
}

.gradient-text {
  background: linear-gradient(135deg, #00d4aa 0%, #38bdf8 50%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% auto;
  animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
  0%,100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Premium upload zone */
.upload-zone {
  border: 1px solid rgba(0,212,170,0.15) !important;
  border-radius: 20px !important;
  background: rgba(10,14,23,0.6) !important;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,212,170,0.2), transparent 40%, transparent 60%, rgba(56,189,248,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.upload-zone:hover {
  border-color: rgba(0,212,170,0.3) !important;
  box-shadow: 0 0 40px rgba(0,212,170,0.08), inset 0 0 40px rgba(0,212,170,0.03) !important;
}
.upload-icon {
  opacity: 0.7;
  transition: all 0.3s ease;
}
.upload-zone:hover .upload-icon {
  opacity: 1;
  transform: translateY(-3px);
}

/* Premium kbd keys */
.shortcut-badge kbd {
  background: rgba(0,212,170,0.1) !important;
  border: 1px solid rgba(0,212,170,0.2) !important;
  color: #00d4aa !important;
  font-weight: 600;
  padding: 3px 8px !important;
  border-radius: 5px !important;
}

/* Stats section premium */
.stats-section {
  background: rgba(10,14,23,0.5) !important;
  border-top: 1px solid rgba(0,212,170,0.06) !important;
  border-bottom: 1px solid rgba(0,212,170,0.06) !important;
  backdrop-filter: blur(10px);
  position: relative;
}

.stat-number {
  background: linear-gradient(135deg, #f0f2f5, #00d4aa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 36px !important;
  font-weight: 900 !important;
}

.stat-label {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  font-weight: 500;
}

/* Feature cards glassmorphism */
.feature-card {
  background: rgba(20,28,43,0.6) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,170,0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
  background: rgba(20,28,43,0.8) !important;
  border-color: rgba(0,212,170,0.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,212,170,0.05) !important;
}
.feature-icon {
  font-size: 32px !important;
  filter: drop-shadow(0 0 8px rgba(0,212,170,0.3));
}

/* Gallery cards */
.gallery-card {
  background: rgba(20,28,43,0.5) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  overflow: hidden;
}
.gallery-card:hover {
  border-color: rgba(0,212,170,0.15) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,212,170,0.05) !important;
}
.gallery-card .card-image {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Carousel items */
.marquee-item {
  border: 1px solid rgba(255,255,255,0.04) !important;
  background: rgba(20,28,43,0.4);
}
.marquee-item:hover {
  border-color: rgba(0,212,170,0.2) !important;
  box-shadow: 0 8px 30px rgba(0,212,170,0.12) !important;
}

/* Section headings */
.showcase-title {
  background: linear-gradient(135deg, #8892a4, #5a6478);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  font-weight: 600;
}

.section-title svg {
  filter: drop-shadow(0 0 6px rgba(0,212,170,0.4));
}

/* Footer */
.footer {
  background: rgba(5,8,16,0.5);
  border-top: 1px solid rgba(255,255,255,0.03) !important;
}

/* Better search box */
.search-box {
  background: rgba(10,14,23,0.8) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}
.search-box:focus-within {
  border-color: rgba(0,212,170,0.3) !important;
  box-shadow: 0 0 20px rgba(0,212,170,0.05);
}

/* Modal premium */
.modal-content {
  background: rgba(15,21,32,0.95) !important;
  border: 1px solid rgba(0,212,170,0.1) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
}

/* Smooth scroll-triggered animations */
.stat-item, .feature-card, .gallery-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards;
}
.stat-item:nth-child(1) { animation-delay: 0.05s; }
.stat-item:nth-child(2) { animation-delay: 0.1s; }
.stat-item:nth-child(3) { animation-delay: 0.15s; }
.stat-item:nth-child(4) { animation-delay: 0.2s; }
.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* All links smooth */
* { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 0.2s; }

/* Pagination */
.pagination .btn-ghost {
  background: rgba(10,14,23,0.6) !important;
  backdrop-filter: blur(10px);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050810; }
::-webkit-scrollbar-thumb { background: rgba(0,212,170,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,170,0.4); }

/* Ensure everything is above the grid */
.navbar, .hero, .stats-section, .features-section, .showcase-section, .gallery-section, .footer, .modal-overlay, .toast {
  position: relative;
  z-index: 1;
}