/* ===================================================================
   思领客 SCLINK · 官网样式  V5
   -------------------------------------------------------------------
   设计主张：「密文双色 · 蓝图体」
     · 双色语义 —— 橙 = 思领客/行动，青 = 密文/安全，灰 = 明文
     · 蓝图网格 —— 用 CSS 织出的结构纹理，替代"什么都没有"的纯色底
     · 字阶跳跃 —— 6 级字阶，靠对比而非装饰制造层级
     · 三档节奏 —— 密 64 / 常 96 / 疏 132，让滚动有起伏
   约束：零图片 · 零外部字体 · 零外部依赖 · WCAG AA
   主题：data-theme="dark"(默认) | "light"
   =================================================================== */

/* ===================================================================
   1. 设计 Token
   =================================================================== */
:root, [data-theme="dark"]{
  /* 表面 —— 相邻两级必须可辨，这是"薄"与"厚"的分界 */
  --bg:        #08090b;
  --s1:        #0e1014;
  --s2:        #15181e;
  --s3:        #1d212a;
  --s4:        #262b36;
  --nav-bg:    rgba(10,11,14,.82);
  --foot-bg:   #0e1116;
  --qr-bg:     #ffffff;

  /* 发丝线 */
  --hair:      rgba(255,255,255,.075);
  --hair-2:    rgba(255,255,255,.13);
  --hair-3:    rgba(255,255,255,.24);

  /* 文字 —— 冷石墨，把"暖"全部让给两个强调色 */
  --ink-1:     #eceef2;   /* 16.9:1 on --bg */
  --ink-2:     #a3aab6;   /*  8.1:1 */
  --ink-3:     #767e8c;   /*  4.6:1 */

  /* 强调 · 橙：思领客本体与行动 */
  --sig:       #f2622e;   /*  6.2:1 */
  --sig-2:     #ff8a5c;
  --sig-dim:   rgba(242,98,46,.14);
  --sig-line:  rgba(242,98,46,.42);
  --sig-bg:    rgba(242,98,46,.055);
  --on-sig:    #140803;

  /* 强调 · 青：密文、加密、链路 */
  --cipher:    #3fb9ff;   /*  9.0:1 */
  --cipher-dim:rgba(63,185,255,.13);
  --cipher-line:rgba(63,185,255,.38);
  --cipher-bg: rgba(63,185,255,.055);

  /* 状态 */
  --st-ok:     #4ec98c;   /*  8.5:1 */
  --st-ok-line:rgba(78,201,140,.38);
  --st-warn:   #d9a53a;   /*  7.9:1 */
  --st-warn-line:rgba(217,165,58,.38);
  --st-off:    #767e8c;

  /* 交互 */
  --hi:        rgba(255,255,255,.05);
  --hi-2:      rgba(255,255,255,.025);
  --grid:      rgba(255,255,255,.032);
  --grid-2:    rgba(255,255,255,.055);
  --scrim:     rgba(4,5,7,.78);
  --sel:       rgba(63,185,255,.26);
  --focus:     #3fb9ff;
  --draft:     rgba(255,255,255,.10);
  --mark-ink:  #eceef2;
  --mark-ink2: #a3aab6;
  --warn-bg:   rgba(217,165,58,.06);
  --warn-br:   rgba(217,165,58,.38);

  /* 动效 */
  --e-out:     cubic-bezier(.22,.61,.36,1);
  --e-in-out:  cubic-bezier(.65,.05,.36,1);
  --t-fast:    .14s;
  --t-base:    .22s;
  --t-slow:    .44s;

  color-scheme: dark;
}

[data-theme="light"]{
  --bg:        #f6f5f2;
  --s1:        #ffffff;
  --s2:        #fbfaf8;
  --s3:        #eeede9;
  --s4:        #e2e0da;
  --nav-bg:    rgba(255,255,255,.85);
  --foot-bg:   #f0efeb;
  --qr-bg:     #ffffff;

  --hair:      rgba(16,18,22,.10);
  --hair-2:    rgba(16,18,22,.17);
  --hair-3:    rgba(16,18,22,.32);

  --ink-1:     #12151a;   /* 16.8:1 */
  --ink-2:     #4b5158;   /*  7.4:1 */
  --ink-3:     #6c727b;   /*  4.6:1 */

  --sig:       #c2410c;   /*  4.8:1 */
  --sig-2:     #9a3412;
  --sig-dim:   rgba(194,65,12,.10);
  --sig-line:  rgba(194,65,12,.36);
  --sig-bg:    rgba(194,65,12,.045);
  --on-sig:    #ffffff;

  --cipher:    #0b6ba8;   /*  5.4:1 */
  --cipher-dim:rgba(11,107,168,.10);
  --cipher-line:rgba(11,107,168,.34);
  --cipher-bg: rgba(11,107,168,.045);

  --st-ok:     #1a7a4e;   /*  4.9:1 */
  --st-ok-line:rgba(26,122,78,.34);
  --st-warn:   #8a6212;   /*  5.1:1 */
  --st-warn-line:rgba(138,98,18,.34);
  --st-off:    #6c727b;

  --hi:        rgba(16,18,22,.04);
  --hi-2:      rgba(16,18,22,.02);
  --grid:      rgba(16,18,22,.045);
  --grid-2:    rgba(16,18,22,.07);
  --scrim:     rgba(24,22,18,.44);
  --sel:       rgba(11,107,168,.18);
  --focus:     #0b6ba8;
  --draft:     rgba(16,18,22,.08);
  --mark-ink:  #12151a;
  --mark-ink2: #4b5158;
  --warn-bg:   rgba(138,98,18,.05);
  --warn-br:   rgba(138,98,18,.32);

  color-scheme: light;
}

/* 尺度刻度 —— 全站唯一来源，禁止散落魔数 */
:root{
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px; --sp-10: 56px; --sp-11: 72px; --sp-12: 96px;
  --sp-13: 132px;

  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 14px; --r-pill: 999px;

  --w-page: 1280px;   /* 全站唯一容器宽度 */
  --w-read: 760px;    /* 长文阅读宽度 */

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Noto Sans SC",
    "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
    "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(38px, 5.6vw, 68px);
  --fs-h1:      clamp(31px, 4vw, 50px);
  --fs-h2:      clamp(25px, 2.9vw, 38px);
  --fs-h3:      19px;
  --fs-h4:      16px;
  --fs-body:    15.5px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-tick:    11px;
}

/* ===================================================================
   2. 基础
   =================================================================== */
*{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth; scroll-padding-top:84px;
  text-size-adjust:100%;
}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink-1);
  font-size:var(--fs-body); line-height:1.65;
  letter-spacing:0;               /* 中文不使用负字距 */
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
::selection{ background:var(--sel); color:var(--ink-1); }

:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px;
  border-radius:var(--r-1);
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--hair-3); border:3px solid transparent;
  background-clip:content-box; border-radius:var(--r-pill);
}
::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); border:3px solid transparent; background-clip:content-box; }

a{ color:inherit; }
b, strong{ font-weight:600; color:var(--ink-1); }
em{ font-style:normal; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip{
  position:fixed; top:-60px; left:var(--sp-4); z-index:300;
  padding:10px 18px; background:var(--sig); color:var(--on-sig);
  border-radius:0 0 var(--r-2) var(--r-2);
  font-size:var(--fs-xs); font-weight:600; text-decoration:none;
  transition:top var(--t-fast) var(--e-out);
}
.skip:focus{ top:0; }

/* ===================================================================
   3. 布局原语
   =================================================================== */
.wrap, .wrap-w{ max-width:var(--w-page); margin:0 auto; padding:0 var(--sp-7); }
.wrap-n{ max-width:var(--w-read); margin:0 auto; padding:0 var(--sp-7); }

.grid{ display:grid; gap:var(--sp-5); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-75{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.g-64{ grid-template-columns:minmax(0,6fr) minmax(0,4fr); }
.g-55{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* 区块：三档节奏，密 → 常 → 疏 */
.sect{ padding:var(--sp-12) 0; border-bottom:1px solid var(--hair); position:relative; }
.sect.tight{ padding:var(--sp-11) 0; }
.sect.loose{ padding:var(--sp-13) 0; }
.sect-alt{ background:var(--foot-bg); }
.sect-h{ margin-bottom:var(--sp-9); max-width:64ch; }
.sect-h.wide{ max-width:none; }
.sect-h .tick{ display:block; margin-bottom:var(--sp-4); }
.sect-h h2{ font-size:var(--fs-h2); font-weight:600; letter-spacing:-.012em; line-height:1.24; }
.sect-h p{ font-size:16.5px; color:var(--ink-2); margin-top:var(--sp-4); line-height:1.68; }

/* 蓝图网格 —— 结构纹理，不是装饰 */
.bp{
  position:relative;
}
.bp::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
}
.bp-soft::before{
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 78%);
}
.bp > *{ position:relative; z-index:1; }

/* ===================================================================
   4. 排版工具
   =================================================================== */
.lbl, .tick{
  font-family:var(--font-mono); font-size:var(--fs-tick);
  color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase;
}
.tick{ letter-spacing:.1em; }
.mono{ font-family:var(--font-mono); }
.num{
  font-family:var(--font-mono); font-size:var(--fs-tick); color:var(--ink-3);
  border:1px solid var(--hair-2); padding:1px 6px; border-radius:var(--r-1);
}
.sig{ color:var(--sig); }
.cph{ color:var(--cipher); }
.hl{ color:var(--cipher); }
.hl-sig{ color:var(--sig); }

/* ===================================================================
   5. 导航
   =================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg); border-bottom:1px solid var(--hair);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
}
.nav-in{ display:flex; align-items:center; gap:var(--sp-3); height:64px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.mark{
  width:28px; height:28px; flex:0 0 28px; border:1px solid var(--hair-3);
  border-radius:var(--r-2); display:grid; place-items:center;
  transition:border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.mark svg{ width:15px; height:15px; stroke:var(--mark-ink); }
.brand:hover .mark{ border-color:var(--sig-line); background:var(--sig-dim); }
.brand b{ font-size:15px; font-weight:600; letter-spacing:.04em; }
.brand .en{
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3);
  letter-spacing:.14em; padding-left:2px;
}
.nav-links{ display:flex; align-items:center; gap:2px; margin-left:var(--sp-6); }
.nav-links a{
  position:relative; font-size:var(--fs-sm); color:var(--ink-2);
  text-decoration:none; padding:7px 12px; border-radius:var(--r-2);
  transition:color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.nav-links a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:3px; height:1px;
  background:var(--sig); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base) var(--e-out);
}
.nav-links a:hover{ color:var(--ink-1); background:var(--hi); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-act{ display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; }

/* ===================================================================
   6. 按钮
   =================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 18px; border-radius:var(--r-2);
  font-family:inherit; font-size:var(--fs-sm); font-weight:500;
  border:1px solid var(--hair-2); background:transparent; color:var(--ink-1);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background var(--t-fast) var(--e-out),
             border-color var(--t-fast) var(--e-out),
             color var(--t-fast) var(--e-out),
             transform var(--t-fast) var(--e-out);
}
.btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; flex:0 0 15px; }
.btn:hover{ background:var(--hi); border-color:var(--hair-3); }
.btn:active{ transform:translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.42; pointer-events:none; }

.btn.pri{
  background:var(--sig); border-color:var(--sig); color:var(--on-sig); font-weight:600;
  box-shadow:0 0 0 0 rgba(242,98,46,.5);
}
.btn.pri:hover{
  background:var(--sig-2); border-color:var(--sig-2);
  box-shadow:0 6px 26px -8px rgba(242,98,46,.55);
}
.btn.gh{ border-color:transparent; color:var(--ink-2); }
.btn.gh:hover{ color:var(--ink-1); background:var(--hi); }
.btn.lg{ height:46px; padding:0 24px; font-size:15px; border-radius:var(--r-2); }
.btn.sm{ height:32px; padding:0 12px; font-size:12.5px; }
.btn.full{ width:100%; }

/* 主题切换 */
.tbtn{ gap:6px; }
.tbtn span{ line-height:1; }

/* ===================================================================
   7. Hero
   =================================================================== */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--hair);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(110% 90% at 18% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(110% 90% at 18% 0%, #000 0%, transparent 72%);
}
.hero::after{
  content:''; position:absolute; top:-380px; left:8%; width:900px; height:620px;
  pointer-events:none;
  background:radial-gradient(ellipse at center, var(--sig-dim), transparent 66%);
}
.hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:var(--sp-11); align-items:center;
  padding-top:var(--sp-12); padding-bottom:var(--sp-11);
}
.hero-t{ display:flex; flex-direction:column; align-items:flex-start; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px 5px 10px; border-radius:var(--r-pill);
  border:1px solid var(--st-ok-line); background:rgba(78,201,140,.07);
  font-family:var(--font-mono); font-size:var(--fs-tick);
  letter-spacing:.06em; color:var(--st-ok); margin-bottom:var(--sp-6);
}
.pill .dot{
  width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:pulse 2.2s var(--e-in-out) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.82); }
}

.hero h1{
  font-size:clamp(34px,4.2vw,58px); font-weight:600; line-height:1.14;
  letter-spacing:-.02em; margin-bottom:var(--sp-6); max-width:none;
  text-wrap:balance;
}
.hero p.lede{
  font-size:16.5px; color:var(--ink-2); max-width:46ch; line-height:1.7;
  margin-bottom:var(--sp-8);
}
.hero p.lede b{ color:var(--ink-1); }
.hero-cta{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; }

/* Hero 信任芯片 */
.chips{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  margin-top:var(--sp-9); padding-top:var(--sp-6);
  border-top:1px solid var(--hair);
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-xs); color:var(--ink-3);
}
.chip svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.7; flex:0 0 14px; }
.chip.cph{ color:var(--cipher); }
.chip.cph span{ color:var(--ink-3); }

/* ===================================================================
   8. 密文转译示意（品牌记忆点）
   =================================================================== */
.cipher-card{
  border:1px solid var(--hair-2); border-radius:var(--r-4);
  background:linear-gradient(180deg, var(--s1), var(--bg) 92%);
  overflow:hidden; position:relative;
}
.cipher-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 82%);
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 82%);
}
.cc-bar{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:var(--sp-2);
  padding:11px 15px; border-bottom:1px solid var(--hair);
}
.cc-bar .d{ width:8px; height:8px; border-radius:50%; background:var(--hair-3); }
.cc-bar .t{
  margin-left:auto; font-family:var(--font-mono); font-size:10.5px;
  color:var(--ink-3); letter-spacing:.1em;
}
.cc-body{ position:relative; z-index:1; padding:var(--sp-6) var(--sp-5) var(--sp-5); }

.cc-cols{ display:grid; grid-template-columns:1fr 44px 1fr; align-items:center; gap:0; }
.cc-col .h{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:var(--sp-3);
}
.cc-col.left .h{ color:var(--ink-3); }
.cc-col.right .h{ color:var(--cipher); }
.cc-line{
  display:flex; align-items:center; gap:9px; padding:5px 0;
  font-family:var(--font-mono); font-size:11.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.cc-line .ix{ color:var(--ink-3); opacity:.6; flex:0 0 auto; }
.cc-col.left .cc-line code{ color:var(--ink-2); }
.cc-col.right .cc-line code{ color:var(--cipher); letter-spacing:.02em; }

.cc-mid{ display:grid; place-items:center; }
.cc-lock{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--sig-line); background:var(--sig-dim);
  display:grid; place-items:center; color:var(--sig);
  box-shadow:0 0 0 6px rgba(242,98,46,.05);
  animation:lockGlow 3.4s var(--e-in-out) infinite;
}
.cc-lock svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; }
@keyframes lockGlow{
  0%,100%{ box-shadow:0 0 0 6px rgba(242,98,46,.05); }
  50%    { box-shadow:0 0 0 12px rgba(242,98,46,.02); }
}

.cc-foot{
  margin-top:var(--sp-5); padding-top:var(--sp-4);
  border-top:1px solid var(--hair);
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--ink-3); line-height:1.6;
}
.cc-foot svg{ width:14px; height:14px; stroke:var(--cipher); fill:none; stroke-width:1.7; flex:0 0 14px; }
.cc-foot b{ color:var(--ink-2); font-weight:500; }

/* 安装命令 */
.slab{
  border:1px solid var(--hair-2); border-radius:var(--r-3);
  padding:var(--sp-4) var(--sp-5); margin-top:var(--sp-4);
}
.slab .k{
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--sp-3);
}
.slab .v{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.65; }
.slab .v .mono{ font-size:12.5px; color:var(--ink-1); }

/* ===================================================================
   9. 代码
   =================================================================== */
.code{
  font-family:var(--font-mono); font-size:12.5px; line-height:1.8;
  background:var(--bg); border:1px solid var(--hair); border-radius:var(--r-2);
  padding:13px 15px; color:var(--ink-2); overflow-x:auto; margin:0;
}
.code .c{ color:var(--ink-3); }
.code .k{ color:var(--sig); }
.code .s{ color:var(--st-ok); }
.code .p{ color:var(--cipher); }
.copywrap{ position:relative; }
.copybtn{ position:absolute; top:8px; right:8px; min-width:58px; }

/* ===================================================================
   10. 三列特性（大编号 + 双色）
   =================================================================== */
.feat{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.feat > div{
  padding:0 var(--sp-7); border-left:1px solid var(--hair);
  position:relative;
}
.feat > div:first-child{ padding-left:0; border-left:0; }
.feat > div:last-child{ padding-right:0; }
.feat .idx{
  font-family:var(--font-mono); font-size:34px; font-weight:400;
  color:var(--hair-3); letter-spacing:-.02em; line-height:1;
  margin-bottom:var(--sp-5); display:block;
  transition:color var(--t-base) var(--e-out);
}
.feat > div:hover .idx{ color:var(--sig); }
.feat h3{
  font-size:var(--fs-h3); font-weight:600; margin-bottom:var(--sp-3);
  letter-spacing:-.008em;
}
.feat p{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.72; }
.feat .more{
  font-size:var(--fs-xs); color:var(--ink-3); margin-top:var(--sp-4);
  line-height:1.65; padding-left:var(--sp-3);
  border-left:1px solid var(--hair-2);
}

/* ===================================================================
   10b. 四步时间轴
   =================================================================== */
.steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative;
}
/* 贯通四步的横轴 */
.steps::before{
  content:''; position:absolute; top:15px; left:15px; right:calc(25% - 15px);
  height:1px; background:var(--hair-2);
}
.step{ padding-right:var(--sp-6); position:relative; }
.step:last-child{ padding-right:0; }
.step .sn{
  position:relative; z-index:1;
  width:31px; height:31px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:var(--sp-5);
  border:1px solid var(--sig-line); background:var(--bg); color:var(--sig);
  font-family:var(--font-mono); font-size:12.5px;
  transition:background var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.step:hover .sn{ background:var(--sig); color:var(--on-sig); }
.step h3{ font-size:var(--fs-h4); font-weight:600; margin-bottom:var(--sp-3); letter-spacing:-.008em; }
.step p{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.72; }

/* ===================================================================
   11. 数据路径（可交互 lane）
   =================================================================== */
.lanes{ border-top:1px solid var(--hair); }
.lane{
  display:grid; grid-template-columns:210px minmax(0,1fr);
  gap:var(--sp-7); padding:var(--sp-6) var(--sp-4);
  border-bottom:1px solid var(--hair);
  position:relative; transition:background var(--t-base) var(--e-out);
}
.lane::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:transparent; transition:background var(--t-base) var(--e-out);
}
.lane:hover{ background:var(--hi-2); }
.lane.k-sclink::before{ background:var(--sig-line); }
.lane.k-direct::before{ background:var(--st-ok-line); }
.lane.k-relay::before{ background:var(--cipher-line); }
.lane .nm{ font-size:15px; font-weight:600; letter-spacing:-.008em; }
.lane .nm .st{ display:flex; margin-top:var(--sp-3); }
.lane .ds{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.72; }

.flow{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); }
.flow .st{ margin-left:var(--sp-1); }
.fnote{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  margin-left:var(--sp-1);
}
.note.push{ margin-top:var(--sp-7); }
.fd{
  font-family:var(--font-mono); font-size:11px; padding:5px 10px;
  border:1px solid var(--hair-2); border-radius:var(--r-2);
  color:var(--ink-2); background:var(--s1);
  transition:border-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.lane.k-sclink:hover .fd.on{ border-color:var(--sig); color:var(--sig); }
.lane.k-direct:hover .fd.gr { border-color:var(--st-ok); color:var(--st-ok); }
.lane.k-relay:hover .fd.on  { border-color:var(--cipher); color:var(--cipher); }
.fd.on{ border-color:var(--sig-line); color:var(--sig); }
.fd.cp{ border-color:var(--cipher-line); color:var(--cipher); }
.fd.gr{ border-color:var(--st-ok-line); color:var(--st-ok); }
.ar{ color:var(--ink-3); font-size:12px; display:inline-flex; }
.ar svg{ width:26px; height:12px; stroke:currentColor; fill:none; stroke-width:1.4; }

/* ===================================================================
   12. 状态标记
   =================================================================== */
.st{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-2); white-space:nowrap;
}
.st::before{
  content:''; width:6px; height:6px; border-radius:1px;
  background:currentColor; flex:0 0 6px;
}
.st.on{ color:var(--st-ok); }
.st.warn{ color:var(--st-warn); }
.st.off{ color:var(--st-off); }
.st.cp{ color:var(--cipher); }

/* ===================================================================
   13. 提示条
   =================================================================== */
.note{
  display:flex; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--hair); border-left:2px solid var(--ink-3);
  border-radius:var(--r-2); background:var(--s1);
  font-size:var(--fs-sm); line-height:1.7; color:var(--ink-2);
}
.note svg{ width:16px; height:16px; flex:0 0 16px; margin-top:3px; stroke:currentColor; fill:none; stroke-width:1.6; }
.note.w{ border-left-color:var(--st-warn); } .note.w svg{ color:var(--st-warn); }
.note.w{ background:var(--warn-bg); }
.note.d{ border-left-color:var(--sig); } .note.d svg{ color:var(--sig); }
.note.c{ border-left-color:var(--cipher); } .note.c svg{ color:var(--cipher); }
.note.c{ background:var(--cipher-bg); }
.note b{ color:var(--ink-1); font-weight:600; }
.note a{ color:var(--ink-1); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair-3); }
.note a:hover{ text-decoration-color:currentColor; }

/* ===================================================================
   14. 表
   =================================================================== */
.tblw{ overflow-x:auto; border:1px solid var(--hair); border-radius:var(--r-2); }
table{ width:100%; border-collapse:collapse; }
th{
  text-align:left; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase;
  padding:12px 16px; border-bottom:1px solid var(--hair-2);
  background:var(--s1); white-space:nowrap; position:sticky; top:0;
}
td{ padding:15px 16px; border-bottom:1px solid var(--hair); vertical-align:top; font-size:var(--fs-sm); }
tbody tr{ transition:background var(--t-fast) var(--e-out); }
tbody tr:hover{ background:var(--hi-2); }
tbody tr:last-child td{ border-bottom:0; }
.t-fixed{ table-layout:fixed; }
.c-p{ width:34%; } .c-f{ width:22%; } .c-a{ width:22%; } .c-s{ width:22%; }

/* ===================================================================
   15. 定价
   =================================================================== */
.price-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--hair-2); border-radius:var(--r-3); overflow:hidden;
}
.price{
  padding:var(--sp-7) var(--sp-6); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; position:relative; background:var(--s1);
}
.price:last-child{ border-right:0; }
.price.hot{ background:var(--sig-bg); }
.plan-flag{
  display:inline-block; align-self:flex-start;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.14em; color:var(--sig); border:1px solid var(--sig-line);
  border-radius:var(--r-1); padding:2px 8px; margin-bottom:var(--sp-5);
}
.price .pl{ font-size:var(--fs-xs); color:var(--ink-2); letter-spacing:.02em; }
.price .amt{
  font-family:var(--font-mono); font-size:38px; font-weight:400;
  letter-spacing:-.03em; margin:var(--sp-4) 0 var(--sp-1); line-height:1.05;
}
.price .amt small{ font-size:var(--fs-sm); color:var(--ink-3); letter-spacing:0; }
.price .desc{
  font-size:var(--fs-xs); color:var(--ink-3); line-height:1.65;
  margin-bottom:var(--sp-5); min-height:44px;
}
.price ul{ list-style:none; margin-bottom:var(--sp-6); }
.price li{
  font-size:var(--fs-sm); color:var(--ink-2); padding:8px 0;
  display:flex; gap:10px; align-items:flex-start; line-height:1.6;
}
.price li svg{ width:15px; height:15px; flex:0 0 15px; margin-top:3px; stroke:var(--st-ok); fill:none; stroke-width:2; }
.price li.no{ color:var(--ink-3); }
.price li.no svg{ stroke:var(--ink-3); opacity:.6; }
.price .btn{ margin-top:auto; }

/* ===================================================================
   16. FAQ
   =================================================================== */
.faq{ border-top:1px solid var(--hair); }
.faq-item{ border-bottom:1px solid var(--hair); }
.faq-q{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:22px 0; font:inherit; font-size:16.5px; font-weight:500; color:var(--ink-1);
  display:flex; gap:var(--sp-4); align-items:flex-start;
  transition:color var(--t-fast) var(--e-out);
}
.faq-q:hover{ color:var(--sig); }
.faq-q .n{
  font-family:var(--font-mono); font-size:11px; color:var(--sig);
  flex:0 0 22px; padding-top:5px;
}
.faq-q .ic{
  margin-left:auto; flex:0 0 15px; margin-top:5px; color:var(--ink-3);
  transition:transform var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.faq-item.open .faq-q .ic{ transform:rotate(135deg); color:var(--sig); }
.faq-a{
  overflow:hidden; max-height:0;
  transition:max-height var(--t-slow) var(--e-out);
}
.faq-a > div{
  padding:0 var(--sp-9) var(--sp-6) 38px;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:1.8; max-width:84ch;
}
.faq-item.open .faq-a{ max-height:520px; }
.faq-a code{
  font-family:var(--font-mono); font-size:12.5px; background:var(--s3);
  padding:2px 6px; border-radius:var(--r-1); color:var(--ink-1);
}
.faq-a a{ color:var(--cipher); text-decoration:underline; text-underline-offset:3px; }

/* ===================================================================
   17. 数字 / 证据区
   =================================================================== */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--hair-2); border-radius:var(--r-3); overflow:hidden;
}
.stat{ padding:var(--sp-6); border-right:1px solid var(--hair); background:var(--s1); }
.stat:last-child{ border-right:0; }
.stat .v{
  font-family:var(--font-mono); font-size:34px; font-weight:400;
  letter-spacing:-.03em; line-height:1; margin-bottom:var(--sp-3);
}
.stat .v .u{ font-size:15px; color:var(--ink-3); margin-left:3px; letter-spacing:0; }
.stat .k{ font-size:var(--fs-xs); color:var(--ink-3); line-height:1.6; }
.stat.a-sig .v{ color:var(--sig); }
.stat.a-cp  .v{ color:var(--cipher); }
.stat.a-ok  .v{ color:var(--st-ok); }

/* ===================================================================
   18. CTA
   =================================================================== */
.cta-band{
  position:relative; overflow:hidden;
  border:1px solid var(--hair-2); border-top:2px solid var(--sig);
  border-radius:var(--r-3); padding:var(--sp-11) var(--sp-7);
  text-align:center; background:var(--s1);
}
.cta-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(100% 120% at 50% 100%, #000 0%, transparent 76%);
  mask-image:radial-gradient(100% 120% at 50% 100%, #000 0%, transparent 76%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{
  font-size:clamp(24px,3vw,36px); font-weight:600;
  letter-spacing:-.018em; margin-bottom:var(--sp-3); line-height:1.25;
}
.cta-band p{ font-size:16px; color:var(--ink-2); margin-bottom:var(--sp-7); }
.cta-band .btns{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }

/* ===================================================================
   19. 页脚
   =================================================================== */
.foot{ border-top:1px solid var(--hair); background:var(--foot-bg); }
.foot-grid{
  display:grid; grid-template-columns:2.4fr 1fr 1fr 1fr;
  gap:var(--sp-9); padding:var(--sp-11) 0 var(--sp-9);
}
.foot h4{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  color:var(--ink-3); letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:var(--sp-4);
}
.foot a{
  display:block; font-size:var(--fs-sm); color:var(--ink-2);
  text-decoration:none; padding:5px 0;
  transition:color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.foot a:hover{ color:var(--ink-1); transform:translateX(3px); }
.foot p.tag{ font-size:var(--fs-xs); color:var(--ink-3); max-width:38ch; line-height:1.75; }
.foot .brand{ margin-bottom:var(--sp-4); }
.foot-bot{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-5) 0; border-top:1px solid var(--hair);
}
.foot-bot p{ font-size:12.5px; color:var(--ink-3); }
.foot-bot .sp{ margin-left:auto; }

/* ===================================================================
   20. 长文页（隐私 / 条款）
   =================================================================== */
.doc-h{ padding:var(--sp-11) 0 var(--sp-7); border-bottom:1px solid var(--hair); }
.doc-h h1{
  font-size:var(--fs-h1); font-weight:600; letter-spacing:-.02em;
  line-height:1.16; margin-bottom:var(--sp-4);
}
.doc-h p{ font-size:15.5px; color:var(--ink-2); line-height:1.72; }
.doc-h .meta{
  display:flex; gap:var(--sp-5); flex-wrap:wrap; margin-top:var(--sp-5);
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);
}
.doc{ padding:var(--sp-9) 0 var(--sp-11); }
.doc section{ margin-bottom:var(--sp-10); scroll-margin-top:84px; }
.doc h2{
  font-size:23px; font-weight:600; letter-spacing:-.012em;
  margin-bottom:var(--sp-4); padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--hair);
}
.doc h3{ font-size:var(--fs-h4); font-weight:600; margin:var(--sp-6) 0 var(--sp-3); }
.doc p{ font-size:15px; color:var(--ink-2); line-height:1.82; margin-bottom:var(--sp-4); }
.doc ul, .doc ol{ margin:0 0 var(--sp-5) var(--sp-5); }
.doc li{ font-size:15px; color:var(--ink-2); line-height:1.82; margin-bottom:var(--sp-2); }
.doc a{ color:var(--cipher); text-decoration:underline; text-underline-offset:3px; }
.doc code{
  font-family:var(--font-mono); font-size:13px; background:var(--s3);
  padding:2px 6px; border-radius:var(--r-1); color:var(--ink-1);
}
.doc strong{ color:var(--ink-1); font-weight:600; }

/* 法务长文页（隐私 / 条款）—— 两页共用，页面内不再放样式 */
.docw{ max-width:824px; margin:0 auto; padding:var(--sp-10) var(--sp-7) var(--sp-12); }
.legal h1{
  font-size:var(--fs-h1); font-weight:600; letter-spacing:-.02em;
  line-height:1.2; margin-bottom:var(--sp-3);
}
.legal .upd{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-3);
  margin-bottom:var(--sp-8); padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--hair);
}
.legal h2{
  font-size:21px; font-weight:600; letter-spacing:-.012em;
  margin:var(--sp-9) 0 var(--sp-4); scroll-margin-top:88px;
  padding-top:var(--sp-6); border-top:1px solid var(--hair);
}
.legal h2:first-of-type{ border-top:0; padding-top:0; margin-top:var(--sp-7); }
.legal h3{ font-size:16px; font-weight:600; margin:var(--sp-6) 0 var(--sp-3); }
.legal p{ font-size:15px; color:var(--ink-2); line-height:1.82; margin-bottom:var(--sp-4); }
.legal ul, .legal ol{ margin:0 0 var(--sp-5); padding-left:0; list-style:none; counter-reset:n; }
.legal li{
  font-size:15px; color:var(--ink-2); line-height:1.8;
  padding-left:22px; position:relative; margin-bottom:var(--sp-2);
}
.legal ul li::before{
  content:''; position:absolute; left:0; top:12px;
  width:7px; height:1px; background:var(--sig);
}
.legal ol li::before{
  counter-increment:n; content:counter(n) '.';
  position:absolute; left:0; top:0;
  font-family:var(--font-mono); font-size:13px; color:var(--ink-3);
}
.legal code, .legal .mono{
  font-family:var(--font-mono); font-size:13px; background:var(--s3);
  padding:2px 6px; border-radius:var(--r-1); color:var(--ink-1);
}
.legal .mono{ display:block; background:none; padding:0; line-height:1.8; }
.legal b{ color:var(--ink-1); font-weight:600; }
.legal a{ color:var(--cipher); text-decoration:underline; text-underline-offset:3px; }
.todo{
  border:1px dashed var(--st-warn-line); background:var(--warn-bg);
  border-radius:var(--r-2); padding:var(--sp-4) var(--sp-5); margin:var(--sp-6) 0;
}
.todo .lbl{ color:var(--st-warn); }
.todo p{ font-size:14px; margin-bottom:0; }

/* 目录 */
.toc{
  border:1px solid var(--hair-2); border-radius:var(--r-3);
  padding:var(--sp-5) var(--sp-6); background:var(--s1); margin-bottom:var(--sp-9);
}
.toc .k{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--sp-4); display:block;
}
.toc ol{ list-style:none; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px var(--sp-5); counter-reset:toc; }
.toc li{ margin:0; }
.toc a{
  display:flex; gap:9px; font-size:var(--fs-sm); color:var(--ink-2);
  text-decoration:none; padding:5px 0; transition:color var(--t-fast) var(--e-out);
}
.toc a::before{
  counter-increment:toc; content:counter(toc,decimal-leading-zero);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3); padding-top:2px;
}
.toc a:hover{ color:var(--sig); }

/* 定价页结构 */
.plan-note{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--hair-2); border-radius:var(--r-3);
  overflow:hidden; margin-top:var(--sp-7);
}
.plan-note > div{ padding:var(--sp-6); border-right:1px solid var(--hair); background:var(--s1); }
.plan-note > div:last-child{ border-right:0; }
.plan-note h4{ font-size:var(--fs-h4); font-weight:600; margin-bottom:var(--sp-3); }
.plan-note p{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.72; }

.terms{ margin-top:var(--sp-9); }
.terms h3{ font-size:var(--fs-h3); font-weight:600; margin-bottom:var(--sp-2); }
.terms > .tick{ display:block; margin-bottom:var(--sp-5); }
.trow{
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:var(--sp-7);
  padding:var(--sp-5) 0; border-bottom:1px solid var(--hair);
}
.trow:last-child{ border-bottom:0; }
.trow dt{ font-size:var(--fs-sm); font-weight:600; }
.trow dd{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.75; }
.trow dd a{ color:var(--cipher); text-decoration:underline; text-underline-offset:3px; }

/* 移动端菜单 */
.mbtn{ display:none; }
.mnav{
  display:none; border-top:1px solid var(--hair);
  background:var(--nav-bg); backdrop-filter:blur(12px);
}
.mnav.open{ display:block; }
.mnav a{
  display:block; padding:15px var(--sp-7); font-size:15px; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--hair);
}
.mnav a:active{ color:var(--ink-1); background:var(--hi); }

/* ===================================================================
   21. 入场动效（无 JS 不隐藏；reduced-motion 全关）
   =================================================================== */
html.js .rv{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
  transition-delay:var(--d,0ms);
}
html.js .rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js .rv{ opacity:1 !important; transform:none !important; }
  .faq-a{ max-height:none !important; }
}

/* ===================================================================
   22. 响应式
   =================================================================== */
@media (max-width:1279px){
  .hero-in{ grid-template-columns:minmax(0,1fr); gap:var(--sp-9); padding-top:var(--sp-11); padding-bottom:var(--sp-11); }
  .hero h1{ max-width:24ch; }
  .g-75, .g-64{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1023px){
  .nav-links{ display:none; }
  .mbtn{ display:inline-flex; }
  .sect{ padding:var(--sp-11) 0; }
  .sect.loose{ padding:var(--sp-12) 0; }
  .feat{ grid-template-columns:minmax(0,1fr); }
  .feat > div{ padding:var(--sp-6) 0; border-left:0; border-top:1px solid var(--hair); }
  .feat > div:first-child{ border-top:0; padding-top:0; }
  .feat .idx{ font-size:28px; margin-bottom:var(--sp-3); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-7) var(--sp-6); }
  .steps::before{ display:none; }
  .step{ padding-right:0; }
  .price-grid{ grid-template-columns:minmax(0,1fr); }
  .price{ border-right:0; border-bottom:1px solid var(--hair); }
  .price:last-child{ border-bottom:0; }
  .price .desc{ min-height:0; }
  .plan-note{ grid-template-columns:minmax(0,1fr); }
  .plan-note > div{ border-right:0; border-bottom:1px solid var(--hair); }
  .plan-note > div:last-child{ border-bottom:0; }
  .trow{ grid-template-columns:minmax(0,1fr); gap:var(--sp-2); }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--hair); }
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lane{ grid-template-columns:minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-7); }
  .toc ol{ grid-template-columns:minmax(0,1fr); }
  .c-p{ width:40%; } .c-f{ width:20%; } .c-a{ width:20%; } .c-s{ width:20%; }
}
@media (max-width:767px){
  :root{ --sp-11:56px; --sp-12:68px; --sp-13:84px; }
  .wrap, .wrap-w, .wrap-n{ padding:0 var(--sp-5); }
  .hero-in{ padding-top:var(--sp-9); padding-bottom:var(--sp-9); }
  .hero p.lede{ font-size:15.5px; max-width:none; }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1 1 auto; }
  .chips{ gap:var(--sp-3) var(--sp-5); }
  .g-2, .g-3, .g-4, .g-75, .g-64, .g-55{ grid-template-columns:minmax(0,1fr); }
  .steps{ grid-template-columns:minmax(0,1fr); gap:var(--sp-6); }
  .cc-cols{ grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
  .cc-mid{ padding:var(--sp-2) 0; }
  .cc-lock{ transform:rotate(90deg); }
  .cc-col.right .cc-line code{ font-size:11px; }
  .btn{ height:36px; }
  .btn.lg{ height:44px; }
  .foot-grid{ grid-template-columns:minmax(0,1fr); gap:var(--sp-7); padding:var(--sp-9) 0 var(--sp-8); }
  .cta-band{ padding:var(--sp-9) var(--sp-5); }
  .cta-band .btns{ flex-direction:column; }
  .cta-band .btns .btn{ width:100%; }
  .faq-q{ font-size:15.5px; }
  .faq-a > div{ padding:0 0 var(--sp-5) 34px; }
  .doc-h{ padding:var(--sp-9) 0 var(--sp-6); }
  .stat{ padding:var(--sp-5); }
  .stat .v{ font-size:28px; }
  .mnav a{ padding:15px var(--sp-5); }
}