/* =========================================================
   运达通卡航 官网 · 设计系统
   风格锚点：Apple HIG 式极简 —— 大留白、巨型字阶、克制作色
   品牌色取自 LOGO：橙 #f09030 + 深蓝 #181878
   ========================================================= */

:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: rgba(0, 0, 0, .09);
  --line-soft: rgba(0, 0, 0, .055);
  --brand: #f09030;
  --brand-deep: #181878;
  --brand-deep-soft: #efeffa;
  --dark: #161619;
  --dark-2: #202027;
  --radius: 22px;
  --radius-lg: 30px;
  --maxw: 1120px;
  --nav-h: 84px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sec: clamp(52px, 6vw, 92px);
  --font-cn: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-en: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

/* 顶部导航是 sticky 的，锚点跳转要留出它的高度 */
[id] { scroll-margin-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--wide { max-width: 1320px; }

/* ---------- 排版 ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.022em; line-height: 1.1; text-wrap: balance; }

.display {
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -.032em;
}
.h2 { font-size: clamp(28px, 4.1vw, 50px); line-height: 1.12; letter-spacing: -.026em; }
.h3 { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.25; }
.h4 { font-size: 19px; line-height: 1.35; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 16px;
}
.eyebrow--brand { color: var(--brand); }
.lead {
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.muted { color: var(--ink-2); }
.small { font-size: 14px; line-height: 1.6; color: var(--ink-3); }

/* ---------- 区块 ---------- */
.section { padding: var(--sec) 0; }
.section--tight { padding: clamp(40px, 4.6vw, 64px) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--dark); color: #f5f5f7; }
.section--dark .lead, .section--dark .muted { color: #a1a1a6; }
.section--dark .eyebrow { color: var(--brand); }
.section--dark .h2, .section--dark .h3, .section--dark .display { color: #fff; }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lead { margin-top: 16px; }

/* ---------- 导航（2026-10-14 重设计：加大加稳，橙色滑线交互） ---------- */
.nav {
  position: sticky; top: 0; z-index: 90;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.nav.is-scrolled { background: rgba(255, 255, 255, .95); box-shadow: 0 10px 30px -18px rgba(24, 24, 120, .18); }
.nav__inner {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 38px;
}
.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { height: 40px; width: auto; }
.nav__logo .logo-dark { display: none; }
/* 7 项后重测：间距 38→28，否则 1280/1366 窗口就折行或把 CTA 顶出屏幕（2026-10-23） */
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.0vw, 28px); margin-left: auto; }
.nav__links a {
  position: relative;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  padding: 6px 0; letter-spacing: .02em;
  white-space: nowrap;
  transition: color .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 3px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__links a:hover { color: var(--brand-deep); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { font-weight: 700; color: var(--brand-deep); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.lang {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--ink-2);
}
.lang a { padding: 2px 1px; }
.lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lang span { color: var(--line); }

.nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
  font-size: 14.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.nav__phone::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.nav__phone:hover { border-color: var(--brand); background: #fffaf3; }

.burger {
  display: none; width: 40px; height: 40px; margin-left: auto;
  background: none; border: 0; cursor: pointer; padding: 10px;
}
.burger i {
  display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger i + i { margin-top: 5px; }
body.menu-open .burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .burger i:nth-child(2) { opacity: 0; }
body.menu-open .burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 80;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 24px 24px 40px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
body.menu-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.drawer .lang { margin-top: 22px; font-size: 15px; }
.drawer .btn { margin-top: 18px; justify-content: center; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: .005em;
  cursor: pointer; white-space: nowrap;
  transition: transform .22s var(--ease), background .22s, color .22s, border-color .22s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--brand-deep); color: #fff; }
.btn--primary:hover { background: #10105e; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { border-color: rgba(0, 0, 0, .18); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--outline-light { border-color: rgba(255, 255, 255, .34); color: #fff; }
.btn--outline-light:hover { border-color: #fff; }
.btn--sm { height: 42px; padding: 0 22px; font-size: 14.5px; }
.btn--block { width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 16px; font-weight: 500; color: var(--brand-deep);
}
.link-more::after { content: "›"; font-size: 19px; line-height: 1; transform: translateY(-1px); transition: transform .25s var(--ease); }
.link-more:hover::after { transform: translate(4px, -1px); }

/* ---------- 首屏 ---------- */
.hero { padding: clamp(30px, 4.4vw, 58px) 0 0; text-align: center; }
/* 2026-10-11：为了让"一打开就看到一排车队"，首屏所有纵向间距整体收紧：
   顶部内边距 104->58，副标上距 22->18，按钮上距 34->28，图与按钮之间 64->34。
   数据条挪到图之后（见 build.py），并改成"承在图下方"的紧凑间距。 */
.hero__title { max-width: 15em; margin: 0 auto; }
.hero__sub { max-width: 34em; margin: 18px auto 0; }
.hero__actions { justify-content: center; margin-top: 26px; }
/* 首屏主视觉：九台自营卡车一字排开（PNG 已抠白底）。
   2026-10-11 改版：原先是灰底圆角框里放一张带白底的 JPG，白图在灰底上会露出
   一个明显的白色矩形块。现在改为「抠掉白底 + 通栏宽幅」——
   图直接浮在页面背景上，边缘与背景无缝相接，视觉上从标题一路流到车队。
   注意：既然是透明 PNG，这里不能再给容器背景色和圆角，否则又会出现色块边界。 */
.hero__media {
  margin-top: clamp(22px, 2.8vw, 38px);
  position: relative;
  /* 角标压在图片下沿之外一点，需要给容器留出这块高度，否则会盖住卡车格栅 */
  padding-bottom: 30px;
}
.hero__media picture { display: block; }
.hero__media img {
  /* 按图片自身比例铺满宽度，不做 cover 裁切 —— 首图必须完整可见 */
  width: 100%; height: auto; display: block;
}
/* 首图角标。改版前图是不透明的，角标压在图上很自然；
   现在图抠了白底、下半部分是空的，角标贴在左下角会悬在空白里显得孤立。
   解决：改为**置于图片上方居中对齐车队中线**，并换成浅色毛玻璃，
   跟页面的浅底融为一体 —— 也就是变成一句"图注"而不是"贴纸"。 */
.hero__tag {
  position: absolute;
  left: 50%; bottom: clamp(-4px, .4vw, 6px);
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .82);
  color: var(--ink-2);
  border: 1px solid rgba(0, 0, 0, .06);
  backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-radius: 999px; padding: 8px 17px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
/* 通栏变体：打破 wrap 的 1320px 限制，让车队横向铺满浏览器，
   但左右各留一点安全边距，避免贴边。 */
.hero__media--bleed {
  width: min(1680px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--brand-deep); background: var(--brand-deep-soft);
  border-radius: 999px; padding: 7px 15px; margin-bottom: 22px;
}
.hero__kicker b { color: var(--brand); font-weight: 700; }

/* 首屏品牌锁定区：「运达通卡航 | YDT EUTRUCK」
   目的：第一眼先看到品牌，而不是先看到一句通用的行业描述。 */
.hero__lockup { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 24px; flex-wrap: wrap; }
.hero__lockup img { height: 40px; width: auto; }
.hero__lockup-en {
  font-family: var(--font-en); font-size: 12.5px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3);
  padding-left: 15px; border-left: 1px solid var(--line);
}

/* 首屏数字条：把「11 天提取 / 2000+ 直客」这类硬指标提到按钮下方，先于整屏图出现 */
.hero__facts {
  list-style: none; margin: 22px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px;
}
.hero__facts li { display: flex; align-items: baseline; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.hero__facts b {
  font-family: var(--font-en); font-size: 21px; font-weight: 600;
  letter-spacing: -.03em; color: var(--ink); line-height: 1;
}
.hero__facts i { font-style: normal; color: var(--line); align-self: center; }

.hero__sub b { color: var(--ink); font-weight: 600; }

/* =========================================================
   首屏 · 全屏实景版（2026-10-12 启用，参照 transit.by 的观感）
   ---------------------------------------------------------
   为什么最后走了这条路：先试过"白底 + 车队图通栏"（.hero--grand），
   但那张 hero-trucks.png 是**抠白底的产品图**，没有场景、没有纵深，
   再大的字号也堆不出气势。换成真实场照铺满整屏后，观感是另一个量级。
   现在用 fleet-lineup.jpg（五台 SCANIA + 蓝天 + 广告牌，1800×1011）。

   ★ 三条要点，缺一条就会显廉价：
     1. 图 cover 铺满、高度 100svh（svh 比 vh 稳，手机地址栏伸缩时不跳）；
     2. 必须压渐变遮罩 —— 照片亮度不可控，不压暗一定出现"白字压白云"，
        读不清；而且底部数据条是压在车身（浅色）上的，底部渐变要够重；
     3. object-position 要往下压一点（center 58%）—— 天空占比太高会显得空，
        压下来让车占满画面下三分之二，才有"车队扑面而来"的感觉。
   ★ 手机（≤640px）由 <picture> 换成 ai-herophone-road.jpg（竖版 1080×1620，
     与桌面横图是同一次生成、同一条场景），21:9 的横图在竖屏上会被裁得只剩车头。
     （2026-10-13 更新：原 hero-mobile.jpg 已随换图作废，移入 _src/_trash_assets/。）
   ========================================================= */
.hero--full {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  text-align: left;
  padding: 0;
  overflow: hidden;
}
.hero--full__bg { position: absolute; inset: 0; z-index: 0; }
.hero--full__bg img {
  width: 100%; height: 100%;
  /* 52% 是试出来的：再往上（45%）天空太多显得空，再往下（62%）广告牌被切掉、
     车顶挤到画面边缘。52% 能同时留住广告牌和整排车头。 */
  object-fit: cover; object-position: center 52%;
  display: block;
}
/* 遮罩：纵向为主（底部数据条压在浅色车身上，必须压得够深），
   左上再补一道弱横向渐变，兜住 LOGO 那一角。 */
.hero--full__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.76) 14%,
      rgba(0,0,0,.46) 34%,
      rgba(0,0,0,.12) 58%,
      rgba(0,0,0,.22) 100%),
    linear-gradient(to right, rgba(0,0,0,.38) 0%, rgba(0,0,0,.08) 46%, rgba(0,0,0,0) 70%);
}
.hero--full__inner {
  position: relative; z-index: 1;
  width: min(1320px, calc(100vw - 96px));
  margin: 0 auto;
  padding-bottom: clamp(54px, 8.4vh, 104px);
  padding-top: 150px;
}
/* 全屏版文字全部转浅色 —— 底下是照片，深色字会糊。 */
/* ★ 首屏 LOGO 直接用 logo-white.png（橙箭头 + 白字），不要再加 filter。
   曾经用 filter:brightness(0) invert(1) 把 logo.png 整体反白 —— 结果橙色箭头
   也变成白色，整个 LOGO 纯白一片，品牌色全丢（2026-10-13 Zero 指出）。 */
.hero--full .hero__lockup { justify-content: flex-start; }
.hero--full .hero__lockup-en { color: rgba(255,255,255,.74); border-left-color: rgba(255,255,255,.34); }
.hero--full .hero__title {
  color: #fff; text-shadow: 0 2px 34px rgba(0,0,0,.48);
  max-width: 14em; font-size: clamp(44px, 5.6vw, 78px);
  letter-spacing: -.035em; line-height: 1.05;
}
.hero--full .hero__sub { color: rgba(255,255,255,.90); max-width: 36em; text-shadow: 0 1px 20px rgba(0,0,0,.48); }
.hero--full .hero__sub b { color: #fff; }
.hero--full .hero__kicker {
  background: rgba(255,255,255,.16); color: #fff;
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,.24);
}
.hero--full .hero__kicker b { color: #ffb765; }
.hero--full .hero__actions { justify-content: flex-start; }
.hero--full .btn--primary { background: #fff; color: var(--ink); }
.hero--full .btn--primary:hover { background: rgba(255,255,255,.86); color: var(--ink); }
.hero--full .btn--ghost { color: #fff; border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.07); }
.hero--full .btn--ghost:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.72); }
.hero--full .hero__facts {
  justify-content: flex-start; margin-top: 22px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); gap: 14px 42px;
}

/* ---------- APS 式焦点声明（2026-10-13 新增） ----------
   借鉴 aps-solver.com：把「路线 ⇆ + 时效」做成首屏最大的视觉焦点。
   字号刻意卡在 h1 之下、正文之上 —— 它是"第二眼"，不能压过主标题。 */
.hero__claim {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 30px;
  margin: clamp(26px, 3.2vw, 44px) 0 0;
  text-shadow: 0 2px 26px rgba(0,0,0,.52);
}
.hero__claim-route {
  font-size: clamp(21px, 2.5vw, 36px);
  font-weight: 600; color: #fff; letter-spacing: -.02em;
}
.hero__claim-route i { font-style: normal; color: #ffb765; margin: 0 .16em; }
.hero__claim-time { display: inline-flex; align-items: baseline; gap: 9px; }
.hero__claim-time b {
  font-family: var(--font-en);
  font-size: clamp(33px, 4.3vw, 60px);
  font-weight: 500; letter-spacing: -.045em; line-height: 1;
  color: #ffb765;                      /* 深底上品牌橙偏暗，用它在深底的提亮版 */
  font-variant-numeric: tabular-nums;
}
.hero__claim-time em {
  font-style: normal; font-weight: 500;
  font-size: clamp(15px, 1.5vw, 20px); color: rgba(255,255,255,.88);
}
@media (max-width: 640px) {
  .hero__claim { gap: 6px 18px; }
  .hero__claim-route { font-size: 20px; }
  .hero__claim-time b { font-size: 38px; }
}
.hero--full .hero__facts li { color: rgba(255,255,255,.78); }
.hero--full .hero__facts b { color: #fff; }
.hero--full .hero__facts i { color: rgba(255,255,255,.32); }

@media (max-width: 900px) {
  .hero--full { min-height: 94svh; }
  .hero--full__inner { width: calc(100vw - 40px); padding-bottom: 46px; padding-top: 116px; }
  .hero--full .hero__title { font-size: clamp(34px, 9.6vw, 54px); }
  .hero--full .hero__facts { margin-top: 26px; padding-top: 18px; gap: 10px 22px; }
}
@media (max-width: 640px) {
  /* 竖屏：横图会被裁成一条，改用 <picture> 的 mobile source（见 build.py） */
  .hero--full__bg picture img { object-position: center 42%; }
}

/* ---------- 数字带 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .12); border-radius: var(--radius); overflow: hidden; }
.stats__item { background: var(--dark); padding: 34px 26px 30px; }
.stats__n {
  font-family: var(--font-en);
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 600; letter-spacing: -.04em; line-height: 1;
  color: #fff;
}
.stats__n em { font-style: normal; font-size: .46em; font-weight: 500; color: var(--brand); margin-left: 3px; letter-spacing: 0; }
.stats__l { margin-top: 14px; font-size: 14px; color: #a1a1a6; letter-spacing: .01em; }

/* ---------- 数字墙（体量墙）2026-10-13 ----------
   首页首屏正下方的整屏数字。借鉴 Transit 官网：把"体量"做大做满，
   用大字号的数字本身当视觉主体，不靠形容词。三条设计要点：
   ① 深底（--dark）—— 白底上大数字是"表格"，深底上大数字才是"气势"；
   ② 细字重（400~500）—— 大字号配粗字重会变成"促销条"，细字重才高级；
   ③ 数字与单位分离 —— 数字用英文衬线感的字距，单位缩小并染品牌橙。 */
.band--full {
  background: var(--dark);
  color: #f5f5f7;
  /* 上沿给首屏留一道极细的分隔光，避免两块深色糊在一起 */
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.wall__eyebrow {
  margin: 0 0 clamp(20px, 2.6vw, 32px); text-align: center;
  font-size: 13px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
}
/* 数字墙 2026-10-14 重排：6 格一行紧凑条（原 3×2 字距太散）。
   一行六格 + 细分隔线，数字缩一档、上下间距收紧，读起来是一面"数据条"。 */
.wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.wall__i { text-align: center; padding: 0 clamp(8px, 1vw, 16px); border-left: 1px solid rgba(255,255,255,.10); }
.wall__i:first-child { border-left: none; }

/* 数字上方的语境标签（2026-10-13 新增，借鉴 KREISS 的数字墙）。
   上面一道极细的短线做"表格式"的锚点，六个数字排在一起时形成节奏。 */
.wall__k {
  display: block;
  margin-bottom: clamp(8px, 1vw, 12px);
  font-size: 12px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
}
.wall__k::before {
  content: ""; display: block;
  width: 26px; height: 1.5px; margin: 0 auto 10px;
  background: rgba(255, 255, 255, .22); border-radius: 2px;
}
.wall__n {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 500;              /* 细字重 —— 关键 */
  letter-spacing: -.045em; line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.wall__n em {
  font-style: normal; font-size: .40em; font-weight: 500;
  color: var(--brand); margin-left: 4px; letter-spacing: 0;
}
.wall__l {
  display: block; margin-top: 8px;
  font-size: 13.5px; color: #a1a1a6; letter-spacing: .01em;
}
@media (max-width: 960px) {
  /* 平板：3 列 2 行，分隔线在每行首格去掉 */
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 12px; }
  .wall__i:nth-child(4) { border-left: none; }
}
@media (max-width: 720px) {
  /* 手机端改两列三行 */
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; }
  .wall__i:nth-child(2n+1) { border-left: none; }
  .wall__n { font-size: clamp(44px, 11vw, 56px); }
}

/* 数字墙底部的实景横带（2026-10-14 换图：hero-trucks-s.png → ai-x-convoy.jpg）。
   素材从透明底抠图换成实拍「三车编队雨路」，改成全宽横带：
   21:8 裁切 + 圆角，压在深色数字墙下面收束，不再负边距沉底。 */
.wallfleet {
  margin-top: clamp(20px, 2.6vw, 36px);
  padding: 0;
}
.wallfleet img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 2.45; object-fit: cover; object-position: center 68%;
  border-radius: var(--radius);
}

/* ---------- 全宽实景图带 2026-10-13 ----------
   整站原来全是 1320px 窄栏，没有一处全宽大图 —— 视觉不透气。
   这里打破窄栏，用宽幅实景照铺满视口宽度。
   要点：容器设 100% 宽（不受 .wrap 限制），高度用 aspect-ratio 撑开
   （不用固定 px，保证不同屏宽下比例一致，且图片未加载时不塌陷）。 */
.bandimg {
  position: relative;
  width: 100%;
  aspect-ratio: 2.84 / 1;
  min-height: 320px;
  max-height: 620px;
  overflow: hidden;
  background: var(--dark);
}
.bandimg__bg { position: absolute; inset: 0; }
.bandimg__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
}
/* 左侧渐变压暗，保证白字读得出；右侧基本不压，保留画面亮部 */
.bandimg__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .46) 38%,
    rgba(0, 0, 0, .14) 66%, rgba(0, 0, 0, .02) 100%);
}
.bandimg__inner {
  position: relative; z-index: 1;
  height: 100%;
  width: min(1320px, calc(100vw - 96px));
  margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(32px, 5vw, 68px);
}
.bandimg__k {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brand);
}
.bandimg__t {
  margin: 0; max-width: 20em;
  font-size: clamp(23px, 3vw, 40px); font-weight: 600;
  letter-spacing: -.028em; line-height: 1.22; color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .4);
}
@media (max-width: 640px) {
  /* 手机端宽幅图带会变成一条极扁的条 —— 改成 4:3 的近似方形，
     并把文字挪到画面下缘，读起来才不费劲。 */
  .bandimg { aspect-ratio: 4 / 3.4; max-height: none; }
  .bandimg__bg img { object-position: center 50%; }
  .bandimg__bg::after {
    background: linear-gradient(to top,
      rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .40) 46%, rgba(0, 0, 0, .12) 100%);
  }
  .bandimg__inner { width: calc(100vw - 44px); }
}

/* ---------- 卡片 / 网格 ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  border: 1px solid var(--line-soft);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .22); }
.card__t { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.card__d { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.card__n {
  font-family: var(--font-en); font-size: 15px; font-weight: 600;
  color: var(--brand); letter-spacing: .06em;
}

/* 线路卡 2026-10-13 改为「图文卡」：
   原来纯排版（无图），四张卡并排像一张表格。现在顶部加实景图头，
   图占卡片约 40% 高度 —— 这是国际物流站的通行做法，也让首屏以下的
   页面密度降下来、透气。
   ★ padding 改为 0，图片要贴到卡片边缘；内边距移到内容区。 */
.line-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 0; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.line-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -26px rgba(24, 24, 120, .3); border-color: transparent; }
/* 顶部图头：固定 16:10 比例，图片 cover 裁切，加载前用浅灰占位不塌陷 */
.line-card__img { position: relative; aspect-ratio: 16 / 10; background: var(--bg-alt); overflow: hidden; }
.line-card__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  transition: transform .7s var(--ease);
}
.line-card:hover .line-card__img img { transform: scale(1.045); }
/* 图片下沿压一道极淡的渐变，让图和文字区衔接不生硬 */
.line-card__img::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(to top, rgba(255, 255, 255, .16), transparent);
}
.line-card__b { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.line-card__k { font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--brand); }
.line-card__t { margin-top: 12px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.line-card__d { margin-top: 10px; font-size: 15px; line-height: 1.62; color: var(--ink-2); min-height: 4.9em; }
.line-card__m { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px 10px; border-top: 1px solid var(--line-soft); }
.line-card__m dt { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.line-card__m dd { margin: 3px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* 线路示意 */
.route { margin-top: 26px; }
.route__track { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
.route__track i {
  position: absolute; left: 0; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
}
.route__pts { display: flex; justify-content: space-between; margin-top: -5px; }
.route__pt { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 33.33%; }
.route__pt:first-child { align-items: flex-start; }
.route__pt:last-child { align-items: flex-end; }
.route__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-deep); box-shadow: 0 0 0 4px #fff; }
.route__pt:last-child .route__dot { background: var(--brand); }
.route__lb { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; }
.section--dark .route__track { background: rgba(255, 255, 255, .16); }
.section--dark .route__dot { box-shadow: 0 0 0 4px var(--dark); }
.section--dark .route__lb { color: #8e8e93; }

/* 时效分解时间线 */
.tl {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(114px, 1fr);
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.tl__s { position: relative; padding: 32px 13px 6px 0; }
.tl__s::before {
  content: ""; position: absolute; left: 0; right: 0; top: 14px;
  height: 2px; background: var(--line);
}
.tl__s:last-child::before { background: linear-gradient(90deg, var(--line), transparent 94%); }
.tl__dot {
  position: absolute; left: 0; top: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand-deep);
  box-shadow: 0 0 0 4px var(--tl-ring, #fff);
}
.tl__s:last-child .tl__dot { background: var(--brand); }
.tl__t { font-size: 15px; font-weight: 600; line-height: 1.42; letter-spacing: -.012em; }
.tl__d { margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.section--alt { --tl-ring: var(--bg-alt); }
.section--dark { --tl-ring: var(--dark); }
.section--dark .tl__s::before { background: rgba(255, 255, 255, .16); }
.section--dark .tl__s:last-child::before { background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent 94%); }
.section--dark .tl__t { color: #fff; }
.section--dark .tl__d { color: #8e8e93; }

/* 能力标签 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: 13.5px; font-weight: 500; letter-spacing: -.005em;
  padding: 8px 15px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
}
.section--dark .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #f5f5f7; }

/* ---------- 分栏 ---------- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
.split--media-right { grid-template-columns: 1.05fr .95fr; }
/* 零-3 时效实绩（2026-10-14）：配图放大更有气势 —— 媒体栏 95fr→128fr，
   并锁 16:10 裁切，图不因文字高度被拉变形。只作用于首页 #perf，不影响其他页。 */
#perf .split--media-right { grid-template-columns: .72fr 1.28fr; }
#perf .split__media img { aspect-ratio: 16 / 10; object-fit: cover; }
.split__media { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.split__media img { width: 100%; height: auto; }

/* ---------- 双图叠放 2026-10-13 ----------
   主图铺满容器（16:10），小图（PiP）压在主图左下角外缘。
   用途：一块区域同时讲两件事时（如"车队质感"+"上门提货场景"），
   比单图信息量大，又比并排两张省一半宽度。
   ★ 外层不能 overflow:hidden，否则小图探出的部分被切掉。 */
/* ---------- 双图叠放（大图 + 左下角小图）----------
   ★★ 2026-10-13 修一个一直存在的 bug：
      .split__media img { width:100%; height:auto } 的特异性是 (0,1,1)，
      而 .duoimg__pip 只有 (0,1,0) —— 前者压过后者，小图的 width:46% 被吃掉，
      变成整栏宽、又因为 position:absolute 直接盖在主图上。
      结果就是"双图叠放"实际只看得见一张（小图），主图被完全遮住。
      修法：选择器提到 (0,2,0) —— .duoimg .duoimg__pip，两层类，稳过。
   ★ 另一个坑：.split__media 带 overflow:hidden，小图 left:-5%/bottom:-7%
     本来就超出父框，会被裁掉。所以引用方要加 .split__media--freespace
     把裁剪和底色摘掉（见 HTML 里的用法）。 */
.duoimg { position: relative; border-radius: var(--radius); }
.duoimg .duoimg__main {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); object-fit: cover;
}
.duoimg .duoimg__pip {
  position: absolute; left: -5%; bottom: -7%;
  width: 46%; height: auto;
  border-radius: 18px;
  border: 5px solid var(--dark);      /* 用区块底色描边，把小图从主图上"抠"出来 */
  box-shadow: 0 24px 52px -18px rgba(0, 0, 0, .72);
}
/* 小图描边原先是深色（配深底区块）。区块改成浅灰后描边也要跟着换成白，
   否则深色描边会在浅底上变成一圈突兀的黑框。 */
.section--alt .duoimg .duoimg__pip,
.section--tight:not(.section--dark) .duoimg .duoimg__pip,
.section:not(.section--dark) .duoimg .duoimg__pip { border-color: #fff; }

/* 放 duoimg 的容器要允许溢出，否则左下角那张小图被 overflow:hidden 切掉 */
.split__media--freespace { overflow: visible; background: none; border-radius: 0; }
@media (max-width: 860px) {
  /* 窄屏小图探出会顶到文字，改成常规叠角并缩小 */
  .duoimg__pip { left: 8px; bottom: 8px; width: 42%; border-width: 4px; }
}
.split__body p { margin: 16px 0 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.72; }
.split__body .btn-row { margin-top: 28px; }
.split__body .chips { margin-top: 26px; }

/* ---------- 通栏图 ---------- */
.band { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--dark); }
.band img { width: 100%; height: auto; }
.band__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px 34px 26px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  color: #fff;
}
.band__cap .h3 { color: #fff; }
.band__cap p { margin: 8px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .82); max-width: 46em; }
/* GPS 图带 2026-10-14 全幅出血：突破 wrap 窄栏铺满视口宽，
   21:9 裁切拉高图面 —— 原来框在窄栏里 2560×900 的宽幅图只剩一条细带。 */
.band--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
}
.band--bleed img { width: 100%; aspect-ratio: 2560 / 900; object-fit: cover; object-position: center 50%; display: block; }
.band--bleed .band__cap { padding: 64px clamp(20px, 4vw, 56px) 28px; }

/* 真实 GPS 跟踪卡（2026-10-14）：叠在 #gpsband 图右侧，
   数据取自 927829 运单真实截图 —— 凸显轨迹真实可查、13.7 天全程、节点透明。 */
.gpstrack {
  position: absolute; right: clamp(20px, 4vw, 56px); top: 50%;
  transform: translateY(-52%);
  width: min(400px, 40%);
  background: rgba(10, 14, 26, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 16px 18px 12px;
  color: #fff;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.gpstrack__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.gpstrack__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-en); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: #35d07f; }
.gpstrack__live i { width: 8px; height: 8px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 0 rgba(53, 208, 127, .55); animation: gpsPulse 1.8s infinite; }
@keyframes gpsPulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .55); }
  70% { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}
@media (prefers-reduced-motion: reduce) { .gpstrack__live i { animation: none; } }
.gpstrack__id { font-family: var(--font-en); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .85); letter-spacing: .04em; }
.gpstrack__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 12px 0 10px; }
.gpstrack__days b { display: block; font-family: var(--font-en); font-size: clamp(38px, 3.2vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--brand); }
.gpstrack__days span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.gpstrack__nodes { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 9px; }
.gpstrack__nodes li { position: relative; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.gpstrack__dot {
  position: absolute; left: -18.5px; top: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}
.gpstrack__nodes li:first-child .gpstrack__dot { background: var(--brand); }
.gpstrack__nodes li.is-now .gpstrack__dot { background: #35d07f; box-shadow: 0 0 0 0 rgba(53, 208, 127, .5); animation: gpsPulse 1.8s infinite; }
.gpstrack__nodes em { display: block; font-style: normal; font-family: var(--font-en); font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.gpstrack__nodes li.is-now div { color: #fff; font-weight: 600; }
.gpstrack__foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 10.5px; color: rgba(255, 255, 255, .5); letter-spacing: .02em; }
/* 桌面：说明文字给右侧卡片让位 */
.band--bleed .band__cap { max-width: 58%; }
/* 移动端：卡片改为图下全宽静态卡 */
@media (max-width: 820px) {
  .gpstrack {
    position: static; transform: none; width: 100%;
    margin: 0; border-radius: 0; border-left: none; border-right: none; border-bottom: none;
  }
  .gpstrack__foot { flex-direction: column; gap: 3px; }
  .band--bleed .band__cap { max-width: none; }
  .band--bleed img { aspect-ratio: 16 / 9; }
}
/* 数字墙横带用 2.3:1 的预裁版（ai-x-convoy-wide），CSS 比例与图一致 = 零裁切 */
.wallfleet img { aspect-ratio: 2.45; object-position: center 68%; }

/* ---------- 资讯 ---------- */
.news-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.news-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .26); }
.news-card__img { aspect-ratio: 900 / 562; overflow: hidden; background: var(--bg-alt); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card:hover .news-card__img img { transform: scale(1.035); }
.news-card__b { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.news-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--brand-deep-soft); color: var(--brand-deep);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.tag--hot { background: #fdece0; color: #b85c00; }
/* 阅读量：贴在日期后面，弱化处理 —— 是"气氛"不是"卖点"。
   用 tabular-nums 让数字等宽，卡片之间竖排才对得齐。 */
.views {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.views svg { width: 14px; height: 14px; fill: currentColor; opacity: .75; flex: none; }

/* ---------- 资讯列表页：横向卡片（左小图 + 右文字） ----------
   2026-10-11：列表页原先是 3 列大卡片，配图占掉每张卡一半以上的面积，
   一屏只看得见 3 条，内容反而被图压住了。客户的要求很明确 ——
   「重点是内容而不是图片配图」。所以列表页单独换成横向卡片：
     · 缩略图从「占满卡片宽度」缩到固定 188px，只作识别用
     · 标题与摘要在右侧成为主体，摘要截断到 2 行，行高收紧
     · 一屏可见的条目数提升一倍以上
   ★ 只改列表页（.news-list / .news-card--row）。
     首页那三张大卡不动 —— 首页是门面，需要视觉冲击；列表页是索引，需要信息密度。 */
.news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.news-card--row { flex-direction: row; align-items: stretch; border-radius: 16px; }
.news-card--row:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(0, 0, 0, .24); }
.news-card--row .news-card__img {
  flex: none; width: 200px;
  /* 固定 16:10（≈原图 900:562）并垂直居中 —— 这样缩略图不被裁切，
     比让它拉伸填满（原图 1.6:1 会被压成 1.4:1）看起来正常得多。 */
  aspect-ratio: 16 / 10;
  align-self: center;
  margin-left: 18px;
  border-radius: 12px;
}
.news-card--row .news-card__b { padding: 15px 20px 17px; justify-content: center; }
.news-card--row .news-card__t { margin-top: 9px; font-size: 16px; line-height: 1.42; }
.news-card--row .news-card__x {
  margin-top: 7px; font-size: 13px; line-height: 1.58;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 1080px) { .news-list { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 560px) {
  /* 小屏只留标题：密度优先，摘要整段让位 */
  .news-card--row .news-card__img { width: 128px; margin-left: 14px; border-radius: 10px; }
  .news-card--row .news-card__b { padding: 12px 14px 13px; }
  .news-card--row .news-card__t { font-size: 14.5px; margin-top: 7px; }
  .news-card--row .news-card__x { display: none; }
}

/* ---- 资讯页顶部统计条（十年持续更新的量化）---- */
.news-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: 34px;
  background: var(--line); border-radius: var(--radius); overflow: hidden;
}
.news-stats__i {
  background: var(--bg); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.news-stats__i b {
  font-size: 27px; font-weight: 600; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.news-stats__i span { font-size: 13px; color: var(--ink-3); }

/* ---- 资讯页按年份分段 ---- */
.news-feed { display: block; }
.news-year {
  display: flex; align-items: baseline; gap: 16px;
  margin: clamp(38px, 4.6vw, 62px) 0 clamp(20px, 2.4vw, 30px);
}
.news-year:first-child { margin-top: 8px; }
/* 年份分组标题：标签是 h2 为了语义层级，视觉全靠这些显式声明保持原样，
   否则会继承全局 h2 的上下外边距，把年份之间的间距撑得很怪。 */
.news-year__y {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 600;
  letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
  margin: 0;
}
.news-year__meta {
  font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; flex: none;
}
.news-year__rule {
  flex: 1; height: 1px; background: var(--line);
  transform: translateY(-4px);
}
.news-year__grid { margin-bottom: 4px; }
.news-card__t { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.42; letter-spacing: -.012em; }
.news-card__x { margin-top: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.62; }

/* 文章页 */
.article { max-width: 720px; margin: 0 auto; }
.article__head { margin-bottom: 38px; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 20px; }
.article__title { font-size: clamp(27px, 3.8vw, 44px); line-height: 1.2; letter-spacing: -.028em; }
.article__cover { border-radius: var(--radius); overflow: hidden; margin: 34px 0; }
.prose { font-size: 17px; line-height: 1.82; color: #2c2c2e; }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: 25px; margin-top: 46px; letter-spacing: -.02em; }
.prose h3 { font-size: 20px; margin-top: 34px; }
.prose img { border-radius: 14px; margin: 30px auto; max-width: 100%; height: auto; }
/* 正文插图带图注：图与图注作为一个整体居中，图注弱化处理 */
.prose figure { margin: 34px 0; }
.prose figure img { margin: 0 auto; display: block; }
.prose figcaption {
  margin-top: 12px; text-align: center;
  font-size: 13.5px; color: var(--ink-3); line-height: 1.6;
}

/* ---------- 仓库实拍视频（关于页「公司实景」区块） ----------
   12 秒静音循环，1080p / 约 6MB。样式上跟 .gal / .evi 一套语汇：
   大圆角 + 浅边框 + 图注在下方左对齐，避免"视频就是特殊的一个"。

   结构是 frame(相对定位) > poster(绝对铺满) + video(绝对铺满)。
   poster 在视频真正播起来之前一直盖在上面 —— 这样即便浏览器不渲染 video 的
   poster（省电模式 / 某些国产壳），访客看到的也是一张真实照片，不会是黑框。 */
.hero-video {
  margin: clamp(28px, 3.4vw, 48px) 0 0;
}
.hero-video__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  /* 用 aspect-ratio 先把高度撑开，避免 video 未加载时容器塌陷导致页面跳动。
     素材是 1920x1080，但取景偏宽，这里按 16:9 显示正好。 */
  aspect-ratio: 16 / 9;
}
.hero-video__frame > img,
.hero-video__frame > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
.hero-video__poster {
  z-index: 1;
  transition: opacity .55s ease;
}
/* 视频开始播放后，JS 给 img 加 .is-on 把它淡出，露出下面的视频 */
.hero-video__poster.is-on { opacity: 0; pointer-events: none; }
.hero-video figcaption {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: 14px; color: var(--ink-3); line-height: 1.65;
}
.hero-video figcaption b {
  font-size: 14.5px; font-weight: 600; color: var(--ink); flex: none;
}
.hero-video figcaption span { flex: 1 1 22em; min-width: 0; }

/* ---------- 欧亚路网大屏（2026-10-13 新增，借鉴 transit.by） ----------
   这是全站唯一的「深宝石蓝」区块 —— 视觉锚点。
   深蓝本身是品牌色（LOGO 的深蓝 24,24,120），不是外来的配色，所以不破坏 Apple 式调性。
   地图是真矢量 SVG（1600×620），任意尺寸清晰、31KB，比任何位图都划算。 */
.mapband {
  position: relative;
  background: linear-gradient(180deg, #0a1f47 0%, #061532 100%);
  color: #f5f5f7;
  overflow: hidden;
}
.mapband .section-head { max-width: 780px; }
.mapband .eyebrow { color: #f0a04a; }
.mapband .lead { color: rgba(245,245,247,.66); }
.mapband__stage {
  /* 全宽出血：地图自带宽深色渐变背景，跟区块底色同系，
     所以直接铺满不会出现"贴了一张图"的方块感。 */
  margin: clamp(30px, 4vw, 56px) 0 0;
  padding: 0 clamp(0px, 2vw, 28px);
}
.mapband__stage img {
  width: 100%; height: auto; display: block;
  border-radius: clamp(0px, 1.6vw, 20px);
}
.mapband__nums {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  margin-top: clamp(34px, 4.4vw, 62px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.mapband__nums > div { display: flex; flex-direction: column; gap: 6px; }
.mapband__nums b {
  font-family: var(--font-en);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500; letter-spacing: -.04em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.mapband__nums span { font-size: 13.5px; line-height: 1.55; color: rgba(245,245,247,.60); }
@media (max-width: 720px) {
  .mapband__nums { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
}

/* ---------- SVG 线稿图标（2026-10-13 新增，借鉴 JENTY） ----------
   全站共用一份 <symbol> sprite，靠 currentColor 跟随文字色。
   ★ 不用 emoji 的原因：同一套 emoji 在 Windows / macOS / 安卓上长得完全不一样，
     企业官网上极容易翻车；线稿图标则在哪都是一个样子。 */
.ic {
  width: 1.15em; height: 1.15em;
  flex: none;
  vertical-align: -.16em;
  color: currentColor;
}
/* 带图标的条目：图标 + 文案两列 */
.ic-li {
  display: flex; align-items: flex-start; gap: 12px;
}
.ic-li > .ic { margin-top: .18em; color: var(--brand); }
.section--dark .ic-li > .ic { color: #ffb765; }
/* 原来的圆点列表换成线稿图标（只改了加 --ic 的那几处，其余列表仍是圆点） */
.bullets--ic li { display: flex; align-items: flex-start; gap: 12px; }
.bullets--ic li > .ic { margin-top: .2em; font-size: 1.3em; color: var(--brand); }
.section--dark .bullets--ic li > .ic { color: #ffb765; }

/* 五环节流程里的图标（2026-10-13 加）——图标在上、序号退到右上角当水印 */
.flow--ic .flow__s { position: relative; }
.flow__ico { display: block; margin-bottom: 14px; color: var(--brand); }
.flow__ico .ic { width: 28px; height: 28px; }
.flow--ic .flow__n { position: absolute; top: 0; right: 0; margin: 0; opacity: .30; }
.section--dark .flow__ico { color: #ffb765; }

/* 图标卡（JENTY 式：细线图标 + 标题 + 一句话） */
.iccard { display: flex; flex-direction: column; gap: 10px; }
.iccard > .ic { width: 26px; height: 26px; color: var(--brand); margin-bottom: 4px; }
.section--dark .iccard > .ic { color: #ffb765; }

/* ---------- 车队实拍墙（R-GROUP 式） ---------- */
.fleetwall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.fleetwall figure { margin: 0; position: relative; overflow: hidden;
                    border-radius: var(--radius); background: var(--bg-alt); }
.fleetwall img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .8s var(--ease);
}
.fleetwall figure:hover img { transform: scale(1.05); }
.fleetwall figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 18px 16px;
  font-size: 13px; line-height: 1.5; color: #f5f5f7;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.fleetwall figcaption b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
@media (max-width: 860px) { .fleetwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fleetwall { grid-template-columns: minmax(0,1fr); } }

/* ---------- 装备与场地清单 2026-10-13 ----------
   借鉴 JENTY 的 "OUR FLEET OF VEHICLES"：线稿车型图 + 车型名 + 参数，
   是"信息型"展示，不是照片堆。四张线稿是自绘的（见 build.py 的 EQUIP_ART）。
   线稿默认中性灰、悬停转品牌橙 —— 一格一格滑过去时颜色依次亮起，
   比四格一直亮着更耐看，也把视线引到正在读的那一格。
   卡片白底：本区块铺在 section--alt 的浅灰上，白卡才有层级。 */
.equip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
}
.equip__c {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.3vw, 30px) clamp(18px, 1.9vw, 26px) clamp(20px, 2vw, 26px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.equip__c:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .09);
}
.equip__art {
  display: flex; align-items: center; justify-content: center;
  /* 高度要 ≥ 线稿的渲染高度（186px 宽 / 240:104 ≈ 81px），
     否则 flex 会把图挤出容器、上下边距被吃掉。 */
  height: 84px; margin-bottom: 22px;
  color: #b0b0b6;
  transition: color .5s var(--ease);
}
.equip__art svg { width: 100%; max-width: 186px; height: auto; display: block; }
.equip__c:hover .equip__art { color: var(--brand); }
.equip__t { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.equip__d { margin: 0; font-size: 14px; line-height: 1.74; color: var(--ink-3); }
.equip__spec {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 7px;
}
.equip__spec li {
  font-size: 12.5px; line-height: 1; padding: 7px 11px;
  border-radius: 999px; background: #f2f2f5; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 1040px) { .equip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .equip { grid-template-columns: minmax(0,1fr); } }

/* ---------- 实景墙的分类筛选 2026-10-13 ----------
   借鉴 APS 的 Media 页：照片不堆成一面墙，上面先给一排分类标签
   （Vehicles / Transportation / Office&Service Station / Life at APS），
   想看哪类点哪类。我们原来的实景画廊是 8 张一长条，往下滚到底很累。
   ★ 纯 CSS 实现，不引 JS：一组隐藏的 radio + 兄弟选择器。
     隐藏用 opacity:0 + 1px 而不是 display:none ——
     display:none 的 radio 键盘不可达，方向键切换标签就废了。
   ★ 默认勾「全部」，所以**即便用户完全不用这个功能，内容也一张不少**，
     标签纯粹是多给一条导航路径，不做减法。 */
.galfilter { position: relative; }
.galfilter > input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0;
}
.galfilter__tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.galfilter__tabs label {
  display: inline-block; padding: 10px 18px;
  font-size: 13.5px; line-height: 1; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); cursor: pointer; user-select: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.galfilter__tabs label:hover { border-color: rgba(0, 0, 0, .26); color: var(--ink); }
.galfilter > input:focus-visible + .galfilter__tabs label { outline: 2px solid var(--brand); outline-offset: 3px; }

/* 选中态 */
#gf-all:checked      ~ .galfilter__tabs label[for="gf-all"],
#gf-fleet:checked    ~ .galfilter__tabs label[for="gf-fleet"],
#gf-warehouse:checked ~ .galfilter__tabs label[for="gf-warehouse"],
#gf-branch:checked   ~ .galfilter__tabs label[for="gf-branch"],
#gf-yard:checked     ~ .galfilter__tabs label[for="gf-yard"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* 过滤：不匹配的整格收掉。用 display:none 而不是 visibility —— 
   后者会留出空位，网格上出现一排排空洞。 */
#gf-fleet:checked     ~ .gallery figure:not([data-cat="fleet"]),
#gf-warehouse:checked ~ .gallery figure:not([data-cat="warehouse"]),
#gf-branch:checked    ~ .gallery figure:not([data-cat="branch"]),
#gf-yard:checked      ~ .gallery figure:not([data-cat="yard"]) { display: none; }

/* 实景墙用三列：照片多、格子小，比两列更耐看 */
.galfilter .gallery { grid-template-columns: repeat(3, 1fr); }
/* ★ 三列时必须锁死图片比例。十二张素材的长宽比各不相同（有 3:1 的宽幅、
   有 4:3 的竖构图），原来 .gal img 是 height:auto，三列下每一行的高度都
   参差不齐、说明文字对不齐，整块看起来像没排版。
   统一裁成 3:2，行与行才对得齐。 */
.galfilter .gallery .gal img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 980px) { .galfilter .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .galfilter .gallery { grid-template-columns: minmax(0,1fr); } }

/* ---------- 线路详情页：这条线上的实际画面 ---------- */
.line-pics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
}
.line-pics__i { margin: 0; }
.line-pics__i img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius); background: var(--bg-alt);
}
.line-pics__i figcaption {
  margin-top: 12px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
}
@media (max-width: 700px) {
  .line-pics { grid-template-columns: minmax(0,1fr); gap: 20px; }
}
/* 3 列变体：用于一屏放三张的场合 */
.line-pics--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .line-pics--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .line-pics--3 { grid-template-columns: minmax(0,1fr); }
}

/* ---------- 运营实景视频墙（2026-10-13 新增） ----------
   原来是单条 warehouse-loop 竖排，改成 2x2 网格，一次给 4 段实拍。
   复用 .hero-video__frame 的结构（poster 在下、video 在上、playing 后淡出），
   所以 site.js 那段 IntersectionObserver 逻辑一行都不用改，直接覆盖到新块。
   ★ 为什么用 grid 而不是 flex：四帧 16:9 要严格等高，grid 天生对齐。 */
.vgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(30px, 3.6vw, 52px);
}
.vgrid__item { margin: 0; }                 /* 覆盖 figure 默认 margin */
.vgrid__item .hero-video__frame {
  /* 网格里容器已经被列宽定住了，不再用 16:9 撑高（否则窄列会被拉很高） */
  aspect-ratio: 16 / 10;
}
.vgrid__cap {
  margin-top: 12px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
}
.vgrid__cap b {
  display: block;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 3px;
}
@media (max-width: 760px) {
  .vgrid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .vgrid__item .hero-video__frame { aspect-ratio: 16 / 10; }
}
/* section--dark 里视频墙的配色（深底上文字要转浅） */
.section--dark .vgrid__cap { color: rgba(245,245,247,.62); }
.section--dark .vgrid__cap b { color: #f5f5f7; }
.section--dark .hero-video__frame { background: #1c1c1e; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 9px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote {
  margin: 30px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand); color: var(--ink-2); font-size: 16.5px;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 28px 0; }
.prose th, .prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 600; background: var(--bg-alt); }
.prose a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.note {
  background: var(--bg-alt); border-radius: 16px; padding: 20px 22px;
  font-size: 15px; line-height: 1.7; color: var(--ink-2);
}
.note b { color: var(--ink); }

/* 联系页：货物追踪 / 常用查询 / 客户端系统 —— 三个功能框横向三等分。
   原来它们竖着堆在右侧栏里，把右栏拉得比左边表单高一大截，
   窄栏里 7 条外链还换行换得很碎。 */
.quick3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quick3 .note { display: flex; flex-direction: column; }
.quick3 .note .btn-row { margin-top: auto; padding-top: 20px; }
.note__t { font-size: 16.5px; font-weight: 600; letter-spacing: -.014em; color: var(--ink); }
.note__d { margin: 11px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.linklist { list-style: none; margin: 13px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7px 14px; }
.linklist a { font-size: 14px; color: var(--brand-deep); }
.linklist a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 网点 ---------- */
/* 多列瀑布流：一个地区一张卡，卡内纵向列网点。
   不要用「固定列数网格 + 1px gap + 容器灰底」那种画分隔线的写法 ——
   网点数量不满一行时会把容器灰底露出来，看着就是一片空灰格子。 */
.net-grid { columns: 3; column-gap: 20px; }
.net-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 26px 6px;
  transition: box-shadow .4s var(--ease), border-color .4s;
}
.net-card:hover { box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .28); border-color: transparent; }
.net-card__h { display: flex; align-items: baseline; gap: 10px; }
.net-card__cn { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.net-card__en {
  font-family: var(--font-en); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.net-card__n {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-en); font-size: 12px; font-weight: 600;
  color: var(--ink-3); background: var(--bg-alt);
  border-radius: 999px; padding: 3px 10px;
}
.net-card__note {
  margin: 12px 0 0; padding-bottom: 16px;
  font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft);
}
.node { padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.node:last-child { border-bottom: 0; }
.node__h { display: flex; align-items: center; gap: 9px; }
.node__t { font-size: 16px; font-weight: 600; letter-spacing: -.012em; }
.node__k {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1.6;
  letter-spacing: .02em; padding: 1px 8px; border-radius: 999px;
  background: var(--brand-deep-soft); color: var(--brand-deep);
}
.node__a { margin: 6px 0 0; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }

/* 实拍图组：图 + 图注（图注在图下方，不压在图上） */
.gallery { gap: 24px; }
.gal { margin: 0; }
.gal img { width: 100%; height: auto; border-radius: var(--radius); background: var(--bg-alt); }
.gal figcaption { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.gal figcaption b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }

/* ---------- 联系 / 表单 ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg-alt); border: 1px solid transparent;
  border-radius: 13px; padding: 13px 15px;
  transition: border-color .2s, background .2s;
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--brand-deep);
  box-shadow: 0 0 0 4px rgba(24, 24, 120, .1);
}
.field--row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; display: grid; }
.field--row > .field { display: grid; }
.form__hint { font-size: 13px; color: var(--ink-3); }
.form__ok {
  display: none; gap: 10px; align-items: flex-start;
  background: #eef7ef; color: #1d6b2f; border-radius: 13px;
  padding: 14px 16px; font-size: 14.5px; line-height: 1.6;
}
.form__ok.is-on { display: flex; }
.form__err { display: none; color: #b00020; font-size: 13.5px; margin-top: 4px; }
.form__err.is-on { display: block; }

/* 联系页版式（2026-10-20 重排）
   原来是左右两栏：左「文案 + 台历图」、右「联系方式卡」。左栏天然比右栏高 400px，
   怎么调都有一栏被拉长，比例很怪。现在改成上下两个横向区块：
     ① .contact-hero  左文右图的赠礼横幅 —— 4:3 实拍照完整露出，不再裁成横条
     ② .contact-strip 联系方式横条 —— 6 项一排，窄屏自动折行
   h2 显式 margin:0 —— 否则会继承全局 h2 的大外边距，把版式撑坏。 */
.contact-stack { display: grid; gap: clamp(16px, 1.8vw, 24px); }

.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(26px, 3.6vw, 54px);
  align-items: center;
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 3px rgba(16, 16, 40, .04);
}
.contact-hero__txt { display: grid; gap: 18px; align-content: start; min-width: 0; }
.contact-hero__act { display: grid; gap: 12px; justify-items: start; }
.contact-hero__act .btn { padding-left: 28px; padding-right: 28px; }

.contact-mail__fleet { width: 100%; height: auto; display: block; border-radius: var(--radius); background: #fff; }
.contact-mail__t { font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; margin: 0; }
.contact-mail__d { font-size: 15px; color: var(--ink-2); line-height: 1.7; }

/* ---------- 赠礼条 + 台历实拍（2026-10-20 加） ---------- */
.contact-mail__body { display: grid; gap: 13px; }
.contact-gift {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(103deg, #fff5e9 0%, #fffbf6 60%, #fff 100%);
  border: 1px solid rgba(240, 144, 48, .28);
  box-shadow: 0 1px 2px rgba(240, 144, 48, .05);
}
.contact-gift__ico { flex: 0 0 auto; width: 30px; height: 30px; color: var(--brand); }
.contact-gift__ico svg { width: 100%; height: 100%; display: block; }
.contact-gift__txt { display: grid; gap: 5px; min-width: 0; }
.contact-gift__k {
  display: inline-block; width: max-content;
  background: var(--brand); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  padding: 2px 8px; border-radius: 999px;
}
.contact-gift__v { font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink); letter-spacing: -.005em; }
/* 台历实拍：横幅右侧的 4:3 实拍照（2026-10-20 重排，不再当底图裁条） */
.contact-gift-photo { margin: 0; min-width: 0; }
.contact-gift-photo img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--bg-alt); }
.contact-gift-photo figcaption { margin-top: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* 联系方式横条 */
.contact-strip {
  display: grid;
  grid-template-columns: .95fr 1.1fr 1.3fr 2fr 1.3fr auto;
  gap: 22px clamp(20px, 1.9vw, 28px);
  align-items: start;
  padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.4vw, 34px);
  border-radius: 22px;
  background: var(--bg-alt);
}
.cs-item { min-width: 0; }
.cs-k { font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; margin-bottom: 7px; }
.cs-v { font-size: 15px; font-weight: 500; line-height: 1.55; }
.cs-v a:hover { color: var(--brand-deep); }
.cs-item .qq-chat { gap: 10px; }
.cs-item .qq-chat__icon { width: 34px; }
.cs-item .qq-chat__txt { font-size: 15px; }
.cs-item--qr > img { display: block; width: 66px; height: 66px; border-radius: 9px; background: #fff; padding: 4px; }
.cs-item--qr .cs-k { margin-bottom: 8px; }

@media (max-width: 1180px) {
  .contact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .contact-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 470px) {
  .contact-strip { grid-template-columns: minmax(0, 1fr); }
}

.prose .cta-box { margin: 26px 0; padding: 18px; border-radius: var(--radius); background: linear-gradient(135deg, #fff7ee, #ffefd8); border: 1.5px solid #f5c78a; }
.prose .cta-box .btn--block { background: var(--brand); color: #fff; }
.prose .cta-box .small { color: var(--ink-3) !important; }

/* ---------- 查单 / 时效卡（首页「货物追踪」） ---------- */
.track-card { display: flex; flex-direction: column; }
.track-card .card__t { margin-top: 14px; }
.track-card .card__d { flex: 1; }
.track-card .link-more { margin-top: 22px; align-self: flex-start; }
.track-card__badge {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--brand-deep-soft); color: var(--brand-deep);
}
.track-card__badge--ext { background: #fdece0; color: #b85c00; }

/* ---------- CTA 尾块 ---------- */
.cta-band { text-align: center; }
.cta-band .display { font-size: clamp(30px, 4.6vw, 56px); }
.cta-band .lead { margin: 18px auto 0; }
.cta-band .btn-row { justify-content: center; margin-top: 32px; }

/* ---------- 页脚 ---------- */
.footer { background: var(--dark); color: #86868b; padding: clamp(56px, 6vw, 84px) 0 38px; font-size: 14px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer__logo img { height: 30px; width: auto; }
.footer__desc { margin-top: 18px; font-size: 13.5px; line-height: 1.7; max-width: 30em; color: #86868b; }
/* 页脚栏目标题：标签改成 h2 是为了语义层级，视觉要靠 .footer__h 保持原来的小字号，
   否则会继承全局 h2 的大字号，把页脚撑得很难看。 */
.footer__h { font-size: 13px; font-weight: 600; color: #f5f5f7; letter-spacing: .02em; margin: 0 0 15px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 26px; font-size: 12.5px; color: #6e6e73; }
.footer__bottom .push { margin-left: auto; }
/* 备案位：与版权行同行基线对齐，字号再小一点，不与版权行争视觉重心 */
.footer__beian { font-size: 12px; color: #6e6e73; }
.footer__beian a { color: #6e6e73; }
.footer__beian a:hover { color: #fff; }
/* 公安备案（2026-10-21 加）：图标 + 号，与 ICP 号并排同一基线。
   选择器写两个类，是为了压过窄屏那条 `.footer__beian a{display:inline-block}`。 */
.footer__beian.footer__beian--gongan a { display: inline-flex; align-items: center; gap: 6px; }
.footer__beian--gongan img { width: 18px; height: auto; display: block; flex: 0 0 auto; }

/* ---------- 动效 ---------- */
/* 关键：隐藏态只在 JS 生效时才加（html.has-js），
   JS 挂掉 / 被禁用 / IntersectionObserver 不触发时，内容必须是可见的 */
.has-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.has-js .reveal.is-in { opacity: 1; transform: none; }

/* ============ 动效系统（2026-10-14 首页美化） ============ */
/* 首屏 hero：加载即播的编排入场（不依赖滚动，页面一打开就逐层升起） */
.has-js .hero__lockup,
.has-js .hero__kicker,
.has-js .hero__title,
.has-js .hero__sub,
.has-js .hero__actions,
.has-js .hero__claim,
.has-js .hero__facts {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.has-js .hero__lockup.is-in,
.has-js .hero__kicker.is-in,
.has-js .hero__title.is-in,
.has-js .hero__sub.is-in,
.has-js .hero__actions.is-in,
.has-js .hero__claim.is-in,
.has-js .hero__facts.is-in {
  opacity: 1; transform: none; filter: blur(0);
}

/* 数字墙：数字滚动计数（JS 把中间值写进 data-n，CSS 只负责轻微弹跳） */
.wall__n { font-variant-numeric: tabular-nums; }

/* 图片类 reveal：用缩放缓入，跟文字的上移区分开，避免千篇一律 */
.has-js .reveal--img { transform: scale(.94) translateY(12px); }
.has-js .reveal--img.is-in { transform: none; }

/* 首屏背景：Ken Burns 缓推（9 秒 1.07→1），打开页面即有电影开场感 */
@keyframes heroKen { from { transform: scale(1.07); } to { transform: scale(1); } }
.has-js .hero--full__bg img { animation: heroKen 9s var(--ease) both; }

/* ============ 零-2 滚动叙事舞台（2026-10-14） ============
   桌面：区块高度 240vh，内部舞台 sticky 钉屏 100vh。
   滚动进度 p（JS 写入 CSS 变量 --pin-p）驱动：
   前半程 → 幕布变暗；后半程 → 路网图自下而上浮现覆盖。
   移动端 / 减少动态：全部退化为普通流式，路网图直接跟在数字墙后面。 */
.scale-pin { position: relative; background: var(--dark); }
.scale-pin__stage {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(20px, 3vh, 40px);
  padding: clamp(28px, 4vh, 56px) 0 0;
  overflow: hidden;
}
.scale-pin__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(6, 9, 18, .38), rgba(6, 9, 18, .68));
  opacity: min(calc(var(--pin-p, 0) * 1.8), 1);
}
/* 覆盖层半透明：压暗的车队图仍从底下透出来 */
.scale-pin__map.mapband {
  background: linear-gradient(180deg, rgba(10, 31, 71, .40), rgba(6, 21, 50, .55));
}
.scale-pin__map .mapband__stage svg.mumap {
  width: auto; max-width: 100%; max-height: 40vh;
  display: block; margin: 0 auto;
  border-radius: clamp(0px, 1.6vw, 20px);
}
/* 覆盖态文字：标题从左滑入，数字从右滑入（.map-live 由 JS 在地图浮现时加） */
.scale-pin__map .section-head { opacity: 0; transform: translateX(-64px); }
.scale-pin__map .mapband__nums { opacity: 0; transform: translateX(64px); }
.scale-pin__map.map-live .section-head { animation: mapInL .7s var(--ease) .05s both; }
.scale-pin__map.map-live .mapband__nums { animation: mapInR .7s var(--ease) .18s both; }
@keyframes mapInL { to { opacity: 1; transform: none; } }
@keyframes mapInR { to { opacity: 1; transform: none; } }
/* 干线实线：从泉州起描线（pathLength=100 归一），末端英/比支线随后接上 */
.scale-pin__map .mu-route { stroke-dasharray: 100; stroke-dashoffset: 100; }
.scale-pin__map.map-live .mu-route--main { animation: muDraw 2.1s cubic-bezier(.45, 0, .25, 1) .35s forwards; }
.scale-pin__map.map-live .mu-route--uk   { animation: muDraw .65s ease-out 2.1s forwards; }
.scale-pin__map.map-live .mu-route--be   { animation: muDraw .65s ease-out 2.25s forwards; }
@keyframes muDraw { to { stroke-dashoffset: 0; } }
/* 英国 / 比利时：持续轻跳 + 提亮，突出目的国 */
.scale-pin__map .mu-pop { transform-box: fill-box; transform-origin: center; }
.scale-pin__map.map-live .mu-pop { animation: muPop 1.5s ease-in-out 2.6s infinite; }
@keyframes muPop {
  0%, 100% { transform: translateY(0); fill: #FFFFFF; }
  30%      { transform: translateY(-7px); fill: #FFC97A; }
  55%      { transform: translateY(0); }
}
.scale-pin__map {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(18px, 3vh, 34px) clamp(20px, 4vw, 64px);
  opacity: calc((var(--pin-p, 0) - .06) / .3);
  transform: translateY(calc((1 - min(var(--pin-p, 0) / .38, 1)) * 90px));
  pointer-events: none;
}
/* 覆盖态里压缩垂直空间，保证在 100vh 里放得下 */
.scale-pin__map .section-head { max-width: 820px; }
.scale-pin__map .section-head .lead { display: none; }
.scale-pin__map .h2 { font-size: clamp(24px, 3.2vh, 40px); }
.scale-pin__map .mapband__stage { margin: clamp(10px, 2vh, 24px) 0 0; padding: 0; }
.scale-pin__map .mapband__stage img {
  width: auto; max-width: 100%; max-height: 44vh;
  display: block; margin: 0 auto;
}
.scale-pin__map .mapband__nums { margin-top: clamp(12px, 2vh, 28px); padding-top: clamp(12px, 2vh, 22px); }
.scale-pin__map .mapband__nums b { font-size: clamp(26px, 3.6vh, 44px); }
.scale-pin__map .mapband__nums span { font-size: 12.5px; }
@media (max-height: 820px) {
  .scale-pin__map .section-head .lead { display: none; }
  .scale-pin__map .mapband__stage img { max-height: 38vh; }
}

@media (min-width: 1080px) and (prefers-reduced-motion: no-preference) {
  .has-js .scale-pin { height: 140vh; }
  .has-js .scale-pin__stage {
    position: sticky; top: 0; height: 100vh;
  }
}

/* 移动端 / 减少动态降级：舞台流式，路网图直接显示在数字墙后面 */
@media (max-width: 1079px), (prefers-reduced-motion: reduce) {
  .scale-pin { padding-bottom: 0; }
  .scale-pin__veil { display: none; }
  .scale-pin__map {
    position: static; opacity: 1; transform: none;
    margin-top: clamp(28px, 4vw, 48px);
    pointer-events: auto;
  }
  .scale-pin__map .section-head .lead { display: block; }
  .scale-pin__map .mapband__stage img { width: 100%; max-height: none; }
  /* 内联 SVG 地图同样要铺满（svg 不吃上面 img 的规则） */
  .scale-pin__map .mapband__stage svg.mumap { width: 100%; max-height: none; }
  /* 移动端不跑 pin 动画：入场位移必须复位，否则数字墙隐形且右溢 64px 撑出横向滚动 */
  .scale-pin__map .section-head,
  .scale-pin__map .mapband__nums { opacity: 1; transform: none; animation: none; }
  /* 长外文单词在窄屏不撑破容器 */
  .hero__sub, .hero__kicker, .bandimg__t { overflow-wrap: anywhere; }
}

/* 零-3 时效战绩：从底部大幅上浮接棒（比通用 reveal 更有"下一幕升起"感） */
.has-js #perf .reveal { transform: translateY(72px); transition-duration: 1s; }
.has-js #perf .reveal.is-in { transform: none; }
/* 时效标题例外：从上往下压下来（与正文的升起形成对冲） */
.has-js #perf .section-head.reveal { transform: translateY(-72px); opacity: 0; }
.has-js #perf .section-head.reveal.is-in { transform: none; opacity: 1; }
/* 年份条数字：等宽字防跳动 */
.yb-num { font-variant-numeric: tabular-nums; }

/* 卡片 hover 微交互增强：图片微微放大 + 上浮 */
.lane-card, .news-card, .alt-line, .spec, .net-card {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
  .has-js .hero--full__bg img { animation: none; }
  .has-js .hero__lockup, .has-js .hero__kicker, .has-js .hero__title,
  .has-js .hero__sub, .has-js .hero__actions, .has-js .hero__claim, .has-js .hero__facts {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 页头（内页） ---------- */
.page-head { padding: clamp(52px, 7vw, 92px) 0 clamp(30px, 4vw, 52px); background: var(--bg-alt); }
.page-head--plain { background: var(--bg); }
.page-head .h1 { font-size: clamp(32px, 4.8vw, 58px); letter-spacing: -.03em; line-height: 1.08; }
.page-head .lead { margin-top: 18px; max-width: 40em; }
.crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumb a:hover { color: var(--ink); }

/* ---------- 关于页「为什么我们卡航这么快」：左图右紧凑要点（2026-10-14） ---------- */
.whyfast { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.whyfast__media { margin: 0; position: sticky; top: calc(var(--nav-h, 84px) + 16px); }
.whyfast__media img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: 0 30px 60px -34px rgba(24, 24, 120, .4); }
.whyfast__media figcaption { font-size: 12.5px; color: var(--ink-3); margin: 10px 4px 0; }
.whyfast__body { display: flex; flex-direction: column; gap: 13px; }
.whyfast__i { padding: 12px 16px; border: 1px solid rgba(24, 24, 120, .10); border-left: 3px solid var(--brand); border-radius: 10px; background: #fff; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.whyfast__i:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(24, 24, 120, .25); }
.whyfast__i h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; }
.whyfast__i p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2, #444); }
.whyfast__i .hl { font-weight: 700; color: #b05e0a; background: rgba(240, 144, 48, .16); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.whyfast__end { margin: 4px 2px 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-3); }
.whyfast__end b { color: var(--ink); }
@media (max-width: 900px) {
  .whyfast { grid-template-columns: minmax(0,1fr); }
  .whyfast__media { position: static; }
}

/* ---------- 首页「冬季无忧」信任块（2026-10-14） ---------- */
.winter { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
.winter__media { margin: 0; }
.winter__media img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: 0 30px 60px -34px rgba(24, 24, 120, .4); }
.winter__body .h2 { margin: 8px 0 14px; }
.winter__lead { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 20px; max-width: 36em; }
.winter__pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.winter__pts li { position: relative; padding: 13px 16px 13px 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2); background: var(--bg-alt); border-radius: 10px; border-left: 3px solid var(--brand); }
.winter__pts li b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
@media (max-width: 900px) {
  .winter { grid-template-columns: minmax(0,1fr); }
}

/* ---------- 联系页页头：九台车队白底图做右下背景层（2026-10-14） ---------- */
.page-head--fleet { position: relative; overflow: hidden; padding-bottom: clamp(120px, 14vw, 200px); }
.page-head--fleet::after {
  content: ""; position: absolute; right: max(2vw, 12px); bottom: 0;
  width: min(52%, 780px); aspect-ratio: 3808 / 1632;
  background: url(../img/fleet-nine-hero.jpg) bottom center / contain no-repeat;
  pointer-events: none;
}
.page-head--fleet .wrap { position: relative; z-index: 1; max-width: 62%; }
@media (max-width: 860px) {
  .page-head--fleet { padding-bottom: clamp(90px, 20vw, 150px); }
  .page-head--fleet::after { width: min(78%, 520px); right: 0; opacity: .9; }
  .page-head--fleet .wrap { max-width: 100%; }
}

/* ---------- 网点页页头：全宽在途大图（2026-10-14 二版：去线条地图，图加大） ---------- */
/* ---------- 网点页页头：图做标题背景（2026-10-14 三版：整块裁窄，一眼见网点信息） ---------- */
.page-head--cover {
  position: relative; overflow: hidden;
  background: var(--dark);
  padding: clamp(56px, 7vw, 96px) 0;
  color: #fff;
}
.page-head--cover::before {
  content: ""; position: absolute; inset: 0;
  background: url(../img/drive-dusk.jpg) center 58% / cover no-repeat;
}
.page-head--cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,9,18,.80) 0%, rgba(6,9,18,.46) 52%, rgba(6,9,18,.74) 100%);
}
.page-head--cover .wrap { position: relative; z-index: 1; }
.page-head--cover .h1 { color: #fff; }
.page-head--cover .lead { color: rgba(245,245,247,.82); max-width: 46em; }
.page-head--cover .crumb, .page-head--cover .crumb a { color: rgba(245,245,247,.62); }
.page-head--cover .crumb a:hover { color: #fff; }
.page-head--foto { position: relative; overflow: hidden; }
.page-head--foto .lead { margin-bottom: clamp(22px, 3vw, 34px); }
.page-head__media { margin: 0; position: relative; }
.page-head__media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 2.2 / 1; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 34px 66px -36px rgba(24, 24, 120, .42);
}
.page-head__media figcaption {
  position: absolute; left: 16px; bottom: 16px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(22, 22, 25, .62); color: #fff;
  font-size: 13px; letter-spacing: .06em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---------- 规格表 ---------- */
.spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.spec__row { background: #fff; padding: 22px 24px; }
.spec__k { font-size: 13px; color: var(--ink-3); }
.spec__v { margin-top: 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.spec__v small { font-weight: 400; font-size: 13.5px; color: var(--ink-2); }

.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bullets li { display: flex; gap: 14px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.bullets li b { color: var(--ink); font-weight: 600; }
.bullets .dot { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--brand-deep-soft); position: relative; }
.bullets .dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--brand-deep); }

/* ★ 必须有的深色覆盖：.bullets 的默认色是 --ink-2(#6e6e73) / --ink(#1d1d1f)，
   放在 --dark(#161619) 上等于黑字黑底，整段读不出来。
   之前 .section--dark 只覆盖到 .lead/.muted/.eyebrow/.h2/.h3/.display/.chip/.route/.tl，
   漏掉了 .bullets —— 首页「全链路自主可控」那三条就是这么消失的。 */
.section--dark .bullets li { color: #a1a1a6; }
.section--dark .bullets li b { color: #fff; }
.section--dark .bullets .dot { background: rgba(255, 255, 255, .14); }
.section--dark .bullets .dot::after { background: var(--brand); }

/* 深色区块里的普通段落也得提亮（.split__body p 默认是 --ink-2） */
.section--dark .split__body p { color: #a1a1a6; }
.section--dark .split__body p b, .section--dark .split__body p strong { color: #fff; }

/* =========================================================
   实绩数据（三折页官方数据）
   ========================================================= */
.perf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.perf__i { background: #fff; padding: 30px 26px 28px; }
.perf__n {
  font-family: var(--font-en); font-size: clamp(32px, 4vw, 50px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; color: var(--ink);
}
.perf__n em { font-style: normal; font-size: .42em; font-weight: 600; color: var(--brand); margin-left: 4px; letter-spacing: 0; }
.perf__l { margin-top: 13px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.perf__s { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.section--dark .perf, .section--alt .perf { background: var(--line-soft); }
.section--dark .perf__i { background: var(--dark-2); }
.section--dark .perf__n { color: #fff; }
.section--dark .perf__l { color: #a1a1a6; }

/* 年度平均提取时效条形图 */
.yearbars { display: grid; gap: 14px; }
.yearbar { display: grid; grid-template-columns: 58px 1fr 82px; align-items: center; gap: 16px; }
.yearbar__y { font-family: var(--font-en); font-size: 15px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.yearbar__t { height: 12px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.yearbar__t i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
.yearbar__v { font-family: var(--font-en); font-size: 16px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.yearbar__v small { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.section--dark .yearbar__y { color: #a1a1a6; }
.section--dark .yearbar__t { background: rgba(255, 255, 255, .1); }
.section--dark .yearbar__v { color: #fff; }

/* =========================================================
   线路总览页（lines/index.html）—— 四条线全部上图，交替排布
   ========================================================= */
.ln-row { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(24px, 3.4vw, 48px); align-items: center; }
.ln-row + .ln-row { margin-top: clamp(34px, 4vw, 56px); }
.ln-row__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); }
.ln-row__media img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 1; object-fit: cover; }
.ln-row__k { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--brand); }
.ln-row__t { margin-top: 9px; font-size: clamp(23px, 2.6vw, 33px); font-weight: 600; letter-spacing: -.028em; line-height: 1.12; }
.ln-row__t small { display: block; margin-top: 6px; font-family: var(--font-en); font-size: .38em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ln-row__d { margin-top: 11px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.ln-row__m { margin: 16px 0 0; padding-top: 15px; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; }
.ln-row__m div { min-width: 0; }
.ln-row__m dt { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.ln-row__m dd { margin: 3px 0 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; }
.ln-row__m dd small { display: block; margin-top: 2px; font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ln-row--flip .ln-row__media { order: -1; }
.ln-row .route { margin-top: 16px; }

/* 详情页底部的「其他线路」—— 从三个小灰按钮改成三张信息卡 */
.alt-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.alt-line {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 26px 26px 24px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.alt-line:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -26px rgba(24, 24, 120, .3); border-color: transparent; }
.alt-line__k { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--brand); }
.alt-line__t { margin-top: 11px; font-size: 21px; font-weight: 600; letter-spacing: -.018em; }
.alt-line__d { margin-top: 10px; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); flex: 1; }
.alt-line__m { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.alt-line__m b { color: var(--ink); font-weight: 600; }

/* =========================================================
   境外车队 / 海外合作方（三语卡）—— 联系页「提交询价」下方单独一块
   ========================================================= */
.partner {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(128deg, #1a1a86 0%, #12125e 52%, #17176f 100%);
  color: #fff;
  padding: clamp(34px, 4.4vw, 58px) clamp(26px, 3.6vw, 52px);
}
.partner::before {
  content: ""; position: absolute; right: -180px; top: -180px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 144, 48, .34), rgba(240, 144, 48, 0) 68%);
  pointer-events: none;
}
.partner::after {
  content: ""; position: absolute; left: -140px; bottom: -200px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.partner > * { position: relative; z-index: 1; }
.partner__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0; }
.partner__t { margin: 16px 0 0; font-size: clamp(25px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -.028em; color: #fff; font-weight: 600; }
.partner__sub { margin: 16px 0 0; max-width: 44em; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.partner__cols { margin-top: clamp(30px, 4vw, 46px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; }
.partner__col { border-top: 2px solid rgba(255, 255, 255, .22); padding-top: 20px; }
.partner__lang {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.partner__bn { margin: 15px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--brand); }
.partner__body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .84); }
.partner__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  height: 42px; padding: 0 20px; border-radius: 999px;
  background: #fff; color: var(--brand-deep);
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: transform .22s var(--ease), background .22s;
}
.partner__cta:hover { background: var(--brand); color: #fff; }
.partner__cta:active { transform: scale(.97); }

/* 专属对接人 —— 贴在蓝色卡底部的一块白底内嵌板 */
.partner__person {
  margin-top: clamp(32px, 4.2vw, 48px);
  background: #fff; color: var(--ink);
  border-radius: var(--radius);
  padding: 26px 30px 28px;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: start;
}
.partner__av {
  grid-row: span 2;
  width: 78px; height: 78px; border-radius: 22px;
  background: linear-gradient(140deg, var(--brand-deep), #0e0e52);
  color: #fff; display: grid; place-items: center;
  font-family: var(--font-en); font-size: 26px; font-weight: 700; letter-spacing: .02em;
}
.partner__person-h { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.partner__nm { margin-top: 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.partner__nm span { margin-left: 10px; font-size: 16px; font-weight: 500; color: var(--ink-2); }
.partner__role { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.partner__role b { color: var(--ink); font-weight: 600; }
.partner__rows { grid-column: 2; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.partner__row {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  background: var(--bg-alt); border-radius: 999px; padding: 8px 16px;
}
.partner__row k { font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }
.partner__row:hover { background: var(--brand-deep-soft); color: var(--brand-deep); }

/* =========================================================
   专业团队 5 环节（关于页）
   ========================================================= */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.flow__s { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 22px 24px; }
.flow__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-deep-soft); color: var(--brand-deep);
  font-family: var(--font-en); font-size: 14px; font-weight: 700;
}
.flow__t { margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -.014em; }
.flow__d { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.section--dark .flow__s { background: var(--dark-2); border-color: rgba(255, 255, 255, .09); }
.section--dark .flow__n { background: rgba(255, 255, 255, .1); color: var(--brand); }
.section--dark .flow__t { color: #fff; }
.section--dark .flow__d { color: #a1a1a6; }

/* 勾选清单（关于页「选择我们的优势」） */
.chklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.chklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.chklist li b { color: var(--ink); font-weight: 600; }
.chklist .chk {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 3px; border-radius: 6px;
  background: var(--brand); position: relative;
}
.chklist .chk::after {
  content: ""; position: absolute; left: 7px; top: 3.5px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.section--dark .chklist li, .section--dark .chklist li b { color: #f5f5f7; }

/* 双图证据区（横幅实拍 + 在途大图） */
.evi { display: grid; grid-template-columns: 1.16fr .84fr; gap: 24px; align-items: start; }
.evi figure { margin: 0; }
.evi img { width: 100%; height: auto; border-radius: var(--radius); background: var(--bg-alt); }
.evi figcaption { margin-top: 14px; font-size: 14px; line-height: 1.62; color: var(--ink-2); }
.evi figcaption b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* 报关体系两栏 */
.decl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.decl__c { background: var(--bg-alt); border-radius: var(--radius); padding: 28px 26px 26px; }
.decl__n { font-family: var(--font-en); font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--brand); line-height: 1; }
.decl__t { margin-top: 14px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.decl__d { margin-top: 9px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* ---------- 响应式 ---------- */
/* 俄语导航最长（Маршруты / Контакты / Сеть офисов / Запросить расчёт），
   实测 1366 窗口下 CTA 按钮会被顶出屏幕。分两档收：先收间距，再收电话。 */
@media (max-width: 1460px) {
  .nav__links { gap: 24px; }
  .nav__right { gap: 12px; }
}
/* 电话 160px 是最大的一块；收掉它，俄语 7 项在 1241 以上都放得下。
   号码仍在页脚、联系我们页和「立即询价」按钮上。 */
@media (max-width: 1400px) {
  .nav__right .nav__phone { display: none; }
}

/* 导航折叠提前到 1240（2026-10-23）：加了「客户查单」第 7 项后重测，
   7 项在视口 ~1187 以下就折成两行，1280 窗口（视口 1246）原本刚好卡在临界点。
   这里只把 nav 那一组规则提前，不牵动下面 1080 的栅格断点。 */
@media (max-width: 1240px) {
  :root { --nav-h: 68px; }
  .nav__links { display: none; }
  .nav__right .nav__phone { display: none; }
  .nav__right .btn--sm { height: 34px; padding: 0 11px; font-size: 12.5px; }
  .nav__logo img { height: 30px; }
  .nav__inner { gap: 10px; }
  .nav__right { gap: 8px; }
  .nav__right .lang { display: flex; font-size: 13px; gap: 3px; }
  .nav__right .lang a { padding: 8px 4px; }
  .drawer .lang { display: flex; }
  .btn--sm { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .burger { display: block; }
}

@media (max-width: 1080px) {
  :root { --nav-h: 68px; }
  .nav__links { display: none; }
  .nav__right .nav__phone { display: none; }
  .nav__right .btn--sm { height: 34px; padding: 0 11px; font-size: 12.5px; }
  .nav__logo img { height: 30px; }
  .nav__inner { gap: 10px; }
  .nav__right { gap: 8px; }
  .nav__right .lang { display: flex; font-size: 13px; gap: 3px; }
  .nav__right .lang a { padding: 8px 4px; }
  .drawer .lang { display: flex; }
  .btn--sm { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .burger { display: block; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .net-grid { columns: 2; }
  .footer__top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .ln-row { gap: clamp(26px, 3.6vw, 44px); }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .grid--3 { grid-template-columns: minmax(0,1fr); }
  .split, .split--media-right { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section { padding: clamp(58px, 12vw, 84px) 0; }
  .hero { padding-top: 24px; }
  .band__cap { padding: 48px 22px 20px; }
  .line-card__d { min-height: 0; }
  /* 线路总览：交替布局在窄屏失去意义，统一改成「图在上、文在下」 */
  .ln-row, .ln-row--flip { grid-template-columns: minmax(0,1fr); }
  .ln-row--flip .ln-row__media { order: 0; }
  .perf { grid-template-columns: repeat(2, 1fr); }
  .partner__cols { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .evi { grid-template-columns: minmax(0,1fr); }
  .quick3 { grid-template-columns: minmax(0,1fr); }
}

/* 窄屏：通栏图说明文字改为图下独立色块，避免压住图片主体 */
@media (max-width: 640px) {
  .band__cap {
    position: static;
    padding: 20px 20px 22px;
    background: var(--dark);
  }
  .band { background: var(--dark); }
}

/* 线路卡在窄屏必须落到单列，否则四张卡每张只有半屏宽，字全挤断 */
@media (max-width: 760px) {
  .grid--4 { grid-template-columns: minmax(0,1fr); }
  .line-card__m { grid-template-columns: repeat(4, 1fr); }
  .alt-lines { grid-template-columns: minmax(0,1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
}

/* 网点卡在窄屏落单列 —— 两列宽度下地址会被挤成 4 行，读起来很碎 */
/* 资讯统计条：四格在窄屏挤成一条细长条，落两列才读得清 */
@media (max-width: 860px) {
  .news-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .news-stats__i { padding: 18px 16px; }
  .news-stats__i b { font-size: 23px; }
  .news-year { margin: 32px 0 18px; gap: 12px; }
  .net-grid { columns: 1; }
  .partner__person { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 22px 22px; }
  .partner__av { grid-row: auto; width: 64px; height: 64px; border-radius: 18px; font-size: 22px; }
  .partner__rows { grid-column: 1; }
  .partner__row { width: 100%; justify-content: flex-start; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .grid--2 { grid-template-columns: minmax(0,1fr); }
  .spec { grid-template-columns: minmax(0,1fr); }
  .footer__top { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .footer__bottom .push { margin-left: 0; }
  .btn { height: 48px; }
  .field--row { grid-template-columns: minmax(0,1fr); }
  .line-card__m { grid-template-columns: repeat(2, 1fr); }
  .stats__item { padding: 26px 18px 24px; }
  .net-card { padding: 20px 20px 4px; }
  .perf { grid-template-columns: minmax(0,1fr); }
  .flow { grid-template-columns: minmax(0,1fr); }
  .decl { grid-template-columns: minmax(0,1fr); }
  .yearbar { grid-template-columns: 46px 1fr 76px; gap: 11px; }
  .hero__lockup img { height: 34px; }
  .hero__lockup-en { padding-left: 0; border-left: 0; width: 100%; text-align: center; letter-spacing: .2em; }
  .hero__facts { gap: 10px 22px; }
  .hero__facts b { font-size: 18px; }
}

/* ============ 可读性微交互（2026-10-14，克制增强，全部尊重 reduced-motion） ============ */

/* ① 阅读进度条：顶部 2px 橙色细线，随滚动增长 */
.progressbar {
  position: fixed; top: 0; left: 0; z-index: 200; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  transition: width .12s linear;
  pointer-events: none;
}

/* ② 数字墙数字：hover 轻微放大 + 品牌色浮现，聚焦单个事实 */
.wall__i { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.wall__i:hover { transform: translateY(-4px); }
.wall__i:hover .wall__n { color: var(--brand-deep); }
.wall__n { transition: color .4s var(--ease); }

/* ③ 线路卡路线节点：hover 卡时轨道从起点「点亮」到终点（scaleX 不影响内联 width） */
.line-card .route__track i { transform-origin: left; transition: transform .55s var(--ease); }
.line-card .route__track i { transform: scaleX(0); }
.line-card:hover .route__track i { transform: scaleX(1); }
.line-card .route__dot { transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.line-card:hover .route__dot { transform: scale(1.28); }

/* ④ 数字墙入场：各格子上浮 + 计数（计数在 JS，这里只做位移节奏） */
.has-js .wall__i { transition: transform .55s var(--ease), opacity .55s var(--ease); }

/* ⑤ 卡片 hover 图片轻微放大（已有 scale，这里统一到更柔和的值） */
.line-card__img img { transition: transform .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .progressbar { display: none; }
  .wall__i, .wall__i:hover { transform: none; }
  .line-card .route__track i { transform: none; transition: none; }
  .line-card:hover .route__dot { transform: none; }
}

/* ---------- 首页「最新资讯」透明条（2026-10-14）：nav 正下方，轮播精简标题 ---------- */
.newstick {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  pointer-events: none;
}
.newstick__in {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 18px; height: 40px;
}
.newstick__tag {
  flex: none; pointer-events: auto;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: #fff; background: rgba(240, 144, 48, .92);
  padding: 3px 10px; border-radius: 999px;
}
.newstick__box { position: relative; height: 40px; flex: 0 1 480px; min-width: 0; pointer-events: auto; }
.newstick__item {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-size: 13.5px; color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.newstick__item.on { opacity: 1; transform: none; }
.newstick__item:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.newstick__more {
  flex: none; pointer-events: auto;
  font-size: 12.5px; color: rgba(255, 255, 255, .75);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.newstick__more:hover { color: #fff; }
@media (max-width: 1080px) {
  .newstick__in { justify-content: flex-start; gap: 12px; padding: 0 16px; }
  .newstick__box { flex: 1 1 auto; }
  .newstick__more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .newstick__item { transition: none; }
  .newstick__item:not(.on) { display: none; }
}

/* =========================================================
   主营线路页（lines/index.html）2026-10-14 重设计 · Redesign-Preserve
   —— 在既有品牌系统内做三处增强：cover 首屏 / 大图线路卡 / 路线点亮
   ========================================================= */
/* 首屏：深蓝底 + 车队在途大图 + 渐变遮罩，标题白字，右下角橙光呼应品牌 */
.page-head--lanes {
  position: relative; overflow: hidden;
  background: var(--dark);
  padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 96px);
  color: #fff;
}
.page-head--lanes::before {
  content: ""; position: absolute; inset: 0;
  background: url(../img/ai-x-convoy-wide.jpg) center 38% / cover no-repeat;
  transform: scale(1.02);
}
.page-head--lanes::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,9,18,.92) 0%, rgba(6,9,18,.72) 44%, rgba(6,9,18,.32) 100%),
    linear-gradient(180deg, rgba(6,9,18,.55) 0%, rgba(6,9,18,0) 40%, rgba(6,9,18,.82) 100%);
}
.page-head--lanes::before,
.page-head--lanes::after { pointer-events: none; }
.page-head--lanes .wrap { position: relative; z-index: 1; }
.page-head--lanes .h1 { color: #fff; }
.page-head--lanes .lead { color: rgba(245,245,247,.84); max-width: 42em; }
.page-head--lanes .crumb, .page-head--lanes .crumb a { color: rgba(245,245,247,.6); }
.page-head--lanes .crumb a:hover { color: #fff; }
/* 首屏底部一条四线计数带，把「四条通道」数字亮出来 */
.lanes-strip {
  position: relative; z-index: 1;
  margin-top: clamp(30px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.lanes-strip > div { padding: 20px 18px 0 0; }
.lanes-strip b {
  display: block; font-family: var(--font-en);
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 500; letter-spacing: -.04em;
  color: #fff; line-height: 1;
}
.lanes-strip b i { font-style: normal; color: var(--brand); }
.lanes-strip span { display: block; margin-top: 8px; font-size: 13px; color: rgba(245,245,247,.6); }

/* 线路卡：图高减半（42:9），图/文上下交叉分布（.lane--flip 对调） */
/* 2×2 网格（2026-10-14）：一行两条渠道，两条板块介绍完四条线，访问者少滚动 */
.lanes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}
.lane {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: visible;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.lane:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -38px rgba(10,20,49,.55); }
.lane__media {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--line-soft); border-bottom: none;
  background: var(--dark);
}
.lane__media img { width: 100%; height: auto; display: block; aspect-ratio: 42 / 9; object-fit: cover; }
/* 2×2 窄卡：图再压扁一点，一行放下两卡仍保持信息密度 */
.lanes-grid .lane__media img { aspect-ratio: 24 / 9; }
.lane__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,9,18,.16) 0%, rgba(6,9,18,.14) 55%, rgba(6,9,18,.72) 100%);
}
/* 图内大号水印编号（01/02/03/04） */
.lane__num {
  position: absolute; left: clamp(16px, 2.2vw, 30px); top: clamp(10px, 1.6vw, 20px); z-index: 2;
  font-family: var(--font-en); font-size: clamp(30px, 3.4vw, 52px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: rgba(255,255,255,.92);
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.lane__num i { font-style: normal; color: var(--brand); }
/* 图内右上品牌码 + 左下标题 */
.lane__k {
  position: absolute; right: clamp(16px, 2.2vw, 30px); top: clamp(12px, 1.6vw, 20px); z-index: 2;
  font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: var(--brand);
  padding: 4px 11px; border: 1px solid rgba(240,144,48,.5); border-radius: 999px;
  background: rgba(6,9,18,.4);
}
.lane__tagline {
  position: absolute; left: clamp(16px, 2.2vw, 30px); bottom: clamp(10px, 1.6vw, 18px); z-index: 2;
  right: clamp(16px, 2.2vw, 30px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.lane__t {
  margin: 0; font-size: clamp(19px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: #fff;
}
.lane__t small {
  display: block; margin-top: 5px; font-family: var(--font-en);
  font-size: .42em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.68);
}
.lane__arrow {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background .3s, color .3s, transform .3s;
}
.lane:hover .lane__arrow { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateX(4px); }
/* 交叉分布：偶数卡图在下、文在上（2×2 网格下统一图上文下，取消交叉更整齐） */
.lane--flip .lane__media { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 1px solid var(--line-soft); border-bottom: none; }
.lane--flip .lane__body { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--line-soft); border-top: none; }
.lane--flip .lane__media { order: 2; }
.lanes-grid .lane--flip .lane__media { order: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: none; border-bottom: none; }
.lanes-grid .lane--flip .lane__body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: none; border-bottom: none; }
.lane__body {
  position: relative; z-index: 2;
  background: #fff;
  border: 1px solid var(--line-soft); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px) clamp(20px, 2.4vw, 28px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 48px); align-items: center;
}
/* 2×2 窄卡：正文改单列上下堆叠，参数左对齐，按钮横排，更省横向空间 */
.lanes-grid .lane__body { grid-template-columns: minmax(0,1fr); gap: 14px; align-items: stretch; }
.lanes-grid .lane__side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: none; gap: 12px; }
.lanes-grid .lane__spec { text-align: left; }
.lanes-grid .lane__btns { flex-direction: row; }
.lanes-grid .lane__btns .btn { flex: 1; }
.lane__d { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); max-width: 46em; }
.lane .route { grid-column: 1 / -1; margin: 8px 14px 0; } /* 横贯全宽独立一行，两端留边保地名 */
/* 右侧关键参数 + 按钮（竖排）；防被描述列挤压导致两端缺字 */
.lane__side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; width: max-content; max-width: 40%; }
.lane__spec { text-align: right; }
.lane__spec b {
  display: block; font-family: var(--font-en);
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink); white-space: nowrap;
}
.lane__spec span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; }
.lane__btns { display: flex; flex-direction: column; gap: 8px; }
.lane__btns .btn { justify-content: center; }

/* 深色底上的描边按钮（白描边，hover 亮底） */
.btn--on-dark { border-color: rgba(255,255,255,.44); color: #fff; background: rgba(255,255,255,.06); }
.btn--on-dark:hover { border-color: rgba(255,255,255,.78); background: rgba(255,255,255,.14); color: #fff; }

@media (max-width: 820px) {
  .lanes-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .lanes-grid { grid-template-columns: minmax(0, 1fr); }
  .lane__body { grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .lane__side { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .lane__spec { text-align: left; }
  .lane__btns { flex-direction: row; flex-wrap: wrap; }
  .lane__btns .btn { flex: 1 1 130px; white-space: normal; }
  .lane__tagline { align-items: flex-start; flex-direction: column; gap: 8px; }
  .lane__arrow { display: none; }
  .lane__media img { aspect-ratio: 16 / 7; }
  /* 移动端取消交叉：统一图上文下 */
  .lane--flip .lane__media { order: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: none; border-bottom: none; }
  .lane--flip .lane__body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: none; }
}

/* 路线点亮：进入视口时 scaleX 描线（配合 site.js 的 reveal 观察器） */
.has-js .lane .route__track i { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .2s; }
.has-js .lane.is-in .route__track i { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .has-js .lane .route__track i { transform: none; transition: none; }
}




/* QQ 在线咨询：企鹅卡车图标 + hover 显示号码 */
.qq-chat { display: inline-flex; align-items: center; gap: 12px; position: relative; text-decoration: none; }
.qq-chat__icon { width: 48px; height: auto; display: block; transition: transform .4s cubic-bezier(.2,.8,.3,1.1); }
.qq-chat:hover .qq-chat__icon { transform: translateY(-3px); }
.qq-chat__txt { font-size: 16px; font-weight: 500; color: var(--ink-2, #333); }
.qq-chat__txt b { color: var(--brand-deep); }
.qq-chat__tip {
  max-width: min(220px, calc(100vw - 64px));
  white-space: normal; line-height: 1.4;
  position: absolute; left: 10px; bottom: calc(100% + 8px);
  background: var(--brand-deep); color: #fff; font-size: 13px; font-weight: 500;
  padding: 5px 12px; border-radius: 8px;
  opacity: 0; transform: translate(-4px, 4px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 6px 18px rgba(24,24,120,.25);
}
.qq-chat__tip::after {
  content: ""; position: absolute; left: 22px; top: 100%;
  border: 5px solid transparent; border-top-color: var(--brand-deep);
}
.qq-chat:hover .qq-chat__tip { opacity: 1; transform: translate(0, 0); }
.contact-item--qq { align-items: center; }
.contact-item--qq .contact-item__k { padding-top: 0; }

/* 手机端地图修复（2026-10-14）：svg 按自然比例铺满 / 去掉色带 / 干线直接画全 */
@media (max-width: 1079px), (prefers-reduced-motion: reduce) {
  .scale-pin__map.mapband {
    background: transparent;
    padding-left: 0; padding-right: 0;
  }
  .scale-pin__map .mapband__stage { margin-top: 18px; padding: 0; }
  .scale-pin__map .mapband__stage svg.mumap {
    width: 100%; height: auto; max-height: none;
    border-radius: 0;
  }
  /* 手机不走钉屏滚动，map-live 永远不触发 → 干线直接画全 */
  .scale-pin__map .mu-route { stroke-dashoffset: 0; }
}
/* 手机（≤440px）：顶栏只留 标志 + 语言 + 汉堡，询价按钮收进抽屉。
   实测 390 视口下俄语 CTA「Запросить расчёт」比中文长 40px，会把汉堡挤出屏幕
   （汉堡 379..419 > 390，等于点不到菜单）。抽屉底部仍有一个通栏 CTA。 */
@media (max-width: 440px) {
  .nav__right .btn--sm { display: none; }
}
/* 极窄屏（≤340px）兜底：导航栏再压缩 */
@media (max-width: 340px) {
  .nav__right .btn--sm { display: none; }
  .nav__right .lang { font-size: 12px; }
  .nav__right .lang a { padding: 8px 2px; }
}
/* 手机端可访问性：扩大文字链接的点击热区（页脚/正文锚点），避免点不中 */
@media (max-width: 820px) {
  .footer ul a { display: inline-block; padding: 6px 0; }
  .footer__bottom a, .footer__beian a { display: inline-block; padding: 6px 0; }
  .contact-item__v a:not(.qq-chat) { display: inline-block; padding: 4px 0; }
  .note__d a, .prose a { padding: 3px 0; }
}