/* ============================================================
   金朵云企业官网 · 内页组件样式 pages.css
   说明：仅被内页引用（about/business/product/case/news/
         news-detail/recruit/contact/privacy），不加载于首页，
         因此首页体积与渲染不受影响。
   依赖：css/tokens.css + css/site.css（复用其变量与基础组件）
   ============================================================ */

/* ============================================================
   1. 内页通用：区块头变体 / 两栏 / 列表
   ============================================================ */
.section--tight-top { padding-top: var(--sp-8); }

/* 左对齐区块头（内页常用） */
.head-left { max-width: 720px; margin-bottom: var(--sp-7); }
.head-left .section-sub { margin-top: var(--sp-4); }

/* 图文两栏（左文右图 / 左图右文） */
.split-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--sp-8); align-items: center;
}
.split-grid--wide { grid-template-columns: 1.15fr 1fr; }
.split-copy p { color: var(--ink-600); margin-top: var(--sp-4); }
.split-copy p strong { color: var(--ink-900); font-weight: 600; }
.split-figure { position: relative; }
.split-figure img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--r-lg); box-shadow: var(--shadow-3);
}
.split-figure::after {
    content: ""; position: absolute; z-index: -1;
    right: -24px; bottom: -24px; width: 58%; height: 56%;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--brand-100), var(--accent-100));
}
.split-copy .btn, .split-copy .btn-group { margin-top: var(--sp-7); }
.btn-group { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* 带方点的要点列表 */
.bullet-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.bullet-list li {
    position: relative; padding-left: 22px;
    font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.8;
}
.bullet-list li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 7px; height: 7px; border-radius: 2px; background: var(--brand-500);
}
.bullet-list--num { counter-reset: bl; }
.bullet-list--num li { padding-left: 30px; }
.bullet-list--num li::before {
    counter-increment: bl; content: counter(bl);
    width: auto; height: auto; top: 2px; border-radius: 0;
    background: none; color: var(--brand-600);
    font-weight: 700; font-size: var(--fs-sm);
}

/* 数据条（企业实力事实） */
.stat-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--line-200);
    border: 1px solid var(--line-200); border-radius: var(--r-lg); overflow: hidden;
}
.stat-item { background: #fff; padding: var(--sp-6) var(--sp-5); text-align: center; }
.stat-item b {
    display: block; font-size: var(--fs-3xl); font-weight: 800;
    color: var(--brand-700); letter-spacing: -1.5px; line-height: 1.1;
}
.stat-item b small { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0; }
.stat-item span { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-600); }
.stat-note {
    margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-400);
    display: flex; align-items: center; gap: 8px;
}
.stat-note::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--warning); flex-shrink: 0;
}

/* ============================================================
   2. 关于我们
   ============================================================ */
/* 定位/使命愿景三卡 */
.mvv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.mvv-card {
    background: #fff; border: 1px solid var(--line-100); border-radius: var(--r-lg);
    padding: var(--sp-6); transition: box-shadow var(--dur), transform var(--dur) var(--ease);
}
.mvv-card:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.mvv-card .ico {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600); margin-bottom: var(--sp-5);
}
.mvv-card .ico svg { width: 22px; height: 22px; }
.mvv-card h3 { font-size: var(--fs-lg); }
.mvv-card p { font-size: var(--fs-sm); color: var(--ink-600); margin-top: var(--sp-3); line-height: 1.85; }

/* 发展历程时间轴 */
.timeline { position: relative; margin-top: var(--sp-7); padding-left: 34px; }
.timeline::before {
    content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
    width: 2px; background: linear-gradient(to bottom, var(--brand-500), var(--brand-100));
}
.tl-item { position: relative; padding-bottom: var(--sp-7); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
    content: ""; position: absolute; left: -34px; top: 5px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand-500);
    box-shadow: 0 0 0 4px var(--brand-50);
}
.tl-item .tl-year {
    font-size: var(--fs-lg); font-weight: 800; color: var(--brand-700);
    letter-spacing: .5px; line-height: 1.2;
}
.tl-item h3 { font-size: var(--fs-md); margin-top: var(--sp-2); }
.tl-item p { font-size: var(--fs-sm); color: var(--ink-600); margin-top: var(--sp-2); line-height: 1.85; }

/* 企业文化 */
.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.culture-card {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    border: 1px solid var(--line-100); background: #fff; padding: var(--sp-7) var(--sp-6);
}
.culture-card::before {
    content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--brand-600), var(--accent-500));
}
.culture-card .cn { font-size: var(--fs-xl); font-weight: 700; color: var(--brand-700); }
.culture-card .en {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    color: var(--ink-400); text-transform: uppercase; margin-top: 4px;
}
.culture-card p { font-size: var(--fs-sm); color: var(--ink-600); margin-top: var(--sp-4); line-height: 1.85; }

/* 资质荣誉 */
.honor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.honor-card {
    background: #fff; border: 1px solid var(--line-100); border-radius: var(--r-md);
    overflow: hidden; transition: all var(--dur) var(--ease);
}
.honor-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-2); transform: translateY(-4px); }
.honor-card .pic {
    aspect-ratio: 4/3; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand-50), var(--accent-100));
    color: var(--brand-600); overflow: hidden;
}
.honor-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.honor-card .pic svg { width: 42px; height: 42px; opacity: .55; }
.honor-card .txt { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.honor-card h3 { font-size: var(--fs-sm); line-height: 1.6; }
.honor-card .meta { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 6px; }

/* ============================================================
   3. 核心业务
   ============================================================ */
.biz-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--sp-8); align-items: center;
    padding: var(--sp-8) 0; border-bottom: 1px solid var(--line-100);
}
.biz-row:first-of-type { padding-top: 0; }
.biz-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.biz-row--rev .biz-figure { order: 2; }
.biz-figure { position: relative; }
.biz-figure img {
    width: 100%; aspect-ratio: 16/11; object-fit: cover;
    border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.biz-figure .badge { position: absolute; top: 16px; left: 16px; }
.biz-copy .idx {
    font-size: var(--fs-sm); font-weight: 700; color: var(--brand-600);
    letter-spacing: 2px;
}
.biz-copy h2 { font-size: var(--fs-2xl); margin-top: var(--sp-3); }
.biz-copy .role { font-size: var(--fs-md); font-weight: 600; color: var(--brand-700); margin-top: 6px; }
.biz-copy > p { font-size: var(--fs-sm); color: var(--ink-600); margin-top: var(--sp-4); line-height: 1.9; }
.biz-meta { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.biz-meta .row { display: flex; gap: var(--sp-4); align-items: flex-start; }
.biz-meta .row b {
    flex-shrink: 0; width: 72px; font-size: var(--fs-xs); font-weight: 600;
    color: var(--brand-700); background: var(--brand-50); border-radius: var(--r-sm);
    padding: 5px 0; text-align: center;
}
.biz-meta .row span { font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.8; }

/* 标准化服务流程 */
.process-line {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-5); margin-top: var(--sp-7); position: relative;
}
.process-line::before {
    content: ""; position: absolute; left: 6%; right: 6%; top: 24px;
    height: 1px; background: var(--line-200); z-index: 0;
}
.process-step { position: relative; z-index: 1; text-align: center; }
.process-step .n {
    width: 48px; height: 48px; margin: 0 auto; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand-100); color: var(--brand-600);
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-md);
    transition: all var(--dur) var(--ease);
}
.process-step:hover .n { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.process-step h3 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.process-step p { font-size: var(--fs-xs); color: var(--ink-600); margin-top: var(--sp-2); line-height: 1.8; }

/* ============================================================
   4. 产品中心
   ============================================================ */
.product-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-7);
}
.product-toolbar .filter-bar { margin-bottom: 0; }
.product-toolbar .count { font-size: var(--fs-sm); color: var(--ink-400); }
.product-card .cat {
    position: absolute; top: 14px; left: 14px;
    background: rgba(255,255,255,.94); color: var(--brand-700);
    font-size: var(--fs-xs); font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.product-card .cover { position: relative; }
/* 整卡可点（js/cms-bind.js 点击委托：点卡片任意处打开详情弹窗） */
.product-card, .case-list-card, .solution-card { cursor: pointer; }
.product-card .body .btn { margin-top: var(--sp-5); }
.product-card .more {
    margin-top: var(--sp-5); font-size: var(--fs-sm); font-weight: 600;
    color: var(--brand-600); background: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.product-card .more:hover { color: var(--brand-700); }

/* ============================================================
   4.5 解决方案（横向长卡）
   与产品卡（3 列小卡）刻意区分：方案内容更长、更强调行业场景，
   故采用「左图右文」长卡，信息层级为 序号 → 场景 → 标题 → 简介 → 亮点 → 详情入口。
   正文区首行为分类标签 .solution-cat（字典 solution_cat，与筛选栏同源，可被「全部/分类」筛选）。
   ★ 结构与 solutions.html 静态兜底卡、js/cms-bind.js 的 RENDER['solutions'] 必须逐层一致。
   ============================================================ */
.solution-list { display: grid; gap: var(--sp-6); }

.solution-card {
    display: grid; grid-template-columns: minmax(300px, 400px) 1fr;
    align-items: stretch; overflow: hidden; cursor: pointer;
}
/* 长卡用更克制的悬浮反馈（覆盖 site.css 的 .card:hover，pages.css 后加载故生效） */
.solution-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--brand-100);
}

/* ---- 左栏：封面区 ---- */
.solution-figure {
    position: relative; overflow: hidden;
    min-height: 268px; background: var(--brand-50);
}
.solution-figure img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s var(--ease);
}
.solution-card:hover .solution-figure img { transform: scale(1.04); }
/* 序号角标（左上，品牌渐变） */
.solution-no {
    position: absolute; top: 0; left: 0; z-index: 2;
    padding: 10px 18px 11px; border-radius: 0 0 var(--r-md) 0;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
    color: #fff; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 1.5px;
}
/* 场景徽标（左下，白底浮起，压在图上也清晰） */
.solution-scene {
    position: absolute; left: 16px; bottom: 16px; z-index: 2;
    max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .94); color: var(--brand-700);
    font-size: var(--fs-xs); font-weight: 700; box-shadow: var(--shadow-1);
}

/* ---- 右栏：正文区 ---- */
.solution-body { padding: var(--sp-6) var(--sp-7); display: flex; flex-direction: column; }
/* 分类标签（后台「字典管理」solution_cat，与筛选栏 [data-solution-cat] 同源） */
.solution-cat {
    align-self: flex-start; margin-bottom: var(--sp-3);
    padding: 4px 12px; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-700);
    border: 1px solid var(--brand-100);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
}
.solution-body h3 { font-size: var(--fs-xl); }
.solution-summary { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.9; }
.solution-points {
    margin-top: var(--sp-5);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-5);
}
.solution-points li {
    position: relative; padding-left: 26px;
    font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.7;
}
/* 打勾图标用纯 CSS 画，零额外依赖 */
.solution-points li::before {
    content: ""; position: absolute; left: 0; top: 3px;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--brand-50); border: 1px solid var(--brand-100);
}
.solution-points li::after {
    content: ""; position: absolute; left: 6px; top: 7px;
    width: 4px; height: 8px;
    border-right: 2px solid var(--brand-600); border-bottom: 2px solid var(--brand-600);
    transform: rotate(42deg);
}
/* 详情入口固定贴底，长卡底部对齐更整齐 */
.solution-card .more {
    margin-top: auto; padding-top: var(--sp-5);
    border-top: 1px solid var(--line-100);
    width: 100%; justify-content: flex-start;
    font-size: var(--fs-sm); font-weight: 600; color: var(--brand-600);
    background: none; border-left: 0; border-right: 0; border-bottom: 0;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.solution-card .more:hover { color: var(--brand-700); gap: 11px; }

/* 窄屏收敛：先压图栏宽度，≤900px 改为上下纵向堆叠 */
@media (max-width: 1024px) {
    .solution-card { grid-template-columns: minmax(260px, 320px) 1fr; }
    .solution-body { padding: var(--sp-5) var(--sp-6); }
}
@media (max-width: 900px) {
    .solution-card { grid-template-columns: 1fr; }
    .solution-figure { min-height: 0; aspect-ratio: 16/9; }
    .solution-body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
    .solution-points { grid-template-columns: 1fr; }
}

/* ============================================================
   5. 案例中心
   ============================================================ */
.case-list-card .cover { aspect-ratio: 16/10; }
.case-list-card .client {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-xs); color: var(--ink-400); margin-top: var(--sp-3);
}
.case-list-card .client b { color: var(--ink-700); font-weight: 600; }
.case-list-card .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.case-list-card .tags span {
    font-size: var(--fs-xs); color: var(--brand-700);
    background: var(--brand-50); border: 1px solid var(--brand-100);
    padding: 3px 10px; border-radius: 999px;
}
.case-list-card .more {
    margin-top: var(--sp-5); font-size: var(--fs-sm); font-weight: 600;
    color: var(--brand-600); background: none; border: 0; cursor: pointer;
    padding: 0; display: inline-flex; align-items: center; gap: 6px;
}
.case-list-card .more:hover { color: var(--brand-700); }
.case-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
.case-result .item { background: var(--bg-page); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; }
.case-result .item b { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--brand-700); }
.case-result .item span { font-size: var(--fs-xs); color: var(--ink-600); }

/* ============================================================
   6. 新闻中心
   ============================================================ */
/* 横向新闻条目 */
.news-list { display: grid; gap: var(--sp-5); }
.news-item {
    display: grid; grid-template-columns: 260px 1fr;
    gap: var(--sp-6); background: #fff; border: 1px solid var(--line-100);
    border-radius: var(--r-lg); overflow: hidden;
    transition: all var(--dur) var(--ease);
}
.news-item:hover { border-color: var(--brand-300); box-shadow: var(--shadow-2); }
.news-item .thumb { overflow: hidden; background: var(--brand-50); }
.news-item .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.news-item:hover .thumb img { transform: scale(1.06); }
.news-item .nb { padding: var(--sp-6) var(--sp-6) var(--sp-6) 0; display: flex; flex-direction: column; }
.news-item .nm { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-400); }
.news-item .nm .cat {
    color: var(--brand-600); font-weight: 600;
}
.news-item h3 { font-size: var(--fs-lg); margin-top: var(--sp-3); line-height: 1.6; }
.news-item:hover h3 { color: var(--brand-600); }
.news-item .ex {
    font-size: var(--fs-sm); color: var(--ink-600); margin-top: var(--sp-3);
    line-height: 1.85; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-item .rd { margin-top: var(--sp-4); font-size: var(--fs-xs); font-weight: 600; color: var(--brand-600); }

/* 正文 + 侧栏 */
.article-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-8); align-items: start;
}
.article-head { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line-100); }
.article-head h1 { font-size: var(--fs-2xl); line-height: 1.45; }
.article-head .am {
    display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
    margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--ink-400);
}
.article-head .am .cat {
    color: var(--brand-700); background: var(--brand-50);
    border: 1px solid var(--brand-100); padding: 3px 10px; border-radius: 999px; font-weight: 600;
}
.article-body { margin-top: var(--sp-7); max-width: none; }
.article-body h2 { font-size: var(--fs-xl); margin: var(--sp-7) 0 var(--sp-4); }
.article-body h3 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
.article-body p { color: var(--ink-600); margin-bottom: var(--sp-4); line-height: 1.95; }
.article-body img { border-radius: var(--r-md); margin: var(--sp-5) 0; width: 100%; }
.article-body ul { margin: 0 0 var(--sp-4); }
.article-body ul li {
    position: relative; padding: 5px 0 5px 22px;
    font-size: var(--fs-md); color: var(--ink-600); line-height: 1.85;
}
.article-body ul li::before {
    content: ""; position: absolute; left: 0; top: 14px;
    width: 7px; height: 7px; border-radius: 2px; background: var(--brand-500);
}
.article-body blockquote {
    border-left: 3px solid var(--brand-600); background: var(--brand-50);
    padding: var(--sp-5) var(--sp-6); border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin: var(--sp-6) 0; color: var(--ink-700); font-size: var(--fs-md); line-height: 1.9;
}
.article-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
    margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line-100);
}
.article-nav a {
    border: 1px solid var(--line-100); border-radius: var(--r-md);
    padding: var(--sp-5); transition: all var(--dur) var(--ease);
}
.article-nav a:hover { border-color: var(--brand-300); background: var(--brand-50); }
.article-nav a.disabled { pointer-events: none; opacity: .5; }
.article-nav .lb { font-size: var(--fs-xs); color: var(--ink-400); }
.article-nav .tt {
    display: block; font-size: var(--fs-sm); font-weight: 600; margin-top: 6px; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-nav .right { text-align: right; }

/* 侧栏 */
.aside-card {
    background: #fff; border: 1px solid var(--line-100); border-radius: var(--r-lg);
    padding: var(--sp-6); position: sticky; top: calc(var(--header-h) + 24px);
}
.aside-card h3 { font-size: var(--fs-md); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-100); }
.aside-card + .aside-card { margin-top: var(--sp-5); }
.related-list { margin-top: var(--sp-4); display: grid; gap: var(--sp-4); }
.related-list a { display: block; }
.related-list a:hover .tt { color: var(--brand-600); }
.related-list .tt {
    font-size: var(--fs-sm); font-weight: 500; line-height: 1.7; color: var(--ink-700);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color var(--dur);
}
.related-list .dt { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 4px; }
.aside-cta { background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); border: 0; color: #fff; }
.aside-cta h3 { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
.aside-cta p { font-size: var(--fs-sm); color: #B6C4DB; margin-top: var(--sp-4); line-height: 1.85; }
.aside-cta .btn { margin-top: var(--sp-5); width: 100%; }

/* ============================================================
   7. 加入我们
   ============================================================ */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.value-card {
    background: #fff; border: 1px solid var(--line-100); border-radius: var(--r-lg);
    padding: var(--sp-6); transition: all var(--dur) var(--ease);
}
.value-card:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.value-card .ico {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600); margin-bottom: var(--sp-5);
}
.value-card .ico svg { width: 22px; height: 22px; }
.value-card h3 { font-size: var(--fs-lg); }
.value-card p { font-size: var(--fs-sm); color: var(--ink-600); margin-top: var(--sp-3); line-height: 1.85; }
.welfare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.welfare-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-page); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-sm); color: var(--ink-700);
}
.welfare-item::before {
    content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px;
    background: linear-gradient(135deg, var(--brand-600), var(--accent-500));
}
.job-item .meta i {
    font-style: normal; color: var(--brand-700); background: var(--brand-50);
    padding: 2px 9px; border-radius: 999px;
}
.apply-card {
    background: #fff; border: 1px solid var(--line-100); border-radius: var(--r-lg);
    padding: var(--sp-7); margin-top: var(--sp-7);
}
.apply-card h3 { font-size: var(--fs-lg); }
.apply-card .rows { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.apply-card .row { display: flex; gap: var(--sp-4); font-size: var(--fs-sm); flex-wrap: wrap; }
.apply-card .row b { color: var(--ink-900); font-weight: 600; flex-shrink: 0; min-width: 96px; }
.apply-card .row span { color: var(--ink-600); }

/* ============================================================
   8. 联系我们
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); }
/* 左右两列等高：grid 默认 stretch，左列（联系方式）纵向铺满列高，
   联系卡片用 1fr 均分行高自然填满，与右侧留言表单卡底边对齐 */
.contact-layout > .reveal:first-child { display: flex; flex-direction: column; }
.contact-layout > .reveal:first-child .contact-list { flex: 1; grid-auto-rows: 1fr; }
/* 右列同理：标题在卡片外（HTML 已镜像左列结构），表单卡填满剩余高度，与左列卡片顶底平齐 */
.contact-layout > .reveal:nth-child(2) { display: flex; flex-direction: column; }
.contact-layout > .reveal:nth-child(2) .form-card { flex: 1; }
.contact-list { display: grid; gap: var(--sp-4); }
.contact-item {
    display: flex; gap: var(--sp-5); align-items: flex-start;
    background: #fff; border: 1px solid var(--line-100); border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-6); transition: all var(--dur) var(--ease);
}
.contact-item:hover { border-color: var(--brand-300); box-shadow: var(--shadow-1); }
.contact-item .ico {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600);
}
.contact-item .ico svg { width: 20px; height: 20px; }
.contact-item h3 { font-size: var(--fs-sm); color: var(--ink-400); font-weight: 500; }
.contact-item .val { font-size: var(--fs-md); font-weight: 600; color: var(--ink-900); margin-top: 4px; word-break: break-all; }
.contact-item .tip { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 6px; }
.map-embed {
    border: 1px solid var(--line-100); border-radius: var(--r-lg);
    overflow: hidden; background: var(--bg-page); aspect-ratio: 2/1;
    display: grid; place-items: center; text-align: center; padding: var(--sp-6);
}
/* 联系页布局：地图作为 .contact-layout 第三个网格子元素，横跨两列整行展示 */
.contact-layout .map-embed { grid-column: 1 / -1; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-embed .ph { color: var(--ink-400); font-size: var(--fs-sm); line-height: 1.9; }
.map-embed .ph svg { width: 34px; height: 34px; margin-bottom: var(--sp-3); opacity: .5; }
.form-note { font-size: var(--fs-xs); color: var(--ink-400); margin-top: var(--sp-4); line-height: 1.8; }
.form-actions { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); flex-wrap: wrap; }
.form-actions .btn { min-width: 150px; justify-content: center; }
[data-form-tip] { font-size: var(--fs-sm); }

/* ============================================================
   9. 法务页（隐私政策）
   ============================================================ */
.doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.doc-toc {
    background: #fff; border: 1px solid var(--line-100); border-radius: var(--r-lg);
    padding: var(--sp-6); position: sticky; top: calc(var(--header-h) + 24px);
}
.doc-toc h3 { font-size: var(--fs-sm); color: var(--ink-400); font-weight: 600; letter-spacing: 1px; }
.doc-toc ol { margin-top: var(--sp-4); counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
    display: block; padding: 7px 0 7px 24px; position: relative;
    font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.6;
    transition: color var(--dur);
}
.doc-toc a::before {
    content: counter(toc); position: absolute; left: 0; top: 7px;
    width: 17px; height: 17px; border-radius: 4px; background: var(--bg-page);
    font-size: 10px; font-weight: 700; color: var(--ink-400);
    display: grid; place-items: center;
}
.doc-toc a:hover, .doc-toc a.on { color: var(--brand-600); }
.doc-toc a.on::before { background: var(--brand-600); color: #fff; }
.doc-body {
    background: #fff; border: 1px solid var(--line-100); border-radius: var(--r-lg);
    padding: var(--sp-8);
}
.doc-body h2 {
    font-size: var(--fs-lg); margin: var(--sp-7) 0 var(--sp-4);
    padding-top: var(--sp-6); border-top: 1px solid var(--line-100);
    scroll-margin-top: calc(var(--header-h) + 20px);
}
.doc-body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body p { color: var(--ink-600); margin-bottom: var(--sp-4); line-height: 1.95; font-size: var(--fs-sm); }
.doc-body ul { margin-bottom: var(--sp-4); }
.doc-body ul li {
    position: relative; padding: 5px 0 5px 20px;
    font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.9;
}
.doc-body ul li::before {
    content: ""; position: absolute; left: 0; top: 14px;
    width: 6px; height: 6px; border-radius: 2px; background: var(--brand-500);
}
.doc-meta {
    padding-bottom: var(--sp-6); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line-100);
    font-size: var(--fs-xs); color: var(--ink-400);
    display: flex; gap: var(--sp-5); flex-wrap: wrap;
}

/* ============================================================
   10. 内页底部转化带
   ============================================================ */
.cta-band {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--brand-900) 0%, var(--brand-800) 60%, #0B3A8F 100%);
    color: #fff; padding: var(--sp-8) 0;
}
.cta-band::after {
    content: ""; position: absolute; right: -100px; bottom: -160px;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,184,230,.26), transparent 66%);
}
.cta-band .inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-7); flex-wrap: wrap;
}
.cta-band h2 { font-size: var(--fs-2xl); }
.cta-band p { color: #B6C4DB; font-size: var(--fs-md); margin-top: var(--sp-3); max-width: 560px; }
.cta-band .acts { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* 弹窗内封面图（产品 / 案例详情由 JS 注入） */
.modal-cover { border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-5); background: var(--brand-50); }
.modal-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

/* ============================================================
   11. 骨架屏 / 空状态
   ============================================================ */
.skeleton { border-radius: var(--r-md); background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 37%, #EEF2F7 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton--card { height: 320px; }
.empty-state { text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--ink-400); }
.empty-state svg { width: 46px; height: 46px; opacity: .4; margin-bottom: var(--sp-4); }
.empty-state p { font-size: var(--fs-sm); }
.paged-hide { display: none !important; }

/* ============================================================
   12. 内页响应式
   ============================================================ */
@media (max-width: 1100px) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-6); }
}
@media (max-width: 1024px) {
    .split-grid, .split-grid--wide { grid-template-columns: 1fr; gap: var(--sp-7); }
    .split-figure { max-width: 560px; }
    .mvv-grid, .culture-grid, .value-grid { grid-template-columns: 1fr 1fr; }
    .honor-grid, .welfare-grid { grid-template-columns: repeat(3, 1fr); }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .process-line { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
    .process-line::before { display: none; }
    .biz-row, .biz-row--rev { grid-template-columns: 1fr; gap: var(--sp-7); }
    .biz-row--rev .biz-figure { order: 0; }
    .contact-layout { grid-template-columns: 1fr; gap: var(--sp-7); }
    .contact-layout > .reveal:first-child .contact-list { grid-auto-rows: auto; } /* 单列下不强制卡片等高 */
    .map-embed { aspect-ratio: 16/9; }
    .article-layout { grid-template-columns: 1fr; }
    .aside-card { position: static; }
    .doc-layout { grid-template-columns: 1fr; }
    .doc-toc { position: static; }
}
@media (max-width: 768px) {
    .map-embed { aspect-ratio: 4/3; }
    .mvv-grid, .culture-grid, .value-grid, .honor-grid, .welfare-grid { grid-template-columns: 1fr; }
    .honor-grid { grid-template-columns: 1fr 1fr; }
    .process-line { grid-template-columns: 1fr 1fr; }
    .news-item { grid-template-columns: 1fr; }
    .news-item .thumb { aspect-ratio: 16/9; }
    .news-item .nb { padding: var(--sp-5); }
    .article-nav { grid-template-columns: 1fr; }
    .article-nav .right { text-align: left; }
    .cta-band .inner { flex-direction: column; align-items: flex-start; }
    .doc-body { padding: var(--sp-6); }
    .case-result { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .honor-grid, .process-line { grid-template-columns: 1fr; }
    .stat-strip { grid-template-columns: 1fr; }
    .btn-group { width: 100%; }
    .btn-group .btn { width: 100%; justify-content: center; }
    .form-actions .btn { width: 100%; }
}