/* ============================================================
   成都天成记科技有限公司 官网样式 v2
   设计基调：墨色 + 香槟金 + 珠光米白，克制的高级感
   ============================================================ */

:root {
    /* 主色 */
    --ink: #0e0e13;
    --ink-2: #181820;
    --ink-3: #232330;
    --cream: #f7f5ef;
    --cream-2: #efebe1;

    /* 金 */
    --gold: #c2a06a;
    --gold-l: #e0c795;
    --gold-d: #9c7f4c;

    /* 文字 */
    --txt: #23232a;
    --txt-2: #5c5c66;
    --txt-3: #8b8b95;

    /* 描边 */
    --line: rgba(16, 16, 20, .08);
    --line-2: rgba(16, 16, 20, .14);
    --line-l: rgba(255, 255, 255, .12);

    /* 尺寸 */
    --r-s: 10px;
    --r-m: 16px;
    --r-l: 24px;

    --ease: cubic-bezier(.22, .8, .28, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    /* 弹性回弹曲线：Q 弹手感（轻微过冲后稳定归位，过渡自然不突兀） */
    --spring: cubic-bezier(.34, 1.56, .64, 1);      /* 回弹较强：图标、箭头等小元素 */
    --spring-soft: cubic-bezier(.34, 1.42, .5, 1);   /* 回弹柔和：卡片整体位移 */
    --head-h: 80px;
    --head-h-s: 64px;

    --font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    color: var(--txt);
    background: var(--cream);
    line-height: 1.75;
    font-size: 15px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.lock { overflow: hidden; }

img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; }

.ic { width: 1em; height: 1em; fill: currentColor; flex: none; }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

::selection { background: var(--gold); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eceae4; }
::-webkit-scrollbar-thumb { background: #c9c5bb; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* 噪点纹理 */
.grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .035; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='.85'/></svg>");
}

/* ============ 通用组件 ============ */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 999;
    background: transparent; pointer-events: none;
}
.scroll-progress i {
    /* 用 transform 而不是 width：width 是布局属性，每帧改它都要重排 + 重绘一条横贯全屏的条；
       scaleX 只走合成。视觉完全等价（scaleX(.3) 与 width:30% 同形），但代价差一个量级。
       注意不要在这里加 will-change —— 常驻合成层会长期占显存，滚动条本身足够便宜。 */
    display: block; height: 100%; width: 100%;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--gold-d), var(--gold-l));
    transition: transform .1s linear;
    will-change: auto;
}

/* ============ 交互反馈（纯 CSS，页面上没有任何浮层元素） ============
   指针反馈只做三件事，全部是「元素自身的状态过渡」：

     ① 颜色 / 背景 / 描边渐变（.3s 上下，与全站 --ease 同节奏）；
     ② cursor 形态（能点的地方统一手型 —— <button> 默认是箭头，必须显式声明）；
     ③ 键盘 :focus-visible 描边（只在键盘聚焦时出现，鼠标点击不画圈）。

   ⛔ 不要再往 <body> 里塞「跟随指针的 div / 圆环 / 光斑」：
      ① 它们浮在内容之上，会挡住文字、影响滚动与点击；
      ② 跟随必然要挂 mousemove + rAF 常驻循环，滚动时会拖帧；
      ③ 观感上是一层与内容无关的噪声，反而削弱焦点。 */
button, [role="button"], summary, select, label[for] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; }

/* 状态过渡统一走颜色类属性（不碰 width/height/transform，绝不触发布局） */
a, button, summary, input, select, textarea {
    transition: color .3s var(--ease), background-color .3s var(--ease),
                border-color .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}

/* 键盘可达性：只在键盘聚焦时描一圈金边，鼠标点击不产生「残留圈」 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 2px;
}

/* 页脚 / 面包屑里的裸链接：hover 走亮金，深底上读得清（不再依赖任何浮层） */
.site-foot a:hover { color: var(--gold-l); }
.page-hero .crumb a:hover { color: #fff; }

/* 按钮 - 金色液态填充版 */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; padding: 15px 30px; border-radius: 999px; font-size: 15px; font-weight: 500;
    overflow: hidden; isolation: isolate; white-space: nowrap;
    color: #fff;
    background: linear-gradient(120deg, var(--gold-l), var(--gold));
    box-shadow: 0 10px 28px rgba(194, 160, 106, .32), inset 0 1px 0 rgba(255,255,255,.45);
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.btn::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1/1; z-index: -2;
    border-radius: 50%; transform: translate(-50%, -50%) scale(0);
    background: #fff;
    transition: transform .65s var(--ease);
}
.btn::after {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    transform: translateX(-100%); transition: transform .9s var(--ease);
}
.btn:hover { color: var(--gold-d); box-shadow: 0 14px 38px rgba(194, 160, 106, .45), inset 0 1px 0 rgba(255,255,255,.55); }
.btn:hover::before { transform: translate(-50%, -50%) scale(1.7); }
.btn:hover::after { transform: translateX(100%); }
.btn > * { position: relative; z-index: 1; }
.btn .ic { transition: transform .4s var(--ease), color .4s var(--ease); }
.btn:hover .ic { transform: translateX(4px); }

/* 黑色按钮统一为金色底色 + 白字，hover 液态反转为白底金字 */
.btn-dark { color: #fff; background: linear-gradient(120deg, var(--gold-l), var(--gold)); box-shadow: 0 10px 28px rgba(194, 160, 106, .32), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-dark:hover { color: var(--gold-d); box-shadow: 0 14px 38px rgba(194, 160, 106, .45), inset 0 1px 0 rgba(255,255,255,.55); }

/* 幽灵按钮 hover 金色填充 */
.btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255,255,255,.08); backdrop-filter: blur(4px); box-shadow: none; }
.btn-ghost::before { background: linear-gradient(120deg, var(--gold-l), var(--gold)); }
.btn-ghost:hover { color: #fff; border-color: var(--gold); box-shadow: 0 10px 28px rgba(194, 160, 106, .32); }

.btn-sm { padding: 10px 22px; font-size: 14px; }

.magnetic { will-change: transform; }

/* 区块标题 */
.sec { padding: 120px 0; position: relative; }
.sec-t { margin-bottom: 64px; }
.sec-t.center { text-align: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 12px; font-size: 12px;
    letter-spacing: .28em; text-transform: uppercase; color: var(--gold-d); font-weight: 500;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.sec-t.center .eyebrow::after { content: ""; width: 32px; height: 1px; background: var(--gold); }
.sec-h {
    font-size: clamp(28px, 3.4vw, 46px); line-height: 1.24; font-weight: 600;
    margin-top: 18px; letter-spacing: -.012em; color: var(--ink);
}
.sec-p { color: var(--txt-2); margin-top: 18px; max-width: 680px; font-size: 16px; }
.sec-t.center .sec-p { margin-inline: auto; }

.sec-dark {
    color: #fff;
    background:
        radial-gradient(118% 88% at 6% -12%, rgba(194,160,106,.17), transparent 62%),
        radial-gradient(104% 82% at 102% 6%, rgba(126,158,225,.11), transparent 64%),
        linear-gradient(162deg, #16161d 0%, #0e0e13 52%, #17130d 100%);
}
.sec-dark .sec-h { color: #fff; }
.sec-dark .sec-p { color: rgba(255, 255, 255, .6); }
.sec-dark .eyebrow { color: var(--gold-l); }
.sec-soft { background: var(--cream-2); }

/* ============ 区块媒体背景（首页品牌主张 / 关于页企业文化） ============
   复用首页轮播图那一套「淡入 + 慢推近 + 方向性遮罩」的手法，只是把舞台从首屏搬进区块：
     · 有图：圆角面板 + 多段遮罩，文字永远压在遮罩之上 → 任何图片下都清晰可读；
     · 无图：同一块面板换成品牌金渐变（不缩进、不留空白、不出现突兀色块）；
     · 面板几何两态一致（inset / 圆角 / 描边都不变），所以后台传图那一刻版式不会跳。
   调参入口集中在下面三个变量：inset 设 0px 即回到原来的通栏效果。 */
.sec-media { --sec-media-inset: clamp(0px, 1.4vw, 22px); --sec-media-op: .8; }

/* 面板内节奏（2026-09-17）：.sec 的 120px 大留白是给通栏深色区块的，
   套进圆角图片面板后上下各多出一片空图，观感"又空又散"→ 收紧到 68~96px。
   同时吃掉标题块最后 64px margin：首页主张区块只有标题+一段话，
   不吃掉就是"图下多一截死空"，上下留白不对称（实测 118 vs 164px）。 */
.sec.sec-media { padding: clamp(68px, 7.5vw, 96px) 0; }
.sec-media .sec-t { margin-bottom: 44px; }
.sec-media .wrap > :last-child { margin-bottom: 0; }
/* 浅色照片上的可读性（不依赖图片运气）：
   eyebrow 的 gold-l 会融进亮图（实测截图里"企业文化"几乎看不见）→ 提亮一档 + 投影 */
.sec-media .eyebrow { color: #f2e3bd; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }

.sec-media-bg {
    position: absolute; inset: var(--sec-media-inset, 0px); z-index: 0;
    border-radius: var(--r-l); overflow: hidden; pointer-events: none;
    /* 金色发丝描边 + 内顶高光：与站内卡片（.about-badge / .culture-card）同一套光影语言 */
    box-shadow:
        0 30px 80px -34px rgba(0, 0, 0, .60),
        inset 0 0 0 1px rgba(224, 199, 149, .16),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* 有图：图片层与首页 .hero-bg img 完全同款（opacity 交叉淡入 + 16s 慢推近）。
   translate 是独立于 transform 的属性，两者互不覆盖：
   transform 负责"推近"，JS 只改 translate 做滚动视差（父容器不动，圆角面板不会跑出衬边）。 */
.sec-media-bg img {
    position: absolute; left: 0; right: 0; top: -20px; height: calc(100% + 40px);
    width: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.06); translate: 0 var(--sm-shift, 0px);
    transition: opacity 1.4s var(--ease), transform 16s ease-out;
    will-change: transform, opacity;
}
.sec-media-bg img.on { opacity: var(--sec-media-op, .8); transform: scale(1); }

/* 遮罩：中心压暗保证居中标题可读，方向性明暗沿用 hero 的手法，上下与相邻区块柔和过渡 */
.sec-media.has-media .sec-media-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(78% 122% at 50% 50%, rgba(8,8,10,.55) 0%, rgba(8,8,10,.38) 46%, rgba(8,8,10,.22) 100%),
        linear-gradient(100deg, rgba(8,8,10,.40) 0%, rgba(8,8,10,.20) 48%, rgba(8,8,10,.06) 100%),
        radial-gradient(1120px 540px at 12% -10%, rgba(224,199,149,.22), transparent 64%),
        radial-gradient(900px 460px at 88% 8%, rgba(126,158,225,.14), transparent 66%),
        linear-gradient(112deg, transparent 32%, rgba(224,199,149,.08) 48%, transparent 62%),
        linear-gradient(180deg, rgba(10,10,12,.26) 0%, rgba(10,10,12,0) 26%, rgba(10,10,12,.02) 72%, rgba(10,10,12,.30) 100%);
}

/* 无图兜底：品牌金渐变（比原来的 #16161d→#0e0e13 更"有层次"，与 .page-hero-fallback 同源） */
.sec-media.sec-media-fallback .sec-media-bg {
    background:
        radial-gradient(1100px 560px at 10% -12%, rgba(224,199,149,.26), transparent 62%),
        radial-gradient(900px 470px at 90% 4%, rgba(126,158,225,.16), transparent 64%),
        radial-gradient(840px 430px at 50% 118%, rgba(194,160,106,.22), transparent 68%),
        linear-gradient(115deg, transparent 30%, rgba(224,199,149,.07) 46%, transparent 62%),
        linear-gradient(158deg, #1a1712 0%, #14141a 50%, #0e0e13 100%);
}
/* 细网格纹理：向上淡出，给大面积渐变一点质感（与内页横幅兜底同款） */
.sec-media.sec-media-fallback .sec-media-bg::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 26%, transparent 76%);
    mask-image: radial-gradient(130% 95% at 50% 0%, #000 26%, transparent 76%);
}

/* 文字层：投影托底，任何图片下都读得清（不依赖背景图运气）
   另：标题在面板里略放大一档锚住构图；段落 0.6 白在浅色图上太透 → 提到 0.8 */
.sec-media .sec-h { font-size: clamp(28px, 3.8vw, 50px); text-shadow: 0 2px 28px rgba(0, 0, 0, .50), 0 1px 2px rgba(0, 0, 0, .35); }
.sec-media .sec-p { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 18px rgba(0, 0, 0, .45); }

/* 有图时卡片改「玻璃」质：既提对比度（保证卡片内文字可读），也让层次从图片里浮起来。
   0.36 的暗玻璃在浅色照片上发灰发闷（卡片和图"糊成一片"）→ 加深到 0.46 并提亮描边 */
.sec-media.has-media .culture-card {
    background: rgba(10, 10, 15, .46);
    border-color: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(10px) saturate(1.12);
    backdrop-filter: blur(10px) saturate(1.12);
}
.sec-media.has-media .culture-card p { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
/* 注意：上面这条比 .culture-card:hover 更具体，所以 hover 态必须在这里成对覆盖，
   否则卡片"鼠标移上去没反应"（背景与描边都不会变）。 */
.sec-media.has-media .culture-card:hover {
    background: rgba(22, 22, 28, .58);
    border-color: rgba(224, 199, 149, .30);
}

@media (max-width: 768px) {
    .sec-media { --sec-media-inset: 10px; --sec-media-op: .84; }
    .sec-media-bg { border-radius: 18px; }
}

/* 无障碍：减少动效时不做慢推近 */
@media (prefers-reduced-motion: reduce) {
    .sec-media-bg img { transform: none; }
}

/* 进场动画（支持 UI 动效配置中的 scrollReveal 参数） */
.rv { opacity: 0; transform: translateY(var(--rb-reveal-distance, 36px)); transition: opacity var(--rb-reveal-duration, 1s) var(--ease-out), transform var(--rb-reveal-duration, 1s) var(--ease-out); transition-delay: var(--rb-reveal-stagger, 0s); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }
.rv-d4 { transition-delay: .32s; } .rv-d5 { transition-delay: .4s; } .rv-d6 { transition-delay: .48s; }

/* ============ 头部 ============ */
.site-head {
    position: fixed; top: 0; left: 0; right: 0; z-index: 120;
    height: var(--head-h); color: #fff;
    transition: height .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
.site-head::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(14,14,19,.55), rgba(14,14,19,.1));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 1; transition: opacity .4s var(--ease);
}
.site-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224,199,149,.35), transparent);
    opacity: 0; transition: opacity .4s var(--ease);
}
.site-head.solid { height: var(--head-h-s); color: var(--ink); }
.site-head.solid::before {
    /* 吸顶态必须近实底：半透明底会让正文从栏下穿过时「若隐若现」，产生割裂感 */
    background: rgba(247, 245, 239, .97);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(16, 16, 20, .08), 0 14px 34px rgba(16, 16, 20, .10);
}
.site-head.solid::after { opacity: 0; }

.head-inner { width: min(1320px, 100% - 48px); margin-inline: auto; height: 100%; display: flex; align-items: center; gap: 32px; }

/* 两张 LOGO 常驻 DOM、叠在同一个网格单元里交叉淡入 —— 换成 display 切换会因为两张图宽度
   不同导致头部左右跳动，叠放则始终按较宽的那张占位，位置稳定。 */
.brand { display: grid; align-items: center; flex: none; height: 100%; }
.brand-logo {
    grid-area: 1 / 1;
    display: block; max-height: 48px; width: auto; max-width: 220px;
    object-fit: contain;
    transition: max-height .4s var(--ease), opacity .35s var(--ease);
}
.site-head.solid .brand-logo { max-height: 40px; }
/* 常规版 .bl-main / 反白版 .bl-alt 交叉显示：
   · 透明头部（首屏深色渐变 / 内页头图）→ 显示反白版；
   · 滚动态 .solid（米白实底）→ 显示常规版。
   旧版是服务端按「是否首页」一次性选定一张图，滚动后底色变白但图不换，
   于是「内页首屏白底 LOGO 看不见 / 首页滚动后深色 LOGO 压在白底上」。 */
.site-head:not(.solid) .brand-logo.bl-main { opacity: 0; }
.site-head.solid .brand-logo.bl-main { opacity: 1; }
.site-head:not(.solid) .brand-logo.bl-alt { opacity: 1; }
.site-head.solid .brand-logo.bl-alt { opacity: 0; }
/* 后台没单独上传「反白版 LOGO」时（.is-one-logo，两张图其实是同一张）：
   透明头部上给常规 LOGO 垫一块白色承托板，否则深色 LOGO 压在深色渐变上等于不可见。 */
.site-head:not(.solid) .brand.is-one-logo .brand-logo.bl-main {
    opacity: 1; padding: 7px 12px; border-radius: 10px;
    background: rgba(255, 255, 255, .93); box-shadow: 0 6px 22px rgba(0, 0, 0, .2);
}
.site-head:not(.solid) .brand.is-one-logo .brand-logo.bl-alt { opacity: 0; }
.site-head.solid .brand.is-one-logo .brand-logo.bl-main {
    padding: 0; border-radius: 0; background: none; box-shadow: none;
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-item { position: relative; }
.nav-item.has-mega { padding-bottom: 24px; margin-bottom: -24px; }
.nav-a {
    position: relative; padding: 10px 16px; font-size: 14.5px; font-weight: 500;
    color: inherit; transition: color .3s; display: inline-flex; align-items: center; gap: 4px;
}
.nav-a span { position: relative; display: block; padding-bottom: 2px; }
.nav-a span::after {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .4s var(--ease);
}
.nav-item:hover .nav-a span::after,
.nav-item.on .nav-a span::after { transform: scaleX(1); transform-origin: left; }
.nav-caret { width: 11px; height: 11px; opacity: .5; transform: rotate(90deg); transition: transform .3s var(--ease); }
.nav-item.has-mega:hover .nav-caret { transform: rotate(270deg); }

/* Mega Menu */
.mega {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(8px);
    width: min(840px, 90vw); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
    z-index: 100;
}
.mega::before {
    content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    border: 10px solid transparent; border-bottom-color: #fff;
    opacity: 0; transition: opacity .3s .05s;
}
.nav-item.has-mega:hover .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
.nav-item.has-mega:hover .mega::before { opacity: 1; }

.mega-inner {
    background: #fff; border-radius: var(--r-l);
    box-shadow: 0 30px 80px rgba(14,14,19,.18), 0 2px 0 rgba(194,160,106,.12);
    padding: 28px; display: grid; grid-template-columns: 220px 1fr; gap: 28px;
    border: 1px solid var(--line);
}
.mega-side { padding-right: 22px; border-right: 1px solid var(--line); }
.mega-side .mega-eyebrow { font-size: 11px; letter-spacing: .26em; color: var(--gold-d); text-transform: uppercase; font-weight: 500; }
.mega-side h4 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 12px 0 12px; color: var(--ink); letter-spacing: -.01em; }
.mega-side p { font-size: 13px; color: var(--txt-2); line-height: 1.7; }
.mega-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    font-size: 13px; color: var(--gold-d); font-weight: 500;
}
.mega-link .ic { transition: transform .35s var(--ease); }
.mega-link:hover .ic { transform: translateX(4px); }

.mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mega-cell {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
    border-radius: var(--r-s); transition: background .3s, transform .3s var(--ease);
}
.mega-cell:hover { background: var(--cream); transform: translateX(4px); }
.mega-cell .mega-idx {
    flex: none; font-size: 11px; color: var(--gold-d); font-weight: 500;
    width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
    background: rgba(194,160,106,.1); letter-spacing: .04em;
}
.mega-cell .mega-tt b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.mega-cell .mega-tt em { display: block; font-size: 12px; color: var(--txt-3); font-style: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* 头部 CTA */
.head-cta { display: flex; align-items: center; gap: 18px; flex: none; margin-left: 12px; }
.head-cta .tel { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; }
.head-cta .tel .ic { color: var(--gold-l); }
.site-head.solid .head-cta .tel .ic { color: var(--gold-d); }

.burger { display: none; width: 42px; height: 42px; position: relative; margin-left: auto; }
.burger i {
    position: absolute; left: 10px; width: 22px; height: 1.8px; background: currentColor;
    transition: transform .38s var(--ease), opacity .3s;
}
.burger i:nth-child(1) { top: 15px; } .burger i:nth-child(2) { top: 20.5px; } .burger i:nth-child(3) { top: 26px; }
.burger.on i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.on i:nth-child(2) { opacity: 0; }
.burger.on i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* 移动端抽屉 */
.drawer {
    position: fixed; inset: 0; z-index: 115; background: var(--ink);
    clip-path: circle(0% at calc(100% - 40px) 40px);
    transition: clip-path .7s var(--ease); visibility: hidden;
}
.drawer.open { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; }
.drawer-inner { padding: 100px 32px 40px; height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
.drawer-inner > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; color: #fff; font-size: 20px; border-bottom: 1px solid var(--line-l);
    opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.drawer.open .drawer-inner > a { opacity: 1; transform: none; }
.drawer-inner > a:nth-child(1) { transition-delay: .14s; } .drawer-inner > a:nth-child(2) { transition-delay: .2s; }
.drawer-inner > a:nth-child(3) { transition-delay: .26s; } .drawer-inner > a:nth-child(4) { transition-delay: .32s; }
.drawer-inner > a:nth-child(5) { transition-delay: .38s; } .drawer-inner > a:nth-child(6) { transition-delay: .44s; }
.drawer-inner > a:nth-child(7) { transition-delay: .5s; }
.drawer-inner > a .ic { opacity: .35; transition: transform .35s var(--ease); }
.drawer-inner > a:hover .ic { transform: translateX(4px); opacity: .8; }
.drawer-sub { margin-top: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line-l); }
.drawer-sub-h { display: block; font-size: 11px; letter-spacing: .22em; color: var(--gold-l); margin-bottom: 14px; }
.drawer-sub a { display: block; padding: 7px 0; font-size: 14px; color: rgba(255,255,255,.7); transition: color .3s; }
.drawer-sub a:hover { color: var(--gold-l); }
.drawer-foot { margin-top: auto; padding-top: 28px; color: rgba(255, 255, 255, .55); }
.drawer-foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-l); font-size: 19px; margin-bottom: 10px; }

/* ============ 首屏 ============ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; background: var(--ink); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; opacity: 0;
    transition: opacity 1.4s var(--ease), transform 16s ease-out;
    transform: scale(1.06);
}
.hero-bg img.on { opacity: 1; transform: scale(1); }
.hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(8, 8, 10, .92) 4%, rgba(8, 8, 10, .68) 50%, rgba(8, 8, 10, .42) 100%);
}
.hero-inner { position: relative; z-index: 2; width: min(1320px, 100% - 48px); margin-inline: auto; padding: 130px 0 100px; color: #fff; }
.hero-slides { display: grid; grid-template-areas: "slide"; }
.hero-slide { grid-area: slide; opacity: 0; pointer-events: none; transition: opacity 1s var(--ease); }
.hero-slide.on { opacity: 1; pointer-events: auto; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.72); margin-bottom: 2px;
}
.hero-eyebrow i { width: 24px; height: 1px; background: var(--gold-l); flex-shrink: 0; }
.hero-eyebrow span { color: rgba(255,255,255,.72); line-height: 1.6; }

.hero-h { font-size: clamp(34px, 5.6vw, 72px); line-height: 1.1; font-weight: 600; margin: 20px 0 0; letter-spacing: -.02em; }
.hero-h .ln { display: block; overflow: hidden; }
.hero-h .ln > span { display: block; transform: translateY(105%); }
.hero-h .g { color: var(--gold-l); position: relative; padding: 0 .05em; }
.hero-h .g::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-l), transparent);
}
.hero-h-v2 { font-size: clamp(28px, 4.4vw, 54px); line-height: 1.16; margin-top: 14px; font-weight: 600; letter-spacing: -.018em; }
.hero-h-v2 .ln > span { display: inline-block; }

.hero-sub { margin-top: 22px; max-width: 600px; font-size: clamp(14px, 1.3vw, 16px); color: rgba(255, 255, 255, .7); line-height: 1.8; }
.hero-slogan {
    display: inline-block; margin-top: 20px; padding: 13px 22px;
    background: rgba(0, 0, 0, .42); border: 1px solid rgba(224, 199, 149, .18);
    border-radius: 10px; color: rgba(255,255,255,.88);
    font-size: 14.5px; line-height: 1.6; max-width: 660px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-btns { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }

/* 首屏进场编排 */
.hero-h .ln > span { transition: transform 1.15s var(--ease-out); }
.hero-h .ln:nth-child(2) > span { transition-delay: .12s; }
.hero-h .ln:nth-child(3) > span { transition-delay: .24s; }
.hero-eyebrow, .hero-sub, .hero-btns, .hero-stats {
    opacity: 0; transform: translateY(24px);
    transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
.hero-sub { transition-delay: .35s; } .hero-btns { transition-delay: .48s; } .hero-stats { transition-delay: .6s; }
.hero.ready .hero-h .ln > span { transform: none; }
.hero.ready .hero-eyebrow, .hero.ready .hero-sub, .hero.ready .hero-btns, .hero.ready .hero-stats { opacity: 1; transform: none; }

.hero-stats { margin-top: 64px; display: flex; gap: 52px 64px; flex-wrap: wrap; }
.hero-stats li { min-width: 120px; text-align: left; }
.hero-stats li { position: relative; }
.hero-stats b { display: inline-block; font-size: clamp(36px, 4vw, 56px); font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.hero-stats b .g { color: var(--gold); font-weight: 500; }
.hero-stats .stat-suf {
    font-style: normal; font-size: 2em; color: var(--gold-l); font-weight: 700;
    margin-left: 6px; display: inline-block; transform: translateY(-22px);
}
.hero-stats em { display: block; font-style: normal; font-size: 15px; color: rgba(255, 255, 255, .72); letter-spacing: .05em; font-weight: 500; }

.hero-dots { position: absolute; right: min(6vw, 80px); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.hero-dots button { width: 32px; height: 3px; background: rgba(255, 255, 255, .3); transition: background .4s, width .4s; border-radius: 2px; }
.hero-dots button.on { background: var(--gold-l); width: 52px; }

.hero-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; color: rgba(255, 255, 255, .5); font-size: 11.5px; letter-spacing: .28em; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-scroll i { display: block; width: 1px; height: 44px; background: linear-gradient(rgba(255,255,255,.5), transparent); animation: sd 1.9s infinite; }
@keyframes sd { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============ 关于 ============ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
/* 简介/我们叫什么 正文：16px 与全站 .sec-p 对齐，行高 2 与本页 article-body 统一，
   margin-top 撑开与大标题的呼吸感（.sec-h 无 margin-bottom，旧版正文紧贴标题）。 */
.about-txt p { color: var(--txt-2); margin: 22px 0 0; font-size: 16px; line-height: 2; }
.about-txt p + p { margin-top: 14px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.about-tags span {
    padding: 7px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--txt-2);
    transition: all .35s var(--ease); background: #fff;
}
.about-tags span:hover { border-color: var(--gold); color: var(--gold-d); background: rgba(194, 160, 106, .07); transform: translateY(-2px); }
.about-img {
    position: relative; border-radius: var(--r-l); overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(16,16,20,.18), 0 4px 12px rgba(16,16,20,.06);
    /* 与首页 hero 一致的"鼠标光斑"留位（JS 写入 --mx/--my） */
    --mx: 50%; --my: 50%;
    transition: box-shadow .6s var(--ease), transform .6s var(--ease);
    isolation: isolate;
}
.about-img img {
    aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%;
    transition: transform 1.2s var(--ease), filter .8s var(--ease);
    transform: scale(1.02);
    will-change: transform;
}
.about-img:hover { box-shadow: 0 42px 90px -20px rgba(194,160,106,.32), 0 6px 18px rgba(16,16,20,.10); }
/* JS 视差仍由 site.js 绑定（保持与 hero 一致的 transform），仅保留 :hover 时的"中位"基线 */
.about-img:hover img { transform: scale(1.06); filter: brightness(1.04) saturate(1.08); }

/* 鼠标光斑层（与首页轮播图一致的"彩虹跟随"动效） */
.about-img::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(260px circle at var(--mx) var(--my),
        rgba(255, 232, 184, .45) 0%,
        rgba(224, 199, 149, .30) 25%,
        rgba(194, 160, 106, .14) 55%,
        transparent 75%);
    opacity: 0; transition: opacity .5s var(--ease);
    mix-blend-mode: screen;
}
.about-img:hover::before { opacity: 1; }

/* 金边流光（与首页 hero 同样的"扫光"手法）：
   细线在 hover 时缓慢横扫，营造精致可见的反馈 */
.about-img::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: inherit;
    /* 顶层 1px 金色高光环 */
    box-shadow: inset 0 0 0 1px rgba(224, 199, 149, 0), inset 0 0 0 2px rgba(194,160,106,0);
    transition: box-shadow .55s var(--ease);
    background: linear-gradient(110deg, transparent 35%, rgba(255,232,184,.45) 50%, transparent 65%) no-repeat;
    background-size: 220% 100%;
    background-position: 120% 0;
    transition: background-position .9s var(--ease), box-shadow .55s var(--ease);
}
.about-img:hover::after {
    background-position: -20% 0;
    box-shadow: inset 0 0 0 1px rgba(224, 199, 149, .55), inset 0 0 0 2px rgba(194,160,106,.18);
}
/* 深色区块（如关于页「我们的理念」）内的配图：浅色投影在深底上几乎不可见，
   换成深底阴影 + 金色发丝描边，与 .sec-dark 下其他卡片的光影语言保持一致。 */
.sec-dark .about-img {
    box-shadow: 0 34px 74px -30px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(224, 199, 149, .16);
}
.sec-dark .about-img:hover {
    box-shadow: 0 44px 92px -30px rgba(194, 160, 106, .34), inset 0 0 0 1px rgba(224, 199, 149, .30);
}
/* 理念区媒体层（图片 / 装饰卡的共同外壳，2026-09-24）：
   只做定位上下文，**刻意不加 overflow:hidden** —— 数据徽章要浮出配图左下角，
   若把徽章挂在 .about-img（或 .about-idea）内部，会被它们的 overflow:hidden 裁掉。
   媒体元素一律满宽，保证徽章在「有图 / 无图」两种形态下都贴在同一个左下角。 */
.idea-media { position: relative; display: flex; align-items: center; justify-content: center; }
.idea-media > .about-img, .idea-media > .about-idea { width: 100%; }

.about-badge {
    position: absolute; left: -22px; bottom: -22px; background: var(--ink); color: #fff;
    padding: 24px 28px; border-radius: var(--r-m); box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
    border: 1px solid rgba(224,199,149,.18);
    z-index: 3; /* 浮在光斑/流光之上 */
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.idea-media:hover .about-badge { transform: translateY(-4px); box-shadow: 0 30px 72px rgba(0,0,0,.30), 0 0 0 1px rgba(224,199,149,.35); }
/* 首页（Index.cshtml「我们叫什么」配图，浅色区）的徽章仍挂在 .about-img 内，
   它与理念区徽章共用同一套基础样式，hover 上浮规则各自保留。 */
.about-img:hover .about-badge { transform: translateY(-4px); box-shadow: 0 30px 72px rgba(0,0,0,.30), 0 0 0 1px rgba(224,199,149,.35); }
/* 理念区落在深色底上：徽章原配色 var(--ink) 会与背景糊成一片，
   改为半透明深底 + 提亮金描边，让它从图片/装饰卡上"浮"出来。
   ⛔ 不用 backdrop-filter —— 含文字的盒子禁常驻合成层（分数缩放下文字会发虚）。 */
.sec-dark .about-badge {
    background: rgba(15, 14, 17, .86);
    border-color: rgba(224, 199, 149, .34);
    box-shadow: 0 26px 64px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.sec-dark .idea-media:hover .about-badge {
    box-shadow: 0 34px 76px rgba(0, 0, 0, .56), 0 0 0 1px rgba(224, 199, 149, .42);
}
.about-badge b { display: block; font-size: 34px; color: var(--gold-l); line-height: 1; font-weight: 600; }
.about-badge span { font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 6px; display: block; }

/* 关于页：企业文化（升级：与 hero 一致的光斑 + 边框流光 + 序号徽章升起） */
.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }
.culture-card {
    position: relative; padding: 36px 30px; border-radius: var(--r-l);
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    --mx: 50%; --my: 50%;
    overflow: hidden; isolation: isolate;
    transition: transform .55s var(--ease), background .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
/* 卡片 hover 柔光：居中固定（不再跟指针，理由同 .about-img --mx 处的注释） */
.culture-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(220px circle at var(--mx) var(--my),
        rgba(255, 232, 184, .28) 0%,
        rgba(224, 199, 149, .18) 30%,
        transparent 65%);
    opacity: 0; transition: opacity .5s var(--ease);
    mix-blend-mode: screen;
}
.culture-card:hover::before { opacity: 1; }
/* 金边流光 + 阴影抬升 */
.culture-card::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 35%, rgba(255,232,184,.32) 50%, transparent 65%) no-repeat;
    background-size: 220% 100%;
    background-position: 120% 0;
    box-shadow: inset 0 0 0 1px rgba(224, 199, 149, 0);
    transition: background-position .9s var(--ease), box-shadow .55s var(--ease);
}
.culture-card:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,.07);
    border-color: rgba(224,199,149,.28);
    box-shadow: 0 30px 60px -20px rgba(194,160,106,.30), 0 4px 14px rgba(0,0,0,.18);
}
.culture-card:hover::after {
    background-position: -20% 0;
    box-shadow: inset 0 0 0 1px rgba(224, 199, 149, .55);
}
.culture-card > * { position: relative; z-index: 2; }
.culture-card i {
    display: inline-block; font-size: 13px; font-weight: 600; color: var(--ink);
    background: var(--gold-l); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
    box-shadow: 0 6px 16px rgba(194,160,106,.25);
}
.culture-card:hover i { transform: translateY(-3px) scale(1.06); background: linear-gradient(120deg, var(--gold-l), #ffe9b8); box-shadow: 0 10px 24px rgba(224,199,149,.45); }
/* 「【标题】阐述」两段式（后台一行 = 一句总结 + 一句阐述）：标题拆出来独立成行（金），
   阐述另起一段 —— 2026-09-24 前是整行塞进 <p>，总结和阐述混排没有层级。
   无【】的行不渲染 h3，卡片观感与旧版一致。 */
.culture-card h3 {
    color: var(--gold-l); font-size: 19px; font-weight: 600; letter-spacing: .02em;
    margin: 0 0 10px; line-height: 1.4; transition: color .45s var(--ease);
}
.culture-card:hover h3 { color: #ffe9b8; }
.culture-card p { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.75; margin: 0; transition: color .45s var(--ease); }
.culture-card:hover p { color: rgba(255,255,255,.95); }

/* 关于页：理念区装饰（无图时的"默认样式"兜底） */
.about-idea {
    position: relative;
    text-align: center; padding: 54px 42px; border-radius: var(--r-l);
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    --mx: 50%; --my: 50%;
    overflow: hidden; isolation: isolate;
    transition: transform .55s var(--ease), background .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.about-idea::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx) var(--my),
        rgba(255, 232, 184, .30) 0%, rgba(224, 199, 149, .18) 30%, transparent 65%);
    opacity: 0; transition: opacity .5s var(--ease);
    mix-blend-mode: screen;
}
.about-idea:hover::before { opacity: 1; }
.about-idea::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(110deg, transparent 35%, rgba(255,232,184,.30) 50%, transparent 65%) no-repeat;
    background-size: 220% 100%;
    background-position: 120% 0;
    box-shadow: inset 0 0 0 1px rgba(224, 199, 149, 0);
    transition: background-position .9s var(--ease), box-shadow .55s var(--ease);
}
.about-idea:hover {
    transform: translateY(-6px);
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border-color: rgba(224,199,149,.30);
    box-shadow: 0 30px 60px -20px rgba(194,160,106,.30), 0 4px 14px rgba(0,0,0,.18);
}
.about-idea:hover::after {
    background-position: -20% 0;
    box-shadow: inset 0 0 0 1px rgba(224, 199, 149, .55);
}
.about-idea > * { position: relative; z-index: 2; }
.about-idea .ic { transition: transform .55s var(--ease), filter .55s var(--ease); }
.about-idea:hover .ic { transform: rotate(-6deg) scale(1.08); filter: drop-shadow(0 6px 18px rgba(224,199,149,.45)); }
.about-idea svg { width: 64px; height: 64px; fill: var(--gold-l); margin-bottom: 20px; }
.about-idea p { color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.8; margin: 0; }

/* ============ 关于页：发展历程（年份导轨 + 里程碑时间轴） ============
   布局参考腾讯「我们的故事」：顶部粘性年份导轨负责「跳转」，左侧大年份负责「定位」，
   右侧一条金色光丝串起全部里程碑，年度重点项出大卡、同年其余项收成紧凑行。

   阅读节奏（三级字号 / 三级颜色，视线自上而下逐层收窄）：
     · 导轨年份 14px 胶囊（可点，当前项实底墨色）—— 全局导航；
     · 年号 54px 墨色（桌面粘性跟随）—— 阶段锚点；
     · 大卡标题 23px / 行标题 16.5px —— 内容层级。
   颜色只走既有主色：墨 --ink → 金 --gold → 灰 --txt-2/--txt-3。 */
.hx { margin-top: 42px; }
/* 给固定头部留出高度，从外部锚点进来时标题不会被压住 */
#history { scroll-margin-top: var(--head-h, 80px); }

/* 年份选择器 = **悬浮胶囊**（浮层压在内文之上，列表在胶囊内部滚动并按圆角裁切）
   形态：sticky 的一行本身**完全透明**（没有任何底色），里面只放一枚「内容宽」的胶囊。
        年份少 → 胶囊按内容收窄，右边不留空；年份多 → 胶囊吸到容器最大宽，
        在**胶囊内部**横向滚动，由 border-radius 裁切，胶囊本身尺寸不变 → 不撑开外部布局。

   ⛔ 旧版两个毛病（2026-09-18 二次修）：
     ① 这一行自带宽 1240px 的**浅色渐变带**（sticky 遮罩），胶囊只占左边约 40%，
        余下 600+px 全是空条 —— 用户看到的「列表末尾残留占位块 / 空白亮条」就是它。
        现在底色彻底移除，浮层上只剩胶囊本身。
     ② 胶囊**恒定是滚动容器**（overflow-x:auto），年份装得下时也留着一片可滚区域，
        容易滚出「越界留白 / 错位」。现在默认 overflow:hidden，
        只有 site.js 量出 scrollWidth 真的超出时才加 .is-scroll（滚动区域随数据长度动态产生）。 */
.hx-rail {
    position: sticky; top: var(--head-h, 80px); z-index: 6;
    display: flex; align-items: flex-start;
    padding: 14px 0 18px; margin-bottom: 28px;
    background: none;                 /* ← 不再有满宽底色条（「占位块」的来源） */
    pointer-events: none;             /* 空白区不吃点击：浮层下方的内容照常可选、可点 */
}
.hx-rail-in {
    position: relative; display: inline-flex; align-items: center; gap: 3px;
    max-width: 100%; padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(16, 16, 20, .07);
    box-shadow: 0 10px 28px rgba(16, 16, 20, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
    pointer-events: auto;             /* 胶囊本体照常可点、可滚 */
    overflow: hidden;                 /* 装得下 → 根本不是滚动容器，没有多余的滚动区域 */
    scrollbar-width: none; -ms-overflow-style: none;
}
.hx-rail-in::-webkit-scrollbar { display: none; }
/* 仅当真装不下时才成为滚动容器（.is-scroll 由 site.js 依据实际内容宽度挂上） */
.hx-rail-in.is-scroll { overflow-x: auto; overflow-y: hidden; }
/* 年份 = 胶囊内部的分段控件：容器统一承担底色与描边，分段自身透明、选中才实心 ——
   比「每个年份各带一圈白底 + 边框」干净，也让浮层不会因为一堆小方框显得零碎 */
.hx-yr {
    flex: 0 0 auto; padding: 8px 16px; border-radius: 999px;
    border: 1px solid transparent; background: transparent; color: var(--txt-2);
    font-size: 13.5px; font-weight: 500; letter-spacing: .05em; white-space: nowrap;
    font-variant-numeric: tabular-nums; text-decoration: none;
    transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.hx-yr:hover { background: rgba(194, 160, 106, .14); color: var(--gold-d); }
.hx-yr:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hx-yr.is-on { background: var(--ink); color: var(--gold-l); box-shadow: 0 6px 16px rgba(16,16,20,.18); }
/* 降级动效偏好下不做平滑滚动，吸附仍然生效（改由 JS 直接落位） */
@media (prefers-reduced-motion: reduce) { .hx-rail-in { scroll-behavior: auto; } }

/* 逐年区块：左年份 + 右主线
   ⛔ 左列宽度 + gap 决定「年号 → 卡片」之间那块空白有多大。176px 时实测空白 216px，
      整页看起来左边塌下去一块；收到 116px + gap 34px = 150px（线落 150、卡起 176），
      四位数字仍然放得下（46px 字宽约 108px），空洞感消失。 */
.hx-block {
    display: grid; grid-template-columns: 116px 1fr; gap: 34px;
    padding-bottom: 52px;
    /* 粘性头部 + 悬浮胶囊，锚点跳转后标题不被盖住（胶囊总高 ≈ 76px） */
    scroll-margin-top: calc(var(--head-h, 80px) + 82px);
}
/* 「浏览更多」折叠：默认只留前几个年份，.hx.is-open 时展开 */
.hx-block.is-extra { display: none; }
.hx.is-open .hx-block.is-extra { display: grid; }

.hx-side { position: sticky; top: calc(var(--head-h, 80px) + 82px); align-self: start; }
.hx-year {
    font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.035em;
    color: var(--ink); font-variant-numeric: tabular-nums;
}
/* ⛔ 旧版这里有一条 42px 的金色渐变小横线（.hx-year::after），
   紧贴在「N 个里程碑」上方，读起来像一条断掉的残线 —— 已移除。 */
.hx-count { margin-top: 10px; font-size: 12px; color: var(--txt-3); letter-spacing: .1em; }

/* 主线：一条贯穿全篇的金色光丝；--thread = 丝到内容左沿的距离，节点圆环据此对中 */
.hx-main { --thread: 26px; position: relative; padding-left: var(--thread); }
/* 光丝：1px 太淡时整条线在米色底上「看不见」，节点圆环就成了孤零零的小点。
   提到 .78 → .30，并在顶端压一段更实的金色，让「阶段从哪开始」读得出来。 */
.hx-main::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: -52px; width: 1px;
    background: linear-gradient(180deg,
        rgba(194,160,106,.78) 0%, rgba(194,160,106,.42) 42%,
        rgba(194,160,106,.26) 78%, rgba(194,160,106,.14) 100%);
}
.hx-block:last-child .hx-main::before { bottom: 0; }
/* 落在光丝上的节点圆环：每次「关键节点」的落点标记，悬停实心化。
   大卡上的圆环**与大年号的光学中心对齐**（年号 46px / line-height:1 → 中心约 23px），
   形成「年份 ←→ 落点」一条水平线，比原来对着卡内 meta 行更清楚。 */
.hx-node { position: relative; }
.hx-node::before {
    content: ""; position: absolute; top: 16px;
    left: calc(-1 * var(--thread, 26px) - 4.5px);
    width: 9px; height: 9px; border-radius: 50%;
    background: #fff; border: 2px solid var(--gold);
    box-shadow: 0 0 0 4px rgba(194, 160, 106, .14);
    transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.hx-node:hover::before { background: var(--gold); box-shadow: 0 0 0 6px rgba(194, 160, 106, .24); }
/* 同年里程碑行：圆环对齐行内标题的光学中心 */
.hx-row.hx-node::before { top: 28px; }

/* 年度重点大卡：左图右文。
   ⛔ 图片必须**锁定比例**（aspect-ratio），不能只给 min-height：
      旧版只有 min-height: 244px 且 img 是 height:100%，实际卡高由原图比例反推 ——
      竖版照片会把整张卡拉到 582px（实测），文字在中间孤零零一小块，这就是「布局不合理」的主因。
      锁定 16/10 后卡高稳定在 ~300px，与内容量匹配。
   ⛔ 图文比例同时从 1.06fr 收到 .86fr：文字列拿更多宽度，长摘要不用挤成细长条。 */
.hx-feat {
    display: grid; grid-template-columns: .86fr 1fr;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
    overflow: hidden; box-shadow: 0 8px 28px rgba(16, 16, 20, .05);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.hx-feat:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(16, 16, 20, .09); }
/* 整年都没配图时退化成通栏文字卡：不做成「一整块白板」，
   改成浅底 + 左侧一道金色描边，短内容也不会看起来像空卡 */
.hx-feat.is-plain {
    grid-template-columns: 1fr;
    background: rgba(255, 255, 255, .62);
    box-shadow: none;
    border-left: 2px solid rgba(194, 160, 106, .5);
    /* 短内容的纯文字年卡只有 ~130px，夹在两张 ~300px 的图文卡中间会显得「节奏塌陷」 */
    min-height: 172px;
}
.hx-feat-pic { position: relative; margin: 0; overflow: hidden; background: #f2efe9; aspect-ratio: 16 / 10; }
.hx-feat-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.hx-feat:hover .hx-feat-pic img { transform: scale(1.04); }
.hx-feat-txt { padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hx-feat.is-plain .hx-feat-txt { padding: 26px 30px; }
.hx-feat-txt h3 {
    font-size: 22px; font-weight: 600; line-height: 1.42; letter-spacing: -.01em;
    margin: 11px 0 0; color: var(--ink);
}
.hx-feat-txt p { margin: 12px 0 0; font-size: 14.6px; line-height: 1.82; color: var(--txt-2); }
.hx-feat.is-plain .hx-feat-txt p { margin-top: 8px; }

/* 月份标签（年号里带月份时才出现，如「2008.08」→ 8 月） */
.hx-month {
    align-self: flex-start; display: inline-block;
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
    padding: 3px 11px; border-radius: 999px;
    color: var(--gold-d); background: rgba(194, 160, 106, .13);
    border: 1px solid rgba(194, 160, 106, .22);
}
.hx-month.is-mini { padding: 2px 9px; font-size: 11px; letter-spacing: .06em; }

/* 同年其余里程碑：紧凑行，行间细分隔线。
   ⛔ .hx-list 的上边距不能太小：第一行自带 border-top，紧贴大卡时会连成一条「双线」。 */
.hx-list { margin-top: 24px; }
.hx-row {
    display: grid; grid-template-columns: 1fr; gap: 22px;
    padding: 21px 2px; border-top: 1px solid var(--line);
    transition: background-color .35s var(--ease);
}
.hx-row.has-pic { grid-template-columns: 1fr 168px; }
/* grid 子项默认 min-width:auto —— 长标题（没有空格的中文串）会把 1fr 撑破，显式归零 */
.hx-row-txt { min-width: 0; }
/* ⛔ 悬停只换底色，**不改 padding** —— 旧版 hover 时 padding 左右各加 14px，
   鼠标一扫过去文字就左右跳一下，正是「悬停效果丑」的一部分。 */
.hx-row:hover { background-color: rgba(194, 160, 106, .055); border-radius: var(--r-s); }
.hx-row-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hx-row-h h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; transition: color .3s; }
.hx-row:hover .hx-row-h h4 { color: var(--gold-d); }
.hx-row p { margin: 8px 0 0; font-size: 14.2px; line-height: 1.78; color: var(--txt-2); }
.hx-row-pic {
    margin: 0; align-self: center; border-radius: var(--r-s); overflow: hidden;
    border: 1px solid var(--line); background: #f2efe9; aspect-ratio: 3 / 2;
}
.hx-row-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.hx-row:hover .hx-row-pic img { transform: scale(1.06); }

/* 浏览更多 */
.hx-more { display: flex; justify-content: center; margin-top: 26px; }
.hx-more-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 34px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-2); background: #fff; color: var(--ink);
    font-family: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: .04em;
    transition: all .35s var(--ease);
}
.hx-more-btn i {
    width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .35s var(--ease);
}
.hx-more-btn:hover { border-color: var(--gold); color: var(--gold-d); box-shadow: 0 12px 30px rgba(194, 160, 106, .22); }
.hx.is-open .hx-more-btn i { transform: rotate(-135deg) translate(-2px, -2px); }

/* 能力卡 */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cap {
    position: relative; padding: 44px; border-radius: var(--r-l); overflow: hidden;
    background: linear-gradient(160deg, var(--ink-2), var(--ink-3)); color: #fff; isolation: isolate;
    transition: transform .55s var(--ease);
    border: 1px solid rgba(255,255,255,.04);
}
.cap::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, transparent 30%, rgba(224,199,149,.35) 50%, transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .5s;
}
.cap::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(194, 160, 106, .2), transparent 62%);
    opacity: 0; transition: opacity .5s;
}
.cap:hover { transform: translateY(-6px); }
.cap:hover::before { opacity: 1; }
.cap:hover::after { opacity: 1; }
.cap h4 { font-size: 22px; font-weight: 600; margin-bottom: 12px; letter-spacing: -.005em; }
.cap p { color: rgba(255, 255, 255, .62); font-size: 14.5px; }
.cap-n { position: absolute; right: 30px; top: 18px; font-size: 60px; font-weight: 600; color: rgba(255, 255, 255, .06); line-height: 1; font-variant-numeric: tabular-nums; }

/* ============ 业务范围 ============
   自适应栅格：列数由容器宽度自动推导（桌面 4 / 窄屏 3 / 平板 2 / 手机 1）。
   后台增删业务条目时自动回流，不会出现溢出、重叠或半列错位；
   卡片统一 flex 纵向 + CTA 沉底（margin-top:auto），同行卡片恒等高、按钮恒对齐。 */
.biz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
    gap: 22px;
    align-items: stretch;
}
.biz {
    position: relative; display: flex; flex-direction: column;
    min-width: 0;                 /* 允许栅格轨道收缩：长词不会撑破列宽 */
    height: 100%;
    padding: 32px 26px 26px; border-radius: var(--r-m);
    background: linear-gradient(160deg, #fff 0%, #fdfbf6 58%, #faf7f0 100%);
    border: 1px solid var(--line); overflow: hidden;
    /* ⛔ 卡片（含文字）绝不常驻合成层：will-change/backface-visibility 会把栅格化纹理锁死在 1x，
       hover 的 scale 于是只做「纹理拉伸 + 双线性重采样」而不是重新栅格化 → 整卡标题/正文全部发虚。
       现在卡片只做整数像素位移（translateY），合成层是像素级拷贝、零重采样，文字恒锐利；
       transform 过渡 Chrome 会自动走合成器，帧率依旧稳定。过渡含 opacity 以支持 .rv 进场淡入。 */
    transition: transform .5s var(--spring-soft), box-shadow .5s var(--ease),
                border-color .4s, opacity .75s var(--ease-out);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 8px 22px rgba(16, 16, 20, .035);
}
.biz::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--gold-d), var(--gold), var(--gold-l)); transform: scaleX(0); transform-origin: left;
    transition: transform .6s var(--spring);
}
.biz::after {
    /* 「变大的手感」只放在这层纯光斑上（不含任何文字），文字层永不缩放 → 有生长感但始终锐利 */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(120% 88% at var(--mx, 50%) var(--my, 0%), rgba(194, 160, 106, .13), transparent 62%);
    opacity: 0; transform: scale(1);
    transition: opacity .45s var(--ease), transform .6s var(--spring);
}
.biz:hover {
    /* 只位移、不缩放：整数像素 translate 由合成层做像素级拷贝，文字/图标保持次像素锐利。
       原先的 scale(1.012) 是「悬停后内容变模糊」的直接原因，已移除。 */
    transform: translateY(-8px);
    border-color: rgba(194, 160, 106, .32);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 26px 54px rgba(16, 16, 20, .10), 0 3px 10px rgba(194, 160, 106, .12);
}
.biz:hover::before { transform: scaleX(1); }
.biz:hover::after { opacity: 1; transform: scale(1.06); }
.biz-ic {
    position: relative; z-index: 1; flex: none;
    width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(224, 199, 149, .30), rgba(194, 160, 106, .06));
    color: var(--gold-d); margin-bottom: 20px;
    border: 1px solid rgba(194, 160, 106, .20);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .75) inset, 0 6px 14px rgba(194, 160, 106, .10);
    /* ⛔ 同样不常驻合成层：图标是矢量，必须让浏览器按 1.08 的目标倍率重新栅格化才够锐。
       一旦锁在 1x 合成层上，放大就变成位图拉伸 → 图标发糊。 */
    transition: transform .55s var(--spring), background .45s, color .45s, border-color .45s, box-shadow .45s;
}
.biz-ic svg { width: 25px; height: 25px; fill: currentColor; shape-rendering: geometricPrecision; }
.biz:hover .biz-ic {
    transform: translateY(-3px) scale(1.08) rotate(-5deg);
    background: linear-gradient(145deg, var(--gold-l), var(--gold)); color: #241d10; border-color: transparent;
    box-shadow: 0 10px 20px rgba(194, 160, 106, .28);
}
.biz h4 {
    position: relative; z-index: 1;
    font-size: 19px; font-weight: 600; line-height: 1.45; margin-bottom: 9px; letter-spacing: -.005em;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.biz p {
    position: relative; z-index: 1;
    color: var(--txt-2); font-size: 14px; line-height: 1.72;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.biz-go {
    position: relative; z-index: 1;
    margin-top: auto; padding-top: 18px;      /* 沉底：任意摘要长度下 CTA 都贴齐卡片底部 */
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--gold-d); font-weight: 500; white-space: nowrap;
}
.biz-go::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, var(--line-2), transparent 76%);
    transition: background .45s;
}
.biz:hover .biz-go::before { background: linear-gradient(90deg, rgba(194, 160, 106, .5), transparent 76%); }
.biz-go .ic {
    width: 12px; height: 12px; padding: 4px; box-sizing: content-box;
    border-radius: 50%; border: 1px solid rgba(194, 160, 106, .28); background: rgba(194, 160, 106, .06);
    /* 箭头同样是矢量：不锁合成层，放大时按目标倍率重栅格化，边缘不糊 */
    shape-rendering: geometricPrecision;
    transition: transform .5s var(--spring), background .45s, border-color .45s, color .45s;
}
.biz:hover .biz-go .ic {
    transform: translateX(5px) scale(1.08); border-color: transparent; color: #241d10;
    background: linear-gradient(140deg, var(--gold-l), var(--gold));
}

/* ============ 数据 ============ */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat {
    text-align: center; padding: 38px 16px; border-radius: var(--r-m);
    border: 1px solid rgba(255, 255, 255, .08); transition: background .4s, transform .4s, border-color .4s;
    position: relative; overflow: hidden;
}
.stat::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(224,199,149,.18), transparent 60%);
    opacity: 0; transition: opacity .4s;
}
.stat:hover { background: rgba(255, 255, 255, .04); transform: translateY(-4px); border-color: rgba(224,199,149,.3); }
.stat:hover::before { opacity: 1; }
.stat b { display: block; font-size: clamp(34px, 4vw, 54px); font-weight: 600; color: var(--gold-l); line-height: 1.05; font-variant-numeric: tabular-nums; position: relative; }
.stat b i { font-style: normal; font-size: .5em; margin-left: 3px; }
.stat span { font-size: 13.5px; color: rgba(255, 255, 255, .6); position: relative; letter-spacing: .04em; }

/* ============ 案例 ============ */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.case {
    position: relative; display: block; border-radius: var(--r-m); overflow: hidden;
    background: var(--ink); aspect-ratio: 4 / 3;
    transition: box-shadow .55s var(--ease), transform .55s var(--ease);
}
/* 悬停：只做轻微放大 + 提亮提饱和。
   原来这里是 opacity:.55，会在深色底上把整张图洗成灰白 —— 就是"鼠标移过去变灰、看不清"的根因。 */
.case img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s var(--ease); }
.case:hover { box-shadow: 0 0 0 1px rgba(224,199,149,.32), 0 26px 60px rgba(16,16,20,.22); }
.case:hover img { transform: scale(1.07); filter: brightness(1.05) saturate(1.08); }
.case-mask {
    position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(transparent 38%, rgba(6, 6, 8, .92));
    color: #fff;
}
.case-mask h4 { font-size: 19px; font-weight: 500; transform: translateY(10px); transition: transform .55s var(--ease); letter-spacing: -.005em; }
.case-mask p { font-size: 13px; color: rgba(255, 255, 255, .66); margin-top: 6px; opacity: 0; transform: translateY(10px); transition: all .55s var(--ease); }
.case:hover .case-mask h4 { transform: none; }
.case:hover .case-mask p { opacity: 1; transform: none; }
.case-tag { position: absolute; left: 22px; top: 22px; padding: 5px 13px; border-radius: 999px; background: rgba(194, 160, 106, .92); color: #241d10; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; }

.filter-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.filter-bar button {
    padding: 9px 22px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--txt-2);
    transition: all .35s var(--ease); background: #fff;
}
.filter-bar button:hover { border-color: var(--gold); color: var(--gold-d); }
.filter-bar button.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============ 新闻 / 资讯列表（参考华为「资讯」风格）============ */
.news-filter {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    flex-wrap: wrap; margin: 6px 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.news-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.news-search .ns-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--txt-2); }
.news-search select {
    font: inherit; font-size: 13.5px; color: var(--txt); padding: 8px 30px 8px 12px;
    border: 1px solid var(--line-2); border-radius: 999px; background-color: #fff; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%239c7f4c' stroke-width='2'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    transition: border-color .3s var(--ease);
}
.news-search select:hover { border-color: var(--gold); }
.news-search .ns-q {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--txt-3);
    transition: border-color .3s var(--ease);
}
.news-search .ns-q:focus-within { border-color: var(--gold); }
.news-search .ns-q .ic { width: 15px; height: 15px; flex: none; }
.news-search .ns-q input {
    border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; color: var(--txt); width: 160px;
}
/* 「筛选 + 重置」成组：窄屏换行时两个按钮一起走，不会把「重置」单独甩到下一行。
   gap 用 inherit 跟着 .news-search 走 —— 断点里改检索区间距时不必再同步这一处。 */
.news-search .ns-btns { display: flex; align-items: center; gap: inherit; }

/* 主按钮：刻意留一条 1px 透明描边 —— 这样它与「重置」（白底 + 1px 实描边）以及分类标签
   的外框总高完全一致（37px）。否则实心按钮会比描边按钮矮 2px，并排时肉眼可辨。 */
.news-search .ns-btn {
    padding: 9px 22px; border: 1px solid transparent; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: 13.5px;
    line-height: 1.25; letter-spacing: .04em; white-space: nowrap;
    transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.news-search .ns-btn:hover { background: var(--gold-d); }
/* 「重置」= 与「筛选」完全同尺寸的次级按钮（padding / 圆角 / 字号 / 字距 / 行高逐项对齐），
   只把实底换成白底描边 —— 属于同一套按钮体系，又不会与主操作抢注意力。 */
.news-search .ns-btn.is-ghost {
    background: #fff; color: var(--txt-2); border: 1px solid var(--line-2);
    transition: background .3s var(--ease), border-color .3s var(--ease),
                color .3s var(--ease), box-shadow .3s var(--ease);
}
.news-search .ns-btn.is-ghost:hover {
    background: #fff; color: var(--gold-d); border-color: var(--gold);
    box-shadow: 0 6px 18px rgba(194, 160, 106, .16);
}
.news-search .ns-btn.is-ghost:active { background: var(--cream-2); }

.news-list { display: grid; gap: 0; }
.news {
    display: grid; grid-template-columns: 104px 1fr 220px 46px; gap: 28px; align-items: center;
    padding: 26px 10px; border-bottom: 1px solid var(--line);
    transition: background .4s var(--ease), padding .4s var(--ease);
}
.news:hover { background: #fff; padding-left: 22px; padding-right: 22px; border-radius: var(--r-m); border-bottom-color: transparent; box-shadow: 0 14px 38px rgba(16,16,20,.05); }
.news-date { display: flex; flex-direction: column; line-height: 1.15; }
.news-date b { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.news-date span { font-size: 12.5px; color: var(--gold-d); font-weight: 500; margin-top: 4px; }
.news-body { min-width: 0; }
.news h4 { font-size: 18.5px; font-weight: 500; margin: 9px 0 7px; transition: color .3s; letter-spacing: -.005em;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.news:hover h4 { color: var(--gold-d); }
.news p { color: var(--txt-2); font-size: 14px; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-pic { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 16 / 10; background: var(--cream-2); }
.news-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.news:hover .news-pic img { transform: scale(1.07); }
.news-go { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--txt-3); transition: all .4s var(--ease); }
.news:hover .news-go { background: var(--gold); border-color: var(--gold); color: #241d10; transform: rotate(-45deg); }
.news-empty { text-align: center; color: var(--txt-3); padding: 60px 0; }

.news-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
/* 分类项 = 按钮/标签（默认 / hover / 选中 三态齐全，兼容键盘聚焦）。
   尺寸刻意与 .ns-btn 逐项对齐（9px 22px / 13.5px / 999px / .04em），
   让「分类切换」与「条件检索」看起来是同一套控件，而不是一行裸文字。 */
.ntab {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 22px; border-radius: 999px;
    font-size: 13.5px; font-weight: 500; line-height: 1.25; letter-spacing: .04em;
    text-decoration: none; white-space: nowrap;
    border: 1px solid var(--line-2); background: #fff; color: var(--txt-2);
    box-shadow: 0 1px 2px rgba(16, 16, 20, .03);
    transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease),
                box-shadow .3s var(--ease), transform .3s var(--ease);
}
/* hover：金边 + 金字 + 极淡金底 + 上浮 1px —— 只做颜色与 1px 位移，不做任何浮层 */
.ntab:hover {
    color: var(--gold-d); border-color: var(--gold); background: rgba(194, 160, 106, .07);
    box-shadow: 0 6px 18px rgba(194, 160, 106, .16); transform: translateY(-1px);
}
.ntab:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16, 16, 20, .05); }
/* 选中：墨色实底 + 亮金字（与时间轴年份胶囊、翻页当前页同一套选中语言） */
.ntab.is-on {
    background: var(--ink); border-color: var(--ink); color: var(--gold-l);
    box-shadow: 0 8px 22px rgba(16, 16, 20, .16);
}
.ntab.is-on:hover { background: var(--ink); border-color: var(--ink); color: var(--gold-l); transform: none; }
.news-cat {
    display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em;
    padding: 2px 10px; border-radius: 6px; margin-bottom: 2px;
    background: rgba(194,160,106,.12); color: var(--gold-d);
}
.news-cat-industry { background: rgba(64,124,200,.12); color: #3f6fa8; }
.news-cat-notice { background: rgba(176,74,58,.12); color: #b04a3a; }

/* ---------- 首页「天成记动态」卡片版式（参考华为「推荐信息」的便当网格）----------
   桌面（≥1025px）：3 列 × 2 行 —— 第 1 张铺满整列的图片大卡（跨 2 行）、
   第 2/3 张为中列白卡、第 4 张为右列竖卡（跨 2 行）。
   数据不足 4 条时视图不加 .is-bento → 退化为等宽自适应网格，卡片结构完全一致。
   卡片内部 DOM 顺序固定「文字块 → 图片块」；大卡把图片绝对定位铺满、文字压到底部渐变上，
   所以下面这组 .nc-* 规则对两种形态都成立，不需要第二套标记。 */
.news-head .sec-h::after {
    content: ""; display: block; width: 32px; height: 2px; margin: 22px auto 0;
    border-radius: 2px; background: linear-gradient(90deg, var(--gold-l), var(--gold-d));
}

.news-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }

.news-card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    padding: 26px 26px 22px; border-radius: var(--r-m); overflow: hidden;
    background: #fff; border: 1px solid rgba(16, 16, 20, .05); text-align: center;
    box-shadow: 0 2px 14px rgba(16, 16, 20, .03);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(16, 16, 20, .1); }

.nc-body { display: flex; flex-direction: column; align-items: center; width: 100%; }
.nc-date { font-size: 12px; letter-spacing: .1em; font-weight: 500; color: var(--gold-d); }
.nc-t {
    width: 100%; margin-top: 7px; font-size: 17.5px; font-weight: 600; line-height: 1.45;
    min-height: 2.9em; /* 固定两行高度：标题 1 行 / 2 行的卡片，下方图片带高度才一致 */
    letter-spacing: -.005em; color: var(--ink); transition: color .35s var(--ease);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-s {
    width: 100%; margin-top: 7px; font-size: 13.4px; line-height: 1.62; color: var(--txt-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-link {
    display: inline-flex; align-items: center; margin-top: 13px;
    font-size: 13.5px; font-weight: 500; color: var(--gold-d); transition: color .3s var(--ease);
}
.nc-link .nc-chev { width: 14px; height: 14px; margin-left: 1px; fill: none; transition: transform .35s var(--ease); }
.news-card:hover .nc-t { color: var(--gold-d); }
.news-card:hover .nc-link .nc-chev { transform: translateX(3px); }

/* 图片默认按 16:9 站定基础高度，同时允许被拉伸/压缩去填满卡片剩下的空间：
   小卡里被压成一条宽图带，竖卡里被拉成竖构图 —— 与华为那三张浅色卡的节奏一致。 */
.nc-pic {
    position: relative; align-self: stretch; flex: 1 1 auto; aspect-ratio: 16 / 9;
    margin-top: 16px; border-radius: var(--r-s); overflow: hidden; background: var(--cream-2);
}
.nc-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.news-card:hover .nc-pic img { transform: scale(1.06); }

.news-more { margin-top: 40px; text-align: center; }

/* 卡片数 ≤2 时收窄并居中，避免单张卡在 1240 通栏里被拉成一张巨型横幅 */
.news-cards.is-few { grid-template-columns: repeat(auto-fit, minmax(272px, 400px)); justify-content: center; }

@media (min-width: 1025px) {
    .news-cards.is-bento {
        /* 行高口径：要同时满足「两张小卡的图片带 ≥90px」和「竖卡图片能撑成竖构图」。
           按文案长度实测，卡片文字区（日期+两行标题+两行摘要+链接+内边距）固定吃掉约 232px，
           所以行高 = 232 + 想要的图片带高度。 */
        --nc-row: clamp(322px, 22.5vw, 348px);
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, var(--nc-row));
    }
    .news-cards.is-bento .news-card.is-hero { grid-column: 1; grid-row: 1 / span 2; }
    .news-cards.is-bento .news-card.is-tall { grid-column: 3; grid-row: 1 / span 2; }
    /* 3 条时：大图卡横跨两列，余下两张自动落到第 3 列上下排开 */
    .news-cards.is-trio .news-card.is-hero { grid-column: 1 / span 2; }
    .news-cards.is-bento .nc-pic { min-height: 78px; }

    /* 图片大卡：封面铺满整卡，文字压在底部渐变之上（白字 + 香槟金链接） */
    .news-cards.is-bento .news-card.is-hero { padding: 0; border: 0; }
    /* aspect-ratio 必须归零：inset:0 已给出确定高度，若留着 16:9 浏览器会反推出宽度（图会被拉宽到屏外） */
    .news-cards.is-bento .news-card.is-hero .nc-pic { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; border-radius: 0; }
    .news-cards.is-bento .news-card.is-hero::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(12,12,16,0) 30%, rgba(12,12,16,.4) 56%, rgba(12,12,16,.86) 100%);
    }
    /* 文案居中：与另外三张白卡同一套对齐口径（= 华为那四张卡的观感） */
    .news-cards.is-bento .news-card.is-hero .nc-body {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
        width: auto; padding: 0 34px 34px;
    }
    .news-cards.is-bento .news-card.is-hero .nc-date { color: var(--gold-l); }
    .news-cards.is-bento .news-card.is-hero .nc-t { color: #fff; font-size: clamp(20px, 1.6vw, 24px); -webkit-line-clamp: 3; }
    .news-cards.is-bento .news-card.is-hero .nc-s { color: rgba(255, 255, 255, .78); }
    .news-cards.is-bento .news-card.is-hero .nc-link { color: var(--gold-l); }
    .news-cards.is-bento .news-card.is-hero:hover .nc-t { color: var(--gold-l); }
}

/* ============ 合作品牌（地区地图分布 + logo 墙，视觉参考腾讯云基础设施版式） ============ */
.pcard {
    display: grid; grid-template-columns: minmax(300px, 5fr) 7fr;
    gap: 56px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
    padding: 56px 60px;
    box-shadow: 0 24px 60px rgba(16, 16, 20, .05);
}
.pinfo .sec-h { margin-top: 10px; }
.pinfo .sec-p { font-size: 15.5px; }
.pstats { display: flex; gap: 48px; margin-top: 32px; }
.pstat b {
    display: block; font-size: 46px; line-height: 1; font-weight: 700;
    color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pstat i { display: block; font-style: normal; margin-top: 10px; font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
/* 「合作品牌」数字的后缀（如 +）：与顶部轮播区统计同一数据源、同一渲染口径 */
.pstat-suf { font-size: 22px; font-weight: 700; color: var(--gold); margin-left: 3px; vertical-align: super; line-height: 1; }
.plink {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 34px; font-weight: 600; color: var(--gold); font-size: 15px;
}
.plink .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.plink:hover .ic { transform: translate(2px, -2px); }

.pmap {
    position: relative; min-width: 0;
    /* 锚点标签与锚点中心的基础间距 —— CSS 与 site.js 的 layoutLabels() 共用这一个值
       （JS 读它算避让框，放不下时按倍数抬高为「远位」）。改这里即可全局生效。 */
    --pl-gap: 20px;
}
.pmap-svg { display: block; width: 100%; height: auto; }
/* 地图空态提示：还没有任何品牌填「所属地区」时，在地图中央给一句说明 ——
   否则只剩一张点阵底图、连一个锚点也没有，看着像「地图没加载出来」。
   由 site.js 在「锚点实际渲染数为 0」时插入。 */
.pmap-empty {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    padding: 8px 18px; border-radius: 999px; white-space: nowrap;
    font-size: 13px; letter-spacing: .05em; color: var(--ink-3);
    background: rgba(250, 248, 242, .9); border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(16, 16, 20, .04);
    pointer-events: none;                 /* 关键：纯提示，不挡地图/锚点交互 */
}
.pmap-empty::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
    background: var(--gold); opacity: .55;
    animation: pmap-empty-pulse 2.2s ease-in-out infinite;
}
@keyframes pmap-empty-pulse {
    0%, 100% { opacity: .3; transform: scale(.85); }
    50% { opacity: .85; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .pmap-empty::before { animation: none; opacity: .6; }
}
/* 地图锚点：绝对定位（百分比坐标由 china-map.js 提供），点击弹层看该地区品牌 */
.panchor {
    position: absolute; transform: translate(-50%, -50%);
    width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; border-radius: 50%;
}
.panchor-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 4px rgba(194, 160, 106, .22);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* 呼吸圈：纯 CSS 动画 */
.panchor::before {
    content: ""; position: absolute; inset: 4px; border-radius: 50%;
    border: 1.5px solid rgba(194, 160, 106, .55); opacity: 0;
    animation: panchor-pulse 2.6s var(--ease) infinite;
}
@keyframes panchor-pulse {
    0% { transform: scale(.5); opacity: 0; }
    35% { opacity: .9; }
    100% { transform: scale(1.5); opacity: 0; }
}
.panchor-label {
    /* ⛔ 偏移必须写成 calc(50% + var(--pl-gap))：50% 是相对「34px 的按钮盒」算的，
       而间距要以「锚点中心」为基准 —— 直接写 left: 20px 实际只剩 3px（17 - 20），
       且 JS 的 layoutLabels() 按中心 + 间距算避让框，两者会差 17px，避让结果全错位。
       --pl-gap 由 CSS 给出基准值（.pmap 上），JS 在「近位放不下」时临时抬高（远位）。 */
    position: absolute; left: calc(50% + var(--pl-gap, 20px)); top: 50%; transform: translateY(-50%);
    font-size: 12px; line-height: 1; color: var(--txt-2);
    background: rgba(255, 255, 255, .88); backdrop-filter: blur(4px);
    padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(194, 160, 106, .25);
    white-space: nowrap; pointer-events: none;
    transition: color .3s, border-color .3s;
}
.panchor.is-flip .panchor-label { left: auto; right: calc(50% + var(--pl-gap, 20px)); }
/* 上/下方向：由 site.js 的 layoutLabels() 在「右侧→左侧」都被占时选用（居中放置）。
   间距与 JS 共用 --pl-gap，避免两边各写一个数字后失配。 */
.panchor.is-top .panchor-label { left: 50%; right: auto; top: auto; bottom: calc(50% + var(--pl-gap, 20px)); transform: translateX(-50%); }
.panchor.is-bottom .panchor-label { left: 50%; right: auto; top: calc(50% + var(--pl-gap, 20px)); bottom: auto; transform: translateX(-50%); }
/* 远位（近位四个方向都被占住时启用，间距 = 1× 的 2.2 倍）：补一段极细引导线。
   没有它的话，标签离锚点 40px 以上时会被误认为指向旁边那个锚点。
   ::before 已被呼吸圈占用，这里用 ::after。 */
.panchor.is-far::after { content: ""; position: absolute; background: rgba(194, 160, 106, .5); }
.panchor.is-far.is-top::after { left: 50%; transform: translateX(-50%); width: 1px; bottom: calc(50% + 6px); height: calc(var(--pl-gap, 20px) - 6px); }
.panchor.is-far.is-bottom::after { left: 50%; transform: translateX(-50%); width: 1px; top: calc(50% + 6px); height: calc(var(--pl-gap, 20px) - 6px); }
.panchor.is-far.is-flip::after { right: calc(50% + 6px); top: 50%; transform: translateY(-50%); height: 1px; width: calc(var(--pl-gap, 20px) - 6px); }
.panchor.is-far:not(.is-flip):not(.is-top):not(.is-bottom)::after { left: calc(50% + 6px); top: 50%; transform: translateY(-50%); height: 1px; width: calc(var(--pl-gap, 20px) - 6px); }
.panchor:hover .panchor-dot, .panchor.is-active .panchor-dot { transform: scale(1.45); box-shadow: 0 0 0 6px rgba(194, 160, 106, .28); }
.panchor:hover .panchor-label, .panchor.is-active .panchor-label { color: var(--gold); border-color: var(--gold); }

/* 锚点弹层：桌面跟随锚点（JS 定位 + 边界翻转），移动端固定为底部抽屉 */
.ppop {
    position: absolute; z-index: 6; width: 322px; max-width: 86vw;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 16, 20, .18);
    padding: 16px 16px 12px;
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98);
    /* ⛔ 关闭态必须 pointer-events: none：visibility 是「离散过渡」，淡出这 0.28s 内元素仍是
       visible，弹层会盖在别的锚点上把点击吞掉 —— 表现是「刚关掉一个地区，马上点另一个没反应」。 */
    pointer-events: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.ppop.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.ppop-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ppop-name { font-weight: 700; font-size: 15px; }
.ppop-count { font-size: 12px; color: var(--gold); background: rgba(194, 160, 106, .12); border-radius: 999px; padding: 3px 10px; }
.ppop-close {
    margin-left: auto; width: 26px; height: 26px; border: 0; background: none; cursor: pointer;
    color: var(--ink-3); font-size: 16px; line-height: 1; border-radius: 50%;
    transition: background .2s, color .2s;
}
.ppop-close:hover { background: #f3efe6; color: var(--ink); }
/* 列表：长方形 logo 卡 + 品牌名，与底部 logo 墙同一套视觉语言。
   ⛔ 别再用「正方形缩略图」：品牌 logo 是 ~2.6:1 的长方形，塞进 34×34 的方格再 contain，
      宽度先触边 → 实际渲染高度只剩 ~13px，logo 糊成一团、四周全是灰底空白（品牌名也压到 13.5px 浅灰）。
      正解与 .pwall-logo 一致：固定高度（而非固定方形盒子）+ 宽度自适应。 */
.ppop-list { max-height: min(272px, 46vh); overflow: auto; padding: 8px 0 2px; overscroll-behavior: contain; }
.ppop-item {
    display: flex; align-items: center; gap: 12px;
    padding: 6px; border-radius: 12px;
    transition: background .24s var(--ease);
}
.ppop-item + .ppop-item { margin-top: 2px; }
.ppop-item:hover { background: #fbf8f1; }
.ppop-logo {
    flex: 0 0 88px; height: 36px; border-radius: 9px;
    background: #fff; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    padding: 5px 8px; box-sizing: border-box; overflow: hidden;
}
.ppop-logo img { display: block; height: 25px; width: auto; max-width: 100%; object-fit: contain; }
/* 未传 logo：占位卡显示品牌首字，保持与有图条目左对齐一致 */
.ppop-logo.is-empty { background: #fbf8f1; font-size: 13px; font-weight: 700; color: var(--gold); }
.ppop-brand {
    font-size: 14px; color: var(--ink); letter-spacing: .01em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ppop-list::-webkit-scrollbar { width: 6px; }
.ppop-list::-webkit-scrollbar-thumb { background: #e6dfd0; border-radius: 999px; }
.ppop-list::-webkit-scrollbar-track { background: transparent; }

/* logo 墙标题行 */
.pwall-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line);
    font-size: 13px; letter-spacing: .08em; color: var(--ink-3);
}
.pwall-head span:first-child { font-weight: 700; color: var(--txt-2); font-size: 14px; }
/* logo 墙：3 行横向滚动 · 长方形（非圆形）logo 卡 · 默认叠加主题色，选中/悬停还原原始配色
   结构：Razor 先平面渲染（无 JS 时退化为自动换行网格）；site.js 再拆 3 行 + 复制成无缝循环 */
.pwall {
    display: flex; flex-wrap: wrap; gap: 16px 14px; margin-top: 28px;
}
.pwall-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 0 0 auto; width: 120px; min-width: 0;
}
/* 长方形 logo 卡（需求：不得使用圆形）
   ⛔ 卡内 img 必须写死像素高度 + 卡片 flex 居中。曾经的写法是 display:grid + place-items:center
   配 img{max-height:100%}：独占一行的 grid 行高是 auto（尺寸不确定），百分比 max-height 会被解析成
   none → 高瘦 logo（如 281×180）按卡宽 96px 撑到 61.5px，直接把 46px 的卡顶穿、压到下一行
   （真站实测溢出 23.5px，症状就是「上下布局的 logo 溢出」）。overflow:hidden 只是最后一道保险。 */
.pwall-logo {
    position: relative;
    width: 100%; height: 46px; border-radius: 10px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 6px 16px rgba(16, 16, 20, .05);
    display: flex; align-items: center; justify-content: center;
    padding: 7px 11px; box-sizing: border-box; overflow: hidden;
    /* 卡上没有 --plogo（未传 logo 图）时蒙版为空透明，不会画出一块金砖 */
    --plogo: linear-gradient(transparent, transparent);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.pwall-logo img {
    display: block; height: 32px; width: auto; max-width: 100%;   /* 32 = 卡高 46 − 上下 padding 14 */
    object-fit: contain;
    transition: opacity .38s var(--ease);
}
/* 默认态「直接叠加主题色」：拿 logo 图本身当形状蒙版（mask 取图片 alpha 通道）、填品牌金渐变，
   任何彩色 logo 都被直接描成统一的主题金色 —— 不是靠滤镜洗淡，所以颜色是真的被处理过。
   悬停/选中时蒙版淡出、原图淡入，恢复 logo 原始配色。 */
.pwall-logo::after {
    content: ""; position: absolute; left: 11px; right: 11px; top: 7px; bottom: 7px;
    background: linear-gradient(150deg, #e8d0a0 0%, #cfa963 52%, #b98f45 100%);
    -webkit-mask-image: var(--plogo); -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;    -webkit-mask-size: contain;
            mask-image: var(--plogo);         mask-repeat: no-repeat;
            mask-position: center;            mask-size: contain;
    opacity: 1;
    transition: opacity .38s var(--ease);
}
/* 仅在「卡片带了 --plogo 蒙版」且浏览器支持 mask 时才隐藏原图；
   不支持 mask 的老浏览器退化为直接显示原色 logo（不会变成金砖）。 */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    .pwall-logo[style*="--plogo"] img { opacity: 0; }
    .pwall-item:hover .pwall-logo[style*="--plogo"] img,
    .pwall-item.is-sel .pwall-logo[style*="--plogo"] img { opacity: 1; }
    .pwall-item:hover .pwall-logo::after,
    .pwall-item.is-sel .pwall-logo::after { opacity: 0; }
}
.pwall-name {
    font-size: 12px; color: var(--txt-2); text-align: center; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 选中态（悬停某品牌 → 该品牌被选中） */
.pwall-item.is-sel .pwall-logo,
.pwall-item:hover .pwall-logo {
    transform: translateY(-3px); border-color: var(--gold);
    box-shadow: 0 14px 30px rgba(194, 160, 106, .22);
}
/* 选中态（悬停某品牌 → 该品牌被选中）：卡片抬起 + 边框转金；
   「还原 logo 原始配色」由上面 @supports 块里 img/::after 的透明度互换负责，这里不再用 filter 覆盖。 */

/* 滚动模式（JS 加 .is-marquee）：3 行横向无缝滚动，行首尾以遮罩淡出 */
.pwall.is-marquee {
    display: block; flex-wrap: nowrap; overflow: hidden; padding: 4px 0 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* ⛔ 行位移「不」用 CSS @keyframes（旧写法已删，别加回来）：
   ① 旧的 to{translateX(-50%)} 要求「份数为偶数」且 -50% 恰好落在整数份边界 ——
      但槽位宽度含 gap，实测半轨比整数份多出半个 gap（7px）→ 每圈累积错位、边界处露出半个 logo；
   ② resize/断点切换只有两种改法都出错：改 animation-duration 会让进度按新时长重映射
      （实测行变换 -136.8px 瞬间跳到 -205.5px，就是「滚动卡滞/闪现」的来源），
      重启动画则直接跳回起点。
   现在由 site.js 逐帧写 translate3d 像素值，无缝靠「对一份节距取模」保证，与份数奇偶无关；
   悬停暂停 = 不再累加位移（不用 animation-play-state），断点切换时按百分比保持进度不跳。 */
.pwall.is-marquee .pwall-row {
    display: flex; gap: 14px; width: max-content; align-items: flex-start;
    will-change: transform;                  /* 只 3 个行元素，常驻合成层代价可接受 */
}
.pwall.is-marquee .pwall-row + .pwall-row { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
    /* 减动效：不克隆副本、不逐帧位移（site.js 里直接跳过），改为可手动横向拖动 */
    .pwall.is-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ============ 架构（分层网格 · 支持任意层级，页面高度只随层数增长） ============ */
.org-wrap { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.org-tier {
    display: grid; gap: 16px 20px; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding-left: calc(var(--ti, 0) * 20px);
}
/* 根节点：居中金标胶囊（参照参考图的「总经理」圆角金底标签） */
.org-tier-1 { grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); justify-content: center; }
.org-tier-1 .org-card {
    border-radius: 999px; padding: 14px 40px; text-align: center;
    background: linear-gradient(135deg, #e8c87a 0%, #d4a855 100%);
    border-color: transparent; color: #241d10;
    box-shadow: 0 8px 24px rgba(194, 160, 106, .35), inset 0 1px 0 rgba(255,255,255,.45);
    font-size: 15px;
}
.org-tier-1 .org-card::before { display: none; }
.org-tier-1 .org-card b { margin-bottom: 0; color: #241d10; font-size: 17px; letter-spacing: .06em; font-weight: 700; }
.org-tier-1 .org-card p, .org-tier-1 .org-card em, .org-tier-1 .org-up { display: none; }
/* 二级及以下：左侧金色引导线 + 层级缩进 */
.org-tier-sub {
    position: relative; border-left: 2px solid rgba(194, 160, 106, .22); border-radius: 2px;
    padding-left: calc(18px + var(--ti, 1) * 14px);
}
/* 二级节点（如总经办）：宽卡片样式，参照参考图的「总经办」区域 */
.org-tier-sub .org-tier {
    grid-template-columns: 1fr;
}
.org-tier-sub .org-tier > .org-card {
    padding: 24px 28px;
    border-radius: 16px;
    border-left: 4px solid var(--gold);
}
.org-tier-sub .org-tier > .org-card b {
    font-size: 18px;
    margin-bottom: 8px;
}
.org-tier-sub .org-tier > .org-card p {
    font-size: 14px;
    min-height: auto;
    margin-bottom: 10px;
}
.org-tier-sub .org-tier > .org-card::before {
    display: none;
}
.org-tier-sub .org-tier > .org-card .org-up {
    position: static;
    display: inline-block;
    font-size: 12px;
    color: var(--gold-d);
    background: rgba(194, 160, 106, .1);
    padding: 3px 12px;
    border-radius: 999px;
    margin-left: 10px;
    vertical-align: middle;
    letter-spacing: 0;
}
.org-card {
    position: relative; padding: 20px 22px 20px 24px; border-radius: 14px; background: #fff;
    border: 1px solid var(--line); text-align: left;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
.org-card::before {
    content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--gold), rgba(194, 160, 106, .16));
}
.org-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(16, 16, 20, .09); border-color: var(--gold); }
.org-card b { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.org-card p { font-size: 13px; color: var(--txt-2); line-height: 1.65; min-height: 43px; }
.org-card em { display: inline-block; font-style: normal; font-size: 11.5px; color: var(--gold-d); margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(194, 160, 106, .1); }
.org-up { position: absolute; top: 14px; right: 14px; font-size: 11px; color: #9a8768; letter-spacing: .02em; background: rgba(194, 160, 106, .08); padding: 2px 10px; border-radius: 999px; }
/* 核心层卡片：下设机构收进折叠分支（点击卡片展开，父子归属一目了然） */
.org-card.has-sub { cursor: pointer; }
.org-card.is-open { border-color: var(--gold); box-shadow: 0 22px 48px rgba(194, 160, 106, .2); }
.org-card.is-open::before { background: linear-gradient(180deg, var(--gold), rgba(194, 160, 106, .5)); }
.org-more {
    display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 12px;
    padding: 7px 10px; border: 1px dashed rgba(194, 160, 106, .48); border-radius: 9px;
    background: rgba(194, 160, 106, .07); font: inherit; font-size: 12px;
    color: var(--gold-d); text-align: left; cursor: pointer;
    transition: background .35s, border-color .35s, color .35s;
}
.org-more:hover { background: rgba(194, 160, 106, .17); border-color: var(--gold); }
.org-more-n { font-weight: 600; }
.org-more-cue { margin-left: auto; font-size: 10.5px; color: #b9a98e; }
.org-card.is-open .org-more-cue { color: var(--gold-d); }
.org-more-ar {
    flex: none; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .4s var(--ease), margin-top .4s var(--ease);
}
.org-card.is-open .org-more-ar { transform: rotate(-135deg); margin-top: 3px; }
.org-branch { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.org-branch-in {
    position: relative; padding: 12px 0 2px 18px;
    display: flex; flex-direction: column; gap: 7px;
}
.org-branch-in::before {
    content: ""; position: absolute; left: 6px; top: 15px; bottom: 12px; width: 1px;
    background: linear-gradient(180deg, var(--gold-l), rgba(194, 160, 106, .18));
}
.org-sub {
    position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-left: calc((var(--sd, 1) - 1) * 16px);
    opacity: 0; transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
    transition-delay: calc(var(--si, 0) * 45ms);
}
.org-branch.is-open .org-sub { opacity: 1; transform: none; }
.org-sub::before {
    content: ""; position: absolute; left: -12px; top: 50%; width: 10px; height: 1px;
    background: rgba(194, 160, 106, .45);
}
.org-sub-name {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    font-size: 12.5px; color: var(--ink); background: #fff;
    border: 1px solid var(--line); border-radius: 999px;
}
.org-sub-name::before {
    content: ""; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 3px rgba(194, 160, 106, .16);
}
.org-sub em {
    margin: 0; padding: 0; background: none; border-radius: 0;
    font-style: normal; font-size: 11px; color: #a4937a;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============ 分公司 ============ */
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.branch {
    position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--ink); color: #fff;
    min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px;
}
.branch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: transform 1.1s var(--ease), opacity .5s; }
.branch:hover img { transform: scale(1.08); opacity: .38; }
.branch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(6, 6, 8, .9)); }
.branch > * { position: relative; z-index: 1; }
.branch .bcity { font-size: 12px; letter-spacing: .28em; color: var(--gold-l); font-weight: 500; }
.branch h4 { font-size: 22px; font-weight: 500; margin: 10px 0 10px; letter-spacing: -.005em; }
.branch p { font-size: 14px; color: rgba(255, 255, 255, .7); }
.branch .bstatus { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; font-size: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); align-self: flex-start; }
.branch .bstatus::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.branch .bstatus.prepare::before { background: var(--gold-l); box-shadow: 0 0 6px var(--gold-l); }
.branch .bgo { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gold-l); }
.branch .bgo .ic { transition: transform .35s var(--ease); }
.branch:hover .bgo .ic { transform: translateX(4px); }

/* ============ 联系 / FAQ ============ */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; }
.contact-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.contact-info li { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); align-items: flex-start; background: #fff; transition: all .35s var(--ease); }
.contact-info li:hover { border-color: rgba(194, 160, 106, .35); box-shadow: 0 14px 34px rgba(16, 16, 20, .05); transform: translateY(-3px); }
.contact-info .ci-ic {
    width: 42px; height: 42px; border-radius: 10px;
    background: linear-gradient(140deg, rgba(194,160,106,.15), rgba(194,160,106,.04));
    color: var(--gold-d); display: grid; place-items: center; font-size: 17px; flex: none;
    transition: transform .35s var(--ease), background .35s;
}
.contact-info li:hover .ci-ic { transform: rotate(-6deg) scale(1.05); background: linear-gradient(140deg, rgba(194,160,106,.25), rgba(194,160,106,.08)); }
.contact-info b { display: block; font-size: 12.5px; color: var(--txt-3); font-weight: 400; letter-spacing: .04em; }
.contact-info strong { display: block; font-size: 16px; font-weight: 500; margin-top: 4px; word-break: break-word; }
.contact-info a:hover { color: var(--gold-d); }
.contact-info .complaint { border-color: rgba(220, 80, 80, .12); }
.contact-info .complaint .ci-ic { background: rgba(220, 80, 80, .1); color: #c85050; }
.contact-info.full-row { grid-template-columns: 1fr; }

.form-card { background: #fff; border-radius: var(--r-l); padding: 44px; box-shadow: 0 30px 80px rgba(16, 16, 20, .07); border: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; color: var(--txt-2); margin-bottom: 8px; letter-spacing: .04em; }
.field input, .field textarea, .field select {
    width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-s);
    font-family: inherit; font-size: 15px; background: var(--cream); color: var(--txt);
    transition: border-color .3s, background .3s, box-shadow .3s;
}
.field textarea { min-height: 124px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(194, 160, 106, .12);
}
.form-tip { font-size: 13px; color: var(--txt-3); margin-top: 12px; }
.form-tip.err { color: #c85050; } .form-tip.ok { color: #2e9e63; }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%; display: flex; align-items: center; gap: 18px; padding: 26px 4px;
    text-align: left; font-size: 17px; font-weight: 500; transition: color .3s;
}
.faq-q:hover { color: var(--gold-d); }
.faq-q .qn { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(194, 160, 106, .14); color: var(--gold-d); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; }
.faq-q .plus { margin-left: auto; flex: none; position: relative; width: 18px; height: 18px; }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: var(--txt-2); transition: transform .4s var(--ease), background .3s; border-radius: 1px; }
.faq-q .plus::before { left: 0; top: 8.5px; width: 18px; height: 1.5px; }
.faq-q .plus::after { left: 8.25px; top: 0; width: 1.5px; height: 18px; }
.faq-item.on .faq-q .plus::after { transform: rotate(90deg); }
.faq-item.on .faq-q .plus::before { background: var(--gold); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.faq-a > div { padding: 0 4px 28px 50px; color: var(--txt-2); white-space: pre-line; font-size: 15px; line-height: 1.85; }

/* ============ 内页头图 ============ */
/* 底色本身就走品牌金渐变，即使图片加载失败 / 未配置也不会出现"纯黑平面" */
/* 内页头图整体从吸顶导航下方开始，中间留 14px 页面底色间隔：
   头图不再顶到导航下缘（导航在内页常驻实底，见 site.js 的 is-inner 处理） */
.page-hero {
    position: relative; margin-top: calc(var(--head-h-s) + 14px); padding: 76px 0 100px; color: #fff; overflow: hidden;
    background:
        radial-gradient(120% 100% at 6% -14%, rgba(194,160,106,.26), transparent 62%),
        radial-gradient(100% 86% at 100% 4%, rgba(126,158,225,.14), transparent 64%),
        linear-gradient(158deg, #191712 0%, #14141a 46%, #0e0e13 100%);
}
/* 图片透出度：原来 .32 太暗，整块像纯黑；提到 .64 让画面能看清 */
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .64; }
/* 遮罩：大幅调浅 + 叠加品牌金/冷蓝径向渐变，保证"有图也看得到渐变"。
   左侧加一道方向性压暗，只为托住标题文字，右侧保持明亮让渐变透出来。 */
.page-hero::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(96deg, rgba(8,8,10,.68) 0%, rgba(8,8,10,.46) 34%, rgba(8,8,10,.14) 66%, rgba(8,8,10,0) 88%),
        radial-gradient(1120px 540px at 12% -10%, rgba(224,199,149,.30), transparent 64%),
        radial-gradient(900px 460px at 88% 6%, rgba(126,158,225,.15), transparent 66%),
        linear-gradient(112deg, transparent 30%, rgba(224,199,149,.09) 47%, transparent 62%),
        linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.28) 58%, rgba(10,10,12,.56) 100%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 600; margin: 18px 0 14px; letter-spacing: -.015em; }
.page-hero p { color: rgba(255, 255, 255, .66); max-width: 660px; font-size: 16px; }
.crumb { font-size: 13px; color: rgba(255, 255, 255, .5); display: flex; gap: 8px; align-items: center; letter-spacing: .04em; }
.crumb a:hover { color: var(--gold-l); }

/* ============ 详情 ============ */
.article { max-width: 880px; margin-inline: auto; }
.article-h h1 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; line-height: 1.3; margin: 18px 0 22px; letter-spacing: -.012em; }
.article-meta { display: flex; gap: 22px; font-size: 13px; color: var(--txt-3); padding-bottom: 22px; border-bottom: 1px solid var(--line); letter-spacing: .04em; }
.article-cover { border-radius: var(--r-m); overflow: hidden; margin: 32px 0; background: var(--cream-2); }

/* ---------- 详情页图片：容器内自适应缩放（2026-09-24） ----------
   后台传图的原始长宽比完全不可控：竖版海报、手机长截图、超宽长图都可能出现。
   光有全局 img{max-width:100%} 只挡得住「变宽」，挡不住「变高」——
   一张 1080×1920 的封面在 880px 正文栏里会被算成 1565px 高，等于把正文推走一整屏。
   下面四条一起用才既不出容器、又不变形：
   ① width:auto + max-width:100%  → 横向图照常铺满阅读宽度，小图不被放大糊掉；
   ② max-height                    → 给纵向尺寸封顶；超出时浏览器按固有比例等比缩小
                                     （CSS 2.1 §10.4 的 replaced element 规则），比例不变；
   ③ height:auto !important        → 富文本里从别处粘贴进来的 <img height="800"> /
                                     内联 style 高度，会被 ② 压成「宽 880 × 高 520」的变形图，
                                     必须让高度回到 auto（内联样式优先级高于外部表，故用 !important）；
   ④ margin-inline:auto            → 被限高后变窄的竖图居中，两侧不偏。
   66vh 这个系数是按「880px 正文栏里一张 16:9 封面要 495px 高」反推的：常见 768px 高的笔记本上
   66vh = 507px > 495px，最常见的 16:9 / 3:2 横封面照旧铺满，只有真·竖图 / 长截图才被限住。
   注：圆角与裁切仍由外层 .article-cover 的 overflow:hidden 负责，img 只负责缩放。 */
.article-cover img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(66vh, 620px);
    margin: 0 auto;
}

.article-body { font-size: 16.5px; color: #33333c; line-height: 2; }
.article-body p { margin-bottom: 20px; }
/* 正文配图：与封面同一套逻辑，上限略高于封面（正文图是阅读主体，不该被压得太矮）。
   16:9 / 3:2 的横图在 880px 栏内高 495 / 587px，均在上限内 → 照常铺满，观感不变。 */
.article-body img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(70vh, 660px);
    margin: 20px auto;
    border-radius: var(--r-s);
}
/* 正文里的嵌视频 / 嵌入页同属内容区，一并限宽防止顶破容器。
   ⛔ 这里不对 iframe 写 height:auto —— iframe 没有固有比例，高度一 auto 就塌成 150px。 */
.article-body video { max-width: 100%; height: auto; margin: 20px auto; border-radius: var(--r-s); }
.article-body iframe { max-width: 100%; margin: 20px auto; border: 0; border-radius: var(--r-s); }

/* ============ 公告明细（独立版式） ============
   与企业动态/客户案例共用同一路由，但公告无封面图、以正文阅读为主，
   故采用居中标题 + 金色分隔的更克制版式，与示例公告页结构保持一致。 */
.article-notice { max-width: 760px; }
.article-notice .article-h { text-align: center; }
.article-notice .notice-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 18px;
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--gold-d);
    background: linear-gradient(180deg, #fff, var(--cream-2));
    border: 1px solid var(--line-2);
    border-radius: 999px;
}
.article-notice .article-h h1 { margin: 8px 0 18px; }
.article-notice .article-meta {
    justify-content: center;
    gap: 18px;
    border-bottom: 0;
    padding-bottom: 0;
}
.article-notice .notice-rule {
    width: 56px;
    height: 3px;
    margin: 26px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold-l), var(--gold-d));
}
.article-notice .article-body { margin-top: 28px; }

@media (max-width: 768px) {
    .article-notice .article-meta { flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
    .article-notice .notice-badge { margin-bottom: 14px; padding: 6px 15px; font-size: 12px; letter-spacing: .16em; }
    .article-notice .notice-rule { margin-top: 20px; width: 48px; }
    .article-notice .article-body { margin-top: 22px; font-size: 16px; }
}

/* ============ 底部 ============ */
.site-foot { background: var(--ink); color: rgba(255, 255, 255, .62); padding: 88px 0 0; position: relative; }
.site-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,199,149,.4), transparent); }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 48px; padding-bottom: 60px; }
.foot-brand-row { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.foot-brand-row img { height: 44px; width: auto; max-width: 200px; object-fit: contain; }
.foot-brand h3 { color: #fff; font-size: 19px; font-weight: 500; letter-spacing: -.005em; }
.foot-brand .slogan { margin-top: 4px; font-size: 13px; color: var(--gold-l); letter-spacing: .04em; }
.foot-brand .qr { margin-top: 22px; display: inline-flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-m); }
.foot-brand .qr img { width: 78px; height: 78px; object-fit: cover; border-radius: 8px; margin: 0; }
.foot-brand .qr span { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.7); }

/* ---------- 二维码：鼠标移上去 → 弹出放大（页脚 / 联系页共用） ----------
   ① 用 transform:scale 放大而**不改宽高**：transform 不参与布局，
      所以卡片、右侧文字、页脚其它列都不会因悬停而跳动。
   ② transform-origin 取 left center：原图矩形**完全落在**放大矩形之内，
      鼠标不会在「进入→放大→越界→缩回」之间来回抖动（这是这类放大的经典坑）；
      同时放大方向是向右上，不会向左溢出屏幕。
   ③ 放大倍数受**原图分辨率**约束：`upload/wechat.jpg` 是 430×430，
      高分屏（DPR=2）下最多只能铺 215 CSS px 而不发虚 →
      页脚基准 78px 取 2.5（≈195px）、联系页基准 96px 取 2.1（≈202px），
      两处显示尺寸基本一致，且在 DPR=2 下都仍在原图像素以内。
   ④ 放大时补一圈白 + 金边：白圈给二维码补足「扫码静区」，金边呼应站点主色。 */
.qr img {
    --qr-zoom: 2.5;                 /* 页脚：78 × 2.5 ≈ 195px */
    cursor: zoom-in;
    transform-origin: left center;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* 联系页基准图更大（96px），倍数相应收小，避免超出原图分辨率 */
.contact-grid .qr img { --qr-zoom: 2.1; }

/* 触屏设备没有 hover：整体不启用，避免误触后「卡」在放大态 */
@media (hover: hover) and (pointer: fine) {
    .qr:hover img {
        position: relative;
        z-index: 60;
        transform: scale(var(--qr-zoom));
        /* 进入时带一点过冲 → 像「弹」出来；收回走上面那条平滑过渡 */
        transition: transform .42s cubic-bezier(.34, 1.46, .5, 1),
                    box-shadow .42s var(--ease), border-color .3s var(--ease);
    }

    /* 深色页脚：重投影把二维码从墨底上「抬」起来 */
    .foot-brand .qr:hover img {
        box-shadow: 0 22px 56px rgba(0, 0, 0, .68),
                    0 0 0 1px rgba(224, 199, 149, .45),
                    0 0 0 9px rgba(255, 255, 255, .96);
    }
    .foot-brand .qr:hover { border-color: rgba(194, 160, 106, .34); background: rgba(255, 255, 255, .07); }
    .foot-brand .qr:hover span { color: rgba(255, 255, 255, .88); }

    /* 浅色联系页：柔和投影 + 金边（原图自带 1px 灰边，悬停换成金色） */
    .contact-grid .qr:hover img {
        border-color: rgba(194, 160, 106, .5);
        box-shadow: 0 26px 64px rgba(16, 16, 20, .22),
                    0 0 0 10px #fff;
    }
    .contact-grid .qr:hover b { color: var(--gold-d); }
}

/* 「减少动效」：功能保留（仍然放大到可扫），但不做过冲与渐变 */
@media (prefers-reduced-motion: reduce) {
    .qr img { transition: none; }
    .qr:hover img { transition: none; }
}
.foot-col h4 { color: #fff; font-size: 15.5px; font-weight: 500; margin-bottom: 22px; letter-spacing: -.005em; }
.foot-col a, .foot-col p { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 14px; transition: color .3s; line-height: 1.65; }
.foot-col a:hover { color: var(--gold-l); }
.foot-col .ic { margin-top: 5px; color: var(--gold); flex: none; }
.foot-bot {
    border-top: 1px solid var(--line-l); padding: 26px 0 32px; display: flex; flex-wrap: wrap; gap: 14px;
    justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, .42); letter-spacing: .04em;
}
.foot-icp { display: flex; gap: 18px; }
.foot-icp a:hover { color: var(--gold-l); }
/* 友情链接（后台 站点配置 → 合作与友链 的 JSON，非空时才出现） */
.foot-links {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
    padding: 24px 0 26px; border-top: 1px solid var(--line-l);
}
.foot-links .fl-title { color: #fff; font-size: 13.5px; letter-spacing: .08em; flex: none; }
.foot-links a { color: rgba(255, 255, 255, .62); font-size: 13.5px; transition: color .3s; }
.foot-links a:hover { color: var(--gold-l); }

.to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 48px; height: 48px; border-radius: 50%;
    background: var(--ink); color: var(--gold-l); display: grid; place-items: center; font-size: 18px;
    opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .5s var(--ease);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .28); border: 1px solid rgba(224,199,149,.18);
}
.to-top .ic { transform: rotate(-90deg); transition: transform .35s var(--ease); }
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: #241d10; border-color: var(--gold); }
.to-top:hover .ic { transform: rotate(-90deg) translateX(2px); }

/* ============ 响应式：Pad ============ */
@media (max-width: 1180px) {
    /* .biz-grid 列数由 auto-fill 自动推导，此处不再写死 */
    .org-tier { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
    .foot-top { grid-template-columns: 1fr 1fr; gap: 36px; }
    .pcard { grid-template-columns: 1fr; gap: 36px; padding: 40px; }
    .pmap { max-width: 640px; margin-inline: auto; width: 100%; }
}

@media (max-width: 1024px) {
    :root { --head-h: 68px; --head-h-s: 60px; }
    .nav, .head-cta .btn { display: none; }
    .burger { display: block; }
    .head-cta { margin-left: 0; }
    .head-cta .tel { display: none; }
    .wrap, .head-inner { width: min(1320px, 100% - 40px); }

    .sec { padding: 88px 0; }
    .about-grid { grid-template-columns: 1fr; gap: 56px; }
    .about-badge { left: 4px; bottom: 8px; }
    /* 理念区（深色底）的数据徽章：窄屏改贴配图内侧左下角并收一档尺寸，
       避免徽章压掉本就不宽的配图；首页（浅色区）徽章保持上面那条原样不受影响。 */
    .sec-dark .about-badge { left: 10px; bottom: 10px; padding: 16px 18px; }
    .sec-dark .about-badge b { font-size: 24px; }
    .sec-dark .about-badge span { font-size: 12px; margin-top: 4px; }
    .cap-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .case-grid { grid-template-columns: repeat(2, 1fr); }
    .branch-grid { grid-template-columns: repeat(2, 1fr); }
    /* 便当网格需要 3 列才有意义，平板起改为 2 列等宽排（4 条 → 2×2；3 条见下面的浮动断点） */
    .news-cards { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 44px; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .org-tier { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
    .culture-grid { grid-template-columns: 1fr 1fr; }
    /* 发展历程：平板收窄年份列，主线随之贴紧 */
    .hx-block { grid-template-columns: 100px 1fr; gap: 26px; }
    .hx-year { font-size: 40px; }
    .hx-main { --thread: 24px; }
    .hx-node::before { top: 14px; }                 /* 年号 40px → 光学中心约 20px，圆环随之 */
    .hx-feat { grid-template-columns: .8fr 1fr; }
    .hx-feat-txt { padding: 26px 26px; }
    .hx-feat-txt h3 { font-size: 20px; }
    .hx-row.has-pic { grid-template-columns: 1fr 146px; }
    .hero-dots { right: 24px; }
    .article { max-width: 100%; }
    .mega-inner { grid-template-columns: 1fr; }
    .mega-side { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 18px; }
}

/* 首页新闻卡片：3 条 + 2 列网格（421~1024px）必然空一格，
   让末张横跨整行收口；同时把它的封面压成宽图带 —— 否则整幅 16:9 会把这张通栏卡撑到 700px 高。 */
@media (min-width: 421px) and (max-width: 1024px) {
    .news-cards.is-trio .news-card:last-child { grid-column: 1 / -1; }
    .news-cards.is-trio .news-card:last-child .nc-body { max-width: min(100%, 620px); }
    .news-cards.is-trio .news-card:last-child .nc-pic { flex: 0 0 auto; aspect-ratio: auto; height: clamp(150px, 22vw, 230px); }
}

/* ============ 响应式：手机 ============ */
@media (max-width: 768px) {
    body { font-size: 14.6px; }
    .wrap, .head-inner { width: calc(100% - 32px); }

    .sec { padding: 64px 0; }
    /* 图片面板比普通区块再收一档：窄屏上面板高 ≈ 2 屏内容会显得很空 */
    .sec.sec-media { padding: 52px 0; }
    .sec-media .sec-t { margin-bottom: 30px; }
    .sec-t { margin-bottom: 40px; }
    .sec-h { font-size: 26px; }
    .sec-p { font-size: 14.6px; }

    .hero { min-height: 92svh; }
    .hero-inner { padding: 110px 0 80px; }
    .hero-h { font-size: 32px; }
    .hero-sub { font-size: 14.6px; margin-top: 18px; }
    .hero-btns { margin-top: 32px; gap: 10px; }
    .hero-btns .btn { flex: 1; justify-content: center; padding: 13px 18px; min-width: 140px; }
    .hero-stats { margin-top: 44px; gap: 28px 32px; }
    .hero-stats li { min-width: 78px; }
    .hero-dots { right: 16px; gap: 10px; }
    .hero-dots button { width: 22px; }
    .hero-dots button.on { width: 34px; }
    .hero-scroll { display: none; }

    .cap-grid, .case-grid, .branch-grid, .stat-row { grid-template-columns: 1fr 1fr; gap: 14px; }
    .biz-grid { gap: 14px; }
    .org-wrap { gap: 10px; }
    .org-tier { grid-template-columns: 1fr; gap: 10px; padding-left: 0; }
    .org-tier-sub { border-left: 2px solid rgba(194, 160, 106, .18); padding-left: 14px; margin-left: 10px; border-radius: 0 2px 2px 0; }
    .org-tier-1 { justify-content: center; }
    .org-tier-1 .org-card { padding: 11px 28px; }
    .org-tier-1 .org-card b { font-size: 15.5px; }
    .org-card { padding: 14px 16px 14px 16px; }
    .org-card::before { left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }
    .org-up { display: none; }
    .org-more { margin-top: 10px; padding: 6px 9px; font-size: 11.5px; }
    .org-more-cue { display: none; }
    .org-branch-in { padding-left: 15px; gap: 6px; }
    .org-sub-name { height: 26px; padding: 0 10px; font-size: 12px; }
    .org-sub em { display: none; }
    .culture-grid { grid-template-columns: 1fr; }
    .culture-card { padding: 28px 24px; }
    /* 发展历程：手机 / 小平板改单列 —— 年份从左侧粘性列变成区块内的横向标题，
       光丝与节点圆环（依赖左侧留白）整体撤掉，避免在窄屏上占掉 30px 正文宽度。 */
    .hx { margin-top: 32px; }
    .hx-rail { top: var(--head-h-s, 64px); margin-bottom: 22px; padding: 10px 0 12px; }
    .hx-rail-in { gap: 2px; padding: 4px; }
    .hx-yr { padding: 7px 13px; font-size: 13px; }
    .hx-block { grid-template-columns: 1fr; gap: 14px; padding-bottom: 40px; scroll-margin-top: calc(var(--head-h-s, 64px) + 70px); }
    .hx-side { position: static; display: flex; align-items: baseline; gap: 12px; }
    .hx-year { font-size: 34px; }
    .hx-count { margin-top: 0; }
    .hx-main { --thread: 0px; padding-left: 0; }
    .hx-main::before { display: none; }
    .hx-node::before { display: none; }
    .hx-feat { grid-template-columns: 1fr; }
    .hx-feat-pic { aspect-ratio: 16 / 9; }
    .hx-feat.is-plain .hx-feat-txt { padding: 20px 20px 22px; }
    .hx-feat-txt { padding: 22px 20px 24px; }
    .hx-feat-txt h3 { font-size: 18.5px; margin-top: 10px; }
    .hx-feat-txt p { font-size: 14px; line-height: 1.78; }
    .hx-list { margin-top: 14px; }
    .hx-row.has-pic { grid-template-columns: 1fr 104px; gap: 14px; }
    .hx-row-pic { aspect-ratio: 1 / 1; }
    .hx-more { margin-top: 6px; }
    .hx-more-btn { padding: 12px 26px; font-size: 14px; }
    .about-idea { padding: 36px 26px; }
    .biz { padding: 26px 20px 22px; }
    .biz-ic { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; }
    .biz-ic svg { width: 22px; height: 22px; }
    .biz h4 { font-size: 16.5px; }
    .biz p { font-size: 13.4px; }
    .biz-go { font-size: 12.5px; padding-top: 14px; }
    /* 服务页移动端优化 */
    .about-grid { gap: 28px !important; }
    .about-img { border-radius: var(--r-m); }
    .about-img img { aspect-ratio: 4 / 3; }
    .cap { padding: 26px 22px; }
    .cap h4 { font-size: 17px; }
    .cap p { font-size: 13.4px; }
    .cap-n { font-size: 44px; }
    .case-mask { padding: 18px; }
    .case-mask h4 { font-size: 15px; }
    .case-mask p { display: none; }
    .case-tag { left: 14px; top: 14px; font-size: 11px; padding: 3px 10px; }
    .branch { min-height: 240px; padding: 22px; }
    .branch h4 { font-size: 17px; }
    .branch p { font-size: 12.8px; }
    .stat { padding: 24px 10px; }
    .stat b { font-size: 30px; }

    .news { grid-template-columns: 86px 1fr; gap: 14px; padding: 20px 0; }
    .news-date b { font-size: 20px; }
    .news-date span { font-size: 11.5px; }
    .news h4 { font-size: 16px; }
    .news p { font-size: 13px; -webkit-line-clamp: 2; }
    .news-pic { display: none; }
    .news-go { display: none; }
    .news:hover { padding-left: 0; padding-right: 0; }
    .news-filter { padding-bottom: 16px; margin-bottom: 22px; }
    .news-search .ns-q input { width: 120px; }

    /* 首页新闻卡片 */
    .news-cards { gap: 14px; }
    .news-card { padding: 22px 20px 18px; border-radius: var(--r-s); }
    .news-card:hover { transform: translateY(-4px); }
    .nc-t { font-size: 16px; }
    .nc-s { font-size: 13px; }
    .nc-link { margin-top: 11px; }
    .nc-pic { margin-top: 14px; }
    .news-head .sec-h::after { margin-top: 16px; }
    .news-more { margin-top: 30px; }

    .pcard { padding: 26px 20px; gap: 30px; }
    .pstats { gap: 32px; margin-top: 24px; }
    .pstat b { font-size: 36px; }
    .plink { margin-top: 26px; }
    /* 弹层转底部抽屉 */
    .ppop { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; transform: translateY(14px); }
    .ppop.is-open { transform: none; }
    .ppop-list { max-height: 42vh; }
    /* 锚点标签：窄屏下锚点间距被压缩，标签收紧一档，给自动避让留出余量 */
    .panchor-label { font-size: 11px; padding: 3px 6px; }
    .pwall { gap: 12px 10px; margin-top: 20px; }
    .pwall.is-marquee .pwall-row { gap: 10px; }
    .pwall.is-marquee .pwall-row + .pwall-row { margin-top: 14px; }
    .pwall-item { width: 104px; gap: 6px; }
    .pwall-logo { height: 40px; border-radius: 9px; padding: 6px 9px; }
    .pwall-logo img { height: 26px; }                     /* 40 − 上下 padding 12 */
    .pwall-logo::after { left: 9px; right: 9px; top: 6px; bottom: 6px; }   /* 与卡内 padding 对齐 */
    .pwall-name { font-size: 11px; }

    .contact-info { grid-template-columns: 1fr; gap: 12px; }
    .contact-info li { padding: 16px; }
    .form-card { padding: 26px 22px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .faq-q { font-size: 15.4px; padding: 18px 2px; gap: 12px; }
    .faq-a > div { padding-left: 0; font-size: 14.4px; }

    .page-hero { padding: 56px 0 64px; }
    .page-hero h1 { font-size: 27px; }

    .site-foot { padding-top: 52px; }
    .foot-top {
        display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-bottom: 32px;
    }
    .foot-brand {
        grid-column: 1 / -1;
        display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
    }
    .foot-brand-row { margin-bottom: 8px; gap: 10px; }
    .foot-brand-row img { height: 28px; max-width: 140px; }
    .foot-brand h3 { font-size: 15px; }
    .foot-brand .slogan { font-size: 12px; }
    .foot-brand .qr {
        margin-top: 0; padding: 7px 9px 7px 7px; gap: 6px;
        background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
        flex-direction: column; align-items: center; text-align: center;
    }
    /* 窄屏里 .qr 被挤到品牌区右侧（grid 的 auto 列），若仍以左边缘为原点向右放大，
       120px 左右的宽度会顶出视口、被 body{overflow-x:hidden} 悄悄裁掉 →
       改为以**右边缘**为原点向左上弹出，方向与桌面端相反但结果同样不出屏。 */
    .foot-brand .qr img { width: 46px; height: 46px; border-radius: 5px; transform-origin: right center; }
    .foot-brand .qr span { font-size: 10.5px; line-height: 1.35; max-width: 56px; }
    .foot-col h4 { font-size: 13.5px; margin-bottom: 10px; }
    .foot-col a, .foot-col p { padding: 4px 0; font-size: 12.5px; line-height: 1.5; }
    .foot-contact { grid-column: 1 / -1; }
    .foot-contact p { display: inline-flex; margin-right: 14px; }
    .foot-contact p:first-child { display: flex; width: 100%; }
    .foot-bot { flex-direction: column; gap: 5px; font-size: 11.5px; padding: 14px 0 20px; }
    .foot-icp { flex-wrap: wrap; gap: 8px; }
    .foot-links { gap: 6px 14px; padding: 16px 0 18px; }
    .foot-links .fl-title, .foot-links a { font-size: 12px; }

    .stat { padding: 36px 14px; }
    .stat b { font-size: clamp(36px, 10vw, 56px); }
    .stat span { font-size: 14px; }

    /* 详情页图片：窄屏把高度上限再收一档。
       手机竖屏可视高约 700~800px，桌面端的 620px 上限会占掉近一整屏；且此时 vh 单位
       本身就跟着浏览器地址栏收缩变化，用 min(vh, 固定值) 双保险，横竖屏切换都不会跳。 */
    .article-cover { margin: 24px 0; }
    .article-cover img { max-height: min(52vh, 340px); }
    .article-body img { max-height: min(62vh, 440px); margin: 16px auto; }
    .article-body video, .article-body iframe { margin: 16px auto; }

    .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

@media (max-width: 420px) {
    /* 地图锚点：最窄档锚点最挤（实测 390 宽时 5 个锚点挤在 316×229 里），
       标签再收一档 + 缩短间距 —— 标签越小、间距越短，越容易排开互不遮挡。 */
    .pmap { --pl-gap: 17px; }
    .panchor-label { font-size: 10px; padding: 2px 6px; }
    .cap-grid, .biz-grid, .case-grid, .branch-grid, .stat-row { grid-template-columns: 1fr; }
    .news-cards { grid-template-columns: 1fr; }
    .hero-stats { gap: 22px 26px; }
    /* 发展历程：小屏再收一档，年份导轨胶囊变紧凑以免横向滑动距离过长 */
    .hx-rail { padding: 8px 0 10px; margin-bottom: 18px; }
    .hx-year { font-size: 30px; }
    .hx-rail-in { gap: 2px; padding: 3px; }
    .hx-yr { padding: 6px 11px; font-size: 12.5px; }
    .hx-feat-txt { padding: 20px 18px 22px; }
    .hx-feat.is-plain .hx-feat-txt { padding: 18px 16px 20px; }
    .hx-feat-txt h3 { font-size: 17px; }
    .hx-row { padding: 18px 2px; }
    .hx-row.has-pic { grid-template-columns: 1fr 84px; gap: 12px; }
    .hx-row-h h4 { font-size: 15px; }
    .hx-more-btn { padding: 11px 22px; font-size: 13.5px; }
    /* 资讯筛选：小屏把分类与检索控件收紧 —— 四个分类标签仍在一行内，检索行按需换行。
       ⛔ 分类标签与两个按钮的「字号 + 上下 padding」必须同步改，否则外框高度会差 3px
          （桌面 37/37/37 → 小屏若有偏差，并排时肉眼就能看出不齐）。 */
    .news-tabs { gap: 7px; }
    .ntab { padding: 8px 12px; font-size: 13px; letter-spacing: .02em; }
    .news-search { gap: 8px; }
    .news-search .ns-q { flex: 1 1 150px; }
    .news-search .ns-q input { width: 100%; }
    .news-search .ns-btn { padding: 8px 18px; font-size: 13px; }
}

/* 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .rv { opacity: 1; transform: none; }
    .hero-h .ln > span { transform: none; }
}

/* 留言表单提交中：按钮加载态（禁用 + 半透明 + 禁用指针），配合内联「正在提交…」提示 */
.btn.is-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }