@layer components {
    .card {
        background: var(--bg); border-radius: var(--radius-lg); overflow: hidden;
        box-shadow: var(--shadow-sm); border: 1px solid var(--border);
        transition: all var(--duration-normal) var(--ease-default);
    }
    .card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
    .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .product-card { display: block; text-decoration: none; color: inherit; }
    .product-card .card-img { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--steel-100); }
    .product-card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-default); }
    .product-card:hover .card-img img { transform: scale(1.08); }
    .product-card .card-img .img-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(10,22,40,.5) 0%, transparent 50%);
        opacity: 0; transition: opacity var(--duration-normal) var(--ease-default);
    }
    .product-card:hover .card-img .img-overlay { opacity: 1; }
    .product-card .card-img .material-tag {
        position: absolute; top: var(--space-3); right: var(--space-3);
        background: var(--gold-500); color: var(--bg); font-size: var(--text-xs); font-weight: 600;
        padding: 3px var(--space-2); border-radius: var(--radius-full);
        opacity: 0; transform: translateY(-6px); transition: all var(--duration-normal) var(--ease-default);
    }
    .product-card:hover .card-img .material-tag { opacity: 1; transform: translateY(0); }
    .product-card .card-body { padding: var(--space-5); }
    .product-card .card-body h3 {
        font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-1); color: var(--steel-800);
        transition: color var(--transition);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .product-card:hover .card-body h3 { color: var(--primary-600); }
    .product-card .card-body .card-meta { font-size: var(--text-xs); color: var(--steel-500); margin-bottom: var(--space-2); }
    .product-card .card-body .card-desc {
        font-size: var(--text-xs); color: var(--steel-600); line-height: var(--leading-relaxed);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .product-card .card-body .card-action {
        margin-top: 14px; font-size: var(--text-sm); color: var(--primary-600); font-weight: 500;
        display: flex; align-items: center; gap: var(--space-1);
    }
    .product-card .card-body .card-action .arrow { transition: transform var(--transition); }
    .product-card:hover .card-body .card-action .arrow { transform: translateX(4px); }
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
    .news-card .card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--steel-100); }
    .news-card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-default); }
    .news-card:hover .card-img img { transform: scale(1.05); }
    .news-card .card-body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
    .news-card .card-body .card-tags { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
    .news-card .card-body .card-date { font-size: var(--text-xs); color: var(--steel-400); }
    .news-card .card-body h3 {
        font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-2); color: var(--steel-800);
        line-height: var(--leading-normal);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        transition: color var(--transition);
    }
    .news-card:hover .card-body h3 { color: var(--primary-600); }
    .news-card .card-body .card-summary {
        font-size: var(--text-sm); color: var(--steel-500); line-height: var(--leading-relaxed); flex: 1;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .news-card .card-body .read-more {
        margin-top: 14px; font-size: var(--text-xs); color: var(--primary-600); font-weight: 500;
        display: flex; align-items: center; gap: var(--space-1);
    }
    .news-card .card-body .read-more .arrow { transition: transform var(--transition); }
    .news-card:hover .card-body .read-more .arrow { transform: translateX(4px); }
    .honor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .honor-card {
        background: var(--bg); border-radius: var(--radius-lg); overflow: hidden;
        box-shadow: var(--shadow-sm); border: 1px solid var(--border);
        text-align: center; padding: var(--space-6); transition: all var(--duration-normal) var(--ease-default);
    }
    .honor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-500); }
    .honor-card .honor-img {
        width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden;
        margin-bottom: var(--space-4); background: var(--steel-100);
    }
    .honor-card .honor-img img { width: 100%; height: 100%; object-fit: cover; }
    .honor-card h3 { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-1); color: var(--steel-800); }
    .honor-card .issued { font-size: var(--text-xs); color: var(--steel-500); }
    @media (max-width: 1024px) {
        .product-grid, .news-grid, .honor-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        .product-grid, .news-grid, .honor-grid { grid-template-columns: 1fr; }
    }
}