.hero-bg {
    background-image: url('../images/resources-hero-bg.webp');
}

.card-title {
    margin-top: 0;
    font-size: 24px;
}

.metrics-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-desc {
    text-align: center;
}

.metrics-section {
    background-color: black;
    color: white;
}

.section-title {
    margin-top: 10px;
}

.material-symbols-outlined {
    font-size: clamp(24px, 5vw, 36px) !important;
}

/* 基础图标设置[cite: 4] */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 顶部导航辅助布局 */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

.brand-logo {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--color-surface-container);
}

.nav-links {
    display: none;
    gap: 24px;
}

.nav-link {
    color: var(--color-surface-container-highest);
    text-decoration: none;
    font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-secondary-container);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 网格系统扩展 */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-gutter);
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-links {
        display: flex;
    }
}

@media (min-width: 992px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .metrics-grid {
        padding-bottom: 0;
    }
}

/* 认证卡片覆盖 */
.cert-card {
    align-items: center;
    text-align: center;
    padding: 32px 24px;
}

.cert-icon {
    font-size: 40px;
    margin-bottom: 16px;
    color: var(--color-surface-container);
}

/* 5阶段协议列表 */
.protocol-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.protocol-item {
    background: var(--color-white);
    border: 1px solid rgba(160, 174, 192, 0.3);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: background-color 0.3s;
}

@media (min-width: 768px) {
    .protocol-item {
        flex-direction: row;
        align-items: center;
    }
}

.protocol-item:hover {
    background-color: var(--color-technical-white);
}

.protocol-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-cad-grey);
}

.protocol-item:hover .protocol-num,
.protocol-item:hover .protocol-icon {
    color: var(--color-secondary-container);
}

.protocol-content {
    flex-grow: 1;
}

/* CTA 区块 */
.cta-box {
    background: var(--color-white);
    border: 1px solid rgba(160, 174, 192, 0.3);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .cta-box {
        flex-direction: row;
    }
}

/* 隐藏移动端元素 */
.hidden-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }
}