/* 基础样式 */
body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* 动画效果 */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}

/* 响应式图片 */
img {
  max-width: 100%;
  height: auto;
}

/* 导航栏滚动效果 */
.navbar-scrolled {
  @apply bg-blue-900 shadow-md;
}

/* 卡片悬停效果 */
.card-hover {
  @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

/* 按钮效果 */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-105 shadow-lg;
}

.btn-secondary {
  @apply bg-transparent border-2 border-white text-white hover:bg-white/10 font-medium py-3 px-6 rounded-lg transition-all;
}

/* 背景渐变 */
.bg-gradient-primary {
  @apply bg-gradient-to-r from-blue-900 to-purple-900;
}

/* 标题样式 */
.section-title {
  @apply text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-gray-900 mb-4;
}

.section-subtitle {
  @apply text-gray-600 max-w-2xl mx-auto;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .mobile-hidden {
    @apply hidden;
  }
  .mobile-flex {
    @apply flex;
  }
}