/* ============================================================
   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}
/* 间距 20px 是按实测定的，不要凭直觉调大：
   .wrap 上限 1120px、内边距 24px → 内容区恒定 1072px，视口再宽也不会变
   9 项导航(34字≈468px) + 品牌区(296px) + CTA(95px) + 两处 gap(40px)
   gap 24 → 1091px 溢出换行；gap 20 → 1059px 仅余 13px；
   配合导航项用「工具箱」3 字，稳定在 1032px，余 40px。 */
.site-nav{display:flex;gap:20px;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-home 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;white-space:nowrap}

.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-home h1{animation:heroIn 560ms var(--ease-out) 60ms both}
.hero-home .hero-sub{animation:heroIn 560ms var(--ease-out) 120ms both}
.hero-home .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}

/* 断点 1120px（原 1100px）：导航新增「工具与资源」后，1101–1120px 区间
   桌面导航会挤到换行，故提前一档切汉堡抽屉。 */
@media (max-width:1120px){
  .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-home .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-home 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-home 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}}

/* ============================================================
   工具与资源页（tools.html）· 2026-10-07 新增
   ────────────────────────────────────────────────────────────
   只服务一件事：把"先核事实、再谈生意"做成能用的东西。
   全部为新增组件，不改动上方任何既有规则，其他页面不受影响。
   配色沿用全站分类色体系，各区块用 data-ac / [data-ac] 自行取色。
   ============================================================ */

/* ---------- 核验表：折叠块 ---------- */
.dtls{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;
  transition:border-color var(--dur-fast) ease-out}
.dtls+.dtls{margin-top:10px}
.dtls[open]{border-color:color-mix(in srgb,var(--A) 34%,var(--line))}
.dtls>summary{display:flex;align-items:center;gap:10px;padding:16px 20px;cursor:pointer;
  list-style:none;transition:background var(--dur-fast) ease-out}
.dtls>summary::-webkit-details-marker{display:none}
.dtls>summary:hover{background:var(--A-soft)}
.dtls>summary::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--A);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--A) 18%,transparent)}
.dtls>summary::after{content:"+";margin-left:auto;flex:none;font-family:var(--font-num);
  font-size:17px;font-weight:700;color:var(--A-ink);line-height:1;
  transition:transform var(--dur-base) var(--ease-out)}
.dtls[open]>summary::after{content:"–"}
.dtls-t{font-size:var(--t-base);font-weight:700;color:var(--navy)}
.dtls-m{font-size:var(--t-xs);color:var(--ink-3);font-weight:500;margin-left:2px}
.dtls-b{padding:4px 20px 22px;border-top:1px solid var(--line)}
.dtls-b>p{font-size:var(--t-sm);color:var(--ink-3);margin:16px 0 0}

/* 字段网格：用于平铺"要写哪些字段" */
.fl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px 26px;margin-top:14px}
.fl>div{position:relative;font-size:var(--t-sm);color:var(--ink-2);line-height:1.62;
  padding:7px 0 7px 15px;border-bottom:1px dashed var(--line)}
.fl>div::before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;border-radius:50%;
  background:var(--A);opacity:.5}

/* 权重表：用于评分卡 */
.rw{display:flex;align-items:baseline;gap:12px;font-size:var(--t-sm);color:var(--ink-2)}
.rw-n{flex:none;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--t-xs);font-weight:800;color:var(--A-ink);min-width:3.2em}

/* ---------- 官方来源：卡片列表 ---------- */
.res-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.res-card{position:relative;overflow:hidden;padding:22px 22px 14px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.res-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--A);opacity:.6}
.res-card h3{font-size:var(--t-md);font-weight:700;color:var(--navy);margin-bottom:3px}
.res-note{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.04em;margin-bottom:10px}
.res-list{list-style:none;margin:0;padding:0}
.res-list li+li{border-top:1px dashed var(--line)}
.res-list a{display:flex;align-items:baseline;gap:9px;padding:8px 0;font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.55;transition:color var(--dur-fast) ease-out}
.res-list a::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--A);
  opacity:.55;transform:translateY(-2px)}
.res-list a::after{content:"↗";flex:none;margin-left:auto;padding-left:8px;
  font-size:11px;color:var(--ink-3);opacity:.7}
.res-list a:hover{color:var(--A-ink)}

@media (max-width:680px){
  .res-cols{grid-template-columns:1fr;gap:12px}
  .res-card{padding:18px 18px 10px}
  .dtls>summary{padding:14px 16px;flex-wrap:wrap}
  .dtls-b{padding:2px 16px 18px}
  .fl{grid-template-columns:1fr}
}

/* ============================================================
   STARXB 三站统一精致化补丁 · v1（2026-10-08）
   ------------------------------------------------------------
   目标：提升科技感与专业感
   ★ 原则：只做增强 —— 不修改现有色彩值、字号、间距与结构 ★
   ------------------------------------------------------------
   内容：字体渲染 / 数字对齐 / 字距精修 / 阴影令牌 / 卡片微交互
        / 滚动入场 / 首屏入场 / 焦点可见 / 顶栏加深 / 选区
        / prefers-reduced-motion
   ============================================================ */

/* ---------- ① 字体渲染精进 ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body{
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}

/* ---------- ② 数字等宽（统计数字、编号、徽章数字对齐） ---------- */
.stat-n,.card-n,.step-n,.kit-n,.t-num,
.flow-step::before,.faq-item dt::before,
[data-count]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- ③ 字距精修（不改字号，只微调字距） ---------- */
.hero-card h1,h1{letter-spacing:-.022em}
.section-title,h2{letter-spacing:-.016em}

/* ---------- ④ 阴影与缓动令牌（新增，供组件按需取用） ---------- */
:root{
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 4px 14px -6px rgba(15,23,42,.10);
  --sh-3:0 14px 36px -16px rgba(15,23,42,.16);
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --dur-1:180ms;
  --dur-2:320ms;
  --dur-3:560ms;
}

/* ---------- ⑤ 卡片微交互统一（顺滑过渡） ---------- */
.card,.step,.flow-step,.stat,.contact-card,.kit-card,.vcard,.project-card,
.split-col,.origin,.bounds,.limits,.faq-item,.fact,.info-table{
  transition:border-color var(--dur-2) var(--ease-spring,ease),
             box-shadow var(--dur-2) var(--ease-spring,ease),
             transform var(--dur-2) var(--ease-spring,ease);
}

/* ---------- ⑥ 滚动入场（须配合 app.js；JS 未就绪时不隐藏，避免白屏） ---------- */
html.anim .reveal{opacity:0;transform:translateY(16px)}
html.anim .reveal.in{
  opacity:1;transform:none;
  transition:opacity 480ms cubic-bezier(.16,1,.3,1),
             transform 480ms cubic-bezier(.16,1,.3,1);
}

/* ---------- ⑦ 首屏入场（纯 CSS，不依赖 JS —— 首屏绝不能白） ---------- */
@keyframes starxbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero-card .eyebrow,
.hero .eyebrow{animation:starxbIn 560ms cubic-bezier(.16,1,.3,1) both}
.hero-card h1,
.hero-home h1{animation:starxbIn 560ms cubic-bezier(.16,1,.3,1) 60ms both}
.hero-card .hero-sub,
.hero-home .hero-sub{animation:starxbIn 560ms cubic-bezier(.16,1,.3,1) 120ms both}
.hero-card .hero-actions,
.hero-card .btn-row,
.hero-home .btn-row{animation:starxbIn 560ms cubic-bezier(.16,1,.3,1) 180ms both}
.hero-card .hero-note,
.hero-card .hero-sites{animation:starxbIn 560ms cubic-bezier(.16,1,.3,1) 240ms both}

/* ---------- ⑧ 焦点可见（键盘可访问性） ---------- */
:focus-visible{
  outline:2px solid var(--brand,var(--accent,#165DFF));
  outline-offset:3px;
  border-radius:6px;
}
.hero-card :focus-visible,
.hero-home :focus-visible{outline-color:#8FB4FF}

/* ---------- ⑨ 顶栏滚动加深 ---------- */
.site-header{
  transition:box-shadow var(--dur-2) ease,background-color var(--dur-2) ease,
             border-color var(--dur-2) ease;
}
.site-header.is-scrolled{
  box-shadow:0 2px 18px -10px rgba(15,23,42,.18);
}

/* ---------- ⑩ 文本选区 ---------- */
::selection{
  background:rgba(22,93,255,.18);
  color:inherit;
}

/* ---------- ⑪ 无障碍：尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html.anim .reveal{opacity:1 !important;transform:none !important}
  .hero-card .eyebrow,.hero-card h1,.hero-card .hero-sub,
  .hero-card .hero-actions,.hero-card .btn-row,
  .hero-card .hero-note,.hero-card .hero-sites,
  .hero-home .eyebrow,.hero h1,.hero .hero-sub,.hero-home .btn-row{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
  .hero-stars{animation:none !important}
}

/* ============================================================
   STARXB 图文配合组件 · viz v1（2026-10-08）
   ------------------------------------------------------------
   目的：让图形承担一部分信息传达，与文案互为补充
        —— 文字讲"是什么"，图形讲"怎么流转 / 什么关系"
   ------------------------------------------------------------
   组件：
     ① .viz-flow   横向流程图（节点 + 连接箭头 + 语义图标）
     ② .viz-stack  纵向数据流（带层级缩进与流向）
     ③ .card-ico   卡片语义图标位
     ④ .viz-band   图形化数据带（含迷你条）
   ============================================================ */

/* ---------- ① 横向流程图 ---------- */
.viz-flow{
  display:flex;align-items:stretch;flex-wrap:nowrap;
  margin-top:36px;
}
.vf-node{
  flex:1 1 0;min-width:0;
  position:relative;
  padding:24px 20px 20px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;
  display:flex;flex-direction:column;gap:9px;
  overflow:hidden;
  transition:border-color var(--dur-2,320ms) cubic-bezier(.16,1,.3,1),
             box-shadow var(--dur-2,320ms) cubic-bezier(.16,1,.3,1),
             transform var(--dur-2,320ms) cubic-bezier(.16,1,.3,1);
}
.vf-node::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--node-c,var(--brand,var(--accent,#165DFF)));
  opacity:.9;
}
.vf-node:hover{
  border-color:color-mix(in srgb,var(--node-c,var(--brand,#165DFF)) 40%,transparent);
  transform:translateY(-2px);
  box-shadow:var(--sh-2,0 4px 14px -6px rgba(15,23,42,.1));
}
.vf-num{
  font-size:11.5px;font-weight:800;letter-spacing:.12em;
  color:var(--node-c,var(--brand,#165DFF));opacity:.75;
  font-variant-numeric:tabular-nums;
}
.vf-ico{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--node-c,var(--brand,#165DFF)) 10%,transparent);
  color:var(--node-c,var(--brand,#165DFF));
}
.vf-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vf-node b{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.4}
.vf-node small{font-size:13.5px;color:var(--ink-2);line-height:1.65}
.vf-node em{font-size:12.5px;font-style:normal;color:var(--ink-3);
  margin-top:auto;padding-top:8px;border-top:1px dashed var(--line)}

/* 连接箭头 */
.vf-arrow{
  flex:none;width:46px;display:grid;place-items:center;position:relative;
}
.vf-arrow::before{
  content:"";width:100%;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--line),var(--ink-3));
  opacity:.45;
}
.vf-arrow::after{
  content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:0;height:0;
  border:5px solid transparent;border-left-color:var(--ink-3);
  opacity:.6;
}

/* 窄屏：转纵向 */
@media (max-width:860px){
  .viz-flow{flex-direction:column}
  .vf-node{width:100%}
  .vf-arrow{width:100%;height:30px}
  .vf-arrow::before{
    width:2px;height:100%;
    background:linear-gradient(180deg,var(--line),var(--ink-3));
  }
  .vf-arrow::after{
    right:auto;left:50%;top:auto;bottom:5px;transform:translateX(-50%);
    border-left-color:transparent;border-top-color:var(--ink-3);
  }
}

/* ---------- ② 数据流（纵向，带流向线） ---------- */
.viz-stack{margin-top:34px;display:grid;gap:0;position:relative}
.vs-row{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 0;position:relative;
}
.vs-row + .vs-row{border-top:1px solid var(--line)}
.vs-badge{
  flex:none;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--node-c,var(--brand,#165DFF)) 9%,transparent);
  color:var(--node-c,var(--brand,#165DFF));
  position:relative;
}
.vs-badge svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 竖向流向线 */
.vs-row + .vs-row .vs-badge::before{
  content:"";position:absolute;left:50%;top:-20px;transform:translateX(-50%);
  width:2px;height:20px;
  background:linear-gradient(180deg,transparent,var(--ink-3));
  opacity:.35;
}
.vs-body{min-width:0;padding-top:2px}
.vs-body b{display:block;font-size:15.5px;font-weight:700;margin-bottom:6px}
.vs-body small{font-size:14px;color:var(--ink-2);line-height:1.7}
.vs-tag{
  display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  font-size:11.5px;font-weight:700;vertical-align:2px;
  background:color-mix(in srgb,var(--node-c,var(--brand,#165DFF)) 12%,transparent);
  color:var(--node-c,var(--brand,#165DFF));
}

/* ---------- ③ 卡片语义图标 ---------- */
.card-ico,.flow-ico{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;margin-bottom:14px;
  background:color-mix(in srgb,var(--brand,var(--accent,#165DFF)) 8%,transparent);
  color:var(--brand,var(--accent,#165DFF));
  transition:background-color var(--dur-2,320ms) ease;
}
.card-ico svg,.flow-ico svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.card:hover .card-ico{
  background:color-mix(in srgb,var(--brand,var(--accent,#165DFF)) 14%,transparent);
}

/* ---------- ④ 图形化数据带（迷你条形） ---------- */
.stat{position:relative}
.stat-bar{
  margin-top:12px;height:3px;border-radius:2px;
  background:var(--line);overflow:hidden;
}
.stat-bar i{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--brand,#165DFF) 55%,transparent),
    var(--brand,#165DFF));
  transform-origin:left center;
  animation:statBar 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes statBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- ⑤ 背景网格（技术感，极低对比） ---------- */
.grid-bg{position:relative}
.grid-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(15,23,42,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,23,42,.035) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 78%);
}
.grid-bg > .wrap{position:relative;z-index:1}

/* ---------- ⑥ SVG 线条绘制动画 ---------- */
.draw-line{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
}
.is-in .draw-line,.draw-in .draw-line{
  animation:drawLine 1.4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes drawLine{to{stroke-dashoffset:0}}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion:reduce){
  .stat-bar i{animation:none}
  .draw-line{stroke-dashoffset:0 !important;animation:none !important}
}

/* ============================================================
   STARXB 三站视觉增强 v2（2026-10-08）
   ------------------------------------------------------------
   目标：明显的动态视觉变化 + 更强的层次感与交互反馈
   手段：真实图像素材 + 持续动效 + 交互反馈 + 时序入场
   ★ 性能：只用 transform / opacity；图片 63KB；移动端自动降级
   ★ 无障碍：prefers-reduced-motion 全量降级
   ============================================================ */

/* ---------- ① Hero 图像层（真实素材，缓慢平移形成"活着"的感觉） ---------- */
.hero-card{
  position:relative;
  isolation:isolate;
}

.hero-card::after{
  content:"";
  position:absolute;inset:0;
  z-index:-2;
  background:url("hero-cross.jpg") center/cover no-repeat;
  opacity:.72;
  filter:hue-rotate(-10deg) saturate(1.06) brightness(.9);
  /* ★ 文字区零干扰：左 30% 完全无图，30%→58% 平滑过渡，58% 之后完整展示
     —— 解决的不是"亮度"而是"噪声"：图像元素的边缘/网格线不得进入文字背后 */
  -webkit-mask-image:linear-gradient(100deg,
    transparent 0%, transparent 30%, rgba(0,0,0,.35) 44%,
    rgba(0,0,0,.85) 58%, #000 72%, #000 100%);
  mask-image:linear-gradient(100deg,
    transparent 0%, transparent 30%, rgba(0,0,0,.35) 44%,
    rgba(0,0,0,.85) 58%, #000 72%, #000 100%);
  animation:heroPan 52s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroPan{
  from{transform:scale(1.08) translate3d(0,0,0)}
  to{transform:scale(1.20) translate3d(-2.6%,-1.6%,0)}
}

/* 内容层确保在图像之上 */
.hero-card > .wrap{
  position:relative;
  z-index:1;
}

/* 品牌色叠加：把图像色温拉回站点主色 */
.hero-card::before,
.hero::before{
  z-index:-1;
}

/* ---------- ② 流动光带（明显可见的持续动态） ---------- */
.hero-card .hero-glow{
  position:absolute;inset:-30% -10%;z-index:-1;pointer-events:none;
  background:
    /* 定向暗化：文字区接近实色，52% 之后完全放开 */
    linear-gradient(100deg, rgba(6,12,36,.70) 0%, rgba(6,12,36,.34) 34%, rgba(6,12,36,0) 54%),
    /* 流动光晕 */
    radial-gradient(38% 46% at 28% 34%, rgba(22,93,255,.18), transparent 62%),
    radial-gradient(30% 40% at 72% 66%, rgba(14,116,144,.16), transparent 64%);
  filter:blur(5px);
  animation:glowDrift 34s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  from{transform:translate3d(-1.5%,1%,0) scale(1)}
  to{transform:translate3d(2.5%,-2%,0) scale(1.08)}
}

/* ---------- ③ 更强的入场（比 v1 更明显：位移 + 缩放） ---------- */
html.anim .reveal{
  opacity:0;
  transform:translateY(28px) scale(.986);
}
html.anim .reveal.in{
  opacity:1;
  transform:none;
  transition:opacity 620ms cubic-bezier(.16,1,.3,1),
             transform 620ms cubic-bezier(.16,1,.3,1);
}

/* ---------- ④ 卡片光晕跟随鼠标（交互反馈） ---------- */
.card,.vf-node,.vcard,.project-card,.contact-card,.kit-card,.faq-item{
  position:relative;
  overflow:hidden;
}
.card::after,.vf-node::after,.vcard::after,.project-card::after,
.contact-card::after,.kit-card::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  opacity:0;
  background:radial-gradient(
    260px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--node-c,var(--accent,var(--brand,#165DFF))) 13%,transparent),
    transparent 62%);
  transition:opacity 320ms ease;
}
.card:hover::after,.vf-node:hover::after,.vcard:hover::after,
.project-card:hover::after,.contact-card:hover::after,
.kit-card:hover::after{opacity:1}

/* ---------- ⑤ 按钮微动效（高光扫过 + 位移） ---------- */
.btn,.project-ext,.proj-link{
  position:relative;
  overflow:hidden;
}
.btn::before,.project-ext::before{
  content:"";
  position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);
  transition:left 620ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.btn:hover::before,.project-ext:hover::before{left:120%}

/* ---------- ⑥ 流程节点时序点亮 ---------- */
html.anim .viz-flow .vf-node.in,
html.anim .viz-flow .vf-arrow.in,
html.anim .viz-stack .vs-row.in{
  animation:nodeIn 700ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes nodeIn{
  from{opacity:0;transform:translateY(22px) scale(.97)}
  to{opacity:1;transform:none}
}

/* ---------- ⑦ 滚动进度条 ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;z-index:120;
  height:2px;width:0;
  background:linear-gradient(90deg,
    var(--brand,var(--accent,#165DFF)),
    color-mix(in srgb,var(--brand,var(--accent,#165DFF)) 45%,#7FA8FF));
  box-shadow:0 0 12px -2px color-mix(in srgb,var(--brand,var(--accent,#165DFF)) 70%,transparent);
  transition:width 90ms linear;
  pointer-events:none;
}

/* ---------- ⑧ 链接箭头位移反馈 ---------- */
.project-link, .btn-ghost{
  transition:color 200ms ease, transform 240ms cubic-bezier(.16,1,.3,1),
             border-color 240ms ease;
}
.project-link:hover{transform:translateX(4px)}

/* ---------- ⑨ 数据带数字的高光 ---------- */
.stat-n{
  background:linear-gradient(180deg,
    var(--brand,var(--accent,#165DFF)) 0%,
    color-mix(in srgb,var(--brand,var(--accent,#165DFF)) 62%,#0A1233) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- ⑩ 移动端降级（保性能） ---------- */
@media (max-width:820px){
  .hero-card::after{animation:none;opacity:.42}
  .hero-card .hero-glow{animation:none}
  .card::after,.vf-node::after,.vcard::after,.project-card::after{display:none}
}
@media (max-width:640px){
  .hero-card::after{opacity:.34}
}

/* ---------- ⑪ 无障碍：减少动态 ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-card::after,
  .hero-card .hero-glow,
  .card::after,.vf-node::after,.btn::before{
    animation:none !important;
    transition:none !important;
  }
  html.anim .viz-flow .vf-node.in,
  html.anim .viz-flow .vf-arrow.in,
  html.anim .viz-stack .vs-row.in{animation:none !important}
  .scroll-progress{transition:none}
  .stat-n{
    -webkit-text-fill-color:currentColor;color:inherit;
    background:none;
  }
}


@media (min-width:1600px){
  .hero-card{padding:92px 80px 84px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
  .flow{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media (min-width:2100px){
  .wrap{padding:0 48px}
}


/* ============================================================
   ⑫ 宽屏适配（2026-10-08）
   —— 原容器固定 1120px，在 2K/4K 屏两侧留白过多
      改为流体：窄屏不变 → 大屏放大 → 上限 1560px
   ★ 只放宽「容器」，正文仍受各自 max-width 约束（保阅读性）
   ============================================================ */
.wrap{
  max-width:clamp(1120px, 76vw, 1560px);
  padding:0 clamp(20px, 2.2vw, 40px);
}
@media (min-width:1600px){
  .hero-card{padding:92px 80px 84px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
  .flow{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media (min-width:2100px){
  .wrap{padding:0 48px}
}

/* ============================================================
   Hero 深空卡（2026-10-08 · 与母品牌站/vault 统一）
   ============================================================ */
.hero-home{padding:26px 0 8px;background:none}
.hero-card{
  position:relative;overflow:hidden;border-radius:24px;
  padding:72px 58px 64px;
  background:
    radial-gradient(920px 420px at 76% 10%, rgba(22,93,255,.28), transparent 62%),
    radial-gradient(600px 360px at 6% 98%, rgba(14,116,144,.22), transparent 66%),
    linear-gradient(150deg, #071238 0%, #081848 56%, #050D2A 100%);
  color:#fff;isolation:isolate;
}
.hero-card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.45;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 24%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 31% 66%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.6px 1.6px at 48% 16%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 66% 78%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 82% 38%, rgba(255,255,255,.65), transparent);
}
.hero-card h1{color:#fff}
.hero-card h1 .hl{background-image:linear-gradient(180deg,transparent 64%,rgba(90,150,255,.34) 64%)}
.hero-card .hero-sub{color:#C7D3EE}
.hero-card .hero-sub strong{color:#fff}
.hero-card .eyebrow{color:#A9BEFF;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}
.hero-card .eyebrow::before{background:#5B8CFF;box-shadow:0 0 10px #5B8CFF}
.hero-card .hero-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.hero-card .hero-stat .stat-l{color:#9FB0D8}
@media (max-width:700px){
  .hero-card{padding:48px 24px 44px;border-radius:20px}
  .hero-home{padding:16px 0 4px}
}

/* >>> FX-LAYER-START（三站共用视觉增强层 · 由 _design/_apply_fx.py 生成，勿手改） */
/* ============================================================
   STARXB 三站共用视觉增强层 · fx v2（2026-10-08 第二轮）
   ------------------------------------------------------------
   目标：明显的动态视觉变化 + 层次感 + 交互反馈 + 高级感
   ★ 只做增强 —— 不改现有色彩值 / 字号 / 间距 / 结构 / 文案 ★
   ★ 全部图形由 CSS 与脚本程序化生成，**不引入任何图片文件** ★
   ------------------------------------------------------------
   v2 相对 v1 的新增：
     ① 区块标题下划线「画入」        ② 主按钮底部扫光 + 按压涟漪
     ③ 数字下划线 + 到数微弹          ④ 卡片标题 hover 下划线扫过
     ⑤ 面包屑动态端点（内页也有动效） ⑥ 高亮词按「文字型/下划线型」分别处理
     ⑦ 首屏 HUD 四角括号（脉冲）      ⑧ 首屏横向扫描光带
     ⑨ 表格行逐行错峰入场
   ------------------------------------------------------------
   ⚠️ 与既有规则的边界（已逐个 grep 核查，本层只新增、不覆盖已占用的伪元素）：
      已占用，**禁止**在本层定义：
        .card::after（聚光）· .vcard::after · .project-card::after
        .btn::before（高光扫过）· .card::before（starwaycross 顶部色条）
        .section-kicker::after（starxb flex 短线）
        .section-alt::before（starwaycross 3px 光谱线）
        .hero-card::after（heroPan 动画占用 transform）
        .hl::after（vault / starwaycross 的下划线）
        .eyebrow::before · .step::before · .tbl-wrap::after
      已确认**空闲**，本层可使用：
        .section-title::after · .btn-primary::after · .stat-n::after
        .card h3::after · .crumb::after · .hl.fx-line::after
   ------------------------------------------------------------
   性能：只动 transform / opacity / width（宽度仅用于 1 条 1–2px 的装饰线）；
        canvas 单页仅 1 个且离屏暂停
   ============================================================ */

/* ============ ① 令牌与层叠基线 ============ */
:root{
  /* 极光三色：蓝 / 青 / 亮蓝 —— 只用品牌色系，不引入紫粉 */
  --fx-a:rgba(22,93,255,.20);
  --fx-b:rgba(45,212,191,.13);
  --fx-c:rgba(90,150,255,.16);
  --fx-accent:var(--brand,var(--accent,#165DFF));
  --fx-dur-1:180ms;
  --fx-dur-2:320ms;
  --fx-dur-3:640ms;
  --fx-ease:cubic-bezier(.16,1,.3,1);
}

/* 氛围层固定在 -1 层：靠 body 建立层叠上下文，
   让它落在「body 背景之上、全部正文之下」。
   ⚠️ starxb / vault 没有 .page 包裹层（只有 starwaycross 有），
   所以不能靠提升 main 层级来做，否则会把 fixed 浮层夹在正文里。 */
body{isolation:isolate}
.fx-atmo{position:fixed;inset:0;pointer-events:none;z-index:-1}

/* ============ ② 氛围层：蓝图网格 + 细噪点 + 极光 ============ */
.fx-atmo::before{
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:
    /* 48px 蓝图细网格 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%230F172A' stroke-opacity='.055'/%3E%3C/svg%3E"),
    /* feTurbulence 细噪点 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:48px 48px,180px 180px;
}
.fx-atmo::after{
  /* 极光：三个大尺寸径向渐变缓慢漂移（transform，走合成层） */
  content:"";position:absolute;inset:-22%;
  background:
    radial-gradient(38rem 30rem at 14% 10%,var(--fx-a),transparent 62%),
    radial-gradient(34rem 28rem at 86% 20%,var(--fx-b),transparent 60%),
    radial-gradient(40rem 32rem at 52% 98%,var(--fx-c),transparent 64%);
  filter:blur(10px);
  animation:fxAurora 48s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes fxAurora{
  0%  {transform:translate3d(-2.2%,-1.4%,0) scale(1)}
  50% {transform:translate3d(1.8%,2.2%,0) scale(1.06)}
  100%{transform:translate3d(2.6%,-2.0%,0) scale(1.02)}
}

/* ============ ③ 首屏程序化粒子场容器（canvas 由 app.js 注入绘制） ============ */
.fx-field{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  display:block;width:100%;height:100%;
  mix-blend-mode:screen;        /* 叠加在 hero 图像与光晕之上，像"活着的星链" */
  opacity:.92;
  transform:translate3d(0,var(--fx-par,0px),0);
  will-change:transform;
}

/* ============ ④ 深空轨道环（纯 CSS 旋转，无图片） ============ */
.hero-card .fx-ring{
  position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
}
.hero-card .fx-ring.r1{
  width:min(72%,540px);aspect-ratio:1;
  right:-9%;top:50%;margin-top:-270px;
  animation:fxSpin 44s linear infinite;
}
.hero-card .fx-ring.r2{
  width:min(52%,390px);aspect-ratio:1;
  right:-2%;top:50%;margin-top:-195px;
  border-style:solid;border-color:rgba(255,255,255,.09);
  animation:fxSpin 30s linear infinite reverse;
}
@keyframes fxSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ============ ⑤ HUD 四角括号 + 横向扫描光带（v2 新增） ============ */
/* 四角括号：18px 内缩的发丝线，缓慢脉冲 —— 科技感的"取景框" */
.fx-hud{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fx-hud::before,.fx-hud::after{
  content:"";position:absolute;width:26px;height:26px;
  border:1px solid rgba(255,255,255,.26);
  animation:fxHud 5.2s ease-in-out infinite;
}
.fx-hud::before{left:16px;top:16px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.fx-hud::after{right:16px;bottom:16px;border-left:0;border-top:0;border-bottom-right-radius:6px;
  animation-delay:2.6s}
@keyframes fxHud{0%,100%{opacity:.28}50%{opacity:.9}}

/* 扫描光带：一条极淡的横向亮带由上至下缓慢扫过 hero，12s 一轮 */
.fx-scan{
  position:absolute;left:-6%;right:-6%;height:120px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(150,190,255,.16) 45%,rgba(190,215,255,.22) 50%,rgba(150,190,255,.16) 55%,transparent);
  filter:blur(6px);
  animation:fxScan 12s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes fxScan{
  0%  {transform:translateY(-160px);opacity:0}
  10% {opacity:.85}
  90% {opacity:.85}
  100%{transform:translateY(760px);opacity:0}
}

/* ============ ⑥ 信号细带（hero 与正文之间持续移动的光点） ============ */
.fx-band{
  position:relative;height:2px;width:100%;overflow:hidden;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(22,93,255,.30),rgba(45,212,191,.24),transparent);
}
.fx-band::after{
  content:"";position:absolute;top:-2px;left:-30%;width:30%;height:6px;
  background:radial-gradient(closest-side,rgba(170,205,255,.95),transparent);
  animation:fxTravel 5.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes fxTravel{
  0%  {transform:translateX(0);opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{transform:translateX(430%);opacity:0}
}

/* ============ ⑦ 入场增强（更明显的位移 + 组错峰） ============ */
/* 覆盖 v1 的 16px / 480ms —— 用户反馈"感知不到"，此处提到 30px + 轻微缩放 + 640ms */
html.anim .reveal{opacity:0;transform:translateY(30px) scale(.985)}
html.anim .reveal.in{
  opacity:1;transform:none;
  transition:opacity var(--fx-dur-3) var(--fx-ease),
             transform var(--fx-dur-3) var(--fx-ease);
}
html.anim .reveal:nth-child(1){transition-delay:0ms}
html.anim .reveal:nth-child(2){transition-delay:70ms}
html.anim .reveal:nth-child(3){transition-delay:140ms}
html.anim .reveal:nth-child(4){transition-delay:210ms}
html.anim .reveal:nth-child(5){transition-delay:280ms}
html.anim .reveal:nth-child(6){transition-delay:350ms}
html.anim .reveal:nth-child(7){transition-delay:420ms}
html.anim .reveal:nth-child(n+8){transition-delay:470ms}

/* v2-⑨ 表格行只做淡入 + 轻微位移（transform 在 tr 上兼容性不稳，降级仍成立）
   行间错峰由 app.js 逐行写 inline transition-delay */
html.anim .tbl tbody tr.reveal{transform:translateY(10px)}
html.anim .tbl tbody tr.reveal.in{transform:none}

/* ============ ⑧ 卡片 3D 倾斜（仅桌面；hover 时才加 .fx-tilt，故不干扰入场） ============ */
.fx-tilt{
  transform:perspective(1000px)
            rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))
            translateY(-4px) !important;
  transition:transform var(--fx-dur-2) var(--fx-ease),
             box-shadow var(--fx-dur-2) var(--fx-ease) !important;
  box-shadow:var(--sh-3,0 14px 36px -16px rgba(15,23,42,.16)) !important;
  z-index:2;
}

/* ============ ⑨ 高亮词：按「文字型 / 下划线型」分别处理（v2 修正） ============ */
/* v1 对所有站统一用 background-position 流动，结果只有 starxb（渐变文字）看得到。
   v2 由 app.js 读计算样式判定后加类：
     .fx-text → 渐变文字，做流光      .fx-line → 下划线型，做下划线「画入」 */
.hero-card h1 .hl.fx-text,.hero h1 .hl.fx-text{
  background-size:220% 100%;
  animation:fxSheen 7.5s ease-in-out infinite;
}
@keyframes fxSheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* 下划线型：把既有 ::after 从「整条」改成「从 0 画到满」
   （vault 与 starwaycross 的 .hl::after 都是那条下划线；此处只改宽度与时机） */
.hero-card h1 .hl.fx-line::after,.hero h1 .hl.fx-line::after{
  right:auto;
  width:100%;
  animation:fxDraw 900ms var(--fx-ease) 380ms both;
}
@keyframes fxDraw{from{width:0}to{width:100%}}

/* ============ ⑩ 装饰性下划线与扫光（v2 新增，全部使用已核实空闲的伪元素） ============ */
/* ⑦ 区块标题下划线「画入」
   三站结构不同：starwaycross 用 .section-head 包裹；starxb / vault 的标题与 kicker 同级
   → 两条规则并存：.section-head 走后代选择器，同级结构走兄弟选择器（kicker 由 app.js 加 .reveal）。
   JS 关闭时静态显示，不依赖 JS。 */
.section-title::after{
  content:"";display:block;margin-top:14px;height:2px;width:46px;border-radius:2px;
  background:linear-gradient(90deg,var(--fx-accent),transparent);
}
html.anim .section-head.reveal:not(.in) .section-title::after,
html.anim .reveal:not(.in) ~ .section-title::after{width:0}
html.anim .section-head.reveal.in .section-title::after,
html.anim .reveal.in ~ .section-title::after{
  width:46px;transition:width 900ms var(--fx-ease) 120ms;
}

/* ④ 卡片标题 hover 下划线扫过 */
.card h3{position:relative}
.card h3::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;
  background:linear-gradient(90deg,var(--A,var(--fx-accent)),transparent);
  transition:width var(--fx-dur-3) var(--fx-ease);
}
.card:hover h3::after{width:100%}

/* ② 主按钮：底部扫光 + 按压涟漪 */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:100%;
  background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.30));
  transform:translateY(100%);
  transition:transform var(--fx-dur-3) var(--fx-ease);
  pointer-events:none;
}
.btn-primary:hover::after{transform:translateY(0)}
.btn-primary:active::after{transform:translateY(0) scaleY(.86)}

/* ③ 数字到数后的下划线与微弹 */
.stat-n,.card-n{position:relative}
.stat-n::after,.card-n::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:linear-gradient(90deg,currentColor,transparent);
  opacity:.42;transform:scaleX(0);transform-origin:left;
  transition:transform var(--fx-dur-3) var(--fx-ease);
}
.fx-counted.stat-n::after,.fx-counted.card-n::after{transform:scaleX(1)}
.fx-pop{animation:fxPop 480ms var(--fx-ease)}
@keyframes fxPop{0%{transform:scale(1)}38%{transform:scale(1.10)}100%{transform:scale(1)}}

/* ⑤ 面包屑动态端点（内页页头也因此获得一处持续动态） */
.crumb::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border-radius:50%;background:currentColor;vertical-align:middle;
  animation:fxDot 2.4s ease-in-out infinite;
}
@keyframes fxDot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ============ ⑪ 星点层视差（.hero-card::before 未被动画占用，可安全接管） ============ */
.hero-card::before{background-position:0 var(--fx-par,0px)}

/* ============ ⑫ 响应式降级 ============ */
@media (max-width:820px){
  /* 触屏与窄屏：停掉轨道环、扫描带、HUD 与持续位移，保帧率省电 */
  .hero-card .fx-ring{display:none}
  .fx-scan{display:none}
  .fx-atmo::after{animation:none;opacity:.7}
  .fx-band::after{animation-duration:7.5s}
  .fx-hud::before,.fx-hud::after{animation:none;opacity:.5}
}
@media (max-width:640px){
  .fx-atmo::before{opacity:.4}
  .fx-field{opacity:.6}
  html.anim .reveal{transform:translateY(20px)}
  .fx-hud{display:none}
}
/* 无 hover 能力的设备不做倾斜与按钮扫光 */
@media not all and (hover:hover){
  .fx-tilt{transform:none !important}
  .btn-primary::after{display:none}
}

/* ============ ⑬ 无障碍：尊重系统「减少动态效果」 ============ */
@media (prefers-reduced-motion:reduce){
  .fx-atmo::after,.hero-card .fx-ring,.fx-band::after,.fx-scan,
  .fx-hud::before,.fx-hud::after,.crumb::after,.fx-pop{
    animation:none !important;
  }
  .fx-band::after{opacity:0}
  .fx-scan{opacity:0}
  .fx-tilt{transform:none !important}
  .fx-field{transform:none;opacity:.5}
  .hero-card::before{background-position:0 0}
  .hl.fx-line::after{animation:none;width:100%}
  .stat-n::after,.card-n::after{transform:scaleX(1)}
  .section-title::after{width:46px}
  .card h3::after{transition:none}
  .btn-primary::after{transition:none}
  html.anim .reveal{opacity:1 !important;transform:none !important}
}
/* <<< FX-LAYER-END */

/* >>> MOBILE-LAYER-START（三站移动端适配层 · 由 _design/_apply_fx.py 生成，勿手改） */
/* ============================================================
   STARXB 三站移动端适配层 · mobile v1（2026-10-08）
   ------------------------------------------------------------
   依据：`_design/_audit_mobile.py` 实测结论
     ❌ 母品牌站：窄屏横向溢出 **202–234px** —— 6 项导航排在页头一行、
        且**没有汉堡按钮**，把整页撑到 624px 宽（390px 视口下可横向拖拽）
     ❌ vault 站：≤900px 导航被整块隐藏且无替代入口 → **移动端没有站内导航**
     ⚠️ 共性：`.header-cta` 高 38px（< 44px 触摸目标）
              `.vf-num` / `.project-tag` / `.vc-tag` 字号 11.5px
   ------------------------------------------------------------
   做法：
     ① 汉堡抽屉：`.nav-toggle` 由 app.js **注入**（仅当页面没有该按钮，
        故 starwaycross 自带的抽屉不受影响），并给 <html> 加 `fx-nav` 类
     ② 渐进增强：**只有 JS 成功注入并加上 `html.fx-nav` 后才隐藏原导航** ——
        万一 JS 未执行，导航仍然可见可用（不做"JS 失败就整块消失"）
     ③ 触摸目标统一抬到 ≥44px；小字号抬到 12px
   ------------------------------------------------------------
   ⚠️ 只在 ≤900px 生效的规则里隐藏导航，桌面端完全不受影响
   ============================================================ */

/* ============ ① 汉堡按钮（仅移动端显示） ============ */
@media (min-width:901px){
  /* 桌面端不显示。只作用于「本层注入」的按钮（html.fx-nav 是注入成功的标记）；
     starwaycross 自带的汉堡由它自己的样式控制，本层一律不碰。 */
  html.fx-nav .nav-toggle{display:none !important}
}

@media (max-width:900px){
  /* —— 抽屉式导航（仅当 app.js 注入成功、html.fx-nav 存在时生效）—— */
  html.fx-nav .site-nav{
    position:absolute;
    top:100%;left:0;right:0;
    z-index:65;
    display:none;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:6px 0;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 20px 34px -22px rgba(15,23,42,.34);
    max-height:min(72vh,520px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  html.fx-nav body.nav-open .site-nav{display:flex}
  html.fx-nav .site-nav a{
    display:flex;align-items:center;
    min-height:44px;
    padding:13px 24px;
    font-size:15px;
    border-bottom:1px solid var(--line);
  }
  html.fx-nav .site-nav a:last-child{border-bottom:0}
  html.fx-nav .site-nav a.is-on,
  html.fx-nav .site-nav a.active{background:var(--bg-alt)}
  /* 抽屉项占满整行（否则 align-items:center 会让「首页」这种短项只有 26px 宽） */
  html.fx-nav .site-nav{align-items:stretch}

  /* 汉堡按钮本体：44x44 触摸目标。
     ⚠️ 全部限定在 `html.fx-nav` 下 —— 那是**本层注入**按钮的标记。
        starwaycross 自带的汉堡**保留它自己的样式**（无边框 / 透明底 / navy 图标），
        本层不再覆盖它（2026-10-08 负责人要求）。 */
  html.fx-nav .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;
    border:1px solid var(--line);border-radius:10px;
    background:#fff;color:var(--ink);
    cursor:pointer;padding:0;
  }
  html.fx-nav .nav-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;
    stroke-width:1.9;stroke-linecap:round}
  html.fx-nav .nav-toggle .ic-close{display:none}
  html.fx-nav body.nav-open .nav-toggle .ic-menu{display:none}
  html.fx-nav body.nav-open .nav-toggle .ic-close{display:block}

  /* ★ 汉堡移到最右（在「加微信」之后）后，靠右成组必须改由 CTA 承担 auto 边距。
     各站断点不同，故该规则单独放在下方两个媒体查询里（见「靠右成组」段）。 */

  /* —— 触摸目标抬到 44px —— */
  .header-cta{min-height:44px;min-width:44px;padding-top:10px;padding-bottom:10px}
  .brand{min-height:44px}                     /* logo 是回首页的入口，别只有 21px 高 */
  .btn{min-height:44px}
  /* 独立成行的链接（页脚 / 官方来源 / 首屏子站入口 / 卡片尾部链接）给足高度；
     正文内的行内链接不动（那会把段落撑散） */
  .footer-links{row-gap:2px}
  .footer-links a,
  .res-list a,
  .hero-sites a,
  .crumb a,
  .project-link,
  .project-ext{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .footer-links a{padding:2px 0}
  .res-list a{padding:6px 0}
}

/* ============ ①-2 靠右成组：把 auto 边距放在「加微信」上（汉堡在它右边） ============ */
/* 汉堡移到最后一个位置后，若 auto 边距仍留在汉堡上，自由空间会被它左侧吃掉 →
   变成「[品牌][加微信] ……… [☰]」，而我们要的是「[品牌] ……… [加微信][☰]」。
   ⚠️ 必须按各站的抽屉断点分别覆盖，且**不能无条件加到桌面端** ——
      桌面端导航自身有 auto 边距，两个 auto 会抢空间、把导航挤到品牌旁边。
   · starxb / vault：本层接管的区间是 ≤900（按钮由本层注入，html.fx-nav 标记）
   · starwaycross：它自己的抽屉断点是 ≤1120，且只有它有 `.page` 包裹层（friends.html 例外，但它没有汉堡） */
@media (max-width:900px){
  html.fx-nav .header-cta{margin-left:auto}
  html.fx-nav .nav-toggle{margin-left:0}
}
@media (max-width:1120px){
  .page .header-cta{margin-left:auto}
  .page .nav-toggle{margin-left:0}
}

@media (max-width:640px){
  /* —— 小字号抬到 12px（11.5px 在手机上偏小）—— */
  .vf-num,.vs-tag,.project-tag,.vc-tag,.chip,.t-num{font-size:12px}
}

/* 触屏：hover 态不该"粘住" —— 去掉仅靠 hover 才出现的位移 */
@media (hover:none){
  .card:hover,.vcard:hover,.project-card:hover{transform:none}
}
/* <<< MOBILE-LAYER-END */

/* >>> DRAWER-LAYER-START（三站抽屉系统 · 由 _design/_apply_fx.py 生成，勿手改） */
/* ============================================================
   STARXB 三站抽屉系统 · drawer v1（2026-10-08）
   ------------------------------------------------------------
   负责人要求：「必要的内容直接展开，需要看详细时点开抽屉」+
             「不要只使用一个抽屉类型，要有多样化」
   ------------------------------------------------------------
   五种形态，各配最适合的内容类型（视觉同源、交互不同）：

     A. .dtls    行内折叠块   —— 正文里的单块明细（博客表格 / FAQ 单条 / 政策单条）
                                 就地展开，不打断阅读流；原生 <details>，无 JS 也能用
     B. .acc     手风琴组     —— 并列同类明细（6 模块 / 13 产业链 / 13 阶段 / 法律条款）
                                 同组只开一个，页面不会被"全开"撑爆
     C. .sheet   侧滑抽屉     —— 大表 / 长清单（要看全但不必占版面）
                                 右侧滑入；≤640px 自动变成底部上滑
     D. .sheet.is-pop 弹出详情 —— 单条明细（一个环节的交付物 / 一项保障的边界）
                                 居中卡片，看完即关，不丢上下文
     E. .more    渐隐展开     —— 长正文（关于我们叙事 / 政策前言）
                                 默认截断 + 渐隐遮罩，点「展开全文」
   ------------------------------------------------------------
   ★ 渐进增强铁律：凡"需要 JS 才显示内容"的形态，**无 JS 时必须原样可见**
     · C/D 的 .sheet 默认是普通文档流（内容照常可读），
       只有 JS 就绪并给 <html> 加上 `fx-drawer` 之后，才变成浮层且默认收起
     · E 的正文默认不截断，同样等 `fx-drawer` 才截断
   ★ 零外部依赖：只用 CSS 渐变与内联 SVG 符号
   ============================================================ */

/* ---------- 0. 令牌兜底（starxb / vault 也适用） ---------- */
:root{
  --dr-accent: var(--A, var(--brand, var(--accent, #165DFF)));
  --dr-line:   var(--line, #E7ECF3);
  --dr-line-2: var(--line-2, #EDF1F7);
  --dr-bg:     #fff;
  --dr-bg-soft:var(--bg-alt, #F7F9FC);
  --dr-ink:    var(--ink, #0F172A);
  --dr-ink-2:  var(--ink-2, #475569);
  --dr-ink-3:  var(--ink-3, #94A3B8);
  --dr-radius: var(--radius, 16px);
  --dr-ease:   cubic-bezier(.16,1,.3,1);
  --dr-dur:    280ms;
}

/* ============================================================
   A. 行内折叠块（沿用站内既有 .dtls 视觉，并补齐另两站缺失的基线）
   ============================================================ */
.dtls{
  border:1px solid var(--dr-line);
  border-radius:var(--dr-radius);
  background:var(--dr-bg);
  overflow:hidden;
  transition:border-color 180ms ease-out, box-shadow var(--dr-dur) var(--dr-ease);
}
.dtls>summary{
  display:flex;align-items:center;gap:10px;
  padding:16px 20px;cursor:pointer;list-style:none;
  font-size:15px;color:var(--dr-ink);
  transition:background-color 160ms ease-out;
}
.dtls>summary::-webkit-details-marker{display:none}
.dtls>summary::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--dr-accent);
}
.dtls>summary::after{
  content:"+";margin-left:auto;flex:none;
  font-variant-numeric:tabular-nums;font-weight:700;
  color:var(--dr-accent);transition:transform var(--dr-dur) var(--dr-ease);
}
.dtls[open]>summary::after{content:"–"}
.dtls>summary:hover{background:var(--dr-bg-soft)}
.dtls-t{font-weight:700;color:var(--dr-ink)}
.dtls-m{font-size:12.5px;color:var(--dr-ink-3);font-weight:500}
.dtls-b{padding:4px 20px 22px;border-top:1px solid var(--dr-line)}
.dtls[open]{
  border-color:color-mix(in srgb,var(--dr-accent) 34%,var(--dr-line));
  box-shadow:0 10px 26px -20px rgba(15,23,42,.30);
}
/* 抽屉内的表格：移动端横向可滚，不再挤压正文 */
.dtls-b .tbl-wrap{margin-top:8px}

/* ---------- A-2 FAQ 专用：逐问一个抽屉 ---------- */
/* 延续原 FAQ 的 Q 徽章语义（把默认圆点换成 Q），答案段落紧凑 */
.faq{display:grid;gap:12px;margin-top:32px}
.faq .dtls>summary{padding:18px 22px}
.faq .dtls>summary::before{
  content:"Q";
  width:19px;height:19px;border-radius:5px;
  background:var(--dr-accent);color:#fff;
  font-size:12px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.faq .dtls-b>p{font-size:14.5px;line-height:1.72;color:var(--dr-ink-2)}
.faq .dtls-b>p+p{margin-top:10px}

/* ============================================================
   B. 手风琴组：同组只开一个
   ============================================================ */
.acc{display:flex;flex-direction:column;gap:8px}
.acc .dtls>summary{padding:14px 20px}
.acc .acc-n{
  flex:none;min-width:26px;height:26px;padding:0 6px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--dr-bg-soft);color:var(--dr-accent);border:1px solid var(--dr-line);
}
.acc .dtls>summary::before{display:none}      /* 用序号替代圆点，避免两个装饰打架 */
/* 组头：说明这一组是干什么的 */
.acc-head{
  display:flex;align-items:baseline;gap:10px;margin:0 0 4px;
  font-size:12.5px;letter-spacing:.06em;color:var(--dr-ink-3);
}

/* ============================================================
   C / D. 侧滑抽屉（默认普通文档流；JS 就绪后才变浮层）
   ============================================================ */
.sheet{position:static}                        /* 无 JS：内容原样可见 */
.sheet-bg,.sheet-close,.sheet-h{display:none}   /* 无 JS：不出现浮层控件 */

html.fx-drawer .sheet{position:fixed;inset:0;z-index:95;display:none}
html.fx-drawer .sheet.on{display:block}
html.fx-drawer .sheet-bg{
  display:block;position:absolute;inset:0;
  background:rgba(10,18,51,.46);backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--dr-dur) var(--dr-ease);
}
html.fx-drawer .sheet.on .sheet-bg{opacity:1}
html.fx-drawer .sheet-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(92vw,760px);
  background:var(--dr-bg);
  box-shadow:-24px 0 60px -30px rgba(15,23,42,.42);
  display:flex;flex-direction:column;
  transform:translateX(102%);
  transition:transform var(--dr-dur) var(--dr-ease);
  will-change:transform;
}
html.fx-drawer .sheet.on .sheet-panel{transform:none}
html.fx-drawer .sheet-h{
  display:flex;align-items:center;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--dr-line);
  background:linear-gradient(180deg,rgba(22,93,255,.05),transparent);
}
html.fx-drawer .sheet-t{font-size:16px;font-weight:700;color:var(--dr-ink);margin:0}
html.fx-drawer .sheet-m{font-size:12.5px;color:var(--dr-ink-3)}
html.fx-drawer .sheet-close{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto;flex:none;width:40px;height:40px;padding:0;cursor:pointer;
  border:1px solid var(--dr-line);border-radius:10px;background:#fff;color:var(--dr-ink);
}
html.fx-drawer .sheet-close svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}
html.fx-drawer .sheet-body{padding:22px;overflow-y:auto;overscroll-behavior:contain;flex:1}

/* D. 弹出详情：居中卡片（同一个控制器，视觉不同） */
html.fx-drawer .sheet.is-pop .sheet-panel{
  top:50%;right:auto;left:50%;bottom:auto;
  width:min(92vw,560px);max-height:82vh;
  border-radius:var(--dr-radius);
  transform:translate(-50%,-46%) scale(.97);
  opacity:0;
}
html.fx-drawer .sheet.is-pop.on .sheet-panel{transform:translate(-50%,-50%) scale(1);opacity:1}
html.fx-drawer .sheet.is-pop .sheet-body{padding:20px 22px 24px}

/* 触发按钮：收起态看起来像"可点开"，而不是一段裸文字 */
.dr-btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:11px 18px;
  border:1px solid var(--dr-line);border-radius:999px;
  background:var(--dr-bg);color:var(--dr-ink);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color 160ms ease-out,background-color 160ms ease-out,
             transform var(--dr-dur) var(--dr-ease),box-shadow var(--dr-dur) var(--dr-ease);
}
.dr-btn::after{content:"→";font-weight:700;color:var(--dr-accent);
  transition:transform var(--dr-dur) var(--dr-ease)}
.dr-btn:hover{
  border-color:color-mix(in srgb,var(--dr-accent) 42%,var(--dr-line));
  background:var(--dr-bg-soft);
  box-shadow:0 10px 24px -18px rgba(15,23,42,.34);
}
.dr-btn:hover::after{transform:translateX(4px)}
.dr-btn-n{font-variant-numeric:tabular-nums;color:var(--dr-ink-3);font-weight:600;font-size:12.5px}

/* ============================================================
   E. 渐隐展开（长正文；无 JS 时不截断）
   ============================================================ */
.more-b{position:relative}
html.fx-drawer .more:not(.more-open) .more-b{
  max-height:16em;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
}
html.fx-drawer .more:not(.more-open)+.more-btn{display:inline-flex}
html.fx-drawer .more.more-open+.more-btn{display:inline-flex}
.more-btn{display:none}                        /* 无 JS：不出现按钮（内容本就完整）*/

/* ============================================================
   移动端：侧滑抽屉改底部上滑；触摸目标与可读性
   ============================================================ */
@media (max-width:640px){
  html.fx-drawer .sheet-panel{
    top:auto;left:0;right:0;
    width:100%;height:min(86vh,720px);
    border-radius:var(--dr-radius) var(--dr-radius) 0 0;
    transform:translateY(102%);
  }
  html.fx-drawer .sheet.on .sheet-panel{transform:none}
  html.fx-drawer .sheet.is-pop .sheet-panel{
    top:auto;bottom:0;left:0;right:0;
    width:100%;max-height:86vh;
    transform:translateY(102%);opacity:1;
  }
  html.fx-drawer .sheet.is-pop.on .sheet-panel{transform:none}
  /* 底部上滑时给一个抓取把手 */
  html.fx-drawer .sheet-panel::before{
    content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;
    border-radius:2px;background:var(--dr-line);transform:translateX(-50%);
  }
  html.fx-drawer .sheet-h{padding-top:20px}
  .dtls>summary{padding:14px 16px;flex-wrap:wrap}
  .dtls-b{padding:4px 16px 18px}
  .dr-btn{width:100%;justify-content:center}
}

/* ============================================================
   无障碍：减少动态时去掉位移与遮罩过渡
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.fx-drawer .sheet-bg,
  html.fx-drawer .sheet-panel,
  .dtls>summary::after,
  .dr-btn,.dr-btn::after{transition:none !important}
  html.fx-drawer .more:not(.more-open) .more-b{
    -webkit-mask-image:none;mask-image:none;
  }
}
/* <<< DRAWER-LAYER-END */