/* ============================================================
   v6 — 编辑式奢华 · 反 AI 模板
   字体破局：中文衬线大标题(Noto Serif SC) + 无衬线正文
   配色：暖白纸张 + 近黑墨 + 红签名；蓝仅作平台点缀
   ============================================================ */

:root {
  --paper: #FAF9F6;
  --paper-2: #F1EFE9;
  --ink: #12161D;
  --ink-soft: #1B212B;
  --muted: #5C6672;
  --line: #E4E1D9;
  --line-strong: #D6D2C8;
  --blue: #1f6feb;
  --blue-900: #0b2a6b;
  --red: #EE3A3A;
  --red-dark: #cf2a2a;
  --cream: #F3EFE6;
  --night-1: #1D4173;
  --night-2: #112338;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 4px rgba(18,22,29,.04), 0 10px 28px rgba(18,22,29,.06);
  --shadow-md: 0 18px 50px rgba(18,22,29,.12);
  --shadow-lg: 0 40px 90px rgba(4,6,12,.45);
  --shadow-red: 0 16px 38px rgba(238,58,58,.32);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 120px;
  /* 下限不能低于吸顶导航的高度（桌面上限 110px / 窄屏 96px）：
     锚点跳到板块时是把板块顶对齐到视口顶，靠这段上内边距把标题顶到导航下面。
     原来下限 84px，窄屏下标题会被导航压掉几像素。 */
  --section-y: clamp(120px, 11vw, 160px);
  --container: 1280px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --font-serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --font-display: "Sora", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* 本站内容（页头页脚、新闻、案例、封面图）都是取到 JSON 之后才填进 DOM 的。
   浏览器的「滚动锚定」会在内容撑开时按它早期算出的锚点强行修正滚动位置，并且会
   盖掉 JS 设的位置，实测文章页刷新后会偏 476px。位置恢复已统一交给 common.js，
   这里直接关掉锚定，避免两方互相抢。 */
html, body { overflow-anchor: none; }
body {
  font-family: var(--font-body); color: var(--ink); background: var(--paper);
  line-height: 1.75; font-size: 17px; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; }
::selection { background: var(--red); color: #fff; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* —— 基元 —— */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--red); font-weight: 700; letter-spacing: .22em;
  font-size: 13px; text-transform: uppercase; font-family: var(--font-display);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); flex: 0 0 auto; }
.sec-title { font-family: var(--font-serif); font-weight: 800; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); margin-top: 16px; }
.sec-lead { color: var(--muted); margin-top: 18px; font-size: clamp(17px, 1.5vw, 19px); max-width: 58ch; line-height: 1.85; }
.section { padding: var(--section-y) 0; position: relative; }
.section-alt { background: var(--paper-2); }
.section-head { max-width: 780px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-index { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 9vw, 7rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); letter-spacing: -.03em; user-select: none; }

/* —— 按钮 —— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 34px; border-radius: 999px; font-weight: 600; cursor: pointer; border: none; font-size: 17px; line-height: 1; white-space: nowrap; transition: background .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo), transform .25s var(--ease-out-expo), color .2s, border-color .2s; }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 22px 46px rgba(238,58,58,.4); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 12px 28px rgba(31,111,235,.28); }
.btn-blue:hover { background: var(--blue-900); transform: translateY(-2px); }
.btn-line { background: #fff; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-line:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.btn-ghost-light { background: rgba(255,255,255,.10); color: #fff; border: 1.5px solid rgba(255,255,255,.32); }
.btn-ghost-light:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }

/* ============================================================
   HEADER
   ============================================================ */
.header { position: sticky; top: 0; z-index: 50; background: rgba(250,249,246,.82); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
.header .container { display: flex; align-items: center; justify-content: space-between; height: 110px; gap: clamp(20px, 2vw, 42px); flex-wrap: nowrap; }
.logo { display: flex; align-items: center; gap: 16px; font-weight: 800; font-size: clamp(24px, 2.3vw, 33px); color: var(--ink); letter-spacing: -.012em; font-family: var(--font-display); flex: 0 0 auto; }
.logo .mark { width: 64px; height: 64px; border-radius: 18px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 800; font-family: var(--font-serif); box-shadow: 0 10px 24px rgba(238,58,58,.24); letter-spacing: 0; flex: 0 0 auto; }
.logo .slogan { font-size: 15px; color: var(--muted); font-weight: 500; margin-left: 7px; letter-spacing: .02em; font-family: var(--font-body); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(18px, 1.7vw, 34px); flex-wrap: nowrap; }
.nav a { font-size: clamp(16.5px, 1.5vw, 18.5px); color: #3b4453; font-weight: 500; cursor: pointer; position: relative; padding: 12px 0; letter-spacing: .012em; white-space: nowrap; transition: color .2s var(--ease-out-expo); }
.nav a:hover { color: var(--red); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 6px; width: 0; height: 2px; background: var(--red); transition: width .32s var(--ease-out-expo); }
.nav a:hover::after { width: 100%; }
.header-cta { display: flex; align-items: center; padding-left: clamp(20px, 2.1vw, 36px); border-left: 1px solid var(--line-strong); flex: 0 0 auto; }
.header .btn { padding: 15px 20px 15px 24px; font-size: 17px; font-weight: 600; border-radius: 9px; background: var(--ink); color: #fff; letter-spacing: .06em; gap: 14px; flex: 0 0 auto; box-shadow: none; }
.header .btn::after { content: "→"; font-family: var(--font-display); font-weight: 700; transition: transform .3s var(--ease-out-expo); }
.header .btn:hover { background: var(--red); color: #fff; transform: none; box-shadow: 0 12px 26px rgba(238,58,58,.24); }
.header .btn:hover::after { transform: translateX(4px); }
/* 顶部 CTA 改为电话号码：点一下直接拨打，所以不要那个「→」箭头，换成电话小图标 */
.header .btn-phone { gap: 10px; letter-spacing: .015em; font-variant-numeric: tabular-nums; }
.header .btn-phone::after { content: none; }
.header .btn-phone svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* 导航下拉（产品服务） */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-parent .caret { display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); opacity: .55; transition: transform .25s var(--ease-out-expo); }
.nav-drop:hover .nav-parent .caret { transform: rotate(45deg) translate(-1px, 2px); opacity: 1; }
.nav-sub { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 10px); min-width: 176px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); padding: 8px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; z-index: 5; transition: opacity .22s var(--ease-out-expo), transform .22s var(--ease-out-expo), visibility .22s; }
.nav-sub::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-drop:hover .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-sub a { font-size: 17px; font-weight: 600; color: #3d4552; padding: 12px 16px; border-radius: 10px; white-space: nowrap; text-align: left; }
.nav-sub a::after { display: none; }
.nav-sub a:hover { background: var(--paper-2); color: var(--red); }

/* ============================================================
   HERO —— 单栏全幅 · 近黑电影感
   ============================================================ */
.hero { position: relative; overflow: hidden; color: var(--cream); background: radial-gradient(920px 540px at 90% -12%, rgba(58,124,236,.30), transparent 60%), radial-gradient(780px 540px at -4% 122%, rgba(31,111,235,.22), transparent 58%), linear-gradient(160deg, var(--night-1) 0%, var(--night-2) 100%); }
/* 首屏自己没有上内边距，锚点跳到 #hero 时会被吸顶导航压住；留出导航高度即可（页首本身也很矮）。
   其余板块（#cases / #news / #contact 等）自带 84~158px 上内边距，够顶开导航，不用再加偏移。 */
#hero { scroll-margin-top: 118px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(1100px 700px at 80% 10%, #000 0%, transparent 72%); mask-image: radial-gradient(1100px 700px at 80% 10%, #000 0%, transparent 72%); }
.hero .container { position: relative; z-index: 1; max-width: 1220px; padding-top: clamp(80px, 9.5vw, 128px); padding-bottom: clamp(64px, 8vw, 104px); }
.hero-top { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(34px, 4.2vw, 68px); align-items: center; }
.hero-copy { max-width: none; min-width: 0; }
.hero .eyebrow { color: #ff9d9d; }
.hero .eyebrow::before { background: var(--red); }
.hero h1 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.08; letter-spacing: -.01em; color: var(--cream); margin-top: 24px; }
.hero h1 .hl { color: #ff7a7a; }
.hero .sub { font-size: clamp(18px, 1.9vw, 23px); color: rgba(243,239,230,.74); margin: 28px 0 40px; max-width: 620px; line-height: 1.7; }
.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero .btn { font-size: 18px; padding: 18px 40px; }
.hero .btn-line { background: transparent; color: var(--cream); border-color: rgba(243,239,230,.35); }
.hero .btn-line:hover { border-color: var(--cream); background: rgba(255,255,255,.08); }
.hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(26px, 3.6vw, 60px); margin-top: clamp(48px, 5.5vw, 70px); padding-top: 38px; border-top: 1px solid rgba(243,239,230,.16); }
.hero-stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.8vw, 4.1rem); line-height: 1; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-stat .num .u { color: #ff7a7a; }
.hero-stat .label { color: rgba(243,239,230,.66); font-size: 16px; margin-top: 10px; }

/* 右侧大 banner */
.hero-banner { min-width: 0; }
.hero-banner-inner { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); box-shadow: 0 34px 80px rgba(2,6,16,.55); }
.hb-media { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; }
.hb-media img { width: 100%; height: 100%; object-fit: cover; }
.hb-art { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.6vw, 22px); background: radial-gradient(120% 90% at 18% 8%, rgba(58,124,236,.38), transparent 62%), linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.02)); }
.hb-art::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 22px 22px; opacity: .5; -webkit-mask-image: radial-gradient(70% 70% at 80% 20%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 80% 20%, #000, transparent 75%); pointer-events: none; }
.hb-logo { position: relative; z-index: 1; width: clamp(60px, 6.4vw, 86px); height: clamp(60px, 6.4vw, 86px); border-radius: 22px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.hb-logo svg { width: 74%; height: 74%; }
.hb-caption { padding: 20px 24px 22px; background: rgba(5,11,22,.6); border-top: 1px solid rgba(255,255,255,.10); }
.hb-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #ff9090; border: 1px solid rgba(238,58,58,.55); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; font-family: var(--font-display); }
.hb-title { font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.3rem, 1.9vw, 1.7rem); color: var(--cream); line-height: 1.3; }
.hb-sub { color: rgba(243,239,230,.66); font-size: 14.5px; margin-top: 5px; letter-spacing: .04em; }

/* 整屏大图模式：图片退为整幅背景，真实网页文字压在上层（可用衬线字体，才有分量） */
.hero-full { position: relative; color: var(--ink); background: var(--paper); }
.hero-full::before { display: none; }
/* 右侧细点阵纹理：给浅底加一层科技质感（左侧渐隐，不干扰文字） */
.hero-full::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(24,54,96,.06) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 100%); mask-image: linear-gradient(90deg, transparent 42%, #000 100%); }
.hero-full .container { position: static; max-width: none; padding-top: 0; padding-bottom: 0; }
.hero-full .hero-top { display: block; grid-template-columns: 1fr; gap: 0; }
.hero-full .hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: 1240px; margin: 0 auto; min-height: clamp(440px, 40vw, 580px); padding: clamp(50px, 5vw, 80px) clamp(24px, 5vw, 56px); }
.hero-full .hero-banner { position: absolute; inset: 0; z-index: 0; max-width: none; }
.hero-full .hero-banner-inner { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.hero-full .hb-media { position: absolute; inset: 0; aspect-ratio: auto; }
.hero-full .hb-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-full .hb-caption { display: none; }
/* 左侧白色渐隐：保证文字干净，右侧主视觉清晰透出 */
.hero-full .hero-banner-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(94deg, rgba(253,253,252,.99) 0%, rgba(253,253,252,.975) 36%, rgba(253,253,252,.9) 52%, rgba(253,253,252,.66) 64%, rgba(253,253,252,.36) 74%, rgba(253,253,252,.14) 84%, rgba(253,253,252,.02) 93%, rgba(253,253,252,0) 100%); }

/* —— 浅底文字体系 —— */
.hero-full .eyebrow { color: var(--red); font-size: 14px; letter-spacing: .24em; }
.hero-full .eyebrow::before { background: var(--red); }
.hero-full h1 { color: var(--ink); font-family: var(--font-serif); font-weight: 800; font-size: clamp(2.75rem, 5.5vw, 5.5rem); line-height: 1.08; letter-spacing: -.018em; margin-top: 18px; }
.hero-full .sub { color: var(--muted); font-size: clamp(19px, 1.75vw, 23px); margin: 24px 0 34px; max-width: 44em; }
.hero-full .btn-line { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.hero-full .btn-line:hover { background: #fff; border-color: var(--ink); }
/* 数据条：编辑式单行 —— 顶部墨线 + 红色领头 + 细分隔线，去掉「裸数据行」的模板感 */
.hero-full .hero-stats { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; width: fit-content; max-width: 100%; margin-top: clamp(40px, 4.2vw, 54px); padding-top: 0; border-top: 0; position: relative; }
.hero-full .hero-stats::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.hero-full .hero-stats::after { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 3px; background: var(--red); }
.hero-full .hero-stat { display: flex; align-items: baseline; gap: 11px; padding: 24px clamp(24px, 3.2vw, 50px) 0 0; margin-right: clamp(24px, 3.2vw, 50px); border-right: 1px solid var(--line); }
.hero-full .hero-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-full .hero-stat .num { font-size: clamp(1.9rem, 2.6vw, 2.5rem); color: var(--ink); font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.hero-full .hero-stat .num .u { color: var(--red); }
.hero-full .hero-stat .label { color: var(--muted); font-size: 16px; margin-top: 0; letter-spacing: .02em; white-space: nowrap; }
.hero-full .channels { display: none; }

/* 整页背景图：图片固定铺满整站，内容区半透明 */
body.page-bg {
  background-color: var(--paper);
  background-image: linear-gradient(rgba(250,249,246,.68), rgba(250,249,246,.86)), var(--page-bg);
  background-size: cover, cover;
  background-position: center top, center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}
body.page-bg .header { background: rgba(250,249,246,.74); }
body.page-bg .hero-full { background: transparent; }
body.page-bg .section { background: transparent; }
body.page-bg .section-alt { background: rgba(255,255,255,.46); }
body.page-bg .products-divider { opacity: .8; }
body.page-bg .product-card { background: rgba(255,255,255,.94); }
body.page-bg .case-card { background: rgba(255,255,255,.94); }
body.page-bg .wechat-box { background: rgba(255,255,255,.94); }
body.page-bg .footer { background: rgba(10,23,41,.94); }

/* 三大平台横排展示带 */
.channels { display: flex; margin-top: clamp(44px, 5vw, 64px); border-top: 1px solid rgba(243,239,230,.18); }
.channel { flex: 1; display: flex; align-items: center; gap: 16px; padding: 26px 26px; border-right: 1px solid rgba(243,239,230,.12); transition: background .3s var(--ease-out-expo); }
.channel:last-child { border-right: none; }
.channel:hover { background: rgba(255,255,255,.05); }
.channel .logo-box { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.channel .logo-box svg { width: 100%; height: 100%; }
.channel .ch-name { font-family: var(--font-serif); font-weight: 700; font-size: clamp(19px, 1.8vw, 23px); color: var(--cream); }
.channel .ch-tag { font-size: 13px; color: rgba(243,239,230,.6); margin-top: 2px; }

/* 载入动效 */
.hero-copy > *, .channels, .hero-banner { animation: hero-in .9s var(--ease-out-expo) both; }
.hero-copy .eyebrow { animation-delay: .05s; }
.hero-copy h1 { animation-delay: .12s; }
.hero-copy .sub { animation-delay: .20s; }
.hero-copy .actions { animation-delay: .28s; }
.hero-copy .hero-stats { animation-delay: .36s; }
.hero-banner { animation-delay: .24s; }
.channels { animation-delay: .46s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ============================================================
   PRODUCTS —— 编辑式三栏
   ============================================================ */
.product-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(40px, 4.5vw, 64px); flex-wrap: wrap; }
.products-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); margin-bottom: clamp(8px, 2vw, 16px); }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.product-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); overflow: hidden; transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo), border-color .25s; }
.product-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out-expo); }
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.product-card:hover::before { transform: scaleX(1); }
.product-card .pc-logo { width: clamp(76px, 8vw, 96px); height: clamp(76px, 8vw, 96px); border-radius: 22px; overflow: hidden; background: #eef3fb; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.product-card .pc-logo svg { width: 100%; height: 100%; }
.product-card .pc-name { font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--ink); letter-spacing: -.01em; }
.product-card .pc-tag { color: var(--red); font-weight: 600; font-size: 15px; margin: 8px 0 16px; }
.product-card .pc-desc { color: #46505c; font-size: 15.5px; line-height: 1.85; flex: 1; }
.product-card .pc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--red); font-weight: 700; cursor: pointer; transition: gap .2s; }
.product-card .pc-link:hover { gap: 12px; }

/* ============================================================
   ADVANTAGES —— 编辑式编号列表
   ============================================================ */
.adv-split { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
.adv-intro { position: sticky; top: 100px; }
.adv-intro .section-index { margin-bottom: 8px; }
.adv-intro h2 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.22; color: var(--ink); letter-spacing: -.01em; margin-top: 12px; }
.adv-intro p { color: var(--muted); margin-top: 16px; font-size: 17px; max-width: 38ch; line-height: 1.85; }
.adv-intro .btn { margin-top: 26px; }
.adv-list { display: flex; flex-direction: column; }
.adv-item { display: flex; align-items: flex-start; gap: 22px; padding: 24px 4px; border-top: 1px solid var(--line); transition: padding .28s var(--ease-out-expo); }
.adv-item:last-child { border-bottom: 1px solid var(--line); }
.adv-item:hover { padding-left: 14px; }
.adv-item .adv-no { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--red); flex: 0 0 auto; width: 48px; }
.adv-item .adv-body .icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.adv-item .adv-body .icon svg { width: 24px; height: 24px; }
.adv-item .adv-body .icon img { width: 26px; height: 26px; object-fit: contain; border-radius: 5px; }
.adv-item .adv-body .icon .ico-txt { font-size: 23px; line-height: 1; }
.adv-item .adv-body h4 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -.01em; }
.adv-item .adv-body p { color: var(--muted); font-size: 15.5px; line-height: 1.7; }

/* ============================================================
   NEWS
   ============================================================ */
.news-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
.news-aside .section-index { margin-bottom: 8px; }
.news-aside h2 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.22; color: var(--ink); letter-spacing: -.01em; margin-top: 12px; }
.news-aside p { color: var(--muted); margin-top: 16px; font-size: 17px; max-width: 34ch; line-height: 1.85; }
.news-aside .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--red); font-weight: 700; font-size: 16px; cursor: pointer; }
.news-aside .more::after { content: "→"; transition: transform .25s var(--ease-out-expo); }
.news-aside .more:hover::after { transform: translateX(5px); }
.news-list { display: flex; flex-direction: column; }
.news-item { display: flex; align-items: flex-start; gap: 22px; padding: 24px 6px; border-bottom: 1px solid var(--line); transition: padding .28s var(--ease-out-expo), background .25s; cursor: pointer; position: relative; }
.news-item:first-child { border-top: 1px solid var(--line); }
.news-item:hover { padding-left: 18px; background: linear-gradient(90deg, rgba(238,58,58,.05), transparent 60%); }
.news-item .date { flex: 0 0 auto; color: var(--red); font-weight: 700; font-size: 15px; font-family: var(--font-display); letter-spacing: .02em; padding-top: 3px; }
.news-item .nt-text { flex: 1 1 auto; min-width: 0; }
.news-item .title { font-family: var(--font-serif); font-size: clamp(17px, 1.7vw, 20px); color: #1f2b3d; font-weight: 600; line-height: 1.45; transition: color .2s; }
.news-item .title:hover { color: var(--red); }
.news-item .npin { display: inline-block; font-style: normal; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: #fff; background: var(--red); border-radius: 5px; padding: 1px 7px; vertical-align: middle; margin-right: 4px; }
.news-item .lead { color: var(--muted); font-size: 15px; line-height: 1.7; margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.news-item .ncat { font-size: 12.5px; font-weight: 700; color: var(--red); background: rgba(238,58,58,.09); border-radius: 6px; padding: 2px 9px; }
.news-item .ntag { font-size: 12.5px; color: var(--muted); }
.news-item .arrow { flex: 0 0 auto; align-self: center; color: var(--line-strong); font-size: 18px; transition: transform .25s var(--ease-out-expo), color .2s; }
.news-item:hover .arrow { color: var(--red); transform: translateX(5px); }
.news-item .nthumb { flex: 0 0 auto; width: 132px; height: 74px; border-radius: 10px; overflow: hidden; background: var(--line); }
.news-item .nthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease-out-expo); }
.news-item:hover .nthumb img { transform: scale(1.05); }

/* 新闻展示已改为独立页面（news.html），原弹窗样式已移除 */

/* ============================================================
   CASES
   ============================================================ */
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.case-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 36px 32px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .28s var(--ease-out-expo), box-shadow .28s var(--ease-out-expo), border-color .25s; }
.case-card::before { content: "\201C"; position: absolute; right: 22px; top: -10px; font-family: var(--font-serif); font-size: 130px; line-height: 1; color: rgba(238,58,58,.12); pointer-events: none; }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.case-card .company { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; position: relative; z-index: 1; }
.case-card .avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; box-shadow: var(--shadow-sm); }
/* 案例客户 logo：上传的图直接铺满整个圆角框，不留白边、四角由圆角裁掉（不再露角） */
.case-card .clogo { flex: 0 0 auto; height: 58px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.case-card .clogo img { height: 100%; width: auto; max-width: 230px; object-fit: cover; display: block; }
.case-card .company .cn { display: flex; align-items: center; }
.case-card .company b { font-family: var(--font-serif); font-size: 21px; color: var(--ink); font-weight: 800; }
.case-card .company span { color: var(--muted); font-size: 13px; display: block; }
.case-card .quote { color: #46505c; font-size: 16.5px; line-height: 1.9; position: relative; z-index: 1; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 2.5vw, 30px); align-items: stretch; }
.contact-info { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--blue-900), var(--blue)); color: #fff; border-radius: var(--radius-lg); padding: clamp(34px, 4vw, 48px); box-shadow: var(--shadow-md); }
.contact-info::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); pointer-events: none; }
.contact-info h3 { font-family: var(--font-serif); font-size: 28px; font-weight: 800; margin-bottom: 18px; position: relative; z-index: 1; }
.contact-info .phone-big { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; margin: 4px 0 24px; position: relative; z-index: 1; }
.contact-info .item { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.16); position: relative; z-index: 1; }
.contact-info .item:last-of-type { border-bottom: none; }
.contact-info .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; }
.contact-info .item .k { color: rgba(255,255,255,.72); font-size: 13px; }
.contact-info .item .v { font-weight: 600; font-size: 16.5px; }
.contact-info .btn-ghost-light { margin-top: 22px; width: 100%; position: relative; z-index: 1; }
.wechat-box { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(30px, 3.5vw, 42px); text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: center; }
.wechat-box h3 { font-family: var(--font-serif); font-size: 25px; color: var(--ink); margin-bottom: 8px; font-weight: 800; }
.wechat-box p { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; }
.wechat-qr { width: clamp(180px, 22vw, 220px); height: clamp(180px, 22vw, 220px); margin: 0 auto 16px; border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--paper-2); color: var(--muted); font-size: 13px; overflow: hidden; }
.wechat-qr img { width: 100%; height: 100%; object-fit: contain; }
.wechat-id { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--red); font-family: var(--font-display); letter-spacing: .02em; font-size: 17px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--night-2); color: #c7d2e3; padding: clamp(58px, 6vw, 78px) 0 34px; }
.footer .top { display: flex; flex-wrap: wrap; gap: clamp(28px, 3vw, 46px); }
.footer .top .brand { flex: 1.6 1 300px; }
.footer .top > div:not(.brand) { flex: 1 1 170px; }
.footer .brand .logo { color: #fff; margin-bottom: 20px; }
.footer .about { font-size: 17px; color: #9db0c9; max-width: 420px; line-height: 1.9; }
.footer h5 { color: #fff; font-size: 19px; margin-bottom: 18px; font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
.footer ul { list-style: none; }
.footer ul li { font-size: 17px; color: #9db0c9; padding: 9px 0; cursor: pointer; transition: color .2s; }
.footer ul li:hover { color: #fff; }
.footer ul li a { color: inherit; text-decoration: none; }
.footer ul li:hover a { color: #fff; }
.footer .bottom { border-top: 1px solid rgba(255,255,255,.10); margin-top: clamp(38px, 4vw, 52px); padding-top: 24px; text-align: center; font-size: 15px; line-height: 1.9; color: #7d90a8; }
.footer .bottom > div + div { margin-top: 8px; }

/* ============================================================
   在线咨询浮窗
   ============================================================ */
/* 悬浮咨询按钮：图标 + 「立即咨询」文字的胶囊（原来只有一个圆图标，看不出是干什么的） */
.consult-fab { position: fixed; right: 24px; bottom: 28px; z-index: 60; height: 58px; padding: 0 24px 0 20px; border-radius: 999px; background: var(--red); color: #fff; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: 0 12px 28px rgba(238,58,58,.42); border: none; transition: transform .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo); }
.consult-fab .fab-ic { font-size: 22px; line-height: 1; }
.consult-fab .fab-tx { font-family: var(--font-serif); font-size: 17.5px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.consult-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 36px rgba(238,58,58,.5); }
.consult-panel { position: fixed; right: 24px; bottom: 100px; z-index: 60; width: 290px; background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(8,18,40,.28); padding: 24px; display: none; border: 1px solid var(--line); }
.consult-panel.open { display: block; animation: panel-in .4s var(--ease-out-expo); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.consult-panel h4 { font-family: var(--font-serif); font-size: 18px; color: var(--ink); margin-bottom: 4px; font-weight: 800; }
.consult-panel p { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.consult-panel .qr { width: 210px; height: 210px; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--paper-2); color: var(--muted); font-size: 12px; overflow: hidden; }
.consult-panel .qr img { width: 100%; height: 100%; object-fit: contain; }
/* 面板里的微信号：整块可点 —— 点一下复制微信号并拉起微信 */
.consult-panel .wx-copy { display: block; width: 100%; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper-2); cursor: pointer; font: inherit; text-align: center; transition: border-color .2s, background .2s, transform .2s var(--ease-out-expo); }
.consult-panel .wx-copy:hover { border-color: var(--red); background: #fff5f5; transform: translateY(-1px); }
.consult-panel .wx-copy .wx-label { display: block; font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.consult-panel .wx-copy .wx-id { display: block; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); margin: 4px 0 3px; word-break: break-all; }
.consult-panel .wx-copy .wx-act { display: block; font-size: 12px; color: var(--red); }

/* 复制反馈提示条 */
.site-toast { position: fixed; left: 50%; bottom: 40px; z-index: 400; transform: translate(-50%, 14px); background: rgba(15,23,42,.95); color: #fff; font-size: 15px; line-height: 1.5; padding: 12px 22px; border-radius: 999px; box-shadow: 0 16px 40px rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s var(--ease-out-expo); max-width: min(88vw, 520px); text-align: center; }
.site-toast.show { opacity: 1; transform: translate(-50%, 0); }
.consult-panel .close { position: absolute; top: 12px; right: 14px; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; }

/* ============================================================
   产品详情页
   ============================================================ */
.pd-hero { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--blue-900), var(--blue)); color: #fff; padding: clamp(96px, 12vw, 156px) 0 clamp(70px, 9vw, 120px); }
.pd-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size: 28px 28px; opacity: .5; -webkit-mask-image: radial-gradient(760px 460px at 82% 18%, #000, transparent 72%); mask-image: radial-gradient(760px 460px at 82% 18%, #000, transparent 72%); }
.pd-hero .wm { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(16rem, 34vw, 30rem); line-height: .8; color: rgba(255,255,255,.07); pointer-events: none; user-select: none; z-index: 0; }
.pd-hero .container { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(24px, 3vw, 40px); }
.pd-hero .logo-box { width: clamp(84px, 9vw, 112px); height: clamp(84px, 9vw, 112px); border-radius: 26px; overflow: hidden; background: rgba(255,255,255,.92); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.pd-hero .logo-box svg { width: 100%; height: 100%; }
/* 平台官方图标（/uploads/brand-*.png 方形成品图）：填满容器并跟随圆角 */
.hb-logo img,
.channel .logo-box img,
.product-card .pc-logo img,
.pd-hero .logo-box img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.pd-hero .breadcrumb { font-size: 14.5px; color: rgba(255,255,255,.7); margin-bottom: 14px; letter-spacing: .02em; }
.pd-hero .breadcrumb a { cursor: pointer; transition: color .2s; }
.pd-hero .breadcrumb a:hover { color: #fff; }
.pd-hero .breadcrumb .sep { margin: 0 8px; opacity: .5; }
.pd-hero h1 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -.01em; line-height: 1.06; }
.pd-hero .tag { font-size: clamp(16px, 1.6vw, 20px); color: rgba(255,255,255,.88); margin-top: 12px; max-width: 46ch; }
.pd-body { padding: clamp(60px, 8vw, 100px) 0; }
.pd-body .detail { font-size: 18.5px; color: #334155; max-width: 860px; line-height: 1.95; }
.pd-body .chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0; }
.pd-body .chip { background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px; font-size: 15px; color: #475569; }
.pd-cta { margin-top: 30px; }

/* ============================================================
   滚动揭示
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1180px) {
  .logo .slogan { display: none; }
  .header .container { gap: 18px; }
  .nav { gap: clamp(12px, 1.5vw, 22px); }
  .header-cta { padding-left: 18px; }
}
@media (max-width: 980px) {
  .nav a { font-size: 16.5px; }
  .nav { gap: 14px; }
  .logo { font-size: 26px; gap: 13px; }
  .logo .mark { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
  .header .container { height: 96px; }
  .header-cta { padding-left: 0; border-left: none; }
  .header .btn { padding: 13px 17px 13px 21px; font-size: 16px; gap: 10px; }
  /* 电话号码比原来的「立即咨询」宽，平板竖屏（768 附近）会把页头挤到溢出。
     这里去掉电话图标、收紧内边距、导航间距也收一点，留出余量。 */
  .header .btn-phone { padding: 13px 18px; font-size: 15.5px; gap: 0; }
  .header .btn-phone svg { display: none; }
  .hero-top { grid-template-columns: 1fr; gap: 40px; }
  .hero-banner { max-width: 540px; }
  .products-grid { grid-template-columns: 1fr; }
  .adv-split, .news-layout { grid-template-columns: 1fr; gap: 36px; }
  .adv-intro { position: static; }
  .contact-wrap { grid-template-columns: 1fr; }
  .cases-grid, .adv-grid { grid-template-columns: 1fr 1fr; }
  .footer .top { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(2.5rem, 7.6vw, 4rem); }
  /* 窄屏：整幅图改为居中裁切，避免右侧卡片压在文字后 */
  .hero-full .hb-media img { object-position: center; }
  .hero-full .hero-banner-inner::after { background: linear-gradient(180deg, rgba(253,253,252,.95) 0%, rgba(253,253,252,.86) 55%, rgba(253,253,252,.95) 100%); }
  /* 数据条收成 2×2，数字在上、标签在下，避免换行错位与标签折行 */
  .hero-full .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; width: auto; max-width: none; }
  .hero-full .hero-stat { flex-direction: column; align-items: flex-start; gap: 5px; border-right: 0; margin-right: 0; padding: 18px 0 0 0; }
  .hero-full .hero-stat .label { white-space: normal; }
}
@media (max-width: 720px) {
  .channels { flex-direction: column; }
  .channel { border-right: none; border-bottom: 1px solid rgba(243,239,230,.12); }
  .channel:last-child { border-bottom: none; }
  .news-item { gap: 14px; }
  .news-item .nthumb { width: 96px; height: 54px; }
}
@media (max-width: 640px) {
  .nav { display: none; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .cases-grid, .adv-grid { grid-template-columns: 1fr; }
  .footer .top > div:not(.brand) { flex-basis: 100%; }
  .consult-fab { right: 16px; bottom: 18px; padding: 0 20px 0 17px; }
  .consult-panel { right: 16px; bottom: 86px; }
  /* 窄屏提示条改到顶部：面板是从右下角弹出来的，放底部会正好盖住二维码和微信号 */
  .site-toast { top: 112px; bottom: auto; transform: translate(-50%, -14px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   资讯中心 / 文章详情页（news.html）
   ============================================================ */
.art-hero { position: relative; overflow: hidden; padding: clamp(52px, 6.4vw, 92px) 0 clamp(30px, 3.4vw, 44px); border-bottom: 1px solid var(--line); background: var(--paper); }
.art-hero::before { content: ""; position: absolute; left: 0; top: 0; width: 74px; height: 3px; background: var(--red); }
.art-hero .breadcrumb { font-size: 14.5px; color: var(--muted); letter-spacing: .02em; margin-bottom: 22px; }
.art-hero .breadcrumb a { transition: color .2s; }
.art-hero .breadcrumb a:hover { color: var(--red); }
.art-hero .breadcrumb .sep { margin: 0 9px; color: var(--line-strong); }
.art-hero h1 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.95rem, 4.1vw, 3.3rem); line-height: 1.24; letter-spacing: -.015em; color: var(--ink); max-width: 940px; animation: artIn .6s var(--ease-out-expo) both; }
.art-hero .art-sub { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 52ch; line-height: 1.85; }
.art-cats { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.art-cat { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--red); background: rgba(238,58,58,.09); border-radius: 6px; padding: 5px 13px; }
.art-pin { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: #fff; background: var(--red); border-radius: 6px; padding: 5px 13px; }
.art-meta { margin-top: 20px; font-family: var(--font-display); font-size: 15px; color: var(--muted); letter-spacing: .02em; }

.art-wrap { padding: clamp(34px, 4.4vw, 62px) 0 clamp(70px, 8vw, 110px); }
.art-cover { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-md); animation: artIn .7s var(--ease-out-expo) both; }
.art-cover img { width: 100%; height: auto; display: block; }

.art-content { max-width: 840px; margin: clamp(38px, 4.6vw, 64px) auto 0; }
.art-lead { font-size: 19px; line-height: 1.9; color: #37415a; border-left: 3px solid var(--red); padding: 3px 0 3px 24px; margin: 0 0 40px; }
.art-body { font-size: 18px; line-height: 2; color: #2c3546; }
.art-body p { margin: 0 0 22px; }
.art-body h2 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.4; color: var(--ink); margin: 40px 0 18px; }
.art-body h3 { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin: 32px 0 14px; }
.art-body ul, .art-body ol { margin: 0 0 24px; padding-left: 26px; }
.art-body li { margin-bottom: 10px; }
.art-body blockquote { margin: 26px 0; padding: 18px 26px; border-left: 3px solid var(--red); background: rgba(238,58,58,.05); border-radius: 0 var(--radius) var(--radius) 0; color: #37415a; }
.art-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.art-body img { border-radius: var(--radius); margin: 14px 0; }
.art-body b, .art-body strong { font-weight: 700; color: var(--ink); }
.art-body p:last-child, .art-body ul:last-child, .art-body ol:last-child { margin-bottom: 0; }

.art-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.art-tags span { font-size: 14px; color: var(--muted); background: var(--paper-2); border-radius: 999px; padding: 7px 17px; }

.art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 38px; }
.art-nav a { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; background: #fff; transition: border-color .25s, box-shadow .3s var(--ease-out-expo), transform .3s var(--ease-out-expo); }
.art-nav a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.art-nav .k { display: block; font-family: var(--font-display); font-size: 13px; color: var(--muted); letter-spacing: .04em; margin-bottom: 9px; }
.art-nav .t { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.art-nav .next { text-align: right; }
.art-nav.solo a { grid-column: 1 / -1; }
.art-empty { text-align: center; color: var(--muted); padding: 70px 0; font-size: 17px; }

.news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.ncard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .32s var(--ease-out-expo), box-shadow .32s var(--ease-out-expo), border-color .25s; }
.ncard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.ncard .ph { aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.ncard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out-expo); }
.ncard:hover .ph img { transform: scale(1.05); }
.ncard .tx { display: flex; flex-direction: column; gap: 11px; padding: 22px 24px 26px; flex: 1; }
.ncard .cat { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--red); }
.ncard h3 { font-family: var(--font-serif); font-weight: 700; font-size: 19px; line-height: 1.48; color: var(--ink); transition: color .2s; }
.ncard:hover h3 { color: var(--red); }
.ncard .ex { font-size: 15px; line-height: 1.78; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard .mt { margin-top: auto; font-family: var(--font-display); font-size: 13.5px; color: var(--muted); }

@keyframes artIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .news-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .art-hero { padding-top: 42px; }
  .art-content { margin-top: 34px; }
  .news-cards { grid-template-columns: 1fr; }
  .art-nav { grid-template-columns: 1fr; }
  .art-nav .next { text-align: left; }
}

/* ============================================================
   内页通用页头（about.html / faq.html）
   与资讯页 .art-hero 同一套纸张底色 + 红顶线，保证内页观感统一
   ============================================================ */
.pg-hero { position: relative; overflow: hidden; padding: clamp(52px, 6.4vw, 92px) 0 clamp(30px, 3.4vw, 44px); border-bottom: 1px solid var(--line); background: var(--paper); }
.pg-hero::before { content: ""; position: absolute; left: 0; top: 0; width: 74px; height: 3px; background: var(--red); }
.pg-hero .breadcrumb { font-size: 14.5px; color: var(--muted); letter-spacing: .02em; margin-bottom: 24px; }
.pg-hero .breadcrumb a { transition: color .2s; }
.pg-hero .breadcrumb a:hover { color: var(--red); }
.pg-hero .breadcrumb .sep { margin: 0 9px; color: var(--line-strong); }
.pg-hero h1 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height: 1.2; letter-spacing: -.018em; color: var(--ink); margin-top: 14px; max-width: 940px; animation: artIn .6s var(--ease-out-expo) both; }
.pg-hero .pg-sub { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 62ch; line-height: 1.85; }

/* ============================================================
   公司简介（about.html）—— 左竖排时间轴 + 右公司基本情况
   ============================================================ */
.about-body { padding-top: clamp(56px, 6.2vw, 88px); padding-bottom: clamp(80px, 9vw, 132px); }
.about-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(304px, .92fr); gap: clamp(36px, 4.4vw, 68px); align-items: start; }
.about-main { min-width: 0; }
.about-main .sec-lead { margin-bottom: clamp(34px, 4vw, 52px); }

/* 竖排时间轴：左侧一条渐隐竖线 + 节点圆点 */
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--red) 0%, rgba(238, 58, 58, .3) 52%, var(--line-strong) 100%); }
.tl-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 22px; padding-bottom: clamp(24px, 2.8vw, 36px); }
.tl-item:last-child { padding-bottom: 0; }
.tl-node { position: relative; display: flex; justify-content: center; padding-top: 6px; }
.tl-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--red); box-shadow: 0 0 0 5px rgba(238, 58, 58, .1); }
.tl-item:first-child .tl-dot { background: var(--red); }
.tl-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px 24px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo), border-color .25s; }
.tl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.tl-year { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .06em; color: #fff; background: var(--ink); border-radius: 999px; padding: 4px 16px; }
.tl-item:first-child .tl-year { background: var(--red); }
.tl-title { font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.42; color: var(--ink); margin: 14px 0 10px; }
.tl-desc { font-size: 16.5px; line-height: 1.9; color: var(--muted); }
.tl-empty { color: var(--muted); padding: 40px 0; }

/* 右侧栏：公司基本情况 + 基本信息 + 咨询卡 */
.about-side { position: sticky; top: 132px; display: flex; flex-direction: column; gap: 22px; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 32px); box-shadow: var(--shadow-sm); }
.side-h { position: relative; font-family: var(--font-serif); font-weight: 800; font-size: 1.3rem; line-height: 1.4; color: var(--ink); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.side-h::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 46px; height: 2px; background: var(--red); }
.side-body p { font-size: 16px; line-height: 1.9; color: var(--muted); margin-bottom: 14px; }
.side-body p:last-child { margin-bottom: 0; }
.facts { display: flex; flex-direction: column; }
.fact { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact dt { font-size: 14.5px; color: var(--muted); letter-spacing: .02em; }
.fact dd { font-size: 15.5px; font-weight: 600; line-height: 1.7; color: var(--ink); }
.side-cta { background: linear-gradient(160deg, var(--night-1) 0%, var(--night-2) 100%); border-color: transparent; }
.side-cta .side-h { color: var(--cream); border-bottom-color: rgba(243, 239, 230, .16); }
.side-cta p { font-size: 15.5px; line-height: 1.85; color: rgba(243, 239, 230, .74); margin-bottom: 20px; }
.side-cta .btn { width: 100%; justify-content: center; }

/* ============================================================
   常见问答（faq.html）—— 搜索 + 分类筛选 + 手风琴
   ============================================================ */
.faq-body { padding-top: clamp(46px, 5.2vw, 72px); padding-bottom: clamp(80px, 9vw, 132px); }
.faq-tools { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(28px, 3.4vw, 42px); }
.faq-search { position: relative; max-width: 580px; }
.faq-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.faq-search input { width: 100%; height: 54px; padding: 0 20px 0 50px; font-family: inherit; font-size: 16.5px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; outline: none; transition: border-color .2s, box-shadow .25s var(--ease-out-expo); }
.faq-search input::placeholder { color: #9aa3ae; }
.faq-search input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(238, 58, 58, .1); }
.faq-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-cat { font-family: inherit; font-size: 15px; font-weight: 600; color: #3d4552; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 21px; cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .25s; }
.faq-cat:hover { border-color: var(--line-strong); color: var(--red); }
.faq-cat.active { color: #fff; background: var(--red); border-color: var(--red); box-shadow: var(--shadow-red); }

.faq-group + .faq-group { margin-top: clamp(34px, 3.6vw, 50px); }
.faq-group-h { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.4; color: var(--ink); margin-bottom: 18px; }
.faq-group-h::before { content: ""; flex: 0 0 auto; width: 4px; height: 20px; border-radius: 2px; background: var(--red); }

.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; transition: border-color .25s, box-shadow .3s var(--ease-out-expo); }
.faq-item:hover { border-color: var(--line-strong); }
.faq-item.open { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq-q { display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px clamp(20px, 2.4vw, 28px); }
.faq-mark, .faq-at { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; font-family: var(--font-display); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background .25s, color .25s; }
.faq-mark { background: rgba(238, 58, 58, .1); color: var(--red); }
.faq-item.open .faq-mark { background: var(--red); color: #fff; }
.faq-qt { flex: 1; min-width: 0; font-family: var(--font-serif); font-weight: 700; font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.55; color: var(--ink); }
.faq-plus { position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 6px; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--muted); border-radius: 2px; transition: transform .3s var(--ease-out-expo), opacity .3s, background .25s; }
.faq-plus::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq-plus::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-item.open .faq-plus::before { background: var(--red); }
.faq-item.open .faq-plus::after { transform: rotate(90deg); opacity: 0; }

/* 0fr → 1fr 收起展开，比 max-height 更顺、不用猜高度 */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease-out-expo); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; display: flex; gap: 16px; padding: 0 clamp(20px, 2.4vw, 28px); transition: padding-bottom .34s var(--ease-out-expo); }
.faq-item.open .faq-a-inner { padding-bottom: 24px; }
.faq-at { background: var(--paper-2); color: var(--muted); }
.faq-body p, .faq-a-inner .faq-body p { font-size: 16.5px; line-height: 1.9; color: var(--muted); margin-bottom: 14px; }
.faq-a-inner .faq-body p:last-child { margin-bottom: 0; }
.faq-empty { text-align: center; color: var(--muted); padding: 60px 0; font-size: 17px; }

.faq-cta { margin-top: clamp(44px, 5vw, 68px); text-align: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(34px, 4vw, 56px) clamp(24px, 4vw, 48px); }
.faq-cta h3 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.35; color: var(--ink); }
.faq-cta p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.faq-cta-btns { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 分页（新闻列表 / 常见问答共用）：每页 8 条，第 9 条起翻页 */
.pager-wrap { margin-top: clamp(30px, 3.6vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pager-meta { font-size: 14.5px; color: var(--muted); letter-spacing: .02em; }
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pg-btn, .pg-num { font-family: inherit; font-size: 15px; font-weight: 600; color: #3d4552; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 18px; cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .25s var(--ease-out-expo); }
.pg-num { min-width: 46px; padding: 10px 0; text-align: center; font-variant-numeric: tabular-nums; }
.pg-btn:hover:not(:disabled), .pg-num:hover:not(.active) { border-color: var(--red); color: var(--red); }
.pg-num.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--shadow-red); cursor: default; }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-dots { color: var(--muted); padding: 0 2px; }

/* 页头次要导航：公司简介 / 常见问答 在窄屏收起（页脚里同样有入口，不会断路径）
   1280 是最常见的笔记本宽度，实测 10 项会溢出 4px，所以断点放到 1290 */
@media (max-width: 1290px) {
  .nav a.nav-2nd { display: none; }
}
@media (max-width: 1080px) {
  .about-layout { grid-template-columns: 1fr; gap: 44px; }
  .about-side { position: static; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .fact:nth-last-child(2) { border-bottom: 0; }
  .fact:last-child { padding-bottom: 11px; }
}
@media (max-width: 640px) {
  .pg-hero { padding-top: 42px; }
  .pg-hero h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .timeline::before { left: 12px; }
  .tl-item { grid-template-columns: 26px minmax(0, 1fr); gap: 15px; }
  .tl-dot { width: 13px; height: 13px; border-width: 3px; }
  .tl-card { padding: 18px 18px 20px; }
  .tl-desc { font-size: 16px; }
  .facts { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 78px minmax(0, 1fr); }
  .fact:nth-last-child(2) { border-bottom: 1px dashed var(--line); }
  .faq-q { padding: 18px; gap: 13px; }
  .faq-a-inner { padding-left: 18px; padding-right: 18px; }
  .faq-item.open .faq-a-inner { padding-bottom: 20px; }
  .faq-cta-btns { flex-direction: column; }
  .faq-cta-btns .btn { width: 100%; }
}