/* Base Styles */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Navigation */
.nav-link {
  @apply text-sm font-medium text-dark-600 hover:text-primary-600 transition-colors relative py-1;
}
.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary-600 transition-all duration-300;
}
.nav-link:hover::after,
.nav-link.active::after {
  @apply w-full;
}
.nav-link.active {
  @apply text-primary-600;
}
.mobile-nav-link {
  @apply block px-4 py-2.5 text-sm font-medium text-dark-600 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors;
}
.mobile-nav-link.active {
  @apply text-primary-600 bg-primary-50;
}

/* Header scroll */
.header-scrolled {
  @apply shadow-md;
}

/* Hero */
.hero-gradient {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 30%, #bfdbfe 60%, #eff6ff 100%);
}

/* Placeholder images */
.placeholder-img {
  @apply bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center text-gray-400;
}
.placeholder-img-dark {
  @apply bg-gradient-to-br from-dark-700 to-dark-800 flex items-center justify-center text-gray-500;
}
.placeholder-img-primary {
  @apply bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center text-primary-300;
}

/* Cards */
.card-hover {
  @apply transition-all duration-300;
}
.card-hover:hover {
  @apply -translate-y-1 shadow-xl;
}

/* Animations */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Counter animation */
.counter-num {
  @apply text-4xl lg:text-5xl font-bold text-primary-600;
}

/* Product detail modal */
.modal-overlay {
  @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 opacity-0 pointer-events-none transition-opacity duration-300;
}
.modal-overlay.active {
  @apply opacity-100 pointer-events-auto;
}
.modal-content {
  @apply bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto transform scale-95 transition-transform duration-300;
}
.modal-overlay.active .modal-content {
  @apply scale-100;
}

/* Tab */
.tab-btn {
  @apply px-5 py-2.5 text-sm font-medium text-dark-500 rounded-full transition-all duration-200 hover:text-primary-600;
}
.tab-btn.active {
  @apply bg-primary-600 text-white shadow-lg shadow-primary-600/30 hover:text-white;
}

/* Timeline */
.timeline-item {
  @apply relative pl-8 pb-10 border-l-2 border-gray-200 last:pb-0;
}
.timeline-item::before {
  content: '';
  @apply absolute left-[-9px] top-1 w-4 h-4 rounded-full bg-primary-600 border-4 border-white shadow;
}

/* Form */
.form-input {
  @apply w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50/50 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all;
}

/* Swiper-like custom */
.case-slider { @apply overflow-hidden relative; }
.case-track { @apply flex transition-transform duration-500 ease-out; }
.case-slide { @apply flex-shrink-0 w-full px-2; }

/* Scroll to top */
#scroll-top {
  @apply fixed bottom-6 right-6 w-11 h-11 rounded-full bg-primary-600 text-white flex items-center justify-center shadow-lg opacity-0 pointer-events-none transition-all duration-300 hover:bg-primary-700 z-40;
}
#scroll-top.visible {
  @apply opacity-100 pointer-events-auto;
}