/*
 * Global typography normalization.
 * Loaded after page CSS so typography can be tuned without disturbing layout.
 */
:root {
    --font-sans: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    --font-heading: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    --font-display: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    --font-number: "Arial Narrow", Arial, "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;

    --type-home-hero: 56px;
    --type-page-hero: 52px;
    --type-content-hero: 46px;
    --type-hero-subtitle: 18px;
    --type-hero-kicker: 24px;
    --type-section-title: 34px;
    --type-subsection-title: 28px;
    --type-card-title: 18px;
    --type-body: 15px;
    --type-small: 13px;
    --type-button: 15px;
    --type-nav: 18px;
    --type-dropdown-title: 18px;
    --type-dropdown-desc: 14px;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;

    --leading-hero: 1.12;
    --leading-title: 1.22;
    --leading-tight: 1.36;
    --leading-body: 1.72;
    --leading-small: 1.46;
}

html,
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
.website-page,
.geo-page,
.foreign-geo-page,
.ai-upgrade-page,
.ai-diagnosis-page,
.solution-list-page,
.solution-detail-page,
.case-page,
.case-detail-page,
.news-page,
.about-page,
.contact-page,
.short-video-page {
    font-family: var(--font-sans) !important;
    font-size: var(--type-body);
    line-height: var(--leading-body);
    font-weight: var(--weight-regular);
    letter-spacing: 0;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

.main-nav > a,
.main-nav .nav-link,
.header-btn {
    font-family: var(--font-heading) !important;
    font-size: var(--type-nav) !important;
    line-height: 1.2 !important;
    font-weight: var(--weight-medium) !important;
    letter-spacing: 0 !important;
}

.main-nav > a:hover,
.main-nav .nav-link:hover,
.main-nav .nav-item:hover > .nav-link,
.main-nav .nav-item:focus-within > .nav-link {
    font-weight: var(--weight-medium) !important;
}

.main-nav .is-active {
    font-weight: var(--weight-semibold) !important;
}

.header-btn {
    font-weight: var(--weight-heavy) !important;
    font-size: 16px !important;
}

.nav-dropdown-head strong {
    font-family: var(--font-heading) !important;
    font-size: 17px !important;
    font-weight: var(--weight-heavy) !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
}

.main-nav .dropdown-link strong {
    font-family: var(--font-heading) !important;
    font-size: var(--type-dropdown-title) !important;
    font-weight: var(--weight-medium) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

.main-nav .dropdown-link:hover strong,
.main-nav .dropdown-link:focus-visible strong {
    font-weight: var(--weight-medium) !important;
}

.main-nav .dropdown-link em,
.nav-dropdown-head span {
    font-family: var(--font-sans) !important;
    font-size: var(--type-dropdown-desc) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

.hero-copy h1 {
    font-family: var(--font-display) !important;
    font-size: var(--type-home-hero) !important;
    line-height: var(--leading-hero) !important;
    font-weight: var(--weight-heavy) !important;
    letter-spacing: 0 !important;
}

.web-hero-copy h1,
.geo-hero-copy h1,
.fg-hero-copy h1,
.upgrade-hero-copy h1,
.diagnosis-hero-copy h1,
.sl-hero-copy h1,
.sd-hero-copy h1,
.sv-hero-copy h1 {
    font-family: var(--font-display) !important;
    font-size: var(--type-page-hero) !important;
    line-height: var(--leading-hero) !important;
    font-weight: var(--weight-heavy) !important;
    letter-spacing: 0 !important;
}

.case-page .case-hero-copy h1,
.cd-hero h1,
.news-page .news-detail-hero h1,
.news-detail-page .nd-header h1,
.news-list-replica .nl-hero h1,
.about-hero h1,
.contact-hero-copy h1 {
    font-family: var(--font-display) !important;
    font-size: var(--type-content-hero) !important;
    line-height: 1.16 !important;
    font-weight: var(--weight-heavy) !important;
    letter-spacing: 0 !important;
}

.web-hero-copy h2,
.geo-hero-copy h2,
.fg-hero-copy h2 {
    font-family: var(--font-display) !important;
    font-size: var(--type-hero-kicker) !important;
    line-height: 1.28 !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: 0 !important;
}

.hero-copy p,
.web-hero-copy p,
.geo-hero-text,
.fg-hero-copy p,
.upgrade-hero-copy p,
.diagnosis-hero-copy p,
.sl-hero-copy p,
.sd-hero-copy p,
.sv-hero-copy p,
.case-page .case-hero-copy p,
.cd-hero p,
.news-page .news-detail-hero p,
.news-detail-page .nd-summary p,
.news-list-replica .nl-hero p,
.about-hero p,
.contact-hero-copy p {
    font-family: var(--font-sans) !important;
    font-size: var(--type-hero-subtitle) !important;
    line-height: 1.76 !important;
    font-weight: var(--weight-medium) !important;
    letter-spacing: 0 !important;
}

.section-head h2,
.title-row h2,
.hm-section-head h2,
.hm-row-head h2,
.hm-dashboard-left h2,
.hm-cta-banner h2,
.capability-system-heading h2,
.web-section-title,
.geo-section-head h2,
.fg-title,
.fg-flow h2,
.fg-results-head h2,
.upgrade-title,
.diagnosis-section-head h2,
.sl-section-head h2,
.sd-section-head h2,
.case-page .case-final-cta h2,
.cd-bottom-cta h2,
.news-detail-page .nd-interest h2,
.news-list-replica .nl-bottom-cta h2,
.about-section-kicker h2,
.about-section-title h2,
.about-culture h2,
.about-cta h2,
.contact-work h2,
.sv-section-title,
.sv-section-head h2,
.sv-matrix-system .sv-system-head h2 {
    font-family: var(--font-heading) !important;
    font-size: var(--type-section-title) !important;
    line-height: var(--leading-title) !important;
    font-weight: var(--weight-heavy) !important;
    letter-spacing: 0 !important;
}

.upgrade-bottom-inner h2,
.diagnosis-bottom-cta h2,
.geo-final-cta h2,
.fg-cta h2,
.web-bottom-cta h2,
.sl-bottom-copy h2,
.sd-bottom-inner h2,
.cd-side-cta h2,
.news-detail-page .nd-side-cta h2,
.news-list-replica .nl-side-cta h2,
.contact-request .contact-panel-head h2 {
    font-family: var(--font-heading) !important;
    font-size: var(--type-subsection-title) !important;
    line-height: var(--leading-title) !important;
    font-weight: var(--weight-heavy) !important;
    letter-spacing: 0 !important;
}

.section-head p,
.title-row p,
.hm-section-head p,
.hm-row-head p,
.hm-dashboard-left > p,
.hm-cta-banner p,
.capability-system-heading p,
.web-section-title + p,
.geo-section-head p,
.fg-section-text,
.upgrade-subtitle,
.diagnosis-section-head p,
.sl-section-head p,
.sd-section-head p,
.about-section-title p,
.contact-panel-head p,
.sv-section-head p,
.sv-matrix-system .sv-system-head p {
    font-family: var(--font-sans) !important;
    font-size: var(--type-body) !important;
    line-height: var(--leading-body) !important;
    font-weight: var(--weight-medium) !important;
    letter-spacing: 0 !important;
}

.service-card h3,
.visibility-benefit h3,
.loop-entry h3,
.loop-card h3,
.solution-content h3,
.case-body h3,
.process-step h3,
.hm-core-services .hm-service-card h3,
.capability-system-card h3,
.web-problem-grid h3,
.web-gain-grid h3,
.web-process-grid h3,
.web-industry-grid h3,
.web-case-cover h3,
.web-more-card h3,
.geo-pain-grid h3,
.geo-result-panel h3,
.geo-method-grid h3,
.geo-gain-grid h3,
.geo-faq-grid h3,
.geo-case-card h3,
.fg-pain-grid h3,
.fg-flow-line h3,
.fg-method-grid h3,
.fg-case-row h3,
.fg-data-panel h3,
.fg-faq-item h3,
.compare-card-head h3,
.process-line h3,
.feature-card h3,
.gain-card h3,
.module-card h3,
.case-card h3,
.diagnosis-form-aside h3,
.diagnosis-fit-card h3,
.sl-card-body h3,
.sl-mini-grid h3,
.sd-module-grid h3,
.sd-process h3,
.sd-side-card h3,
.case-page .case-card h2,
.case-trend-card h3,
.cd-article-content h2,
.cd-article-content h3,
.news-detail-page .nd-content h2,
.news-detail-page .nd-content h3,
.news-list-replica .nl-feature-card h2,
.news-list-replica .nl-row h2,
.about-mission-card h2,
.about-value-item h3,
.about-image-card h3,
.contact-info-card h2,
.contact-side-card h2,
.contact-branch-card h3,
.sv-matrix-tags b {
    font-family: var(--font-heading) !important;
    font-size: var(--type-card-title) !important;
    line-height: var(--leading-tight) !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: 0 !important;
}

.service-brief,
.service-detail,
.visibility-benefit p,
.loop-card p,
.solution-content p,
.case-body p,
.news-card p,
.hm-service-card p,
.capability-system-card p,
.capability-system-card li,
.web-problem-grid p,
.web-gain-grid p,
.web-process-grid p,
.web-industry-grid p,
.geo-pain-grid p,
.geo-method-grid p,
.geo-gain-grid p,
.geo-faq-grid p,
.fg-pain-grid p,
.fg-method-grid p,
.fg-case-row p,
.fg-faq-item p,
.feature-card p,
.gain-card p,
.module-card p,
.case-card p,
.diagnosis-fit-card p,
.sl-card-body p,
.sl-mini-grid p,
.sd-module-grid p,
.sd-process p,
.case-page .case-card p,
.cd-article-content p,
.news-detail-page .nd-content p,
.news-list-replica .nl-row p,
.about-mission-card p,
.about-value-item p,
.about-image-card p,
.contact-info-card p,
.contact-side-card p,
.contact-branch-card p,
.sv-matrix-tags em {
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    line-height: var(--leading-body) !important;
    font-weight: var(--weight-medium) !important;
    letter-spacing: 0 !important;
}

.site-footer {
    font-family: var(--font-sans) !important;
}

.site-footer h3,
.footer-diagnosis-copy h2 {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-heavy) !important;
    letter-spacing: 0 !important;
}

.site-footer p,
.site-footer a:not(.brand),
.footer-check input,
.social-text,
.social-qr-title {
    font-family: var(--font-sans) !important;
    letter-spacing: 0 !important;
}

.footer-brand-copy,
.site-footer a:not(.brand) {
    font-size: 14px !important;
    line-height: 1.62 !important;
    font-weight: var(--weight-medium) !important;
}

.hm-card-index,
.capability-system-num,
.capability-system-core-name,
.capability-system-core-desc {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-heavy) !important;
    letter-spacing: 0 !important;
}

.hm-case-cover h3,
.hm-article-card h3 {
    font-family: var(--font-heading) !important;
    font-size: var(--type-card-title) !important;
    line-height: 1.32 !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: 0 !important;
}

.hm-industries .solution-content h3 {
    font-size: clamp(18px, 1.35vw, 23px) !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
}

.hm-industries .solution-content p {
    display: -webkit-box !important;
    height: 40px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hm-case-sort,
.hm-article-card span {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: 0 !important;
}

.hm-article-card time,
.hm-case-metrics em {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: var(--weight-medium) !important;
    letter-spacing: 0 !important;
}

.hm-case-metrics b,
.stat-number,
.hm-visibility-card strong {
    font-weight: var(--weight-heavy) !important;
}

@media (min-width: 1201px) {
    .capability-system-card-head {
        top: 2.05% !important;
        min-height: 82px;
        align-items: center;
    }

    .capability-system-card h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        font-weight: var(--weight-heavy) !important;
    }

    .capability-system-card p {
        font-size: 13px !important;
        line-height: 1.42 !important;
        font-weight: var(--weight-medium) !important;
        color: #617392 !important;
    }

    .capability-system-card ul {
        top: 52.5% !important;
        bottom: 10.5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px !important;
        transform: translateX(10px);
    }

    .capability-system-card li {
        min-height: 22px;
        padding-left: 32px;
        font-size: 13px !important;
        line-height: 1.34 !important;
        font-weight: var(--weight-semibold) !important;
    }

    .capability-system-card li::before {
        top: 50% !important;
        transform: translateY(-50%);
    }

    .capability-system-card li::after {
        top: 50% !important;
        transform: translateY(-50%);
    }
}

.capability-system-card li[data-icon="persona"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM5 20c.7-4 3-6 7-6s6.3 2 7 6h-2.1c-.6-2.7-2.2-4-4.9-4s-4.3 1.3-4.9 4H5Zm13.5-11.5h2V6h-2v2.5Zm0 3.5h2v-2.5h-2V12ZM3.5 8.5h2V6h-2v2.5Zm0 3.5h2v-2.5h-2V12Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="library"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M5 4h5c1.2 0 2 .5 2 1.6C12 4.5 12.8 4 14 4h5v15h-5c-1.2 0-2 .4-2 1.3C12 19.4 11.2 19 10 19H5V4Zm2 2v11h3c.8 0 1.5.2 2 .6v-12c-.4.3-1 .4-2 .4H7Zm10 0h-3c-1 0-1.6-.1-2-.4v12c.5-.4 1.2-.6 2-.6h3V6Zm-2 3h-2v2h2V9Zm0 3h-2v2h2v-2Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="touchpoint"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3a4 4 0 0 1 3.5 5.9l2.4 2.4A3.5 3.5 0 1 1 16.5 13L14 10.6a4 4 0 0 1-4 0L7.5 13A3.5 3.5 0 1 1 6.1 11.6l2.4-2.4A4 4 0 0 1 12 3Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM5 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm14 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E");
}

.capability-system-card li[data-icon="funnel"]::after {
    --capability-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5h16l-6 7.2V19l-4 2v-8.8L4 5Zm4.3 2 3.7 4.4L15.7 7H8.3Zm9.7 9h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3Z'/%3E%3C/svg%3E");
}

.btn,
.web-btn,
.geo-btn,
.fg-btn,
.upgrade-btn,
.diagnosis-btn,
.sl-btn,
.sd-btn,
.cd-share-btn,
.news-detail-page .nd-follow-btn,
.news-detail-page .nd-side-cta a,
.about-primary-btn,
.about-secondary-btn,
.footer-diagnosis-btn,
.footer-check button,
.visibility-form button {
    font-family: var(--font-heading) !important;
    font-size: var(--type-button) !important;
    line-height: 1 !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: 0 !important;
}

.stat-number,
.web-hero-metrics strong,
.geo-hero-stats strong,
.case-page .case-stat strong,
.about-stat-number,
.hm-visibility-card,
.hm-visibility-card * {
    font-family: var(--font-number) !important;
}

.hm-visibility-card {
    --hm-ui-font: var(--font-heading);
    --hm-num-font: var(--font-number);
}

.hm-visibility-copy h2 {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-heavy) !important;
}

.hm-visibility-copy > p,
.hm-visibility-copy li {
    font-family: var(--font-sans) !important;
}

@media (max-width: 1200px) {
    :root {
        --type-home-hero: 48px;
        --type-page-hero: 46px;
        --type-content-hero: 40px;
        --type-section-title: 30px;
        --type-subsection-title: 25px;
    }
}

@media (min-width: 981px) and (max-width: 1120px) {
    .header-inner {
        width: min(1600px, calc(100% - 40px)) !important;
        gap: 14px !important;
    }

    .brand-logo {
        width: clamp(178px, 18vw, 198px) !important;
        max-height: 48px !important;
    }

    .main-nav {
        gap: 14px !important;
        padding-left: 16px !important;
    }

    .main-nav > a,
    .main-nav .nav-link {
        font-size: 14px !important;
    }

    .header-btn {
        min-width: 108px !important;
        height: 42px !important;
        gap: 8px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }

    .header-btn::after {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
        background-size: 14px 14px;
    }
}

@media (max-width: 768px) {
    :root {
        --type-home-hero: 34px;
        --type-page-hero: 32px;
        --type-content-hero: 32px;
        --type-hero-subtitle: 15px;
        --type-hero-kicker: 20px;
        --type-section-title: 25px;
        --type-subsection-title: 22px;
        --type-card-title: 17px;
        --type-body: 14px;
        --type-small: 12px;
        --type-button: 14px;
        --type-nav: 15px;
        --type-dropdown-title: 16px;
        --type-dropdown-desc: 13px;
    }
}

@media (max-width: 480px) {
    :root {
        --type-home-hero: 30px;
        --type-page-hero: 30px;
        --type-content-hero: 29px;
        --type-section-title: 24px;
        --type-subsection-title: 21px;
        --leading-body: 1.68;
    }
}

.geo-page [data-service-hero-reveal],
.foreign-geo-page [data-service-hero-reveal],
.ai-upgrade-page [data-service-hero-reveal],
.website-page [data-service-hero-reveal],
.ai-diagnosis-page [data-service-hero-reveal],
body:not(.xinnews-template) main > section:first-child:not(.hero) [class*="-hero-copy"] > h1,
body:not(.xinnews-template) main > section:first-child:not(.hero) [class*="-hero-copy"] > h2,
body:not(.xinnews-template) main > section:first-child:not(.hero) [class*="-hero-copy"] > p,
body:not(.xinnews-template) main > section:first-child:not(.hero) [class*="-hero-copy"] > ul,
body:not(.xinnews-template) main > section:first-child:not(.hero) [class*="-hero-copy"] > [class*="-hero-actions"],
body:not(.xinnews-template) [data-xqd-banner-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

.geo-page [data-service-hero-card],
.foreign-geo-page [data-service-hero-card],
.ai-upgrade-page [data-service-hero-card],
.website-page [data-service-hero-card],
.ai-diagnosis-page [data-service-hero-card] {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
