@charset "utf-8";
/* =============================================================================
   建岑企服 · Design Token 系统  (tokens.css)
   -----------------------------------------------------------------------------
   全站唯一的「硬编码值来源」。除本文件外，任何 CSS 不得直接书写颜色、字号、
   间距、圆角、阴影、动效时长等字面量——必须引用本文件定义的变量。
   -----------------------------------------------------------------------------
   版本：v3.0.0   目录：/zhenxing/jianc12/css/tokens.css
   ============================================================================= */

/* =============================================================================
   1. 色彩系统 COLOR
   -----------------------------------------------------------------------------
   设计约束：主色 1 个（品牌青绿）+ 辅助强调色 1 个（转化橙）+ 5 阶中性灰
   + 1 个成功色 + 1 个警告色。全站色值种类 ≤ 16。
   ============================================================================= */
:root {
  /* ---- 1.1 主色 Primary（品牌青绿 #198e7d） ---- */
  --c-primary:            #198e7d;
  --c-primary-hover:      #167668;
  --c-primary-active:     #0f6b5d;
  --c-primary-light:      #4fb3a4;   /* 深底上的主色（保证对比度 ≥ 4.5:1） */
  --c-primary-soft:       #e6f4f2;   /* 主色浅底：标签、提示条 */
  --c-primary-mute:       #c8e7e3;   /* 主色描边、分隔线 */
  --c-primary-bg:         #f4faf9;   /* 主色极浅底：整块浅色区块 */

  /* ---- 1.2 辅助强调色 Accent（转化橙 #ff6900，仅用于 CTA / 价格 / 角标） ---- */
  --c-accent:             #ff6900;
  --c-accent-hover:       #e85d00;
  --c-accent-active:      #cf5200;
  --c-accent-soft:        #fff3ea;
  --c-accent-light:       #ff8a3d;   /* 强调色亮端：TOP 角标渐变起点 */

  /* ---- 1.3 中性灰阶 Neutral（5 阶） ---- */
  --c-gray-1:             #111111;   /* 最强标题 */
  --c-gray-2:             #333333;   /* 正文、次级标题 */
  --c-gray-3:             #666666;   /* 辅助说明 */
  --c-gray-4:             #999999;   /* 弱化文字（对比度 ≥ 3:1，仅用于非关键信息） */
  --c-gray-5:             #eeeeee;   /* 分隔线、描边 */

  /* ---- 1.4 语义色 Semantic ---- */
  --c-success:            #3fae5c;   /* 成功 / 达标 / 认证 */
  --c-success-soft:       #f7fbf4;   /* 成功浅底：保障类标签底色 */
  --c-success-line:       #e0efe0;   /* 成功浅描边：保障类标签描边 */
  --c-warning:            #f5a623;   /* 提醒 / HOT 角标 */
  --c-danger:             #e63946;   /* 错误 / 必填 */
  --c-info:               #2e6474;   /* 信息提示（低饱和，不抢主色） */

  /* ---- 1.5 表面 Surface ---- */
  --c-white:              #ffffff;
  --c-bg:                 #ffffff;   /* 页面主背景 */
  --c-bg-soft:            #f6f9f8;   /* 浅灰区块底 */
  --c-bg-mute:            #f0f6f2;   /* 浅青区块底 */
  --c-bg-dark:            #1a1b1d;   /* 深色区块底（页脚 / 深底 CTA） */
  --c-bg-mask:            rgba(17, 17, 17, .45);  /* 遮罩 */

  /* ---- 1.6 描边 Border ---- */
  --c-border:             #e8eeec;   /* 默认卡片描边 */
  --c-border-strong:      #d5e3e0;   /* 强调描边 / hover 描边 */
  --c-border-dark:        rgba(255, 255, 255, .12); /* 深底上的描边 */

  /* ---- 1.7 文字语义映射 Text ---- */
  --t-strong:             var(--c-gray-1);  /* H1 / 强调数值 */
  --t-title:              var(--c-gray-2);  /* H2 / H3 / 正文 */
  --t-body:               var(--c-gray-2);  /* 正文 */
  --t-assist:             var(--c-gray-3);  /* 辅助说明 */
  --t-weak:               var(--c-gray-4);  /* 日期 / 元信息 */
  --t-on-primary:         var(--c-white);   /* 主色底上的文字 */
  --t-on-dark:            rgba(255, 255, 255, .72);
  --t-on-dark-strong:     var(--c-white);
  --t-link:               var(--c-primary);
  --t-link-hover:         var(--c-primary-hover);

  /* ---- 1.8 图标 Icon ---- */
  --i-primary:            var(--c-primary);
  --i-assist:             var(--c-gray-4);
  --i-on-dark:            rgba(255, 255, 255, .6);

  /* =============================================================================
     2. 字体系统 TYPOGRAPHY
     -----------------------------------------------------------------------------
     7 级字阶，移动端按比例缩放（媒体查询中覆写）。
     ============================================================================= */

  /* ---- 2.1 字体族 ---- */
  --ff-base: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
             "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-number: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;

  /* ---- 2.2 字阶（7 级） ---- */
  --fs-h1:      32px;   /* 页面主标题 / 大数字 */
  --fs-h2:      24px;   /* 区块标题 */
  --fs-h3:      18px;   /* 卡片标题 / 小标题 */
  --fs-h4:      16px;   /* 次级小标题 */
  --fs-body:    15px;   /* 正文 */
  --fs-assist:  13px;   /* 辅助信息 */
  --fs-note:    12px;   /* 说明 / 角标 / 版权 */

  /* ---- 2.3 字重 ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- 2.4 行高 ---- */
  --lh-tight:   1.3;    /* 标题 */
  --lh-normal:  1.6;    /* 常规 */
  --lh-loose:   1.8;    /* 长文正文 */

  /* ---- 2.5 字间距 ---- */
  --ls-tight:  -.2px;
  --ls-normal:  0;
  --ls-wide:    .5px;

  /* =============================================================================
     3. 间距系统 SPACING（8px 基线）
     ============================================================================= */
  --sp-0:   0;
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  80px;

  /* ---- 3.1 场景化间距别名 ---- */
  --sec-py:        64px;  /* 区块上下留白（PC 标准） */
  --sec-py-lg:     80px;  /* 区块上下留白（强调块） */
  --sec-py-sm:     48px;  /* 区块上下留白（紧凑块） */
  --card-p:        24px;  /* 卡片内间距 */
  --card-p-sm:     16px;  /* 卡片内间距（紧凑） */
  --grid-gap:      24px;  /* 栅格列间距 */
  --grid-gap-sm:   16px;  /* 栅格列间距（紧凑） */
  --stack:         16px;  /* 纵向元素堆叠间距 */
  --stack-sm:       8px;  /* 纵向元素紧密堆叠 */

  /* =============================================================================
     4. 圆角系统 RADIUS（4 档）
     ============================================================================= */
  --r-none:   0;
  --r-sm:     4px;   /* 标签、小按钮、徽标 */
  --r-md:     8px;   /* 卡片、输入框、常规按钮 —— 全站卡片统一值 */
  --r-lg:    16px;   /* 大卡、弹层、促销区块 */
  --r-pill: 999px;   /* 胶囊（Tab、分页） */
  --r-circle: 50%;   /* 圆形（头像、图标底） */

  /* =============================================================================
     5. 阴影系统 SHADOW（3 档）
     ============================================================================= */
  --sd-card:  0 1px 3px rgba(17, 26, 24, .05), 0 1px 2px rgba(17, 26, 24, .03);
  --sd-hover: 0 8px 24px rgba(17, 26, 24, .10), 0 2px 6px rgba(17, 26, 24, .05);
  --sd-nav:   0 4px 16px rgba(17, 26, 24, .08);
  --sd-focus: 0 0 0 3px rgba(25, 142, 125, .18);
  --sd-panel: 0 12px 32px rgba(17, 26, 24, .14);
  --sd-none:  none;

  /* =============================================================================
     6. 动效系统 MOTION
     ============================================================================= */
  --dur-fast:   .16s;
  --dur:        .25s;                 /* 全站统一过渡时长 */
  --dur-slow:   .4s;
  --ease:       ease;
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --t-all:      all var(--dur) var(--ease);          /* 通用四态过渡 */
  --t-color:    color var(--dur) var(--ease), background-color var(--dur) var(--ease),
                 border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  --t-transform: transform var(--dur) var(--ease-out);
  --t-card:     transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease),
                 border-color var(--dur) var(--ease);

  /* =============================================================================
     7. 层级系统 Z-INDEX（4 层）
     ============================================================================= */
  --z-base:     1;
  --z-raise:    10;
  --z-sticky:  100;   /* 吸顶导航 */
  --z-overlay: 900;   /* 遮罩 / 抽屉 */
  --z-modal:  1000;   /* 弹层 / 返回顶部 */

  /* =============================================================================
     8. 布局系统 LAYOUT
     ============================================================================= */
  --container:      1289px;  /* 全站统一内容宽度（参照设计稿量取 1289） */
  --container-wide: 1440px;
  --container-pad:    24px;  /* 容器左右内边距（PC） */
  --grid-cols:         12;   /* 12 列虚拟栅格 */
  --header-h:         80px;  /* 主导航高度 */
  --topbar-h:         40px;  /* 顶部信息栏高度 */
  --touch-min:        44px;  /* 移动端最小触摸目标 */

  /* =============================================================================
     9. 组件尺寸 COMPONENT SIZE
     ============================================================================= */
  --btn-h-lg:     48px;
  --btn-h:        40px;
  --btn-h-sm:     32px;
  --btn-px:       24px;
  --btn-px-sm:    16px;
  --input-h:      48px;
  --input-h-sm:   40px;
  --tab-h:        44px;
  --radius-card:  var(--r-md);
}

/* =============================================================================
   10. 响应式覆写 RESPONSIVE OVERRIDES
   -----------------------------------------------------------------------------
   断点体系：1440 / 1200 / 1024 / 768 / 480
   ============================================================================= */

/* ---- 10.1 大屏 ≤ 1440：容器保持 1200，仅放宽容器边距 ---- */
@media screen and (max-width: 1440px) {
  :root { --container-pad: 24px; }
}

/* ---- 10.2 笔记本 ≤ 1200：容器流式，区块留白降一档 ---- */
@media screen and (max-width: 1200px) {
  :root {
    --container: 100%;
    --sec-py:    56px;
    --sec-py-lg: 64px;
    --sec-py-sm: 40px;
  }
}

/* ---- 10.3 平板 ≤ 1024：区块留白降至 48/56 ---- */
@media screen and (max-width: 1024px) {
  :root {
    --sec-py:    48px;
    --sec-py-lg: 56px;
    --sec-py-sm: 32px;
    --card-p:    20px;
    --grid-gap:  20px;
    --container-pad: 20px;
  }
}

/* ---- 10.4 手机 ≤ 768：字阶整体下调，留白降至 40 ---- */
@media screen and (max-width: 768px) {
  :root {
    /* 字阶按移动端比例缩放 */
    --fs-h1:      24px;
    --fs-h2:      20px;
    --fs-h3:      16px;
    --fs-h4:      15px;
    --fs-body:    14px;
    --fs-assist:  13px;
    --fs-note:    12px;

    /* 间距节奏 */
    --sec-py:    40px;
    --sec-py-lg: 48px;
    --sec-py-sm: 32px;
    --card-p:    16px;
    --card-p-sm: 12px;
    --grid-gap:  16px;
    --grid-gap-sm: 12px;
    --container-pad: 16px;

    /* 组件尺寸（触摸友好） */
    --btn-h-lg:  48px;
    --btn-h:     44px;
    --btn-h-sm:  36px;
    --input-h:   48px;
    --tab-h:     44px;
    --header-h:  56px;
  }
}

/* ---- 10.5 小屏手机 ≤ 480 ---- */
@media screen and (max-width: 480px) {
  :root {
    --sec-py:    32px;
    --sec-py-lg: 40px;
    --sec-py-sm: 24px;
    --container-pad: 12px;
    --grid-gap:  12px;
  }
}

/* =============================================================================
   11. 基础重置 RESET
   ============================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--t-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { border-style: none; }

a {
  color: var(--t-link);
  text-decoration: none;
  transition: var(--t-color);
}
a:hover { color: var(--t-link-hover); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
textarea { resize: vertical; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-3) 0;
}

strong, b { font-weight: var(--fw-semibold); }

/* 表单元素统一外观基线 */
input, select, textarea {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: var(--t-color);
}

/* 焦点可见性（无障碍 + 键盘导航） */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 选中态 */
::selection {
  background: var(--c-primary);
  color: var(--c-white);
}

/* 占位符 */
::-webkit-input-placeholder { color: var(--c-gray-4); }
::-moz-placeholder { color: var(--c-gray-4); opacity: 1; }
:-ms-input-placeholder { color: var(--c-gray-4); }

/* =============================================================================
   12. 可访问性工具类 UTILITY
   ============================================================================= */
.blind,
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 文本截断 */
.u-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-clamp-1,
.u-clamp-2,
.u-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.u-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* 隐藏 / 显示 */
.u-hide { display: none !important; }
@media screen and (max-width: 768px) {
  .u-hide-mobile { display: none !important; }
}
@media screen and (min-width: 769px) {
  .u-hide-pc { display: none !important; }
}

/* =============================================================================
   13. 降低动效偏好 RESPECT USER PREFERENCE
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   14. 打印 PRINT
   ============================================================================= */
@media print {
  .jm-header, .common-footer, .jm-back-top, .jm-mnav-mask { display: none !important; }
  body { color: #000; background: #fff; }
  a { text-decoration: underline; color: #000; }
}