/* custom-styles.css - 完整可运行版本 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    /* 原有自定义类 */
    .nav-link {
        @apply px-4 py-2 text-gray-700 hover:text-primary transition-colors duration-300;
    }
    .btn-primary {
        @apply bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-all duration-300 shadow-md hover:shadow-lg;
    }
    .section-title {
        @apply text-3xl md:text-4xl font-bold text-center mb-4;
    }
    .section-subtitle {
        @apply text-gray-600 text-center mb-12 max-w-2xl mx-auto;
    }
    .case-card {
        @apply bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2;
    }
    .filter-btn {
        @apply px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 border-2;
    }
    .filter-btn.active {
        @apply bg-primary text-white border-primary;
    }
    .filter-btn:not(.active) {
        @apply bg-white text-gray-600 border-gray-200 hover:border-primary hover:text-primary;
    }

    /* 新增：把 .header-scrolled 放到 @layer 内 */
    .header-scrolled {
        @apply bg-white/95 backdrop-blur-sm;
    }
}

/* 自定义基础样式 */
@layer base {
    body {
        @apply font-sans text-gray-800 bg-light;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-bold text-dark;
    }
    a {
        @apply transition-colors duration-300;
    }
        
}