/* Tailwind CSS 工具类扩展 */
@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);
    }
    .article-card-hover { transition: all 0.3s ease; }
    .article-card-hover:hover { transform: translateY(-5px); }
    .toc-active { color: #F97316; font-weight: 600; }
    .transition-transform {
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }
    .content-auto {
        content-visibility: auto;
    }
    .filter-active {
        @apply bg-primary text-white;
    }
.product-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
    .timeline-dot::before {
        content: '';
        position: absolute;
        left: -35px;
        top: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #F97316;
        border: 4px solid #EEF2FF;
        z-index: 10;
    }
    .timeline-line::before {
        content: '';
        position: absolute;
        left: -25px;
        top: 0;
        width: 2px;
        height: 100%;
        background-color: #CBD5E1;
    }
}

/* 全局样式 */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* 加载动画 */
.loader {
    border-top-color: #F97316;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

/* 导航栏滚动效果 */
.navbar-scrolled {
    background-color: rgba(30, 58, 138, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 产品卡片悬停效果 */
.product-card {
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
}

/* 筛选器动画 */
.filter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.filter-expanded .filter-content {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}

.filter-icon {
    transition: transform 0.3s ease;
}

.filter-expanded .filter-icon {
    transform: rotate(180deg);
}

/* 数字增长动画 */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-count {
    animation: countUp 1s ease-out forwards;
}

/* 文章详情 */
.article-content h1 { font-size: 2rem; font-weight: 800; margin: 2rem 0 1.5rem; color: #0F172A; }
.article-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 1rem; color: #1E3A8A; padding-bottom: 0.5rem; border-bottom: 2px solid #E2E8F0; }
.article-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.25rem 0 0.75rem; color: #334155; }
.article-content h4 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.5rem; color: #475569; }
.article-content p { margin-bottom: 1rem; line-height: 1.8; }
.article-content img { max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.article-content ul { margin: 1rem 0 1rem 1.5rem; list-style-type: disc; }
.article-content ol { margin: 1rem 0 1rem 1.5rem; list-style-type: decimal; }
.article-content li { margin-bottom: 0.5rem; line-height: 1.6; }
.article-content a { color: #2563EB; text-decoration: none; transition: color 0.2s ease; }
.article-content a:hover { color: #1D4ED8; text-decoration: underline; }
.article-content a:visited { color: #4F46E5; }
.article-content strong { font-weight: 600; color: #1E293B; }
.article-content em { font-style: italic; }
.article-content blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 4px solid #F97316; background-color: #F8FAFC; border-radius: 0 0.5rem 0.5rem 0; }
.article-content blockquote p { margin-bottom: 0; }
.article-content code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; background-color: #F1F5F9; padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.875rem; }
.article-content pre { background-color: #1E293B; color: #F1F5F9; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1.5rem 0; }
.article-content pre code { background-color: transparent; padding: 0; color: inherit; }

/* 表格样式 */
.article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.875rem; }
.article-content th { background-color: #F8FAFC; font-weight: 600; text-align: left; padding: 0.75rem 1rem; border: 1px solid #E2E8F0; color: #334155; }
.article-content td { padding: 0.75rem 1rem; border: 1px solid #E2E8F0; }
.article-content tr:nth-child(even) { background-color: #F8FAFC; }
.article-content tr:hover { background-color: #EFF6FF; }

.reading-time { position: relative; padding-left: 1.5rem; }
.reading-time::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* 案例详情 */
.case-image-zoom { transition: transform 0.3s ease; }
.case-image-zoom:hover { transform: scale(1.03); }
.stat-card { transition: transform 0.3s ease; }
.stat-card:hover { transform: translateY(-5px); }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
.img-zoom { transition: transform 0.5s ease; }
.img-zoom:hover { transform: scale(1.03); }