/* ===================================================================
   大成汇官网 · components.css
   导航 / Hero / 按钮 / 卡片 / 数据 / 页脚 / 加载 / 悬浮工具
   =================================================================== */

/* ---------- 加载序列 ---------- */
.boot-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-cosmos);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease, visibility .6s ease;
}
.boot-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { text-align: center; }
.boot-ring {
    width: 90px; height: 90px; margin: 0 auto var(--sp-3);
    border: 2px solid color-mix(in srgb, var(--c-cyan) 15%, transparent);
    border-top-color: var(--c-cyan);
    border-right-color: var(--c-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.boot-logo {
    font-family: var(--font-en); font-size: 30px; font-weight: 900;
    letter-spacing: 2px; color: var(--text-primary);
}
.boot-logo span { color: var(--c-cyan); }
.boot-text {
    font-family: var(--font-en); font-size: 12px; letter-spacing: 3px;
    color: var(--c-cyan-soft); margin: var(--sp-2) 0 var(--sp-1);
}
.boot-sub {
    font-family: var(--font-en); font-size: 10px; letter-spacing: 2px;
    color: color-mix(in srgb, var(--c-cyan) 30%, transparent); height: 14px; margin-bottom: var(--sp-1);
    transition: opacity .3s;
}
.boot-bar { width: 200px; height: 3px; background: var(--glass-bg); border-radius: var(--radius-2xs); overflow: hidden; margin: 0 auto; }
.boot-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-cyan), var(--c-purple)); transition: width .2s linear; }
.boot-percent {
    font-family: var(--font-en); font-size: 11px; letter-spacing: 2px;
    color: var(--c-cyan-soft); margin-top: 8px; opacity: 0;
    transition: opacity .3s;
}

/* ---------- 顶部导航 ---------- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    transition: background .4s var(--ease-smooth), backdrop-filter .4s, border-color .4s;
    border-bottom: 1px solid transparent;
}
.nav.scrolled {
    background: var(--bg-drawer);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--border-glass);
}
.nav-inner {
    position: relative;
    max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-3);
    height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-3);
}
.nav-logo { display: flex; align-items: center; gap: 12px; font-weight: 700; text-decoration: none; }
.logo-img {
    width: 44px; height: 44px; object-fit: contain;
    /* 海蓝发光：深底增强存在感（#40B8F0 · opacity 0.6） */
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-cyan) 55%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--c-cyan) 25%, transparent));
    transition: transform .35s var(--ease-premium), filter .35s;
}
.nav-logo:hover .logo-img {
    transform: scale(1.08) rotate(-3deg);
    /* Hover 增强：更亮 + 更广的弥散光 */
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c-cyan) 70%, transparent)) drop-shadow(0 0 28px color-mix(in srgb, var(--c-cyan) 35%, transparent));
}
.logo-wordmark { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.logo-name { font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.5px; }
.logo-accent { color: var(--c-cyan); text-shadow: 0 0 12px color-mix(in srgb, var(--c-cyan) 50%, transparent); transition: text-shadow .35s; }
.logo-tag { font-family: var(--font-en); font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.6px; }
.nav-logo:hover .logo-accent { text-shadow: 0 0 18px color-mix(in srgb, var(--c-cyan) 80%, transparent); }
.nav-links { display: flex; gap: var(--sp-3); margin-left: var(--sp-3); }
.nav-link { font-size: 15px; color: var(--text-secondary); position: relative; transition: color .3s; }
.nav-link::after {
    content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--c-cyan), var(--c-purple));
    transition: width .3s var(--ease-premium);
}
.nav-link:hover { color: var(--text-primary); }
.nav-link:hover::after { width: 100%; }
.nav-cta {
    padding: 10px 22px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 600;
    color: var(--btn-text); background: linear-gradient(100deg, var(--c-cyan), var(--c-blue));
    box-shadow: 0 0 20px color-mix(in srgb, var(--c-cyan) 35%, transparent);
}
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text-primary); border-radius: var(--radius-2xs); transition: .3s; }

/* ---------- 沉浸式 Hero 导航（通屏改造 v2） ---------- */
/* 默认透明悬浮在 Hero 上；hover 顶部 / 滚动后 出现深色毛玻璃背景条 */
body.has-hero .nav { border-bottom-color: transparent; }
/* 沉浸式 Hero 导航文字（2026-08-16）：默认按「深幕」处理 = 浅色文字（与 .hero 默认深幕配对）；
   JS 检测到浅色横幅图时给 body 加 hero-tone-light 反转为主题深色；
   滚动/悬停/展开后导航有玻璃背景，统一回到主题色（避免浅底浅字不可读） */
body.has-hero .logo-name { color: #F2F5FA; }
body.has-hero .logo-tag  { color: #93A3B8; }
body.has-hero .nav-link  { color: #C9D4E4; }
body.has-hero .nav-link:hover { color: #F2F5FA; }
body.has-hero.hero-tone-light .logo-name { color: var(--text-primary); }
body.has-hero.hero-tone-light .logo-tag  { color: var(--text-dim); }
body.has-hero.hero-tone-light .nav-link  { color: var(--text-secondary); }
body.has-hero.hero-tone-light .nav-link:hover { color: var(--text-primary); }
body.has-hero .nav:hover .logo-name,
body.has-hero .nav.nav-open .logo-name,
body.has-hero .nav.scrolled .logo-name { color: var(--text-primary); }
body.has-hero .nav:hover .logo-tag,
body.has-hero .nav.nav-open .logo-tag,
body.has-hero .nav.scrolled .logo-tag { color: var(--text-dim); }
body.has-hero .nav:hover .nav-link,
body.has-hero .nav.nav-open .nav-link,
body.has-hero .nav.scrolled .nav-link { color: var(--text-secondary); }
body.has-hero .nav:hover .nav-link:hover,
body.has-hero .nav.nav-open .nav-link:hover,
body.has-hero .nav.scrolled .nav-link:hover { color: var(--text-primary); }

body.has-hero .nav:hover,
body.has-hero .nav.nav-open,
body.has-hero .nav.scrolled {
    /* 遮罩随全局主题动态变化：暗色主题=深空玻璃，亮色主题=近白表面（与 --bg-drawer 一致），
       配合下方文字改用主题令牌，确保任何主题下滑时标题文字与遮罩保持高对比、不被吞没 */
    background: var(--bg-drawer);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom-color: var(--border-glass);
}

/* 右侧操作区：搜索图标 + 获取方案 + 汉堡 */
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-search-toggle {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--text-primary); border: 1px solid transparent;
    transition: background .25s, border-color .25s, color .25s;
}
body.has-hero .nav-search-toggle { color: var(--text-primary); }
.nav-search-toggle:hover { background: var(--surface-hover); border-color: var(--border-glass); }

/* mega-menu 导航大菜单（左列表 + 右图文预览） */
.nav-item { position: relative; }
.nav-item.has-mega > .nav-link::after { bottom: -10px; }
.nav-item.has-mega.mega-open > .nav-link::after { width: 100%; }
.nav-item.has-mega.mega-open > .nav-link { color: var(--c-cyan); }
/* 桌面端：隐藏每个导航项自带的本地 mega-menu（移动端使用） */
.nav-mega--local { display: none; }

/* 前台导航自定义外链项：↗ 图标与文字对齐、轻微淡化区分 */
.nav-item--ext > .nav-link { display: inline-flex; align-items: center; gap: 3px; }
.nav-ext-ico { width: 12px; height: 12px; opacity: .6; flex-shrink: 0; }
.nav-item--ext > .nav-link:hover .nav-ext-ico { opacity: 1; }

/* 全局 mega-menu：外框固定在导航下方，hover 导航项只切换内容；左 30% 右 70% */
.nav-mega--global {
    position: absolute; top: calc(100% + 14px); left: 0; right: 0;
    width: 100%; padding: 18px 20px;
    display: grid; grid-template-columns: 24% 38% 38%; gap: 0;
    background: var(--bg-drawer);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--border-glass); border-radius: var(--radius-lg);
    box-shadow: 0 24px 56px var(--drawer-shadow);
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 1100;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease-premium), transform .25s var(--ease-premium), visibility .25s;
}
/* 悬停桥接：填补 nav-link 与面板之间的 14px 缝隙，避免鼠标下移到面板途中触发隐藏 */
.nav-mega--global::before {
    content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
}
.nav-mega--global.is-active {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nm-list { display: flex; flex-direction: column; gap: 4px; grid-column: 1; grid-row: 1; }
.nm-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.nm-item:hover, .nm-item.active { background: color-mix(in srgb, var(--c-cyan) 12%, transparent); border-color: color-mix(in srgb, var(--c-cyan) 35%, transparent); }
.nmi-label { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.nmi-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

/* 右侧图文预览面板 */
.nm-preview { position: relative; grid-column: 2 / 4; }  /* 非分组态：跨右两栏填满 */
.nav-mega--global.is-grouped .nm-preview { grid-column: 3; }
.nav-mega--global.is-grouped .nm-children { grid-column: 2; display: flex; }
.nm-preview-inner {
    position: sticky; top: 0; display: flex; flex-direction: column; height: 100%;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c-cyan) 10%, transparent), color-mix(in srgb, var(--c-purple) 8%, transparent));
    border: 1px solid var(--border-glass); border-radius: var(--radius-md); overflow: hidden;
}
.nm-preview-media { position: relative; aspect-ratio: 16 / 9; background: var(--glass-bg); overflow: hidden; }
.nm-preview-img { width: 100%; height: 100%; object-fit: cover; display: none; opacity: 0; transition: opacity .35s var(--ease-premium); }
.nm-preview-img.show { display: block; opacity: 1; }
.nm-preview-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(120px 80px at 30% 30%, color-mix(in srgb, var(--c-cyan) 25%, transparent), transparent 70%),
      radial-gradient(140px 100px at 75% 70%, color-mix(in srgb, var(--c-purple) 22%, transparent), transparent 70%),
      var(--bg-drawer);
}
.nm-preview-ph.hide { display: none; }
.nm-preview-ph svg { width: 54px; height: 54px; opacity: .5; color: var(--c-cyan); }
.nm-preview-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nm-preview-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.nm-preview-desc { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); flex: 1; }
.nm-preview-link {
    align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--c-cyan); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; transition: gap .2s;
}
.nm-preview-link:hover { gap: 10px; }

/* mega 分组态：右侧 L3 业务矩阵网格（与单图预览同处第 2 列） */
.nm-children { display: none; grid-row: 1; flex-direction: column; gap: 4px; align-content: start; max-height: 480px; overflow: auto; padding-right: 4px; }
.nm-child {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
    text-decoration: none; border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.nm-child:hover { background: color-mix(in srgb, var(--c-cyan) 12%, transparent); border-color: color-mix(in srgb, var(--c-cyan) 35%, transparent); }
.nm-child__icon { font-size: 18px; line-height: 1.3; color: var(--c-cyan); flex: none; }
.nm-child__body { display: flex; flex-direction: column; gap: 2px; }
.nm-child__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.nm-child__desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

/* 解决方案频道：面包屑（Hero 内） */
.hero-breadcrumb {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 14px 0 0; font-size: 13px; color: color-mix(in srgb, var(--text-primary) 80%, transparent);
}
.hero-breadcrumb a { color: color-mix(in srgb, var(--text-primary) 80%, transparent); text-decoration: none; }
.hero-breadcrumb a:hover { color: var(--c-cyan); }
.hero-breadcrumb .sep { opacity: .5; }
.hero-breadcrumb .cur { color: var(--c-cyan); font-weight: 600; }

/* L3 详情页：现代商务风正文 960px 居中（覆盖 .container 的 1440 宽度） */
.container.solution-article { max-width: 960px; }
.solution-article .about-text { font-size: 16px; line-height: 1.8; color: var(--text-primary); }
.solution-article .about-text img { max-width: 100%; height: auto; border-radius: 10px; }
.solution-article .about-text figure { margin: var(--sp-4) 0; }
/* 2026-08-21 修复：正文单图限宽居中（原 width:100% 令 1024² 方形图撑满 960px 容器 ≈ 一屏）；
   限 620px 居中、不限高不裁切；移动端 min(620px,100%) 自动收窄无溢出 */
.solution-article .about-text figure img { display: block; max-width: min(620px, 100%); width: auto; height: auto; margin: 0 auto; border-radius: 10px; }
.solution-article .about-text figcaption { margin-top: 8px; font-size: 13px; color: var(--text-secondary); text-align: center; }
/* 正文图文并列行（尺寸贴合 1280px 内容区） */
.solution-article .about-text .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-4) 0; align-items: center; }
@media (max-width: 760px) { .solution-article .about-text .grid-2 { grid-template-columns: 1fr; } }
.solution-article .about-text h2 { font-size: 26px; margin: var(--sp-5) 0 var(--sp-3); padding-bottom: 10px; border-bottom: 2px solid var(--c-cyan); color: var(--text-primary); }
.solution-article .about-text h3 { font-size: 19px; margin: var(--sp-4) 0 var(--sp-2); color: var(--text-primary); }
.solution-article .about-text ul { margin: 0 0 var(--sp-3) 1.4em; }
.solution-article .about-text li { margin-bottom: 8px; color: var(--text-secondary); }
.solution-article .about-text li strong { color: var(--c-cyan); }
.solution-article .about-text .about-lead { font-size: 17px; color: var(--text-primary); margin-bottom: var(--sp-3); }
.solution-article .about-text .note-tip { margin-top: var(--sp-4); padding: 12px 16px; background: color-mix(in srgb, var(--c-amber, #f0b400) 6%, transparent); border-left: 4px solid var(--c-amber, #f0b400); border-radius: 0 8px 8px 0; color: var(--text-secondary); font-size: 13px; }
.solution-article blockquote { border-left: 4px solid var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 5%, transparent); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; color: var(--text-secondary); }

/* L2 结构页：动态文章网格 */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.article-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.article-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--glass-bg); overflow: hidden; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-thumb-ph { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--c-cyan) 18%, transparent), color-mix(in srgb, var(--c-purple) 16%, transparent)); }
.article-type { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 600; color: #fff; background: color-mix(in srgb, var(--c-cyan) 75%, #000); padding: 2px 8px; border-radius: var(--radius-pill); }
.article-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.article-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
.article-meta { font-size: 12px; color: var(--text-secondary); }
.section-more { margin-top: 24px; text-align: center; }

/* L3 详情页：相关案例 / 资讯 */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.similar-card-cover { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 10px; }
.similar-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.news-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-glass); }
.news-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--border-glass); text-decoration: none; color: var(--text-primary); transition: color .2s; }
.news-list-item:hover { color: var(--c-cyan); }
.news-list-date { font-size: 13px; color: var(--text-secondary); flex: none; width: 96px; }
.news-list-title { flex: 1; font-size: 15px; }
.news-list-arrow { color: var(--c-cyan); }

/* 解决方案总览（L1）：按 L2 分组 */
.matrix-group { margin-bottom: 48px; }
.matrix-group__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.matrix-group__title { margin: 0; font-size: 22px; font-weight: 700; }
.matrix-group__title a { color: var(--text-primary); text-decoration: none; }
.matrix-group__title a:hover { color: var(--c-cyan); }
.matrix-group__title .arrow { font-size: 16px; color: var(--c-cyan); }
.matrix-group__desc { margin: 0; font-size: 14px; color: var(--text-secondary); }

@media (max-width: 900px) {
    .article-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .article-grid, .related-grid { grid-template-columns: 1fr; }
    .nm-children { grid-template-columns: 1fr; }
}

/* 搜索滑出面板 */
.search-panel {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1200;
    background: var(--bg-drawer);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid var(--border-glass);
    transform: translateY(-100%);
    transition: transform .4s var(--ease-premium);
}
.search-panel.open { transform: translateY(0); }
.search-form { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 22px var(--sp-3); display: flex; gap: 12px; align-items: center; }
.search-form input[type="search"] {
    flex: 1; height: 52px; padding: 0 20px; font-size: 16px; color: var(--text-primary);
    background: var(--glass-bg); border: 1px solid var(--border-glass); border-radius: 12px; outline: none;
    transition: border-color .25s;
}
.search-form input[type="search"]::placeholder { color: var(--text-dim); }
.search-form input[type="search"]:focus { border-color: var(--c-cyan); }
.search-submit {
    height: 52px; padding: 0 28px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--btn-text);
    background: linear-gradient(100deg, var(--c-cyan), var(--c-blue)); cursor: pointer; white-space: nowrap;
}
.search-close {
    position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; font-size: 24px; color: var(--text-secondary); border-radius: 50%;
}
.search-close:hover { color: var(--text-primary); background: var(--surface-hover); }

/* ---------- 搜索联想下拉 ---------- */
/* 2026-08-23：背景/边框/阴影改用主题令牌，使下拉面板跟随深浅主题自动保持高对比可读 */
.search-suggest {
    position: absolute; left: var(--sp-3); right: var(--sp-3); top: calc(100% - 6px);
    background: var(--bg-drawer);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border-glass);
    border-radius: 16px; box-shadow: 0 24px 60px var(--drawer-shadow);
    max-height: min(60vh, 460px); overflow-y: auto; padding: 10px; z-index: 60;
    animation: ssIn .18s var(--ease-premium);
}
.search-suggest[hidden] { display: none; }
@keyframes ssIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ss-group { padding: 10px 12px 6px; }
.ss-group-label {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
    color: var(--c-cyan); opacity: .85;
}
.ss-item {
    display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
    color: var(--text-primary); border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.ss-item + .ss-item { margin-top: 2px; }
.ss-item:hover, .ss-item.is-active {
    background: var(--surface-hover);
    border-color: var(--border-glass);
}
.ss-title { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ss-desc {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4;
}
.ss-path {
    display: block; font-size: 11px; color: var(--text-dim); margin-top: 4px;
    font-family: var(--font-mono, ui-monospace, monospace); word-break: break-all;
}
.ss-empty { padding: 16px 12px; color: var(--text-secondary); font-size: 13px; text-align: center; }
.ss-more {
    display: block; margin-top: 6px; padding: 11px 12px; text-align: center; text-decoration: none;
    font-size: 13px; font-weight: 600; color: var(--c-cyan);
    border-top: 1px solid var(--border-glass); border-radius: 0 0 10px 10px;
}
.ss-more:hover { background: var(--surface-hover); }

/* ---------- Hero 首屏 ---------- */
.hero {
    --hero-accent: var(--c-cyan);
    --hero-accent-2: var(--c-purple);
    position: relative; min-height: 100vh; display: flex; align-items: center;
    overflow: hidden; padding: 120px 0 80px;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-grid {
    position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1;
    background-image:
        linear-gradient(color-mix(in srgb, var(--c-cyan) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--c-cyan) 12%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(420px) rotateX(62deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(to top, #000 0%, transparent 90%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%);
    opacity: .5;
}
.hero-scan {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, color-mix(in srgb, var(--c-cyan) 2.5%, transparent) 4px);
}
.hero-content { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-3); width: 100%; }
/* 2026-08-15 五次增强·4.0：字体栈修正——中文走系统黑体（--font-cn），英文走 Orbitron（--font-en），
   避免中文字形回退到无衬线默认体与英文科技字体混排不统一。 */
.hero-badge {
    display: inline-block; font-family: var(--font-en), var(--font-cn); font-size: 13px; letter-spacing: 2px;
    color: var(--c-contrast); padding: 8px 18px; border-radius: var(--radius-btn);
    border: 1px solid hsl(22 90% 62% / .5); background: hsl(22 90% 62% / .08);
    margin-bottom: var(--sp-3);
}
.hero-title { font-family: var(--font-en), var(--font-cn); font-size: clamp(36px, 8vw, 96px); font-weight: 900; line-height: 1.08; letter-spacing: 1px; }
/* 所有页面 Hero 标题强制单行，超出省略号（首页 + 子页统一） */
.hero-title .line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hero .gradient-text {
    background: linear-gradient(100deg, var(--hero-accent) 0%, var(--hero-accent-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub { margin: var(--sp-3) 0 var(--sp-4); color: var(--text-secondary); font-size: clamp(15px, 2vw, 19px); font-family: var(--font-en), var(--font-cn); letter-spacing: 1px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hero-sub br { display: none; }
.hero-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hero-scroll {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2;
    text-align: center; color: var(--text-secondary); font-size: 12px; letter-spacing: 2px;
}
.scroll-arrow { display: block; width: 2px; height: 28px; margin: 10px auto 0; background: linear-gradient(var(--hero-accent), transparent); animation: scrollPulse 1.8s infinite; }

/* Hero 全屏轮播（carousel 模式：后台切换粒子 → 实景轮播图） */
.hero-carousel { position: absolute; inset: 0; z-index: 0; }
.hc-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.2s var(--ease-smooth);
}
.hc-slide.active { opacity: 1; }
.hc-slide::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--bg-cosmos) 80%, transparent) 0%, color-mix(in srgb, var(--bg-cosmos) 42%, transparent) 48%, color-mix(in srgb, var(--bg-cosmos) 12%, transparent) 100%);
}
.hc-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; }
.hc-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--glass-bg); cursor: pointer; transition: background .3s, width .3s; }
.hc-dots .dot.active { background: var(--c-cyan); width: 26px; border-radius: 6px; }
.hero[data-hero-mode="carousel"] .hero-canvas { display: none; }
/* 2026-08-15 四次增强·4.0.6：视频背景 + 轮播切换效果 */
.hero[data-hero-content="video"] .hero-canvas { display: none; }
.hero-video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-carousel { perspective: 1200px; }
.hero-carousel[data-transition="slide"] .hc-slide,
.hero-carousel[data-transition="cube"] .hc-slide,
.hero-carousel[data-transition="zoom"] .hc-slide {
    opacity: 1; will-change: transform, opacity; backface-visibility: hidden;
}
.hero-carousel[data-transition="cube"] .hc-slide { transform-style: preserve-3d; }

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 32px; border-radius: var(--radius-btn); font-size: 15px; font-weight: 600;
    transition: transform .3s var(--ease-premium), box-shadow .3s, background .3s;
    will-change: transform;
}
.btn-primary {
    color: var(--btn-text); background: linear-gradient(100deg, var(--c-cyan), var(--c-blue));
    box-shadow: 0 0 24px color-mix(in srgb, var(--c-cyan) 40%, transparent);
}
.btn-primary:hover { box-shadow: 0 0 36px color-mix(in srgb, var(--c-cyan) 65%, transparent); }
.btn-primary:active { transform: translateY(2px) scale(0.98); box-shadow: 0 0 14px color-mix(in srgb, var(--c-cyan) 35%, transparent); }
.btn:disabled { opacity: .65; cursor: not-allowed; }
.btn-ghost {
    color: var(--text-primary); border: 1px solid var(--border-glow);
    background: color-mix(in srgb, var(--c-cyan) 5%, transparent);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--c-cyan) 12%, transparent); border-color: var(--c-cyan); }

/* ---------- 数据速览 ---------- */
.stats { padding: var(--sp-5) 0; position: relative; z-index: 3; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.stat-card { padding: var(--sp-4) var(--sp-3); text-align: center; }
/* 数据速览"数字喘息点"：去掉玻璃卡、用细分隔线，与下方玻璃卡片形成强弱节奏对比 */
.stat-card.glass {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: var(--sp-3) var(--sp-2);
}
.stat-card + .stat-card { border-left: 1px solid var(--border-glass); padding-left: var(--sp-3); }
@media (max-width: 420px) {
    .stat-card + .stat-card { border-left: none; padding-left: 0; }
}
.stat-num {
    font-family: var(--font-en); font-size: clamp(34px, 5vw, 54px); font-weight: 900;
    background: linear-gradient(100deg, var(--c-cyan), var(--c-purple));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    line-height: 1;
}
.stat-label { color: var(--text-secondary); margin-top: var(--sp-1); font-size: 14px; }

/* ---------- 每日一言 ---------- */
.daily-quote { padding: var(--sp-4) 0; }
.quote-bar {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-lg);
    border-left: 3px solid var(--c-cyan);
    max-width: 860px; margin: 0 auto;
}
.quote-icon {
    font-size: 28px; color: var(--c-cyan);
    text-shadow: 0 0 16px color-mix(in srgb, var(--c-cyan) 40%, transparent);
    line-height: 1; animation: float 3s ease-in-out infinite;
}
.quote-text {
    font-size: 15px; color: var(--text-primary);
    letter-spacing: 0.5px; line-height: 1.6;
    font-style: italic;
}

/* ---------- 关于大成汇（首页简介） ---------- */
.about-intro { padding: var(--sp-7) 0; }
.about-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--sp-5);
    align-items: start;
}
.about-text .section-tag { margin-bottom: var(--sp-2); }
.about-text .section-title { margin-bottom: var(--sp-3); }
.about-lead {
    font-size: 17px; color: var(--text-primary); line-height: 1.8;
    margin-bottom: var(--sp-3);
}
.about-text p {
    color: var(--text-secondary); line-height: 1.9;
    margin-bottom: var(--sp-3); font-size: 15px;
}
.about-text strong { color: var(--c-cyan); }
.about-vision {
    padding: var(--sp-4); border-radius: var(--radius-lg);
    position: sticky; top: 92px;
}
.about-vision h3 {
    font-size: 18px; margin-bottom: var(--sp-3);
    background: linear-gradient(90deg, var(--c-cyan), var(--c-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.culture-items { display: flex; flex-direction: column; gap: var(--sp-3); }
.culture-item {
    display: flex; gap: var(--sp-2); align-items: flex-start;
}
.culture-icon {
    font-size: 24px; line-height: 1;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-cyan) 40%, transparent));
    flex-shrink: 0; margin-top: 2px;
}
.culture-item strong {
    display: block; font-size: 15px; color: var(--text-primary); margin-bottom: 4px;
}
.culture-item p {
    font-size: 13px; color: var(--text-secondary); line-height: 1.7;
    margin: 0;
}

/* ---------- 业务矩阵 ---------- */
.biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.biz-card {
    padding: var(--sp-3); border-radius: var(--radius-md);
    transition: transform .4s var(--ease-premium), border-color .4s, box-shadow .4s;
    position: relative; overflow: hidden;
}
.biz-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--c-cyan) 12%, transparent), transparent 45%);
    opacity: 0; transition: opacity .4s;
}
.biz-card:hover { transform: translateY(-6px); border-color: var(--border-glow); box-shadow: 0 12px 40px color-mix(in srgb, var(--c-cyan) 18%, transparent); }
.biz-card:hover::before { opacity: 1; }
.biz-icon {
    display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
    font-size: 24px; border-radius: 14px; margin-top: var(--sp-2); margin-bottom: var(--sp-2);
    background: color-mix(in srgb, var(--c-cyan) 10%, transparent); color: var(--c-cyan);
    box-shadow: inset 0 0 16px color-mix(in srgb, var(--c-cyan) 15%, transparent);
}
.biz-icon svg { width: 26px; height: 26px; display: block; }
.biz-card h3 { font-size: 18px; margin-bottom: 6px; }
/* 解决方案卡片标题：强制单行（超出省略号），仅作用于 solutions 模块，不影响首页等其他 biz-card */
.biz-card h3.biz-card__title--single { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.biz-card p { color: var(--text-secondary); font-size: var(--fs-md); line-height: 1.6; }

/* ---------- 解决方案 ---------- */
.sol-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.sol-card { overflow: hidden; border-radius: var(--radius-lg); transition: transform .4s var(--ease-premium), box-shadow .4s; }
.sol-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.sol-img { height: 190px; position: relative; overflow: hidden; transform: scale(1); transition: transform .5s var(--ease-premium); }
.sol-card:hover .sol-img { transform: scale(1.06); }
.sol-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-cosmos) 62%, transparent)); }
.sol-img-1 { background: linear-gradient(135deg, #0e7490, #155e75), radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c-cyan) 50%, transparent), transparent 50%); background-blend-mode: screen; }
.sol-img-2 { background: linear-gradient(135deg, #4338ca, #1e3a8a), radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--c-purple) 50%, transparent), transparent 50%); background-blend-mode: screen; }
.sol-img-3 { background: linear-gradient(135deg, #047857, #065f46), radial-gradient(circle at 60% 40%, rgba(16,185,129,0.5), transparent 50%); background-blend-mode: screen; }
.sol-body { padding: var(--sp-3); }
.sol-cat { font-family: var(--font-en); font-size: 12px; letter-spacing: 2px; color: var(--c-cyan); }
.sol-body h3 { font-size: 20px; margin: 8px 0; }
.sol-body p { color: var(--text-secondary); font-size: 14px; margin-bottom: var(--sp-2); }
.sol-more { color: var(--c-cyan-soft); font-size: 14px; font-weight: 600; }

/* ---------- 案例 ---------- */
/* 2026-08-21 案例卡片已统一复用资讯 news-card 方块（见 components.css ~1817 行） */
/* 旧 .case-row/.case-card/.case-img/.case-meta 死代码已清理 */

/* ---------- 相似内容推荐（SS-04） ---------- */
.similar-section { padding: var(--sp-6) 0 var(--sp-4); }
.similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.similar-card {
    background: var(--glass-bg, rgba(255,255,255,0.04)); border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: var(--radius-lg, 12px); padding: var(--sp-4); transition: transform .25s, border-color .25s;
    text-decoration: none; color: inherit; display: block;
}
.similar-card:hover { transform: translateY(-4px); border-color: var(--accent, #40b8f0); }
.similar-card-title { font-size: 1rem; font-weight: 600; margin-bottom: var(--sp-1); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.similar-card-desc { font-size: .85rem; opacity: .7; margin-bottom: var(--sp-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.similar-card-meta { font-size: .78rem; opacity: .5; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.similar-card-tags { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); }
.similar-card-tag { font-size: .72rem; padding: 1px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-cyan) 12%, transparent); color: var(--accent, #40b8f0); }

/* 精选导读 · 图文混排（mixed）布局 */
.featured-mixed { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4); align-items: stretch; }
.fm-hero { display: flex; flex-direction: column; overflow: hidden; }
.fm-hero-cover { aspect-ratio: 16 / 9; overflow: hidden; }
.fm-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.fm-hero-body { padding: var(--sp-4); }
.fm-hero-kind { font-size: .72rem; color: var(--accent, #40b8f0); text-transform: uppercase; letter-spacing: 1px; }
.fm-hero-body h3 { font-size: 1.3rem; margin: 6px 0; line-height: 1.4; }
.fm-hero-body p { opacity: .7; font-size: .9rem; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fm-hero-date { font-size: .78rem; opacity: .5; }
.fm-side { display: flex; flex-direction: column; }
.fm-side-item { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border-glass); text-decoration: none; color: var(--text-primary); transition: color .2s; }
.fm-side-item:hover { color: var(--c-cyan); }
.fm-side-date { font-size: 13px; color: var(--text-secondary); flex: none; width: 84px; }
.fm-side-title { flex: 1; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-side-arrow { color: var(--c-cyan); }
@media (max-width: 768px) { .featured-mixed { grid-template-columns: 1fr; } }

/* 后台 · 文章布局人工精选勾选器 */
.art-manual-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; max-height: 420px; overflow: auto; padding: 2px; }
.art-manual-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: 8px; background: rgba(255,255,255,.03); cursor: pointer; font-size: 13px; }
.art-manual-item input { flex: none; }
.art-manual-cover { width: 40px; height: 30px; object-fit: cover; border-radius: var(--radius-xs); flex: none; }
.art-manual-kind { font-size: 11px; color: var(--accent, #40b8f0); flex: none; }
.art-manual-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- CTA ---------- */
.cta { padding: var(--sp-5) 0; position: relative; overflow: hidden; }
.cta-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 760px; height: 760px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c-cyan) 22%, transparent), transparent 60%);
    filter: blur(50px); pointer-events: none;
}
.cta-inner { position: relative; z-index: 2; text-align: center; }
.cta-inner::after {
    content: "24/7";
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-family: var(--font-en); font-weight: 800;
    font-size: clamp(96px, 16vw, 200px);
    color: color-mix(in srgb, var(--c-cyan) 7%, transparent);
    pointer-events: none; z-index: -1; white-space: nowrap;
}
.cta-eyebrow {
    display: inline-block; margin-bottom: var(--sp-2);
    font-family: var(--font-en); font-size: 13px; letter-spacing: 3px;
    color: var(--c-cyan); text-transform: uppercase;
}
.cta-inner h2 { font-size: clamp(26px, 4vw, 40px); margin-bottom: var(--sp-4); }
.cta-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.cta-trust {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: var(--sp-3); margin-top: var(--sp-5);
}
.cta-trust-item {
    display: inline-flex; align-items: baseline; gap: 6px;
    color: var(--text-secondary); font-size: 14px;
}
.cta-trust-item b {
    color: var(--c-cyan); font-family: var(--font-en); font-size: 20px; font-weight: 700;
}

/* ---------- 页脚 ---------- */
.footer { border-top: 2px solid var(--border-glass); box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--c-cyan) 12%, transparent); padding: var(--sp-6) 0 12px; background: var(--bg-drawer); }
.footer-inner { display: grid; grid-template-columns: 1.3fr 0.9fr 1fr 1fr 0.9fr; gap: var(--sp-4); }
.footer-logo { font-size: 22px; font-weight: 700; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 10px; }
.footer-logo-img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-cyan) 45%, transparent)); }
.footer-desc { color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.footer-col h4 { font-size: 15px; margin-bottom: var(--sp-2); color: var(--text-primary); }
.footer-col a, .footer-col p { display: block; color: var(--text-secondary); font-size: 14px; margin-bottom: 10px; transition: color .3s; }
.footer-col a:hover { color: var(--c-cyan); }
.footer-col a.active { color: var(--c-cyan); font-weight: 600; }
/* 联系方式增强 */
.footer-contact p { display: flex; align-items: flex-start; gap: 8px; line-height: 1.6; }
.footer-contact span { flex-shrink: 0; width: 18px; text-align: center; }
/* 扫码关注（公众号二维码） */
.footer-qr-link { display: inline-block; margin-bottom: 10px; }
.footer-qr-img { width: 128px; height: 128px; object-fit: contain; background: #fff; border-radius: var(--radius-md); padding: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .3s, box-shadow .3s; }
.footer-qr-link:hover .footer-qr-img { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--c-cyan) 25%, rgba(0,0,0,.25)); }
.footer-qr-tip { color: var(--text-secondary); font-size: 13px; line-height: 1.6; max-width: 180px; }
.footer-bottom {
    max-width: var(--maxw); margin: 8px auto 0; padding: 14px var(--sp-3) 16px;
    border-top: 1px solid var(--border-glass);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-dim); font-size: 13px;
}
.fb-copyright {
    font-weight: 600; color: var(--text-secondary); letter-spacing: .3px;
}
.fb-links {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
    color: var(--text-dim);
}
.fb-links a { color: var(--text-dim); transition: color .25s; }
.fb-links a:hover { color: var(--c-cyan); }
.fb-link-btn {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--text-dim);
    cursor: pointer;
    transition: color .25s;
}
.fb-link-btn:hover { color: var(--c-cyan); }
.fb-sep { opacity: .4; user-select: none; }
.footer-bottom .icp-link { color: var(--text-dim); transition: color .3s; }
.footer-bottom .icp-link:hover { color: var(--c-cyan); }

/* 服务器时间（公历 + 农历） */
.footer-server-time {
    max-width: var(--maxw); margin: 8px auto 0; padding: 8px var(--sp-3);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px;
    color: var(--text-secondary); font-size: 13px; text-align: center;
    font-family: var(--font-en); letter-spacing: .5px;
}
.server-time-line { display: inline-flex; align-items: center; gap: 8px; }
.server-time-line b { color: var(--c-cyan); font-weight: 600; }
.server-time-line .st-clock { color: var(--c-cyan); font-variant-numeric: tabular-nums; min-width: 64px; }
.server-time-sep { color: var(--border-glass); opacity: .6; }

/* 底部滚动文言（行业格言轮播） */
.footer-marquee {
    position: relative; overflow: hidden;
    max-width: var(--maxw); margin: 16px auto 8px; padding: 14px 0;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
    display: flex; gap: 56px; width: max-content;
    animation: marqueeScroll 50s linear infinite;
}
.marquee-track span {
    white-space: nowrap; color: var(--text-secondary); font-size: 13px; opacity: .85;
    position: relative;
}
.marquee-track span::before {
    content: "◆"; margin-right: 14px; color: var(--c-cyan); opacity: .5; font-size: 10px;
}
.footer-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ICP 备案官方查询链接 */
.icp-link { color: var(--text-dim); transition: color .25s; }
.icp-link:hover { color: var(--c-cyan); }

/* ---------- 侧边悬浮工具 ---------- */
/* 统一悬浮图标栈：右下角五个图标（AI 助手/联系/电话/主题/回到顶部）共用的容器，
   垂直 flex 排列 + 12px 等间距；主题图标通过 JS 增删 DOM 实现显隐，
   其余图标由 flex 自动等距重排（4 或 5 个均对齐）。 */
.float-stack {
    position: fixed; right: 20px;
    bottom: calc(var(--consent-bar-height, 0px) + 24px);
    z-index: 9000;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    transition: bottom .35s ease;
}
/* 兼容旧标记：若仍用 .side-tools 包裹，则将其子项提升为栈的直接 flex 子项 */
.side-tools { display: contents; }

/* ---------- 前台 Cookie 合规同意吸底横幅 ---------- */
.consent-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9400;
    display: flex; justify-content: center;
    padding: 0;
    background: var(--bg-drawer); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-glass);
    box-shadow: 0 -8px 34px var(--drawer-shadow);
    transform: translateY(100%);
    opacity: 0; visibility: hidden;
    transition: transform .4s var(--ease-premium), opacity .4s, visibility .4s;
}
.consent-banner[hidden] { display: none; }
.consent-banner.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
.consent-banner .cb-inner {
    width: 100%; max-width: var(--maxw);
    display: flex; align-items: center; gap: var(--sp-4);
    margin: 0 auto; padding: var(--sp-3);
}
.consent-banner .cb-text { flex: 1 1 auto; min-width: 0; }
.consent-banner .cb-desc {
    margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-secondary);
}
.consent-banner .cb-desc a { color: var(--c-cyan); text-decoration: underline; text-underline-offset: 2px; }
.consent-banner .cb-desc a:hover { color: var(--c-cyan-soft); }
.consent-banner .cb-actions {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
}
.consent-banner .cb-btn { white-space: nowrap; }

/* ---------- Cookie 设置面板（吸底条「Cookie 设置」展开，复刻老版选项卡） ---------- */
.cookie-settings-panel {
    position: fixed; inset: 0; z-index: 9600;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-3);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease-smooth), visibility .35s;
}
/* 不使用 display:none 切换显隐：display:none↔flex 与子元素 backdrop-filter 配合会触发
   合成层重绘 bug（典型症状：弹窗内容显示不全，需切到其它窗口再切回才完整出现）。
   改为始终保留在渲染树中，仅用 visibility/opacity/pointer-events 控制显隐即可规避。 */
.cookie-settings-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.cookie-settings-panel .csp-backdrop {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg-drawer) 65%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cookie-settings-panel .csp-card {
    position: relative;
    width: 100%;
    max-width: 1080px;            /* 宽屏 16:9 */
    aspect-ratio: 16 / 9;
    max-height: 86vh; min-height: 540px;
    display: flex; flex-direction: column;
    padding: var(--sp-4) var(--sp-5) var(--sp-4);
    background: var(--bg-drawer); /* 与全局模态一致的不透明底 */
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow:
        0 40px 90px -20px var(--drawer-shadow),
        0 14px 32px -10px var(--drawer-shadow),
        inset 0 1px 0 var(--border-glass);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    transform: translateY(16px) scale(.96);
    transition: transform .4s var(--ease-premium), opacity .4s;
}
.cookie-settings-panel.is-open .csp-card { transform: translateY(0) scale(1); }
/* 标题区：标题 + 副标题一行 */
.cookie-settings-panel .csp-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    margin-bottom: var(--sp-2); padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-glass);
    flex: 0 0 auto;
}
.cookie-settings-panel .csp-title {
    margin: 0;
    font-size: 18px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .02em;
}
.cookie-settings-panel .csp-subtitle {
    margin: 0;
    font-size: 12px; color: var(--text-dim);
    white-space: nowrap;
}
/* 上下布局：tabs 顶部横排 + 内容在下方 */
.cookie-settings-panel .csp-body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: var(--sp-2);
}
/* 顶部横排 tabs */
.cookie-settings-panel .csp-tabs {
    flex: 0 0 auto;
    display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border-glass);
    border-right: none;
    padding: 0 0 var(--sp-1) 0;
    margin-bottom: 0;
    overflow-y: visible;
}
.cookie-settings-panel .csp-tab {
    appearance: none; background: transparent; border: none;
    padding: 7px 12px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-tertiary);
    border-left: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    border-radius: 0;
    text-align: left;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.cookie-settings-panel .csp-tab:hover { color: var(--text-secondary); background: transparent; }
.cookie-settings-panel .csp-tab.is-active {
    color: var(--c-cyan);
    border-bottom-color: var(--c-cyan);
    border-left-color: transparent;
    background: transparent;
}
/* 下方内容区 */
.cookie-settings-panel .csp-panels {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: var(--sp-1) var(--sp-1);
}
.cookie-settings-panel .csp-panel { display: none; }
.cookie-settings-panel .csp-panel.is-active { display: block; }
.cookie-settings-panel .csp-cat-desc {
    font-size: var(--fs-md); line-height: 1.75; color: var(--text-secondary); margin: 0 0 14px;
}
.cookie-settings-panel .csp-cat-desc strong { color: var(--text-primary); }
.cookie-settings-panel .csp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-glass); border-radius: var(--radius-md);
    background: var(--bg-elevated);
}
.cookie-settings-panel .csp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cookie-settings-panel .csp-table thead th {
    background: var(--bg-secondary); color: var(--text-dim);
    font-weight: 600; font-size: 12px; letter-spacing: .04em; text-align: left;
    padding: 10px 14px; border-bottom: 1px solid var(--border-glass); white-space: nowrap;
}
.cookie-settings-panel .csp-table tbody td {
    padding: 10px 14px; border-bottom: 1px solid var(--hairline);
    color: var(--text-secondary); vertical-align: top; line-height: 1.6;
}
.cookie-settings-panel .csp-table tbody tr:last-child td { border-bottom: none; }
.cookie-settings-panel .csp-table tbody tr:hover td { background: var(--surface-hover); }
.cookie-settings-panel .csp-name {
    font-family: var(--font-en), 'SF Mono', Consolas, monospace;
    font-size: var(--fs-sm); color: var(--c-cyan); white-space: nowrap;
}
.cookie-settings-panel .csp-life { white-space: nowrap; font-size: var(--fs-sm); color: var(--text-dim); }
.cookie-settings-panel .csp-footer {
    display: flex; gap: 12px; justify-content: flex-end;
    margin-top: var(--sp-4); padding-top: var(--sp-3);
    border-top: 1px solid var(--border-glass);
    flex: 0 0 auto;
}
@media (max-width: 900px) {
    /* 弹窗：放弃 16:9，卡片铺满 */
    .cookie-settings-panel .csp-card {
        aspect-ratio: auto;
        min-height: 0;
        max-width: 100%;
        max-height: 90vh;
        padding: var(--sp-4);
    }
    /* 标题与副标题堆叠，给关闭按钮让位 */
    .cookie-settings-panel .csp-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 22px 36px 0 0;
    }
    .cookie-settings-panel .csp-subtitle { white-space: normal; }
    .cookie-settings-panel .csp-close { top: 10px; right: 10px; }
    .cookie-settings-panel .csp-panels { padding: var(--sp-1) var(--sp-1); }
    .cookie-settings-panel .csp-footer { flex-direction: column-reverse; }
    .cookie-settings-panel .csp-footer .btn { width: 100%; justify-content: center; }
}
@media (max-width: 720px) {
    .consent-banner { padding: 0; }
    .consent-banner .cb-inner { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .consent-banner .cb-actions { justify-content: stretch; }
    .consent-banner .cb-actions .cb-btn { flex: 1 1 auto; justify-content: center; }
}
.side-tool {
    width: 46px; height: 46px; border-radius: 50%; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-drawer); backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass); color: var(--text-primary);
    transition: transform .3s var(--ease-premium), border-color .3s, box-shadow .3s;
}
.side-tool svg { width: 20px; height: 20px; display: block; }
.side-tool:hover { transform: scale(1.1); border-color: var(--c-cyan); box-shadow: 0 0 18px color-mix(in srgb, var(--c-cyan) 40%, transparent); }

/* ---------- 语言切换图标双语提示（英文界面时显示在图标左侧） ---------- */
.lang-fab { position: relative; overflow: visible; text-decoration: none; }
.lang-fab-tip {
    position: absolute; right: 56px; top: 50%;
    transform: translateY(-50%) translateX(8px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    padding: 9px 13px; border-radius: 12px;
    background: var(--bg-drawer); backdrop-filter: blur(12px);
    border: 1px solid transparent;
    /* 主题色渐变描边 + 柔和投影 */
    background-image: linear-gradient(var(--bg-drawer), var(--bg-drawer)),
                      linear-gradient(135deg, var(--c-cyan, #38bdf8), var(--c-blue, #6366f1));
    background-origin: border-box; background-clip: padding-box, border-box;
    box-shadow: var(--drawer-shadow), 0 0 14px color-mix(in srgb, var(--c-cyan, #38bdf8) 22%, transparent);
    color: var(--text-primary); font-size: 12.5px; line-height: 1.4;
    white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
/* 由 JS 控制显示（每页面只提醒一次 + 10s 无操作自动隐藏） */
.lang-fab-tip.show { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.lang-fab-tip-en { font-weight: 700; letter-spacing: .2px; color: var(--text-primary); }
.lang-fab-tip-zh { font-size: 11px; color: var(--text-dim); }
.lang-fab-tip-dot {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-cyan, #38bdf8), var(--c-blue, #6366f1));
    box-shadow: 0 0 8px color-mix(in srgb, var(--c-cyan, #38bdf8) 70%, transparent);
    animation: langTipBlink 1.8s ease-in-out infinite;
}
@keyframes langTipBlink {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}
.lang-fab-tip::after {
    content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-left-color: var(--bg-drawer);
}
@media (prefers-reduced-motion: reduce) {
    .lang-fab-tip-dot { animation: none; }
}

/* ===================================================================
   企业介绍页专属样式（about.html）
   =================================================================== */

/* ---- 页面 Hero（子页面版）：占满一屏，下方内容滚动才出现 ---- */
.hero-page {
    min-height: 100vh; min-height: 100dvh;
    /* 收缩后高度：默认响应式 clamp(76,11vh,132)；hero-collapse.js 会按后台配置 hca_hero_collapsed_height 覆盖为固定 px */
    --hero-collapsed-h: clamp(76px, 11vh, 132px);
    transition: min-height .85s var(--ease-smooth), padding .85s var(--ease-smooth);
}
.hero-page .hero-content,
.hero-page .hero-scroll,
.hero-page .hero-canvas,
.hero-page .hero-scan,
.hero-page .hero-carousel {
    transition: opacity .55s var(--ease-smooth), transform .7s var(--ease-smooth), max-height .6s var(--ease-smooth);
}
/* 2026-08-22：详情/分类页（hero-page）不需要底部透视网格——它与横幅图底部叠加造成「两张图」错觉，
   且非首页无需该科技感装饰。仅首页 .hero（不含 hero-page）保留 .hero-grid。 */
.hero-page .hero-grid {
    display: none;
}
/* 展开态给 .hero-content 一个具体 max-height，作为 max-height 折叠过渡的起点
   （仅作用于子页面 .hero-page，不影响首页 hero）；收缩时平滑折回 0 高度 */
.hero-page:not(.is-collapsed) .hero-content { max-height: 120vh; }
/* 自动收缩态：平滑收为顶部精简横幅，凸显下方内容区 */
.hero-page.is-collapsed {
    min-height: var(--hero-collapsed-h);
    padding-top: 0; padding-bottom: 0;
    overflow: hidden; /* 锁定为横幅条高度：大内容已由 max-height 折为 0，此处兜底裁剪 */
}
/* 收缩态：用 max-height 把大内容平滑折回 0 高度（不搬动其位置，避免“跳到顶部”的乱），
   配合 opacity 淡出；横幅高度完全由 --hero-collapsed-h 决定，全站各页统一、文字居中落在 hero-mini 上。 */
.hero-page.is-collapsed .hero-content {
    max-height: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(-12px) scale(.985);
    pointer-events: none;
    overflow: hidden;
}
.hero-page.is-collapsed .hero-scroll,
.hero-page.is-collapsed .hero-canvas,
.hero-page.is-collapsed .hero-grid,
.hero-page.is-collapsed .hero-scan,
.hero-page.is-collapsed .hero-carousel {
    opacity: 0;
    transform: translateY(-14px) scale(.985);
    pointer-events: none;
}
/* 收缩后浮出的精简横幅条（点击可展开） */
.hero-mini {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 0 var(--sp-3); cursor: pointer; border: 0;
    opacity: 0; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg-cosmos) 88%, transparent),
        color-mix(in srgb, var(--bg-cosmos) 72%, transparent));
    border-bottom: 1px solid var(--hairline);
    transition: opacity .5s var(--ease-smooth);
}
.hero-page.is-collapsed .hero-mini { opacity: 1; pointer-events: auto; }
.hero-mini:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg-cosmos) 92%, transparent),
        color-mix(in srgb, var(--bg-cosmos) 80%, transparent));
}
.hero-mini-badge {
    font-family: var(--font-en); font-size: 11px; letter-spacing: 2px;
    color: var(--c-contrast); opacity: .85; white-space: nowrap;
}
.hero-mini-title {
    font-family: var(--font-en); font-weight: 800;
    font-size: clamp(15px, 2.2vw, 20px); color: var(--text-primary);
    letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-mini-caret {
    color: var(--hero-accent); font-size: 16px; line-height: 1;
    animation: heroMiniPulse 2.4s ease-in-out infinite;
}
@keyframes heroMiniPulse { 0%,100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(-3px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
    .hero-page,
    .hero-page .hero-content, .hero-page .hero-scroll, .hero-page .hero-canvas,
    .hero-page .hero-grid, .hero-page .hero-scan, .hero-page .hero-carousel,
    .hero-mini { transition-duration: .01ms !important; }
    .hero-mini-caret { animation: none; }
}

/* ===================================================================
   文章阅读固定条（reading-bar.js）：滚动离开大标题后，标题收缩为顶部固定细条；回顶还原
   仅页面含 .reading-bar 时激活（资讯 / 知识库详情页）。主题令牌与 .hero-mini 一致。
   =================================================================== */
.reading-bar {
    /* 固定条定位在全局导航正下方（top: var(--nav-h)），滚动阅读时导航常驻、细条置于其下，层级清晰无违和感 */
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 990;
    height: var(--reading-bar-h, 60px);
    display: flex; align-items: center;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg-cosmos) 92%, transparent),
        color-mix(in srgb, var(--bg-cosmos) 78%, transparent));
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 8px 30px var(--drawer-shadow);
    /* 隐藏态：连同导航高度一起上移，确保彻底滑出视口上方（不会在导航区残留幽灵条） */
    transform: translateY(calc(-100% - var(--nav-h)));
    transition: transform .5s var(--ease-smooth);
    will-change: transform;
}
.reading-bar.is-visible { transform: translateY(0); }
/* 底部阅读进度细线 */
.reading-bar-progress {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%;
    background: linear-gradient(90deg, var(--c-cyan), var(--c-purple));
    box-shadow: 0 0 10px color-mix(in srgb, var(--c-cyan) 60%, transparent);
}
.reading-bar-inner {
    width: 100%; max-width: var(--maxw); margin: 0 auto;
    padding: 0 var(--sp-3); display: flex; align-items: center; gap: 14px;
}
.reading-bar-back {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
    padding: 6px 12px; border-radius: var(--radius-btn); border: 1px solid transparent;
    transition: color .25s, border-color .25s, background .25s;
}
.reading-bar-back:hover { color: var(--text-primary); border-color: var(--border-glass); background: var(--surface-hover); }
.reading-bar-title {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--font-en); font-weight: 700; letter-spacing: .5px; line-height: 1.2;
    font-size: clamp(14px, 2vw, 17px); color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reading-bar-top {
    flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--border-glass); background: transparent;
    color: var(--text-secondary); cursor: pointer;
    transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.reading-bar-top:hover { color: var(--c-cyan); border-color: var(--c-cyan); background: var(--surface-hover); transform: translateY(-1px); }
.reading-bar-top svg { width: 18px; height: 18px; }
/* 阅读模式：全局导航常驻顶部，固定细条定位在其正下方（top: var(--nav-h)），二者分层不争位；
   回顶后细条收起、导航始终可见。（旧实现曾用 body.reading #nav 隐藏导航，已移除） */
@media (prefers-reduced-motion: reduce) {
    .reading-bar { transition-duration: .01ms !important; }
}
@media (max-width: 600px) {
    .reading-bar-back { padding: 6px 10px; }
    .reading-bar-title { font-size: 14px; }
}

/* 各页强调色（差异化视觉身份，区别于首页海蓝）
   绑定主题调色板「角色令牌」而非写死色值：页面身份（色相区分）与换肤响应两者兼得。
   映射依据原写死值的色相，保持视觉连续性：
     about #7F77DD 紫→c-purple / solutions #40B8F0 青→c-cyan / cases #1D9E75 绿→c-green
     news  #D85A30 橙→c-orange / service #639922 橄榄绿→c-green / contact #378ADD 蓝→c-blue */
body.page-about     { --hero-accent: var(--c-purple); --hero-accent-2: var(--c-blue); }
body.page-solutions { --hero-accent: var(--c-cyan);   --hero-accent-2: var(--c-blue); }
body.page-cases     { --hero-accent: var(--c-green);  --hero-accent-2: var(--c-cyan); }
body.page-news      { --hero-accent: var(--c-orange); --hero-accent-2: var(--c-purple); }
body.page-service   { --hero-accent: var(--c-green);  --hero-accent-2: var(--c-blue); }
body.page-contact   { --hero-accent: var(--c-blue);   --hero-accent-2: var(--c-cyan); }
/* emerald 主题下 --c-green 与 --c-cyan 同为 #34D399，page-cases hero 渐变两端同色会塌陷为纯色；
   故将第二端点改取 --c-blue（emerald 下为更深绿 #10B981），保留绿色层次 */
body.page-cases[data-theme="emerald"] { --hero-accent-2: var(--c-blue); }

/* Hero 差异化内容块（每页独有，区别于首页纯大屏） */
.hero-aside { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.hero-aside .aside-card {
    background: var(--glass-bg); border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); min-width: 138px; text-align: center;
}
.hero-aside .aside-num {
    font-family: var(--font-en); font-size: 30px; font-weight: 900; line-height: 1;
    color: var(--hero-accent); text-shadow: 0 0 18px color-mix(in srgb, var(--hero-accent) 45%, transparent);
}
.hero-aside .aside-label { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.hero-aside .aside-tags { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-aside .aside-tag {
    font-size: 13px; padding: 9px 18px; border-radius: var(--radius-btn);
    border: 1px solid color-mix(in srgb, var(--hero-accent) 42%, transparent);
    color: var(--hero-accent); background: color-mix(in srgb, var(--hero-accent) 9%, transparent);
}
.hero-aside .aside-pill {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
    padding: 9px 18px; border-radius: var(--radius-btn); color: var(--text-secondary);
    background: var(--glass-bg); border: 1px solid var(--border-glass);
}
.hero-aside .aside-pill b { color: var(--hero-accent); font-family: var(--font-en); font-weight: 700; }

/* 联系页 Hero 右侧联系卡：统一玻璃面板，内部一列三行
   2026-08-15 精修 v6：面板在右栏垂直居中、水平居中（更靠左），
   并加柔和斜向流光扫过效果；每项一行（左图标 + 右标签/值），项间有分隔线 */
.hero-aside--contact {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 0;
    justify-content: center; align-self: center; justify-self: center;
    width: 100%; max-width: 380px;
    margin-top: 0;
    background: var(--glass-bg);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 44px var(--drawer-shadow);
}
/* 柔和流光：斜向光束从面板左侧扫到右侧 */
.hero-aside--contact::before {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hero-accent) 28%, transparent), transparent);
    transform: skewX(-20deg);
    animation: contactShimmer 5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
}
@keyframes contactShimmer {
    0% { left: -120%; }
    100% { left: 180%; }
}
/* 覆盖 .hero-split .hero-aside (0,2,0) 的 display:grid，强制单列 flex（(0,3,0) 稳胜） */
.hero.hero-split .hero-aside--contact { display: flex; flex-direction: column; }
.hero-aside--contact .aside-card {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 32px 1fr; gap: 3px 14px;
    align-items: center; text-align: left; padding: var(--sp-3) var(--sp-2);
    min-width: 0;
    border-bottom: 1px solid var(--border-glass);
}
.hero-aside--contact .aside-card:last-child { border-bottom: none; }
.hero-aside--contact .aside-ico {
    grid-row: 1 / 3; align-self: center; font-size: 26px; line-height: 1;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--hero-accent) 45%, transparent));
}
.hero-aside--contact .aside-ico svg { width: 26px; height: 26px; }
.hero-aside--contact .aside-label { grid-column: 2; font-size: 12px; color: var(--text-secondary); margin-top: 0; letter-spacing: .5px; }
.hero-aside--contact .aside-value {
    grid-column: 2; font-size: 14px; font-weight: 600; color: var(--text-primary);
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
    line-height: 1.5; max-width: none;
}
.hero-aside--contact .aside-value:hover { color: var(--hero-accent); }
/* 中等屏幕：面板稍紧凑 */
@media (max-width: 980px) {
    .hero-aside--contact { padding: var(--sp-3); max-width: 340px; }
    .hero-aside--contact .aside-card { padding: var(--sp-2) var(--sp-2); }
    .hero-aside--contact .aside-ico { font-size: 24px; }
    .hero-aside--contact .aside-ico svg { width: 24px; height: 24px; }
}
/* 移动端：保持单列面板，仅收窄内边距 */
@media (max-width: 640px) {
    .hero-aside--contact { max-width: none; padding: var(--sp-3); justify-self: stretch; }
    .hero-aside--contact .aside-card { padding: var(--sp-2) var(--sp-3); }
}

/* 双栏 hero（关于 / 服务页：左文 + 右特色卡） */
@media (min-width: 860px) {
    .hero-split .hero-content { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-5); align-items: center; }
    .hero-split .hero-aside { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); justify-items: center; }
}
/* 2026-08-15 五次增强·4.0.4：左右布局 hero（split + 有 banner 图 → 左文右图）
   4.0.4 调整：左列文字更宽（1.4fr），右列图片更小（max 440px 16:9）作为装饰不抢戏 */
.hero-split-media .hero-content {
    display: grid; gap: var(--sp-5); align-items: center;
    text-align: left;
}
.hero-split-media .hero-main { max-width: 720px; }
.hero-split-media .hero-media {
    position: relative; border-radius: var(--radius-xl);
    overflow: hidden; box-shadow: 0 16px 40px var(--drawer-shadow);
    aspect-ratio: 16 / 9; max-width: 440px; width: 100%;
    margin: 0 auto;
}
.hero-split-media .hero-media::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border: 1px solid var(--border-glow, rgba(120,160,255,.22));
    border-radius: inherit;
}
.hero-split-media .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
/* 媒体图下方的附加区（关于数据卡等原 aside 内容） */
.hero-media-aside { padding: var(--sp-4) var(--sp-3) 0; }
.hero-media-aside .hero-aside { margin-top: 0; }
.hero-media-aside .aside-card { min-width: 120px; padding: var(--sp-2) var(--sp-3); }
@media (min-width: 860px) {
    .hero-split-media .hero-content { grid-template-columns: 1.4fr 1fr; }
}
@media (max-width: 859px) {
    .hero-split-media .hero-content { text-align: center; justify-items: center; }
    .hero-split-media .hero-media { max-width: 380px; }
    .hero-media-aside { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
}

/* ---- 核心数据列表（about-vision 内）---- */
.data-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.data-item { text-align: center; padding: var(--sp-2); }
.data-num {
    font-family: var(--font-en); font-size: 36px; font-weight: 900;
    background: linear-gradient(135deg, var(--c-cyan), var(--c-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.data-unit { font-size: 20px; }
.data-label {
    display: block; font-size: 13px; color: var(--text-secondary);
    margin-top: 4px;
}

/* ---- 文化卡片 ---- */
.culture-section { padding: var(--sp-7) 0; }
.culture-card {
    padding: var(--sp-5); border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4);
}
.culture-header {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.culture-big-icon {
    font-size: 42px;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--c-cyan) 50%, transparent));
    line-height: 1;
}
.culture-header h3 {
    font-size: 26px; color: var(--text-primary);
    background: linear-gradient(90deg, var(--c-cyan), var(--c-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.culture-en {
    font-family: var(--font-en); font-size: 13px;
    color: var(--c-cyan-soft); letter-spacing: 2px;
}
.culture-body p {
    color: var(--text-secondary); line-height: 1.9;
    font-size: 15px; margin-bottom: var(--sp-2);
}
.culture-body strong { color: var(--c-cyan); }
.culture-tags {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: var(--sp-3);
}
.tag {
    padding: 5px 14px; border-radius: 20px; font-size: 12px;
    background: color-mix(in srgb, var(--c-cyan) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 20%, transparent);
    color: var(--c-cyan-soft);
}

/* ---- 文化总结 ---- */
.culture-summary {
    padding: var(--sp-5) var(--sp-4); border-radius: var(--radius-lg);
    border-left: 3px solid var(--c-purple);
}
.culture-summary p {
    color: var(--text-secondary); line-height: 1.95;
    font-size: 15px; margin-bottom: var(--sp-2);
}
.culture-motto {
    text-align: center; font-size: 17px !important;
    color: var(--text-primary) !important;
    margin-top: var(--sp-3) !important;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--hairline);
}

/* ---- 核心价值观 ---- */
.values-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}
.value-card {
    padding: var(--sp-4) var(--sp-3); border-radius: var(--radius-md);
    text-align: center; transition: transform .4s var(--ease-premium), border-color .4s;
}
.value-card:hover { transform: translateY(-6px); border-color: var(--border-glow); }
.value-icon { font-size: 36px; display: block; margin-bottom: var(--sp-2); }
.value-icon svg { width: 36px; height: 36px; }
.value-card h3 { font-size: 17px; margin-bottom: var(--sp-1); }
.value-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* ---- 服务优势 ---- */
.advantage-list { max-width: 800px; margin: 0 auto; }
.adv-item {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--hairline);
}
.adv-num {
    font-family: var(--font-en); font-size: 36px; font-weight: 900;
    color: var(--c-cyan); opacity: .25;
    line-height: 1; min-width: 60px;
}
.adv-content h3 {
    font-size: 17px; margin-bottom: 6px; color: var(--text-primary);
}
.adv-content p {
    font-size: 14px; color: var(--text-secondary); line-height: 1.8;
}

/* ===================================================================
   案例页专属样式（cases/）
   =================================================================== */

/* ---- 客户端筛选通用（filter.js） ---- */
.is-hidden { display: none !important; }
[data-subrow] { } /* 显隐由 JS 按激活的联动值控制 */
.filter-noresults { margin: var(--sp-6) 0; text-align: center; }

/* ---- 行业筛选标签 ---- */
.case-filter-section { padding: var(--sp-5) 0 var(--sp-2); }
.case-filters {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.case-filter {
    padding: 8px 20px; border-radius: var(--radius-btn); font-size: 14px; cursor: pointer;
    background: var(--glass-bg); color: var(--text-secondary);
    border: 1px solid var(--border-glass);
    transition: all .3s var(--ease-premium);
    font-family: inherit;
}
.case-filter:hover { color: var(--text-primary); border-color: var(--border-glow); }
.case-filter.active {
    color: var(--btn-text); background: linear-gradient(100deg, var(--c-cyan), var(--c-blue));
    border-color: transparent; box-shadow: 0 0 18px color-mix(in srgb, var(--c-cyan) 35%, transparent);
}
/* L1 分类下的 L2 子分类（次级 chip，视觉弱化，与 L1 主 chip 区分） */
.case-filters--sub { justify-content: center; }
.case-filter--sub {
    padding: 6px 16px; font-size: 13px;
    background: transparent;
    border: 1px dashed var(--border-glass);
    border-radius: 999px;
}
.case-filter--sub:hover { border-color: var(--border-glow); color: var(--text-primary); }
.case-filter--sub.active {
    color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 14%, transparent);
    border-color: var(--c-cyan); box-shadow: none;
}

/* 新闻分类标签：每类文章数角标 */
.case-filter { display: inline-flex; align-items: center; gap: 7px; }
.cat-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    font-size: 12px; line-height: 1; font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--glass-bg); color: var(--text-secondary);
    border: 1px solid var(--border-glass);
}
.case-filter.active .cat-count {
    /* 角标底色不再用「与文字同色的半透明遮罩」：那会把底色拉向文字色、反而压低对比度
       （实测原 rgba(4,18,26,.18) 方案 12/16 主题 <4.5，最低 3.43）。
       改为透明底 + 同色描边：文字对比度等同按钮本身（16/16 达标，最低 4.70），描边仅作视觉分隔。 */
    background: transparent; color: var(--btn-text);
    border-color: color-mix(in srgb, var(--btn-text) 45%, transparent);
}

/* ---- 案例网格 ---- */
.case-grid-section { padding: var(--sp-3) 0 var(--sp-7); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.case-card {
    border-radius: var(--radius-lg); overflow: hidden;
    transition: transform .4s var(--ease-premium), border-color .4s, box-shadow .4s;
    display: flex; flex-direction: column; /* 2026-08-20 修复：flex column 让 .case-info flex-grow:1 填满剩余高度，消除底部留白 */
    text-decoration: none; color: inherit;
}
.case-card:hover { transform: translateY(-8px); border-color: var(--border-glow); box-shadow: 0 18px 50px color-mix(in srgb, var(--c-cyan) 16%, transparent); }
.case-thumb {
    height: 180px; position: relative; overflow: hidden; /* 老浏览器 fallback：固定高度 */
    background: linear-gradient(135deg, color-mix(in srgb, var(--c-cyan) 18%, transparent), color-mix(in srgb, var(--c-purple) 18%, transparent));
}
/* 2026-08-20 修复：封面用 16:9 响应式宽高比（新浏览器），解决固定 180px 在宽卡片下比例偏矮、图片下方留白 */
@supports (aspect-ratio: 16 / 9) {
    .case-thumb { height: auto; aspect-ratio: 16 / 9; }
}
.case-thumb::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
}
.case-thumb-1 { background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c-cyan) 35%, transparent), transparent 60%),
    radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--c-purple) 30%, transparent), transparent 60%),
    var(--bg-elevated);
}
.case-thumb-ph { background:
    repeating-linear-gradient(45deg, var(--hairline) 0 1px, transparent 1px 24px),
    var(--bg-elevated);
}
.case-info {
    padding: var(--sp-3);
    /* 2026-08-20 修复：flex 纵向布局，flex-grow 填满卡片、case-more 贴底，消除 grid 同行拉伸导致的底部大片留白 */
    display: flex; flex-direction: column;
    flex-grow: 1; min-height: 150px;
}
.case-cat {
    display: inline-block; font-size: 12px; color: var(--c-cyan-soft);
    letter-spacing: 1px; margin-bottom: var(--sp-1);
}
.case-info h3 { font-size: 17px; line-height: 1.5; margin-bottom: var(--sp-1); color: var(--text-primary); }
.case-info p { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--sp-2); }
.case-more { font-size: 13px; color: var(--c-cyan); font-weight: 600; margin-top: auto; padding-top: var(--sp-2); }
.case-placeholder { opacity: .85; }
.case-placeholder .case-thumb-ph { animation: float 4s ease-in-out infinite; }

/* ---- 案例详情 ---- */
.case-detail-hero { min-height: 56vh; }
.case-client { margin-bottom: var(--sp-2); }
.case-client-en {
    font-family: var(--font-en); font-size: 13px; letter-spacing: 3px;
    color: var(--c-cyan-soft);
}
.case-client-cn { font-size: clamp(30px, 6vw, 52px); margin: 6px 0; }
.case-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); align-items: start; }
.case-main { min-width: 0; }
.case-block { margin-bottom: var(--sp-5); }
.case-h2 {
    font-size: 22px; margin-bottom: var(--sp-2);
    padding-left: 14px; border-left: 3px solid var(--c-cyan);
    color: var(--text-primary);
}
.case-block p { color: var(--text-secondary); line-height: 1.9; font-size: 15px; }
.case-block strong { color: var(--c-cyan); }
.case-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.case-list li {
    display: flex; gap: var(--sp-2); align-items: baseline;
    font-size: 15px; color: var(--text-secondary); line-height: 1.7;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
    background: var(--glass-bg); border: 1px solid var(--border-glass);
}
.case-list li span {
    flex-shrink: 0; min-width: 96px; font-weight: 600; color: var(--c-cyan);
}
.case-result-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.case-result { padding: var(--sp-3) var(--sp-2); text-align: center; }
.case-result-num {
    font-family: var(--font-en); font-size: 30px; font-weight: 900;
    background: linear-gradient(135deg, var(--c-cyan), var(--c-purple));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.case-result-num span { font-size: 14px; }
.case-result-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.case-note {
    margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    font-size: 13px; color: var(--text-dim); line-height: 1.7;
    border-radius: var(--radius-md); background: color-mix(in srgb, var(--c-cyan) 5%, transparent);
    border: 1px dashed color-mix(in srgb, var(--c-cyan) 20%, transparent);
}
.case-side {
    padding: var(--sp-4); border-radius: var(--radius-lg);
    position: sticky; top: 92px;
    /* 2026-08-20/23 修复：右侧栏玻璃背景跟随主题，sticky 浮在 hero 背景图上时也能看清文字 */
    background: color-mix(in srgb, var(--bg-drawer) 80%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
}
.case-side h3 {
    font-size: 16px; margin-bottom: var(--sp-3); color: var(--text-primary);
    padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-glass);
}
.case-meta-row {
    display: flex; justify-content: space-between; gap: var(--sp-2);
    padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline);
    font-size: var(--fs-md);
}
.case-meta-row span { color: var(--text-dim); }
.case-meta-row b { color: var(--text-primary); font-weight: 600; text-align: right; }

/* ===================================================================
   联系页 / 新闻页 专属样式
   =================================================================== */

/* ---- 联系页 ---- */
.contact-section { padding: var(--sp-7) 0; }
.contact-grid {
    display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-5); align-items: start;
}
.contact-info {
    padding: var(--sp-4); border-radius: var(--radius-lg);
    position: sticky; top: 92px;
}
.contact-info h3 { font-size: 18px; margin-bottom: var(--sp-3); color: var(--text-primary); }
.contact-row { display: flex; gap: var(--sp-2); align-items: flex-start; margin-bottom: var(--sp-3); }
.contact-ico { font-size: 22px; line-height: 1.3; flex-shrink: 0; }
.contact-ico svg { width: 22px; height: 22px; }
.contact-row strong { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: 3px; }
.contact-row p { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.6; margin: 0; }
.contact-row a { color: var(--c-cyan); }
.contact-tip {
    margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.7;
    border-radius: var(--radius-md); background: color-mix(in srgb, var(--c-cyan) 5%, transparent);
    border: 1px dashed color-mix(in srgb, var(--c-cyan) 20%, transparent);
}
.contact-form-wrap h3 { font-size: 22px; margin-bottom: var(--sp-1); color: var(--text-primary); }
.form-sub { color: var(--text-secondary); font-size: 14px; margin-bottom: var(--sp-3); }
.contact-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; color: var(--text-secondary); }
.field input, .field select, .field textarea {
    font-family: inherit; font-size: 14px; color: var(--text-primary);
    background: var(--glass-bg); border: 1px solid var(--border-glass);
    border-radius: var(--radius-md); padding: 12px 14px;
    transition: border-color .3s, box-shadow .3s;
    width: 100%; resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--c-cyan);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-cyan) 12%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }

/* ================================================================
   自定义深色 Dropdown（替代原生 select，彻底解决白底/黑底白字刺眼）
   ================================================================ */
.custom-select { position: relative; width: 100%; }
.cs-trigger {
    display: flex; align-items: center; justify-content: space-between;
    font-family: inherit; font-size: 14px; color: var(--text-primary);
    background: var(--glass-bg);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 12px 14px; cursor: pointer;
    transition: border-color .25s, box-shadow .25s, background .25s;
    user-select: none;
}
.cs-trigger:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--c-cyan) 30%, transparent); }
.cs-trigger:focus { outline: none; border-color: var(--c-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-cyan) 12%, transparent); }
.cs-trigger.cs-open { border-color: var(--c-cyan); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cs-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.cs-value.cs-placeholder { color: var(--text-dim); }
.cs-arrow { width: 16px; height: 16px; color: var(--text-dim); transition: transform .25s; flex-shrink: 0; margin-left: 8px; }
.cs-trigger.cs-open .cs-arrow { transform: rotate(180deg); color: var(--c-cyan); }

/* 下拉面板 */
.cs-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-drawer);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 20%, transparent);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 12px 36px var(--drawer-shadow), 0 0 1px color-mix(in srgb, var(--c-cyan) 15%, transparent);
    z-index: 100;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    max-height: 280px; overflow-y: auto;
    overscroll-behavior: contain;
}
.custom-select.cs-open .cs-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* 向上弹出变体（空间不够时自动翻转） */
.custom-select.cs-up .cs-dropdown {
    top: auto; bottom: 100%;
    border-top: 1px solid color-mix(in srgb, var(--c-cyan) 20%, transparent);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -12px 36px var(--drawer-shadow), 0 0 1px color-mix(in srgb, var(--c-cyan) 15%, transparent);
    transform: translateY(8px);           /* 从下方滑入 */
}
.custom-select.cs-up.cs-open .cs-dropdown { transform: translateY(0); }
.custom-select.cs-up .cs-trigger.cs-open {
    border-radius: 0 0 var(--radius-md) var(--radius-md);   /* 底部圆角 */
}

/* 选项行 */
.cs-option {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    font-size: 14px; color: var(--text-secondary);
    cursor: pointer; transition: all .15s;
    border-bottom: 1px solid var(--hairline);
}
.cs-option:last-child { border-bottom: none; }
.cs-option:hover { background: color-mix(in srgb, var(--c-cyan) 10%, transparent); color: var(--text-primary); }
.cs-option.cs-selected { background: color-mix(in srgb, var(--c-cyan) 15%, transparent); color: var(--c-cyan); }
.cs-option.cs-selected::before {
    content: '✓'; font-size: 13px; font-weight: 700; margin-right: -4px;
}

/* 小标签 */
.cs-rec, .cs-new {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: var(--radius-xs); line-height: 1.6;
    letter-spacing: 0.5px;
}
.cs-rec { background: color-mix(in srgb, var(--c-cyan) 18%, transparent); color: var(--c-cyan); }
.cs-new { background: rgba(217,119,86,0.18); color: #D97756; }
.form-note {
    font-size: 13px; color: var(--c-cyan); line-height: 1.6;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-cyan) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan) 20%, transparent);
}

.form-note.form-note-error {
    color: #ff9a9a;
    background: rgba(248,113,113,0.08);
    border-color: rgba(248,113,113,0.25);
}

/* ---------- 留言提交弹窗 ---------- */
.contact-popup {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-3);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease-smooth), visibility .35s;
}
.contact-popup.active { opacity: 1; visibility: visible; }
.contact-popup.out { opacity: 0; visibility: hidden; }

.contact-popup .cp-backdrop {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg-drawer) 65%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.contact-popup .cp-card {
    position: relative;
    width: 100%; max-width: 420px;
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--bg-drawer);
    box-shadow: 0 24px 64px var(--drawer-shadow), 0 0 0 1px color-mix(in srgb, var(--c-cyan) 8%, transparent) inset;
    text-align: center;
    transform: translateY(16px) scale(0.96);
    transition: transform .4s var(--ease-premium), opacity .4s;
}
.contact-popup.active .cp-card { transform: translateY(0) scale(1); }
.contact-popup.out .cp-card { transform: translateY(-12px) scale(0.98); opacity: 0; }

.contact-popup .cp-close {
    position: absolute; top: 12px; right: 16px;
    width: 32px; height: 32px; line-height: 32px;
    background: transparent; border: none; color: var(--text-tertiary);
    font-size: 26px; cursor: pointer; border-radius: 50%;
    transition: color .2s, background .2s;
}
.contact-popup .cp-close:hover { color: var(--text-primary); background: var(--surface-hover); }

.contact-popup .cp-icon {
    width: 64px; height: 64px; margin: 0 auto var(--sp-3);
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-cyan) 30%, transparent);
    color: var(--c-cyan); font-size: 30px; line-height: 64px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 24px color-mix(in srgb, var(--c-cyan) 18%, transparent);
}
.contact-popup .cp-icon svg { width: 32px; height: 32px; }

.contact-popup .cp-title {
    font-size: 17px; font-weight: 500; color: var(--text-primary);
    line-height: 1.7; margin-bottom: var(--sp-1);
}
.contact-popup .cp-sub {
    font-size: 13px; color: var(--text-secondary); margin: 0;
}

.contact-popup .cp-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: color-mix(in srgb, var(--c-cyan) 12%, transparent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}
.contact-popup .cp-bar span {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--c-cyan), var(--c-purple));
    transition: width .1s linear;
}

/* ---------- 隐私政策弹窗（联系表单「我同意」触发） ---------- */
.privacy-modal {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-3);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease-smooth), visibility .35s;
}
.privacy-modal.is-open { opacity: 1; visibility: visible; }
.privacy-modal .pm-backdrop {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg-drawer) 72%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.privacy-modal .pm-card {
    position: relative;
    width: 92vw; max-width: 900px;
    max-height: 85vh;
    display: flex; flex-direction: column;
    padding: var(--sp-6) var(--sp-5);
    transform: translateY(16px) scale(.96);
    transition: transform .4s var(--ease-premium), opacity .4s;
}
.privacy-modal.is-open .pm-card { transform: translateY(0) scale(1); }
.privacy-modal .pm-close {
    position: absolute; top: 14px; right: 18px;
    width: 36px; height: 36px; line-height: 36px;
    background: transparent; border: none; color: var(--text-tertiary);
    font-size: 28px; cursor: pointer; border-radius: 50%;
    transition: color .2s, background .2s;
}
.privacy-modal .pm-close:hover { color: var(--text-primary); background: var(--surface-hover); }
.privacy-modal .pm-title {
    margin: 0 0 var(--sp-4);
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    outline: none;
}
.privacy-modal .pm-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    position: relative;
    padding-right: 8px;
    font-size: 15px; line-height: 1.8; color: var(--text-secondary);
}
.privacy-modal .pm-read-progress {
    position: sticky; top: 0;
    height: 3px;
    margin: 0 0 14px;
    background: var(--hairline);
    border-radius: var(--radius-2xs);
    overflow: hidden;
    z-index: 2;
}
.privacy-modal .pm-read-progress span {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--c-cyan), var(--c-purple));
    transition: width .15s linear;
}
.privacy-modal .pm-body h2 { font-size: 18px; margin: 20px 0 12px; color: var(--text-primary); }
.privacy-modal .pm-body h2:first-child { margin-top: 0; }
.privacy-modal .pm-body h3 { font-size: 16px; margin: 16px 0 8px; color: var(--c-cyan-soft); }
.privacy-modal .pm-body p, .privacy-modal .pm-body li { margin: 10px 0; }
.privacy-modal .pm-body ul { padding-left: 22px; }
.privacy-modal .pm-body a { color: var(--c-cyan); }
.privacy-modal .pm-body strong { color: var(--text-primary); }
.privacy-modal .pm-footer {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    margin-top: var(--sp-4); padding-top: var(--sp-3);
    border-top: 1px solid var(--hairline);
}
.privacy-modal .pm-footer-actions { display: flex; gap: 12px; }
.privacy-modal .pm-scroll-hint {
    font-size: 13px; line-height: 1.45;
    color: var(--text-tertiary);
    transition: color .2s;
}
.privacy-modal .pm-scroll-hint.is-complete { color: var(--c-cyan); }
.privacy-modal .pm-footer .btn-primary:disabled {
    background: var(--surface-hover);
    color: var(--text-tertiary);
    box-shadow: none;
    filter: grayscale(0.6);
}
@media (max-width: 768px) {
    .privacy-modal .pm-card { width: 100%; max-width: 100%; max-height: 92vh; padding: var(--sp-5) var(--sp-4); }
    .privacy-modal .pm-footer { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .privacy-modal .pm-footer-actions { flex-direction: column-reverse; }
    .privacy-modal .pm-footer .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
    .privacy-modal .pm-card { padding: var(--sp-4); }
}

/* ---- 新闻页 ---- */
.news-section { padding: var(--sp-7) 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.news-card {
    border-radius: var(--radius-lg); overflow: hidden;
    transition: transform .4s var(--ease-premium), border-color .4s, box-shadow .4s;
}
.news-card:hover { transform: translateY(-6px); border-color: var(--border-glow); box-shadow: 0 16px 44px color-mix(in srgb, var(--c-cyan) 14%, transparent); }
/* 案例卡片复用资讯 news-card 方块样式；仅加整卡点击，不影响资讯页 */
.news-card.case-clickable { position: relative; cursor: pointer; }
.news-card.case-clickable > a { position: absolute; inset: 0; z-index: 1; }
.news-card.case-clickable > *:not(a) { position: relative; z-index: 0; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-thumb { height: 170px; position: relative; overflow: hidden; }
.news-thumb::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}
.news-thumb-1 {
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c-cyan) 35%, transparent), transparent 60%),
        var(--bg-elevated);
}
.news-thumb-2 {
    background:
        radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--c-purple) 32%, transparent), transparent 60%),
        var(--bg-elevated);
}
.news-thumb-ph {
    background:
        repeating-linear-gradient(45deg, var(--hairline) 0 1px, transparent 1px 24px),
        var(--bg-elevated);
}
.news-body { padding: var(--sp-3); }
.news-meta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.news-date { font-family: var(--font-en); font-size: 12px; color: var(--c-cyan-soft); letter-spacing: 1px; }
.news-tag {
    font-size: 11px; padding: 2px 10px; border-radius: 12px;
    background: color-mix(in srgb, var(--c-cyan) 10%, transparent); color: var(--c-cyan-soft);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 20%, transparent);
}
.news-body h3 { font-size: 16px; line-height: 1.5; margin-bottom: var(--sp-1); color: var(--text-primary); }
.news-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--sp-2); }
.news-more { font-size: 13px; color: var(--c-cyan); font-weight: 600; }
.news-placeholder { opacity: .82; }

/* 真实封面图：覆盖缩略区，无图时回退 CSS 渐变 */
.news-thumb-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .55s var(--ease-premium);
}
.news-card:hover .news-thumb-img { transform: scale(1.06); }

/* ---------- 面包屑导航（2026-08-09 最终版：sticky 粘在页头下 + 正文左对齐宽）
       面包屑在 dch-page 内，滚动时粘在导航正下方，始终可见
       24px 间隙约定：把 24px 从 breadcrumb margin-bottom 转移到 dch-article margin-top，
       间隙属于下方兄弟盒模型外部分，与 sticky 面包屑彻底解耦，滚动时永不消失 ---------- */
.breadcrumb {
    position: sticky; top: var(--nav-h);
    z-index: 10;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 14px; color: var(--text-dim);
    margin: 24px auto;
    max-width: 1440px;
    box-sizing: border-box;
}
.breadcrumb a {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    color: var(--text-secondary); text-decoration: none;
    transition: color .25s, background .25s;
}
.breadcrumb a:hover { color: var(--c-cyan); background: var(--surface-hover); }
.breadcrumb .sep { color: var(--text-dim); opacity: .35; font-size: 16px; line-height: 1; padding: 0 2px; }
.breadcrumb .current {
    color: var(--c-cyan); font-weight: 700;
    padding: 4px 4px;
}
@media (max-width: 767px) {
    .breadcrumb { font-size: 12px; padding: 6px 12px; margin: var(--sp-2) 0; }
    .breadcrumb a, .breadcrumb .current { padding: 3px 8px; }
}

/* ---------- 服务闭环（五大支柱） ---------- */
.service-loop { padding: var(--sp-6) 0; }
.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.loop-step {
    padding: var(--sp-4) var(--sp-3); border-radius: var(--radius-lg);
    text-align: center; position: relative; overflow: hidden;
    transition: transform .4s var(--ease-premium), border-color .4s, box-shadow .4s;
}
.loop-step:hover { transform: translateY(-6px); border-color: var(--border-glow); box-shadow: 0 14px 44px color-mix(in srgb, var(--c-cyan) 18%, transparent); }
.loop-no { font-family: var(--font-en); font-size: 13px; letter-spacing: 2px; color: var(--c-cyan); opacity: .55; margin-bottom: var(--sp-1); }
.loop-icon {
    display: inline-flex; width: 60px; height: 60px; align-items: center; justify-content: center;
    font-size: 28px; border-radius: var(--radius-md); margin-bottom: var(--sp-2);
    background: color-mix(in srgb, var(--c-cyan) 10%, transparent); color: var(--c-cyan);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--c-cyan) 15%, transparent);
}
.loop-icon svg { width: 28px; height: 28px; }
.loop-step h3 { font-size: 19px; margin-bottom: 8px; }
.loop-step p { color: var(--text-secondary); font-size: var(--fs-md); line-height: 1.65; }
.loop-foot { text-align: center; color: var(--text-secondary); font-size: var(--fs-md); max-width: 620px; margin: var(--sp-4) auto 0; line-height: 1.8; }

/* ---- 服务流程（时间轴） ---- */
.process-flow { max-width: 760px; margin: 0 auto; position: relative; }
.process-flow::before {
    content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(var(--c-cyan), var(--c-purple)); opacity: .3;
}
.process-step { display: flex; gap: var(--sp-3); align-items: flex-start; position: relative; padding-bottom: var(--sp-4); }
.process-step:last-child { padding-bottom: 0; }
.process-dot {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-en); font-size: 17px; font-weight: 700; color: var(--c-cyan);
    background: var(--bg-secondary); border: 2px solid var(--border-glow);
    box-shadow: 0 0 16px color-mix(in srgb, var(--c-cyan) 20%, transparent); z-index: 1;
}
.process-body { padding-top: 8px; }
.process-body h3 { font-size: 18px; margin-bottom: 6px; color: var(--text-primary); }
.process-body p { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }

/* ===================================================================
   新闻标签与 Markdown 正文
   =================================================================== */
.news-tag-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.news-tag-filters .filter-label { color: var(--text-dim); font-size: 13px; }
.news-tag-filter {
    padding: 5px 13px; border-radius: 20px; font-size: var(--fs-sm);
    border: 1px solid var(--border); color: var(--text-secondary);
    background: var(--glass-bg); transition: all .25s;
}
.news-tag-filter:hover, .news-tag-filter.active {
    border-color: var(--c-cyan); color: var(--c-cyan);
    background: color-mix(in srgb, var(--c-cyan) 8%, transparent);
}
.news-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.news-card-tag {
    padding: 3px 10px; border-radius: 20px; font-size: var(--fs-xs);
    background: color-mix(in srgb, var(--c-cyan) 8%, transparent); color: var(--c-cyan-soft);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 15%, transparent);
}
.news-card-tag:hover { color: var(--c-cyan); border-color: var(--c-cyan); }
.news-detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.news-detail-tags .label { color: var(--text-dim); font-size: 13px; }
.news-detail-tag {
    padding: 4px 12px; border-radius: 20px; font-size: 12px;
    background: color-mix(in srgb, var(--c-cyan) 8%, transparent); color: var(--c-cyan-soft);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 18%, transparent);
}
.news-detail-tag:hover { color: var(--c-cyan); border-color: var(--c-cyan); }

/* Markdown 渲染正文 */
.news-content { font-size: var(--fs-lg); line-height: 1.95; color: var(--text-secondary); }
.news-content h1, .news-content h2, .news-content h3, .news-content h4 { color: var(--text-primary); margin: 1.4em 0 .6em; line-height: 1.4; }
.news-content h1 { font-size: 26px; }
.news-content h2 { font-size: 22px; border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }
.news-content h3 { font-size: 18px; }
.news-content p { margin-bottom: 1em; }
.news-content ul, .news-content ol { margin: 0 0 1em 1.5em; }
.news-content li { margin-bottom: .35em; }
.news-content a { color: var(--c-cyan); text-decoration: underline; }
.news-content img { max-width: 100%; border-radius: var(--radius-md); margin: 1em 0; }
.news-content blockquote { margin: 1em 0; padding: 12px 18px; border-left: 3px solid var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 5%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.news-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background: var(--glass-bg); padding: 2px 6px; border-radius: var(--radius-xs); font-size: .9em; }
.news-content pre { background: color-mix(in srgb, var(--text-primary) 12%, transparent); padding: 16px; border-radius: var(--radius-sm); overflow-x: auto; margin: 1em 0; }
.news-content pre code { background: transparent; padding: 0; }
.news-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.news-content th, .news-content td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.news-content th { background: color-mix(in srgb, var(--c-cyan) 8%, transparent); color: var(--text-primary); }

/* SEO 关键词自动内链：正文命中的 SEO 关键词上色为可点击内链（区别于普通链接下划线） */
.news-content .kw-link {
    color: var(--c-cyan);
    background: color-mix(in srgb, var(--c-cyan) 12%, transparent);
    border-bottom: 1.5px solid var(--c-cyan);
    border-radius: 3px;
    padding: 0 3px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .2s, color .2s, border-color .2s;
    cursor: pointer;
}
.news-content .kw-link:hover {
    color: #fff;
    background: var(--c-cyan);
    border-bottom-color: var(--c-cyan);
}


/* ============================================================
   新闻文章布局变体（standard / immersive / magazine）
   + 封面尺寸（large / medium / small）· 2026-07-31
   ============================================================ */
.news-cover--large  { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius-lg); }
.news-cover--medium { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius-lg); }
.news-cover--small  { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--radius-lg); }

/* 沉浸单栏 / 杂志大图：单栏居中、隐藏侧栏 */
.article-layout-immersive .case-layout,
.article-layout-magazine .case-layout { grid-template-columns: 1fr; }
.article-layout-immersive .case-main,
.article-layout-magazine .case-main { max-width: 960px; margin: 0 auto; }
.article-layout-immersive .case-side,
.article-layout-magazine .case-side { display: none; }

/* 杂志大图：更大的封面 + 首段首字下沉，强化视觉冲击 */
.article-layout-magazine .news-cover { max-height: 520px; }
.article-layout-magazine .news-content > p:first-of-type::first-letter {
    float: left; font-size: 3.4em; line-height: .82; padding: 6px 10px 0 0;
    font-weight: 800; color: var(--c-cyan);
}

/* 后台预览弹窗内的布局约束（复用同样的布局类） */
.article-preview.article-layout-immersive,
.article-preview.article-layout-magazine { max-width: 780px; margin: 0 auto; }

/* ============================================================
   全站搜索结果页（/search/）
   ============================================================ */
.search-page { padding-top: 140px; padding-bottom: 80px; min-height: 70vh; }
.search-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.search-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin: 12px 0 28px; letter-spacing: .04em; }
.search-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--border-glass, rgba(255,255,255,0.12));
    border-radius: var(--radius-pill); padding: 8px 8px 8px 18px;
    backdrop-filter: blur(12px);
    transition: border-color .3s, box-shadow .3s;
}
.search-bar:focus-within { border-color: var(--c-cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-cyan) 15%, transparent); }
.sb-icon { color: var(--text-secondary); flex: 0 0 auto; }
.search-bar input {
    flex: 1 1 auto; background: transparent; border: 0; outline: 0;
    color: var(--text-primary); font-size: 16px; padding: 8px 4px;
}
.search-bar input::placeholder { color: var(--text-secondary); opacity: .7; }
.sb-submit {
    flex: 0 0 auto; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--c-cyan), var(--c-blue));
    color: var(--btn-text); font-weight: 700; font-size: 15px;
    padding: 10px 26px; border-radius: var(--radius-pill);
    transition: transform .2s, box-shadow .2s;
}
.sb-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-cyan) 35%, transparent); }
.search-meta { margin-top: 18px; color: var(--text-secondary); font-size: 14px; }
.search-meta b { color: var(--c-cyan); }
.search-back { display: inline-block; margin-left: 14px; color: var(--text-secondary); text-decoration: none; }
.search-back:hover { color: var(--c-cyan); }

.result-group { max-width: 880px; margin: 0 auto 36px; }
.result-group-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
}
.rg-icon { color: var(--c-cyan); }
.rg-count {
    margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-secondary);
    background: color-mix(in srgb, var(--c-cyan) 12%, transparent); padding: 2px 10px; border-radius: var(--radius-pill);
}
.result-list { display: flex; flex-direction: column; gap: 12px; }
.result-item {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px; border-radius: var(--radius-lg, 16px);
    text-decoration: none; color: inherit;
    transition: transform .2s, border-color .2s, background .2s;
}
.result-item:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--c-cyan) 50%, transparent); background: color-mix(in srgb, var(--c-cyan) 6%, transparent); }
.result-thumb {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px;
    background-size: cover; background-position: center;
    background-color: var(--glass-bg);
}
.result-body { flex: 1 1 auto; min-width: 0; }
.result-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.result-tag {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--c-cyan);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 40%, transparent); border-radius: 6px; padding: 1px 8px;
}
.result-title { font-size: 16px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-excerpt { font-size: var(--fs-md); color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.result-arrow { flex: 0 0 auto; color: var(--text-secondary); font-size: 18px; transition: transform .2s, color .2s; }
.result-item:hover .result-arrow { color: var(--c-cyan); transform: translateX(3px); }
.search-empty { color: var(--text-secondary); font-size: 14px; padding: 6px 2px; opacity: .8; }

.search-tips { max-width: 760px; margin: 0 auto; text-align: center; color: var(--text-secondary); }
.tip-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }
.tip-tags a {
    text-decoration: none; color: var(--text-primary);
    background: var(--glass-bg); border: 1px solid var(--hairline);
    padding: 8px 18px; border-radius: var(--radius-pill); font-size: 14px; transition: .2s;
}
.tip-tags a:hover { border-color: var(--c-cyan); color: var(--c-cyan); }

/* ===================================================================
   文章排版模板主题（cpt-tpl）· 前台发布页通用
   仅消费 CSS 变量（由编辑器写入 article 行内 style），不改变 HTML 结构；响应式。
   =================================================================== */
.news-content .cpt-tpl,
.case-content .cpt-tpl,
.solution-content .cpt-tpl {
    --cpt-accent: #64748b;
    --cpt-accent-soft: rgba(100,116,139,.08);
    --cpt-font: 'PingFang SC', system-ui, sans-serif;
    --cpt-heading-font: 'PingFang SC', system-ui, sans-serif;
    --cpt-radius: 6px;
    --cpt-spacing: 1.6em;
    --cpt-heading-color: var(--text-primary);
    --cpt-quote-bg: color-mix(in srgb, var(--c-cyan) 6%, transparent);
}
.news-content .cpt-tpl :where(h1,h2,h3,h4),
.case-content .cpt-tpl :where(h1,h2,h3,h4),
.solution-content .cpt-tpl :where(h1,h2,h3,h4) {
    color: var(--cpt-heading-color);
    font-family: var(--cpt-heading-font);
    line-height: 1.4;
}
.news-content .cpt-tpl p,
.news-content .cpt-tpl li,
.case-content .cpt-tpl p,
.case-content .cpt-tpl li,
.solution-content .cpt-tpl p,
.solution-content .cpt-tpl li { line-height: var(--cpt-spacing); }
.news-content .cpt-tpl a,
.case-content .cpt-tpl a,
.solution-content .cpt-tpl a { color: var(--cpt-accent); border-bottom: 1px solid var(--cpt-accent-soft); text-decoration: none; }
.news-content .cpt-tpl blockquote,
.case-content .cpt-tpl blockquote,
.solution-content .cpt-tpl blockquote {
    background: var(--cpt-accent-soft);
    border-left: 3px solid var(--cpt-accent);
    border-radius: var(--cpt-radius);
    color: var(--cpt-heading-color);
    font-style: italic;
}
.news-content .cpt-tpl img,
.case-content .cpt-tpl img,
.solution-content .cpt-tpl img { border-radius: var(--cpt-radius); }
.news-content .cpt-tpl :where(h2,h3)::before,
.case-content .cpt-tpl :where(h2,h3)::before,
.solution-content .cpt-tpl :where(h2,h3)::before {
    content: ''; display: inline-block; width: 4px; height: 1em;
    background: var(--cpt-accent); border-radius: var(--radius-2xs); margin-right: .5em; vertical-align: -.12em;
}
@media (max-width: 640px) {
    .news-content .cpt-tpl, .case-content .cpt-tpl, .solution-content .cpt-tpl { --cpt-spacing: 1.4em; }
    .news-content .cpt-tpl :where(h2,h3)::before,
    .case-content .cpt-tpl :where(h2,h3)::before,
    .solution-content .cpt-tpl :where(h2,h3)::before { display: none; }
}

/* ===================================================================
   知识库（/knowledge/）专属样式
   =================================================================== */
.kb-section { padding: 5px 0 10px; }
.kb-toolbar { margin-bottom: var(--sp-4); }
.kb-search {
    display: flex; align-items: center; gap: 10px;
    background: var(--glass-bg); border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill); padding: 6px 6px 6px 16px; margin-bottom: var(--sp-3);
    transition: border-color .3s, box-shadow .3s;
}
.kb-search:focus-within { border-color: var(--c-cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-cyan) 15%, transparent); }
.kb-search svg { color: var(--text-secondary); flex: 0 0 auto; }
.kb-search input {
    flex: 1 1 auto; background: transparent; border: 0; outline: 0;
    color: var(--text-primary); font-size: 15px; padding: 10px 4px; font-family: inherit;
}
.kb-search input::placeholder { color: var(--text-secondary); opacity: .7; }
.kb-search button {
    flex: 0 0 auto; border: 0; cursor: pointer; color: var(--btn-text); font-weight: 700; font-size: 14px;
    padding: 10px 24px; border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--c-cyan), var(--c-blue));
    transition: transform .2s, box-shadow .2s;
}
.kb-search button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-cyan) 35%, transparent); }
.kb-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.kb-cat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: var(--radius-pill); font-size: var(--fs-md); text-decoration: none;
    color: var(--text-secondary); background: var(--glass-bg);
    border: 1px solid var(--border-glass); transition: all .25s;
}
.kb-cat em { font-style: normal; font-size: 11px; opacity: .7; }
.kb-cat:hover { color: var(--text-primary); border-color: var(--border-glow); }
.kb-cat.active { color: var(--btn-text); background: linear-gradient(100deg, var(--c-cyan), var(--c-blue)); border-color: transparent; box-shadow: 0 0 16px color-mix(in srgb, var(--c-cyan) 30%, transparent); }
.kb-result-tip { color: var(--text-secondary); font-size: 14px; margin-bottom: var(--sp-3); }
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.kb-card {
    display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg);
    padding: var(--sp-4); transition: transform .4s var(--ease-premium), border-color .4s, box-shadow .4s;
}
.kb-card:hover { transform: translateY(-6px); border-color: var(--border-glow); box-shadow: 0 16px 44px color-mix(in srgb, var(--c-cyan) 14%, transparent); }
.kb-card-cover { display: block; border-radius: calc(var(--radius-lg) - 6px); overflow: hidden; margin: -6px -6px var(--sp-3); aspect-ratio: 16/9; background: linear-gradient(135deg, color-mix(in srgb, var(--c-cyan) 12%, transparent), color-mix(in srgb, var(--c-blue) 10%, transparent)); }
.kb-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-premium); }
.kb-card:hover .kb-card-cover img { transform: scale(1.05); }
.kb-card-cover--fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 6px; color: color-mix(in srgb, var(--c-cyan) 70%, var(--text-dim)); font-size: 12px; letter-spacing: 1px; }
/* 2026-08-15 hero cover 优化：不再占满首屏（21:9 → 底层装饰背景）。
 * 高度跟随 hero 容器（仅由标题/徽章/元数据撑开，约原来 1/2），
 * opacity .55 + scrim 让主题封面成为「氛围底纹」不抢戏，标题浮在上层（z-index:2）。 */
.kb-hero-cover {
    position: absolute; inset: 0; margin: 0; border-radius: 0;
    aspect-ratio: auto; width: 100%; height: 100%;
    overflow: hidden; z-index: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c-cyan) 12%, transparent), color-mix(in srgb, var(--c-blue) 10%, transparent));
}
.kb-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; }
/* scrim：底部偏暗，让标题区保持清晰；顶部留空让渐变与 .kb-hero 背景融合 */
.kb-hero-cover::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-cosmos) 40%, transparent) 0%, transparent 35%, color-mix(in srgb, var(--bg-cosmos) 70%, transparent) 100%);
}
.kb-hero-cover--fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: color-mix(in srgb, var(--c-cyan) 70%, var(--text-dim)); font-size: 14px; letter-spacing: 2px; }
.kb-related { margin-top: 10px; }
.kb-related-title { font-size: 20px; margin-bottom: var(--sp-4); }
.kb-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.kb-cta { padding: 5px 0 10px; }
.kb-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: 5px; }
.kb-pn-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: var(--radius-md); border: 1px solid var(--border-glass); background: color-mix(in srgb, var(--bg-elevated) 60%, transparent); transition: border-color .3s var(--ease-premium), transform .3s var(--ease-premium); }
.kb-pn-item:hover { border-color: var(--border-glow); transform: translateY(-2px); }
.kb-pn-label { font-size: 12px; color: var(--c-cyan-soft); letter-spacing: 1px; }
.kb-pn-title { font-size: 14px; color: var(--text-primary); line-height: 1.5; }
.kb-pn-empty { visibility: hidden; }
.kb-pn-next { text-align: right; }
@media (max-width: 560px) { .kb-pn { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .kb-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kb-related-grid { grid-template-columns: 1fr; } }
.kb-card-cat { display: inline-block; font-size: 12px; color: var(--c-cyan-soft); letter-spacing: 1px; margin-bottom: var(--sp-1); }
.kb-card h3 { font-size: 17px; line-height: 1.5; margin-bottom: var(--sp-1); color: var(--text-primary); }
.kb-card p { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--sp-2); }
.kb-card-meta { display: flex; gap: var(--sp-2); font-size: 12px; color: var(--text-dim); }
.kb-card-meta span:not(:last-child)::after { content: '·'; margin-left: var(--sp-2); opacity: .5; }

/* 详情页 */
.kb-detail { padding: 5px 0 10px; }
.kb-detail-inner { max-width: 1440px; padding: 0 32px; }
/* 文章 Hero（对齐使用条款页 .legal-hero）—— 2026-08-15 优化：高度缩小（原 132+56 → 92+28），标题浮在 cover 之上 */
/* 2026-08-21 优化资讯详情页 hero 标题：改用实色+text-shadow 确保在浅色/深色背景下均可读，
   替代此前 background-clip:text 透明渐变（在浅色 bg-cosmos 上对比度极差） */
.kb-hero {
    position: relative; padding: 92px 0 28px; text-align: center; overflow: hidden;
    background: radial-gradient(1200px 420px at 50% -12%, rgba(64,184,240,.14), transparent 60%), var(--bg-cosmos);
    border-bottom: 1px solid var(--border-glass);
}
.kb-hero .badge {
    display: inline-block; font-size: 12px; letter-spacing: .2em; color: var(--c-cyan);
    border: 1px solid var(--border-glow); border-radius: var(--radius-pill); padding: 6px 16px; margin-bottom: 14px;
    position: relative; z-index: 2;
}
.kb-hero h1 {
    font-size: clamp(26px, 4.2vw, 40px); font-weight: 800;
    margin: 0 auto 10px; max-width: min(960px, 90%);
    /* 实色主题色 + 微妙阴影，确保在任何背景上都清晰可读 */
    color: var(--text-primary);
    text-shadow: 0 1px 0 color-mix(in srgb, var(--bg-cosmos) 40%, transparent),
                 0 2px 8px color-mix(in srgb, var(--bg-cosmos) 25%, transparent);
    line-height: 1.35;
    position: relative; z-index: 2;
    word-break: break-word; overflow-wrap: break-word;
}
.kb-hero .meta { color: var(--text-secondary); font-size: 14px; line-height: 1.85; position: relative; z-index: 2; }
.kb-hero .meta span { white-space: nowrap; }
/* DCH 模板文章的 Hero banner：保留主题视觉，标题下放到双栏左侧栏 */
.kb-hero--dch {
    position: relative;
    min-height: 240px; max-height: 380px;
    padding: 120px 0 40px;
    display: flex; align-items: flex-end; justify-content: flex-start;
    text-align: left; overflow: hidden;
    background:
        radial-gradient(1200px 420px at 50% -12%, color-mix(in srgb, var(--c-cyan) 16%, transparent), transparent 60%),
        var(--bg-cosmos);
    border-bottom: 1px solid var(--border-glass);
}
.kb-hero--dch .kb-hero-media {
    position: absolute; inset: 0; z-index: 0;
}
.kb-hero--dch .kb-hero-media img {
    width: 100%; height: 100%; object-fit: cover;
}
.kb-hero--dch .kb-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, color-mix(in srgb, var(--bg-cosmos) 88%, transparent) 0%, color-mix(in srgb, var(--bg-cosmos) 35%, transparent) 60%, transparent 100%);
}
.kb-hero--dch .kb-hero-fore {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--maxw, 1440px);
    padding: 0 var(--sp-3);
    margin: 0 auto;
}
.kb-hero--dch .badge {
    color: var(--c-cyan);
    border-color: color-mix(in srgb, var(--c-cyan) 45%, transparent);
    background: color-mix(in srgb, var(--c-cyan) 10%, transparent);
}
@media (max-width: 640px) {
    .kb-hero { padding: 72px 0 24px; }
    .kb-hero--dch { min-height: 200px; padding: 96px 0 28px; }
    .kb-hero .meta { font-size: 13px; }
    .kb-detail-inner { padding: 0 18px; }
}
/* 详情页 Hero 滚动探索提示（与全站 .hero-scroll 一致；详情页不复用 .hero 的 --hero-accent，故此处显式着色） */
.kb-hero .hero-scroll,
.kb-hero--dch .hero-scroll { color: var(--text-secondary); }
.kb-hero .scroll-arrow { background: linear-gradient(var(--c-cyan), transparent); }
.kb-hero--dch .scroll-arrow { background: linear-gradient(var(--c-green, var(--c-cyan)), transparent); }
.kb-article { padding: var(--sp-5); border-radius: var(--radius-lg); }
.kb-article-lead { font-size: var(--fs-lg); color: var(--text-secondary); line-height: 1.9; background: color-mix(in srgb, var(--c-cyan) 5%, transparent); border-left: 3px solid var(--c-cyan); padding: 12px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--sp-4); }
.kb-article-body { font-size: var(--fs-lg); line-height: 1.95; color: var(--text-secondary); }
.kb-article-body h1, .kb-article-body h2, .kb-article-body h3, .kb-article-body h4 { color: var(--text-primary); margin: 1.4em 0 .6em; line-height: 1.4; }
.kb-article-body h2 { font-size: 24px; border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }
.kb-article-body h3 { font-size: 19px; }
.kb-article-body p { margin-bottom: 1.15em; }
.kb-article-body ul, .kb-article-body ol { margin: 0 0 1em 1.5em; }
.kb-article-body li { margin-bottom: .35em; }
.kb-article-body a { color: var(--c-cyan); text-decoration: underline; }
.kb-article-body img { max-width: 100%; border-radius: var(--radius-md); margin: 1em 0; }
.kb-article-body blockquote { margin: 1em 0; padding: 12px 18px; border-left: 3px solid var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 5%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.kb-article-body code { font-family: ui-monospace, monospace; background: var(--glass-bg); padding: 2px 6px; border-radius: var(--radius-xs); font-size: .9em; }
.kb-article-body pre { background: color-mix(in srgb, var(--text-primary) 12%, transparent); padding: 16px; border-radius: var(--radius-sm); overflow-x: auto; margin: 1em 0; }
.kb-article-body pre code { background: transparent; padding: 0; }
.kb-article-body table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.kb-article-body th, .kb-article-body td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.kb-article-body th { background: color-mix(in srgb, var(--c-cyan) 8%, transparent); color: var(--text-primary); }
.kb-ask-hint {
    display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4);
    font-size: var(--fs-md); color: var(--c-cyan-soft);
    background: color-mix(in srgb, var(--c-cyan) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--c-cyan) 25%, transparent);
    padding: 12px 16px; border-radius: var(--radius-md);
}

@media (max-width: 900px) {
    .kb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kb-grid { grid-template-columns: 1fr; }
    .kb-article { padding: var(--sp-3); }
}

/* ===== 文章阅读页多布局（知识库内容页） ===== */
.kb-layout { display: grid; gap: 40px; align-items: start; }
.kb-layout-wide      { grid-template-columns: minmax(0, calc(1080px + var(--sp-5) * 2)); justify-content: center; }
.kb-layout-inline    { grid-template-columns: minmax(0, 1120px); justify-content: center; }
.kb-layout-left-wide { grid-template-columns: minmax(0, 1fr) 260px; }
.kb-layout-left-narrow { grid-template-columns: 260px minmax(0, 1fr); }
.kb-layout-left-narrow .kb-toc { order: -1; }
.kb-toc { min-width: 0; }
.kb-layout-wide .kb-toc,
.kb-layout-no-toc .kb-toc { display: none; }
.kb-layout-inline .kb-toc { order: -1; }
.kb-toc-inner {
    position: sticky; top: 96px;
    border: 1px solid var(--border-glass); border-radius: var(--radius-md);
    background: var(--bg-elevated); padding: 18px 16px;
    max-height: calc(100vh - 130px); overflow: auto;
}
.kb-toc-title { font-size: 13px; color: var(--text-dim); letter-spacing: .1em; margin-bottom: 12px; }
.kb-toc-list { list-style: none; margin: 0; padding: 0; }
.kb-toc-li a {
    display: block; padding: 7px 10px; border-radius: 8px;
    color: var(--text-secondary); font-size: var(--fs-md); text-decoration: none; line-height: 1.5;
    transition: background .15s, color .15s;
}
.kb-toc-li a:hover, .kb-toc-li a.active { background: rgba(64,184,240,.12); color: var(--c-cyan); }
.kb-toc-li.level-3 a { padding-left: 24px; font-size: 13px; }
/* 内联目录：顶部紧凑盒，不黏滞，两列排布 */
.kb-layout-inline .kb-toc-inner { position: static; max-height: none; margin-bottom: 4px; }
.kb-layout-inline .kb-toc-list { columns: 2; column-gap: 28px; }
.kb-layout-inline .kb-toc-li { break-inside: avoid; }
@media (max-width: 900px) {
    .kb-layout, .kb-layout-left-wide, .kb-layout-left-narrow, .kb-layout-wide, .kb-layout-inline {
        grid-template-columns: 1fr !important; gap: 22px;
    }
    .kb-toc { order: -1; }
    .kb-toc-inner { position: static; max-height: none; }
    .kb-layout-inline .kb-toc-list { columns: 1; }
}

/* ========== UI-05 响应式图片：懒加载 + 防抖动(CLS) + 淡入 ========== */
.dch-img {
    display: block;
    width: 100%;
    height: auto;
    /* 占位底色：图片未加载前先铺底，避免白闪与布局跳动 */
    background-color: var(--dch-ph, #0b1020);
    object-fit: cover;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .45s ease, transform .45s ease;
}
.dch-img.loaded {
    opacity: 1;
    transform: none;
}
/* 尊重「减少动态效果」偏好（无障碍） */
@media (prefers-reduced-motion: reduce) {
    .dch-img { transition: none; transform: none; }
}
/* 全局内容图：兜底懒加载（首屏之外一律延迟，降低主线程阻塞） */
.case-gallery-item img,
.article-body img,
.rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 10px);
}

/* ============================================================
   前台多主题切换器（访客端浮窗 · front-theme.js）
   采用中性深色玻璃，浮于任意主题之上，不依赖主题变量
   ============================================================ */
/* 主题切换器现为 #floatStack 内的一个 flex 子项（位于电话与回到顶部之间），
   不再独立 fixed 定位；后台关闭开关时该 DOM 不挂载，由 flex 自动等距重排其余图标。 */
.ft-switcher { position: relative; font-family: var(--font-cn, sans-serif); }
.ft-switcher-btn {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary);
    background: var(--bg-drawer);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: var(--shadow-sm);
    cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.ft-switcher-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-md); }
.ft-switcher-pop {
    position: absolute; right: 0; bottom: 56px;
    width: 268px; padding: 14px;
    background: var(--bg-drawer);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 9999;
}
.ft-switcher-pop.open { opacity: 1; visibility: visible; transform: none; }
.ft-switcher-head {
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 10px; letter-spacing: 1px;
}
.ft-switcher-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ft-theme-card {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 9px; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary); font-size: 12px; text-align: left;
    transition: background .18s ease, border-color .18s ease;
}
.ft-theme-card:hover { background: var(--surface-hover); }
.ft-theme-card.is-active { border-color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 14%, transparent); }
.ft-theme-swatch { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.ft-theme-swatch i { width: 12px; height: 12px; border-radius: 3px; display: block; border: 1px solid var(--glass-border); }
.ft-theme-name { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    .ft-switcher-pop { width: 232px; }
    .ft-switcher-grid { grid-template-columns: 1fr; }
}

/* ===== 文章阅读页布局切换器（复用主题切换器视觉） ===== */
.al-switcher { position: relative; font-family: var(--font-cn, sans-serif); }
.al-switcher-btn {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary);
    background: var(--bg-drawer);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: var(--shadow-sm);
    cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.al-switcher-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-md); }
.al-switcher-pop {
    position: absolute; right: 0; bottom: 56px;
    width: 250px; padding: 14px;
    background: var(--bg-drawer);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 9999;
}
.al-switcher-pop.open { opacity: 1; visibility: visible; transform: none; }
.al-switcher-head {
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 10px; letter-spacing: 1px;
}
.al-switcher-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.al-layout-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary); font-size: 13px; text-align: left;
    transition: background .18s ease, border-color .18s ease;
}
.al-layout-card:hover { background: var(--surface-hover); }
.al-layout-card.is-active { border-color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 14%, transparent); color: var(--text-primary); }
/* 布局示意 mini 图标 */
.al-layout-ico { display: inline-flex; gap: 2px; flex: 0 0 auto; align-items: stretch; width: 22px; height: 16px; }
.al-layout-ico i { display: block; border-radius: var(--radius-2xs); background: currentColor; opacity: .55; }
.al-layout-ico.wide i { width: 22px; height: 16px; }
.al-layout-ico.left-wide i:first-child { width: 13px; }
.al-layout-ico.left-wide i:last-child { width: 5px; }
.al-layout-ico.left-narrow i:first-child { width: 5px; }
.al-layout-ico.left-narrow i:last-child { width: 13px; }
.al-layout-ico.inline i { width: 22px; height: 4px; }
.al-layout-ico.inline i + i { display: none; }
.al-layout-name { line-height: 1.2; }
@media (max-width: 640px) {
    .al-switcher-pop { width: 220px; }
}

/* ===================================================================
   前台语言切换器（顶栏右侧 + 页脚）
   位置：顶部导航栏右侧（行业最佳实践），与主题切换器、回到顶部同为全局入口；
   配色全部走前台主题令牌，亮/暗主题下均保持高对比。
   =================================================================== */
.lang-switch { position: relative; display: inline-flex; }
.lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 12px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg-drawer) 82%, transparent);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-size: 13px; font-weight: 600; letter-spacing: .3px; cursor: pointer;
    backdrop-filter: blur(8px);
    transition: border-color .25s, box-shadow .25s, transform .2s;
}
.lang-btn:hover { border-color: var(--c-cyan); transform: translateY(-1px); box-shadow: 0 0 16px color-mix(in srgb, var(--c-cyan) 35%, transparent); }
.lang-btn:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.lang-btn-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.lang-btn-code { white-space: nowrap; }

.lang-popover {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 222px; padding: 10px;
    background: var(--bg-drawer);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    z-index: 1200;
}
/* 2026-08-17 语言切换器改为「三语选项」：lang-fab-pill 为横排胶囊，内含 中/EN/日 三个标签，
   当前语言高亮、未启用语言（日文默认）灰显禁用。 */
.lang-fab-pill {
    width: auto; height: auto; min-width: 0; min-height: 0;
    padding: 5px 6px; border-radius: 22px; gap: 2px;
    flex-direction: row; align-items: center;
}
.lang-fab-pill .lang-fab-opt {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 7px;
    border-radius: 16px;
    font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1;
    color: var(--text-secondary); text-decoration: none;
    transition: background .25s var(--ease-premium), color .25s, border-color .25s;
}
.lang-fab-pill .lang-fab-opt:hover { color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 10%, transparent); }
.lang-fab-pill .lang-fab-opt.active {
    color: var(--c-cyan);
    background: color-mix(in srgb, var(--c-cyan) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 45%, transparent);
}
.lang-fab-pill .lang-fab-opt.disabled {
    color: var(--text-dim); opacity: .5; cursor: not-allowed;
}
.lang-fab-pill .lang-fab-opt.disabled:hover { color: var(--text-dim); background: none; }
.lang-fab-pill:hover { transform: scale(1.05); border-color: var(--c-cyan); box-shadow: 0 0 18px color-mix(in srgb, var(--c-cyan) 40%, transparent); }
.lang-popover-header {
    font-size: 12px; font-weight: 600; color: var(--text-dim);
    padding: 4px 8px 8px; letter-spacing: .5px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 8px;
}
.lang-popover-list { display: flex; flex-direction: column; gap: 4px; }
.lang-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none;
    transition: background .2s, color .2s;
}
.lang-opt:hover { background: var(--surface-hover); color: var(--text-primary); }
.lang-opt.active { background: color-mix(in srgb, var(--c-cyan) 14%, transparent); color: var(--text-primary); }
.lang-opt.active::after { content: '✓'; margin-left: auto; color: var(--c-cyan); font-weight: 700; }
.lang-flag { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.lang-name { font-weight: 600; }
.lang-code { margin-left: auto; font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* 页脚内联语言切换 */
.footer-lang { display: inline-flex; align-items: center; gap: 2px; }
.footer-lang-opt {
    padding: 2px 9px; border-radius: var(--radius-pill);
    color: var(--text-dim); text-decoration: none; font-size: 13px;
    transition: color .2s, background .2s;
}
.footer-lang-opt:hover { color: var(--text-primary); background: var(--surface-hover); }
.footer-lang-opt.active { color: var(--c-cyan); font-weight: 600; }

@media (max-width: 640px) {
    .lang-btn-code { display: none; }
    .lang-popover { width: 200px; }
}

/* ===== Hero 横幅遮罩 · 品牌 tint + 可读性 scrim + 图片明暗感知（2026-08-15 · B+ 方案）=====
   结构（三层，z-index 均 0，叠在背景图之上、文字之下）：
     .hero-banner-tint  品牌色 tint：--c-cyan/--c-purple/--c-blue 混合，随主题自动取色，全 16 主题无需枚举
     .hero-banner-mask  可读性 scrim：--bg-cosmos 左→右线性渐变，随主题深浅自动适配（深主题=深幕、浅主题=浅幕）
   明暗感知：JS 检测 banner/slide/poster 最暗一张 → <section> 上 data-hero-tone="dark"|"light"
   [data-hero-tone="dark"]：强制深幕 + 文字提亮（与主题深浅解耦），解决「深色图 + 浅色主题」深字深图不可读 */
.hero-banner-tint {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--c-cyan) 16%, transparent) 0%,
      color-mix(in srgb, var(--c-purple) 10%, transparent) 55%,
      color-mix(in srgb, var(--c-blue) 13%, transparent) 100%);
  pointer-events: none;
}
/* ===== Hero 遮罩（2026-08-16 反转默认）=====
   旧版默认用 --bg-cosmos 做 mask 基线，浅色主题下混出浅色半透明，对深色图完全不挡；
   JS 设 data-hero-tone="dark" 后才用固定深色 rgba，导致缓存旧 JS/JS 失败时文字不可见。
   新策略：默认就用固定深色 rgba 压暗左侧文字区（保证不开 JS 也可读），
   JS 检测到浅色横幅图时设 data-hero-tone="light"，反过来用浅幕 + 深字。 */
.hero-banner-mask {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(8,12,24,.78) 0%,
    rgba(8,12,24,.55) 35%,
    rgba(8,12,24,.20) 70%,
    transparent 100%);
  pointer-events: none;
}
/* split 布局：左侧文字区更深、右侧图区更透（默认深幕） */
.hero-split-media .hero-banner-mask,
.hero-split .hero-banner-mask {
  background: linear-gradient(90deg,
    rgba(8,12,24,.84) 0%,
    rgba(8,12,24,.60) 38%,
    rgba(8,12,24,.18) 72%,
    transparent 100%);
}
/* ===== Hero 默认文字提亮（与深幕配对，作用域内不污染全局）=====
   默认假设横幅图为深色：左侧深幕 + 浅色文字；JS 检测到浅色图时由下方 [data-hero-tone="light"] 反转。 */
/* 默认 .hero 上直接给 color：.hero-title 等无显式 color 的元素靠继承拿到浅色，
   而非依赖 var() 重解析（var 只对显式 var() 生效，对继承 color 无效——这就是此前标题仍深色的根因） */
.hero {
  color: #F2F5FA;
  --text-primary: #F2F5FA;
  --text-secondary: #C9D4E4;
  --text-dim: #93A3B8;
}
/* ===== 浅色横幅图（data-hero-tone="light"）：反转成浅幕 + 深字 =====
   仅当 JS 主动判定横幅图整体偏亮时才覆盖；多数业务横幅都是深色图故此分支罕见。 */
.hero[data-hero-tone="light"] {
  color: #101826;
  --text-primary: #101826;
  --text-secondary: #42506A;
  --text-dim: #6B7A92;
}
.hero[data-hero-tone="light"] .hero-banner-mask {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg-cosmos) 82%, transparent) 0%,
    color-mix(in srgb, var(--bg-cosmos) 58%, transparent) 35%,
    color-mix(in srgb, var(--bg-cosmos) 22%, transparent) 70%,
    transparent 100%);
}
.hero[data-hero-tone="light"] .hero-split-media .hero-banner-mask,
.hero[data-hero-tone="light"] .hero-split .hero-banner-mask {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg-cosmos) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg-cosmos) 62%, transparent) 38%,
    color-mix(in srgb, var(--bg-cosmos) 20%, transparent) 72%,
    transparent 100%);
}

/* ================================================================
   焦点可见性（WCAG 2.1 · 2.4.7 Focus Visible / 2.4.11 Focus Appearance）
   ----------------------------------------------------------------
   背景：全站原仅 1 处 :focus-visible（.lang-btn），却有 4 处 outline:none，
   键盘用户在搜索框、表单、主按钮上完全看不到焦点位置。
   策略：
   1) 用 :where() 保持 0 特异性做全局兜底，不干扰任何既有组件样式；
   2) 用 :focus-visible 而非 :focus，鼠标点击不出现焦点环，不影响视觉设计；
   3) 对已写 outline:none 的元素用等/高特异性选择器逐个补回。
   例外：.privacy-modal .pm-title 带 tabindex="-1"，是弹层打开时的
        程序化焦点目标（供读屏播报标题），其 outline:none 是正确做法，
        故意不在此补焦点环。
   ================================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* 搜索面板输入框（原 outline:none 无替代） */
.search-form input[type="search"]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* 联系表单控件（原仅有 box-shadow 弱环，补真实 outline） */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* 自定义下拉触发器（原 outline:none，仅靠 border-color 传达状态） */
.cs-trigger:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* 主按钮系列：自带外发光 box-shadow，普通 outline 易被淹没，
   加大 offset 让焦点环脱离辉光区 */
.btn:focus-visible,
.nav-cta:focus-visible,
.case-filter:focus-visible,
.search-submit:focus-visible,
.search-close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

/* 导航链接与页脚链接 */
.nav-link:focus-visible,
.footer a:focus-visible,
.privacy-modal .pm-close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* 卡片式可点区域（整卡可聚焦时） */
.case-card:focus-visible,
.kb-card:focus-visible,
.biz-card:focus-visible,
.news-card:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* ==========================================================================
   DCH 官网新闻版式（导入文章统一模板 · 2026-08-09 重构）
   作用域：.dch-page（双栏布局）与 .news-content（兼容旧单栏）
   来源：AI 成文模板「大成汇官网新闻版式」（用户确认 1440 / 260 / 1080 规格）
   铁律：框架层提供样式，任何导入带 class="dch-body" 的文章均自动按此版式渲染
   ========================================================================== */

/* ---- DCH 设计令牌（2026-08-20 改：跟随官网前台主题，不再硬编码红） ----
   原 --dch-red 固定 #DC2626；现改为指向官网主题主强调 --c-cyan，
   因此切换 data-theme（深空/柑橘/财经…十多种主题）时，案例文章配色随之变化。
   --dch-red-ink 为加深版（用于文字/标题），保证浅底上可读性；
   --dch-red-tint / --dch-red-line 为浅底与描边派生色。 */
.dch-page, .news-content {
    --dch-red:       var(--c-cyan);
    --dch-red-ink:   color-mix(in srgb, var(--c-cyan) 55%, #000);
    --dch-red-tint:  color-mix(in srgb, var(--c-cyan) 8%, transparent);
    --dch-red-line:  color-mix(in srgb, var(--c-cyan) 25%, transparent);
    --dch-dark:   #1F2937;
    --dch-gray:   var(--text-secondary);
    --dch-light:  var(--glass-bg);
    --dch-border: var(--hairline);
}

/* ---- 双栏容器（1440 总宽 / 340 信息栏 / 1080 正文） ----
   2026-08-09 更新：左栏从 260 扩到 340（用户要求接近正文区左侧），
   标题从 28px 缩到 22px（参考模板但减一号），背景跟随主题变量 ---- */
.dch-section { background: var(--bg-cosmos); color: var(--text-primary); padding: 0px 0; }
.dch-page   { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.dch-article { display: flex; gap: 10px; padding: 0 0 0; align-items: flex-start; }
.dch-aside  { flex: 0 0 358px; max-width: 358px; position: sticky; top: calc(var(--nav-h) + 64px); padding: 24px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); backdrop-filter: blur(8px); }

/* 左侧信息栏（标题 / 元信息 / 标签 / 返回） */
.dch-aside .dch-label { display: inline-block; background: var(--dch-red); color: #fff; font-size: 13px; padding: 3px 12px; border-radius: 999px; letter-spacing: 1px; margin-bottom: 18px; }
.dch-aside h1 { font-size: 22px; line-height: 1.45; font-weight: 700; color: var(--dch-red-ink); margin: 0 0 20px; }
.dch-aside .dch-meta { font-size: 14px; color: var(--text-secondary); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 14px 0; margin-bottom: 20px; }
.dch-aside .dch-meta p { margin: 4px 0; }
.dch-aside .dch-meta b { color: var(--dch-red-ink); font-weight: 600; margin-right: 6px; }
.dch-aside .dch-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.dch-aside .dch-tags span,
.dch-aside .dch-tags a { display: inline-block; font-size: 12px; color: var(--dch-red-ink); background: var(--dch-red-tint); border: 1px solid var(--dch-red-line); padding: 2px 10px; border-radius: 999px; margin: 0 6px 8px 0; text-decoration: none; }
.dch-aside .dch-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 8px 16px;
    color: var(--text-secondary); text-decoration: none; font-size: 14px;
    border: 1px solid var(--hairline); border-radius: 8px;
    transition: color .25s, border-color .25s, background .25s;
}
.dch-aside .dch-back:hover { color: var(--dch-red); border-color: var(--dch-red); background: color-mix(in srgb, var(--dch-red) 6%, transparent); }

/* ---- 左栏丰富区（站内能力）---- */
/* 站内搜索 */
.dch-aside .dch-search {
    position: relative; display: flex; align-items: center;
    margin: 16px 0; padding: 4px 4px 4px 36px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    transition: border-color .25s, background .25s;
}
.dch-aside .dch-search:focus-within { border-color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 6%, transparent); }
.dch-aside .dch-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-dim); font-size: 16px; line-height: 1;
}
.dch-aside .dch-search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    color: var(--text-primary); font-size: 13px;
}
.dch-aside .dch-search input::placeholder { color: var(--text-dim); }
.dch-aside .dch-search button {
    border: 0; cursor: pointer;
    padding: 6px 14px;
    color: #fff; background: var(--c-cyan);
    border-radius: 999px; font-size: 12px;
    transition: opacity .25s;
}
.dch-aside .dch-search button:hover { opacity: .85; }

/* 近期新闻 */
.dch-aside .dch-recent {
    margin: 12px 0 16px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--c-cyan) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 20%, transparent);
    border-radius: 12px;
}
.dch-aside .dch-recent-title {
    margin: 0 0 10px;
    font-size: 13px; color: var(--c-cyan); font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.dch-aside .dch-recent-title::before {
    content: ''; width: 3px; height: 13px; background: var(--c-cyan); border-radius: 2px;
}
.dch-aside .dch-recent-list { list-style: none; margin: 0; padding: 0; }
.dch-aside .dch-recent-list li { margin: 6px 0; line-height: 1.5; }
.dch-aside .dch-recent-list a {
    color: var(--text-secondary); text-decoration: none;
    font-size: 13px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .25s;
}
.dch-aside .dch-recent-list a:hover { color: var(--c-cyan); }

/* 文章版权声明（DCH 双栏文章左栏标题框下方，亦用于后台预览） */
.dch-legal {
    padding: 14px 16px;
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--c-cyan);
    border-radius: 12px;
    text-align: left;
}
.dch-aside .dch-legal { margin: 16px 0; }
.dch-legal-head {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 8px;
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.dch-legal-head svg { color: var(--c-cyan); flex: none; }
.dch-legal-text {
    margin: 0;
    font-size: 12.5px; line-height: 1.75; color: var(--text-secondary);
}
.dch-legal-link { color: var(--c-cyan); text-decoration: none; }
.dch-legal-link:hover { text-decoration: underline; }

/* ---- 正文区（.dch-body & children，h2 红左边框等版式特征） ---- */
.dch-page .dch-body,
.news-content .dch-body { flex: 1; min-width: 0; max-width: min(1080px, calc(100% - 368px)); padding: 28px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); backdrop-filter: blur(8px); }
.dch-page .dch-body h2,
.news-content .dch-body h2 { font-size: 24px; color: var(--dch-red-ink); margin: 36px 0 16px; padding-left: 14px; border-left: 4px solid var(--dch-red); font-weight: 700; }
.dch-page .dch-body h3,
.news-content .dch-body h3 { font-size: 19px; color: var(--dch-red-ink); margin: 28px 0 12px; font-weight: 700; }
.dch-page .dch-body p,
.news-content .dch-body p  { font-size: 16px; margin: 12px 0; text-align: justify; color: var(--text-primary); }
.dch-page .dch-body a,
.news-content .dch-body a  { color: var(--c-cyan); text-decoration: underline; }
.dch-page .dch-body ul,
.news-content .dch-body ul,
.dch-page .dch-body ol,
.news-content .dch-body ol { margin: 12px 0 12px 24px; color: var(--text-primary); }
.dch-page .dch-body li,
.news-content .dch-body li { font-size: 16px; margin: 6px 0; }
.dch-page .dch-body blockquote,
.news-content .dch-body blockquote { font-size: 15px; color: var(--text-secondary); border-left: 3px solid var(--dch-red); background: var(--dch-red-tint); padding: 12px 18px; margin: 16px 0; border-radius: 0 8px 8px 0; }
.dch-page .dch-body table,
.news-content .dch-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.dch-page .dch-body th,
.news-content .dch-body th { background: var(--dch-red); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
.dch-page .dch-body td,
.news-content .dch-body td { border: 1px solid var(--hairline); padding: 10px 14px; color: var(--text-primary); }
.dch-page .dch-body tr:nth-child(even),
.news-content .dch-body tr:nth-child(even) { background: color-mix(in srgb, var(--c-cyan) 4%, transparent); }
.dch-page .dch-body img,
.news-content .dch-body img { border-radius: 8px; margin: 16px 0; }
/* 2026-08-20：二维码图片（文案发小尺寸二维码）限制为小尺寸居中，避免前台被拉伸成大图；
   同时 img.php 对二维码豁免水印（wm_is_qr_skip）。匹配：文件名/alt 含 qr/二维码/微信/公众号 等，
   或正文 .dch-qr 包裹的图。 */
.dch-page .dch-body img.dch-img-qr,
.news-content .dch-body img.dch-img-qr,
.dch-page .dch-body .dch-qr img,
.news-content .dch-body .dch-qr img {
    max-width: 200px; width: auto; height: auto;
    margin: 16px auto; display: block;
    padding: 8px; background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
/* 2026-08-20：DCH 模板横幅标题（此前 banner 仅放分类 badge，标题被下放到左栏；
   现恢复 banner 标题，满足「顶部横幅显示标题」诉求）
   2026-08-21 优化：从硬编码白色改为 text-primary + 自适应阴影，确保无 cover_image 时在浅色背景上可读 */
.kb-hero--dch .kb-hero-title {
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 700; line-height: 1.35;
    color: var(--text-primary);
    margin: 14px 0 0;
    /* 双层阴影：深色描边 + 背景色晕染，适配浅色/深色底图 */
    text-shadow:
        0 1px 0 color-mix(in srgb, var(--bg-cosmos) 50%, transparent),
        0 2px 12px color-mix(in srgb, var(--bg-cosmos) 30%, transparent),
        0 1px 4px rgba(0,0,0,.18);
}
.dch-page .dch-body .dch-figcap,
.news-content .dch-body .dch-figcap { font-size: 13px; color: var(--text-secondary); text-align: center; margin: -8px 0 20px; }
.dch-page .dch-body .dch-callout,
.news-content .dch-body .dch-callout { background: var(--dch-red-tint); border-left: 4px solid var(--dch-red); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 20px 0; font-size: 15px; color: var(--text-primary); }

/* ---- 文末来源 / 内链块 ---- */
.dch-page .dch-footer,
.news-content .dch-footer { border-top: 2px solid var(--dch-red); margin-top: 48px; padding-top: 24px; }
.dch-page .dch-footer h3,
.news-content .dch-footer h3 { font-size: 17px; color: var(--dch-red-ink); margin-bottom: 12px; font-weight: 700; }
.dch-page .dch-footer ol,
.news-content .dch-footer ol { margin-left: 20px; }
.dch-page .dch-footer li,
.news-content .dch-footer li { font-size: 14px; color: var(--text-secondary); margin: 6px 0; word-break: break-all; }
.dch-page .dch-footer a,
.news-content .dch-footer a  { color: var(--dch-red); }
.dch-page .dch-footer .dch-links,
.news-content .dch-footer .dch-links { margin-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.dch-page .dch-footer .dch-links a,
.news-content .dch-footer .dch-links a { font-size: 14px; color: var(--text-secondary); text-decoration: none; border: 1px solid var(--hairline); padding: 6px 18px; border-radius: 6px; }
.dch-page .dch-footer .dch-links a:hover,
.news-content .dch-footer .dch-links a:hover { border-color: var(--dch-red); color: var(--dch-red); }

/* ---- SEO 摘要块 ---- */
.dch-page .dch-seo-summary,
.news-content .dch-seo-summary { background: var(--dch-red-tint); border-left: 4px solid var(--dch-red); border-radius: 0 8px 8px 0; padding: 16px 22px; margin: 0 0 28px; font-size: 14px; }
.dch-page .dch-seo-row,
.news-content .dch-seo-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; align-items: center; }
.dch-page .dch-seo-row span,
.news-content .dch-seo-row span { font-size: 13px; color: var(--text-secondary); }
.dch-page .dch-seo-cat,
.news-content .dch-seo-cat  { background: var(--dch-red); color: #fff; padding: 3px 14px; border-radius: 999px; font-weight: 600; }
.dch-page .dch-seo-lead,
.news-content .dch-seo-lead { font-size: 15px; color: var(--text-primary); margin: 0 0 12px; line-height: 1.8; font-weight: 500; }
.dch-page .dch-seo-lead strong,
.news-content .dch-seo-lead strong { color: var(--dch-red-ink); margin-right: 4px; }
.dch-page .dch-seo-kw,
.news-content .dch-seo-kw   { font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.dch-page .dch-seo-kw strong,
.news-content .dch-seo-kw strong { color: var(--text-primary); margin-right: 6px; }
.dch-page .dch-seo-kw span,
.news-content .dch-seo-kw span { display: inline-block; color: var(--dch-red-ink); background: var(--dch-red-tint); border: 1px solid var(--dch-red-line); padding: 2px 10px; border-radius: 999px; margin: 2px 6px 2px 0; font-weight: 500; }

/* ---- DCH 移动端降级（单栏 · 匹配模板 1024 / 768 断点） ---- */
@media (max-width: 1024px) {
    .dch-page   { padding: 0 18px; }
    .dch-article{ flex-direction: column; gap: 10px; padding: 24px 0 48px; }
    .dch-aside  { flex: 1 1 auto; max-width: none; position: static; }
    .dch-aside h1 { font-size: 20px; }
    .dch-page .dch-body,
    .news-content .dch-body { max-width: none; }
}
@media (max-width: 768px) {
    .dch-page .dch-seo-summary,
    .news-content .dch-seo-summary { padding: 14px 16px; }
    .dch-page .dch-seo-row,
    .news-content .dch-seo-row { gap: 10px; }
}

/* ===== 2026-08-15 五次增强·4.0.2：Hero 编辑弹窗实时预览专用类 ===== */
.hero-preview-box {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 6;
    border: 1px solid var(--border-glow, rgba(120,160,255,.25));
    box-shadow: 0 18px 48px rgba(0,0,0,.25) inset, 0 8px 24px rgba(0,0,0,.18);
}
.hero-preview-canvas { pointer-events: none; }
.hero-preview-banner { pointer-events: none; }
.hero-preview-banner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 25% 45%, rgba(8,12,24,.55) 0%, rgba(8,12,24,.28) 45%, rgba(8,12,24,.08) 100%);
}
/* 弹窗编辑左栏分区标题 */
.editor-section-title { font-size: 13px; font-weight: 700; letter-spacing: .5px; opacity: .75; }
/* 卡片视图 no-img 兜底（hero 卡片无 banner 时） */
.hero-cards .cm-card__cover.no-img { background: linear-gradient(135deg, rgba(64,184,240,.16), rgba(139,92,246,.10)); }

/* 2026-08-15 五次增强·4.0.3：Hero 编辑弹窗 A 方案（左右两列），680px 以下降级单列 */
.hero-modal-layout { align-items: stretch; }
.hero-modal-layout .editor-left-panel,
.hero-modal-layout .editor-right-panel { display: block; }
.hero-modal-right .cover-preview { height: auto; }
@media (max-width: 720px) {
    .hero-modal-layout { flex-direction: column; }
}

/* 2026-08-15 五次增强·4.0.4：Hero 编辑弹窗美化（品牌色/卡片化/图标/focus 增强） */
.hero-modal-layout { align-items: stretch; }
.hero-modal-layout .editor-left-panel,
.hero-modal-layout .editor-right-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
.hero-modal-section {
    position: relative;
    background: linear-gradient(180deg, rgba(64,184,240,.04) 0%, rgba(139,92,246,.03) 100%);
    border: 1px solid var(--border-glass, rgba(120,160,255,.12));
    border-radius: 12px;
    padding: 14px 16px 16px;
    transition: border-color .2s;
}
.hero-modal-section:hover { border-color: var(--border-glow, rgba(120,160,255,.28)); }
.hero-modal-section__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    color: var(--c-cyan, #40b8f0);
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-glass, rgba(120,160,255,.16));
}
.hero-modal-section__title .ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, rgba(64,184,240,.18), rgba(139,92,246,.14));
    border: 1px solid var(--border-glow, rgba(120,160,255,.2));
    color: var(--c-cyan, #40b8f0);
}
.hero-modal-section__title .ico svg { width: 13px; height: 13px; }
.hero-modal-field { margin-bottom: 10px; }
.hero-modal-field:last-child { margin-bottom: 0; }
.hero-modal-field__label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text-secondary, #b6c2d6);
    margin-bottom: 4px; letter-spacing: .3px;
}
.hero-modal-field__input {
    width: 100%; padding: 9px 12px; font-size: 13px;
    background: var(--bg-drawer, rgba(13,18,33,.6));
    border: 1px solid var(--border-glass, rgba(120,160,255,.18));
    border-radius: 8px; color: var(--text-primary, #e6edf7);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.hero-modal-field__input:hover { border-color: var(--border-glow, rgba(120,160,255,.32)); }
.hero-modal-field__input:focus {
    outline: none; border-color: var(--c-cyan, #40b8f0);
    box-shadow: 0 0 0 3px rgba(64,184,240,.18);
    background: rgba(13,18,33,.8);
}
.hero-modal-field__input[readonly] { background: rgba(255,255,255,.03); color: var(--text-dim); cursor: default; }
.hero-modal-row { display: flex; gap: 10px; }
.hero-modal-row > * { flex: 1; }
.hero-modal-seg { display: inline-flex; padding: 2px; background: var(--bg-drawer, rgba(13,18,33,.6)); border: 1px solid var(--border-glass, rgba(120,160,255,.18)); border-radius: 8px; }
.hero-modal-seg__btn {
    padding: 6px 12px; font-size: 12px; color: var(--text-secondary);
    background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: all .2s;
}
.hero-modal-seg__btn:hover { color: var(--text-primary); }
.hero-modal-seg__btn.active { background: linear-gradient(135deg, var(--c-cyan, #40b8f0), var(--c-blue, #6366f1)); color: #fff; box-shadow: 0 4px 10px rgba(64,184,240,.32); }
.hero-modal-banner { position: relative; border: 2px dashed var(--border-glow, rgba(120,160,255,.32)); border-radius: 12px; overflow: hidden; aspect-ratio: 16/6; background: linear-gradient(135deg, rgba(64,184,240,.08), rgba(139,92,246,.06)); margin-bottom: 10px; transition: border-color .2s; }
.hero-modal-banner:hover { border-color: var(--c-cyan, #40b8f0); }
.hero-modal-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-modal-banner-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-tertiary, #6b7891); pointer-events: none; }
.hero-modal-banner .cover-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(8,12,24,.78); color: #fff; border: none; cursor: pointer; }
.hero-modal-actions { display: flex; gap: 8px; margin-top: 8px; }
.hero-modal-actions .glass-btn { flex: 1; padding: 8px 12px; }
.hero-modal-front-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; font-size: 12px; color: var(--c-cyan, #40b8f0); border: 1px solid var(--border-glow); border-radius: 999px; text-decoration: none; transition: all .2s; }
.hero-modal-front-link:hover { background: rgba(64,184,240,.12); color: var(--c-blue, #6366f1); }
@media (max-width: 720px) {
    .hero-modal-layout { flex-direction: column; }
}

/* 2026-08-15 五次增强·4.0.5：Hero 弹窗品牌头部 + 字段 hover + 主按钮品牌色 */
.hero-modal-head {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px;
    background: linear-gradient(120deg, rgba(64,184,240,.14) 0%, rgba(139,92,246,.10) 50%, rgba(236,72,153,.08) 100%);
    border-bottom: 1px solid var(--border-glow, rgba(120,160,255,.22));
}
.hero-modal-head__title {
    font-size: 16px; font-weight: 700; letter-spacing: .3px;
    background: linear-gradient(100deg, var(--c-cyan, #40b8f0), var(--c-blue, #6366f1));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero-modal-head__meta { display: flex; gap: 6px; margin-left: auto; }
.hero-modal-head__chip {
    font-size: 11px; padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,.04); color: var(--text-secondary);
    border: 1px solid var(--border-glass, rgba(120,160,255,.18));
    letter-spacing: .3px;
}
.hero-modal-field { transition: transform .15s ease; }
.hero-modal-field:hover { transform: translateX(2px); }
.hero-modal-field__label { display: flex; align-items: center; gap: 4px; }
.hero-modal-field__label::before {
    content: ''; display: inline-block; width: 3px; height: 12px;
    background: linear-gradient(180deg, var(--c-cyan, #40b8f0), var(--c-blue, #6366f1));
    border-radius: 2px; opacity: .65; margin-right: 2px; transition: opacity .2s;
}
.hero-modal-field:hover .hero-modal-field__label::before { opacity: 1; }
.hero-modal-seg { background: linear-gradient(180deg, rgba(64,184,240,.04), rgba(139,92,246,.03)); }
.hero-modal-banner { background: linear-gradient(135deg, rgba(64,184,240,.10), rgba(139,92,246,.08)), rgba(255,255,255,.02); }
/* modal 主体：暗色玻璃感 + 微纹理 */
.modal-body .editor-layout.hero-modal-layout { background: transparent; }
/* modal 底部按钮（save & publish 主按钮高亮）—— 由 cockpitModal.onSave 触发的「保存并发布」按钮选择器待确认 */
.cockpit-modal-footer .cockpit-modal-save-publish,
.cockpit-modal-footer button.cockpit-modal-save-publish { background: linear-gradient(135deg, var(--c-cyan, #40b8f0), var(--c-blue, #6366f1)) !important; box-shadow: 0 4px 14px rgba(64,184,240,.32) !important; }
.cockpit-modal-footer .cockpit-modal-save-publish:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(64,184,240,.42) !important; }

/* ================================================================
   服务详情「服务范围」框架（2026-08-21 新增）
   ----------------------------------------------------------------
   用途：/service/<slug> 详情页「服务范围」section —— 对比表 + 交付物矩阵，
   图表式展示服务框架，贴合 B2B 弱电工程服务商特性。
   仅用设计令牌（var(--xxx)），随主题换肤。
   ================================================================ */
.scope-table-wrap {
    max-width: 1240px; margin: 0 auto var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.scope-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
.scope-table thead th {
    background: color-mix(in srgb, var(--c-cyan) 10%, transparent);
    color: var(--text-primary); font-weight: 600;
    padding: 14px 18px; text-align: left;
    border-bottom: 1px solid var(--hairline);
}
.scope-table tbody th,
.scope-table tbody td {
    padding: 14px 18px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-secondary); line-height: 1.6; font-size: 14px;
}
.scope-table tbody th { color: var(--text-primary); font-weight: 600; white-space: nowrap; width: 130px; }
.scope-table tbody td:nth-child(4) { color: var(--text-primary); font-weight: 500; background: color-mix(in srgb, var(--c-cyan) 3%, transparent); }
.scope-table tbody tr:last-child th,
.scope-table tbody tr:last-child td { border-bottom: 0; }
.scope-table tbody td.scope-pro { color: var(--accent-azure, #40b8f0); }
.scope-table tbody tr:hover { background: color-mix(in srgb, var(--c-cyan) 3%, transparent); }

/* 图例条（标准 vs 专业 含义说明） */
.scope-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
    max-width: 1240px; margin: 0 auto var(--sp-3);
    padding: 10px 18px; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-cyan) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 12%, transparent);
    font-size: 13px; color: var(--text-secondary);
}
.scope-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.scope-legend__item strong { color: var(--text-primary); font-weight: 600; }
.scope-legend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.scope-legend__dot--std { background: var(--text-secondary); }
.scope-legend__dot--pro { background: var(--accent-azure, #40b8f0); }
.scope-legend__hint { color: var(--text-dim); margin-left: auto; font-size: 12px; }
@media (max-width: 640px) { .scope-legend__hint { margin-left: 0; width: 100%; } }
.scope-deliverables {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-3); max-width: 1100px; margin: 0 auto;
}
@media (max-width: 640px) {
    .scope-table-wrap { padding: var(--sp-2); }
    .scope-table { font-size: 13px; }
    .scope-table tbody th { white-space: normal; width: auto; }
}

/* 服务详情页「服务内容」配图：通栏横幅（16:9 居中裁切）
   仅作用于 .svc-article（服务详情容器），不影响 solutions 等其它 .solution-article 页面的 620px 限宽 */
.svc-article .about-text figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}
/* 详情页服务内容：H2①/H2② 全宽（红线撑满容器），
   figure 嵌在两个 H2 之间（垂直居中放置、水平居中限宽） */
.svc-article .about-text .grid-2 { display: block; }
.svc-article .about-text figure {
    margin: var(--sp-5) auto;
    max-width: 880px;
}
.svc-article .about-text figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}
.svc-article .about-text figure figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}
@media (max-width: 760px) {
    .svc-article .about-text figure { margin: var(--sp-3) auto; max-width: 100%; }
}

/* ================================================================
   服务详情「一个要点一个渐变色」层次（2026-08-21）
   全部基于主题令牌 var(--c-*)，随 19 套主题 [data-theme] 自动换肤；
   color-mix 弱混合 → 深浅主题下对比度均由主题令牌校准保证。
   ================================================================ */

/* —— 服务内容 h2：每个要点一条主题渐变下划线 —— */
.svc-article .about-text h2 { position: relative; border-bottom: 0; padding-bottom: 12px; }
.svc-article .about-text h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; }
.svc-article .about-text h2:nth-of-type(1)::after { background: linear-gradient(90deg, var(--c-cyan), color-mix(in srgb, var(--c-cyan) 25%, transparent)); }
.svc-article .about-text h2:nth-of-type(2)::after { background: linear-gradient(90deg, var(--c-blue), color-mix(in srgb, var(--c-blue) 25%, transparent)); }
.svc-article .about-text h2:nth-of-type(3)::after { background: linear-gradient(90deg, var(--c-purple), color-mix(in srgb, var(--c-purple) 25%, transparent)); }
.svc-article .about-text h2:nth-of-type(4)::after { background: linear-gradient(90deg, var(--c-orange), color-mix(in srgb, var(--c-orange) 25%, transparent)); }
.svc-article .about-text h2:nth-of-type(5)::after { background: linear-gradient(90deg, var(--c-green), color-mix(in srgb, var(--c-green) 25%, transparent)); }

/* —— 服务内容列表：要点渐变圆点（交替两色循环） —— */
.svc-article .about-text ul { list-style: none; margin-left: 0; padding-left: 0; }
.svc-article .about-text li { position: relative; padding-left: 24px; }
.svc-article .about-text li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--c-cyan), color-mix(in srgb, var(--c-cyan) 35%, transparent)); }
.svc-article .about-text li:nth-child(even)::before { background: linear-gradient(135deg, var(--c-blue), color-mix(in srgb, var(--c-blue) 35%, transparent)); }

/* —— 服务范围表：行级阶段渐变 —— */
.scope-table tbody tr:nth-child(1) th { background: linear-gradient(90deg, color-mix(in srgb, var(--c-cyan) 14%, transparent), transparent); color: var(--c-cyan); }
.scope-table tbody tr:nth-child(2) th { background: linear-gradient(90deg, color-mix(in srgb, var(--c-blue) 14%, transparent), transparent); color: var(--c-blue); }
.scope-table tbody tr:nth-child(3) th { background: linear-gradient(90deg, color-mix(in srgb, var(--c-purple) 14%, transparent), transparent); color: var(--c-purple); }
.scope-table tbody tr:nth-child(4) th { background: linear-gradient(90deg, color-mix(in srgb, var(--c-orange) 14%, transparent), transparent); color: var(--c-orange); }
.scope-table tbody tr:nth-child(5) th { background: linear-gradient(90deg, color-mix(in srgb, var(--c-green) 14%, transparent), transparent); color: var(--c-green); }
.scope-table tbody tr:nth-child(6) th { background: linear-gradient(90deg, color-mix(in srgb, var(--c-orange) 18%, transparent), transparent); color: var(--c-orange); }

/* —— 交付物矩阵：每卡一渐变 —— */
.scope-deliverables .value-card:nth-child(1) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-cyan) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-cyan) 30%, transparent); }
.scope-deliverables .value-card:nth-child(1) .value-icon { color: var(--c-cyan); }
.scope-deliverables .value-card:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-blue) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-blue) 30%, transparent); }
.scope-deliverables .value-card:nth-child(2) .value-icon { color: var(--c-blue); }
.scope-deliverables .value-card:nth-child(3) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-purple) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-purple) 30%, transparent); }
.scope-deliverables .value-card:nth-child(3) .value-icon { color: var(--c-purple); }
.scope-deliverables .value-card:nth-child(4) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-orange) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-orange) 30%, transparent); }
.scope-deliverables .value-card:nth-child(4) .value-icon { color: var(--c-orange); }

/* —— 服务承诺：每卡一渐变（与交付物同色语言） —— */
.svc-pledges .value-card:nth-child(1) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-cyan) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-cyan) 30%, transparent); }
.svc-pledges .value-card:nth-child(1) .value-icon { color: var(--c-cyan); }
.svc-pledges .value-card:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-blue) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-blue) 30%, transparent); }
.svc-pledges .value-card:nth-child(2) .value-icon { color: var(--c-blue); }
.svc-pledges .value-card:nth-child(3) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-purple) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-purple) 30%, transparent); }
.svc-pledges .value-card:nth-child(3) .value-icon { color: var(--c-purple); }
.svc-pledges .value-card:nth-child(4) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-orange) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-orange) 30%, transparent); }
.svc-pledges .value-card:nth-child(4) .value-icon { color: var(--c-orange); }

/* —— 响应与质保：模块化分步骤卡（同色渐变 + 右上角大编号 01-04） —— */
.svc-sla .value-card { position: relative; padding-top: 34px; }
.svc-sla .value-num {
    position: absolute; top: 12px; right: 16px;
    font-family: var(--font-en); font-size: 28px; font-weight: 800; line-height: 1;
    letter-spacing: .02em; pointer-events: none;
    color: color-mix(in srgb, var(--c-cyan) 26%, transparent);
}
.svc-sla .value-card:nth-child(1) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-cyan) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-cyan) 30%, transparent); }
.svc-sla .value-card:nth-child(1) .value-icon { color: var(--c-cyan); }
.svc-sla .value-card:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-blue) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-blue) 30%, transparent); }
.svc-sla .value-card:nth-child(2) .value-num { color: color-mix(in srgb, var(--c-blue) 26%, transparent); }
.svc-sla .value-card:nth-child(2) .value-icon { color: var(--c-blue); }
.svc-sla .value-card:nth-child(3) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-purple) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-purple) 30%, transparent); }
.svc-sla .value-card:nth-child(3) .value-num { color: color-mix(in srgb, var(--c-purple) 26%, transparent); }
.svc-sla .value-card:nth-child(3) .value-icon { color: var(--c-purple); }
.svc-sla .value-card:nth-child(4) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-orange) 15%, transparent), var(--bg-elevated) 95%); border-color: color-mix(in srgb, var(--c-orange) 30%, transparent); }
.svc-sla .value-card:nth-child(4) .value-num { color: color-mix(in srgb, var(--c-orange) 26%, transparent); }
.svc-sla .value-card:nth-child(4) .value-icon { color: var(--c-orange); }