.nav-item {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                white-space: nowrap;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                padding-top: 0.375rem;
                padding-bottom: 0.375rem;
                font-size: 0.875rem;
                line-height: 1.25rem;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
}

.nav-item:hover {
                --tw-text-opacity: 1;
                color: rgb(0 82 204 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
.nav-item {
                                font-size: 1.125rem;
                                line-height: 1.75rem;
                }

    .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
}

.section-title {
                position: relative;
                margin-bottom: 1rem;
                text-align: center;
                font-size: 2.25rem;
                line-height: 2.5rem;
                font-weight: 700;
}

.section-title::after {
                left: 50%;
                bottom: -8px;
                height: 0.5rem;
                width: 6rem;
                --tw-translate-x: -50%;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
                --tw-bg-opacity: 1;
                background-color: rgb(0 82 204 / var(--tw-bg-opacity, 1));
                --tw-content: '';
                content: var(--tw-content);
}

.section-subtitle {
                margin-bottom: 2rem;
                text-align: center;
                font-size: 1.125rem;
                line-height: 1.75rem;
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.card-hover {
                transition-property: all;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
}

.card-hover:hover {
                --tw-translate-y: -0.75rem;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
                --tw-bg-opacity: 1;
                background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-primary {
                border-radius: 0.375rem;
                --tw-bg-opacity: 1;
                background-color: rgb(0 82 204 / var(--tw-bg-opacity, 1));
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1));
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
}

.btn-primary:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}

.btn-outline {
                border-radius: 0.375rem;
                border-width: 2px;
                --tw-border-opacity: 1;
                border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1));
                transition-property: all;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
}

.btn-outline:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
                --tw-text-opacity: 1;
                color: rgb(0 82 204 / var(--tw-text-opacity, 1));
}

.safe-bottom {
                padding-bottom: 5rem;
}

@media (min-width: 768px) {
.safe-bottom {
                                padding-bottom: 0px;
                }
}

.intro-img {
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 1.5rem;
                width: 100%;
                border-radius: 0.5rem;
                object-fit: cover;
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hero-gradient {
                background: linear-gradient(135deg, #0F172A 0%, #1E40AF 50%, #1E3A8A 100%);
            }

* { box-sizing: border-box; }
        body {
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        img, svg {
            max-width: 100%;
            display: block;
        }
        .nav-item .fa { color: #1E40AF; }

        .back-to-top {
            position: fixed;
            bottom: max(30px, env(safe-area-inset-bottom) + 20px);
            right: max(20px, env(safe-area-inset-bottom) + 10px);
            background-color: #1E40AF;
            color: white;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 9999;
            -webkit-tap-highlight-color: transparent;
        }
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
@media (max-width: 768px) {
footer { margin-bottom: 60px; padding-bottom: 20px; }
            html { scroll-padding-top: 180px; }
            .section-title { font-size: 28px; }
            .section-subtitle { font-size: 15px; }
        }
        @media (max-width: 640px) {
            html { scroll-padding-top: 220px; }
        }

/* 常见问题FAQ移动端单列显示（电脑端保持原列数不变） */
@media (max-width: 767px) {
    .faq-list { grid-template-columns: 1fr !important; }
    .faq-list p,
    .faq-list li { overflow-wrap: anywhere; word-break: break-word; }
}


/* ===== 平板适配 (768–1023px)：仅优化平板显示，不影响移动端与电脑端 ===== */
@media (min-width: 768px) and (max-width: 1023.98px) {
    /* 顶部导航：11 列在平板过挤，改为每行 6 列、两行排列，字号略缩小 */
    .md\:grid-cols-11 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .nav-item { font-size: 0.9375rem; line-height: 1.4rem; gap: 0.2rem; }

    /* 板块大标题：桌面 36px 在平板偏大，缩到 28px，与配图/正文比例更协调 */
    .section-title { font-size: 28px; line-height: 2.25rem; }
    .section-subtitle { font-size: 15px; }

    /* 核心服务项目：桌面 5 列在平板过窄，改为 3 列更宽松 */
    .md\:grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}