/* ==========================================================================
   110.cx 米表 · 首页专用样式（独立文件，2026-09-20 上线）
   --------------------------------------------------------------------------
   设计语言参考 juliang.app：暗色画布 + 玻璃拟态 + 渐变品牌色 +
   三字体族（Space Grotesk / DM Sans / JetBrains Mono）+ 等宽数字。

   ⚠️ 这个文件**不经过 Tailwind 构建**，是手写产物：
       源 = assets/home.css   →  产物 = static/css/home.css（直接 cp）
      跟 app.css 是两套互相独立的体系，别混用。

   ⚠️ 类名与 app.css 有重叠（.btn / .nav / .stat / .num / .pill …），
      所以首页**只引这一个文件，绝对不要同时引 app.css**，否则后加载的
      Tailwind 基础层会把这里的布局冲掉。

   ── 换配色 / 换明暗 ──────────────────────────────────────────────
   品牌色只定义 --brand-base（主）与 --accent（副）两个源头，其余全部用
   color-mix() 派生 —— 所以整套换装只要改 <html> 上的属性：
       data-palette = juliang（玫红→橙，当前）| cx（系统蓝→品牌绿）| iris（靛紫→青）
       data-theme   = dark（当前）| light
   想加第四套配色：照抄一段 [data-palette="…"]{ --brand-base:…; --accent:…; } 即可。
   ========================================================================== */

:root{
  color-scheme: dark;

  /* ---- 品牌色（每个调色板只覆盖这几个源头） ---- */
  --brand-base: #ff2d74;
  --accent:     #f97316;
  --signal-cool:#2f8cff;
  --signal-warm:#ff9f2f;

  /* ---- 中性色 · 暗色 ---- */
  --canvas:  #0b0e14;
  --surface: #131720;
  --elevated:#1b2130;
  --border:  #2a3245;
  --border-strong:#64748b;
  --text:    #f2f4f8;
  --muted:   #a8b1c2;
  --subtle:  #7c8698;
  --on-brand:#fff;

  --glass-bg:           #ffffff0d;
  --glass-border:       #ffffff1a;
  --glass-border-hover: #ffffff38;

  --header-glass:  #0f131cb8;
  --header-shadow: 0 10px 30px #0000003d;
  --code-bg:       #00000047;
  --row-hover:     #ffffff08;

  /* ---- 派生色 ---- */
  --brand:          var(--brand-base);
  --brand-strong:   color-mix(in srgb, var(--brand-base) 82%, #000);
  --brand-readable: color-mix(in srgb, var(--brand-base) 76%, #fff);
  --brand-soft:     color-mix(in srgb, var(--brand-base) 12%, transparent);
  --brand-line:     color-mix(in srgb, var(--brand-base) 42%, transparent);

  --grad-title: linear-gradient(96deg,
                  var(--brand-strong) 0%,
                  var(--brand-base)   52%,
                  var(--accent)      100%);

  --aurora:
    radial-gradient(ellipse 80% 80% at 50% -20%,
      color-mix(in srgb, var(--brand) 30%, transparent), transparent),
    radial-gradient(ellipse 50% 50% at 80% 50%,
      color-mix(in srgb, var(--accent) 15%, transparent), transparent),
    radial-gradient(ellipse 50% 50% at 20% 80%,
      color-mix(in srgb, var(--brand) 20%, transparent), transparent);
  --orb-a: color-mix(in srgb, var(--brand) 24%, transparent);
  --orb-b: color-mix(in srgb, var(--accent) 18%, transparent);

  --glass-shadow: 0 20px 25px -5px color-mix(in srgb, var(--brand) 10%, transparent);
  --card-shadow:  0 18px 42px color-mix(in srgb, var(--canvas) 55%, transparent);

  /* ---- 尺度 ---- */
  --container: 80rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 3.4rem;
  --r-sm: .375rem;  --r-md: .625rem;  --r-lg: .875rem;  --r-xl: 1rem;
  --motion-fast: .16s;
  --motion: .22s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* ---- 字体 ----
     三个西文字体都不含中文，中文一律落到系统字体（PingFang / HarmonyOS / 雅黑），
     所以即便字体请求失败也只是西文退化，中文排版不受影响。 */
  --font-display: "Space Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont,
                  "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                  Consolas, "PingFang SC", monospace;
}

/* ---------- 明暗：亮色只覆盖中性色 + 把品牌色压深 ---------- */
[data-theme="light"]{
  color-scheme: light;
  --canvas:  #f7f8fa;
  --surface: #ffffff;
  --elevated:#edf0f4;
  --border:  #d8dde5;
  --border-strong:#7b8492;
  --text:    #111827;
  --muted:   #4b5563;
  --subtle:  #6b7280;

  --glass-bg:           #ffffffcc;
  --glass-border:       #e5e7eb;
  --glass-border-hover: #9aa4b2;

  --header-glass:  #f7f8facc;
  --header-shadow: 0 10px 30px #1e293b1a;
  --code-bg:       #0f172a08;
  --row-hover:     #0f172a06;

  --brand:          color-mix(in srgb, var(--brand-base) 68%, #000);
  --brand-strong:   color-mix(in srgb, var(--brand-base) 58%, #000);
  --brand-readable: color-mix(in srgb, var(--brand-base) 72%, #000);
  --brand-soft:     color-mix(in srgb, var(--brand-base) 10%, transparent);
  --brand-line:     color-mix(in srgb, var(--brand-base) 38%, transparent);

  --glass-shadow: 0 20px 25px -5px #1e293b1f;
  --card-shadow:  0 18px 42px #1e293b1f;
}

/* ---------- 调色板 ---------- */
/* A · 巨量原版：玫红 → 橙（当前启用） */
[data-palette="juliang"]{
  --brand-base:#ff2d74; --accent:#f97316;
  --signal-cool:#2f8cff; --signal-warm:#ff9f2f;
}
/* B · 110.cx 现品牌：系统蓝 → 品牌绿（与后台同色系，想统一时切这套） */
[data-palette="cx"]{
  --brand-base:#2053e0; --accent:#16a34a;
  --signal-cool:#38bdf8; --signal-warm:#22c55e;
}
/* C · 折中：靛紫 → 青 */
[data-palette="iris"]{
  --brand-base:#7c5cff; --accent:#22d3ee;
  --signal-cool:#60a5fa; --signal-warm:#f472b6;
}

/* ========================= 基础 ========================= */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* 必须给 html 也上底色：暗色页面上 iOS 弹性滚动的露底区域取的是 html 背景，
     只设 body 的话上下拉会露出一条白带。 */
  background:var(--canvas);
}
body{
  margin:0;
  /* 顶层光晕跟着视口走（对应参考站的 --portal-body-glow）。
     不写这层的话，首屏的 aurora 之下会是一片死黑，色气断层很明显。 */
  background:
    radial-gradient(circle at 50% -12%,
      color-mix(in srgb, var(--brand) 9%, transparent), transparent 40rem) fixed,
    var(--canvas);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
::selection{ background:color-mix(in srgb, var(--brand) 35%, transparent); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm); }

.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.mono{ font-family:var(--font-mono); }
.wrap{ width:min(100%, var(--container)); margin-inline:auto; padding-inline:var(--gutter); }
.grad{
  background:var(--grad-title);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ========================= 顶部导航 ========================= */
.hdr{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--border);
  background:var(--header-glass);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  transition:box-shadow var(--motion) var(--ease-out);
}
.hdr.is-scrolled{ box-shadow:var(--header-shadow); }
.hdr__bar{
  display:flex; align-items:center; gap:1rem;
  height:var(--header-h);
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; min-height:2.75rem; }
.brand__mark{
  width:1.9rem; height:1.9rem; border-radius:var(--r-md); flex:none;
  display:grid; place-items:center;
  background:var(--grad-title);
  box-shadow:0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  color:#fff; letter-spacing:-.02em;
}
.brand__name{
  font-family:var(--font-display); font-weight:600;
  font-size:.95rem; letter-spacing:-.01em; white-space:nowrap;
}
.nav{ display:none; align-items:center; gap:.15rem; margin-left:auto; }
.nav a{
  padding:.5rem .7rem; border-radius:var(--r-md);
  font-size:.875rem; font-weight:500; color:var(--muted);
  transition:color var(--motion-fast), background-color var(--motion-fast);
  min-height:2.75rem; display:inline-flex; align-items:center;
}
.nav a:hover{ color:var(--text); background:color-mix(in srgb, var(--text) 6%, transparent); }
.hdr__actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.nav + .hdr__actions{ margin-left:.75rem; }

/* ⚠️ 这两条必须带 .hdr__actions 前缀。
   .btn 也声明了 display:inline-flex，且**定义在后面**（按钮段落），
   同优先级下靠后的胜出 —— 只写 .hdr__cta{display:none} 会被 .btn 无声覆盖：
   手机上「免费注册」藏不住（横向溢出 79px），桌面上汉堡也藏不住。
   加一层祖先选择器把优先级抬到 .btn 之上，就不依赖书写顺序了。 */
.hdr__actions .hdr__cta{ display:none; }
.hdr__actions .menu-btn{ display:inline-flex; }
.hdr__actions .btn--quiet{ display:none; }

@media (min-width:40rem){
  .hdr__actions .btn--quiet{ display:inline-flex; }
}
@media (min-width:64rem){
  .nav{ display:flex; }
  .hdr__actions{ margin-left:0; }
  .hdr__actions .hdr__cta{ display:inline-flex; }
  .hdr__actions .menu-btn{ display:none; }
}

/* ========================= 按钮 ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:2.75rem; padding-inline:1rem;
  border:1px solid transparent; border-radius:var(--r-md);
  font-size:.875rem; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--motion-fast) var(--ease-out),
             opacity var(--motion-fast), border-color var(--motion-fast),
             color var(--motion-fast), background-color var(--motion-fast);
}
.btn:active{ transform:scale(.98); }
.btn--primary{
  background:var(--brand-strong); border-color:var(--brand-strong); color:var(--on-brand);
  box-shadow:0 8px 22px color-mix(in srgb, var(--brand) 26%, transparent);
}
.btn--primary:hover{ opacity:.93; transform:translateY(-1px); }
.btn--ghost{
  background:var(--elevated); border-color:var(--border); color:var(--text);
}
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand-readable); }
.btn--quiet{ background:transparent; color:var(--muted); min-height:2.5rem; padding-inline:.7rem; }
.btn--quiet:hover{ color:var(--text); }
.btn--icon{ min-width:2.75rem; padding-inline:0; }
.btn svg{ width:1.05rem; height:1.05rem; flex:none; }

/* ========================= 区块骨架 ========================= */
.sec{ padding-block:clamp(3.25rem, 7vw, 5.5rem); border-bottom:1px solid var(--border); }
.sec--tight{ padding-block:clamp(2.5rem, 5vw, 3.5rem); }
.sec__hd{ max-width:46rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  padding-left:.7rem; border-left:2px solid var(--brand);
  font-family:var(--font-display); font-size:.76rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--brand-readable);
}
.sec__title{
  margin-top:1.1rem;
  font-size:clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight:600; letter-spacing:-.035em; line-height:1.18;
}
.sec__lead{ margin-top:.85rem; font-size:1.0625rem; color:var(--muted); max-width:38rem; }
.sec__foot{
  margin-top:1.1rem; font-size:.875rem; color:var(--subtle);
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
}
.sec__foot b{ color:var(--text); }

/* ========================= Hero ========================= */
/* 首屏用参考站 .home-hero 的做法：刻意**克制**（brand 13% + 7% 两层）。
   浓的那层 --aurora（30/15/20）属于整页背景，塞进首屏会让整屏发暗红。
   --aurora / --orb-a / --orb-b 预留给移植时的页面容器层。 */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 78% 44%,
      color-mix(in srgb, var(--brand) 13%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 7%, transparent), transparent 42%),
    var(--canvas);
  border-bottom:1px solid var(--border);
  padding-block:clamp(2.75rem, 6vw, 5rem);
  isolation:isolate;
}
/* 右下角装饰圆环（对应参考站 .home-hero::after）：
   故意放到容器外，overflow 裁掉大半，只留左上那道弧探进来。 */
.hero::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:-10rem; bottom:-14rem; width:42rem; height:42rem;
  border:1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius:999px; opacity:.65;
}

.hero__grid{
  display:grid; gap:2.5rem; align-items:start;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:64rem){
  .hero__grid{ grid-template-columns:minmax(0,.92fr) minmax(26rem,1.08fr); gap:3.5rem; }
}
.hero h1{
  margin-top:1.25rem;
  font-size:clamp(2rem, 5.2vw, 3rem);
  font-weight:600; line-height:1.08; letter-spacing:-.045em;
}
.hero h1 .ln{ display:block; }
.hero h1 .sub{
  display:block; margin-top:.55rem;
  font-size:.62em; font-weight:600; line-height:1.25; letter-spacing:-.02em;
  color:var(--muted);
}
.hero__lead{ margin-top:1.25rem; font-size:1.0625rem; color:var(--muted); max-width:34rem; }
.hero__btns{ margin-top:1.75rem; display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:30rem){ .hero__btns{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:26rem; } }
.hero__meta{
  margin-top:.85rem; display:flex; flex-wrap:wrap; align-items:center;
  gap:.4rem .9rem; font-size:.875rem; color:var(--muted);
}
.hero__meta b{ color:var(--text); }
.hero__meta .dot{ width:1px; height:.75rem; background:var(--border); flex:none; }
.hero__terminal{ margin-top:1.9rem; border-top:1px solid var(--border); padding-top:1.4rem; }
.hero__terminal .cap{
  font-family:var(--font-display); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--subtle); margin-bottom:.8rem;
}

/* ---------- 终端条 ---------- */
.terminal{
  display:flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--code-bg); font-family:var(--font-mono); font-size:.8rem;
}
.terminal__prompt{
  display:grid; place-items:center; width:2.6rem; flex:none;
  border-right:1px solid var(--border); color:var(--brand-readable); font-weight:700;
}
.terminal__cmd{
  flex:1; min-width:0; display:flex; align-items:center;
  padding-inline:.85rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.terminal__copy{
  display:inline-flex; align-items:center; gap:.35rem; flex:none;
  min-width:5rem; justify-content:center; padding-inline:.8rem;
  background:var(--brand-soft); border:0; border-left:1px solid var(--border);
  font-size:.75rem; font-weight:700; color:var(--text); cursor:pointer;
  transition:background-color var(--motion-fast), color var(--motion-fast);
}
.terminal__copy:hover{ background:color-mix(in srgb, var(--brand) 18%, transparent); color:var(--brand-readable); }
.terminal__copy svg{ width:.95rem; height:.95rem; }

/* ---------- 买家视角示意卡 ---------- */
.viewer{
  border:1px solid var(--glass-border); border-radius:var(--r-xl);
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  box-shadow:var(--glass-shadow);
  overflow:hidden;
}
.viewer__bar{
  display:flex; align-items:center; gap:.55rem;
  padding:.7rem .9rem; border-bottom:1px solid var(--glass-border);
  background:color-mix(in srgb, var(--canvas) 45%, transparent);
}
.viewer__dots{ display:flex; gap:.3rem; flex:none; }
.viewer__dots i{ width:.5rem; height:.5rem; border-radius:999px; display:block; opacity:.5; }
.viewer__dots i:nth-child(1){ background:var(--signal-cool); }
.viewer__dots i:nth-child(2){ background:var(--signal-warm); }
.viewer__dots i:nth-child(3){ background:var(--brand); }
.viewer__url{
  flex:1; min-width:0; display:flex; align-items:center; gap:.4rem;
  padding:.3rem .6rem; border-radius:999px;
  background:var(--code-bg); border:1px solid var(--glass-border);
  font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.viewer__url svg{ width:.8rem; height:.8rem; flex:none; color:var(--brand-readable); }
.viewer__body{ padding:1rem; }
.viewer__hd{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap; margin-bottom:.85rem;
}
.viewer__hd b{ font-family:var(--font-display); font-size:.95rem; font-weight:600; }
.pill{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.16rem .58rem; border-radius:999px; white-space:nowrap;
  font-size:.72rem; font-weight:600; line-height:1.35;
}
.pill--brand{ background:var(--brand-strong); color:var(--on-brand); }
.pill--soft{
  background:var(--brand-soft); color:var(--brand-readable);
  border:1px solid var(--brand-line);
}
.pill--plain{
  background:var(--elevated); color:var(--muted); border:1px solid var(--border);
}
.pill--warm{ background:color-mix(in srgb, var(--signal-warm) 18%, transparent); color:var(--signal-warm); }

.rows{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.rows__r{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.72rem .9rem; border-bottom:1px solid var(--border);
  transition:background-color var(--motion-fast);
}
.rows__r:last-child{ border-bottom:0; }
.rows__r:hover{ background:var(--row-hover); }
.rows__d{ font-family:var(--font-mono); font-size:.9rem; letter-spacing:-.01em; }
.rows__p{ font-family:var(--font-mono); font-size:.875rem; font-weight:600; font-variant-numeric:tabular-nums; }
.rows__r.is-sold .rows__d{ color:var(--subtle); text-decoration:line-through; }
.rows__r.is-sold .rows__p{ color:var(--subtle); }
.viewer__note{ margin-top:.75rem; font-size:.72rem; line-height:1.65; color:var(--subtle); }

/* ---------- 统计带 ---------- */
.stats{ display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:34rem){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stat{
  padding:1.1rem 1.25rem; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); min-width:0;
}
.stat__n{
  display:flex; align-items:baseline; gap:.3rem;
  font-family:var(--font-mono); font-size:clamp(1.6rem,3.6vw,2.1rem);
  font-weight:700; letter-spacing:-.04em; line-height:1;
}
.stat__n small{ font-family:var(--font-body); font-size:.75rem; font-weight:600; color:var(--subtle); }
.stat__l{ margin-top:.5rem; font-size:.82rem; color:var(--muted); }

/* ---------- 能力卡（编号） ---------- */
.feats{ display:grid; gap:.75rem; grid-template-columns:1fr; margin-top:2rem; }
@media (min-width:40rem){ .feats{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem){ .feats{ grid-template-columns:repeat(3,1fr); } }
.feat{
  position:relative; overflow:hidden;
  padding:1.1rem 1.15rem 1.2rem;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color var(--motion) var(--ease-out),
             transform var(--motion) var(--ease-out),
             box-shadow var(--motion) var(--ease-out);
}
.feat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; width:34%;
  background:linear-gradient(90deg, var(--brand), transparent);
  opacity:0; transition:opacity var(--motion) var(--ease-out);
}
.feat:hover{ border-color:var(--brand-line); transform:translateY(-3px); box-shadow:var(--card-shadow); }
.feat:hover::before{ opacity:1; }
.feat__n{
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; color:var(--subtle);
}
.feat__i{
  margin-top:.7rem; width:2.1rem; height:2.1rem; border-radius:var(--r-md);
  display:grid; place-items:center; flex:none;
  background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-readable);
}
.feat__i svg{ width:1.05rem; height:1.05rem; }
.feat h3{ margin-top:.8rem; font-size:1rem; font-weight:600; letter-spacing:-.02em; }
.feat p{ margin-top:.4rem; font-size:.875rem; line-height:1.7; color:var(--muted); }

/* ---------- 终端的“步骤”布局 ---------- */
.steps{ display:grid; gap:1.6rem; grid-template-columns:1fr; margin-top:2rem; }
@media (min-width:52rem){ .steps{ grid-template-columns:repeat(3,1fr); gap:1.25rem; } }
.step__hd{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
.step__n{
  width:1.85rem; height:1.85rem; border-radius:999px; flex:none;
  display:grid; place-items:center;
  background:var(--brand-soft); border:1px solid var(--brand-line);
  color:var(--brand-readable);
  font-family:var(--font-mono); font-size:.75rem; font-weight:700;
}
.step__rule{ flex:1; height:1px; background:linear-gradient(90deg, var(--border), transparent); }
.step h3{ font-size:1rem; font-weight:600; letter-spacing:-.02em; }
.step p{ margin-top:.45rem; font-size:.875rem; line-height:1.7; color:var(--muted); }
.step .terminal{ margin-top:.85rem; }

/* ---------- 两栏特性（快照机制） ---------- */
.split{ display:grid; gap:2.5rem; align-items:center; grid-template-columns:1fr; }
@media (min-width:64rem){ .split{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:3.5rem; } }
.blist{ margin-top:1.75rem; display:grid; gap:1.1rem; }
.bitem{ display:flex; gap:.85rem; }
.bitem__n{
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; color:var(--brand-readable);
  padding-top:.15rem; flex:none; letter-spacing:.06em;
}
.bitem b{ display:block; font-size:.95rem; font-weight:600; letter-spacing:-.02em; }
.bitem span{ display:block; margin-top:.3rem; font-size:.875rem; line-height:1.7; color:var(--muted); }
.proof{
  margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:1.5rem;
}
.proof__i strong{
  display:block; font-family:var(--font-mono); font-size:1.35rem; font-weight:700;
  letter-spacing:-.04em; color:var(--text);
}
.proof__i span{ display:block; margin-top:.2rem; font-size:.75rem; font-weight:600;
  letter-spacing:.06em; color:var(--subtle); }
.proof__rule{ width:2rem; height:2px; flex:none; border-radius:2px;
  background:linear-gradient(90deg, var(--brand), var(--accent)); align-self:center; }

/* 快照对比可视 */
.snap{ display:grid; gap:.75rem; }
.snap__card{
  padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
}
.snap__card.is-live{ border-color:var(--brand-line); box-shadow:var(--glass-shadow); }
.snap__top{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.snap__top b{ font-size:.9rem; font-weight:600; }
.snap__body{
  margin-top:.8rem; font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
  display:grid; gap:.35rem;
}
.snap__body span{ display:flex; justify-content:space-between; gap:1rem; }
.snap__body span i{ font-style:normal; color:var(--subtle); }
.snap__arrow{ display:grid; place-items:center; color:var(--subtle); }
.snap__arrow svg{ width:1.1rem; height:1.1rem; }

/* ---------- 对比表 ---------- */
.cmp{ margin-top:2rem; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.cmp__h,.cmp__r{ display:grid; grid-template-columns:minmax(6.5rem,.72fr) 1fr 1fr; }
.cmp__h{ background:var(--surface); border-bottom:1px solid var(--border); }
.cmp__h > div{
  padding:.85rem 1rem; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; color:var(--subtle);
}
.cmp__h > div.is-new{ color:var(--brand-readable); background:var(--brand-soft); }
.cmp__r{ border-bottom:1px solid var(--border); }
.cmp__r:last-child{ border-bottom:0; }
.cmp__r > div{ padding:.9rem 1rem; font-size:.875rem; line-height:1.6; min-width:0; }
.cmp__r > div:first-child{ font-weight:600; color:var(--text); background:var(--surface); }
.cmp__r > div:nth-child(2){ color:var(--subtle); }
.cmp__r > div.is-new{ color:var(--text); background:color-mix(in srgb, var(--brand) 6%, transparent); }
.cmp__r:hover > div{ background:var(--row-hover); }
.cmp__r:hover > div:first-child{ background:var(--elevated); }
.cmp__r:hover > div.is-new{ background:color-mix(in srgb, var(--brand) 10%, transparent); }
@media (max-width:40rem){
  .cmp__h{ display:none; }
  .cmp__r{ grid-template-columns:1fr; gap:.35rem; padding-block:.9rem; }
  .cmp__r > div{ padding:.15rem 1rem; }
  .cmp__r > div:first-child{ background:transparent; padding-bottom:.5rem; }
  .cmp__r > div:nth-child(2)::before{ content:"以前 · "; color:var(--subtle); font-weight:600; }
  .cmp__r > div.is-new::before{ content:"现在 · "; color:var(--brand-readable); font-weight:600; }
}

/* ---------- 靓号 ---------- */
.nums{ display:grid; gap:.6rem; grid-template-columns:repeat(2,1fr); margin-top:2rem; }
@media (min-width:40rem){ .nums{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:64rem){ .nums{ grid-template-columns:repeat(6,1fr); } }
.num{
  padding:.9rem .85rem; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); text-align:center;
  transition:border-color var(--motion) var(--ease-out), transform var(--motion) var(--ease-out);
}
.num:hover{ border-color:var(--brand-line); transform:translateY(-3px); }
.num__c{
  font-family:var(--font-mono); font-size:1.15rem; font-weight:700;
  letter-spacing:-.03em; color:var(--text);
}
.num__t{ margin-top:.3rem; font-size:.68rem; color:var(--subtle); }
.num__p{
  margin-top:.55rem; display:inline-block; padding:.15rem .5rem; border-radius:var(--r-sm);
  background:var(--brand-soft); color:var(--brand-readable);
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
}

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:1.5rem 2rem; grid-template-columns:1fr; margin-top:2rem; }
@media (min-width:48rem){ .faq{ grid-template-columns:repeat(2,1fr); } }
.faq__i{ padding-top:1.1rem; border-top:1px solid var(--border); }
.faq__i b{ display:block; font-size:.95rem; font-weight:600; letter-spacing:-.02em; }
.faq__i p{ margin-top:.5rem; font-size:.875rem; line-height:1.75; color:var(--muted); }

/* ---------- QQ 群 ---------- */
.qq{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  padding:1.15rem 1.25rem; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
}
.qq__i{
  width:2.6rem; height:2.6rem; border-radius:var(--r-md); flex:none;
  display:grid; place-items:center; background:var(--grad-title);
  font-family:var(--font-display); font-size:.8rem; font-weight:700; color:#fff;
}
.qq__t{ flex:1; min-width:12rem; }
.qq__t b{ display:block; font-size:.95rem; font-weight:600; }
.qq__t span{ display:block; margin-top:.25rem; font-size:.85rem; line-height:1.65; color:var(--muted); }
.qq__g{ display:flex; align-items:center; gap:.6rem; }
.qq__g code{
  font-family:var(--font-mono); font-size:1.05rem; font-weight:700;
  letter-spacing:-.02em; color:var(--text);
}

/* ---------- 收尾 CTA ---------- */
.cta{
  position:relative; overflow:hidden;
  padding:clamp(2.25rem,5vw,3.25rem) clamp(1.25rem,4vw,2.5rem);
  border:1px solid var(--brand-line); border-radius:var(--r-xl);
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%,
      color-mix(in srgb, var(--brand) 26%, transparent), transparent),
    linear-gradient(135deg, var(--surface), var(--canvas));
  text-align:center;
}
.cta::after{
  content:""; position:absolute; left:50%; bottom:-9rem; transform:translateX(-50%);
  width:28rem; height:14rem; border-radius:999px; filter:blur(80px);
  background:color-mix(in srgb, var(--brand) 22%, transparent); pointer-events:none;
}
.cta h2{ position:relative; font-size:clamp(1.35rem,3.6vw,1.9rem); letter-spacing:-.035em; }
.cta p{ position:relative; margin-top:.75rem; font-size:.9rem; color:var(--muted); }
.cta p b{ color:var(--text); }
.cta__btns{
  position:relative; margin-top:1.5rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem;
}

/* ---------- 页脚 ---------- */
.ftr{ padding-block:2rem; }
.ftr__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem;
  font-size:.8rem; color:var(--subtle);
}
.ftr a:hover{ color:var(--text); }
.ftr .sep{ color:var(--border-strong); }

/* 复制反馈：首页不加载 app.js（它的 toast 依赖 Tailwind），这里自带一份极简的。
   只改按钮文案，不动剪贴板内容。 */
[data-copy].is-done{ color:var(--brand-readable) !important; }

/* 顶栏状态文案（SSO 未就绪时替掉登录/注册按钮） */
.hdr__status{ font-size:.8rem; color:var(--subtle); }

/* 只有一个按钮时的 hero 按钮组：别让它只占两列里的左半。
   ⚠️ 必须写在上面那条 @media 的**后面**，否则会被 .hero__btns 的两列规则盖掉。 */
@media (min-width:30rem){
  .hero__btns--single{ grid-template-columns:1fr; max-width:17rem; }
}

/* ========================= 移动端导航面板 =========================
   参考站的汉堡按钮没绑任何行为，直接照搬会留下一个点了没反应的死按钮。
   这里补一个真面板：<64rem 由汉堡开合，内容就是同一批锚点 + 指南入口。 */
.mnav{
  display:none; position:fixed; left:0; right:0; top:var(--header-h); z-index:55;
  border-bottom:1px solid var(--border);
  /* 用不透明底色，而不是顶栏那层 --header-glass：
     顶栏需要透出内容才是「玻璃」，但导航面板是要盖住正文的——
     沿用半透明会让下方标题透上来（实测肉眼可见），可读性明显变差。
     取的是 --header-glass 的基色，所以和顶栏衔接得上。 */
  background:#0f131c;
  box-shadow:var(--header-shadow);
  padding:.35rem var(--gutter) .9rem;
}
[data-theme="light"] .mnav{ background:#f7f8fa; }
.mnav.is-open{ display:block; }
.mnav a{
  display:flex; align-items:center; min-height:2.9rem;
  border-bottom:1px solid var(--border);
  font-size:.95rem; font-weight:500; color:var(--muted);
}
.mnav a:last-child{ border-bottom:0; }
.mnav a:hover{ color:var(--text); }
/* 拉宽到桌面时必须消失，且不依赖 JS 清状态 */
@media (min-width:64rem){ .mnav{ display:none !important; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}