/* =====================================================================
   深墨青模板 · 设计令牌与基础样式
   ===================================================================== */

/* =====================================================================
   高端企业级配色
   ---------------------------------------------------------------------
   三个关键决定：
     1. 底色从纯黑改成**深藏蓝**（#0A1020 系）。纯黑偏「极客」，深蓝才
        是金融/企业级官网的通用底色，也更显贵。
     2. 主色降低饱和度（#2FE0C0 -> #2BC4A8）。高饱和霓虹感廉价，
        收敛之后才稳重。
     3. 新增**香槟金**作为点缀色，用在编号、徽标、分隔线上。
        金 + 深蓝是最不容易出错的高端组合。
   ===================================================================== */
:root {
  /* 墨色阶梯（偏蓝的深色，不再是纯黑） */
  --ink-900: #080D18;
  --ink-850: #0A1020;
  --ink-800: #0D1526;
  --ink-750: #111A2E;
  --ink-700: #162034;
  --ink-600: #1F2B42;
  --ink-500: #2A3852;
  --ink-400: #3D4C68;
  --ink-300: #5D6B84;
  --ink-200: #8A94A8;
  --ink-100: #C2C9D6;

  /* 主色：降饱和的翡翠青，稳重不刺眼 */
  --brand-300: #7FDCC9;
  --brand-400: #2BC4A8;
  --brand-500: #17A88E;
  --brand-600: #0E8471;

  /* 香槟金：企业级点缀色 */
  --gold-300: #F0DFB8;
  --gold-400: #D9BC82;
  --gold-500: #C09B57;
  --gold-600: #9A7738;

  /* 语义变量 */
  --bg: var(--ink-900);
  --bg-alt: var(--ink-800);
  --surface: rgba(255, 255, 255, .028);
  --surface-2: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .17);
  --fg: #F3F5F8;
  --fg-2: #A8B2C4;
  --fg-3: #6B7688;
  --accent: var(--brand-400);
  --accent-soft: rgba(43, 196, 168, .12);
  --accent-fg: #05231D;
  --gold: var(--gold-400);

  /* 阴影：从「硬偏移」改成「柔和光晕」，这是高端感的关键之一 */
  --shadow-hard: 0 24px 60px -20px rgba(0, 0, 0, .65);
  --shadow-accent: 0 28px 70px -24px rgba(43, 196, 168, .30);
  --shadow-soft: 0 16px 40px -18px rgba(0, 0, 0, .5);

  /* 描边：1px 半透明金/白，比粗边框精致 */
  --hairline: 1px solid rgba(255, 255, 255, .08);
  --hairline-gold: 1px solid rgba(217, 188, 130, .28);

  /* 圆角：企业级普遍用「小圆角」，直角显硬、大圆角显轻浮 */
  --radius: 2px;
  --radius-lg: 4px;

  --maxw: 1260px;

  --ink-800: #0A0F17;
  --ink-700: #101823;
  --ink-600: #18222F;
  --ink-500: #24303F;
  --ink-400: #3A4859;
  --ink-300: #5C6B7E;
  --ink-200: #8B98A8;
  --ink-100: #C3CBD6;

  /* 功能色 */
  --danger-500: #E05A5F;
  --ok-500: #34A853;
  --violet-500: #5B5BD6;

  /* 字体：不引外部字体，避免 CDN 依赖与首屏闪烁 */
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --maxw: 1240px;
  --shadow-hard: 8px 8px 0 rgba(0, 0, 0, .55);
  --shadow-accent: 10px 10px 0 rgba(47, 224, 192, .22);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 620ms;
}

/* ------------------------------ 重置 ------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

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

body.jk {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.jk h1,
body.jk h2,
body.jk h3,
body.jk h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  /* 中文衬线字体墨迹偏高，行高低于 1.3 会与相邻元素视觉相撞 */
  line-height: 1.32;
  letter-spacing: -.02em;
}

body.jk p { margin: 0; }
body.jk img { max-width: 100%; display: block; border: 0; }
body.jk ul,
body.jk ol { margin: 0; padding: 0; list-style: none; }
body.jk button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
body.jk svg { fill: none; }
body.jk table { border-collapse: collapse; width: 100%; }

/* 链接只去下划线与默认蓝；权重保持低位，避免压过组件自身的 color */
.jk a { color: inherit; text-decoration: none; }
.jk a:hover { text-decoration: none; }
.jk a:focus-visible,
.jk button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.jk ::selection { background: var(--accent); color: var(--accent-fg); }

.jk ::-webkit-scrollbar { width: 10px; height: 10px; }
.jk ::-webkit-scrollbar-track { background: var(--bg-alt); }
.jk ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.jk ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ------------------------------ 版式工具 ------------------------------ */
.jk-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.jk-center { margin-top: var(--sp-8); text-align: center; }

.jk-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

.jk-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.jk-eyebrow__idx {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; padding: 5px 10px;
  background: transparent; color: var(--gold);
  border: 1px solid rgba(217, 188, 130, .45);
  border-radius: var(--radius);
}
.jk-eyebrow__txt {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--fg-3);
}
.jk-eyebrow--accent .jk-eyebrow__idx { border-color: rgba(43, 196, 168, .5); color: var(--accent); }

.jk-sechead { max-width: 880px; margin-bottom: var(--sp-8); }
.jk-sechead--center { margin-left: auto; margin-right: auto; text-align: center; }
.jk-sectitle {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.42; padding-bottom: .08em;   /* 同首屏标题：吸收中文字体溢出 */
  text-wrap: balance;
}
.jk-sectitle em {
  font-style: normal; position: relative; color: var(--fg);
}
.jk-sectitle em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em;
  height: 1px; background: linear-gradient(to right,
    rgba(217, 188, 130, .75), rgba(217, 188, 130, 0));
  z-index: -1;
}
.jk-secdesc {
  margin-top: var(--sp-5); font-size: 17px; color: var(--fg-2);
  line-height: 1.85; max-width: 62ch;
}
.jk-sechead--center .jk-secdesc { margin-left: auto; margin-right: auto; }

/* ------------------------------ 按钮 ------------------------------ */
/* 文字色与底色成对锁定并加 !important：
   避免被页面级链接色或商户自定义样式覆盖，导致浅底浅字看不见 */
.jk-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  background: var(--fg) !important;
  color: var(--bg) !important;
  letter-spacing: .04em;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) linear, color var(--t-fast) linear;
}
.jk-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.jk-btn:active { transform: translateY(0); }
.jk-btn__arrow { transition: transform var(--t-mid) var(--ease); }
.jk-btn:hover .jk-btn__arrow { transform: translateX(4px); }
.jk-btn__ico { width: 15px; height: 15px; stroke: currentColor; flex: 0 0 auto; }

.jk-btn--accent {
  background: var(--accent) !important; color: var(--accent-fg) !important;
  border-color: var(--accent);
}
.jk-btn--accent:hover { box-shadow: 0 12px 30px -10px rgba(43, 196, 168, .5); }

.jk-btn--ghost {
  background: transparent !important; color: var(--fg) !important;
  border-color: var(--line-strong); box-shadow: none;
}
.jk-btn--ghost:hover { border-color: var(--accent); color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: none; }

.jk-btn--line {
  background: transparent !important; color: inherit !important;
  border-color: currentColor; box-shadow: none; opacity: .85;
}
.jk-btn--line:hover { opacity: 1; box-shadow: none; }

.jk-btn--sm { padding: 10px 18px; font-size: 13.5px; }
.jk-btn--lg { padding: 17px 34px; font-size: 16px; }
.jk-btn--block { width: 100%; margin-top: var(--sp-4); }

/* ------------------------------ 入场动效 ------------------------------
   加法设计：元素默认是**完全可见**的，「先隐藏再动画显示」只在
   html.jk-anim 存在时生效。而 jk-anim 由脚本在启动时添加。

   这样保证：
     · 脚本没加载 / 报错 / 被拦截 —— 内容照常显示
     · 用户开了「减少动态效果」    —— 内容照常显示
   动画只是锦上添花，绝不能成为「看见内容」的前提。
   ---------------------------------------------------------------------- */
.jk-anim .jk-rise { opacity: 0; }
.jk-anim .jk-rise.is-in { animation: jkRise .9s var(--ease) both; }
@keyframes jkRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.jk-anim .jk-rise[data-d="1"] { animation-delay: .08s; }
.jk-anim .jk-rise[data-d="2"] { animation-delay: .16s; }
.jk-anim .jk-rise[data-d="3"] { animation-delay: .24s; }
.jk-anim .jk-rise[data-d="4"] { animation-delay: .32s; }
.jk-anim .jk-rise[data-d="5"] { animation-delay: .40s; }

/* ------------------------------ 跑马灯关键帧 ------------------------------ */
/* 轨道内容由 JS 复制一份，位移距离由 --jk-shift 注入，实现无缝衔接 */
@keyframes jkMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(var(--jk-shift, -50%)); }
}

/* 无 JS 兜底 */
.no-js .jk-rise { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .jk-rise { opacity: 1 !important; }
}