/* ============================================================
   中品互动（杭州）科技有限公司 — 主站主题
   设计系统：纯白基底 · 科技蓝点缀 · 几何秩序 · 呼吸感排版
   ============================================================ */


/* ----- CSS 自定义属性（设计 Token）----- */

:root {
    /* 配色 */
    --color-white: #FFFFFF;
    --color-bg: #F8F9FB;
    --color-bg-hover: #FAFBFC;
    --color-darkest: #1A1A2E;
    --color-dark: #4A4A5A;
    --color-mid: #6B7280;
    --color-light: #9CA3AF;
    --color-line: #E5E7EB;
    --color-brand-blue: #0066FF;
    --color-brand-blue-hover: #0052CC;
    --color-brand-purple: #7C3AED;
    --color-brand-purple-hover: #6D28D9;
    --color-brand-cyan: #06B6D4;
    --color-brand-cyan-hover: #0891B2;
    --color-brand-green: #10B981;
    --color-brand-green-hover: #059669;
    --color-brand-amber: #F59E0B;
    --color-footer-bg: #1A1A2E;
    --color-footer-text: #F9FAFB;
    --color-footer-muted: #9CA3AF;
    /* 字体 */
    --font-sans: -apple-system, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-heading: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-mono: "Inter", "SF Pro Display", system-ui, sans-serif;
    /* 字号 */
    --text-h1: 3.25rem;
    /* 52px */
    --text-h2: 2.375rem;
    /* 38px */
    --text-h3: 1.375rem;
    /* 22px */
    --text-body: 1rem;
    /* 16px */
    --text-small: 0.875rem;
    /* 14px */
    --text-caption: 0.75rem;
    /* 12px */
    /* 间距（8px 基准） */
    --spacing-section-xl: 7.5rem;
    /* 120px */
    --spacing-section-lg: 5rem;
    /* 80px */
    --spacing-section-md: 3rem;
    /* 48px */
    --spacing-card-gap: 2rem;
    /* 32px */
    --spacing-card-pad: 2rem;
    /* 32px */
    --spacing-element-lg: 1.5rem;
    /* 24px */
    --spacing-element-md: 1rem;
    /* 16px */
    /* 容器 */
    --max-width-container: 75rem;
    /* 1200px */
    --max-width-content: 47.5rem;
    /* 760px */
    /* 圆角 */
    --radius-card: 1rem;
    /* 16px */
    --radius-tag: 0.25rem;
    /* 4px */
    --radius-button: 0.5rem;
    /* 8px */
    /* 阴影 */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-nav: 0 1px 0 rgba(0, 0, 0, 0.05);
    /* 过渡 */
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.2s ease;
    /* 导航高度 */
    --nav-height: 80px;
    --nav-height-scrolled: 60px;
}


/* ----- Reset & Base ----- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--color-darkest);
    background: var(--color-white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-brand-blue);
}

ul,
ol {
    list-style: none;
}


/* ----- 容器 ----- */

.container {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--spacing-element-lg);
}

.container--narrow {
    max-width: var(--max-width-content);
}


/* ============================================================
   排版 Utilities
   ============================================================ */

.section-title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-darkest);
    text-align: center;
    margin-bottom: var(--spacing-element-md);
}

.section-subtitle {
    font-size: var(--text-body);
    color: var(--color-mid);
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--spacing-section-md);
    line-height: 1.7;
}


/* ----- 链接下划线动效 ----- */

.link-underline {
    position: relative;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-brand-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.link-underline:hover::after {
    transform: scaleX(1);
}


/* ============================================================
   按钮系统
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: var(--text-small);
    font-weight: 500;
    border-radius: var(--radius-button);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-brand-blue);
    color: var(--color-white);
}

.btn--primary:hover {
    background: var(--color-brand-blue-hover);
    color: var(--color-white);
}

.btn--outline {
    background: transparent;
    color: var(--color-brand-blue);
    border: 1.5px solid var(--color-brand-blue);
}

.btn--outline:hover {
    background: var(--color-brand-blue);
    color: var(--color-white);
}

.btn--ghost {
    background: transparent;
    color: var(--color-brand-blue);
    padding: 0.5rem 1rem;
}

.btn--ghost:hover {
    background: rgba(0, 102, 255, 0.06);
}

.btn--purple {
    background: var(--color-brand-purple);
    color: var(--color-white);
}

.btn--purple:hover {
    background: var(--color-brand-purple-hover);
    color: var(--color-white);
}

.btn--purple-outline {
    background: transparent;
    color: var(--color-brand-purple);
    border: 1.5px solid var(--color-brand-purple);
}

.btn--purple-outline:hover {
    background: var(--color-brand-purple);
    color: var(--color-white);
}

.btn--lg {
    padding: 1rem 2.5rem;
    font-size: var(--text-body);
}


/* ============================================================
   导航
   ============================================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: height var(--transition-smooth), background var(--transition-smooth);
}

.site-header.is-scrolled {
    height: var(--nav-height-scrolled);
    background: rgba(255, 255, 255, 0.95);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--spacing-element-lg);
}


/* Logo */

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo a {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--color-darkest);
}

.site-logo__mark {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 84%;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.site-logo__copy {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-width: 0;
    line-height: 1;
}

.site-logo__title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--color-darkest);
}

.site-logo__subtitle {
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: 0.06em;
    color: #5d6776;
    white-space: nowrap;
    font-weight: 500;
}

.site-header.is-scrolled .site-logo__mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.site-header.is-scrolled .site-logo__title {
    font-size: 1.06rem;
}

.site-header.is-scrolled .site-logo__subtitle {
    font-size: 0.64rem;
}


/* 主导航菜单 */

.main-nav {
    display: flex;
    align-items: center;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.main-nav a {
    font-size: var(--text-small);
    color: var(--color-dark);
    position: relative;
    padding: 0.25rem 0;
    transition: color var(--transition-fast);
    /* v8 增强：中英切换特效 — 容器固定高度 + 隐藏溢出 */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    line-height: 1.5;
    overflow: hidden;
    vertical-align: middle;
}

.main-nav a:hover {
    color: var(--color-brand-blue);
}


/* v8 增强：中文字符（默认显示）*/

.main-nav a .nav-text {
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    will-change: transform;
}


/* v8 增强：英文字符（hover 时从下方滑入）*/

.main-nav a .nav-en {
    display: block;
    color: var(--color-brand-blue);
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 0.78em;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    will-change: transform;
    pointer-events: none;
}


/* hover 状态：中文上移消失，英文从下方滑入 */

.main-nav a:hover .nav-text,
.main-nav .current-menu-item>a .nav-text,
.main-nav .current_page_item>a .nav-text {
    transform: translateY(-100%);
    opacity: 0;
}

.main-nav a:hover .nav-en,
.main-nav .current-menu-item>a .nav-en,
.main-nav .current_page_item>a .nav-en {
    transform: translateY(0);
    opacity: 1;
}


/* 当前页：英文常驻（蓝色高亮）*/

.main-nav .current-menu-item>a,
.main-nav .current_page_item>a {
    color: var(--color-brand-blue);
}

.main-nav .current-menu-item>a .nav-text,
.main-nav .current_page_item>a .nav-text {
    /* 当前页面保持中文显示（不切换）*/
    transform: none;
    opacity: 1;
}

.main-nav .current-menu-item>a .nav-en,
.main-nav .current_page_item>a .nav-en {
    transform: translateY(100%);
    opacity: 0;
}


/* 导航下划线动画 — v8 改用 ::before（释放 ::after）*/

.main-nav a::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 1px;
}

.main-nav a:hover::before,
.main-nav .current-menu-item>a::before,
.main-nav .current_page_item>a::before {
    width: 100%;
}


/* 移除旧的 ::after 下划线样式（v8 起 ::after 留作他用）*/

.main-nav a::after {
    content: none;
}


/* 语言切换 */

.lang-switch {
    font-size: var(--text-caption);
    color: var(--color-light);
    margin-left: 1.5rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.lang-switch:hover {
    color: var(--color-brand-blue);
}


/* 导航栏联系邮箱（替换 EN/中） */

.header-contact {
    font-size: var(--text-caption);
    color: var(--color-mid);
    margin-left: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.header-contact:hover {
    color: var(--color-brand-blue);
}

@media (max-width: 768px) {
    .header-contact {
        display: none;
    }
}


/* 汉堡菜单（移动端） */

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-darkest);
    transition: all var(--transition-smooth);
    border-radius: 1px;
}

.menu-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}


/* 主内容区域（顶部留出导航高度） */

.site-content {
    padding-top: var(--nav-height);
}


/* ============================================================
   页脚
   ============================================================ */

.site-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: var(--spacing-section-lg) 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--spacing-card-gap);
    padding-bottom: var(--spacing-section-md);
}

.footer-brand h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: var(--spacing-element-md);
}

.footer-brand .footer-tagline {
    font-size: var(--text-small);
    color: var(--color-footer-muted);
    line-height: 1.6;
    margin-bottom: var(--spacing-element-lg);
}

.footer-social {
    display: flex;
    gap: var(--spacing-element-md);
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: var(--text-caption);
    color: var(--color-footer-muted);
}

.footer-social a:hover {
    border-color: var(--color-brand-blue);
    color: var(--color-brand-blue);
    background: rgba(0, 102, 255, 0.1);
}

.footer-col h4 {
    font-size: var(--text-small);
    font-weight: 600;
    margin-bottom: var(--spacing-element-lg);
    color: var(--color-footer-text);
}

.footer-col ul li {
    margin-bottom: 0.75rem;
}

.footer-col ul li a {
    font-size: var(--text-small);
    color: var(--color-footer-muted);
    transition: color var(--transition-fast);
}

.footer-col ul li a:hover {
    color: var(--color-white);
}

.footer-col .contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--color-footer-muted);
    font-size: var(--text-small);
    margin-bottom: 0.75rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--spacing-element-lg) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-caption);
    color: var(--color-footer-muted);
}

.footer-bottom a {
    color: var(--color-footer-muted);
}

.footer-bottom a:hover {
    color: var(--color-white);
}


/* 回到顶部 */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-brand-blue);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-smooth);
    z-index: 100;
    font-size: 1.25rem;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-brand-blue-hover);
}


/* ============================================================
   区块通用
   ============================================================ */

.section {
    padding: var(--spacing-section-xl) 0;
}

.section--bg {
    background: var(--color-bg);
}

.section--dark {
    background: var(--color-darkest);
    color: var(--color-white);
}

.section--dark .section-title {
    color: var(--color-white);
}

.section--dark .section-subtitle {
    color: var(--color-footer-muted);
}


/* ============================================================
   Hero 区
   ============================================================ */

.hero {
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero .container {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    color: var(--color-darkest);
    margin-bottom: var(--spacing-element-lg);
}

.hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-mid);
    margin-bottom: 2.5rem;
    line-height: 1.7;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.hero__actions {
    display: flex;
    gap: var(--spacing-element-md);
    justify-content: center;
    margin-bottom: var(--spacing-section-md);
}


/* Hero 数据卡片 */

.hero__stats {
    display: flex;
    gap: var(--spacing-card-gap);
    justify-content: center;
    flex-wrap: wrap;
}

.hero__stat-card {
    background: var(--color-white);
    padding: var(--spacing-element-lg) 2rem;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    box-shadow: var(--shadow-card);
    min-width: 160px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.hero__stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.hero__stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-brand-blue);
    transition: background var(--transition-fast);
}

.hero__stat-card:hover::before {
    background: var(--color-brand-blue-hover);
}

.hero__stat-number {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-brand-blue);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hero__stat-label {
    font-size: var(--text-small);
    color: var(--color-mid);
}


/* ============================================================
   业务卡片
   ============================================================ */

.business-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

.business-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: var(--spacing-card-pad);
    text-align: center;
    transition: all var(--transition-smooth);
    position: relative;
}

.business-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.business-card--geo:hover {
    border-color: var(--color-brand-blue);
}

.business-card--mofang:hover {
    border-color: var(--color-brand-purple);
}

.business-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-element-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.business-card__icon svg {
    width: 100%;
    height: 100%;
}

.business-card__title-line {
    width: 40px;
    height: 2px;
    margin: 0 auto var(--spacing-element-lg);
    border-radius: 1px;
}

.line--blue {
    background: var(--color-brand-blue);
}

.line--purple {
    background: var(--color-brand-purple);
}

.business-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 500;
    margin-bottom: var(--spacing-element-md);
    color: var(--color-darkest);
}

.business-card__desc {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.6;
    margin-bottom: var(--spacing-element-lg);
    min-height: 3rem;
}

.business-card__meta {
    font-size: var(--text-caption);
    color: var(--color-light);
    margin-bottom: var(--spacing-element-lg);
}

.business-card--geo .business-card__icon {
    color: var(--color-brand-blue);
}

.business-card--geo .business-card__title {
    color: var(--color-brand-blue);
}

.business-card--geo .business-card__meta {
    color: var(--color-mid);
}

.business-card--mofang .business-card__icon {
    color: var(--color-brand-purple);
}

.business-card--mofang .business-card__title {
    color: var(--color-brand-purple);
}

.business-card--mofang .business-card__meta {
    color: var(--color-mid);
}


/* ============================================================
   信任理由卡片（为什么选择我们）
   ============================================================ */

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-card-gap);
}

.trust-card {
    background: var(--color-white);
    padding: var(--spacing-card-pad);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform var(--transition-smooth);
}

.trust-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.trust-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-element-md);
    color: var(--color-brand-blue);
}

.trust-card__icon svg {
    width: 100%;
    height: 100%;
}

.trust-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--color-darkest);
}

.trust-card__desc {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.6;
}


/* ============================================================
   Logo 墙
   ============================================================ */

.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem var(--spacing-section-md);
    padding: var(--spacing-section-md) 0;
}

.client-logos__item {
    filter: grayscale(100%) opacity(60%);
    transition: filter 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-mid);
    font-family: var(--font-heading);
    position: relative;
}

.client-logos__item img {
    filter: grayscale(100%) opacity(70%);
    transition: filter 0.4s ease, transform 0.4s ease;
    max-height: 44px;
}

.client-logos__item:hover {
    filter: grayscale(0%) opacity(100%);
    color: var(--color-brand-blue);
    transform: scale(1.15) translateY(-2px);
}

.client-logos__item:hover img {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 102, 255, 0.25));
}


/* ============================================================
   数据总览
   ============================================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-card-gap);
}

.stat-item {
    text-align: center;
    padding: var(--spacing-card-pad);
}

.stat-item__number {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-brand-blue);
    margin-bottom: 0.5rem;
}

.stat-item__number--green {
    color: var(--color-brand-green);
}

.stat-item__label {
    font-size: var(--text-small);
    color: var(--color-footer-muted);
}


/* ============================================================
   新闻卡片
   ============================================================ */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-card-gap);
}

.news-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-smooth);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.news-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg);
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.news-card:hover .news-card__image img {
    transform: scale(1.03);
}

.news-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.news-card__placeholder::after {
    content: '';
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    position: absolute;
}

.news-card__body {
    padding: var(--spacing-element-lg);
}

.news-card__meta {
    margin-bottom: 0.75rem;
}

.news-card__tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-caption);
    border-radius: var(--radius-tag);
    font-weight: 500;
}

.tag--blue {
    background: var(--color-brand-blue);
    color: var(--color-white);
}

.tag--purple {
    background: var(--color-brand-purple);
    color: var(--color-white);
}

.tag--green {
    background: var(--color-brand-green);
    color: var(--color-white);
}

.news-card__title {
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.news-card__title a {
    color: var(--color-darkest);
    transition: color var(--transition-fast);
}

.news-card__title a:hover {
    color: var(--color-brand-blue);
}

.news-card__date {
    font-size: var(--text-caption);
    color: var(--color-light);
}


/* ============================================================
   关于我们页面
   ============================================================ */

.about-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-section-md);
    align-items: center;
}

.about-hero__text {
    max-width: 520px;
}

.about-hero__text h1 {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-element-lg);
}

.about-hero__text .subtitle {
    font-size: 1.125rem;
    color: var(--color-mid);
    line-height: 1.7;
}

.about-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero__visual .geo-shapes {
    position: relative;
    width: 300px;
    height: 300px;
}


/* 关于我们 - 企业简介 */

.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-section-md);
    align-items: center;
}

.about-intro__text p {
    font-size: var(--text-body);
    line-height: 1.8;
    color: var(--color-dark);
    margin-bottom: var(--spacing-element-md);
}

.about-intro__image {
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-bg);
}

.about-intro__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 时间线 */

.timeline {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-section-md) 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-line);
    transform: translateX(-50%);
}

.timeline__item {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-section-md);
    position: relative;
}

.timeline__item:nth-child(odd) {
    flex-direction: row;
    padding-right: calc(50% + 2rem);
}

.timeline__item:nth-child(even) {
    flex-direction: row-reverse;
    padding-left: calc(50% + 2rem);
}

.timeline__dot {
    position: absolute;
    left: 50%;
    /* v20 修复：dot 垂直居中于卡片中央，保证所有节点沿中间竖线整齐排列 */
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-brand-blue);
    transform: translate(-50%, -50%);
    z-index: 1;
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
}

.timeline__content {
    background: var(--color-white);
    padding: var(--spacing-element-lg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.timeline__content .year {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-brand-blue);
    margin-bottom: 0.25rem;
}

.timeline__content .title {
    font-weight: 600;
    font-size: var(--text-body);
    margin-bottom: 0.25rem;
}

.timeline__content .desc {
    font-size: var(--text-small);
    color: var(--color-mid);
}


/* 价值观 */

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-card-gap);
}

.value-card {
    background: var(--color-white);
    padding: var(--spacing-card-pad);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border-left: 3px solid var(--color-brand-blue);
}

.value-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.value-card__desc {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.6;
}

.value-card--full {
    grid-column: 1 / -1;
}


/* 团队 */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-card-gap);
    justify-content: center;
}

.team-card {
    text-align: center;
}

.team-card__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto var(--spacing-element-md);
    overflow: hidden;
    background: var(--color-bg);
    border: 3px solid transparent;
    transition: border-color var(--transition-fast);
}

.team-card:hover .team-card__avatar {
    border-color: var(--color-brand-blue);
}

.team-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card__avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-light);
    background: var(--color-bg);
}

.team-card__name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.team-card__role {
    font-size: var(--text-small);
    color: var(--color-mid);
    margin-bottom: 0.25rem;
}

.team-card__bio {
    font-size: var(--text-small);
    color: var(--color-light);
    line-height: 1.5;
}


/* ============================================================
   业务板块页面
   ============================================================ */

.business-detail-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-section-md);
}

.business-detail {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--spacing-card-gap);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: all var(--transition-smooth);
}

.business-detail:hover {
    box-shadow: var(--shadow-card-hover);
}

.business-detail--geo {
    border-top: 3px solid var(--color-brand-blue);
}

.business-detail--mofang {
    border-top: 3px solid var(--color-brand-purple);
}

.business-detail__content {
    padding: var(--spacing-card-pad);
}

.business-detail__title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 500;
    margin-bottom: var(--spacing-element-md);
}

.business-detail--geo .business-detail__title {
    color: var(--color-brand-blue);
}

.business-detail--mofang .business-detail__title {
    color: var(--color-brand-purple);
}

.business-detail__desc {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.7;
    margin-bottom: var(--spacing-element-lg);
}

.business-detail__advantages {
    list-style: none;
    margin-bottom: var(--spacing-element-lg);
}

.business-detail__advantages li {
    font-size: var(--text-small);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-dark);
}

.business-detail__advantages li::before {
    content: '✓';
    color: var(--color-brand-green);
    font-weight: 700;
}

.business-detail__clients {
    font-size: var(--text-caption);
    color: var(--color-light);
    margin-bottom: var(--spacing-element-lg);
}

.business-detail__sidebar {
    padding: var(--spacing-card-pad);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.business-detail__stat-number {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.business-detail--geo .business-detail__stat-number {
    color: var(--color-brand-blue);
}

.business-detail--mofang .business-detail__stat-number {
    color: var(--color-brand-purple);
}

.business-detail__stat-label {
    font-size: var(--text-small);
    color: var(--color-mid);
}

.business-detail__stat-spacer {
    width: 40px;
    height: 1px;
    background: var(--color-line);
    margin: 0.75rem auto;
}

.business-logic {
    text-align: center;
    max-width: var(--max-width-content);
    margin: 0 auto;
}

.business-logic__item {
    margin-bottom: var(--spacing-section-md);
}

.business-logic__item-title {
    font-size: var(--text-h3);
    font-weight: 500;
    margin-bottom: var(--spacing-element-md);
    color: var(--color-darkest);
}

.business-logic__item-desc {
    font-size: var(--text-body);
    color: var(--color-mid);
    line-height: 1.7;
}

.business-logic__item-sep {
    width: 60px;
    height: 1px;
    background: var(--color-line);
    margin: 0 auto var(--spacing-element-md);
}

.business-logic__conclusion {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-brand-blue);
    margin-top: var(--spacing-element-lg);
}


/* ============================================================
   案例页面
   ============================================================ */

.case-filters {
    display: flex;
    justify-content: center;
    gap: var(--spacing-element-md);
    margin-bottom: var(--spacing-section-md);
    flex-wrap: wrap;
}

.case-filter__btn {
    padding: 0.5rem 1.5rem;
    font-size: var(--text-small);
    border: 1px solid var(--color-line);
    border-radius: 2rem;
    background: var(--color-white);
    color: var(--color-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.case-filter__btn:hover,
.case-filter__btn.is-active {
    background: var(--color-brand-blue);
    color: var(--color-white);
    border-color: var(--color-brand-blue);
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-card-gap);
}

.case-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-smooth);
    position: relative;
}

.case-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.case-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}

.case-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.case-card:hover .case-card__image img {
    transform: scale(1.05);
}

.case-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 102, 255, 0.5);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-card:hover .case-card__image::after {
    opacity: 1;
}

.case-card__body {
    padding: var(--spacing-element-lg);
}

.case-card__company {
    font-weight: 600;
    font-size: var(--text-body);
    margin-bottom: 0.5rem;
}

.case-card__industry {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-caption);
    border-radius: var(--radius-tag);
    background: var(--color-bg);
    color: var(--color-mid);
    margin-bottom: 0.75rem;
}

.case-card__highlight {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-brand-green);
}

.case-card__actions {
    margin-top: 0.75rem;
}


/* 案例详情 */

.case-detail {
    max-width: var(--max-width-content);
    margin: 0 auto;
}

.case-detail__header {
    text-align: center;
    margin-bottom: var(--spacing-section-md);
}

.case-detail__header h1 {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-element-md);
}

.case-detail__meta {
    display: flex;
    gap: var(--spacing-element-md);
    justify-content: center;
    font-size: var(--text-small);
    color: var(--color-mid);
}

.case-detail__section {
    margin-bottom: var(--spacing-section-md);
}

.case-detail__section h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 500;
    margin-bottom: var(--spacing-element-md);
    padding-left: var(--spacing-element-md);
    border-left: 3px solid var(--color-brand-blue);
}

.case-detail__section p {
    font-size: var(--text-body);
    line-height: 1.8;
    color: var(--color-dark);
}

.case-detail__result {
    background: var(--color-bg);
    border-radius: var(--radius-card);
    padding: var(--spacing-card-pad);
    margin-top: var(--spacing-element-lg);
}

.case-detail__result-number {
    font-family: var(--font-mono);
    font-size: var(--text-h2);
    font-weight: 700;
    color: var(--color-brand-green);
}


/* ============================================================
   博客列表
   ============================================================ */

.blog-list {
    display: flex;
    gap: var(--spacing-section-md);
}

.blog-list__main {
    flex: 1;
    min-width: 0;
}

.blog-list__sidebar {
    width: 300px;
    flex-shrink: 0;
}

.blog-card {
    display: flex;
    gap: var(--spacing-element-lg);
    background: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-card-gap);
    transition: transform var(--transition-smooth);
}

.blog-card:hover {
    transform: translateX(4px);
}

.blog-card__image {
    width: 240px;
    flex-shrink: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg);
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-card__image img {
    transform: scale(1.03);
}

.blog-card__body {
    padding: var(--spacing-element-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.blog-card__title a {
    color: var(--color-darkest);
}

.blog-card__title a:hover {
    color: var(--color-brand-blue);
}

.blog-card__excerpt {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.blog-card__footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-element-md);
    font-size: var(--text-caption);
    color: var(--color-light);
}


/* 侧边栏 */

.sidebar__widget {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--spacing-element-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-element-lg);
}

.sidebar__widget h3 {
    font-size: var(--text-body);
    font-weight: 600;
    margin-bottom: var(--spacing-element-md);
    padding-bottom: var(--spacing-element-md);
    border-bottom: 1px solid var(--color-line);
}

.sidebar__widget ul li {
    margin-bottom: 0.5rem;
}

.sidebar__widget ul li a {
    font-size: var(--text-small);
    color: var(--color-mid);
    transition: color var(--transition-fast);
}

.sidebar__widget ul li a:hover {
    color: var(--color-brand-blue);
}


/* ============================================================
   博客详情页
   ============================================================ */

.article {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: var(--spacing-section-lg) 0;
}

.article__header {
    text-align: center;
    margin-bottom: var(--spacing-section-md);
}

.article__title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--spacing-element-lg);
}

.article__meta {
    display: flex;
    gap: var(--spacing-element-lg);
    justify-content: center;
    font-size: var(--text-small);
    color: var(--color-mid);
}

.article__content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-dark);
}

.article__content p {
    margin-bottom: var(--spacing-element-lg);
}

.article__content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    margin: var(--spacing-section-md) 0 var(--spacing-element-lg);
    font-weight: 500;
}

.article__content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: var(--spacing-element-lg) 0 var(--spacing-element-md);
}

.article__content img {
    border-radius: var(--radius-card);
    margin: var(--spacing-element-lg) auto;
}

.article__content blockquote {
    border-left: 3px solid var(--color-brand-blue);
    padding: var(--spacing-element-md) var(--spacing-element-lg);
    margin: var(--spacing-element-lg) 0;
    background: var(--color-bg);
    border-radius: 0 var(--radius-tag) var(--radius-tag) 0;
    color: var(--color-mid);
}

.article__content pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: var(--spacing-element-lg);
    border-radius: var(--radius-card);
    overflow-x: auto;
    margin: var(--spacing-element-lg) 0;
    font-size: var(--text-small);
    line-height: 1.6;
}

.article__content code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
}

.article__content a {
    color: var(--color-brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* 文章导航 */

.article-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-section-md);
    padding-top: var(--spacing-section-md);
    border-top: 1px solid var(--color-line);
    font-size: var(--text-small);
}

.article-nav a {
    color: var(--color-mid);
}

.article-nav a:hover {
    color: var(--color-brand-blue);
}


/* 相关推荐 */

.related-posts {
    margin-top: var(--spacing-section-md);
}

.related-posts h3 {
    font-size: var(--text-h3);
    margin-bottom: var(--spacing-element-lg);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-card-gap);
}


/* ============================================================
   加入我们
   ============================================================ */

.culture-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-card-gap);
}

.culture-card {
    background: var(--color-white);
    padding: var(--spacing-card-pad);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform var(--transition-smooth);
}

.culture-card:hover {
    transform: translateY(-2px);
}

.culture-card__icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-element-md);
}

.culture-card__title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.culture-card__desc {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.5;
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-element-md);
    max-width: var(--max-width-content);
    margin: 0 auto;
}

.job-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.job-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-element-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.job-card__header:hover {
    background: var(--color-bg-hover);
}

.job-card__title {
    font-weight: 600;
    font-size: var(--text-body);
}

.job-card__meta {
    display: flex;
    gap: var(--spacing-element-md);
    font-size: var(--text-small);
    color: var(--color-mid);
}

.job-card__toggle {
    font-size: var(--text-body);
    color: var(--color-light);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.job-card.is-open .job-card__toggle {
    transform: rotate(180deg);
}

.job-card__body {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--spacing-element-lg);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-card.is-open .job-card__body {
    max-height: 600px;
    padding: 0 var(--spacing-element-lg) var(--spacing-element-lg);
}

.job-card.is-open {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-brand-blue);
}

.job-card__body h4 {
    font-size: var(--text-small);
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: var(--spacing-element-md);
}

.job-card__body ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin-bottom: var(--spacing-element-lg);
}

.job-card__body ul li {
    font-size: var(--text-small);
    color: var(--color-mid);
    margin-bottom: 0.25rem;
    line-height: 1.6;
}


/* ============================================================
   联系我们
   ============================================================ */

.contact-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--spacing-section-md);
    align-items: start;
}

.contact-form {
    background: var(--color-white);
    padding: var(--spacing-card-pad);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.form-group {
    margin-bottom: var(--spacing-element-lg);
}

.form-group label {
    display: block;
    font-size: var(--text-small);
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.form-group label .required {
    color: #EF4444;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--text-body);
    font-family: var(--font-sans);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-button);
    background: var(--color-white);
    color: var(--color-darkest);
    transition: border-color var(--transition-fast);
    outline: none;
}

.form-control:focus {
    border-color: var(--color-brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.form-control::placeholder {
    color: var(--color-light);
}

textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7280'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-submit {
    text-align: right;
}

.contact-info-sidebar {
    background: var(--color-darkest);
    color: var(--color-footer-text);
    padding: var(--spacing-card-pad);
    border-radius: var(--radius-card);
}

.contact-info-sidebar h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    margin-bottom: var(--spacing-element-lg);
}

.contact-info-sidebar .info-item {
    margin-bottom: var(--spacing-element-lg);
}

.contact-info-sidebar .info-item__label {
    font-size: var(--text-caption);
    color: var(--color-footer-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.contact-info-sidebar .info-item__value {
    font-size: var(--text-small);
}

.contact-qr {
    text-align: center;
    margin-top: var(--spacing-element-lg);
    padding-top: var(--spacing-element-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-qr img {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-element-md);
    border-radius: var(--radius-tag);
    background: var(--color-white);
    padding: 0.5rem;
}

.contact-qr p {
    font-size: var(--text-caption);
    color: var(--color-footer-muted);
}


/* ============================================================
   404 页面
   ============================================================ */

.page-404 {
    min-height: calc(100vh - var(--nav-height) - 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-section-xl) 0;
    position: relative;
    overflow: hidden;
}

.page-404__decor {
    position: absolute;
    pointer-events: none;
    opacity: 0.1;
}

.page-404__content {
    position: relative;
    z-index: 1;
}

.page-404__number {
    font-family: var(--font-mono);
    font-size: 8rem;
    font-weight: 700;
    color: var(--color-brand-blue);
    line-height: 1;
    margin-bottom: var(--spacing-element-md);
}

.page-404__text {
    font-size: 1.125rem;
    color: var(--color-mid);
    margin-bottom: var(--spacing-section-md);
}

.page-404__actions {
    display: flex;
    gap: var(--spacing-element-md);
    justify-content: center;
}


/* ============================================================
   公用样式
   ============================================================ */

.section-cta {
    text-align: center;
    padding: var(--spacing-section-lg) 0;
}

.section-cta__title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    margin-bottom: var(--spacing-element-md);
}

.section-cta__actions {
    display: flex;
    gap: var(--spacing-element-md);
    justify-content: center;
    margin-top: var(--spacing-element-lg);
}

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


/* ============================================================
   工具类 & 占位图样式
   ============================================================ */

.mt-section {
    margin-top: var(--spacing-section-md);
}

.mb-section {
    margin-bottom: var(--spacing-section-md);
}


/* 关于我们 - 简介区抽象几何插画 */

.about-intro__illustration {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F0F4FF 0%, #F5F0FF 100%);
    position: relative;
    overflow: hidden;
}

.about-intro__illustration::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    background: var(--color-brand-blue);
    border-radius: 24px;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.08;
}

.about-intro__illustration::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 25%;
    width: 120px;
    height: 120px;
    background: var(--color-brand-purple);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.1;
}

.about-intro__illustration-stack {
    position: relative;
    z-index: 1;
    width: 160px;
    height: 160px;
}


/* 案例卡片几何占位图 */

.case-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.case-placeholder--geo {
    background: linear-gradient(135deg, #E8F0FF, #D0E0FF);
}

.case-placeholder--mofang {
    background: linear-gradient(135deg, #F0E8FF, #E0D0FF);
}

.case-placeholder__icon {
    width: 64px;
    height: 64px;
    color: var(--color-white);
    opacity: 0.6;
}


/* 团队头像占位 */

.team-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-avatar-placeholder span {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-white);
    font-family: var(--font-heading);
}


/* 新闻卡片分类占位图 */

.news-placeholder--company {
    background: linear-gradient(135deg, #0066FF, #0052CC);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.news-placeholder--industry {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.news-placeholder--tech {
    background: linear-gradient(135deg, #10B981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.news-placeholder__icon {
    width: 48px;
    height: 48px;
    opacity: 0.35;
    position: relative;
    z-index: 1;
}


/* ============================================================
   滚动动画
   ============================================================ */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Staggered delay classes for sequenced animations */

.animate-on-scroll.delay-1 {
    transition-delay: 0ms;
}

.animate-on-scroll.delay-2 {
    transition-delay: 100ms;
}

.animate-on-scroll.delay-3 {
    transition-delay: 200ms;
}

.animate-on-scroll.delay-4 {
    transition-delay: 300ms;
}

.animate-on-scroll.delay-5 {
    transition-delay: 400ms;
}

.animate-on-scroll.delay-6 {
    transition-delay: 500ms;
}


/* 导航滚动提示箭头（首页 Hero 底部） */

.scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    animation: bounce 2s infinite;
    color: var(--color-light);
    font-size: 1.5rem;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}


/* ============================================================
   移动端导航遮罩
   ============================================================ */

.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-nav-overlay.is-open {
    display: flex;
    opacity: 1;
}

.mobile-nav-overlay a {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-dark);
    transition: color var(--transition-fast);
    /* v8 移动端菜单：上下结构（中文 + 英文小字）*/
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.3;
    text-align: center;
}

.mobile-nav-overlay a:hover,
.mobile-nav-overlay .current-menu-item>a {
    color: var(--color-brand-blue);
}


/* v8 移动端菜单：英文小字 */

.mobile-nav-overlay a .nav-text {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
}

.mobile-nav-overlay a .nav-en {
    display: block;
    position: static;
    transform: none !important;
    opacity: 1 !important;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-light);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1024px) {
     :root {
        --text-h1: 2.5rem;
        --text-h2: 2rem;
        --spacing-section-xl: 5rem;
        --spacing-section-lg: 4rem;
        --spacing-section-md: 2.5rem;
    }
    .main-nav {
        display: none;
    }
    .menu-toggle {
        display: flex;
    }
    .business-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-card-gap);
    }
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .news-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-hero {
        grid-template-columns: 1fr;
    }
    .about-intro {
        grid-template-columns: 1fr;
    }
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .culture-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-layout {
        grid-template-columns: 1fr;
    }
    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .blog-list {
        flex-direction: column;
    }
    .blog-list__sidebar {
        width: 100%;
    }
    .hero__stats {
        gap: var(--spacing-element-md);
    }
    .hero__stat-card {
        min-width: 140px;
    }
    .timeline::before {
        left: 1.5rem;
    }
    .timeline__item:nth-child(odd) {
        flex-direction: row;
        padding-right: 0;
        padding-left: calc(1.5rem + 2rem);
    }
    .timeline__item:nth-child(even) {
        flex-direction: row;
        padding-left: calc(1.5rem + 2rem);
    }
    .timeline__dot {
        left: 1.5rem;
    }
    .related-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
     :root {
        --text-h1: 2rem;
        --text-h2: 1.625rem;
        --text-h3: 1.25rem;
        --spacing-section-xl: 4rem;
        --spacing-section-lg: 3rem;
        --spacing-section-md: 2rem;
        --spacing-card-gap: 1.5rem;
        --spacing-card-pad: 1.5rem;
        --nav-height: 64px;
    }
    .hero__title {
        font-size: 2rem;
        letter-spacing: 1px;
    }
    .hero__subtitle {
        font-size: var(--text-body);
    }
    .hero__actions {
        flex-direction: column;
        align-items: center;
    }
    .hero__stats {
        flex-direction: column;
        align-items: center;
    }
    .hero__stat-card {
        width: 100%;
        max-width: 280px;
    }
    .trust-grid {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-section-md);
    }
    .footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    .values-grid {
        grid-template-columns: 1fr;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .culture-grid {
        grid-template-columns: 1fr;
    }
    .cases-grid {
        grid-template-columns: 1fr;
    }
    .business-detail {
        grid-template-columns: 1fr;
    }
    .client-logos {
        gap: 1.5rem;
    }
    .client-logos__item {
        font-size: 1rem;
    }
    .blog-card {
        flex-direction: column;
    }
    .blog-card__image {
        width: 100%;
    }
    .business-logic__conclusion {
        font-size: var(--text-body);
    }
    .stat-item__number {
        font-size: 2rem;
    }
    .article__title {
        font-size: 1.75rem;
    }
    .page-404__number {
        font-size: 5rem;
    }
}


/* ============================================================
   合作流程 Workflow
   ============================================================ */

.workflow {
    display: flex;
    gap: var(--spacing-card-gap);
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.workflow__step {
    flex: 1 1 220px;
    max-width: 260px;
    text-align: center;
    position: relative;
    padding: var(--spacing-card-pad);
    background: var(--color-white);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-line);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.workflow__step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.workflow__num {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-element-md);
    opacity: 0.3;
}

.workflow__title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 500;
    margin-bottom: var(--spacing-element-md);
    color: var(--color-darkest);
}

.workflow__desc {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.6;
}

.workflow__arrow {
    display: none;
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--color-light);
}

@media (min-width: 769px) {
    .workflow__arrow {
        display: block;
    }
}


/* ============================================================
   客户好评轮播 Reviews Marquee — v3
   特性：CSS 动画无缝循环（从右往左）、鼠标悬停暂停、两侧渐隐遮罩
   ============================================================ */

.section-reviews {
    /* 评区块允许内容溢出，配合全宽 marquee */
    overflow: visible;
    /* v9 修复：与下方深色 section-stats 拉开距离，避免视觉重叠 */
    padding-bottom: calc(var(--spacing-section-lg) + 2rem);
}

.reviews-marquee {
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
    width: 100%;
    /* 限制最大宽度与页面 container 对齐，避免大屏幕上卡片过于分散 */
    max-width: var(--max-width-container);
    margin: 0 auto;
    /* 两侧渐隐遮罩 - 改善边缘消失效果 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.reviews-marquee__track {
    display: flex;
    gap: var(--spacing-card-gap);
    flex-wrap: nowrap;
    width: max-content;
    /* 关键：CSS 动画从右往左 */
    animation: reviewsMarquee 60s linear infinite;
    will-change: transform;
}


/* 鼠标悬停整个 marquee 时暂停 */

.reviews-marquee:hover .reviews-marquee__track {
    animation-play-state: paused;
}


/* 核心动画：从 0 平移到 -50%（因为克隆了一倍内容） */

@keyframes reviewsMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* 减少动效偏好 */

@media (prefers-reduced-motion: reduce) {
    .reviews-marquee__track {
        animation: none;
    }
}

.review-card {
    flex: 0 0 380px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: var(--spacing-card-pad);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth), transform 0.3s ease;
    cursor: default;
}

.review-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(0, 102, 255, 0.2);
    transform: translateY(-4px);
}

.review-card__quote {
    flex: 1;
    margin-bottom: var(--spacing-element-lg);
}

.review-card__quote-icon {
    width: 28px;
    height: 28px;
    color: var(--color-brand-blue);
    opacity: 0.2;
    margin-bottom: var(--spacing-element-md);
}

.review-card__quote p {
    font-size: var(--text-small);
    color: var(--dark);
    line-height: 1.7;
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: var(--spacing-element-md);
    border-top: 1px solid var(--color-line);
}

.review-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--text-body);
    flex-shrink: 0;
}

.review-card__name {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-darkest);
}

.review-card__role {
    font-size: var(--text-caption);
    color: var(--color-light);
}


/* 响应式 - 合作流程 + 好评轮播 */

@media (max-width: 768px) {
    .workflow {
        flex-direction: column;
        align-items: center;
    }
    .workflow__step {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .review-card {
        flex: 0 0 260px;
    }
}


/* ============================================================
   v2 增强动效 — 字符渐显、磁吸、光斑、3D 倾斜
   ============================================================ */


/* ----- 字符渐显标题 ----- */

.split-text {
    display: inline-block;
}

.split-text__char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-text__char.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ----- 按钮磁吸（Magnetic Button）----- */

.btn--magnetic {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}


/* ----- 滚动进度条（顶部）----- */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(0, 102, 255, 0.6);
}


/* ----- 卡片悬浮光斑（Card Spotlight）----- */

.card-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient( 400px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(0, 102, 255, 0.12), transparent 40%);
    transition: opacity 0.3s ease;
    z-index: 0;
    border-radius: inherit;
}


/* 紫色光斑（用于紫色主题卡片）*/

.business-card--mofang~.card-spotlight,
.business-card--mofang .card-spotlight {
    background: radial-gradient( 400px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(124, 58, 237, 0.12), transparent 40%);
}

.business-card:hover .card-spotlight,
.trust-card:hover .card-spotlight,
.stat-item:hover .card-spotlight,
.news-card:hover .card-spotlight,
.case-card:hover .card-spotlight,
.culture-card:hover .card-spotlight,
.value-card:hover .card-spotlight {
    opacity: 1;
}


/* 确保卡片内容在光斑之上 */

.business-card>*:not(.card-spotlight),
.trust-card>*:not(.card-spotlight),
.news-card>*:not(.card-spotlight),
.case-card>*:not(.card-spotlight) {
    position: relative;
    z-index: 1;
}


/* ----- 数字辉光（glowing numbers）----- */

.stat-item__number,
.hero__stat-number {
    position: relative;
    transition: text-shadow 0.6s ease;
}

.stat-item__number.is-glowing,
.hero__stat-number.is-glowing {
    text-shadow: 0 0 20px rgba(0, 102, 255, 0.4), 0 0 40px rgba(0, 102, 255, 0.2);
}

.stat-item__number--green.is-glowing {
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.4), 0 0 40px rgba(16, 185, 129, 0.2);
}


/* ============================================================
   v2 首页 Hero — Canvas 粒子背景容器
   ============================================================ */

.hero {
    position: relative;
    overflow: hidden;
}

.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}


/* Hero 标题增强（字符渐显后的样式）*/

.hero__title.split-text__char,
.hero__title .split-text__char {
    color: var(--color-darkest);
}


/* Hero 标签徽章（Tag pill） */

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(0, 102, 255, 0.08);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 100px;
    font-size: var(--text-caption);
    color: var(--color-brand-blue);
    margin-bottom: var(--spacing-element-md);
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero__tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-blue);
    box-shadow: 0 0 8px var(--color-brand-blue);
    animation: pulse 2s ease-in-out infinite;
}


/* Hero 标题渐变描边版本（备用） */

.hero__title--gradient {
    background: linear-gradient(135deg, var(--color-darkest) 0%, var(--color-brand-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ============================================================
   v2 业务卡 — 渐变边框 + 流光扫过
   ============================================================ */

.business-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: var(--spacing-card-pad);
    text-align: center;
    transition: all var(--transition-smooth);
    overflow: hidden;
}


/* 流光扫过效果（伪元素） */

.business-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    z-index: 1;
}

.business-card:hover::before {
    left: 100%;
}


/* 渐变边框（hover 时显示） */

.business-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.business-card:hover::after {
    opacity: 1;
}

.business-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 102, 255, 0.15);
    border-color: transparent;
}

.business-card--geo:hover {
    box-shadow: 0 20px 60px rgba(0, 102, 255, 0.2);
}

.business-card--mofang:hover {
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.2);
}


/* 业务卡 icon 浮动 */

.business-card__icon svg {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.business-card:hover .business-card__icon svg {
    transform: scale(1.1) rotate(-5deg);
}


/* 业务卡标题线动画 */

.business-card__title-line {
    transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.business-card:hover .business-card__title-line {
    width: 80px;
}


/* ============================================================
   v2 信任理由卡 — 渐变背景 + 图标脉冲
   ============================================================ */

.trust-card {
    position: relative;
    background: var(--color-white);
    padding: var(--spacing-card-pad);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: all var(--transition-smooth);
    overflow: hidden;
    border: 1px solid var(--color-line);
}

.trust-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.03), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.trust-card:hover::before {
    opacity: 1;
}

.trust-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.1);
    border-color: rgba(0, 102, 255, 0.2);
}

.trust-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 102, 255, 0.05));
    color: var(--color-brand-blue);
    margin: 0 auto var(--spacing-element-md);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.trust-card__icon svg {
    width: 28px;
    height: 28px;
}

.trust-card:hover .trust-card__icon {
    background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
    color: var(--color-white);
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
}


/* ============================================================
   v2 Stats 数据区 — 数字辉光 + 装饰线条
   ============================================================ */

.section--dark {
    position: relative;
    overflow: hidden;
}

.section--dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.5), transparent);
    transform: translateX(-50%);
}

.section--dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.5), transparent);
    transform: translateX(-50%);
}

.stat-item {
    position: relative;
    padding: var(--spacing-card-pad);
    z-index: 1;
}

.stat-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
    transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1), left 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateX(-50%);
}

.stat-item:hover::after {
    width: 60px;
}

.stat-item__number {
    background: linear-gradient(135deg, #FFFFFF 0%, #93C5FD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    /* 兼容兜底：不支持 background-clip:text 时使用纯色 */
    color: #93C5FD;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

.stat-item__number--green {
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 兼容兜底 */
    color: #10B981;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .stat-item__number,
    .stat-item__number--green {
        color: transparent;
    }
}


/* ============================================================
   v2 Workflow 工作流 — 连接线 + 节点传递
   ============================================================ */

.workflow {
    position: relative;
}

@media (min-width: 769px) {
    .workflow::before {
        content: '';
        position: absolute;
        top: 60px;
        left: 12%;
        right: 12%;
        height: 2px;
        background: linear-gradient(90deg, rgba(0, 102, 255, 0.2), rgba(124, 58, 237, 0.2), rgba(16, 185, 129, 0.2), rgba(245, 158, 11, 0.2));
        z-index: 0;
    }
}

.workflow__step {
    position: relative;
    z-index: 1;
}

.workflow__num {
    display: inline-block;
    margin: 0 auto var(--spacing-element-md);
    position: relative;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.05);
    border: 1px dashed currentColor;
    font-size: 1.25rem;
    text-align: center;
    opacity: 1;
    transition: all 0.4s ease;
}

.workflow__step:hover .workflow__num {
    background: currentColor;
    color: var(--color-white) !important;
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3);
}

.workflow__step:hover .workflow__num {
    /* 数字变白色 */
}


/* 让数字在背景色填充时变白 */

.workflow__step:hover .workflow__num {
    color: var(--color-white) !important;
}


/* ============================================================
   v2 News 卡片 — 图像视差 + 分类色条
   ============================================================ */

.news-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-smooth);
    border: 1px solid var(--color-line);
}

.news-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg);
    position: relative;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.news-card:hover .news-card__image img {
    transform: scale(1.08);
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.12);
    border-color: rgba(0, 102, 255, 0.2);
}

.news-card__body {
    padding: var(--spacing-element-lg);
    position: relative;
}

.news-card__tag {
    position: relative;
    overflow: hidden;
}

.news-card__tag::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.news-card:hover .news-card__tag::after {
    left: 100%;
}


/* ============================================================
   v2 Case 案例卡片 — 悬浮叠加层 + 渐变遮罩
   ============================================================ */

.case-card {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-smooth);
    border: 1px solid var(--color-line);
}

.case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0, 102, 255, 0.15);
    border-color: transparent;
}

.case-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}

.case-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.case-card:hover .case-card__image img {
    transform: scale(1.08);
}

.case-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 102, 255, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.case-card:hover .case-card__image::before {
    opacity: 1;
}

.case-card__image::after {
    content: '查看案例 →';
    position: absolute;
    bottom: 1rem;
    left: 50%;
    color: var(--color-white);
    font-size: var(--text-small);
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translate(-50%, 20px);
    transition: all 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.case-card:hover .case-card__image::after {
    opacity: 1;
    transform: translate(-50%, 0);
}


/* ============================================================
   v2 Reviews 增强 — 顶部流光线 + 头像辉光（叠加在 v3 之上）
   ============================================================ */

.review-card {
    /* 继承 v3 基础样式，补充 position 和 overflow */
    position: relative;
    overflow: hidden;
}


/* 顶部流光线（hover 时从左扫到右） */

.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-brand-blue), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 1;
}

.review-card:hover::before {
    transform: translateX(100%);
}


/* 头像辉光（hover 时） */

.review-card__avatar {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 0 4px currentColor;
    transition: box-shadow 0.3s ease;
}

.review-card:hover .review-card__avatar {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 0 4px currentColor, 0 0 20px currentColor;
}


/* 星标样式 */

.review-card__stars {
    color: #F59E0B;
    font-size: 0.875rem;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}


/* ============================================================
   v2 客户 Logo 墙 — 无限滚动 + 悬停高亮
   ============================================================ */

.client-logos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem var(--spacing-section-md);
    padding: var(--spacing-section-md) 0;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.client-logos__track {
    display: flex;
    gap: 3rem var(--spacing-section-md);
    flex-shrink: 0;
    animation: logosScroll 30s linear infinite;
}

@keyframes logosScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.client-logos:hover .client-logos__track {
    animation-play-state: paused;
}

.client-logos__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    filter: grayscale(100%) opacity(50%);
    transition: filter 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-mid);
    font-family: var(--font-heading);
    min-width: 150px;
    height: 56px;
}

.client-logos__item img {
    max-height: 44px;
    width: auto;
    filter: grayscale(100%) opacity(70%);
    transition: filter 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.client-logos__item:hover {
    filter: grayscale(0%) opacity(100%);
    color: var(--color-brand-blue);
    transform: scale(1.2) translateY(-2px);
}

.client-logos__item:hover img {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px rgba(0, 102, 255, 0.2));
}


/* hover 底部辉光条 */

.client-logos__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-brand-blue);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.client-logos__item:hover::after {
    width: 60%;
}


/* ============================================================
   v2 Section 标题装饰
   ============================================================ */

.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    margin: var(--spacing-element-md) auto 0;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.section-title:hover::after {
    width: 80px;
}


/* 居中标题（用于 section 标题） */

.section .section-title,
.section .section-subtitle {
    text-align: center;
}


/* ============================================================
   v2 通用按钮 Hover 增强
   ============================================================ */

.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    pointer-events: none;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn--outline::before {
    background: rgba(0, 102, 255, 0.1);
}

.btn--purple-outline::before {
    background: rgba(124, 58, 237, 0.1);
}

.btn>* {
    position: relative;
    z-index: 1;
}


/* ============================================================
   v2 链接 Hover 增强
   ============================================================ */

a:not(.btn):not(.main-nav a):not(.case-filter__btn) {
    transition: color var(--transition-fast);
}


/* ============================================================
   v2 数字 badge - 用于 Hero
   ============================================================ */

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-card-gap);
    margin-top: var(--spacing-section-md);
}

.hero__stat-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--spacing-element-lg) var(--spacing-element-md);
    border-radius: 16px;
    border: 1px solid rgba(0, 102, 255, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.hero__stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero__stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.15);
    border-color: rgba(0, 102, 255, 0.3);
}

.hero__stat-card:hover::before {
    opacity: 1;
}

.hero__stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.hero__stat-card:hover::after {
    transform: scaleX(1);
}


/* ============================================================
   v2 响应式补充
   ============================================================ */

@media (max-width: 768px) {
    .hero__stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-element-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   v3 业务板块 - 4 列网格 + 新增青色/绿色变体
   ============================================================ */

.business-cards--4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-card-gap);
}

@media (max-width: 1024px) {
    .business-cards--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .business-cards--4col {
        grid-template-columns: 1fr;
    }
}


/* 业务卡颜色变体 */

.business-card--ai {
    border-color: rgba(6, 182, 212, 0.15);
}

.business-card--ai .business-card__icon {
    color: var(--color-brand-cyan);
}

.business-card--ai .business-card__title {
    color: var(--color-brand-cyan);
}

.business-card--ai:hover {
    box-shadow: 0 20px 60px rgba(6, 182, 212, 0.2);
}

.business-card--ai:hover::after {
    background: linear-gradient(135deg, var(--color-brand-cyan), var(--color-brand-blue));
}

.business-card--outsource {
    border-color: rgba(16, 185, 129, 0.15);
}

.business-card--outsource .business-card__icon {
    color: var(--color-brand-green);
}

.business-card--outsource .business-card__title {
    color: var(--color-brand-green);
}

.business-card--outsource:hover {
    box-shadow: 0 20px 60px rgba(16, 185, 129, 0.2);
}

.business-card--outsource:hover::after {
    background: linear-gradient(135deg, var(--color-brand-green), var(--color-brand-cyan));
}


/* 标题线颜色 */

.line--blue {
    background: var(--color-brand-blue) !important;
}

.line--purple {
    background: var(--color-brand-purple) !important;
}

.line--cyan {
    background: var(--color-brand-cyan) !important;
}

.line--green {
    background: var(--color-brand-green) !important;
}


/* 业务卡光斑（青色/绿色变体） */

.business-card--ai .card-spotlight,
.business-card--outsource .card-spotlight {
    background: radial-gradient( 400px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(6, 182, 212, 0.12), transparent 40%);
}

.business-card--outsource .card-spotlight {
    background: radial-gradient( 400px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(16, 185, 129, 0.12), transparent 40%);
}


/* ============================================================
   v3 业务详情卡片 - 4 种变体（蓝/紫/青/绿）
   ============================================================ */

.business-detail {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--spacing-section-md);
    padding: var(--spacing-section-md) var(--spacing-section-lg);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-card-gap);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.business-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-brand-blue);
    transition: width 0.4s ease;
}

.business-detail:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.business-detail:hover::before {
    width: 8px;
}

.business-detail--mofang::before {
    background: var(--color-brand-purple);
}

.business-detail--ai::before {
    background: var(--color-brand-cyan);
}

.business-detail--outsource::before {
    background: var(--color-brand-green);
}

.business-detail__label {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-brand-blue);
    letter-spacing: 1px;
    margin-bottom: var(--spacing-element-md);
    text-transform: uppercase;
}

.business-detail--mofang .business-detail__label {
    color: var(--color-brand-purple);
}

.business-detail--ai .business-detail__label {
    color: var(--color-brand-cyan);
}

.business-detail--outsource .business-detail__label {
    color: var(--color-brand-green);
}

.business-detail__title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-darkest);
    margin-bottom: var(--spacing-element-md);
    line-height: 1.3;
}

.business-detail__desc {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-dark);
    margin-bottom: var(--spacing-element-lg);
}

.business-detail__advantages {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-element-lg);
}

.business-detail__advantages li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.7;
    color: var(--color-dark);
}

.business-detail__advantages li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: var(--color-brand-blue);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.business-detail--mofang .business-detail__advantages li::before {
    background: var(--color-brand-purple);
}

.business-detail--ai .business-detail__advantages li::before {
    background: var(--color-brand-cyan);
}

.business-detail--outsource .business-detail__advantages li::before {
    background: var(--color-brand-green);
}

.business-detail__clients {
    font-size: var(--text-small);
    color: var(--color-mid);
    margin-bottom: var(--spacing-element-lg);
    padding: var(--spacing-element-md);
    background: var(--color-bg);
    border-radius: 8px;
    border-left: 3px solid var(--color-brand-blue);
}

.business-detail--mofang .business-detail__clients {
    border-left-color: var(--color-brand-purple);
}

.business-detail--ai .business-detail__clients {
    border-left-color: var(--color-brand-cyan);
}

.business-detail--outsource .business-detail__clients {
    border-left-color: var(--color-brand-green);
}

.business-detail__sidebar {
    background: var(--color-bg);
    border-radius: 16px;
    padding: var(--spacing-element-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.business-detail__sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
}

.business-detail--mofang .business-detail__sidebar::before {
    background: linear-gradient(90deg, var(--color-brand-purple), var(--color-brand-cyan));
}

.business-detail--ai .business-detail__sidebar::before {
    background: linear-gradient(90deg, var(--color-brand-cyan), var(--color-brand-blue));
}

.business-detail--outsource .business-detail__sidebar::before {
    background: linear-gradient(90deg, var(--color-brand-green), var(--color-brand-cyan));
}

.business-detail__stat-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-brand-blue);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.business-detail__stat-number span {
    font-size: 1rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.business-detail__stat-label {
    font-size: var(--text-caption);
    color: var(--color-mid);
    margin-bottom: var(--spacing-element-md);
}

.business-detail__stat-spacer {
    height: 1px;
    background: var(--color-line);
    margin: var(--spacing-element-md) 0;
}

@media (max-width: 768px) {
    .business-detail {
        grid-template-columns: 1fr;
        padding: var(--spacing-element-lg);
    }
    .business-detail__title {
        font-size: 1.5rem;
    }
    .business-detail__stat-number {
        font-size: 2rem;
    }
}


/* ============================================================
   v3 业务协同逻辑 - 4 列布局 + 箭头连接
   ============================================================ */

.business-logic {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-element-md);
    flex-wrap: nowrap;
    margin-top: var(--spacing-section-md);
}

.business-logic__item {
    flex: 1;
    background: var(--color-white);
    padding: var(--spacing-card-pad);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-line);
    text-align: center;
    transition: all var(--transition-smooth);
    position: relative;
}

.business-logic__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.1);
}

.business-logic__icon {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-element-md);
    line-height: 1;
    display: inline-block;
    transition: transform 0.4s ease;
}

.business-logic__item:hover .business-logic__icon {
    transform: scale(1.15) rotate(-5deg);
}

.business-logic__item-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-darkest);
    margin-bottom: var(--spacing-element-md);
}

.business-logic__item-desc {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.7;
}

.business-logic__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-line);
    font-weight: 300;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .business-logic {
        flex-wrap: wrap;
    }
    .business-logic__item {
        flex: 0 0 calc(50% - 1rem);
    }
    .business-logic__arrow {
        display: none;
    }
}

@media (max-width: 640px) {
    .business-logic__item {
        flex: 0 0 100%;
    }
}


/* ============================================================
   v3 按钮新变体 - 青色/绿色
   ============================================================ */

.btn--cyan {
    background: var(--color-brand-cyan);
    color: var(--color-white);
}

.btn--cyan:hover {
    background: var(--color-brand-cyan-hover);
    color: var(--color-white);
}

.btn--cyan-outline {
    background: transparent;
    color: var(--color-brand-cyan);
    border: 1.5px solid var(--color-brand-cyan);
}

.btn--cyan-outline:hover {
    background: var(--color-brand-cyan);
    color: var(--color-white);
}

.btn--green {
    background: var(--color-brand-green);
    color: var(--color-white);
}

.btn--green:hover {
    background: var(--color-brand-green-hover);
    color: var(--color-white);
}

.btn--green-outline {
    background: transparent;
    color: var(--color-brand-green);
    border: 1.5px solid var(--color-brand-green);
}

.btn--green-outline:hover {
    background: var(--color-brand-green);
    color: var(--color-white);
}

.btn--cyan::before {
    background: rgba(255, 255, 255, 0.2);
}

.btn--green::before {
    background: rgba(255, 255, 255, 0.2);
}


/* ============================================================
   v3 Hero 增强 - 滚动指示器、浮动徽章、装饰 SVG
   ============================================================ */


/* 增强的滚动指示器（鼠标样式） */

.scroll-mouse {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--color-mid);
    font-size: var(--text-caption);
    transition: color 0.3s ease;
}

.scroll-mouse:hover {
    color: var(--color-brand-blue);
}

.scroll-mouse__wheel {
    width: 26px;
    height: 42px;
    border: 2px solid currentColor;
    border-radius: 14px;
    position: relative;
}

.scroll-mouse__wheel::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 8px;
    background: currentColor;
    border-radius: 2px;
    animation: scrollWheel 1.8s ease-in-out infinite;
}

@keyframes scrollWheel {
    0% {
        opacity: 1;
        top: 8px;
    }
    100% {
        opacity: 0;
        top: 22px;
    }
}


/* Hero 浮动徽章 */

.hero__floating-badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero__badge {
    position: absolute;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 102, 255, 0.15);
    border-radius: 100px;
    font-size: var(--text-caption);
    color: var(--color-darkest);
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: badgeFloat 6s ease-in-out infinite;
}

.hero__badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-blue);
    box-shadow: 0 0 6px currentColor;
}

.hero__badge--1 {
    top: 18%;
    left: 8%;
    color: var(--color-brand-blue);
    animation-delay: 0s;
}

.hero__badge--2 {
    top: 28%;
    right: 10%;
    color: var(--color-brand-purple);
    animation-delay: 1.5s;
}

.hero__badge--2::before {
    background: var(--color-brand-purple);
}

.hero__badge--3 {
    bottom: 25%;
    left: 12%;
    color: var(--color-brand-cyan);
    animation-delay: 3s;
}

.hero__badge--3::before {
    background: var(--color-brand-cyan);
}

.hero__badge--4 {
    bottom: 35%;
    right: 6%;
    color: var(--color-brand-green);
    animation-delay: 4.5s;
}

.hero__badge--4::before {
    background: var(--color-brand-green);
}

@keyframes badgeFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

@media (max-width: 768px) {
    .hero__badge {
        display: none;
    }
}


/* Hero 装饰几何 - 角落 SVG */

.hero__corner-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

.hero__corner-deco--top-left {
    top: 10%;
    left: 5%;
    animation: spinSlow 30s linear infinite;
}

.hero__corner-deco--bottom-right {
    bottom: 15%;
    right: 5%;
    animation: spinSlow 40s linear infinite reverse;
}

@keyframes spinSlow {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .hero__corner-deco {
        display: none;
    }
}


/* Hero 装饰弧线 */

.hero__arc {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    border: 1px solid var(--color-brand-blue);
}


/* ============================================================
   v3 段落通用 - 装饰引言
   ============================================================ */

.section--has-deco {
    position: relative;
    overflow: hidden;
}

.section--has-deco::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.06), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.section--has-deco::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.section--has-deco>.container {
    position: relative;
    z-index: 1;
}


/* ============================================================
   v3 增强 - 业务卡更大内边距 + 文本对齐
   ============================================================ */

.business-card {
    text-align: left;
}

.business-card__icon {
    margin-bottom: var(--spacing-element-md);
}

.business-card__icon svg {
    width: 48px;
    height: 48px;
}

.business-card__title-line {
    width: 40px;
    height: 3px;
    background: var(--color-brand-blue);
    border-radius: 2px;
    margin-bottom: var(--spacing-element-md);
    transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}


/* ============================================================
   整改 v4 — 层次白 + 沉浸式动效
   来源：中品互动官网设计整改建议报告
   ============================================================ */


/* ----- 1. 全局暖化（让白色不那么冷） ----- */

body {
    background: #FCFCFD;
}


/* ----- 2. 灰度微层次变量 ----- */

:root {
    --color-tone-1: #FFFFFF;
    /* 纯白 — 主色块 */
    --color-tone-2: #FAFBFC;
    /* 极浅灰 — 交替区 */
    --color-tone-3: #F5F6F8;
    /* 浅灰 — 强调区 */
    --color-tone-4: #F0F1F5;
    /* 中浅灰 — 强分隔 */
}


/* ----- 3. 区块背景工具类 ----- */

.section--tone-1 {
    background: var(--color-tone-1);
}

.section--tone-2 {
    background: var(--color-tone-2);
}

.section--tone-3 {
    background: var(--color-tone-3);
}

.section--tone-4 {
    background: var(--color-tone-4);
}


/* 兼容原 .section--bg 重命名（浅灰） */

.section--bg {
    background: var(--color-tone-2);
}


/* ----- 4. nth-child 区块交替（不改 HTML） ----- */


/* 排除 .section--dark 暗色块，避免白色交替色覆盖暗色背景 */

.sections-auto>.section:nth-child(even):not(.section--dark) {
    background: #F7F8FA;
}

.sections-auto>.section:nth-child(odd):not(.section--dark) {
    background: #FFFFFF;
}


/* ----- 5. 点阵纹理 ----- */

.section--dot-pattern {
    background-image: radial-gradient(circle, rgba(0, 102, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

.section--dot-pattern-dense {
    background-image: radial-gradient(circle, rgba(0, 102, 255, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
}


/* ----- 6. 极光渐变（区块背景） ----- */

.section--subtle-glow {
    background: radial-gradient(ellipse at 20% 30%, rgba(0, 102, 255, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(124, 58, 237, 0.04) 0%, transparent 50%), var(--color-tone-1);
}


/* ----- 7. 区块分割线 ----- */

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.15), rgba(124, 58, 237, 0.15), transparent);
    margin: var(--spacing-section-xl) 0;
    position: relative;
}

.section-divider--wave {
    height: 80px;
    margin: 0;
    background: transparent;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.section-divider--wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.section-divider--symbol {
    text-align: center;
    padding: 3rem 0;
    color: rgba(0, 102, 255, 0.2);
    font-size: 1.5rem;
    letter-spacing: 1rem;
    user-select: none;
}


/* ----- 8. Hero 底部光池 ----- */

.hero {
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 200px;
    background: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}


/* ----- 9. Hero 标题呼吸动画 ----- */

.hero__title {
    animation: titleBreath 6s ease-in-out infinite;
}

@keyframes titleBreath {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__title {
        animation: none;
    }
}


/* ----- 10. 副标题打字机光标 ----- */

.hero__subtitle {
    position: relative;
}

.hero__subtitle--typing::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    color: var(--color-brand-blue);
    font-weight: 400;
    animation: cursorBlink 1s steps(1) infinite;
}

@keyframes cursorBlink {
    0%,
    50% {
        opacity: 1;
    }
    51%,
    100% {
        opacity: 0;
    }
}


/* ----- 11. 业务卡扫光效果（窄条 50% 宽 + skewX）----- */


/* v3 ::after 已被渐变边框占用，这里用 .card-sheen 子元素 */


/* 由 JS 在 DOMContentLoaded 时自动插入 */

.business-card .card-sheen {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    transform: skewX(-20deg);
    transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

.business-card:hover .card-sheen {
    left: 150%;
    opacity: 1;
}


/* 青/绿变体 sheen 颜色微调 */

.business-card--ai:hover .card-sheen,
.business-card--outsource:hover .card-sheen {
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
}


/* ----- 12. 按钮 Ripple 反馈 ----- */

.btn {
    overflow: hidden;
    position: relative;
}

.btn__ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

.btn--outline .btn__ripple,
.btn--cyan-outline .btn__ripple,
.btn--green-outline .btn__ripple,
.btn--purple-outline .btn__ripple {
    background: rgba(0, 102, 255, 0.15);
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* ----- 13. 统计数字辉光增强 ----- */

.stat-item__number.is-glowing {
    text-shadow: 0 0 20px rgba(0, 102, 255, 0.6), 0 0 40px rgba(0, 102, 255, 0.3);
    animation: statGlowPulse 2.5s ease-in-out infinite;
}

.stat-item__number--green.is-glowing {
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.6), 0 0 40px rgba(16, 185, 129, 0.3);
}

@keyframes statGlowPulse {
    0%,
    100% {
        text-shadow: 0 0 20px rgba(0, 102, 255, 0.6), 0 0 40px rgba(0, 102, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 30px rgba(0, 102, 255, 0.8), 0 0 60px rgba(0, 102, 255, 0.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-item__number.is-glowing {
        animation: none;
    }
}


/* ----- 14. 导航当前页指示器 ----- */

.main-nav li {
    position: relative;
}

.main-nav li.current-menu-item>a,
.main-nav li.current_page_item>a {
    color: var(--color-brand-blue);
}

.main-nav li.current-menu-item>a::after,
.main-nav li.current_page_item>a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
    border-radius: 1px;
    transform: scaleX(1);
    transform-origin: left;
    animation: navIndicatorIn 0.4s ease-out;
}

@keyframes navIndicatorIn {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}


/* ----- 15. 客户 Logo 悬浮放大彩色化 ----- */

.client-logos__item {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), filter 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.client-logos__item:hover {
    transform: scale(1.2) translateY(-2px);
    filter: grayscale(0%) opacity(100%);
    color: var(--color-brand-blue);
}

.client-logos__item:hover img {
    transform: scale(1.15);
}


/* ----- 16. 新闻卡片 hover 色条 ----- */

.news-card {
    overflow: hidden;
}

.news-card__body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
    transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2;
}

.news-card:hover .news-card__body::before {
    width: 100%;
}

.news-card__title a {
    transition: color 0.3s ease;
}

.news-card:hover .news-card__title a {
    color: var(--color-brand-blue);
}


/* ----- 17. 段落视差基础 ----- */

[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}


/* ----- 18. 区块过渡动画（clip-path 揭示）----- */

.section--reveal {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section--reveal.is-revealed {
    clip-path: inset(0 0 0 0);
}


/* ----- 19. 超大数字装饰 ----- */

.section__big-number {
    position: absolute;
    top: -3rem;
    left: -1rem;
    font-family: var(--font-heading);
    font-size: 10rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-brand-blue);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.section__big-number--right {
    left: auto;
    right: -1rem;
    color: var(--color-brand-purple);
}

.section__big-number--green {
    color: var(--color-brand-green);
}

.section__big-number--cyan {
    color: var(--color-brand-cyan);
}

@media (max-width: 768px) {
    .section__big-number {
        font-size: 6rem;
        top: -2rem;
    }
}


/* ----- 20. Footer 动态元素 ----- */

.scroll-top {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    pointer-events: none;
    z-index: 999;
    border: none;
    font-size: 1.25rem;
    animation: scrollTopPulse 2.5s ease-in-out infinite;
}

.scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.scroll-top:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 102, 255, 0.4);
    animation: none;
}

@keyframes scrollTopPulse {
    0%,
    100% {
        box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3), 0 0 0 0 rgba(0, 102, 255, 0.4);
    }
    50% {
        box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3), 0 0 0 12px rgba(0, 102, 255, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-top {
        animation: none;
    }
}


/* 社交图标 hover */

.footer-social a,
.site-footer a[aria-label] {
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-flex;
}

.footer-social a:hover,
.site-footer a[aria-label]:hover {
    transform: scale(1.2) rotate(-5deg);
    color: var(--color-brand-blue);
}


/* 微信二维码悬停弹窗 */

.footer-social__wechat {
    position: relative;
    display: inline-flex;
}

.wechat-qr-popup {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--color-white);
    padding: 0.75rem;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 102, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 200;
    min-width: 160px;
    text-align: center;
}

.wechat-qr-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-white);
}

.wechat-qr-popup img {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.wechat-qr-popup span {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-darkest);
    font-weight: 500;
    white-space: nowrap;
}

.footer-social__wechat:hover .wechat-qr-popup,
.footer-social__wechat:focus-within .wechat-qr-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}


/* Footer 装饰线移动 */

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-brand-blue), transparent);
    animation: footerLineMove 4s linear infinite;
}

@keyframes footerLineMove {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.site-footer {
    position: relative;
    overflow: hidden;
}


/* ----- 21. 卡片微阴影增强 ----- */

.business-card,
.trust-card,
.news-card,
.review-card,
.case-card,
.hero__stat-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.06);
}


/* ----- 22. 标题字号调整 ----- */

.hero__title {
    font-size: clamp(2.25rem, 4.5vw, 4rem) !important;
}

.section-title {
    font-size: 2.5rem !important;
}

.business-card__title {
    font-size: 1.5rem !important;
}


/* ----- 23. 区块上下间距加大 ----- */

:root {
    --spacing-section-xl: 140px;
}

@media (max-width: 768px) {
     :root {
        --spacing-section-xl: 80px;
    }
}


/* ----- 24. 区块滚动揭示（JS-first 模式）----- */


/* 默认可见。仅当 <html> 有 .js-enabled 类时才应用隐藏初始状态。
   这样即使 JS 没加载或加载慢，页面也能正常显示和滚动。 */

.section--has-reveal {
    /* 默认状态：完全可见，无变换 */
    opacity: 1;
    transform: none;
}

.js-enabled .section--has-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-enabled .section--has-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}


/* ----- 25. 区块背景动态渐变（极光）----- */

.section--has-deco {
    position: relative;
    overflow: hidden;
}

.section--has-deco::before,
.section--has-deco::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    filter: blur(40px);
}

.section--has-deco::before {
    top: 10%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.08), transparent 70%);
    animation: decoFloat 20s ease-in-out infinite;
}

.section--has-deco::after {
    bottom: 10%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08), transparent 70%);
    animation: decoFloat 25s ease-in-out infinite reverse;
}

@keyframes decoFloat {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(30px, -30px);
    }
}

.section--has-deco>.container {
    position: relative;
    z-index: 1;
}


/* ----- 26. 统计区块 Canvas 背景占位 ----- */

.section--dark {
    position: relative;
    overflow: hidden;
}

.section--dark__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
}

.section--dark>.container {
    position: relative;
    z-index: 1;
}


/* ----- 27. 错位渐入子元素（stagger）----- */

.stagger-child {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-child.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ----- 28. 区块间自动分割线（JS 注入）----- */


/* 修复：移除原 ::before 伪元素（60x7 圆角药丸 + top:-3px 偏移）
   该元素会与下方 1px 渐变细线视觉上叠加为"两个图标连在一起"的 bug
   改为干净的单条渐变细线，符合"克制的分隔"原则 */

.section-divider {
    height: 1px;
    margin: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 102, 255, 0.12) 20%, rgba(124, 58, 237, 0.12) 50%, rgba(16, 185, 129, 0.12) 80%, transparent 100%);
    position: relative;
}


/* .section-divider::before 旧定义已移除（v13 修复） */


/* ----- 29. 区块布局辅助 ----- */

.sections-auto {
    display: block;
}

.sections-auto>.section {
    position: relative;
}


/* ============================================================
   全站优化增强 v5 — 按「全站优化增强建议」文档实施
   来源：C:\Users\Administrator\Desktop\zphdhz网站_全站优化增强建议.md
   范围：Hero 标题扫光 / 工作流箭头呼吸 / 时间线节点脉冲 /
         价值卡 hover / 团队头像增强 / 业务协同箭头动画 /
         进度条三色渐变 / 页面入场淡入 / 全局 cursor /
         联系人信息项 hover / 文化卡 hover / 内页 banner 增强 /
         Logo 轮播精确值 / 微信二维码卡片等
   ============================================================ */


/* ----- 1. Hero 标题渐变色扫光（叠加在 v4 titleBreath 之上）----- */

.hero__title {
    background: linear-gradient(135deg, var(--color-darkest) 0%, var(--color-brand-blue) 50%, var(--color-darkest) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleShimmer 4s ease-in-out infinite, titleBreath 6s ease-in-out infinite;
}

@keyframes titleShimmer {
    0%,
    100% {
        background-position: 0% center;
    }
    50% {
        background-position: 200% center;
    }
}


/* ----- 2. 工作流箭头呼吸闪烁 ----- */

.workflow__arrow {
    color: var(--color-brand-blue);
    animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%,
    100% {
        opacity: 0.4;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(4px);
    }
}


/* ----- 3. 时间线节点脉冲 + 中间竖线渐变绘制 ----- */


/* 注意：.timeline__dot 的 absolute 定位 + 居中在基础样式中已设置，
   这里只追加脉冲 ::after 伪元素，不要覆盖 position */

.timeline__dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--color-brand-blue);
    opacity: 0.3;
    animation: dotPulse 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes dotPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.8);
        opacity: 0;
    }
}


/* 中间竖线渐变（默认已在 v1 中为 1px 灰线，升级为三色渐变） */

.timeline::before {
    background: linear-gradient(180deg, #0066FF, #7C3AED, #10B981);
    width: 2px;
    animation: lineDraw 1.5s ease-out forwards;
    transform-origin: top center;
    transform: translateX(-50%) scaleY(0);
}

.js-enabled .timeline::before {
    transform: translateX(-50%) scaleY(0);
}

.js-enabled .timeline.is-revealed::before {
    transform: translateX(-50%) scaleY(1);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lineDraw {
    from {
        transform: translateX(-50%) scaleY(0);
    }
    to {
        transform: translateX(-50%) scaleY(1);
    }
}


/* ----- 4. 核心价值观卡片 hover 增强 ----- */

.value-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.12);
    border-color: rgba(0, 102, 255, 0.15);
}

.value-card--full {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.03), rgba(124, 58, 237, 0.03));
}


/* ----- 5. 团队头像占位增强（高光叠加 + hover 放大）----- */

.team-avatar-placeholder {
    position: relative;
    overflow: hidden;
}

.team-avatar-placeholder::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 60%);
    pointer-events: none;
}

.team-card:hover .team-avatar-placeholder {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}


/* ----- 6. 业务协同流程图箭头动画 ----- */

.business-logic__arrow {
    color: var(--color-line);
    transition: color 0.3s ease;
    animation: arrowSlide 1.8s ease-in-out infinite;
}

@keyframes arrowSlide {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: translateX(6px);
        opacity: 1;
        color: var(--color-brand-blue);
    }
}


/* ----- 7. 滚动进度条三色渐变升级（蓝→紫→青）----- */

.scroll-progress {
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple), var(--color-brand-cyan));
    background-size: 200% 100%;
    animation: progressShift 6s linear infinite;
    box-shadow: 0 0 12px rgba(0, 102, 255, 0.5);
}

@keyframes progressShift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}


/* ----- 8. 页面入场淡入（全局）----- */

body {
    animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pageEnter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
}


/* ----- 9. 全局 cursor + 按钮 hover 微缩 ----- */

a,
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
select {
    cursor: pointer;
}

.btn {
    transition: all var(--transition-fast), transform 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}


/* ----- 10. 联系人信息项 hover（侧边栏）----- */

.contact-info-sidebar .info-item {
    padding: 0.75rem;
    border-radius: var(--radius-tag);
    transition: transform 0.3s ease, background 0.3s ease;
}

.contact-info-sidebar .info-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}


/* ----- 11. 加入我们文化卡 hover 升级 ----- */

.culture-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.culture-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.culture-card:hover .culture-card__icon {
    transform: scale(1.2) rotate(-5deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.culture-card__icon {
    transition: transform 0.3s ease;
    display: inline-block;
}


/* ----- 12. Logo 轮播精确值升级（按文档建议）----- */

.client-logos__item {
    transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.client-logos__item:hover {
    transform: scale(1.18) translateY(-4px);
    filter: grayscale(0%) opacity(100%);
}

.client-logos__item:hover img {
    transform: scale(1.12);
    filter: drop-shadow(0 6px 12px rgba(0, 102, 255, 0.25));
}


/* ----- 13. 内页 Banner 标题渐变（更突出）----- */

.inner-banner__title {
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 0.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .inner-banner__title {
        color: transparent;
    }
}


/* ----- 14. 案例卡 hover（叠在已有基础上，确保渐变遮罩更深）----- */

.case-card__image::before {
    background: linear-gradient(180deg, transparent 40%, rgba(0, 102, 0, 0.6) 100%);
}


/* ----- 15. 表单 focus 增强光晕 ----- */

.form-control:focus {
    border-color: var(--color-brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12), 0 0 12px rgba(0, 102, 255, 0.08);
    outline: none;
}


/* ----- 16. 微信二维码卡片（联系页侧栏）增强 ----- */

.contact-qr img {
    background: var(--color-white);
    padding: 0.5rem;
    border-radius: var(--radius-tag);
    transition: transform 0.3s ease;
}

.contact-qr img:hover {
    transform: scale(1.05);
}


/* ----- 17. 区块之间视觉分割增强（高度 2px + 渐变更长）----- */

.section-divider {
    height: 2px !important;
    margin: 0 auto;
    max-width: var(--max-width-container);
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.2) 20%, rgba(124, 58, 237, 0.2) 50%, rgba(16, 185, 129, 0.2) 80%, transparent);
}


/* ----- 18. 减少动效偏好（统一收口）----- */

@media (prefers-reduced-motion: reduce) {
    .hero__title,
    .workflow__arrow,
    .timeline__dot::after,
    .timeline::before,
    .business-logic__arrow,
    .scroll-progress,
    .value-card,
    .culture-card,
    .culture-card__icon,
    .contact-info-sidebar .info-item,
    .client-logos__item,
    .contact-qr img {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================
   全站优化增强 v6 — 按「首页 Banner 修复与增强方案」文档实施
   来源：C:\Users\Administrator\Desktop\zphdhz网站_首页Banner修复与增强方案.md
   范围：Hero 动态背景 / 网格点阵层 / 标题扫光升级 /
         tag 呼吸光晕 / 浮动徽章轨道 / 角落装饰旋转 /
         统计卡玻璃质感 / 统计数字渐变 / 滚动指示器 / 打字机
   ============================================================ */


/* ----- 1. .hero 背景渐变 + 底部补白（避免滚动指示器与下一段粘连）----- */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #F8FAFF 0%, #FFFFFF 50%, #FAF7FF 100%);
    padding-bottom: 80px;
}


/* ----- 2. 网格点阵背景层（v6 新增，CSS 缓慢位移）----- */

.hero__grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.7;
    animation: gridShift 30s linear infinite;
    z-index: 0;
}

.hero__grid-bg svg {
    width: 100%;
    height: 100%;
}

@keyframes gridShift {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-60px, -60px);
    }
}


/* ----- 3. 主标题渐变扫光（v6 升级：4 色 300% + drop-shadow）----- */

.hero__title {
    background: linear-gradient( 135deg, var(--color-darkest) 0%, var(--color-brand-blue) 30%, var(--color-brand-purple) 60%, var(--color-darkest) 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-darkest);
    animation: heroTitleShimmer 6s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 102, 255, 0.1));
    position: relative;
    z-index: 1;
}

@keyframes heroTitleShimmer {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}


/* ----- 4. 标签徽章呼吸光晕 ----- */

.hero__tag {
    position: relative;
    overflow: visible;
}

.hero__tag::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.12), rgba(124, 58, 237, 0.12));
    z-index: -1;
    opacity: 0;
    animation: tagGlow 3s ease-in-out infinite;
}

@keyframes tagGlow {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}


/* ----- 5. 浮动徽章轨道升级（差异化速度）----- */

.hero__badge {
    position: absolute;
    z-index: 3;
}

.hero__badge--1 {
    top: 12%;
    left: 6%;
    animation: badgeOrbit 8s ease-in-out infinite;
}

.hero__badge--2 {
    top: 28%;
    right: 5%;
    animation: badgeOrbit 10s ease-in-out infinite 1s;
}

.hero__badge--3 {
    bottom: 28%;
    left: 8%;
    animation: badgeOrbit 9s ease-in-out infinite 0.5s;
}

.hero__badge--4 {
    bottom: 14%;
    right: 8%;
    animation: badgeOrbit 11s ease-in-out infinite 1.5s;
}

@keyframes badgeOrbit {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-12px) translateX(8px);
    }
    50% {
        transform: translateY(-6px) translateX(-6px);
    }
    75% {
        transform: translateY(8px) translateX(4px);
    }
}


/* ----- 6. 角落装饰旋转（升级为更长周期 + scale 呼吸）----- */

.hero__corner-deco {
    position: absolute;
    z-index: 2;
    opacity: 0.6;
    animation: cornerSpin 30s linear infinite, cornerBreath 4s ease-in-out infinite;
}

.hero__corner-deco--top-left {
    top: 5%;
    left: 3%;
    width: 160px;
    height: 160px;
}

.hero__corner-deco--bottom-right {
    bottom: 5%;
    right: 3%;
    width: 200px;
    height: 200px;
    animation: cornerSpin 25s linear infinite reverse, cornerBreath 5s ease-in-out infinite 0.5s;
}

@keyframes cornerSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes cornerBreath {
    0%,
    100% {
        opacity: 0.4;
        transform: rotate(0deg) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: rotate(180deg) scale(1.1);
    }
}


/* ----- 7. 统计卡玻璃质感 + 入场动画 ----- */

.hero__stat-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    animation: statCardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__stat-card:nth-child(1) {
    animation-delay: 0.2s;
}

.hero__stat-card:nth-child(2) {
    animation-delay: 0.4s;
}

.hero__stat-card:nth-child(3) {
    animation-delay: 0.6s;
}

.hero__stat-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.15);
}

@keyframes statCardIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ----- 8. 统计数字渐变文字 ----- */

.hero__stat-number {
    background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-brand-blue);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
}


/* ----- 9. 滚动指示器（移出 container + 浮动）----- */

.hero__scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    animation: heroScrollFloat 2.5s ease-in-out infinite;
}

@keyframes heroScrollFloat {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateX(-50%) translateY(8px);
        opacity: 1;
    }
}


/* ----- 10. 打字机光标（副标题 data-typewriter 配套）----- */

[data-typewriter] {
    position: relative;
    border-right: 2px solid var(--color-brand-blue);
    padding-right: 4px;
    white-space: nowrap;
    overflow: hidden;
    width: max-content;
    max-width: 100%;
    animation: typewriterCursor 1s steps(1) infinite;
}

@keyframes typewriterCursor {
    0%,
    50% {
        border-color: var(--color-brand-blue);
    }
    51%,
    100% {
        border-color: transparent;
    }
}

[data-typewriter].is-typewriter-done {
    border-right-color: transparent;
    animation: none;
    white-space: normal;
    width: 100%;
}


/* ----- 11. 减少动效统一收口（v6 追加）----- */

@media (prefers-reduced-motion: reduce) {
    .hero__grid-bg,
    .hero__title,
    .hero__tag::before,
    .hero__badge,
    .hero__corner-deco,
    .hero__stat-card,
    .hero__scroll-indicator,
    [data-typewriter] {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================
   v7 首页深空重构 — 按「首页设计升级方案 v2」文档实施
   来源：C:\Users\Administrator\Desktop\zphdhz网站_首页设计升级方案v2.md
   设计哲学：深空科技感 × 精准留白 × 分层深度 × 克制动效
   范围：Hero 深空背景 / 巨大渐变标题 / 玻璃面板统计卡 /
         三圈光晕 / 导航深浅色自动切换 / 区块过渡装饰线 /
         业务卡顶部色条 / 信任卡 hover 填充 / 合作流程箭头 /
         客户 logo 轮播精细化 / 客户好评卡 / 新闻卡 / 回到顶部
   ============================================================ */


/* ============================================================
   1. Hero 深空背景 — 4 层渐变叠加（多焦点光晕 + 主体渐变）
   ============================================================ */

.hero {
    /* 深空底色（4 层径向 + 1 层线性，模拟深空科技感）*/
    background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(0, 102, 255, 0.18) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 85% 100%, rgba(124, 58, 237, 0.12) 0%, transparent 55%), radial-gradient(ellipse 60% 70% at 15% 80%, rgba(6, 182, 212, 0.10) 0%, transparent 55%), linear-gradient(180deg, #0A0E27 0%, #111636 40%, #1A1A2E 100%);
    min-height: 100vh;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    overflow: hidden;
    padding-bottom: 100px;
    /* 取消 v6 设置的浅色背景 */
}


/* 覆盖 v6 中 grid bg 的浅色调，让网格在深色底上以暗色呈现 */

.hero__grid-bg {
    opacity: 0.5;
}

.hero__grid-bg svg circle {
    fill: rgba(255, 255, 255, 0.04);
}


/* 覆盖 v6 中 hero 角落装饰颜色 */

.hero__corner-deco {
    opacity: 0.6;
}

.hero__corner-deco circle,
.hero__corner-deco polygon {
    stroke: rgba(255, 255, 255, 0.3);
}


/* 覆盖 v3 中 hero 底部的光池（在深色底上保持） */

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 200px;
    background: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}


/* Hero 容器 — 保持内容在光晕之上 */

.hero .container {
    position: relative;
    z-index: 5;
}


/* ============================================================
   2. Hero 三圈光晕 (.hero__aura) — 大型透明光圈缓慢自转
   ============================================================ */

.hero__aura {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: 0;
}

.hero__aura--1 {
    width: 800px;
    height: 800px;
    top: -300px;
    left: -200px;
    animation: auraOrbit 25s linear infinite;
}

.hero__aura--2 {
    width: 600px;
    height: 600px;
    bottom: -200px;
    right: -150px;
    border-color: rgba(124, 58, 237, 0.08);
    animation: auraOrbit 30s linear infinite reverse;
}

.hero__aura--3 {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(6, 182, 212, 0.06);
    animation: auraOrbit 20s linear infinite;
}

@keyframes auraOrbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* aura--3 的 translate 在旋转时要叠加 */

.hero__aura--3 {
    transform-origin: center center;
}

@keyframes auraOrbitCentered {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.hero__aura--3 {
    animation: auraOrbitCentered 20s linear infinite;
}


/* ============================================================
   3. Hero 主标题 — 4.5rem 白→蓝渐变 + 发光 + 扫光
   ============================================================ */

.hero__title {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 1.5rem;
    /* 白→浅蓝→中蓝→深蓝渐变（覆盖 v6 渐变）*/
    background: linear-gradient( 180deg, #FFFFFF 0%, #93C5FD 35%, #60A5FA 65%, #3B82F6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #FFFFFF;
    /* 发光 */
    filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.3));
    /* 闪烁扫光（覆盖 v6 动效）*/
    position: relative;
    animation: titleBreath 6s ease-in-out infinite;
}


/* 标题扫光线（v7 关键视觉效果）*/

.hero__title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
    transform: skewX(-15deg);
    animation: titleSweep 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes titleSweep {
    0%,
    100% {
        left: -100%;
    }
    50% {
        left: 120%;
    }
}


/* Hero 标题内字符渐显（继承 v2 split-text 动画）*/

.hero__title .split-text__char {
    -webkit-text-fill-color: transparent;
    background: linear-gradient( 180deg, #FFFFFF 0%, #93C5FD 35%, #60A5FA 65%, #3B82F6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__title .split-text__char.is-visible {
    /* 字符可见时维持渐变 */
}


/* ============================================================
   4. Hero 标签 (.hero__tag) — 深色适配
   ============================================================ */

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1.5rem;
    background: rgba(0, 102, 255, 0.12);
    border: 1px solid rgba(0, 102, 255, 0.3);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #93C5FD;
    margin-bottom: 2rem;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: visible;
}

.hero__tag::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.18), rgba(124, 58, 237, 0.18));
    z-index: -1;
    opacity: 0;
    animation: tagGlow 3s ease-in-out infinite;
}

@keyframes tagGlow {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}


/* 标签内圆点 */

.hero__tag::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60A5FA;
    box-shadow: 0 0 8px #60A5FA;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}


/* ============================================================
   5. Hero 副标题 — 克制精准（白色半透明）
   ============================================================ */

.hero__subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 580px;
    margin: 0 auto 2.5rem;
    line-height: 1.8;
    letter-spacing: 0.3px;
    text-align: center;
    /* 保留 v6 打字机光标 */
    position: relative;
}


/* ============================================================
   6. Hero 按钮 — 科技感升级（主按钮渐变发光 + 描边按钮透明）
   ============================================================ */

.hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.hero__actions .btn--primary {
    background: linear-gradient(135deg, #0066FF, #4F46E5);
    border: none;
    box-shadow: 0 4px 24px rgba(0, 102, 255, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #FFFFFF;
}

.hero__actions .btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.5);
    background: linear-gradient(135deg, #0066FF, #4F46E5);
    color: #FFFFFF;
}

.hero__actions .btn--outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
}

.hero__actions .btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
}


/* ============================================================
   7. Hero 统计卡片 — 深色玻璃面板 + 入场动画
   ============================================================ */

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.hero__stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    min-width: 180px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: statReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    z-index: 1;
}

.hero__stat-card:nth-child(1) {
    animation-delay: 0.5s;
}

.hero__stat-card:nth-child(2) {
    animation-delay: 0.65s;
}

.hero__stat-card:nth-child(3) {
    animation-delay: 0.8s;
}

@keyframes statReveal {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* 卡片顶部高光线 */

.hero__stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.4), transparent);
}

.hero__stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 102, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}


/* 数字 — 浅蓝→浅紫渐变 */

.hero__stat-number {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.4rem;
    background: linear-gradient(135deg, #60A5FA, #A78BFA);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60A5FA;
    /* 兜底（不支持 background-clip:text 时使用纯色） */
}

.hero__stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero__stat-number {
        color: transparent;
    }
}


/* ============================================================
   8. Hero 滚动指示器 — 移出 container，浮动呼吸
   ============================================================ */

.hero__scroll-indicator {
    color: rgba(255, 255, 255, 0.6);
}

.hero__scroll-indicator:hover {
    color: #60A5FA;
}


/* ============================================================
   9. 导航设计（v7 简化版）
   策略：所有页面统一白底黑字（与内页一致）
   首页 Hero 上：白色导航通过"轻微阴影"自然浮起
   滚动后：阴影加深（沿用 v3 .is-scrolled）
   取消了 v7 初版的 hero-visible 深色玻璃切换（用户反馈该方案不稳定）
   ============================================================ */


/* 全站导航：统一白底黑字 + 轻柔阴影（v3 默认基础上增加）*/

.site-header {
    /* 在 v3 基础上加柔和阴影，让白色导航在深色 Hero 上有"浮起"感 */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}


/* 滚动后：阴影加深 */

.site-header.is-scrolled {
    /* 沿用 v3 is-scrolled 的基础 + 加深阴影 */
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    height: var(--nav-height-scrolled);
}


/* ============================================================
   10. 区块过渡装饰线（.section::before 顶部小线）
   ============================================================ */

.section {
    position: relative;
}

.section::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
    border-radius: 2px;
    margin: 0 auto var(--spacing-section-md);
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


/* 当区块滚入视口时（由 JS 添加 .is-revealed），装饰线显示 */

.section.is-revealed::before {
    transform: scaleX(1);
}


/* 深色区块：装饰线色彩更亮 + v9 缩小尺寸（避免与上方区块"重叠"） */

.section--dark::before {
    background: linear-gradient(90deg, #60A5FA, #A78BFA);
    width: 40px;
    height: 2px;
    margin-top: 0.5rem;
}


/* hero 不是 section 类，禁用此装饰线 */

.hero::before,
.hero.is-revealed::before {
    display: none;
    content: none;
}


/* ============================================================
   11. 业务卡 — 顶部品牌色条（叠加在 v3 渐变边框之上）
   ============================================================ */

.business-card {
    position: relative;
    overflow: hidden;
}


/* 顶部色条：默认隐藏，hover 时展开（覆盖 v3 渐变边框行为） */

.business-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 0;
    border-radius: 0 0 3px 3px;
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
    background: var(--color-brand-blue);
}

.business-card--geo::before {
    background: var(--color-brand-blue);
}

.business-card--mofang::before {
    background: var(--color-brand-purple);
}

.business-card--ai::before {
    background: var(--color-brand-cyan);
}

.business-card--outsource::before {
    background: var(--color-brand-green);
}

.business-card:hover::before {
    height: 3px;
}


/* 业务卡图标：彩色背景 + 缩放旋转 */

.business-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

.business-card--geo .business-card__icon {
    background: rgba(0, 102, 255, 0.08);
    color: var(--color-brand-blue);
}

.business-card--mofang .business-card__icon {
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-brand-purple);
}

.business-card--ai .business-card__icon {
    background: rgba(6, 182, 212, 0.08);
    color: var(--color-brand-cyan);
}

.business-card--outsource .business-card__icon {
    background: rgba(16, 185, 129, 0.08);
    color: var(--color-brand-green);
}

.business-card:hover .business-card__icon {
    transform: scale(1.12) rotate(-3deg);
}


/* 覆盖 v3 中 card-sheen 与 v7 ::before 的 z-index 冲突 */


/* sheen 在 v3 中是 ::after 的渐变边框，我们让它在色条之下 */

.business-card .card-sheen {
    z-index: 1;
}


/* ============================================================
   12. 信任卡 — hover 填充图标 + 缩放
   ============================================================ */

.trust-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--color-brand-blue);
    background: rgba(0, 102, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

.trust-card:hover .trust-card__icon {
    color: var(--color-white);
    background: var(--color-brand-blue);
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
}


/* ============================================================
   13. 数据说话 — 数字发光增强（v7 加强）
   ============================================================ */

.stat-item__number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #93C5FD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #93C5FD;
    filter: drop-shadow(0 0 12px rgba(147, 197, 253, 0.3));
    position: relative;
    transition: text-shadow 0.6s ease;
}

.stat-item__number--green {
    background: linear-gradient(180deg, #FFFFFF 0%, #6EE7B7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #6EE7B7;
    filter: drop-shadow(0 0 12px rgba(110, 231, 183, 0.3));
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .stat-item__number,
    .stat-item__number--green {
        color: transparent;
    }
}

.stat-item__label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* 数字辉光脉冲 */

.stat-item__number.is-glowing,
.hero__stat-number.is-glowing {
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.6), 0 0 40px rgba(96, 165, 250, 0.3);
    animation: statGlowPulse 2.5s ease-in-out infinite;
}

.stat-item__number--green.is-glowing {
    text-shadow: 0 0 20px rgba(110, 231, 183, 0.6), 0 0 40px rgba(110, 231, 183, 0.3);
}

@keyframes statGlowPulse {
    0%,
    100% {
        text-shadow: 0 0 20px rgba(96, 165, 250, 0.6), 0 0 40px rgba(96, 165, 250, 0.3);
    }
    50% {
        text-shadow: 0 0 30px rgba(96, 165, 250, 0.8), 0 0 60px rgba(96, 165, 250, 0.4);
    }
}


/* ============================================================
   14. 客户 Logo 轮播 — 精细化（叠加 v5 已实现的版本）
   ============================================================ */

.client-logos__item {
    filter: grayscale(100%) brightness(0.6);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0.75rem 1.5rem;
    position: relative;
}

.client-logos__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 2px;
    background: var(--color-brand-blue);
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.client-logos__item:hover {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.15) translateY(-4px);
    color: var(--color-brand-blue);
}

.client-logos__item:hover::after {
    transform: scaleX(1);
}

.client-logos__item:hover img {
    filter: drop-shadow(0 4px 12px rgba(0, 102, 255, 0.2));
}


/* ============================================================
   15. 客户好评卡 — 引用图标色 + 星级
   ============================================================ */

.review-card {
    min-width: 340px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 102, 255, 0.15);
}

.review-card__quote-icon {
    opacity: 0.1;
    color: var(--color-brand-blue);
}

.review-card__stars {
    color: var(--color-brand-amber);
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}


/* ============================================================
   16. 合作流程 — 步步推进（hover 数字放大 + 箭头动画）
   ============================================================ */

.workflow__step {
    position: relative;
    padding: 2rem;
    border-radius: 16px;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.workflow__step:hover {
    border-color: rgba(0, 102, 255, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.workflow__num {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 2.5rem;
    font-weight: 900;
    opacity: 0.15;
    line-height: 1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* 覆盖 v3 中强制 width:60px; height:60px; line-height:60px 让它仅作为右上角装饰 */
    width: auto;
    height: auto;
    line-height: 1;
    background: transparent;
    border: none;
    text-align: right;
}

.workflow__step:hover .workflow__num {
    opacity: 0.3;
    transform: scale(1.1);
}


/* 箭头动画（覆盖 v3 流程图箭头为呼吸动画）*/

.workflow__arrow {
    color: var(--color-brand-blue);
    animation: arrowFlow 2s ease-in-out infinite;
    opacity: 0.4;
}

@keyframes arrowFlow {
    0%,
    100% {
        opacity: 0.3;
        transform: translateX(0);
    }
    50% {
        opacity: 0.8;
        transform: translateX(6px);
    }
}


/* ============================================================
   17. 新闻卡 — 图片缩放 + 整体上浮
   ============================================================ */

.news-card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

.news-card__image {
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card:hover .news-card__image img {
    transform: scale(1.06);
}


/* ============================================================
   18. 回到顶部按钮 — 渐变（v7 覆盖 v4 单色）
   ============================================================ */

.scroll-top {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066FF, #7C3AED);
    color: white;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-top:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 102, 255, 0.55);
    background: linear-gradient(135deg, #0066FF, #7C3AED);
    color: white;
}


/* ============================================================
   19. 滚动进度条 — 三色渐变（v7 覆盖 v5）
   ============================================================ */

.scroll-progress {
    height: 3px;
    background: linear-gradient(90deg, #0066FF, #7C3AED, #06B6D4);
    box-shadow: 0 0 12px rgba(0, 102, 255, 0.5);
    z-index: 10000;
}


/* ============================================================
   20. 滚动驱动标题渐入（字符）
   ============================================================ */

[data-split-text] .split-text__char {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-split-text] .split-text__char.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   21. 响应式适配（v7 新增）
   ============================================================ */

@media (max-width: 1024px) {
    .hero {
        min-height: 90vh;
        padding: 6rem 0 4rem;
    }
    .hero__title {
        font-size: clamp(2.25rem, 5vw, 3.5rem);
    }
    .hero__stats {
        gap: 0.75rem;
    }
    .hero__stat-card {
        min-width: 140px;
        padding: 1.25rem 1.5rem;
    }
    .hero__aura--1,
    .hero__aura--2,
    .hero__aura--3 {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 85vh;
        padding: 5rem 0 3rem;
    }
    .hero__title {
        font-size: clamp(2rem, 7vw, 2.5rem);
        margin-bottom: 1rem;
    }
    .hero__tag {
        font-size: 0.7rem;
        padding: 0.3rem 1rem;
        margin-bottom: 1.5rem;
    }
    .hero__subtitle {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }
    .hero__actions {
        flex-direction: column;
        align-items: center;
    }
    .hero__stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .hero__stat-card {
        width: 100%;
        max-width: 320px;
    }
    .hero__badge {
        display: none;
    }
    .hero__corner-deco {
        display: none;
    }
}


/* ============================================================
   22. 减少动效偏好统一收口（v7 追加）
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .hero__aura,
    .hero__title,
    .hero__title::after,
    .hero__tag::before,
    .hero__tag::after,
    .hero__stat-card,
    .hero__stat-number,
    .scroll-top,
    .scroll-progress,
    .workflow__arrow,
    .client-logos__item,
    .business-card::before,
    .trust-card__icon,
    .news-card__image img,
    .review-card {
        animation: none !important;
        transition: none !important;
    }
    /* 深色 hero 在减弱动效下也保持可读性 */
    .hero {
        background: linear-gradient(180deg, #0A0E27 0%, #1A1A2E 100%);
    }
}


/* ============================================================
   v8 全站深度优化 — 按《zphdhz网站_全站深度审查v3.md》实施
   范围：导航中英切换 / Hero 缺失动效 / 内页交互动效 / 全局细节
   ============================================================ */


/* ============================================================
   1. Hero 浮动徽章轨道动画（8s）— v11 升级
   改动：放大字号 + 加大内边距 + 增强光晕 + 脉冲点
   ============================================================ */

.hero__badge {
    position: absolute;
    padding: 0.7rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
    animation: badgeOrbit 8s ease-in-out infinite;
    letter-spacing: 0.5px;
    /* v11：彩色光晕 + 内高光 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 24px -4px var(--badge-color, rgba(0, 102, 255, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    /* v11 修复：裁切 ::after 扫光在圆角内（box-shadow 仍可溢出） */
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}


/* v11：徽章内彩色光点（脉冲呼吸） */

.hero__badge::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--badge-color, var(--color-brand-blue));
    box-shadow: 0 0 12px var(--badge-color, var(--color-brand-blue)), 0 0 24px var(--badge-color, var(--color-brand-blue));
    animation: dotPulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}


/* 覆盖 v3 徽章文字色（深色 Hero 上需要白字 + 彩色色点）*/

.hero__badge--1,
.hero__badge--2,
.hero__badge--3,
.hero__badge--4 {
    color: rgba(255, 255, 255, 0.95) !important;
}

.hero__badge--1 {
    --badge-color: #0066FF;
    top: 18%;
    left: 6%;
    animation-delay: 0s;
}

.hero__badge--2 {
    --badge-color: #7C3AED;
    top: 24%;
    right: 6%;
    animation-delay: 2s;
}

.hero__badge--3 {
    --badge-color: #06B6D4;
    bottom: 24%;
    left: 8%;
    animation-delay: 4s;
}

.hero__badge--4 {
    --badge-color: #10B981;
    bottom: 18%;
    right: 6%;
    animation-delay: 6s;
}


/* v11 升级：徽章的"擦亮"扫光（::after 斜向高光） */

.hero__badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: skewX(-20deg);
    animation: badgeShimmer 5s ease-in-out infinite;
    pointer-events: none;
    border-radius: 50px;
}

@keyframes badgeShimmer {
    0%,
    65% {
        left: -120%;
    }
    90%,
    100% {
        left: 130%;
    }
}


/* 各徽章错开 shimmer 节奏（让 4 个不同步，看起来更灵动） */

.hero__badge--1::after {
    animation-delay: 0s;
}

.hero__badge--2::after {
    animation-delay: 1.25s;
}

.hero__badge--3::after {
    animation-delay: 2.5s;
}

.hero__badge--4::after {
    animation-delay: 3.75s;
}


/* reduced-motion 关闭 shimmer 动画 */

@media (prefers-reduced-motion: reduce) {
    .hero__badge::after,
    .hero__badge::before {
        animation: none !important;
    }
}

@keyframes badgeOrbit {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(6px, -10px) rotate(0.6deg);
    }
    50% {
        transform: translate(-4px, -4px) rotate(-0.6deg);
    }
    75% {
        transform: translate(-8px, 6px) rotate(0.4deg);
    }
}


/* ============================================================
   2. Hero 网格背景 — 缓慢平移（gridShift 20s）
   ============================================================ */

.hero__grid-bg {
    animation: gridShift 20s linear infinite;
}

@keyframes gridShift {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(60px, 60px);
    }
}


/* ============================================================
   3. Hero 标签呼吸光晕（v8 加强版 — 在 v7 基础上加更明显的发光）
   ============================================================ */

.hero__tag {
    animation: tagGlow 3s ease-in-out infinite;
}

@keyframes tagGlow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.15);
    }
    50% {
        box-shadow: 0 0 24px 4px rgba(0, 102, 255, 0.3);
    }
}


/* ============================================================
   4. 时间线（关于我们）— 节点脉冲 + 竖线渐变
   ============================================================ */

.timeline::before {
    background: linear-gradient(180deg, #0066FF 0%, #7C3AED 50%, #10B981 100%);
    width: 2px;
}


/* v20 修复：不再覆盖 position: absolute，保持 dot 在中间竖线上绝对定位 */

.timeline__dot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--color-brand-blue);
    opacity: 0.4;
    animation: dotPulse 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes dotPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(2);
        opacity: 0;
    }
}


/* 时间线滚动绘制（在 v3/v4 已有的 is-revealed 基础上）*/

.timeline::before {
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline.is-revealed::before {
    transform: translateX(-50%) scaleY(1);
}


/* ============================================================
   5. 核心价值观卡（关于我们）— hover 上浮 + 发光
   ============================================================ */

.value-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
    border: 1px solid transparent;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.1);
    border-color: rgba(0, 102, 255, 0.15);
}

.value-card--full:hover {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.04), rgba(124, 58, 237, 0.04));
}


/* ============================================================
   6. 团队头像（关于我们）— hover 缩放 + 高光扫过
   ============================================================ */

.team-card__avatar {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

.team-card:hover .team-card__avatar {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.team-card__avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 60%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.team-card:hover .team-card__avatar::before {
    opacity: 1;
}


/* ============================================================
   7. 公式插图浮动（关于我们）
   ============================================================ */

.about-intro__illustration-stack svg,
.about-intro__image img {
    animation: floatSlow 6s ease-in-out infinite;
}

@keyframes floatSlow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


/* ============================================================
   8. 业务详情卡（业务板块）— hover 上浮 + 发光
   ============================================================ */

.business-detail {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.business-detail:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 102, 255, 0.15);
}


/* 业务详情侧栏数字：渐变发光 */

.business-detail__stat-number {
    background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-brand-blue);
    font-weight: 800;
    transition: filter 0.4s ease;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .business-detail__stat-number {
        color: transparent;
    }
}


/* ============================================================
   9. 业务协同流程箭头 — 滑动 + 颜色渐变
   ============================================================ */

.business-logic__arrow {
    animation: arrowSlide 1.5s ease-in-out infinite;
}

@keyframes arrowSlide {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.5;
        color: var(--color-light);
    }
    50% {
        transform: translateX(6px);
        opacity: 1;
        color: var(--color-brand-blue);
    }
}


/* ============================================================
   10. 案例卡（客户案例）— hover 上浮 + 图片缩放
   ============================================================ */

.case-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.case-card__image img,
.case-card__image .case-placeholder {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-card:hover .case-card__image img,
.case-card:hover .case-card__image .case-placeholder {
    transform: scale(1.06);
}


/* ============================================================
   11. 联系表单（联系我们）— focus 发光
   ============================================================ */

.form-control {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.form-control:focus {
    border-color: var(--color-brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    outline: none;
    background: var(--color-white);
}


/* ============================================================
   12. 联系信息项（联系我们）— hover 平移 + 浅蓝底
   ============================================================ */

.info-item {
    transition: transform 0.3s ease, background 0.3s ease;
    padding: 0.75rem;
    border-radius: 8px;
}

.info-item:hover {
    background: rgba(0, 102, 255, 0.04);
    transform: translateX(4px);
}


/* ============================================================
   13. 联系二维码（联系我们）— 圆形白底 + hover 缩放
   ============================================================ */

.contact-qr img {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    border: 4px solid var(--color-white);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.contact-qr img:hover {
    transform: scale(1.05);
}


/* ============================================================
   14. 文化卡（加入我们）— hover 上浮 + 图标弹跳
   ============================================================ */

.culture-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.culture-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 102, 255, 0.15);
}

.culture-card__icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
}

.culture-card:hover .culture-card__icon {
    transform: scale(1.2) rotate(-5deg);
    background: var(--color-brand-blue);
    color: var(--color-white);
}


/* ============================================================
   15. 职位卡（加入我们）— 箭头展开旋转
   ============================================================ */

.job-card__toggle {
    transition: transform 0.3s ease, color 0.3s ease;
}

.job-card.is-open .job-card__toggle {
    transform: rotate(180deg);
    color: var(--color-brand-blue);
}


/* ============================================================
   16. 按钮统一 hover 上提
   ============================================================ */

.btn {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}


/* ============================================================
   17. Footer 社交图标 hover 弹跳
   ============================================================ */

.footer-social a {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-social a:hover {
    transform: scale(1.2) translateY(-3px);
    background: rgba(0, 102, 255, 0.15);
    border-color: var(--color-brand-blue);
    color: var(--color-brand-blue);
}


/* ============================================================
   18. Footer 微信二维码弹窗
   ============================================================ */

.footer-social__wechat {
    position: relative;
}

.wechat-qr-popup {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--color-white);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    z-index: 100;
}

.wechat-qr-popup img {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    display: block;
}

.wechat-qr-popup span {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-mid);
    margin-top: 0.4rem;
}

.footer-social__wechat:hover .wechat-qr-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* ============================================================
   19. 滚动条美化（Webkit）
   ============================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg, #F8FAFF);
}

::-webkit-scrollbar-thumb {
    background: var(--color-light, #C7D2DE);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-mid, #8492A6);
}


/* Firefox 兼容 */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-light, #C7D2DE) var(--color-bg, #F8FAFF);
}


/* ============================================================
   20. 减少动效偏好 — v8 统一收口（含新加元素）
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .hero__badge,
    .hero__grid-bg,
    .hero__tag,
    .timeline__dot::after,
    .business-logic__arrow,
    .about-intro__illustration-stack svg,
    .team-card__avatar::before,
    .case-card__image img,
    .case-card__image .case-placeholder,
    .culture-card__icon,
    .job-card__toggle,
    .footer-social a,
    .wechat-qr-popup,
    .btn,
    .info-item,
    .value-card,
    .team-card__avatar,
    .business-detail,
    .case-card,
    .culture-card,
    .job-card,
    .form-control,
    .contact-qr img {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================
   v9 客户信任区强化 — 按用户反馈
   痛点：原 section 太朴素、品牌字小、颜色平淡、动效差
   方案：双行无限滚动 + 品牌色卡片 + 装饰光晕 + 统计徽章 + 巨大渐变标题
   ============================================================ */


/* ============================================================
   1. 客户区块整体氛围
   ============================================================ */

.section-clients {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-section-lg) 0;
}


/* 装饰光晕圆环（深空科技感）*/

.section-clients__aura {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
    opacity: 0.5;
}

.section-clients__aura--1 {
    width: 500px;
    height: 500px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.2) 0%, transparent 70%);
}

.section-clients__aura--2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
}

.section-clients .container {
    position: relative;
    z-index: 1;
}


/* ============================================================
   2. 顶部小标签（合作伙伴）
   ============================================================ */

.section-clients__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.25rem;
    background: rgba(0, 102, 255, 0.06);
    border: 1px solid rgba(0, 102, 255, 0.15);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-brand-blue);
    letter-spacing: 1.5px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.section-clients__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-blue);
    box-shadow: 0 0 8px var(--color-brand-blue);
    animation: dotPulse 2s ease-in-out infinite;
}


/* ============================================================
   3. 标题高亮（"中品互动"渐变发光）
   ============================================================ */

.section-title__highlight {
    background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-purple) 50%, var(--color-brand-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-brand-blue);
    background-size: 200% 200%;
    animation: titleGradientShift 6s ease-in-out infinite;
    font-weight: 900;
    position: relative;
    display: inline-block;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .section-title__highlight {
        color: transparent;
    }
}

@keyframes titleGradientShift {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}


/* ============================================================
   4. 统计徽章（200+ / 98% / 7×24）
   ============================================================ */

.section-clients__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem auto 3rem;
    flex-wrap: wrap;
    max-width: 720px;
}

.section-clients__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 1.5rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-clients__stat:hover {
    transform: translateY(-3px);
}

.section-clients__stat-num {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-brand-blue);
    filter: drop-shadow(0 2px 8px rgba(0, 102, 255, 0.15));
    position: relative;
}

.section-clients__stat-num sup {
    font-size: 0.55em;
    margin-left: 0.1em;
    font-weight: 700;
    -webkit-text-fill-color: var(--color-brand-purple);
    color: var(--color-brand-purple);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .section-clients__stat-num {
        color: transparent;
    }
}

.section-clients__stat-label {
    font-size: 0.82rem;
    color: var(--color-mid);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}

.section-clients__stat-divider {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.12), transparent);
}


/* ============================================================
   5. Logo 卡片墙（v9 升级）
   ============================================================ */

.client-logos--v9 {
    position: relative;
    margin: 0 auto 2rem;
    width: 100%;
    overflow: hidden;
    /* 左右渐隐遮罩（让边缘有"淡出"质感）*/
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}


/* 滚动轨道（双行）*/

.client-logos__track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    padding: 0.5rem 0;
    will-change: transform;
}

.client-logos__track--row1 {
    animation: logoScroll 40s linear infinite;
}

.client-logos__track--row2 {
    margin-top: 1.5rem;
    animation: logoScrollReverse 45s linear infinite;
    opacity: 0.45;
}

@keyframes logoScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 0.75rem));
    }
}

@keyframes logoScrollReverse {
    0% {
        transform: translateX(calc(-50% - 0.75rem));
    }
    100% {
        transform: translateX(0);
    }
}


/* Logo 卡片（v9 升级版 — 更大、品牌色 hover 浮起）*/

.client-logos--v9 .client-logos__item {
    flex: 0 0 auto;
    width: 220px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
    border: 1.5px solid color-mix(in srgb, var(--brand-color, var(--color-brand-blue)) 22%, transparent);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--color-brand-blue)) 8%, transparent), 0 4px 12px rgba(0, 0, 0, 0.03), 0 0 24px -4px color-mix(in srgb, var(--brand-color, var(--color-brand-blue)) 18%, transparent);
    /* 覆盖 v7 的灰度滤镜（让品牌色默认显示） */
    filter: none !important;
}


/* hover：上浮 + 品牌色边框加粗 + 强光阴影 */

.client-logos--v9 .client-logos__item:hover {
    transform: translateY(-8px) scale(1.05);
    background: #FFFFFF;
    border-color: var(--brand-color, var(--color-brand-blue));
    box-shadow: 0 0 0 1px var(--brand-color, var(--color-brand-blue)), 0 16px 40px color-mix(in srgb, var(--brand-color, var(--color-brand-blue)) 28%, transparent), 0 0 32px -4px color-mix(in srgb, var(--brand-color, var(--color-brand-blue)) 40%, transparent);
    z-index: 10;
}


/* Logo 图片（占满卡片）*/

.client-logos--v9 .client-logos__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

.client-logos--v9 .client-logos__item:hover img {
    transform: scale(1.08);
}


/* 顶部品牌色顶条（v10 — 常驻显示 + 持续流光）*/

.client-logos--v9 .client-logos__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient( 90deg, var(--brand-color, var(--color-brand-blue)) 0%, var(--brand-color, var(--color-brand-blue)) 35%, rgba(255, 255, 255, 0.85) 50%, var(--brand-color, var(--color-brand-blue)) 65%, var(--brand-color, var(--color-brand-blue)) 100%);
    background-size: 220% 100%;
    background-position: 0 0;
    animation: topBarFlow 3.5s linear infinite;
    box-shadow: 0 4px 14px -2px var(--brand-color, var(--color-brand-blue));
    z-index: 3;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}


/* hover：流光加速 + 顶条变厚 */

.client-logos--v9 .client-logos__item:hover::before {
    animation-duration: 1.4s;
    height: 5px;
}

@keyframes topBarFlow {
    0% {
        background-position: 220% 0;
    }
    100% {
        background-position: -220% 0;
    }
}


/* 每张卡片根据自己的品牌色设置 --brand-color */

.client-logos--v9 .client-logos__item[data-key="huawei"] {
    --brand-color: #CF0A2C;
}

.client-logos--v9 .client-logos__item[data-key="tencent"] {
    --brand-color: #00A4FF;
}

.client-logos--v9 .client-logos__item[data-key="alibaba"] {
    --brand-color: #FF6A00;
}

.client-logos--v9 .client-logos__item[data-key="bytedance"] {
    --brand-color: #1F1F1F;
}

.client-logos--v9 .client-logos__item[data-key="jd"] {
    --brand-color: #E1251B;
}

.client-logos--v9 .client-logos__item[data-key="meituan"] {
    --brand-color: #FFD100;
}

.client-logos--v9 .client-logos__item[data-key="baidu"] {
    --brand-color: #2932E1;
}

.client-logos--v9 .client-logos__item[data-key="netease"] {
    --brand-color: #C71E1E;
}


/* 斜向擦亮（v10 关键特效 — hover 时从左滑到右）*/

.client-logos--v9 .client-logos__item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: skewX(-20deg);
    transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 4;
}

.client-logos--v9 .client-logos__item:hover::after {
    left: 130%;
}


/* 第二行（装饰层，hover 不变）*/

.client-logos--v9 .client-logos__item--ghost {
    pointer-events: none;
}

.client-logos--v9 .client-logos__item--ghost:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
}


/* 鼠标悬停在整墙上时暂停滚动（v9 优化体验）*/

.client-logos--v9:hover .client-logos__track--row1 {
    animation-play-state: paused;
}


/* ============================================================
   6. 按钮箭头（v9 升级：动态右移）
   ============================================================ */

.btn__arrow {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-left: 0.25rem;
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}


/* ============================================================
   7. 响应式
   ============================================================ */

@media (max-width: 768px) {
    .section-clients__stats {
        gap: 0.75rem;
    }
    .section-clients__stat {
        padding: 0.75rem 1rem;
    }
    .section-clients__stat-num {
        font-size: 2rem;
    }
    .section-clients__stat-divider {
        display: none;
    }
    .client-logos--v9 .client-logos__item {
        width: 180px;
        height: 64px;
    }
    .client-logos__track {
        gap: 1rem;
    }
    .client-logos__track--row2 {
        display: none;
    }
}


/* ============================================================
   8. 减少动效偏好 — v9 收口
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .section-clients__aura,
    .section-clients__eyebrow-dot,
    .section-title__highlight,
    .section-clients__stat-num,
    .client-logos__track--row1,
    .client-logos__track--row2,
    .client-logos--v9 .client-logos__item,
    .client-logos--v9 .client-logos__item::before,
    .client-logos--v9 .client-logos__item img,
    .client-logos--v9 .client-logos__item::after,
    .btn__arrow {
        animation: none !important;
        transition: none !important;
    }
    .client-logos__track--row1,
    .client-logos__track--row2 {
        transform: none !important;
    }
}


/* ============================================================
   v10 客户好评卡片升级 — 按用户反馈
   痛点：头像小、无品牌色、特效弱
   方案：放大头像 + 渐变底 + 姓氏大字 + 卡片渐变描边 + 灵动微动效
   ============================================================ */


/* ============================================================
   1. 卡片整体：渐变描边 + 阴影
   ============================================================ */

.review-card {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFBFF 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
}


/* 卡片顶部装饰条（hover 时从左扫到右） */

.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0066FF, #7C3AED, #06B6D4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

.review-card:hover::before {
    transform: scaleX(1);
}


/* 卡片悬停：上浮 + 强阴影 + 品牌色边框 */

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 102, 255, 0.12);
    border-color: rgba(0, 102, 255, 0.2);
}


/* ============================================================
   2. 头部：星级 + 引用图标
   ============================================================ */

.review-card__stars {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    color: #F59E0B;
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 0.85rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.review-card:hover .review-card__stars {
    transform: scale(1.05);
}


/* 引用图标 - 更大更精致 */

.review-card__quote-icon {
    width: 36px;
    height: 36px;
    color: var(--color-brand-blue);
    opacity: 0.18;
    margin-bottom: 0.5rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-card:hover .review-card__quote-icon {
    opacity: 0.3;
    color: var(--color-brand-purple);
    transform: scale(1.1) rotate(-3deg);
}


/* ============================================================
   3. 评价文字
   ============================================================ */

.review-card__quote {
    flex: 1;
    margin-bottom: 1.5rem;
}

.review-card__quote p {
    font-size: 0.95rem;
    color: var(--color-dark);
    line-height: 1.85;
    letter-spacing: 0.2px;
    margin: 0;
}


/* ============================================================
   4. 底部作者区：渐变头像 + 姓氏大字
   ============================================================ */

.review-card__author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1.25rem;
}


/* v10 升级：头像更大（52×52）+ 渐变底 + 姓氏大字 */

.review-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 800;
    font-size: 1.35rem;
    font-family: var(--font-heading);
    flex-shrink: 0;
    background: var(--avatar-color, linear-gradient(135deg, #0066FF 0%, #7C3AED 50%, #06B6D4 100%));
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}


/* 头像前的"光晕"伪元素（hover 时扩散） */

.review-card__avatar::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--avatar-color, linear-gradient(135deg, #0066FF 0%, #7C3AED 50%, #06B6D4 100%));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    filter: blur(8px);
}

.review-card:hover .review-card__avatar {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 6px 18px rgba(0, 102, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.review-card:hover .review-card__avatar::before {
    opacity: 0.5;
}


/* 姓名 + 职位 */

.review-card__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-darkest);
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.review-card__role {
    font-size: 0.78rem;
    color: var(--color-light);
    letter-spacing: 0.3px;
}


/* ============================================================
   5. 不同姓氏的渐变色（v10 — 用 --avatar-color 自定义属性）
   ============================================================ */

.review-card__avatar[data-surname="王"] {
    --avatar-color: linear-gradient(135deg, #0066FF 0%, #4F46E5 100%);
}

.review-card__avatar[data-surname="张"] {
    --avatar-color: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
}

.review-card__avatar[data-surname="李"] {
    --avatar-color: linear-gradient(135deg, #06B6D4 0%, #10B981 100%);
}

.review-card__avatar[data-surname="陈"] {
    --avatar-color: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
}


/* ============================================================
   6. 卡片悬停时背景光晕扩散
   ============================================================ */

.review-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.review-card:hover::after {
    opacity: 1;
}


/* ============================================================
   7. 减少动效偏好 — v10 收口
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .review-card,
    .review-card__avatar,
    .review-card__avatar::before,
    .review-card__quote-icon,
    .review-card__stars {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================
   v10+ 客户好评 — 顶部 eyebrow 标签（真实反馈）
   ============================================================ */

.section-reviews__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.25rem;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-brand-purple, #7C3AED);
    letter-spacing: 1.5px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.section-reviews__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-purple, #7C3AED);
    box-shadow: 0 0 8px var(--color-brand-purple, #7C3AED);
    animation: dotPulse 2s ease-in-out infinite;
}


/* ============================================================
   v10+ 客户好评 — 默认小动效（灵动自然）
   1) 卡片整体微浮动（错位呼吸节奏）
   2) 头像周期性"光泽扫过"
   3) 引用图标默认轻摆
   ============================================================ */


/* (1) 卡片微浮动 — 用 nth-child 错开节奏，避免整齐划一 */

.reviews-marquee__track .review-card:nth-child(3n+1) {
    animation: cardFloatA 6s ease-in-out infinite;
}

.reviews-marquee__track .review-card:nth-child(3n+2) {
    animation: cardFloatB 7s ease-in-out infinite;
}

.reviews-marquee__track .review-card:nth-child(3n+3) {
    animation: cardFloatC 8s ease-in-out infinite;
}

@keyframes cardFloatA {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes cardFloatB {
    0%,
    100% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(2px);
    }
}

@keyframes cardFloatC {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}


/* (2) 头像光泽扫过 — 用 ::after 叠加一层斜向高光条 */

.review-card__avatar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: avatarShine 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes avatarShine {
    0%,
    60% {
        left: -75%;
    }
    80%,
    100% {
        left: 130%;
    }
}


/* (3) 引用图标默认轻摆（呼吸感） */

.review-card__quote-icon {
    animation: quoteSway 5s ease-in-out infinite;
}

@keyframes quoteSway {
    0%,
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 0.18;
    }
    50% {
        transform: translateX(2px) rotate(-2deg);
        opacity: 0.28;
    }
}


/* (4) 滚动悬停时停掉微动效，避免与位移 hover 冲突 */

.reviews-marquee:hover .review-card,
.reviews-marquee:hover .review-card__avatar::after,
.reviews-marquee:hover .review-card__quote-icon {
    animation-play-state: paused;
}


/* ============================================================
   v10+ 客户好评 — 收口的 prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .section-reviews__eyebrow-dot,
    .review-card__avatar::after {
        animation: none !important;
    }
}


/* ============================================================
   v11 关于页 FAQ 手风琴板块
   - 8 条问答：GEO 定义 / 效果周期 / 幻剧魔方 / 与 SEO 关系等
   - 默认折叠、点击展开；JS 控制 max-height + aria-expanded
   - 顶部品牌色渐变描边 + 悬停时左侧色条滑入
   ============================================================ */

.faq {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-element-md, 1rem);
}

.faq__item {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-line, #E5E7EB);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}


/* 左侧品牌色色条：默认隐藏，悬停 / 展开时滑入 */

.faq__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-brand-blue, #0066FF), var(--color-brand-purple, #7C3AED));
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item:hover {
    border-color: rgba(0, 102, 255, 0.18);
    box-shadow: 0 8px 30px rgba(0, 102, 255, 0.06);
}

.faq__item.is-open {
    border-color: rgba(124, 58, 237, 0.25);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.08);
}

.faq__item:hover::before,
.faq__item.is-open::before {
    transform: scaleY(1);
}


/* 问题按钮：清除原生 button 样式，整行可点击 */

.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-darkest, #1A1A2E);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.faq__question:hover {
    color: var(--color-brand-blue, #0066FF);
}

.faq__item.is-open .faq__question {
    color: var(--color-brand-purple, #7C3AED);
}

.faq__q-text {
    flex: 1;
}


/* 右侧加号 / 减号图标 */

.faq__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.06);
    border: 1px solid rgba(0, 102, 255, 0.15);
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-brand-blue, #0066FF);
    border-radius: 1px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.faq__icon::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq__icon::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.faq__question:hover .faq__icon {
    background: rgba(0, 102, 255, 0.12);
    border-color: rgba(0, 102, 255, 0.35);
    transform: rotate(90deg);
}


/* 展开时：加号变减号（藏起竖线），图标变紫 */

.faq__item.is-open .faq__icon {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.35);
    transform: rotate(180deg);
}

.faq__item.is-open .faq__icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after {
    background: var(--color-brand-purple, #7C3AED);
}


/* 答案区域：max-height 动画
   - 默认 max-height: 0 完全折叠
   - 展开时通过 .is-open 切换到足够大的 max-height（1500px）
   - 不用 JS 计算 scrollHeight，避免 max-height: 0 状态下浏览器对 scrollHeight 的不一致行为 */

.faq__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item.is-open .faq__answer {
    max-height: 1500px;
}

.faq__answer p {
    margin: 0 1.5rem 0.75rem 1.5rem;
    color: var(--color-dark, #4A4A5A);
    font-size: 0.9375rem;
    line-height: 1.75;
}

.faq__answer p:last-child {
    margin-bottom: 1.5rem;
}

.faq__answer ul,
.faq__answer ol {
    margin: 0 1.5rem 0.75rem 1.5rem;
    padding-left: 2.75rem;
    /* 左侧留出 1.5rem 内边距 + 列表缩进 */
    color: var(--color-dark, #4A4A5A);
    font-size: 0.9375rem;
    line-height: 1.75;
}

.faq__answer ul:last-child,
.faq__answer ol:last-child {
    margin-bottom: 1.5rem;
}

.faq__answer li {
    margin-bottom: 0.4rem;
}

.faq__answer li:last-child {
    margin-bottom: 0;
}

.faq__answer strong {
    color: var(--color-darkest, #1A1A2E);
    font-weight: 600;
}


/* 答案顶部虚线分隔：使用 p 第一个子元素（如果直接有内容），
   或通过 first-of-type 选择器在首个段落前加分隔线 */

.faq__answer>*:first-child {
    border-top: 1px dashed var(--color-line, #E5E7EB);
    padding-top: 1rem;
}


/* 移动端 */

@media (max-width: 768px) {
    .faq__question {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        gap: 1rem;
    }
    .faq__answer p,
    .faq__answer ul,
    .faq__answer ol {
        margin-right: 1.25rem;
        margin-left: 1.25rem;
        font-size: 0.875rem;
    }
    .faq__answer ul,
    .faq__answer ol {
        padding-left: 2.25rem;
    }
    .faq__icon {
        width: 24px;
        height: 24px;
    }
    .faq__icon::before {
        width: 10px;
    }
    .faq__icon::after {
        height: 10px;
    }
}


/* 减少动效偏好 */

@media (prefers-reduced-motion: reduce) {
    .faq__item,
    .faq__icon,
    .faq__answer,
    .faq__item::before {
        transition: none !important;
        animation: none !important;
    }
}


/* ============================================================
   v12 业务协同板块（业务页）— 横向四阶漏斗
   - 顶部 4 段彩色进度条 + 圆点 indicator
   - 4 张横向长方形卡片：每张带大号水印数字、彩色 icon、底部小标签
   - 卡片之间用 SVG 虚线箭头连接（移动端隐藏）
   - 顶部 4 段进度条随滚动 / hover 依次点亮
   - 卡片 hover：translateY + 描边流光 + icon 放大 + 顶部进度条对应段高亮
   - 底部"闭环"结论条带圆形刷新图标
   ============================================================ */


/* 颜色变量（局部作用域） */

.synergy {
    --syn-blue: #0066FF;
    --syn-purple: #7C3AED;
    --syn-cyan: #06B6D4;
    --syn-green: #10B981;
    position: relative;
    margin-top: var(--spacing-section-md);
}


/* ---------- 顶部进度条 ---------- */

.synergy__progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    position: relative;
    height: 32px;
    margin-bottom: var(--spacing-section-md);
    padding: 0 4%;
}

.synergy__progress-bar {
    /* 横贯的连接线 */
    position: absolute;
    top: 50%;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, var(--syn-blue) 0%, var(--syn-purple) 33%, var(--syn-cyan) 66%, var(--syn-green) 100%);
    opacity: 0.18;
    transform: translateY(-50%);
    border-radius: 2px;
    overflow: hidden;
}


/* 进度条上的扫光高亮（用 ::before 模拟"已走完的部分"） */

.synergy__progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, var(--syn-blue) 0%, var(--syn-purple) 33%, var(--syn-cyan) 66%, var(--syn-green) 100%);
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.synergy.is-revealed .synergy__progress-bar::before {
    width: 100%;
}

.synergy__progress-step {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.synergy__progress-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-line);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}


/* 1 / 2 / 3 / 4 段进度条 dot 颜色 */

.synergy__progress-step:nth-child(1) .synergy__progress-dot {
    border-color: var(--syn-blue);
}

.synergy__progress-step:nth-child(2) .synergy__progress-dot {
    border-color: var(--syn-purple);
}

.synergy__progress-step:nth-child(3) .synergy__progress-dot {
    border-color: var(--syn-cyan);
}

.synergy__progress-step:nth-child(4) .synergy__progress-dot {
    border-color: var(--syn-green);
}


/* 滚动入场后：dot 依次亮起 + 中心填色 + 辉光 */

.synergy__progress-step .synergy__progress-dot::after {
    content: '';
    position: absolute;
    inset: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.synergy.is-revealed .synergy__progress-step .synergy__progress-dot {
    transform: scale(1.05);
}

.synergy.is-revealed .synergy__progress-step:nth-child(1) .synergy__progress-dot {
    background: var(--syn-blue);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
}

.synergy.is-revealed .synergy__progress-step:nth-child(2) .synergy__progress-dot {
    background: var(--syn-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.synergy.is-revealed .synergy__progress-step:nth-child(3) .synergy__progress-dot {
    background: var(--syn-cyan);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15);
}

.synergy.is-revealed .synergy__progress-step:nth-child(4) .synergy__progress-dot {
    background: var(--syn-green);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}


/* ---------- 4 张卡片横向网格 ---------- */

.synergy__grid {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
}


/* ---------- 单张协同卡片 ---------- */

.synergy__item {
    flex: 1 1 0;
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    margin: 0;
    text-align: center;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
    cursor: default;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}


/* 卡片顶部品牌色细条 */

.synergy__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, var(--syn-blue));
    transform: scaleX(0.3);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
}

.synergy__item:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--card-accent, var(--syn-blue));
    z-index: 2;
}

.synergy__item:hover::before {
    transform: scaleX(1);
    opacity: 1;
}


/* 大号水印数字 01-04 */

.synergy__num {
    font-family: var(--font-mono, "Inter", "SF Pro Display", system-ui, sans-serif);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--card-accent, var(--syn-blue));
    opacity: 0.08;
    letter-spacing: -0.04em;
    position: absolute;
    top: 0.5rem;
    right: 1.25rem;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.synergy__item:hover .synergy__num {
    opacity: 0.15;
    transform: scale(1.06);
}


/* icon 容器 */

.synergy__icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.synergy__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-accent, var(--syn-blue));
    background: color-mix(in srgb, var(--card-accent, var(--syn-blue)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--card-accent, var(--syn-blue)) 15%, transparent);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, background 0.4s ease;
    position: relative;
    overflow: hidden;
}

.synergy__icon svg {
    width: 28px;
    height: 28px;
    position: relative;
    z-index: 1;
}


/* icon 持续呼吸光晕 */

@keyframes iconGlow {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--card-accent, var(--syn-blue)) 0%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--card-accent, var(--syn-blue)) 8%, transparent);
    }
}

.synergy__icon {
    animation: iconGlow 3s ease-in-out infinite;
}

.synergy__item:hover .synergy__icon {
    transform: translateY(-2px) scale(1.08);
    background: color-mix(in srgb, var(--card-accent, var(--syn-blue)) 14%, transparent);
    animation: none;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--card-accent, var(--syn-blue)) 25%, transparent);
}


/* icon 内 SVG 的"擦亮"扫光（hover 时触发） */

.synergy__icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
}

.synergy__item:hover .synergy__icon::before {
    animation: iconShine 0.9s ease-in-out;
}

@keyframes iconShine {
    0% {
        left: -75%;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        left: 130%;
        opacity: 0;
    }
}


/* 底部小标签"被看见" */

.synergy__label {
    display: inline-block;
    margin: 0 auto 0.6rem auto;
    padding: 0.2rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--card-accent, var(--syn-blue));
    background: color-mix(in srgb, var(--card-accent, var(--syn-blue)) 8%, transparent);
    border-radius: 50px;
    border: 1px solid color-mix(in srgb, var(--card-accent, var(--syn-blue)) 18%, transparent);
    position: relative;
    z-index: 1;
    width: fit-content;
}


/* 卡片标题（单行不折行） */

.synergy__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-darkest, #1A1A2E);
    margin: 0 0 0.6rem 0;
    line-height: 1.4;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.synergy__item:hover .synergy__title {
    color: var(--card-accent, var(--syn-blue));
}


/* 描述文字 */

.synergy__desc {
    font-size: 0.875rem;
    color: var(--color-mid, #6B7280);
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 1;
    flex: 1;
}


/* ---------- 4 个 business 颜色主题 ---------- */

.synergy__item--geo {
    --card-accent: var(--syn-blue);
}

.synergy__item--mofang {
    --card-accent: var(--syn-purple);
}

.synergy__item--ai {
    --card-accent: var(--syn-cyan);
}

.synergy__item--outsource {
    --card-accent: var(--syn-green);
}


/* ---------- 卡片之间的连接箭头 ---------- */

.synergy__connector {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-light, #9CA3AF);
    transition: color 0.4s ease;
    position: relative;
}

.synergy__connector svg {
    width: 100%;
    height: 12px;
    max-width: 32px;
}


/* 虚线流动动效 */

.synergy__connector svg line {
    stroke-dasharray: 3 3;
    animation: dashFlow 1.2s linear infinite;
}

@keyframes dashFlow {
    to {
        stroke-dashoffset: -12;
    }
}


/* ---------- 底部"闭环"结论 ---------- */

.synergy__loop {
    margin-top: var(--spacing-section-md);
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.04), rgba(124, 58, 237, 0.04), rgba(6, 182, 212, 0.04), rgba(16, 185, 129, 0.04));
    border: 1px solid var(--color-line);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.synergy__loop:hover {
    border-color: rgba(0, 102, 255, 0.2);
    box-shadow: 0 8px 30px rgba(0, 102, 255, 0.06);
}

.synergy__loop-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--syn-blue), var(--syn-purple));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.25);
}

.synergy__loop-icon svg {
    width: 18px;
    height: 18px;
    animation: loopSpin 4s linear infinite;
}

@keyframes loopSpin {
    to {
        transform: rotate(360deg);
    }
}

.synergy__loop-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-dark, #4A4A5A);
}

.synergy__loop-text strong {
    color: var(--color-darkest, #1A1A2E);
    font-weight: 700;
}


/* ---------- 入场动画：stagger-child 控制 ---------- */

.synergy__item,
.synergy__connector,
.synergy__loop {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.synergy.is-revealed .synergy__item,
.synergy.is-revealed .synergy__connector,
.synergy.is-revealed .synergy__loop {
    opacity: 1;
    transform: translateY(0);
}


/* 错位入场：左→右依次显示 */

.synergy.is-revealed .synergy__item:nth-of-type(1) {
    transition-delay: 0.1s;
}

.synergy.is-revealed .synergy__connector:nth-of-type(2) {
    transition-delay: 0.25s;
}

.synergy.is-revealed .synergy__item:nth-of-type(3) {
    transition-delay: 0.4s;
}

.synergy.is-revealed .synergy__connector:nth-of-type(4) {
    transition-delay: 0.55s;
}

.synergy.is-revealed .synergy__item:nth-of-type(5) {
    transition-delay: 0.7s;
}

.synergy.is-revealed .synergy__connector:nth-of-type(6) {
    transition-delay: 0.85s;
}

.synergy.is-revealed .synergy__item:nth-of-type(7) {
    transition-delay: 1.0s;
}

.synergy.is-revealed .synergy__loop {
    transition-delay: 1.15s;
}


/* ---------- 响应式 ---------- */

@media (max-width: 1024px) {
    .synergy__item {
        padding: 1.5rem 1rem;
        min-height: 240px;
    }
    .synergy__num {
        font-size: 3.5rem;
    }
    .synergy__title {
        font-size: 1rem;
    }
    .synergy__connector {
        flex: 0 0 24px;
    }
}

@media (max-width: 768px) {
    /* 移动端：取消横向布局，改为 2x2 网格 + 上下连接线 */
    .synergy__progress {
        padding: 0 8%;
    }
    .synergy__grid {
        flex-direction: column;
        gap: 1rem;
    }
    .synergy__connector {
        flex: 0 0 24px;
        width: 100%;
        transform: rotate(90deg);
    }
    .synergy__item {
        min-height: auto;
    }
    .synergy__title {
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .synergy__progress {
        padding: 0 10%;
    }
    .synergy__num {
        font-size: 3rem;
    }
    .synergy__loop {
        flex-direction: column;
        text-align: center;
    }
}


/* 减少动效偏好 */

@media (prefers-reduced-motion: reduce) {
    .synergy__item,
    .synergy__connector,
    .synergy__loop,
    .synergy__progress-bar::before,
    .synergy__progress-dot,
    .synergy__icon,
    .synergy__loop-icon svg {
        transition: none !important;
        animation: none !important;
    }
}


/* 进度条 dot 的 hover 联动放大（由 JS 添加 is-hover 类触发） */

.synergy__progress-step.is-hover .synergy__progress-dot {
    transform: scale(1.4);
}

.synergy__progress-step:nth-child(1).is-hover .synergy__progress-dot {
    box-shadow: 0 0 0 6px rgba(0, 102, 255, 0.25);
}

.synergy__progress-step:nth-child(2).is-hover .synergy__progress-dot {
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.25);
}

.synergy__progress-step:nth-child(3).is-hover .synergy__progress-dot {
    box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.25);
}

.synergy__progress-step:nth-child(4).is-hover .synergy__progress-dot {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.25);
}


/* ============================================================
   19. 页面加载动画（首页品牌揭幕）
   - 深空背景 + 粒子聚合 + 品牌渐显 + 进度条
   - 由 assets/js/page-loader.js 控制时序
   ============================================================ */

.page-loader {
    /* 全屏覆盖层，置顶最高层级 */
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0A0D1E;
    /* 深空底色 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.page-loader__glow {
    /* 中心辉光，呼吸式缩放 */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.15) 0%, rgba(124, 58, 237, 0.08) 40%, transparent 70%);
    animation: loaderGlowPulse 2s ease-in-out infinite;
}

@keyframes loaderGlowPulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

.page-loader__canvas {
    /* 粒子画布铺满 */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.page-loader__text {
    /* 品牌文字层（在 canvas 之上） */
    position: relative;
    z-index: 1;
    text-align: center;
}

.page-loader__brand {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    /* 品牌三色渐变 */
    background: linear-gradient(135deg, #0066FF, #7C3AED, #06B6D4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 6px;
    /* 0.6s 延迟后渐入 */
    animation: loaderBrandIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
    margin-bottom: 0.75rem;
}

@keyframes loaderBrandIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.page-loader__sub {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    /* 比品牌名晚 0.3s 渐入 */
    animation: loaderBrandIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
    margin-bottom: 2rem;
}

.page-loader__progress {
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
    animation: loaderBrandIn 0.6s ease 1.2s both;
}

.page-loader__progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0066FF, #7C3AED);
    border-radius: 2px;
    transition: width 0.3s ease;
}

@media (max-width: 640px) {
    .page-loader__brand {
        font-size: 1.75rem;
        letter-spacing: 4px;
    }
    .page-loader__glow {
        width: 260px;
        height: 260px;
    }
}


/* ============================================================
   20. 业务页 — 典型合作场景卡片（scenario-card）
   - 3 列网格，每张卡含阶段标签、流程标签、效果说明
   - 悬停上浮 + 蓝色边框 + 阴影
   ============================================================ */

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-card-gap);
    margin-top: var(--spacing-section-md);
}

.scenario-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: var(--spacing-card-pad);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
    position: relative;
    overflow: hidden;
}


/* 顶部一道细微蓝色装饰线（呼应品牌色） */

.scenario-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-brand-blue), transparent);
    opacity: 0.4;
    transition: opacity var(--transition-smooth);
}

.scenario-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-brand-blue);
}

.scenario-card:hover::before {
    opacity: 1;
}

.scenario-card__stage {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-brand-blue);
    background: rgba(0, 102, 255, 0.06);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: var(--spacing-element-md);
}

.scenario-card h3 {
    font-size: var(--text-h3);
    font-weight: 600;
    color: var(--color-darkest);
    margin-bottom: var(--spacing-element-sm);
}

.scenario-card__flow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-element-md);
    flex-wrap: wrap;
}


/* 流程标签：每个业务对应一个颜色 */

.scenario-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 4px;
    font-size: var(--text-caption);
    font-weight: 500;
    white-space: nowrap;
}

.scenario-tag--geo {
    background: rgba(0, 102, 255, 0.1);
    color: #0066FF;
}

.scenario-tag--mofang {
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
}

.scenario-tag--ai {
    background: rgba(6, 182, 212, 0.1);
    color: #06B6D4;
}

.scenario-tag--outsource {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.scenario-arrow {
    color: var(--color-light);
    font-weight: 700;
    font-size: 1rem;
}

.scenario-card p {
    font-size: var(--text-small);
    color: var(--color-mid);
    line-height: 1.6;
    margin-bottom: var(--spacing-element-md);
}


/* 效果说明：左侧绿色装饰条 */

.scenario-card__result {
    padding: 0.75rem 1rem;
    background: rgba(16, 185, 129, 0.05);
    border-left: 3px solid var(--color-brand-green);
    border-radius: 0 var(--radius-tag) var(--radius-tag) 0;
    font-size: var(--text-caption);
    color: var(--color-dark);
    line-height: 1.5;
}

.scenario-card__result strong {
    color: var(--color-brand-green-hover);
}

@media (max-width: 1024px) {
    .scenario-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   21. 业务页 — 技术能力全景图（tech-radar）
   - 8 个圆形能力卡片围绕"中品互动"中心
   - v21：容器高度 + item 坐标全部由 JS 按正圆计算（最可靠方案）
   ============================================================ */

.tech-radar-wrapper {
    width: 100%;
    max-width: 600px;
    margin: var(--spacing-section-md) auto;
}

.tech-radar {
    position: relative;
    width: 100%;
    /* height 由 JS enforceSquare() 设为与宽度相等 */
}


/* 装饰同心圆（雷达圈） */

.tech-radar::before,
.tech-radar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(0, 102, 255, 0.15);
    pointer-events: none;
}

.tech-radar::before {
    width: 70%;
    height: 70%;
}

.tech-radar::after {
    width: 95%;
    height: 95%;
    border-color: rgba(124, 58, 237, 0.1);
}

.tech-radar__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066FF, #7C3AED);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-small);
    z-index: 2;
    box-shadow: 0 0 30px rgba(0, 102, 255, 0.3);
    animation: techRadarPulse 3s ease-in-out infinite;
}

@keyframes techRadarPulse {
    0%,
    100% {
        box-shadow: 0 0 30px rgba(0, 102, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 50px rgba(124, 58, 237, 0.5);
    }
}

.tech-radar__item {
    position: absolute;
    width: 86px;
    height: 86px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-white);
    border: 1.5px solid var(--color-line);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-sizing: border-box;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.tech-radar__item:hover {
    transform: translate(-50%, -50%) scale(1.15);
    border-color: var(--color-brand-blue);
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.25), 0 0 40px rgba(124, 58, 237, 0.12);
    z-index: 3;
}


/* tech-radar 使用像素圆心定位，需覆盖通用滚动动画的 transform，避免轨道圆心偏移。 */

.tech-radar__item.animate-on-scroll {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 30px));
}

.tech-radar__item.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.tech-radar__icon {
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 2px;
}

.tech-radar__name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-darkest);
    line-height: 1.2;
}

.tech-radar__desc {
    font-size: 0.6rem;
    color: var(--color-light);
    line-height: 1.2;
}


/* 八角位置 — v21：由 JS 按正圆像素坐标实时计算（resize 时重算），100% 正圆 */

@media (max-width: 640px) {
    .tech-radar-wrapper {
        max-width: 340px;
    }
    .tech-radar__center {
        width: 64px;
        height: 64px;
        font-size: var(--text-caption);
    }
    .tech-radar__icon {
        font-size: 1rem;
    }
    .tech-radar__name {
        font-size: 0.6rem;
    }
    .tech-radar__desc {
        font-size: 0.5rem;
    }
    .tech-radar__item {
        width: 64px;
        height: 64px;
    }
}


/* ============================================================
   v16 核心价值观卡片 — 默认流光边框 + hover 擦亮辉光
   痛点：v11 增强只有简单 translateY + 边框变色，"有点素"
   方案：
   1) 默认：conic-gradient 流光描边（旋转动画），不抢眼但有"活感"
   2) hover：流光加快 + 斜向白色高光扫过 + 蓝色辉光
   3) 兼容 prefers-reduced-motion
   ============================================================ */

.value-card {
    /* 为伪元素定位做铺垫（v11 已设置 border-left + transition，这里不重复） */
    position: relative;
    isolation: isolate;
    /* 让伪元素不会"溢出"圆角 */
    overflow: hidden;
}


/* (1) 默认态：旋转的 conic-gradient 流光描边
   - 用 ::before 充当"边框层"贴在卡片 padding 边缘
   - conic-gradient 旋转动画，营造"光环持续转动"的感觉 */

.value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* 用 padding + background-clip 技巧做"渐变描边" */
    background: conic-gradient( from 0deg, rgba(0, 102, 255, 0.5) 0deg, rgba(124, 58, 237, 0.5) 90deg, rgba(6, 182, 212, 0.5) 180deg, rgba(16, 185, 129, 0.5) 270deg, rgba(0, 102, 255, 0.5) 360deg);
    /* 只显示 padding 区域（即边框），不显示中心 */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.45;
    animation: valueCardBorderFlow 6s linear infinite;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

@keyframes valueCardBorderFlow {
    to {
        transform: rotate(360deg);
    }
}


/* (2) hover 状态：流光描边加快 + 增强不透明度 */

.value-card:hover::before {
    opacity: 0.95;
    animation-duration: 2.2s;
}


/* (3) 斜向擦亮高光（hover 时从左滑到右） — 用 ::after */

.value-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
    transform: skewX(-20deg);
    transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.value-card:hover::after {
    left: 130%;
}


/* (4) hover 时主辉光（蓝紫叠加） — 强化 shadow */

.value-card:hover {
    /* v11 已有 translateY + box-shadow + border-color，这里用更显眼的辉光 */
    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.18), 0 0 0 1px rgba(0, 102, 255, 0.15), 0 0 24px -4px rgba(124, 58, 237, 0.3);
}


/* (5) 卡片内容层级 — 让文字在伪元素之上 */

.value-card__title,
.value-card__desc {
    position: relative;
    z-index: 3;
}


/* (6) 减少动效偏好 — 收口 */

@media (prefers-reduced-motion: reduce) {
    .value-card::before,
    .value-card::after {
        animation: none !important;
        transition: none !important;
    }
    .value-card::after {
        left: -120%;
    }
}


/* ============================================================
   v20 技术能力全景图 — 圆环顺时针旋转
   方案：
   1) 8 个 item 包在 .tech-radar__orbit 容器内
   2) orbit 顺时针匀速旋转（40s 一圈）
   3) 每个 item 的内层 .tech-radar__item-inner 反向旋转（保持文字正立）
   4) hover 暂停旋转 + 单独放大当前卡片
   5) 移动端暂停旋转
   要点：orbit 的旋转中心在 tech-radar 正中心 (50% 50%)，
        item-inner 以自身中心反向旋转，两者角速度相同方向相反，
        推导：在圆周上任一点，公转 + 自转抵消 = 文字始终正立。
   ============================================================ */

.tech-radar__orbit {
    position: absolute;
    inset: 0;
    animation: orbitRotate 40s linear infinite;
}


/* v20 将 transform-origin 显式设为容器中心，避免默认值偏差 */

@keyframes orbitRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.tech-radar__item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: orbitCounterRotate 40s linear infinite;
}

@keyframes orbitCounterRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}


/* hover 整个雷达时暂停旋转，hover 单个 item 时放大 */

.tech-radar:hover .tech-radar__orbit,
.tech-radar:hover .tech-radar__item-inner {
    animation-play-state: paused;
}


/* 移动端：屏幕 <= 768px 时停止旋转，保持静态雷达图 */

@media (max-width: 768px) {
    .tech-radar__orbit,
    .tech-radar__item-inner {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tech-radar__orbit,
    .tech-radar__item-inner {
        animation: none !important;
    }
}


/* ============================================================
   v21 导航 Logo 精修
   目标：让正方形品牌图标在玻璃导航中更像正式品牌标识，
        通过横向品牌块、清晰层级和更稳的缩放节奏提升观感。
   ============================================================ */

@media (max-width: 1180px) {
    .header-inner {
        gap: 1rem;
    }
    .site-logo a {
        gap: 0.75rem;
    }
    .site-logo__mark {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }
    .site-logo__title {
        font-size: 1.08rem;
    }
    .site-logo__subtitle {
        font-size: 0.72rem;
    }
}

@media (max-width: 1024px) {
    .site-logo__mark {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
    .site-logo__title {
        font-size: 1.02rem;
        letter-spacing: 0.06em;
    }
    .site-logo__subtitle {
        display: none;
    }
}

@media (max-width: 640px) {
    .header-inner {
        padding: 0 var(--spacing-element-md);
    }
    .site-logo a {
        gap: 0.6rem;
    }
    .site-logo__mark {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
    }
    .site-logo__title {
        font-size: 0.96rem;
    }
}