/* ============================================================================
   妙林国际物流 · 官网「商务 × 国际化」美化覆盖层
   ----------------------------------------------------------------------------
   版本 : v2.0.0  (2026-10-18)
   依赖 : css/ml-design-system.css（必须先引入，本文件使用其 --ml-* 变量）
   位置 : 引入顺序必须在 css/style.css 之后
            <link rel="stylesheet" href="css/ml-design-system.css?v=v2">
            <link rel="stylesheet" href="css/ml-biz-intl.css?v=v2">
   ----------------------------------------------------------------------------
   🔴 零侵入承诺
      · 不修改 css/style.css 一个字节（该文件与线上逐字节一致，md5 1926b112…）
      · 不修改任何 HTML 结构、不改 JS、不改图片资源
      · 全部规则集中在 .ml-biz 作用域或具名业务类上，删掉本文件的 <link> 即完全复原
   ----------------------------------------------------------------------------
   改了什么（对照 2026-10-18 线上实拍基线）
     1. 首屏 hero：字重 200→300（原细体在深色地球上发虚），字距/行高按国际出版规范收紧
     2. 内容卡 .cms-list：灰底无层次 → 白底 + 冷调阴影 + 14px 圆角 + 悬停微升
     3. 卡片配图：320px/16:9 → 380px/4:3，视觉重量足够撑起「服务项目」的专业感
     4. 要点列表：默认 disc 圆点 → 品牌色方点 + 更松行高，长句可扫读
     5. 区块标题：加品牌竖线 + 字号阶梯，副标题转国际版「eyebrow」小标签
     6. 页脚：行距/字号重排，备案行降噪，分栏更稳
     7. 表单/表格：控件高度统一 44px、数字等宽、聚焦光圈统一
   ========================================================================== */

/* ============================================================================
   一、全站基础节奏（不改布局，只调字体渲染与纵向呼吸）
   ========================================================================== */
body {
  font-family: var(--ml-font-sans);
  color: var(--ml-n-800);
}

/* 中文正文行高统一到 1.68，长段落更耐读 */
p,
.cms-list__items li,
.article__body p,
.terms-article__block p {
  line-height: var(--ml-lh-base);
}

/* ============================================================================
   二、顶部导航：商务精修
   ========================================================================== */
.header {
  border-bottom: 1px solid transparent;
  transition: background var(--ml-dur-base) var(--ml-ease),
              border-color var(--ml-dur-base) var(--ml-ease),
              box-shadow var(--ml-dur-base) var(--ml-ease);
}
.header.is-scrolled,
.header--scrolled {
  border-bottom-color: var(--ml-n-150);
  box-shadow: var(--ml-sh-xs);
}

.nav__link {
  position: relative;
  font-weight: var(--ml-fw-medium);
  letter-spacing: .01em;
  transition: color var(--ml-dur-fast) var(--ml-ease);
}
/* 悬停下划线：2px，不挤压布局 */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--ml-brand);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--ml-dur-base) var(--ml-ease);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  width: calc(100% - 24px);
}

/* 右上「注册 → 进入系统」主按钮：从描边胶囊升级为实心，作为页面唯一高优先动作 */
.header__login-btn {
  border-radius: var(--ml-r-pill);
  font-weight: var(--ml-fw-semi);
  letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(22, 93, 255, .18);
  transition: transform var(--ml-dur-fast) var(--ml-ease),
              box-shadow var(--ml-dur-base) var(--ml-ease),
              background var(--ml-dur-fast) var(--ml-ease);
}
.header__login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22, 93, 255, .26);
}

/* ============================================================================
   三、首屏 Hero：国际商务版式
   ========================================================================== */
.hero__tagline {
  font-size: var(--ml-fs-13);
  font-weight: var(--ml-fw-semi);
  letter-spacing: var(--ml-ls-wider);
  text-transform: uppercase;
  opacity: .82;
}

.hero__title {
  font-weight: 300;                 /* 原 200 在深色地球上边缘发虚 */
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: var(--ml-ls-tight);
  text-wrap: balance;               /* 支持时自动均衡断行，标题不会出现孤字 */
}

.hero__title--accent {
  font-weight: 300;
  letter-spacing: -.005em;
}

.hero__cta {
  gap: var(--ml-sp-3);
}

.hero__cta .btn {
  height: 44px;
  padding: 0 var(--ml-sp-6);
  display: inline-flex;
  align-items: center;
  border-radius: var(--ml-r-pill);
  font-size: var(--ml-fs-14);
  font-weight: var(--ml-fw-medium);
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
  transition: transform var(--ml-dur-fast) var(--ml-ease),
              background var(--ml-dur-base) var(--ml-ease),
              border-color var(--ml-dur-base) var(--ml-ease);
}
.hero__cta .btn:hover {
  transform: translateY(-1px);
}

/* ============================================================================
   四、区块标题层级
   ========================================================================== */
.section__title {
  position: relative;
  font-size: clamp(1.6rem, 3vw, var(--ml-fs-34));
  font-weight: var(--ml-fw-semi);
  line-height: var(--ml-lh-snug);
  letter-spacing: -.02em;
  color: var(--ml-n-900);
  padding-left: var(--ml-sp-4);
}
/* 左侧品牌竖线：商务物料常见做法，一眼给出栏目标识 */
.section__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ml-brand), var(--ml-brand-300));
}

.section__subtitle {
  font-size: var(--ml-fs-13);
  font-weight: var(--ml-fw-regular);
  letter-spacing: var(--ml-ls-wide);   /* 中文副标题用 .04em，过宽会显得松散 */
  color: var(--ml-n-500);
  padding-left: var(--ml-sp-4);
  margin-top: var(--ml-sp-2);
}
/* 英文态才用全大写 + 宽字距的国际版 eyebrow 样式 */
html[lang="en"] .section__subtitle,
html[lang="en-US"] .section__subtitle {
  text-transform: uppercase;
  letter-spacing: var(--ml-ls-wider);
  font-weight: var(--ml-fw-medium);
}

/* ============================================================================
   五、内容卡（服务项目 / 单证 / 覆盖范围 …）—— 本次视觉提升最大的一块
   ========================================================================== */
.cms-list {
  background: var(--ml-n-0);
  border: var(--ml-bd-light);
  border-radius: var(--ml-r-lg);
  box-shadow: var(--ml-sh-sm);
  padding: var(--ml-sp-6);
  margin-bottom: var(--ml-sp-5);
  transition: transform var(--ml-dur-base) var(--ml-ease),
              box-shadow var(--ml-dur-base) var(--ml-ease),
              border-color var(--ml-dur-base) var(--ml-ease);
}
.cms-list:hover {
  transform: translateY(-2px);
  box-shadow: var(--ml-sh-lg);
  border-color: var(--ml-n-200);
}

.cms-list__fig img {
  border-radius: var(--ml-r-md);
  border: 1px solid var(--ml-n-150);
  box-shadow: var(--ml-sh-xs);
}

.cms-list__title {
  position: relative;
  font-size: var(--ml-fs-23);
  font-weight: var(--ml-fw-semi);
  line-height: var(--ml-lh-snug);
  letter-spacing: -.015em;
  color: var(--ml-n-900);
  margin: 0 0 var(--ml-sp-4);
  padding: 0 0 var(--ml-sp-3) var(--ml-sp-4);
  border-bottom: var(--ml-bd-light);
}
/* 标题左侧品牌竖线，与 .section__title 呼应，形成统一栏目标识 */
.cms-list__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 3px;
  border-radius: 2px;
  background: var(--ml-brand);
  opacity: .85;
}

.cms-list__sub {
  font-size: var(--ml-fs-13);
  letter-spacing: var(--ml-ls-wide);
  color: var(--ml-n-500);
  margin-bottom: var(--ml-sp-4);
}

/* 要点列表：去默认圆点，改品牌色方点（国际商务文档常用方点） */
.cms-list__items {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.cms-list__items li {
  position: relative;
  padding-left: var(--ml-sp-4);
  margin: 0 0 var(--ml-sp-2);
  font-size: var(--ml-fs-14);
  line-height: var(--ml-lh-base);
  color: var(--ml-n-600);
}
.cms-list__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 4px;
  height: 4px;
  background: var(--ml-brand-300);
  border-radius: 1px;
}
/* 单条内含「｜」分隔的多服务名：加大行距，避免挤成一坨 */
.cms-list__items li:first-child {
  color: var(--ml-n-700);
}

/* 桌面端图文比例：图从 320 拉到 380（保持 16:9，不裁切图内已有文字） */
@media (min-width: 860px) {
  .cms-list {
    gap: var(--ml-sp-10);
    padding: var(--ml-sp-8);
  }
  .cms-list__fig {
    flex: 0 0 380px;
  }
}

/* ============================================================================
   六、其余内容卡：统一阴影语言
   ========================================================================== */
.product-card,
.case-card,
.news-card,
.office-card,
.about__card,
.cms-card {
  border-radius: var(--ml-r-lg);
  border: var(--ml-bd-light);
  box-shadow: var(--ml-sh-sm);
  transition: transform var(--ml-dur-base) var(--ml-ease),
              box-shadow var(--ml-dur-base) var(--ml-ease);
}
.product-card:hover,
.case-card:hover,
.news-card:hover,
.office-card:hover,
.about__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ml-sh-lg);
}

/* 卡片标题统一字重与字距 */
.product-card h3,
.case-card h3,
.news-card h3,
.office-card h3,
.about__card h3 {
  font-weight: var(--ml-fw-semi);
  letter-spacing: -.01em;
  line-height: var(--ml-lh-snug);
}

/* ============================================================================
   七、页脚：商务收束
   ========================================================================== */
.footer {
  padding-top: var(--ml-sp-16);
}

.footer__brand {
  font-size: var(--ml-fs-16);
  font-weight: var(--ml-fw-bold);
  letter-spacing: var(--ml-ls-wider);
  text-transform: uppercase;
}

.footer__col h5 {
  font-size: var(--ml-fs-11);
  font-weight: var(--ml-fw-semi);
  letter-spacing: var(--ml-ls-wider);
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: var(--ml-sp-4);
}

.footer__col a {
  display: block;
  padding: var(--ml-sp-1) 0;
  font-size: var(--ml-fs-13);
  line-height: 1.6;
  transition: opacity var(--ml-dur-fast) var(--ml-ease),
              transform var(--ml-dur-fast) var(--ml-ease);
}
.footer__col a:hover {
  opacity: 1;
  transform: translateX(2px);
}

.footer__api-note {
  font-size: var(--ml-fs-12);
  line-height: 1.8;
  letter-spacing: .01em;
  opacity: .62;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .10);
  margin-top: var(--ml-sp-10);
}
.footer__bottom p {
  font-size: var(--ml-fs-12);
  line-height: 1.9;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  opacity: .72;
}

/* ============================================================================
   八、表单与表格：控件高度、聚焦、数字对齐
   ========================================================================== */
.form__input,
.form__textarea,
.form__select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
select,
textarea {
  min-height: 44px;
  border-radius: var(--ml-r-sm);
  border: 1px solid var(--ml-n-200);
  font-family: var(--ml-font-sans);
  font-size: var(--ml-fs-14);
  transition: border-color var(--ml-dur-fast) var(--ml-ease),
              box-shadow var(--ml-dur-fast) var(--ml-ease);
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ml-brand);
  box-shadow: var(--ml-sh-focus);
  outline: none;
}

.form__label,
label {
  font-size: var(--ml-fs-13);
  font-weight: var(--ml-fw-medium);
  color: var(--ml-n-700);
}

/* 轨迹查询等结果表格：数字等宽 + 行高舒适 */
table td,
table th {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   九、通用按钮体系收敛
   ========================================================================== */
.btn {
  border-radius: var(--ml-r-sm);
  font-weight: var(--ml-fw-medium);
  letter-spacing: .01em;
  transition: transform var(--ml-dur-fast) var(--ml-ease),
              box-shadow var(--ml-dur-base) var(--ml-ease),
              background var(--ml-dur-fast) var(--ml-ease),
              border-color var(--ml-dur-fast) var(--ml-ease);
}
.btn:active {
  transform: translateY(0) scale(.995);
}
.btn--primary {
  box-shadow: 0 1px 2px rgba(22, 93, 255, .16);
}
.btn--primary:hover {
  box-shadow: 0 6px 16px rgba(22, 93, 255, .24);
}

/* ============================================================================
   十、国际化：英文态与双语排版
   ----------------------------------------------------------------------------
   i18n.js 切换语言时会给 <html> 加 lang 属性；这里只在英文态调整排版细节，
   不改任何文案（文案仍由 js/i18n.js 词典提供）。
   ========================================================================== */
html[lang="en"] body,
html[lang="en-US"] body {
  letter-spacing: var(--ml-ls-tight);
}
html[lang="en"] .hero__title,
html[lang="en-US"] .hero__title {
  letter-spacing: -.025em;
  line-height: 1.1;
}
html[lang="en"] .section__subtitle,
html[lang="en-US"] .section__subtitle {
  letter-spacing: .12em;
}
/* 英文态下中文标点特有的「。」「、」不参与排版挤压 */
html[lang="en"] .cms-list__items li,
html[lang="en-US"] .cms-list__items li {
  line-height: 1.72;
}

/* 双语并排（中文主 + 英文辅）：用于页脚、区块引子 */
.ml-bi__en,
.lang-en {
  font-size: .82em;
  letter-spacing: var(--ml-ls-wide);
}

/* 合规备注（一切以中文为准）：降噪成注释级，不抢主体 */
.legal-note {
  border-left: 3px solid var(--ml-n-300);
  background: var(--ml-n-50);
  border-radius: var(--ml-r-sm);
  font-size: var(--ml-fs-12);
  line-height: 1.8;
  color: var(--ml-n-500);
}

/* ============================================================================
   十一、移动端微调（390px 起）
   ========================================================================== */
@media (max-width: 640px) {
  .section__title {
    font-size: 1.5rem;
    padding-left: var(--ml-sp-3);
  }
  .section__subtitle {
    padding-left: var(--ml-sp-3);
    letter-spacing: var(--ml-ls-wide);
  }
  .cms-list {
    padding: var(--ml-sp-4);
    border-radius: var(--ml-r-md);
  }
  .cms-list__title {
    font-size: var(--ml-fs-16);
  }
  .hero__cta .btn {
    height: 42px;
    font-size: var(--ml-fs-13);
  }
  .footer {
    padding-top: var(--ml-sp-12);
  }
}

/* ============================================================================
   [V5.10-BTT] 回到顶部按钮让位给 AI 客服悬浮球
   ----------------------------------------------------------------------------
   问题：.mlai-root（AI 悬浮球）z-index 为 2147482000，占据右下角 bottom 22~94px；
        .back-to-top 仅 z-index 900，原 bottom 28px ⇒ 被完全盖住、点不到。
   做法：只把按钮上移，不改 AI 组件、不改 css/style.css。
   实测：桌面按钮占 100~142、手机占 88~126，均与 AI 球留出间隙。
   ============================================================================ */
.back-to-top {
  bottom: 100px;
}

@media (max-width: 640px) {
  .back-to-top {
    bottom: 88px;
  }
}