.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-10 { grid-template-columns: repeat(10, 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))
}

.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)
}

* { 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) {
    .md\:grid-cols-10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .nav-item { font-size: 0.9375rem; line-height: 1.4rem; gap: 0.2rem; }
    .section-title { font-size: 28px; line-height: 2.25rem; }
    .section-subtitle { font-size: 15px; }
}