/* 千帆智策官网 —— 全站样式
   风格：简约大气，深蓝主色，大量留白，克制的动效 */

:root {
  --ink: #0b1220;
  --ink-2: #1e293b;
  --ink-3: #475569;
  --ink-4: #64748b;
  --line: #e5e7eb;
  --line-2: #eef2f7;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-deep: #0b1220;

  /* ------------------------------ 品牌蓝 ------------------------------
   * 2026-09-19 客户要求「网站风格参照 planetic.cn（即千帆智策主站）重新渲染」。
   * 主站的设计令牌实测：--ifm-color-primary = #2563eb、卡片边框 #e5e7eb、
   * 圆角 8px、卡片无阴影、页脚 #303846、容器 1320px。
   * 原先这里的品牌色是更深的 #1d4ed8，与主站不是同一个蓝；
   * 全站对齐后统一到 #2563eb，hover 用它的深色版 #1d4ed8。
   *
   * --brand-2 保留为独立变量（历史上用于首屏轮播的实心按钮），
   * 值同样对齐到 #2563eb，避免两处蓝不一致。 */
  --brand: #2563eb;
  --brand-2: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: #eff6ff;
  --brand-line: #dbe6ff;

  --acc-teal: #0d9488;
  --acc-violet: #7c3aed;
  --acc-orange: #ea580c;
  --acc-pink: #db2777;

  /* ------------------------------ 圆角与描边 ------------------------------
   * 主站实测：卡片 border-radius 8px、按钮 8px、导航小按钮 4px、输入框 4px。
   * 取 8 / 6 两档（--radius 用于卡片与容器块，--radius-sm 用于按钮与小控件），
   * 比改版前的 14 / 9 明显收小。 */
  --radius: 8px;
  --radius-sm: 6px;

  /* 卡片阴影：主站的卡片是「1px 细边框 + 无阴影」，全站对齐后不再用投影。
   * 三个 --shadow-* 变量保留（浮层、抽屉等仍需真实阴影），
   * 但值调轻，避免卡片区出现改版前那种厚投影。 */
  --shadow-s: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-m: 0 4px 12px rgba(15, 23, 42, .06);
  --shadow-l: 0 18px 48px rgba(15, 23, 42, .10), 0 2px 8px rgba(15, 23, 42, .04);

  /* ------------------------------ 通栏渐变带 ------------------------------
   * 主站有两处深蓝渐变，角度同为 135deg 但**方向相反**（实测值）：
   *   hero（首页首屏）：左深右亮 → #0f172a → #1e3a8a
   *   page-head（内页页头）：左亮右深 → #1e3a8a → #0f172a
   * 两条都写成变量，改配色只改这里。
   * ⚠️ 这两个渐变带都是**通栏**（左右顶到视口边、无圆角），
   *    与改版前「容器内的圆角深色卡片」是两种形态，详见 .hero / .cta-band 注释。 */
  --grad-hero: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  --grad-band: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);

  /* 页脚：主站实测 #303846（深蓝灰）+ 文字 #ebedf0。
   * 改版前用的是近黑的 --bg-deep(#0b1220)，对齐后改为这个蓝灰调。 */
  --footer-bg: #303846;
  --footer-fg: #ebedf0;

  /* 内容最大宽度。
   * ⚠️ 2026-09-19 由 1680px 收窄到 **1320px**：主站的 .container 实测
   *    max-width 1320px、padding 0 16px → 内容区 1288px。
   *    改版前是「平铺式」铺满 1680，与主站那种居中窄栏观感差别明显。
   * --pad 同步由 40px 收到 16px（主站实测值），
   *    于是内容区宽 = 1320 − 16×2 = 1288px，与主站逐像素一致。 */
  --maxw: 1320px;
  /* 全站统一横向安全边距 */
  --pad: 16px;

  /* ---------------------------- 版面垂直节奏 ----------------------------
   * 「板块与板块之间」的上下空隙全部由下面这组值给出，
   * 而它们又都是「原始基准 × --space-scale」算出来的。
   *
   * 【为什么这么绕一层】
   * 全站疏密是一个整体感受，客户的需求往往是「再收一点 / 再松一点」这种比例语言。
   * 若把 92px 之类的数字直接写在各处，每次调比例都要逐个手算一遍，
   * 既容易算错、也容易漏掉响应式里的同名覆盖（本站有 1280 / 860 两处）。
   * 集中成一个系数后，调疏密只改 --space-scale 一个数。
   *
   * --space-scale：
   *   1    → 原始疏密（2026-09-19 之前）
   *   .8   → 收紧两成（当前值，2026-09-19 应客户要求）
   *
   * ⚠️ 基准值不要改，只改系数；改了基准值下次调比例又得重新算。
   * ⚠️ 响应式断点里的覆盖同样要写成 calc(新基准 × var(--space-scale))，
   *    否则小屏下会退回未缩放的值。
   * 注：板块「内部」的间距（板块标题与内容之间、卡片之间、卡片内边距）
   *    不在这一组里，改系数不会影响它们。 */
  --space-scale: .8;
  --sec-y: calc(92px * var(--space-scale));          /* 常规板块上下留白 */
  --sec-y-tight: calc(64px * var(--space-scale));    /* 紧凑板块（CTA 段落）上下留白 */
  --pagehead-y-top: calc(68px * var(--space-scale)); /* 页头之上（与导航之间） */
  --pagehead-y-bottom: calc(60px * var(--space-scale)); /* 页头之下（与首个板块之间） */
  --hero-y-top: calc(64px * var(--space-scale));     /* 导航与首屏之间 */
  --hero-kicker-gap: calc(28px * var(--space-scale)); /* 首屏主标题与轮播之间 */
  --hero-bottom: calc(40px * var(--space-scale));    /* 首屏底部留白（轮播控制条之下） */
  --footer-y-top: calc(68px * var(--space-scale));   /* 末个板块与页脚之间 */
  --sec-head-gap: calc(52px * var(--space-scale));   /* 板块标题组与板块内容之间 */

  /* 首屏内容的最小高度。
   *
   * 历史：2026-09-19 客户要求「轮播图太高，高度改成现在的 65%」，
   * 当时用 --hero-slide-h: .65 驱动 aspect-ratio（满图轮播只能由图片比例决定高度）。
   * 同日客户又改为「参照 planetic.cn 重做轮播图」——首屏形态从「满铺大图」
   * 换成「通栏深蓝渐变 + 左文右图」，高度不再由图片比例决定，
   * 而是**由内容自然撑开**（取左右两栏里较高的那一栏）。
   *
   * 于是 aspect-ratio 及其派生变量（--hero-slide-ar / --hero-slide-ar-mid）整体移除，
   * 旧注释里那条「比值 = 原比值 ÷ 系数」的换算规则也随之作废 —— 别再按它调比值。
   * 想改首屏高度，现在改的是内容本身，或 --hero-y-top / --hero-bottom 两个留白变量。
   *
   * 仅保留一个 min-height 兜底：所有 .slide 叠在同一个 grid 单元格里
   * （见 .hero-carousel .slides），容器高度等于最高那一屏，
   * 这张 min-height 防止某屏内容异常短时带子突然变矮。 */
  --hero-slide-minh: 300px;
}

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

html { scroll-behavior: smooth; }

body {
  /* 正文以微软雅黑为主字体：中文字形在 Windows 下更饱满易读，
   * 且与全站 16px 的正文字号搭配更稳。西文/数字优先用系统 UI 字体，
   * 避免雅黑自带的西文（偏窄、字重偏轻）影响观感。
   * 注意：字体栈里带空格的族名必须加引号，否则会被当成多个族名解析。 */
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI",
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Source Han Sans SC", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
/* 表单类区块也铺满：原先限制 900px 会让填写区域明显窄于上方内容。
 * 为避免长行输入框过宽影响可读性，改由内层表单控件自身控制宽度。 */
.wrap-narrow { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------------------------------- 导航 ----------------------------------
 * 对齐主站实测值：高 60px、纯白不透明底、无下边框，
 * 靠一条极轻的投影（0 1px 2px rgba(0,0,0,.1)）与内容分层。
 * 改版前是「88% 半透明白 + backdrop-filter 毛玻璃 + 1px 下边框」，
 * 去掉毛玻璃是因为主站是不透明白底 —— 滚动时后面内容不会透出来。 */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  height: 60px; display: flex; align-items: center; gap: 32px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand) 0%, #3b82f6 100%);
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 15px; letter-spacing: -.5px;
}
.logo-text { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.logo-text small { display: block; font-size: 9px; font-weight: 500; color: var(--ink-4); letter-spacing: 1.4px; margin-top: -3px; }

.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* 导航链接：主站是「hover 只变字色、不出现底色块」。
 * 改版前 hover / active 都会铺一层浅蓝底，属于另一种设计语言，已按主站改掉。 */
.nav-links a {
  padding: 8px 12px; border-radius: 4px; font-size: 16px;
  color: #1c1e21; transition: .16s; font-weight: 500;
}
.nav-links a:hover { color: var(--brand); background: transparent; }
.nav-links a.active { color: var(--brand); background: transparent; font-weight: 600; }

.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 16px; font-weight: 600; cursor: pointer; transition: .18s; white-space: nowrap;
}
/* 主站的主按钮是「实心蓝 #2563eb + 8px 圆角 + padding 16px 32px」，
 * 没有投影、hover 也不位移（仅加深）。改版前带阴影 + translateY(-1px) 上浮，已去掉。
 * 圆角统一走 --radius-sm（6px）：介于主站的按钮 8px 与导航小按钮 4px 之间，
 * 因为本站在导航、正文、CTA 三处共用同一个 .btn。 */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.btn-sm { padding: 7px 14px; font-size: 14.5px; }
.btn-lg { padding: 15px 32px; font-size: 17px; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* ---------------------------------- 通用块 --------------------------------- */

.section { padding: var(--sec-y) 0; }
.section-soft { background: var(--bg-soft); }
.section-tight { padding: var(--sec-y-tight) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--brand); text-transform: uppercase; margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--brand); }

h1.page-title { font-size: 44px; line-height: 1.25; font-weight: 800; letter-spacing: -.6px; }
h2.sec-title { font-size: 33px; line-height: 1.32; font-weight: 750; letter-spacing: -.4px; }
/* 频道正文统一到 16px（与 body 基准一致），标签类小字保留层级差但同步上调 */
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.1px; }

.sec-head { max-width: 660px; margin-bottom: var(--sec-head-gap); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-desc { color: var(--ink-3); font-size: 17px; margin-top: 14px; line-height: 1.75; }

.lead { font-size: 17.5px; color: var(--ink-3); line-height: 1.8; }

/* ---------------------------------- 首页 Hero ------------------------------- */

/* 首屏带：**通栏深蓝渐变**（左右顶到视口边、无圆角、无下边框）。
 *
 * 2026-09-19 客户要求「轮播图参照 planetic.cn 设计」——主站顶部的 hero
 * 就是一条通栏深蓝渐变带，容器内是「左文右图」两栏。本站保留 5 屏轮播机制，
 * 但把每屏视觉换成这种形态（见下方 .hero-carousel .slide）。
 *
 * 【为什么渐变挂在 .hero 而不是每个 .slide 上】
 *   挂 .slide 的话，每屏各自画一遍渐变：切换时整块背景重绘，
 *   多屏叠加时还会互相透出。挂到最外层 .hero 之后，背景是整条带共享的固定底，
 *   切换只换内容 —— 更接近主站那种「一条带子、内容在带子上轮换」的观感。
 *   代价是 .slide 不能再有圆角/投影/深色压底，它们会把外层渐变挡掉。
 *
 * 【通栏怎么实现】
 *   背景挂在 .hero（宽度天然等于视口宽）上，内容仍由内层 .wrap 收进 1320px 容器。
 *   ⚠️ 不要图省事写 `width:100vw` + 负 margin：页面存在纵向滚动条时
 *      100vw 会大于 clientWidth，直接撑出横向滚动条。
 *
 * 【留白】上下留白仍全部挂在变量上（上由 .hero-lead 的 padding-top、
 *   下由这里），中间内容换成什么都不用动间距。
 *   原先底部留白是由轮播之下的数据条（.hero-stats）撑出来的，
 *   该区块已按需求移除，故由 .hero 自己的 padding-bottom 顶上。 */
.hero {
  position: relative;
  background: var(--grad-hero);
  padding-bottom: var(--hero-bottom);
}

/* Hero 网格纹理层。用独立元素（而非 .hero::before）承载，
 * 这样它能稳定垫在轮播内容之下，切换主题时背景不参与重绘。
 * 深蓝底上改成极淡的**白**网格（改版前是浅底上的淡蓝网格）；
 * 透明度压得很低，只提供一点科技质感，不破坏「纯渐变」的整体观感。 */
.hero-bg {
  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: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}

/* 首屏轮播：外层留出与导航之间的呼吸空间
 *
 * 顶部留白从 .hero-carousel 上移到了它的外层 .hero-lead：
 * 两者之间多了一行静态直出的品牌定位主标题（.hero-kicker），
 * 若留白仍挂在轮播上，主标题会被顶到留白之上、与下方轮播拉开一整段空隙。
 * 移到外层后，「留白 → 主标题 → 轮播」才是正常的上下关系。
 * 相应地，两处响应式里的 padding-top 也一并从 .hero-carousel 改为 .hero-lead。
 *
 * ⚠️ 这里只能写 `padding-top`，**不能写简写 `padding: 64px 0 0`**：
 * .hero-lead 与 .wrap 都是单类选择器、权重相同，写在后面的胜出，
 * 用简写会把 .wrap 的左右内边距一并覆盖成 0，
 * 结果 hero 区文案贴着视口边缘、与导航（仍有内边距）对不齐。
 * 这个坑肉眼第一眼很容易漏——内容"看着还在"，只是整体左移了一段。 */
.hero-lead { padding-top: var(--hero-y-top); }
.hero-carousel { position: relative; z-index: 1; margin: 0 auto; padding: 0; }

/* 首屏主标题（整页唯一的 h1，服务端直出，见 index.html 里的说明）。
 *
 * ⚠️ 为什么不让它长成主站 hero 那个 48px 大字：
 *    主站的 hero 只有「大标题 + 副文案 + 按钮」三件套，大标题就是那条带的视觉重心；
 *    本站首屏多了一层 5 屏轮播，每屏自带 48px 大标题（.slide-title），
 *    若 h1 也放大到 48px，同一屏里会出现两个同等重量的标题互相抢焦点。
 *    因此 h1 保持在带子顶部做「品牌定位行」，只把颜色提亮为白色系 ——
 *    底子已由浅色渐变变成深蓝，沿用改版前的灰 #475569 会直接糊进底色里
 *    （实测漏改时截图确认过，几乎看不清）。 */
.hero-kicker {
  font-size: 18px; font-weight: 600; line-height: 1.6;
  color: rgba(255, 255, 255, .88); letter-spacing: .2px; margin-bottom: var(--hero-kicker-gap);
}

/* ---------------------------------- 首屏轮播 ----------------------------------
 * 全站只有首屏用到轮播（元素同时带 .carousel 与 .hero-carousel 两个类）。
 *
 * 【2026-09-19 形态变更】满铺大图 → 主站式「左文右图」
 *   改版前：每屏一整张主题图铺满、深色压底、白字压在图上是，一张 24px 圆角卡片。
 *   改版后：背景交给外层 .hero 的通栏深蓝渐变，每屏只是带子里的一层内容，
 *   分左右两栏 —— 左栏眉标/标签/大标题/描述/双按钮，右栏一张主题图（白底卡盛放）。
 *   结构与主站 planetic.cn 的 hero 一致，只是主站是静态单屏、本站保留了 5 屏轮换。
 *
 * ⚠️ .slide 不能再有圆角、投影、深色压底、overflow:hidden了：
 *    这些在「卡片式」版本里是用来把图与文字捏成一体的；
 *    现在背景来自外层渐变，任何一层不透明底都会把它挡掉、露出白底。
 *
 * ⚠️ 高度不再由 aspect-ratio 决定，改为**内容自然撑开**：
 *    所有 .slide 叠进同一个 grid 单元格（见 .hero-carousel .slides），
 *    容器高度取最高那一屏，因此切换时首屏高度不会跳动。
 *    想改首屏高度就是改内容，或调 --hero-y-top / --hero-bottom。
 */
.carousel { position: relative; }

.slides { position: relative; min-height: 400px; }
/* 首屏：改用 grid 把 5 屏叠进同一格 —— 容器高度 = 最高那一屏。
 * 若沿用「只有 .on 那屏在文档流里、其余绝对定位」，高度会随当前屏文案长短变化，
 * 每次切换整条 hero 带都会抖一下。 */
.hero-carousel .slides { min-height: var(--hero-slide-minh); display: grid; }

.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
}
.slide.on { opacity: 1; visibility: visible; }

/* 首屏每屏：两栏内容。
 * ⚠️ 这里的 `position: relative` 是为了参与上面 grid 的高度计算，
 *    它是 .slide 那条 `position:absolute` 的覆盖（同为单类/同等权重，后者胜）；
 *    也正因如此，.slide.on 那条不再需要写 position: relative（已删）。
 * ⚠️ 右栏用 minmax(0, 460px)：固定上限 460、必要时可缩，
 *    不会在窄容器下把左栏文字挤成竖排。 */
.hero-carousel .slide {
  grid-area: 1 / 1;
  position: relative; inset: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center; gap: 56px;
  padding: 0;
  background: none; border-radius: 0; box-shadow: none; overflow: visible;
}

/* 氛围光：每屏一个自己的品牌色光晕（色值由 JS 通过 --accent 传入）。
 * 背景已由外层渐变承担，这一层只做很淡的色彩倾向，
 * 让切换时带子的冷暖有细微变化，不至于五屏看上去完全一样。
 * 用 pointer-events:none 保证不吃点击。 */
.slide-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(ellipse 58% 76% at 76% 44%, var(--accent), transparent 68%);
}

/* 左栏文案：白字直接落在深蓝渐变上 */
.slide-content { position: relative; z-index: 2; color: #fff; max-width: 620px; }

/* 眉标：主站的 hero 没有眉标，这里保留（它承担本站的品牌定位行），
 * 提亮成浅蓝，保证压在深蓝底上的对比度。 */
.hero-carousel .slide .eyebrow { color: #9dc0ff; justify-content: flex-start; margin-bottom: 12px; }
.hero-carousel .slide .eyebrow::before { background: #9dc0ff; }
/* 非首屏的眉标空占位：只保留高度、不显示前置短横线，
 * 让各屏文案的纵向起点完全一致，切换时不跳动。 */
.hero-carousel .slide .eyebrow-ghost::before { visibility: hidden; }

/* 标签（每屏的产品副标题，如「以销定产 · 以产促销 · 供需平衡」） */
.slide-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px;
  padding: 5px 12px; border-radius: 4px; margin-bottom: 4px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  color: rgba(255, 255, 255, .92);
}
/* 大标题：对齐主站 hero 的 h1 档位（实测 48px / 800 / 行高 1.25 / 白色） */
.hero-carousel .slide .slide-title {
  font-size: 48px; line-height: 1.25; font-weight: 800; letter-spacing: -1px;
  margin-top: 14px; color: #fff;
}
/* 描述：对齐主站 hero 副文案档位（实测 20.8px，此处 18px 更贴合中文行宽） */
.hero-carousel .slide .sl-desc {
  font-size: 18px; color: rgba(255, 255, 255, .82); line-height: 1.75; margin-top: 18px;
  max-width: 520px;
}
.slide-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
/* 按钮：对齐主站 hero 的两个按钮 ——
 * 主按钮实心蓝 #2563eb、圆角 8px、padding 16px 32px；
 * 次按钮无描边、半透明白底（主站那个「了解产品」是纯文字链接，
 * 本站保留按钮形态以便点击，但不再用改版前的毛玻璃描边，避免与实心按钮抢眼）。 */
.slide-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 32px; border-radius: 8px; font-size: 17px; font-weight: 600;
  border: 1px solid transparent; color: #fff; background: rgba(255, 255, 255, .14);
  transition: .18s; cursor: pointer;
}
.slide-btn:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.slide-btn.solid { background: var(--brand); border-color: var(--brand); }
.slide-btn.solid:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }

/* 右栏主题图：用白底卡片盛放，与主站 hero 右侧那张插画卡同构。
 * 图仍是 <img>（换图只需覆盖 public/assets/slides/*.png 即可，不动代码），
 * 但不再铺满整屏 —— 按自身比例完整显示，object-fit 只作兜底。
 * ⚠️ 卡片带投影是为了从深蓝渐变的带子里「浮」出来，
 *    这是深底上的必要层次，与「正文卡片一律无阴影」不冲突。 */
.slide-art {
  position: relative; z-index: 1;
  background: #fff; border-radius: var(--radius); padding: 16px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, .28);
}
.slide-cover {
  display: block; width: 100%; height: auto;
  border-radius: 4px; object-fit: contain;
}

/* 控制条：圆点靠左（与文案左对齐）、箭头靠右，整条走正常文档流，排在内容下方。
 *
 * 控件**刻意不做成压在带子上的绝对定位**：带子里已经有文案，
 * 再叠控件必然与文字抢空间，偏移量怎么调都只是勉强避让（早先实测贴到只剩 2px 间隙）。
 * 放在内容下方则从几何上排除遮挡。
 * 配色按深蓝底改过：改版前 hero 是浅底，控件是「白底深字」；
 * 现在反过来，圆点/箭头都要在深底上看得清。 */
.car-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 34px; }
.car-dots { display: flex; gap: 9px; align-items: center; }
.car-dot {
  width: 26px; height: 4px; border-radius: 2px; border: 0; padding: 0;
  background: rgba(255, 255, 255, .28); cursor: pointer; transition: .25s;
}
.car-dot.on { background: #fff; width: 40px; }
.car-nav { display: flex; gap: 10px; }
.car-arrow {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; display: grid; place-items: center; font-size: 14px; transition: .18s;
}
.car-arrow:hover { background: #fff; color: var(--brand); border-color: #fff; }

/* ---------------------------------- 卡片 ---------------------------------- */

.grid { display: grid; gap: 32px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; transition: .22s; position: relative; overflow: hidden;
}
.card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-m); transform: translateY(-3px); }
.card-icon {
  width: 48px; height: 48px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 20px;
}
.card-icon svg { width: 22px; height: 22px; }
.card-icon-svg { width: 24px; height: 24px; }

/* 安全兜底：卡内联图未显式设尺寸时不允许撑满容器 */
.card svg:not([width]) { max-width: 26px; max-height: 26px; }
.btn svg, .chip svg, .badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.card-icon svg, .d-val svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-3); font-size: 16px; line-height: 1.75; }

/* 产品卡片 */
.prod-card { cursor: pointer; }
.prod-card .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.prod-card .pc-code { font-size: 19px; font-weight: 750; }
.prod-card .pc-en { font-size: 12.5px; color: var(--ink-4); letter-spacing: .8px; margin-top: 3px; font-weight: 500; }
.prod-card .pc-tag {
  font-size: 12.5px; padding: 3px 9px; border-radius: 5px; white-space: nowrap;
  background: var(--brand-soft); color: var(--brand); font-weight: 600; flex-shrink: 0;
}
.prod-card .pc-scene {
  color: var(--ink-3); font-size: 16px; line-height: 1.75; margin-top: 18px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-card .pc-more { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: 5px; }
.prod-card .pc-more svg { width: 15px; height: 15px; flex-shrink: 0; }
.prod-card .pc-head-wrap .card-icon svg { width: 21px; height: 21px; }

/* 案例卡片 */
.case-card { padding: 0; overflow: hidden; }
.case-cover {
  height: 168px; background: linear-gradient(135deg, #eef4ff, #e6f4f2);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.case-cover img { width: 100%; height: 100%; object-fit: cover; }
.case-cover .cc-ph { font-size: 34px; font-weight: 800; color: var(--brand); opacity: .3; letter-spacing: 2px; }
.case-body { padding: 24px 24px 26px; }
.case-ind { font-size: 13px; color: var(--brand); font-weight: 700; letter-spacing: 1px; margin-bottom: 9px; }
.case-body h3 { font-size: 18px; margin-bottom: 10px; line-height: 1.5; }
.case-body p { font-size: 16px; color: var(--ink-3); line-height: 1.7; }

/* 文章列表 */
.art-item {
  display: flex; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line-2);
  align-items: flex-start; transition: .18s;
}
.art-item:hover .art-title { color: var(--brand); }
.art-date {
  flex-shrink: 0; width: 76px; text-align: center; color: var(--ink-4);
  border-right: 1px solid var(--line); padding-right: 20px;
}
.art-date .d { font-size: 25px; font-weight: 750; color: var(--ink-2); line-height: 1.1; }
.art-date .m { font-size: 12px; margin-top: 2px; }
.art-main { flex: 1; min-width: 0; }
.art-title { font-size: 18.5px; font-weight: 700; margin-bottom: 8px; transition: .18s; line-height: 1.5; }
.art-sum { font-size: 16px; color: var(--ink-3); line-height: 1.7; }
.art-meta { font-size: 13.5px; color: var(--ink-4); margin-top: 10px; display: flex; gap: 14px; }

/* 服务 */
.svc-card { padding: 34px 30px; }
.svc-num { font-size: 14px; font-weight: 700; color: var(--brand); letter-spacing: 2px; margin-bottom: 14px; }
.svc-card h3 { font-size: 22px; margin-bottom: 8px; }
.svc-card .svc-en { font-size: 12.5px; color: var(--ink-4); letter-spacing: .8px; margin-bottom: 18px; }
.svc-card p { color: var(--ink-3); font-size: 16px; line-height: 1.78; }
.svc-list { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-2); display: grid; gap: 10px; }
.svc-list li { list-style: none; font-size: 16px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.svc-list li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
  margin-top: 9px; flex-shrink: 0;
}

/* 客户行业 */
.chips { display: flex; flex-wrap: wrap; gap: 11px; }
.chip {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 15.5px; color: var(--ink-2); background: #fff; transition: .18s; font-weight: 500;
}
.chip:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }

/* 时间线 */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.5px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -29px; top: 7px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--brand);
}
.tl-year { font-size: 16px; font-weight: 750; color: var(--brand); letter-spacing: .5px; }
.tl-text { font-size: 15.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.7; }

/* ---------------------------------- 表单 ---------------------------------- */

/* 表单卡：与 .card 同一套语言 —— 白底 + 1px 细边框 + 无阴影。
 * 改版前带 --shadow-m 投影、内边距 40px；全站对齐后去掉投影，内边距收到 32px
 * （容器由 1680 收窄到 1320 之后，40px 内边距在卡片里显得过于空。 */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
}
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.field label .req { color: #dc2626; margin-left: 3px; }
.field input, .field select, .field textarea {
  /* 边框用 #d1d5db（主站实测值），比卡片的 #e5e7eb 深一档 ——
   * 输入框与卡片如果同色，边界会糊在一起，用户看不出哪里可以点。 */
  width: 100%; padding: 11px 14px; border: 1px solid #d1d5db; border-radius: var(--radius-sm);
  font-size: 16px; background: #fff; transition: .16s; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.field textarea { resize: vertical; min-height: 106px; line-height: 1.7; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-hint { font-size: 13.5px; color: var(--ink-4); margin-top: 6px; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 15.5px; margin-bottom: 18px; display: none; }
.alert.show { display: block; }
.alert-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.alert-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.alert-info { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }

/* 登录页 */
.auth-wrap { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-left {
  background: linear-gradient(155deg, #0b1220 0%, #14203c 52%, #1d2f57 100%);
  padding: 72px 68px; display: flex; flex-direction: column; justify-content: center; color: #fff;
  position: relative; overflow: hidden;
}
.auth-left::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.auth-left > * { position: relative; z-index: 2; }
.auth-left h2 { font-size: 34px; font-weight: 800; letter-spacing: -.5px; line-height: 1.3; }
.auth-left p { color: rgba(255,255,255,.66); margin-top: 18px; font-size: 16.5px; line-height: 1.85; }
.auth-feats { margin-top: 40px; display: grid; gap: 16px; }
.auth-feat { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: rgba(255,255,255,.86); }
.auth-feat svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: #6ea8ff; }
.auth-right { display: grid; place-items: center; padding: 60px 56px; background: var(--bg-soft); }
/* 表单区随面板放大（原先固定 400px，在平铺布局下会显得局促） */
.auth-box { width: 100%; max-width: 520px; }
.auth-box h2 { font-size: 27px; font-weight: 780; letter-spacing: -.3px; }
.auth-box .a-sub { color: var(--ink-4); font-size: 15.5px; margin-top: 8px; margin-bottom: 32px; }
.auth-switch { text-align: center; font-size: 15.5px; color: var(--ink-3); margin-top: 24px; }
.auth-switch a { color: var(--brand); font-weight: 600; cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }
.tabs { display: flex; gap: 4px; background: #fff; padding: 4px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 30px; }
.tab {
  flex: 1; padding: 9px; text-align: center; border-radius: 7px; font-size: 15.5px;
  font-weight: 600; color: var(--ink-3); cursor: pointer; transition: .16s; border: 0; background: none;
}
.tab.on { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(29,78,216,.22); }

/* 账户中心 */
.acct-head {
  display: flex; align-items: center; gap: 22px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 34px;
}
.avatar {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), #4f7bf0); color: #fff;
  font-size: 25px; font-weight: 700; flex-shrink: 0;
}
.acct-head .a-name { font-size: 22px; font-weight: 750; }
.acct-head .a-mail { font-size: 15px; color: var(--ink-4); margin-top: 3px; }
.acct-head .a-act { margin-left: auto; }

.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tbl th {
  text-align: left; padding: 12px 16px; background: var(--bg-soft);
  font-size: 13.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .5px;
  border-bottom: 1px solid var(--line);
}
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.tbl tr:last-child td { border-bottom: 0; }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--brand-soft); color: var(--brand);
}
.badge.gray { background: #f1f5f9; color: var(--ink-3); }
.badge.green { background: #f0fdf4; color: #15803d; }

/* ---------------------------------- 页脚 ---------------------------------- */

/* 页脚：对齐主站实测值 —— 底色 #303846（深蓝灰，不是改版前的近黑 #0b1220）、
 * 文字 #ebedf0（不是纯白：纯白压在蓝灰底上会比正文更刺眼）。
 * 上方留白仍走 --footer-y-top 变量。 */
.footer { background: var(--footer-bg); color: var(--footer-fg); padding: var(--footer-y-top) 0 30px; margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer .logo-text { color: var(--footer-fg); }
.footer .logo-text small { color: rgba(235, 237, 240, .5); }
.footer-brand p { font-size: 15.5px; line-height: 1.8; margin-top: 18px; max-width: 320px; }
.footer h4 { color: var(--footer-fg); font-size: 15.5px; font-weight: 700; margin-bottom: 18px; letter-spacing: .5px; }
.footer-col ul { list-style: none; display: grid; gap: 11px; }
.footer-col a { font-size: 15.5px; transition: .16s; }
.footer-col a:hover { color: #fff; }
.footer-contact div { font-size: 15.5px; margin-bottom: 11px; display: flex; gap: 9px; align-items: flex-start; }
.footer-contact svg { width: 15px; height: 15px; margin-top: 4px; flex-shrink: 0; opacity: .7; }
.footer-bottom { padding-top: 26px; display: flex; justify-content: space-between; gap: 20px; font-size: 14.5px; flex-wrap: wrap; }

/* 面包屑 */
.crumb { padding: 26px 0 0; font-size: 14.5px; color: var(--ink-4); }
.crumb a:hover { color: var(--brand); }
.crumb span { margin: 0 8px; opacity: .5; }

/* 详情抽屉 */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(11, 18, 32, .5); z-index: 200;
  opacity: 0; visibility: hidden; transition: .28s; backdrop-filter: blur(2px);
}
.drawer-mask.on { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 94vw); background: #fff;
  z-index: 201; transform: translateX(101%); transition: transform .34s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; box-shadow: -18px 0 48px rgba(11,18,32,.16);
}
.drawer.on { transform: none; }
.drawer-head { padding: 28px 34px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.drawer-body { padding: 32px 34px 48px; overflow-y: auto; flex: 1; }
.drawer-close { background: none; border: 0; cursor: pointer; color: var(--ink-4); font-size: 22px; line-height: 1; padding: 4px; }
.drawer-close:hover { color: var(--ink); }
.drawer h2 { font-size: 25px; font-weight: 780; letter-spacing: -.3px; }
.drawer .d-en { font-size: 13.5px; color: var(--ink-4); letter-spacing: 1px; margin-top: 8px; }
.d-block { margin-top: 30px; }
.d-block h4 {
  font-size: 14px; font-weight: 700; color: var(--brand); letter-spacing: 1.4px;
  text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2);
}
.d-block p { font-size: 16px; color: var(--ink-2); line-height: 1.9; }
.d-vals { display: grid; gap: 12px; }
.d-val { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); line-height: 1.7; }
.d-val .dot { width: 20px; height: 20px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }

/* 空状态 */
.empty { text-align: center; padding: 64px 20px; color: var(--ink-4); }
.empty .e-icon { font-size: 40px; opacity: .3; margin-bottom: 16px; }
.empty p { font-size: 16px; }

/* 上传 */
.drop {
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 34px;
  text-align: center; cursor: pointer; transition: .18s; background: var(--bg-soft);
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-soft); }
.drop .d-t { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.drop .d-s { font-size: 13.5px; color: var(--ink-4); margin-top: 6px; }

/* 页面头部 */
/* 内页页头：对齐主站 —— **通栏深蓝渐变**（方向与首页 hero 相反：左亮右深）、居中白字。
 * 主站实测：background linear-gradient(135deg,#1e3a8a,#0f172a)、padding 48px 0、
 * h1 32px/700 白字居中、副文案 19.2px 白字居中(max-width 700)。
 * 改版前是「极浅蓝渐变 + 深色左对齐文字 + 下边框」，与主站观感完全不同。
 *
 * ⚠️ 文字居中会影响所有内页的页头（/products、/cases、/about、/services、
 *    /booking、/knowledge）—— 这是有意为之：主站六个内页的页头全是居中。
 *    页头下方的正文板块不受影响，仍是左对齐。 */
.page-head {
  padding: var(--pagehead-y-top) 0 var(--pagehead-y-bottom);
  background: var(--grad-band);
  color: #fff;
  text-align: center;
}
/* 字号取 36px：主站是 32px，但本站内页标题更长（动辄 20 字以上），
 * 32px 会显得单薄，36px 在观感上最接近主站那种「分量感」。 */
.page-head h1 { font-size: 36px; font-weight: 800; letter-spacing: -.7px; line-height: 1.26; }
.page-head .pd {
  font-size: 18px; color: rgba(255, 255, 255, .82); margin-top: 16px;
  max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.78;
}

/* CTA 条：从「容器内的圆角深色卡片」改成**通栏深蓝渐变带 + 居中文字**，
 * 与主站的 cta-section 同构（主站实测：padding 64px 0、居中、h2 白字、
 * 按钮是实心蓝 #2563eb / 圆角 8px，而不是改版前那个反白按钮）。
 *
 * 【通栏怎么来的】渐变画在**外层 section**（.cta-sec）上，.cta-band 退化成纯内容块：
 * 文字仍被 .wrap 收在 1320px 容器里，背景则是通栏的。
 * ⚠️ 不要用 `width:100vw + 负 margin` 撑通栏 —— 页面有纵向滚动条时
 *    100vw 会大于 clientWidth，直接撑出横向滚动条。
 *    通栏必须靠「外层元素天然满宽」，而不是把内容撑宽。
 *
 * 【兜底】万一某个页面漏给 section 加 .cta-sec，.cta-band 自身仍带深蓝渐变与内边距，
 * 不会退化成「白底白字」这种不可读状态；只是那种情况下背景不会顶到视口边。
 * 页面清单（共 7 处）：index / products / cases / about / services / knowledge。 */
.cta-sec { background: var(--grad-band); }
.cta-band {
  background: var(--grad-band); padding: 48px 32px;
  color: #fff; text-align: center; border-radius: 0;
}
.cta-sec .cta-band { background: none; padding: 0; }
.cta-band h2 { font-size: 32px; font-weight: 700; letter-spacing: -.4px; }
.cta-band p {
  color: rgba(255, 255, 255, .8); margin-top: 14px; font-size: 17px; line-height: 1.8;
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.cta-acts { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-band .btn-primary { background: var(--brand); color: #fff; }
.cta-band .btn-primary:hover { background: var(--brand-hover); color: #fff; }
.cta-band .btn-ghost { background: transparent; border-color: rgba(255,255,255,.34); color: #fff; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); }

/* 浅色按钮变体 */
.btn-outline-light { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ink); }

/* -------------------------------- 数字指标带 ------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.metric { padding: 34px 28px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric .m-n { font-size: 38px; font-weight: 800; color: var(--brand); letter-spacing: -1px; }
.metric .m-l { font-size: 15px; color: var(--ink-3); margin-top: 5px; }
.metric .m-d { font-size: 14.5px; color: var(--ink-4); margin-top: 8px; line-height: 1.6; }

/* 分栏图文 */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-rev .split-text { order: 2; }

/* 文章正文 */
/* 文章正文：连读文本，行高放宽到 2，字号与频道正文保持一致 */
.article-body { font-size: 16.5px; line-height: 2; color: var(--ink-2); }
.article-body p { margin-bottom: 22px; }
.article-body h2 { font-size: 23px; font-weight: 750; margin: 40px 0 16px; }
.article-body h3 { font-size: 19px; font-weight: 700; margin: 30px 0 12px; }
.article-body ul { margin: 0 0 22px 22px; }
.article-body li { margin-bottom: 10px; }

/* ---------------------- 服务端直出的静态内容层（SEO） ----------------------
 * 【为什么需要这一层】
 * 站点正文由前端脚本从 /api/content/* 拉取后注入空容器（#prodGrid、#svcGrid、
 * #caseGrid 等），初始 HTML 里除了小标题几乎没有实质文本。Google 能执行 JS，
 * 但百度、必应等对 JS 渲染的支持明显更弱，很可能抓不到这批脚本注入的文案，
 * 于是页面在中文搜索里几乎拿不到可索引的关键词。
 *
 * 【做法与边界】
 * 每页在 <body> 内附一段服务端直出的静态内容：术语释义、常见问题、产品与品牌说明。
 * 它与页面主题一致、对访客同样有阅读价值，因此**不是**隐藏文本——
 * 不使用 display:none / 字号 0 / 文本缩进负值之类的遮挡手段，
 * 只是把内容放在脚本之外。脚本未执行时访客也能读到，脚本执行后它依然展示。
 */
.kw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kw-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.kw-card .kw-en { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--brand); margin-bottom: 8px; }
.kw-card h3 { font-size: 17.5px; margin-bottom: 10px; }
.kw-card p { color: var(--ink-3); font-size: 15.5px; line-height: 1.78; }

.kw-prose { max-width: 880px; }
.kw-prose p { font-size: 16px; line-height: 1.9; color: var(--ink-3); margin-bottom: 18px; }
.kw-prose h3 { font-size: 19px; margin: 32px 0 12px; }

.kw-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* 静态内链（站内导航）
 * 全站导航与页脚由 app.js 注入，不执行 JS 的爬虫看不到任何内部链接，
 * 页面之间等于互相孤立。这组链接是服务端直出的内链，
 * 兼作给访客的站内地图：sitemap.xml 解决「提交」，内链解决「权重流动」，
 * 两者不能互相替代。 */
.kw-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.kw-links a { font-size: 15.5px; font-weight: 600; color: var(--brand); }
.kw-links a:hover { text-decoration: underline; }

.kw-note { margin-top: 30px; padding: 20px 24px; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }

/* FAQ 用原生 <details>：无需 JS 即可展开，且答案始终留在 DOM 里可被抓取。 */
.kw-faq { display: grid; gap: 14px; max-width: 900px; }
.kw-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.kw-faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px; color: var(--ink); list-style: none; }
.kw-faq summary::-webkit-details-marker { display: none; }
.kw-faq summary::after { content: '+'; float: right; color: var(--brand); font-weight: 700; }
.kw-faq details[open] summary::after { content: '−'; }
.kw-faq p { margin-top: 14px; color: var(--ink-3); font-size: 15.5px; line-height: 1.85; }

/* --------------------------------- 响应式 ---------------------------------
 * 平铺布局下栅格铺满全宽，单列会变得很宽，因此断点比常规站点更早触发：
 * 让列数随视口平滑收敛，而不是等到很窄才降列。
 */

/* 超宽屏：四列栅格最多 6 列会出现卡片过窄，限制在 4 列并适度放大间距 */
@media (min-width: 1700px) {
  .grid { gap: 26px; }
  .metrics .metric { padding: 38px 32px; }
}

@media (max-width: 1420px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid var(--line); }
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }
  .footer-col.footer-contact { grid-column: 1 / -1; }
}

@media (max-width: 1280px) {
  /* ⚠️ 这里原来还有 `:root { --pad: 32px }`，2026-09-19 全站对齐主站时删掉。
   *    原因：base 的 --pad 由 40px 收到 16px 之后，32px 反而比 base 更大，
   *    会破坏「屏越窄、边距越紧」的单调关系（宽屏 16px、中屏 32px、窄屏 20px）。
   *    主站本身全档位都是 16px，跟着统一即可。
   * ⚠️ 同时删掉的两条：`.cta-band { padding: 48px 48px }`（CTA 已改为通栏带，
   *    内边距由外层 section 统一负责）与 `.hero-carousel .slide { padding: 0 48px }`
   *    （首屏每屏已改为通栏带内的两栏内容块，自身不再有内边距）。 */
  .split { gap: 44px; }

  /* 首屏：标题与主题图同步收一档
   * ⚠️ 这里原本写 68px，但它比基准（64px）还大 —— 上一轮把基准从 84px 调到 64px
   * （首屏多了静态主标题一行，留白相应下调）时漏改了断点值，
   * 导致中等屏反而比大屏更松。现改为 56px，恢复「越窄越紧」的单调关系。 */
  .hero-lead { padding-top: calc(56px * var(--space-scale)); }
  .hero-carousel .slide .slide-title { font-size: 42px; }
  .hero-carousel .slide .sl-desc { font-size: 17px; }
}

@media (max-width: 1100px) {
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-col.footer-contact { grid-column: auto; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid var(--line); }
  .page-head .pd { max-width: 100%; }
  .cta-band p { max-width: 100%; }

  /* 首屏两栏（平板）：右栏主题图收窄一档。
   * ⚠️ 这里原来写的是 `aspect-ratio: var(--hero-slide-ar-mid)` —— 那套「按图片比例定高」
   *    已随形态变更（满图 → 左文右图）整体移除，那个变量现在根本不存在，
   *    留着就是一条永远失效的死声明（且会掩盖「变量已删」这个事实）。
   *    现在只需调列宽与间距。 */
  .hero-carousel .slide { gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .hero-carousel .slide .slide-title { font-size: 38px; }
  .hero-carousel .slide .sl-desc { max-width: 100%; }
  /* 控制条居中（控件在文档流中，不存在遮挡风险，
     因此箭头保留 —— 窄窗口未必是触屏设备，留着更好用） */
  .hero-carousel .car-controls { justify-content: center; }
}

/* 导航单独用更早的断点切到汉堡菜单。
 * 导航有 6 个链接 + 登录 + 预约按钮，实测宽度约 960px；
 * 若沿用 860px 才切菜单，在 900~1000px 这一段会挤到换行
 * （「首页」「产品」被折成上下两行，观感明显是坏的）。
 * 因此把导航相关规则单列在此，早于其它移动端布局规则生效。 */
@media (max-width: 1020px) {
  .nav-links {
    /* ⚠️ top 必须与 .nav-inner 的高度一致：导航高由 68px 改为 60px（对齐主站）后，
     *    这里若仍写 68px，移动端展开的菜单会与导航之间裂出一条约 8px 的缝，
     *    露出后面的页面内容。 */
    position: fixed; top: 60px; left: 0; right: 0; background: #fff; flex-direction: column;
    align-items: stretch; padding: 14px 20px 22px; gap: 2px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 12px; }
  .nav-cta { margin-left: auto; }
  .burger { display: block; order: 3; }
  .nav-inner { gap: 16px; }
}

@media (max-width: 860px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .kw-grid { grid-template-columns: 1fr; }
  /* 首屏轮播：移动端进一步收字号与留白 */
  .hero-lead { padding-top: calc(48px * var(--space-scale)); }
  .hero { padding-bottom: calc(30px * var(--space-scale)); }
  .hero-carousel .slide .slide-title { font-size: 31px; letter-spacing: -.6px; }
  .hero-carousel .slide .sl-desc { font-size: 16px; }
  /* 手机竖屏：首屏两栏改单列 —— 这个宽度下左右并排会把左栏文案挤成竖排
   * （实测 420px 视口下左栏只剩 0px 宽，文字完全看不见）。
   * 主题图在 DOM 里本就在文案之后，单列后自然落到下方。 */
  .hero-carousel .slide { grid-template-columns: 1fr; gap: 26px; }
  .section { padding: calc(60px * var(--space-scale)) 0; }
  h2.sec-title { font-size: 26px; }
  .page-head h1, h1.page-title { font-size: 29px; }
  .page-head { padding: calc(44px * var(--space-scale)) 0 calc(38px * var(--space-scale)); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-rev .split-text { order: 0; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-left { display: none; }
  .auth-right { padding: 44px 24px; }
  .form-card { padding: 24px 20px; }
  .field-row { grid-template-columns: 1fr; }
  /* ⚠️ 原来这里还有 `.cta-band { padding: 38px 28px; border-radius: 16px }`。
   *    CTA 改成通栏渐变带之后，内边距由外层 section（.section-tight）统一负责，
   *    .cta-band 自身是 padding 0 的纯内容块。 */
  .cta-band h2 { font-size: 23px; }
  .drawer-head, .drawer-body { padding-left: 22px; padding-right: 22px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  /* 小屏隐藏箭头，只留圆点：触屏设备以滑动为主，
     箭头既占宽度又不好点，收起后控制条更清爽。 */
  .car-arrow { display: none; }
  .art-date { width: 58px; padding-right: 14px; }
  .art-date .d { font-size: 21px; }
  .acct-head { flex-direction: column; align-items: flex-start; }
  .acct-head .a-act { margin-left: 0; width: 100%; }
  /* ⚠️ 这里原来还有 `:root { --pad: 20px }`，与 1280 断点的 32px 同因删除：
   *    全站 --pad 统一为 16px（主站实测值），不再按断点收放。 */
  /* ⚠️ 这条简写会重置 padding-top，而它出现在 860px 断点内、排在 .hero-lead
   * 规则（本断点更靠前）之后 —— 二者同为单类选择器、权重相同，后写的胜出，
   * 于是窄屏下 .hero-lead 的顶部留白被这里悄悄清成 0，
   * 首屏主标题直接贴到导航底边（实测 kicker.top === nav.bottom === 68）。
   * 修法：把简写拆成左右两向，只设水平内边距，不再碰纵向。 */
  .wrap, .wrap-narrow { padding-left: var(--pad); padding-right: var(--pad); }
  .nav-inner { padding: 0 var(--pad); }
}