/* ============================================================
   STARXB 跨境服务 · 设计系统
   ────────────────────────────────────────────────────────────
   定调：工业实用（Industrial / utilitarian）
     仪表盘密度 · 等宽数字 · 发丝边框 · 状态色体系
   记忆点：12 环节链路 + 3D 朋友圈星系

   主色   #081848  深藏青（取自 logo 实测，非凭空指定）
   强调   #165DFF  电光蓝（同色族、更亮锐利，只给关键动作）
   功能   #07C160  微信绿（第三方品牌色，不占强调色名额）
   ============================================================ */

:root{
  --navy:#081848;
  --navy-700:#0C2158;
  --navy-500:#14306E;
  --navy-300:#2A4A8C;
  --navy-050:#EEF2FA;
  --navy-025:#F6F8FC;

  --accent:#165DFF;
  --accent-dark:#0E4BD1;
  --accent-050:#EEF3FF;

  --wechat:#07C160;

  /* ---- 分类色（色彩编码系统）------------------------------------------
     工业实用方向的标准配置是「状态色体系」。原先全站只有藏青 + 电光蓝，
     信息层级只能靠灰阶区分 → 单调。这里补入 5 支分类色：
       · 同一明度/饱和度区间，看起来是一套而不是拼凑
       · 每支带 -ink（深，正文字级≥4.5:1）与 -soft（浅色调底）两个衍生
       · 只用于 ≤16px 细栏 / 徽章 / 浅底，绝不做大面积填充（守 60/30/10）
     语义：a1 服务与平台 · a2 覆盖与生态 · a3 流程与时效 · a4 优势与差异 · a5 问题与提醒
     ------------------------------------------------------------------- */
  --a1:#165DFF; --a1-ink:#0B3FCC; --a1-soft:#EDF2FF;
  --a2:#0E9384; --a2-ink:#07695E; --a2-soft:#E6F5F3;
  --a3:#C97A0E; --a3-ink:#8A5306; --a3-soft:#FCF3E4;
  --a4:#6D4AE0; --a4-ink:#4A2FB0; --a4-soft:#F1EEFE;
  --a5:#C93A6E; --a5-ink:#93214C; --a5-soft:#FCEDF2;
  /* 光谱：用于区块/页脚的分章细线，是"这是一套系统"的视觉签名 */
  --spectrum:linear-gradient(90deg,
    var(--a1) 0%, var(--a2) 25%, var(--a3) 50%, var(--a4) 75%, var(--a5) 100%);
  /* --A* 为「当前作用域的分类色」，由 [data-ac] / nth-child 覆盖 */
  --A:var(--a1); --A-ink:var(--a1-ink); --A-soft:var(--a1-soft);

  --ink:#0B1734;
  --ink-2:#41506E;
  --ink-3:#7A89A6;
  --line:#E3E8F2;
  --line-2:#CDD6E6;
  --bg:#FFFFFF;
  --bg-alt:#F8FAFD;

  --font-cn:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  --font-num:"Bahnschrift","DIN Alternate","Arial Narrow",var(--font-cn);

  --t-xs:12px; --t-sm:13.5px; --t-base:15px; --t-md:17px;
  --t-lg:21px; --t-xl:26px; --t-2xl:33px; --t-3xl:41px; --t-4xl:52px;

  --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:34px; --s6:52px; --s7:80px;

  --radius:10px; --radius-s:7px; --radius-l:16px;
  --wrap:1120px;

  --sh1:0 2px 8px rgba(8,24,72,.06);
  --sh2:0 8px 26px rgba(8,24,72,.10);
  --sh3:0 24px 60px rgba(8,24,72,.16);

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:170ms; --dur-base:320ms; --dur-slow:640ms;

  --header-h:66px;
}

/* ---------- 分类色作用域 ----------
   给任意容器加 data-ac="1..5"，其内部组件即自动取用它。
   组件一律通过 var(--A)/var(--A-ink)/var(--A-soft) 取色，不在组件里写死色值。 */
[data-ac="1"]{--A:var(--a1);--A-ink:var(--a1-ink);--A-soft:var(--a1-soft)}
[data-ac="2"]{--A:var(--a2);--A-ink:var(--a2-ink);--A-soft:var(--a2-soft)}
[data-ac="3"]{--A:var(--a3);--A-ink:var(--a3-ink);--A-soft:var(--a3-soft)}
[data-ac="4"]{--A:var(--a4);--A-ink:var(--a4-ink);--A-soft:var(--a4-soft)}
[data-ac="5"]{--A:var(--a5);--A-ink:var(--a5-ink);--A-soft:var(--a5-soft)}

/* 光谱细线：作为"分章"标记，也是整套色彩系统的签名 */
.spectrum-bar{height:3px;width:100%;background:var(--spectrum);border:0;display:block}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--font-cn);
  font-size:var(--t-base);
  line-height:1.75;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.num,time,.stat-n{font-family:var(--font-num);font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.atmosphere{position:fixed;inset:0;pointer-events:none;z-index:0}
.atmosphere::before{
  content:"";position:absolute;inset:0;
  /* 五色低透明网格：让底色不再是"死白"，同时远低于影响文字对比度的阈值 */
  background:
    radial-gradient(58rem 38rem at 6% -14%, rgba(8,24,72,.10), transparent 62%),
    radial-gradient(48rem 34rem at 98% 2%, rgba(22,93,255,.11), transparent 58%),
    radial-gradient(42rem 30rem at 84% 46%, rgba(14,147,132,.075), transparent 60%),
    radial-gradient(38rem 28rem at 10% 72%, rgba(201,122,14,.065), transparent 60%),
    radial-gradient(34rem 26rem at 62% 98%, rgba(109,74,224,.075), transparent 62%),
    radial-gradient(30rem 22rem at 30% 38%, rgba(201,58,110,.045), transparent 60%);
}
/* 工业底纹：64px 细网格 + 每 320px 一条稍重的基线 */
.atmosphere::after{
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:
    linear-gradient(to right, rgba(8,24,72,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8,24,72,.030) 1px, transparent 1px),
    linear-gradient(to right, rgba(8,24,72,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8,24,72,.045) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px, 320px 320px, 320px 320px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 46%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 46%,#000 100%);
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.page{position:relative;z-index:2}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:20px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-logo{height:26px;width:auto;display:block}
.brand-sep{width:1px;height:20px;background:var(--line-2)}
.brand-sub{font-size:var(--t-sm);color:var(--ink-2);letter-spacing:.08em;font-weight:500}
.site-nav{display:flex;gap:24px;flex-wrap:wrap}
.site-nav a{font-size:var(--t-sm);color:var(--ink-2);transition:color var(--dur-fast) ease-out;white-space:nowrap;position:relative;padding:4px 0}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right var(--dur-base) var(--ease-out)}
.site-nav a:hover{color:var(--navy)}
.site-nav a:hover::after{right:0}
.site-nav a.active{color:var(--navy);font-weight:700}
.site-nav a.active::after{right:0}
.header-cta{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  background:var(--wechat);color:#fff;font-size:var(--t-sm);font-weight:600;
  padding:9px 16px;border-radius:999px;min-height:38px;border:0;cursor:pointer;
  transition:transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
}
.header-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(7,193,96,.6)}
.header-cta svg{width:15px;height:15px;fill:#fff}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-s);
  font-size:var(--t-base);font-weight:600;min-height:46px;
  transition:background var(--dur-fast) ease-out, transform var(--dur-fast) ease-out,
             box-shadow var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
  cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh1)}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:var(--sh2)}
.btn-ghost{border-color:var(--line-2);color:var(--navy);background:#fff}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-wx{background:var(--wechat);color:#fff}
.btn-wx:hover{background:#06AD56;transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(7,193,96,.7)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s5)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
  color:var(--A-ink);background:var(--A-soft);
  padding:6px 13px;border-radius:999px;margin-bottom:var(--s4);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--A);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--A) 18%, transparent)}

/* ---------- Hero ---------- */
.hero{padding:96px 0 76px;position:relative;overflow:hidden}
.hero h1{
  font-size:clamp(30px,4.6vw,var(--t-4xl));
  line-height:1.22;font-weight:800;letter-spacing:-.02em;
  color:var(--navy);max-width:17em;
}
/* 关键短语用「荧光笔色带」着色：不改字体、不换字色，层级不动，只加一层色
   （比整句渐变克制，也不会踩"白底蓝渐变"那条反 AI 味红线） */
.hero h1 .hl{position:relative;white-space:nowrap;
  background-image:linear-gradient(180deg,transparent 64%,rgba(22,93,255,.22) 64%);
  background-repeat:no-repeat;background-size:100% 100%;padding:0 .06em}
.hero h1 .hl::after{
  content:"";position:absolute;left:.06em;right:.06em;bottom:.02em;height:2px;
  background:var(--spectrum);border-radius:2px;opacity:.85;
}
.hero-sub{margin-top:var(--s4);font-size:clamp(15px,1.55vw,var(--t-md));color:var(--ink-2);max-width:38em}
.hero-sub strong{color:var(--navy);font-weight:700}

.hero-stats{
  display:flex;gap:0;flex-wrap:wrap;margin-top:var(--s6);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;box-shadow:var(--sh1);
}
.hero-stat{flex:1 1 150px;padding:18px 22px 16px;border-right:1px solid var(--line);position:relative}
/* 每个数据一格一色：顶部 3px 色栏 + 数字同色 → 一屏内就有了色彩节奏 */
.hero-stat::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--A);opacity:.9}
.hero-stat:last-child{border-right:0}
.stat-n{font-size:var(--t-xl);font-weight:800;color:var(--A-ink);line-height:1.1;letter-spacing:-.01em}
.stat-l{font-size:var(--t-xs);color:var(--ink-3);margin-top:5px;letter-spacing:.04em}
.hero-stat:nth-child(1){--A:var(--a1);--A-ink:var(--a1-ink);--A-soft:var(--a1-soft)}
.hero-stat:nth-child(2){--A:var(--a2);--A-ink:var(--a2-ink);--A-soft:var(--a2-soft)}
.hero-stat:nth-child(3){--A:var(--a3);--A-ink:var(--a3-ink);--A-soft:var(--a3-soft)}
.hero-stat:nth-child(4){--A:var(--a4);--A-ink:var(--a4-ink);--A-soft:var(--a4-soft)}
.hero-stat:nth-child(5){--A:var(--a5);--A-ink:var(--a5-ink);--A-soft:var(--a5-soft)}

/* ---------- Section ---------- */
.section{padding:var(--s7) 0;position:relative}
.section-alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* 交替区块用一条 3px 光谱线分章——整套色彩系统的签名 */
.section-alt::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  background:var(--spectrum);opacity:.9}
.section-head{margin-bottom:var(--s5);max-width:52em}
/* kicker：前置一道 18px 色条 + 同色文字，让每个区块有自己的色彩身份 */
.section-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  color:var(--A-ink);margin-bottom:11px;
}
.section-kicker::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--A)}
.section-title{font-size:clamp(22px,2.7vw,var(--t-2xl));font-weight:800;color:var(--navy);letter-spacing:-.015em;line-height:1.3}
.section-desc{margin-top:12px;font-size:var(--t-base);color:var(--ink-2)}

/* 每个区块一色（与 hero 数据带同一套语义） */
#services{--A:var(--a1);--A-ink:var(--a1-ink);--A-soft:var(--a1-soft)}
#platforms{--A:var(--a2);--A-ink:var(--a2-ink);--A-soft:var(--a2-soft)}
#process{--A:var(--a3);--A-ink:var(--a3-ink);--A-soft:var(--a3-soft)}
#why{--A:var(--a4);--A-ink:var(--a4-ink);--A-soft:var(--a4-soft)}
#faq{--A:var(--a5);--A-ink:var(--a5-ink);--A-soft:var(--a5-soft)}
#blog{--A:var(--a2);--A-ink:var(--a2-ink);--A-soft:var(--a2-soft)}
#cta{--A:var(--a1);--A-ink:var(--a1-ink);--A-soft:var(--a1-soft)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:14px}
.card{
  position:relative;padding:24px 24px 22px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  transition:border-color var(--dur-fast) ease-out, box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
  display:block;overflow:hidden;
}
/* 卡片顶栏：一格一色，是"这是一套编码系统"的最小视觉单位 */
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--A);opacity:.55;transition:opacity var(--dur-fast) ease-out;
}
a.card:hover{border-color:var(--A);box-shadow:0 10px 30px -12px color-mix(in srgb, var(--A) 42%, transparent);transform:translateY(-3px)}
a.card:hover::before{opacity:1}
a.card:hover h3{color:var(--A-ink)}
.card h3{font-size:var(--t-md);font-weight:700;color:var(--navy);margin-bottom:8px;transition:color var(--dur-fast) ease-out}
.card p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.7}
.card .num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 7px;border-radius:6px;
  background:var(--A-soft);color:var(--A-ink);
  box-shadow:inset 2px 0 0 var(--A);
  font-size:var(--t-xs);font-weight:800;margin-bottom:14px;letter-spacing:.02em;
}
.card::after{
  content:"";position:absolute;top:0;right:0;width:16px;height:16px;
  border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);
  border-top-right-radius:var(--radius);opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
a.card:hover::after{opacity:1;border-color:var(--A)}

/* 12 环节是一条链 → 5 色循环着色，滚动时形成一条色彩序列 */
#services .grid .card:nth-child(5n+1){--A:var(--a1);--A-ink:var(--a1-ink);--A-soft:var(--a1-soft)}
#services .grid .card:nth-child(5n+2){--A:var(--a2);--A-ink:var(--a2-ink);--A-soft:var(--a2-soft)}
#services .grid .card:nth-child(5n+3){--A:var(--a3);--A-ink:var(--a3-ink);--A-soft:var(--a3-soft)}
#services .grid .card:nth-child(5n+4){--A:var(--a4);--A-ink:var(--a4-ink);--A-soft:var(--a4-soft)}
#services .grid .card:nth-child(5n+5){--A:var(--a5);--A-ink:var(--a5-ink);--A-soft:var(--a5-soft)}

/* ---------- 服务项目条目 ---------- */
.svc{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:28px 0 28px 18px;border-bottom:1px solid var(--line);
  position:relative}
.svc:first-of-type{border-top:1px solid var(--line)}
/* 每条目左侧一道 3px 色栏 + 大号编号着色，12 条形成一条可追踪的色序 */
.svc::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:3px;border-radius:3px;
  background:var(--A);opacity:.75;transition:opacity var(--dur-fast) ease-out}
.svc:hover::before{opacity:1}
.svc-n{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--t-xl);font-weight:800;color:var(--A-ink);line-height:1.15;letter-spacing:-.02em}
.svc h3{font-size:var(--t-md);font-weight:700;color:var(--navy);margin-bottom:8px}
.svc p{font-size:var(--t-base);color:var(--ink-2);max-width:48em}
.svc p+p{margin-top:9px}
.svc-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.svc-tag{font-size:var(--t-xs);color:var(--A-ink);background:var(--A-soft);border:1px solid color-mix(in srgb, var(--A) 24%, transparent);border-radius:999px;padding:2px 9px}
/* 12 环节稳定配色：按 id 固定，滚动/锚点跳转后颜色不变（位置无关，可被记住） */
#l1,#l7{--A:var(--a1)}
#l2,#l8{--A:var(--a2)}
#l3,#l9{--A:var(--a3)}
#l4,#l10{--A:var(--a4)}
#l5,#l11{--A:var(--a5)}
#l6,#l12{--A:var(--a2)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.step{display:flex;gap:12px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--radius-s);background:#fff;transition:border-color var(--dur-fast) ease-out, box-shadow var(--dur-base) var(--ease-out)}
.step:hover{border-color:var(--A);box-shadow:0 8px 22px -14px color-mix(in srgb, var(--A) 55%, transparent)}
.step-i{
  flex:none;width:26px;height:26px;border-radius:6px;background:var(--A);color:#fff;
  font-family:var(--font-num);font-size:var(--t-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.step-t{font-size:var(--t-base);font-weight:600;color:var(--navy)}
.step-d{font-size:var(--t-sm);color:var(--ink-3);margin-top:3px;line-height:1.65}
/* 四步走 → 1→4 依次推进的色序，末端最"成熟"（紫） */
.steps .step:nth-child(1){--A:var(--a1)}
.steps .step:nth-child(2){--A:var(--a2)}
.steps .step:nth-child(3){--A:var(--a3)}
.steps .step:nth-child(4){--A:var(--a4)}
.steps .step:nth-child(5){--A:var(--a5)}

.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin:0}
.tbl-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--sh1)}
.tbl th,.tbl td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--A-soft);color:var(--A-ink);font-weight:700;font-size:var(--t-xs);letter-spacing:.06em;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb, var(--A) 26%, transparent)}
.tbl td{color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out}
.tbl tbody tr:hover{background:var(--A-soft);box-shadow:inset 3px 0 0 var(--A)}
.tbl .t-num{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--A-ink);font-weight:700}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:var(--t-sm);color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  transition:all var(--dur-fast) ease-out;
}
/* 平台标签按序着色（5 色循环）——密集标签墙最需要色彩编码来分组 */
.chip:nth-child(5n+1){--A:var(--a1);--A-ink:var(--a1-ink);--A-soft:var(--a1-soft)}
.chip:nth-child(5n+2){--A:var(--a2);--A-ink:var(--a2-ink);--A-soft:var(--a2-soft)}
.chip:nth-child(5n+3){--A:var(--a3);--A-ink:var(--a3-ink);--A-soft:var(--a3-soft)}
.chip:nth-child(5n+4){--A:var(--a4);--A-ink:var(--a4-ink);--A-soft:var(--a4-soft)}
.chip:nth-child(5n+5){--A:var(--a5);--A-ink:var(--a5-ink);--A-soft:var(--a5-soft)}
.chip:hover{border-color:var(--A);color:var(--A-ink);background:var(--A-soft);transform:translateY(-1px)}
.chip.hi{border-color:var(--A);color:var(--A-ink);font-weight:600;background:var(--A-soft)}

.notice{margin-top:var(--s4);padding:16px 20px;border-radius:var(--radius-s);
  background:var(--A-soft);border-left:3px solid var(--A);font-size:var(--t-sm);color:var(--ink-2)}
.notice strong{color:var(--navy)}

.prose{max-width:44em}
.prose h2{font-size:var(--t-lg);font-weight:800;color:var(--navy);margin:var(--s5) 0 12px;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--t-md);font-weight:700;color:var(--navy);margin:var(--s4) 0 9px}
.prose p{font-size:var(--t-base);color:var(--ink-2);margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 20px}
.prose li{font-size:var(--t-base);color:var(--ink-2);margin-bottom:8px}
.prose b,.prose strong{color:var(--navy)}
.prose a{color:var(--accent);border-bottom:1px solid rgba(22,93,255,.3)}
.prose a:hover{border-bottom-color:var(--accent)}

/* ---------- Footer ---------- */
.site-footer{position:relative;border-top:0;padding:var(--s6) 0;background:var(--navy);color:#C7D2E8}
/* 页脚顶部 4px 光谱线：全站色彩系统的收束点 */
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--spectrum)}
.site-footer .footer-brand{font-size:var(--t-base);font-weight:700;color:#fff;letter-spacing:.04em;margin-bottom:10px}
.site-footer .footer-note{font-size:var(--t-sm);color:#8FA0C4;line-height:2}
.site-footer .footer-note a{color:#8FA0C4;border-bottom:1px solid transparent;transition:all var(--dur-fast) ease-out}
.site-footer .footer-note a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.footer-links a{font-size:var(--t-sm);color:#8FA0C4}
.footer-links a:hover{color:#fff}
.footer-wx{display:flex;gap:14px;align-items:flex-start}
.footer-wx img{width:120px;height:120px;border-radius:8px;background:#fff;padding:5px}/* 尺寸下限受扫码可靠性约束：内容区须 ≥100px，见 _tools/README.md「二维码尺寸约束」 */}
.footer-wx .fw-t{font-size:var(--t-sm);color:#fff;font-weight:600;margin-bottom:4px}
.footer-wx .fw-s{font-size:var(--t-xs);color:#8FA0C4}

/* ---------- 微信浮层 ---------- */
.wx-float{
  position:fixed;right:22px;bottom:22px;z-index:80;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--wechat);color:#fff;font-size:var(--t-sm);font-weight:700;
  padding:12px 18px;border-radius:999px;min-height:48px;
  box-shadow:0 10px 30px -8px rgba(7,193,96,.65);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  cursor:pointer;border:0;
}
.wx-float:hover{transform:translateY(-3px);box-shadow:0 16px 40px -10px rgba(7,193,96,.75)}
.wx-float svg{width:19px;height:19px;fill:#fff}
.wx-float .wx-pulse{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9;animation:wxp 2.4s var(--ease-out) infinite}
@keyframes wxp{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.5);opacity:.35}}

.wx-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.wx-modal.on{display:flex}
.wx-modal .wm-bg{position:absolute;inset:0;background:rgba(8,24,72,.55);backdrop-filter:blur(4px)}
.wx-card{
  position:relative;z-index:1;background:#fff;border-radius:var(--radius-l);
  padding:32px 34px 30px;max-width:400px;width:100%;text-align:center;
  box-shadow:var(--sh3);animation:wxin var(--dur-slow) var(--ease-out) both;
}
@keyframes wxin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.wx-card h3{font-size:var(--t-lg);font-weight:800;color:var(--navy);margin-bottom:6px}
.wx-card .wm-sub{font-size:var(--t-sm);color:var(--ink-3);margin-bottom:20px}
.wx-card img.qr{width:210px;height:210px;margin:0 auto 18px;border:1px solid var(--line);border-radius:var(--radius);padding:8px;background:#fff}
.wx-copy{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line-2);border-radius:var(--radius-s);padding:11px 14px;background:var(--bg-alt);
}
.wx-copy .wid{font-family:var(--font-num);font-size:var(--t-md);font-weight:800;color:var(--navy);letter-spacing:.06em}
.wx-copy button{
  border:0;background:var(--navy);color:#fff;font-size:var(--t-sm);font-weight:600;
  padding:9px 15px;border-radius:6px;cursor:pointer;min-height:38px;
  transition:background var(--dur-fast) ease-out;
}
.wx-copy button:hover{background:var(--accent)}
.wx-copy button.ok{background:var(--wechat)}
.wx-close{
  position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;background:transparent;
  color:var(--ink-3);font-size:22px;line-height:1;cursor:pointer;border-radius:8px;
  transition:all var(--dur-fast) ease-out;
}
.wx-close:hover{background:var(--bg-alt);color:var(--navy)}
.wm-tip{font-size:var(--t-xs);color:var(--ink-3);margin-top:12px}

/* ---------- 入场动效（渐进增强：无 JS 时不隐藏） ---------- */
/* 只有 JS 就绪（html.anim）后才隐藏，避免 JS 失败/爬虫抓取导致白屏 */
html.anim .reveal{opacity:0;transform:translateY(18px)}
html.anim .reveal.in{opacity:1;transform:none;
  transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out)}
html.anim .reveal:nth-child(2){transition-delay:60ms}
html.anim .reveal:nth-child(3){transition-delay:120ms}
html.anim .reveal:nth-child(4){transition-delay:180ms}
html.anim .reveal:nth-child(5){transition-delay:240ms}
html.anim .reveal:nth-child(6){transition-delay:300ms}

/* 首屏入场：纯 CSS 动画，不依赖 JS（首屏绝不能白） */
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:heroIn 560ms var(--ease-out) both}
.hero h1{animation:heroIn 560ms var(--ease-out) 60ms both}
.hero .hero-sub{animation:heroIn 560ms var(--ease-out) 120ms both}
.hero .btn-row{animation:heroIn 560ms var(--ease-out) 180ms both}
.hero .hero-stats{animation:heroIn 560ms var(--ease-out) 240ms both}

/* ---------- 移动端导航：汉堡 + 抽屉 ---------- */
.nav-toggle{
  display:none;flex:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  border-radius:10px;align-items:center;justify-content:center;color:var(--navy);margin-left:auto;
  transition:background var(--dur-fast) ease-out;
}
.nav-toggle:hover{background:var(--navy-050)}
.nav-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.nav-toggle .ic-close{display:none}
body.nav-open .nav-toggle .ic-menu{display:none}
body.nav-open .nav-toggle .ic-close{display:block}
body.nav-open{overflow:hidden}

@media (max-width:1100px){
  .site-nav{
    position:fixed;top:var(--header-h);left:0;right:0;z-index:59;
    flex-direction:column;gap:0;flex-wrap:nowrap;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh2);
    padding:6px 0 10px;display:none;
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.nav-open .site-nav{display:flex}
  .site-nav a{
    padding:0 24px;font-size:var(--t-base);min-height:50px;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--navy-025);
  }
  .site-nav a:last-child{border-bottom:0}
  .site-nav a::after{display:none}
  .site-nav a.active{background:var(--navy-050);color:var(--navy);font-weight:700}
  .site-nav a.active::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  }
  .site-nav a{position:relative}
  .nav-toggle{display:inline-flex}
  .header-inner{gap:8px}
  .header-cta{margin-left:0}
}

@media (max-width:1100px){
  .header-cta span{display:none}
  .header-cta{padding:9px 13px}
}
/* ---------- 降级动效（必须保留） ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html.anim .reveal{opacity:1!important;transform:none!important}
  .hero .eyebrow,.hero h1,.hero .hero-sub,.hero .btn-row,.hero .hero-stats{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}

@media (max-width:680px){
  :root{--header-h:58px;--s7:56px;--s6:38px}
  .brand-sub,.brand-sep{display:none}
  .brand-logo{height:23px}
  .hero{padding:60px 0 46px}
  /* 竖排时必须去掉 flex-basis，否则 150px 会变成高度 */
  .hero-stats{flex-direction:column}
  .hero-stat{flex:0 0 auto;padding:15px 20px;border-right:0;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;gap:12px}
  .hero-stat:last-child{border-bottom:0}
  .stat-n{font-size:var(--t-lg);min-width:3.2em}
  .stat-l{margin-top:0;font-size:var(--t-sm)}
  .svc{grid-template-columns:1fr;gap:8px}
  .svc-n{font-size:var(--t-lg)}
  .footer-inner{flex-direction:column;gap:22px}
  .tbl-wrap{overflow-x:auto}
  .tbl{min-width:520px}
  .wx-float{right:14px;bottom:14px;padding:12px 15px}
  .card{padding:20px}
  .wx-card{padding:26px 20px 24px}
  .wx-card img.qr{width:180px;height:180px}
}

/* ---------- 移动端收尾 ---------- */
@media (max-width:680px){
  .wrap{padding:0 18px}
  .section{padding:44px 0}
  .card{padding:18px 18px 16px}
  .svc{padding:22px 0;gap:10px}
  .svc h3{font-size:16px}
  .svc p{font-size:14.5px}
  .section-title{font-size:clamp(20px,5.4vw,24px)}
  .hero h1{font-size:clamp(26px,7.4vw,32px);max-width:none}
  .hero-sub{font-size:15px}
  .btn{width:100%;justify-content:center}
  .btn-row{flex-direction:column;gap:10px}
  .grid{grid-template-columns:1fr;gap:12px}
  .steps{grid-template-columns:1fr}
  /* 表格：加右侧渐隐提示可横向滑动 */
  .tbl-wrap{position:relative}
  .tbl-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none;
    background:linear-gradient(to left,rgba(255,255,255,.92),transparent)}
  .footer-inner{gap:24px}
  .footer-wx img{width:116px;height:116px}
  .wx-float{font-size:13px;padding:11px 15px}
}
@media (max-width:400px){
  .brand-logo{height:20px}
  .hero h1{font-size:25px}
  .stat-n{font-size:17px;min-width:2.9em}
}

/* ---------- 页脚品牌 logo ---------- */
.footer-logo{height:24px;width:auto;display:block;margin-bottom:12px}
@media (max-width:680px){.footer-logo{height:20px}}