/* ===== 星曜AI智播 官网 样式系统 ===== */

:root{
  --bg:#F7F9FC;
  --bg-2:#EEF2F9;
  --bg-3:#E4EAF4;
  --surface:rgba(15,27,48,.038);
  --surface-2:rgba(15,27,48,.062);
  --border:rgba(15,27,48,.10);
  --border-strong:rgba(15,27,48,.17);

  --text:#0F1B30;
  --muted:#4C5C77;
  --dim:#7B8899;

  --brand:#2F6BF0;
  --brand-2:#0EA5E9;
  --brand-soft:rgba(47,107,240,.10);
  --grad:linear-gradient(135deg,#2F6BF0 0%,#12A5E8 100%);
  --grad-soft:linear-gradient(135deg,rgba(47,107,240,.13) 0%,rgba(18,165,232,.07) 100%);

  /* 圆角 6 档（2026-09-15 收口）。改前命名 4 档，组件里却散落着
     9/12/14/15/18/20/24/26/29/38 十几个值，同一类元素在不同页面圆角都不一样。
     ⚠️ 设备机身的 38（外框）/ 29（内屏）是配对比例，不属于本档位，别并进来。 */
  --r-xs:8px;                      /* 深嵌小图 / 小徽标 / 气泡 */
  --r-sm:12px;                     /* 图标底板 / 列表行 / 菜单项 */
  --r:16px;                        /* 常规卡片 / 面板 */
  --r-lg:22px;                     /* 大卡片 / 色带 */
  --r-xl:28px;                     /* CTA 大带 / 弹窗 */
  --r-pill:999px;

  --shadow:0 14px 40px rgba(15,27,48,.08);
  --shadow-glow:0 0 60px rgba(47,107,240,.16);

  /* ===== 三级高度层：底 / 卡 / 浮层（2026-09-15）=====
     改前卡片底色是 rgba(15,27,48,.038) —— 在 #F7F9FC 上只有 3.8% 的对比，
     数据条更是直接铺 --bg-2 实色，放进 section-alt 后整条与背景融成一片。
     结果是页面上所有元素都停在同一个「高度」上，眼睛找不到落点。
     配方：白面 + 1px 淡描边 + 冷灰双层阴影 + 顶部内高光。
     ⚠️ 阴影色走冷灰（rgba(15,27,48,·)）而不是纯黑 —— 浅底上黑阴影会发脏。
     ⚠️ 内高光 inset 0 1px 0 white 是「贵」的关键一笔，别省。 */
  --elev-1:#FFFFFF;
  --elev-line:rgba(15,27,48,.075);
  --elev-sh:0 1px 2px rgba(15,27,48,.05),0 6px 18px rgba(15,27,48,.07);
  --elev-sh-hi:0 2px 4px rgba(15,27,48,.06),0 14px 34px rgba(15,27,48,.11);
  --elev-inset:inset 0 1px 0 rgba(255,255,255,.92);

  --maxw:1200px;
  --header-h:72px;

  /* ===== 配色变量（「云白 · 靛蓝」2026-09-15 定稿，已为唯一配色）===== */
  --brand-rgb:47,107,240;          /* 品牌主蓝，供 rgba() 使用 */
  --brand2-rgb:14,165,233;         /* 品牌辅青，供 rgba() 使用 */

  --on-brand:#FFFFFF;              /* 叠在品牌渐变上的文字 */
  --on-brand-2:#FFFFFF;            /* 同上（客服挂件用）*/

  --bg-rgb:247,249,252;                /* 页面底色分量 */
  --bg2-rgb:238,242,249;              /* 次级底色分量 */
  --glass-rgb:255,255,255;            /* 悬浮面板底 */
  --bg-deep-1:#3B4759;             /* 设备外框·亮端 */
  --bg-deep-2:#242F40;             /* 设备屏·亮端 */
  --bg-deep-3:#141C2A;             /* 设备屏·暗端 */
  --bg-deep-4:#232E3F;             /* 设备外框·暗端 */

  /* --ink-on-dark* 系列刻意保持浅色：它们只出现在「手机设备屏」内部，屏本身是深色的 */
  --ink-accent:#1D4ED8;                /* 浅底上的强调文字 */
  --ink-on-dark:#DCE9FF;
  --ink-on-dark-2:#D3F3FB;
  --ink-on-dark-3:#DDE7FA;
  --ink-on-dark-dim:#9FB0D0;
  --accent-sky:#7DD3FC;
  --placeholder:#94A3B8;                /* 输入框占位符 */

  --danger-rgb:220,38,38;         /* 痛点卡·红 */
  --danger2-rgb:239,68,68;         /* 直播中·红 */
  --danger3-rgb:220,38,38;
  --danger-a:#DC2626;
  --danger-b:#DC2626;

  /* ===== 叠加色 / 阴影色 / 语义色 =====
     浅底上全部走「压暗叠加 + 淡冷灰阴影」 */
  --overlay-0:rgba(15,27,48,.02);   /* 极淡底 · 侧栏/行 */
  --overlay-1:rgba(15,27,48,.035);   /* 引用块 / 工具栏 */
  --overlay-2:rgba(15,27,48,.05);   /* 标签 / 输入框 */
  --overlay-3:rgba(15,27,48,.07);   /* 输入框聚焦 */
  --border-mid:rgba(15,27,48,.15);  /* 设备外框中框 */
  --grid-line:rgba(15,27,48,.05);  /* 背景网格线 */
  --sheen:rgba(47,107,240,.16);        /* 光泽扫过 · 主光 */
  --sheen-soft:rgba(15,27,48,.04);  /* 光泽扫过 · 副光 */

  --sh-sm:rgba(15,27,48,.06);             /* 卡片轻投影 */
  --sh-float:rgba(15,27,48,.10);           /* 悬浮面板 */
  --sh-el:rgba(15,27,48,.12);             /* 浮层元素 */
  --sh-el-sm:rgba(15,27,48,.08);          /* 浮层元素 · 小 */
  --sh-el-hover:rgba(15,27,48,.14);       /* 浮层元素 · 悬停 */
  --sh-img:rgba(15,27,48,.14);             /* 图片投影 */
  --sh-img-2:rgba(15,27,48,.18);          /* 图片投影 · 悬停 */
  --sh-modal:rgba(12,20,36,.55);           /* 灯箱遮罩 */

  --ink-soft-1:#1E3A8A;                /* 引用块文字 */
  --ink-soft-2:#334A66;                /* 标签文字 */
  --ink-soft-3:#31527F;                /* 合规条文字 */

  --ok:#0E9F6E;                        /* 对比 · 是 */
  --bad:#DC2626;                       /* 对比 · 否 */

  --panel-1:#FFFFFF;                   /* 浮动面板底 · 亮端（客服挂件/下拉）*/
  --panel-2:#F5F8FD;                   /* 浮动面板底 · 暗端 */
  --thumb-1:#25314A;                   /* 视频占位底 · 亮端 */
  --thumb-2:#151E30;                   /* 视频占位底 · 暗端 */
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

/* 键盘焦点环：原先只有客服挂件等少数元素有，键盘用户会迷路。
   只在 :focus-visible 下出现 —— 鼠标点击不会留下一圈蓝框。 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-xs);
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- 氛围背景 ---------- */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.ambient::before{
  content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:1100px;height:1100px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--brand-rgb),.20) 0%,rgba(var(--brand-rgb),0) 62%);
}
.ambient::after{
  content:"";position:absolute;top:520px;right:-260px;
  width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--brand2-rgb),.10) 0%,rgba(var(--brand2-rgb),0) 65%);
}
.grid-lines{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 100%);
}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  background:rgba(var(--bg-rgb),.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:18px;letter-spacing:.5px;}
.brand img{width:34px;height:34px;border-radius:var(--r-xs);}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

.nav{display:flex;align-items:center;gap:6px;}
.nav a{
  padding:8px 14px;border-radius:var(--r-pill);font-size:15px;color:var(--muted);
  transition:.2s;
}
.nav a:hover{color:var(--text);background:var(--surface);}
.nav a.active{color:var(--text);background:var(--brand-soft);}

.header-cta{display:flex;align-items:center;gap:12px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:.22s;white-space:nowrap;
}
.btn-primary{background:var(--grad);color:var(--on-brand);box-shadow:0 8px 26px rgba(var(--brand-rgb),.32);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--brand-rgb),.45);}
.btn-ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text);}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--brand);}
.btn-sm{padding:9px 18px;font-size:14px;}
.btn-lg{padding:16px 34px;font-size:16px;}

/* ---------- Hero ---------- */
/* 纵向留白有两段，两段的定值理由不一样，别混：

   ▸ 顶部 96 → 72（2026-09-16 用户：「这个板块整体往上移一点」）
     顶部留白 = header 下沿到 badge 上沿的距离。96px 那会儿实测 102px
     （96 + badge 作为 inline-flex 自带的一点行高），是首屏最大的一块死白，
     板块看着「沉」在下面。收到 72 后这块留白 78px，三档里只动桌面/平板
     ——手机端本来就是 clamp(34px,9vw,46px)，390 视口下只有 35px，没有可收的余量。
     这一段只影响板块上方的空气，跟下面跑马灯的位置各管各的。

   ▸ 底部 88 → 44（2026-09-15 用户：跑马灯「整个位置往上移」）
     跑马灯是首屏与下一屏之间的分隔带，但它的上方留了 102px、下方只有 72px，
     在接缝里「上松下紧」，那条带子看着像往下坠。
     44px 不是随手取的：手机端 .hero 的 padding-bottom 本来就钳在这个值上
     （clamp(44px,11vw,56px) 的最小值生效），现在三档统一。
     注意这个值还兼着「让 .mockup-glow（inset:-40px）不越到跑马灯上」。
     2026-09-15 首屏真机图缩了 15%，板块变矮，这条余量从 4px 回到 20px。 */
.hero{padding:72px 0 44px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px;border-radius:var(--r-pill);
  background:var(--grad-soft);border:1px solid rgba(var(--brand-rgb),.32);
  font-size:13.5px;color:var(--ink-accent);margin-bottom:26px;
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 10px var(--brand-2);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

h1{font-size:54px;line-height:1.22;font-weight:800;letter-spacing:-.8px;}
/* 数字统一 tabular-nums：等宽数字让价格、数据、版本号排成一列时不跳动。
   中文正文继续用系统字体（PingFang / 雅黑），只把「标题字重 + 字距 + 数字」吃透 ——
   引一款中文字体要几十至几百 KB，收益不如把这三样调准。 */
.stat .v,.hero-stats .num,.case-top .big,.price-val .amt,
.dl-fact b,.card-num,.compare td{font-variant-numeric:tabular-nums;}
h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{font-size:18.5px;color:var(--muted);margin-top:22px;max-width:560px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero-note{font-size:13.5px;color:var(--dim);margin-top:16px;}

/* 首屏数据：紧跟在「安卓手机即可开播 · 全程运营顾问一对一陪跑 · 当天就能开第一场」
   这句承诺的正下方，做它的佐证。
   演变：曾贴在左列底部（靠 1px 横线分隔）→ 2026-09-15 改为独立整行三张大卡 →
   同日用户要求「三个缩小放在这句话下面」，于是回到左列内，但收成紧凑三卡。
   缩小是双向的：字号让步（26→20），卡面也一起减轻（r 16→r-sm 12、内边距
   20/24→13/16、宽度上限 560px 与 .hero-sub 对齐），免得跟右列真机图抢视觉重心。 */
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:20px;max-width:560px;
}
.hero-stats > div{
  background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r-sm);
  padding:13px 16px;box-shadow:var(--elev-sh),var(--elev-inset);
}
.hero-stats .num{
  font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-.4px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.hero-stats .lbl{font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.5;}

/* 手机直播 mockup */
.mockup{
  position:relative;width:100%;max-width:340px;margin:0 auto;
  aspect-ratio:9/17.5;border-radius:38px;padding:11px;
  background:linear-gradient(160deg,var(--bg-deep-1),var(--bg-deep-4));
  border:1px solid var(--border-mid);
  box-shadow:var(--shadow),var(--shadow-glow);
}
.mockup-screen{
  width:100%;height:100%;border-radius:29px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--bg-deep-2) 0%,var(--bg-deep-3) 100%);
  display:flex;flex-direction:column;
}
.mockup-live{
  position:absolute;top:14px;left:14px;z-index:3;
  display:flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(var(--danger2-rgb),.92);font-size:11px;font-weight:700;color:#fff;
}
.mockup-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite;}
.mockup-time{
  position:absolute;top:14px;right:14px;z-index:3;
  padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.55);font-size:11px;color:var(--ink-on-dark-3);
}
.mockup-body{padding:64px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1;}
.m-line{border-radius:var(--r-xs);padding:9px 12px;font-size:11.5px;line-height:1.55;}
.m-line.host{background:rgba(var(--brand-rgb),.20);border-left:2.5px solid var(--brand);color:var(--ink-on-dark);}
.m-line.cohost{background:rgba(var(--brand2-rgb),.14);border-left:2.5px solid var(--brand-2);color:var(--ink-on-dark-2);margin-left:22px;}
.m-line.user{background:rgba(255,255,255,.07);color:var(--ink-on-dark-dim);font-size:11px;}
.mockup-foot{
  margin-top:auto;padding:11px 14px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);
}
.mockup-foot .cart{
  padding:5px 12px;border-radius:var(--r-pill);background:var(--grad);color:var(--on-brand);font-weight:700;font-size:11px;
}
.mockup-glow{
  position:absolute;inset:-40px;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--brand-rgb),.30),transparent 65%);filter:blur(30px);
}

/* ---------- Section 通用 ---------- */
/* 章节节奏：不再让每一屏都是同一个高度。
   改前六个 section 全是 padding:92px 0 + 居中标题 + 三四列卡片，滚到第三屏就疲劳。
   现在分三档：默认 92 / .sec-lg 112（重点屏）/ .sec-sm 72（过渡屏）。 */
.section{padding:92px 0;}
.section.sec-lg{padding:112px 0;}
.section.sec-sm{padding:72px 0;}
.section-alt{background:linear-gradient(180deg,rgba(var(--bg2-rgb),.85),rgba(var(--bg-rgb),.85));border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

.sec-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.sec-tag{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:2px;
  color:var(--ink-accent);margin-bottom:14px;text-transform:uppercase;
}
.sec-title{font-size:38px;font-weight:800;line-height:1.3;letter-spacing:-.6px;}
.sec-desc{font-size:16.5px;color:var(--muted);margin-top:16px;}

/* ---- 左对齐分栏标题：用来打断「居中标签 + 居中大标题 + 居中副标题」的同构 ----
   标题占左侧，副标题落到右下的基线，同屏内先读到「做什么」再读到「怎么做」。 */
.sec-head--left{
  max-width:none;text-align:left;
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:20px 44px;margin-bottom:48px;
}
.sec-head--left .sec-desc{margin-top:0;max-width:430px;flex:0 1 430px;}
/* 那根居中的脉冲短线在 flex 容器里会变成第三个格子，让它独占一行、左对齐 */
.sec-head--left::after{flex:1 0 100%;width:56px;max-width:56px;margin:26px 0 0;}

/* ---------- Cards ---------- */
/* 核心能力：四步用 2×2 而不是四列并排 ——
   同屏里 3 列（六大服务）、4 列（痛点/开播准备）、2×2 交替出现，
   滚动节奏不再是「每屏都是三四个小块」。 */
.grid{display:grid;gap:22px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g2-4x{grid-template-columns:repeat(2,1fr);gap:20px;}
.g2-4x .card{padding:26px 24px;}
.g2-4x .card h3{font-size:18px;}
.g2-4x .card p{font-size:14.3px;}
.g2-4x .card-num{font-size:12.5px;margin-bottom:10px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r-lg);
  padding:30px 26px;transition:.25s;position:relative;overflow:hidden;
  box-shadow:var(--elev-sh),var(--elev-inset);
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad);opacity:0;transition:.25s;
}
.card:hover{
  transform:translateY(-5px);border-color:rgba(var(--brand-rgb),.42);background:var(--elev-1);
  box-shadow:var(--elev-sh-hi),var(--elev-inset);
}
.card:hover::before{opacity:1;}

.card-icon{
  width:48px;height:48px;border-radius:var(--r-sm);margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-soft);border:1px solid rgba(var(--brand-rgb),.28);
  font-size:22px;
}
.card h3{font-size:19px;font-weight:700;margin-bottom:10px;}
.card p{font-size:14.8px;color:var(--muted);}

.card-num{
  font-size:13px;font-weight:800;letter-spacing:1px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:12px;display:block;
}

/* 痛点卡 */
.pain-card{
  background:linear-gradient(180deg,rgba(var(--danger-rgb),.055),var(--elev-1) 46%);
  border-color:rgba(var(--danger-rgb),.20);
}
.pain-card .card-icon{background:rgba(var(--danger-rgb),.10);border-color:rgba(var(--danger-rgb),.28);}
.pain-card:hover{border-color:rgba(var(--danger-rgb),.45);}

/* ---------- 数据条 ---------- */
/* 三格数据：从「1px 边框分隔的整块」改成「三张独立卡片 + 12px 间距」。
   原做法每格铺 --bg-2 实色，放进 section-alt 后整条与背景几乎同色，
   只剩一条极淡的外框，三格之间也分不开。 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.stat{
  background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r);
  padding:34px 26px;text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--elev-sh),var(--elev-inset);
}
.stat .v{font-size:40px;font-weight:800;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .k{font-size:14.5px;color:var(--muted);margin-top:8px;}
.stat .s{font-size:12.5px;color:var(--dim);margin-top:4px;}

/* ---------- 价格 ---------- */
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto;}
.price-card{
  background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r-lg);
  padding:36px 32px;position:relative;transition:.25s;
  box-shadow:var(--elev-sh),var(--elev-inset);
}
/* 主推卡（月度）保渐变底，但把「渐变」压到白面之上而不是替换白面：
   纯 rgba 渐变会让卡片比旁边那张更"薄"，主推卡反而显得更轻。 */
.price-card.featured{
  background:linear-gradient(180deg,rgba(var(--brand-rgb),.10),rgba(var(--brand2-rgb),.035) 58%),var(--elev-1);
  border-color:rgba(var(--brand-rgb),.5);
  box-shadow:var(--elev-sh-hi),var(--elev-inset),0 0 60px rgba(var(--brand-rgb),.16);
}
.price-card:hover{transform:translateY(-4px);}
.price-tag{
  position:absolute;top:-13px;left:32px;
  padding:5px 15px;border-radius:var(--r-pill);background:var(--grad);
  font-size:12.5px;font-weight:700;color:var(--on-brand);
}
.price-name{font-size:17px;font-weight:700;color:var(--muted);}
.price-val{display:flex;align-items:baseline;gap:8px;margin:14px 0 6px;}
.price-val .cur{font-size:24px;font-weight:700;color:var(--ink-accent);}
.price-val .amt{font-size:52px;font-weight:800;line-height:1;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;}
.price-val .per{font-size:15px;color:var(--muted);}
.price-old{font-size:14.5px;color:var(--dim);text-decoration:line-through;margin-bottom:6px;}
/* 折扣胶囊：不能继承划线。挂在划线价同一行上，让「省了多少」一眼可见 */
.price-save{
  display:inline-block;margin-left:8px;padding:2.5px 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;text-decoration:none;letter-spacing:0;
  color:var(--ink-accent);background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.30);
}
/* 小字用 --brand-2(#0EA5E9) 在浅底上只有约 2.6:1，低于 AA 的 4.5:1，换 --ink-accent */
.price-eq{font-size:13.5px;color:var(--ink-accent);margin-bottom:22px;font-variant-numeric:tabular-nums;}
.price-list{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--border);margin-bottom:26px;}
.price-list li{display:flex;gap:10px;font-size:14.8px;color:var(--muted);}
.price-list li::before{content:"✓";color:var(--brand-2);font-weight:800;flex-shrink:0;}

/* ---------- 步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.step{position:relative;padding:0 26px;}
.step:not(:last-child)::after{
  content:"";position:absolute;top:26px;right:0;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.5),rgba(var(--brand-rgb),.05));
}
.step-n{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:var(--on-brand);font-weight:800;font-size:19px;
  margin-bottom:18px;position:relative;z-index:2;box-shadow:0 0 26px rgba(var(--brand-rgb),.35);
}
.step h4{font-size:17px;font-weight:700;margin-bottom:8px;}
.step p{font-size:14.3px;color:var(--muted);}

/* ---------- 对比表 ---------- */
.compare{
  width:100%;border-collapse:collapse;
  border:1px solid var(--elev-line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--elev-1);
  box-shadow:var(--elev-sh),var(--elev-inset);
}
.compare th,.compare td{padding:19px 24px;text-align:left;font-size:15px;}
/* 表头中文不加 letter-spacing：对中文没有排版收益，只让字距发松 */
.compare thead th{background:rgba(15,27,48,.045);font-weight:700;font-size:14px;border-bottom:1px solid var(--border-mid);}
/* 胜出列表头：淡蓝底 + 与表体同一条 3px 品牌色竖条，列往下读到底是一条连续的线 */
.compare thead th.win{
  background:rgba(var(--brand-rgb),.10);color:var(--ink-accent);
  box-shadow:inset 3px 0 0 var(--brand);
}
.compare tbody tr{border-top:1px solid rgba(15,27,48,.085);}
.compare tbody tr:first-child{border-top:0;}
.compare td:first-child{color:var(--muted);}
/* 胜出列改用「左侧 3px 品牌色竖条」标识，取代整列铺淡蓝 —— 竖条更清楚，也不跟红字抢注意力 */
.compare td.win{
  background:rgba(var(--brand-rgb),.045);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand);
}
/* 负面项：灰色文字 + 红色小叉。
   原来「真人直播」列连成一片红字，红色就此失去强调作用。 */
.compare .no{color:var(--muted);}
.compare .no::before{
  content:"";display:inline-block;vertical-align:-.12em;margin-right:8px;
  width:14px;height:14px;background:var(--danger-a);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* 对位的是白色小对勾（同一行两列都带图标，行内才自洽） */
.compare .win.yes{color:var(--text);font-weight:600;}
.compare .win.yes::before{
  content:"";display:inline-block;vertical-align:-.12em;margin-right:8px;
  width:15px;height:15px;background:var(--ok);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-10'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-10'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.compare .yes{font-weight:700;}

/* ---------- 案例 ---------- */
.case-grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
.case-card{
  background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r-lg);
  overflow:hidden;transition:.25s;
  box-shadow:var(--elev-sh),var(--elev-inset);
}
.case-card:hover{transform:translateY(-5px);border-color:rgba(var(--brand-rgb),.42);}
.case-top{padding:32px 28px 26px;background:var(--grad-soft);border-bottom:1px solid var(--elev-line);}
.case-top .big{font-size:44px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1;}
.case-top .cap{font-size:14px;color:var(--muted);margin-top:8px;}
.case-body{padding:24px 28px 28px;}
.case-body h4{font-size:17px;font-weight:700;margin-bottom:10px;}
.case-body p{font-size:14.5px;color:var(--muted);}
.quote{
  margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--overlay-1);border-left:2.5px solid var(--brand-2);
  font-size:14px;color:var(--ink-soft-1);font-style:italic;
}

/* 反馈墙 —— 图为透明底手机模型，不用卡片边框，改用投影让机型浮起来 */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.wall img{
  width:100%;border:0;border-radius:0;background:none;
  transition:transform .25s ease,filter .25s ease;cursor:pointer;
  filter:drop-shadow(0 16px 34px var(--sh-img)) drop-shadow(0 0 26px rgba(var(--brand-rgb),.20));
}
.wall img:hover{
  transform:scale(1.03);
  filter:drop-shadow(0 20px 42px var(--sh-img-2)) drop-shadow(0 0 40px rgba(var(--brand-rgb),.42));
}

/* 截图展示 */
.shot{
  border:1px solid var(--elev-line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--elev-sh),var(--elev-inset);background:var(--elev-1);
}
.shot-bar{
  display:flex;align-items:center;gap:7px;padding:12px 16px;
  background:var(--overlay-1);border-bottom:1px solid var(--border);
}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:var(--border-strong);}
.shot-bar span{margin-left:8px;font-size:12.5px;color:var(--dim);}
.shot img{width:100%;}

/* ---------- 视频 ---------- */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.video-card{
  background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r-lg);
  overflow:hidden;transition:.25s;
  box-shadow:var(--elev-sh),var(--elev-inset);
}
.video-card:hover{transform:translateY(-4px);border-color:rgba(var(--brand-rgb),.42);}
/* 三段实录已统一为 720x1280(9:16)——原生比例一致，卡片自然等高、标题自动对齐。
   这里仍显式锁定 9:16 作为兜底：将来若某段换成别的比例，也只会居中留边，
   不会再把单张卡片撑高、导致三处标题错位。 */
@media (min-width:721px){
  .video-card video{aspect-ratio:9/16;object-fit:contain;}
}
.video-thumb{
  aspect-ratio:16/9;background:linear-gradient(135deg,var(--thumb-1),var(--thumb-2));
  display:flex;align-items:center;justify-content:center;position:relative;
}
.video-thumb .play{
  width:58px;height:58px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  color:var(--on-brand);font-size:20px;box-shadow:0 0 30px rgba(var(--brand-rgb),.5);
}
.video-info{padding:18px 22px 22px;}
.video-info h4{font-size:16px;font-weight:700;margin-bottom:6px;}
.video-info p{font-size:13.8px;color:var(--muted);}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r);
  padding:22px 26px;transition:.22s;
  box-shadow:var(--elev-sh),var(--elev-inset);
}
.faq-item:hover{border-color:rgba(var(--brand-rgb),.4);background:var(--elev-1);box-shadow:var(--elev-sh-hi),var(--elev-inset);}
.faq-item h4{font-size:16.5px;font-weight:700;margin-bottom:9px;display:flex;gap:12px;}
.faq-item h4 .q{color:var(--ink-accent);flex-shrink:0;}
.faq-item p{font-size:14.8px;color:var(--muted);padding-left:28px;}

/* ---------- 时间线 ---------- */
.timeline{max-width:900px;margin:0 auto;position:relative;padding-left:34px;}
.timeline::before{
  content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2),rgba(var(--brand2-rgb),.05));
}
.tl-item{position:relative;padding-bottom:34px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:6px;
  width:20px;height:20px;border-radius:50%;
  background:var(--grad);border:4px solid var(--bg);
  box-shadow:0 0 16px rgba(var(--brand-rgb),.5);
}
.tl-item h4{font-size:17.5px;font-weight:700;margin-bottom:7px;}
.tl-item p{font-size:14.6px;color:var(--muted);}

/* ---------- 功能标签组 ---------- */
.feat-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.feat-group{
  background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r-lg);padding:30px 28px;
  box-shadow:var(--elev-sh),var(--elev-inset);
  display:flex;flex-direction:column;   /* 让说明文能被推到卡底 */
}
/* 四组卡片的说明文底部对齐。
   改前某组 chip 换行（「智能互动」有 5 个）会把那一组撑高，
   四组文字基线就此错开 —— 统一推到卡底就彻底对齐了。 */
.feat-group .fg-desc{font-size:14.3px;color:var(--muted);margin-top:auto;padding-top:16px;}
.feat-group h3{
  font-size:18px;font-weight:700;margin-bottom:18px;
  display:flex;align-items:center;gap:11px;
}
.feat-group h3 .tag{
  padding:4px 12px;border-radius:var(--r-pill);background:var(--brand-soft);
  font-size:12px;color:var(--brand-2);font-weight:600;
}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  padding:8px 16px;border-radius:var(--r-pill);
  background:var(--overlay-2);border:1px solid var(--border);
  font-size:14px;color:var(--ink-soft-2);transition:.2s;
}
.chip:hover{border-color:var(--brand);color:var(--text);}

/* ---------- 合规条 ---------- */
.compliance{
  background:rgba(var(--brand-rgb),.07);border:1px solid rgba(var(--brand-rgb),.24);
  border-radius:var(--r);padding:20px 26px;font-size:14px;color:var(--ink-soft-3);
}
.compliance b{color:var(--brand-2);}

/* ---------- CTA ---------- */
.cta-band{
  text-align:center;padding:76px 40px;border-radius:var(--r-xl);
  background:var(--grad-soft);border:1px solid rgba(var(--brand-rgb),.32);
  position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;bottom:-140px;left:50%;transform:translateX(-50%);
  width:640px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--brand-rgb),.30),transparent 70%);
}
.cta-band h2{font-size:36px;font-weight:800;margin-bottom:14px;position:relative;}
.cta-band p{font-size:17px;color:var(--muted);margin-bottom:30px;position:relative;}
.cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;position:relative;}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:14px;color:var(--muted);}
.field input,.field textarea,.field select{
  padding:13px 16px;border-radius:var(--r-sm);
  background:var(--overlay-2);border:1px solid var(--border);
  color:var(--text);font-size:15px;font-family:inherit;transition:.2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--brand);background:var(--overlay-3);
}
.field textarea{resize:vertical;min-height:110px;}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--border);padding:64px 0 30px;
  background:linear-gradient(180deg,rgba(var(--bg2-rgb),.6),rgba(var(--bg-rgb),1));
  position:relative;overflow:hidden;
}
.footer::before{
  content:"";position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);
  width:900px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--brand-rgb),.18),transparent 68%);
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;
  position:relative;z-index:2;margin-bottom:44px;
}
.footer-brand p{font-size:14.3px;color:var(--muted);margin-top:16px;max-width:300px;}
.footer-col h5{font-size:15px;font-weight:700;margin-bottom:16px;}
.footer-col a{display:block;font-size:14.2px;color:var(--muted);padding:5px 0;transition:.2s;}
.footer-col a:hover{color:var(--brand-2);}
.footer-bottom{
  position:relative;z-index:2;padding-top:24px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.3px;color:var(--dim);
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  h1{font-size:42px;}
  .sec-title{font-size:31px;}
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .g4,.steps{grid-template-columns:repeat(2,1fr);}
  .step:not(:last-child)::after{display:none;}
  .step{padding:0 18px 26px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .price-wrap{grid-template-columns:1fr;}
}
/* ======================================================================
   手机端原生化适配（≤720px）
   原则：流式 clamp 取代硬跳变 · 三列表格转卡片 · 数据横排省屏高
        · 明确的按压反馈 · 输入框 16px 防 iOS 聚焦缩放
   ====================================================================== */
@media (max-width:720px){
  /* ---- 基础：防 iOS 自动放大 + 中文阅读节奏 ---- */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  body{
    font-size:clamp(15px,4.1vw,16.5px);
    line-height:1.78;letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;
  }
  .container{padding:0 clamp(16px,4.4vw,22px);}

  /* ---- 结构：全部单列 ---- */
  .nav{display:none;}
  .g2,.g3,.g4,.case-grid,.video-grid,.feat-groups,.form-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}

  /* ---- 标题层级（流式，跨屏不跳变） ---- */
  h1{font-size:clamp(26px,7.2vw,33px);line-height:1.32;}
  .hero-grid h1{font-size:clamp(26px,7.4vw,34px);line-height:1.3;}
  .sec-title{font-size:clamp(21px,6vw,26px);line-height:1.35;letter-spacing:-.01em;}
  .sec-sub,.sec-desc{font-size:clamp(14px,3.9vw,15.5px);line-height:1.72;}
  .sec-head{margin-bottom:clamp(30px,8vw,42px);}

  /* ---- 区块呼吸 ---- */
  .section{padding:clamp(52px,13vw,68px) 0;}

  /* ---- Hero：先价值后图片，按钮主次分明 ---- */
  .hero{padding:clamp(34px,9vw,46px) 0 clamp(44px,11vw,56px);}
  .hero-sub{font-size:clamp(14.5px,4.1vw,16px);margin-top:16px;line-height:1.76;}
  .hero-note{font-size:12.8px;line-height:1.65;margin-top:14px;}
  .badge{font-size:clamp(11.5px,3.3vw,13px);padding:7px 13px;line-height:1.55;max-width:100%;}
  .hero-actions{flex-direction:column;align-items:stretch;gap:11px;margin-top:26px;}
  .hero-actions .btn{width:100%;justify-content:center;min-height:50px;}

  /* 数据条：手机上改成「单列三行，数字在左、标签跟右」。
     两个原因：① 三列时每张只有 ~109px 宽，长标签要折成两行；
     ② 右下角固定的客服挂件会压住最右那张卡的标签文字，
     改成横排后文字全部收在左侧、卡片右侧是留白，正好让开挂件。 */
  .hero-stats{grid-template-columns:1fr;gap:8px;margin-top:18px;}
  .hero-stats > div{
    display:flex;align-items:baseline;gap:10px;
    padding:11px 14px;text-align:left;border-radius:var(--r-sm);
  }
  .hero-stats .num{font-size:18px;line-height:1.25;flex:0 0 auto;}
  .hero-stats .lbl{font-size:11.5px;line-height:1.5;margin-top:0;}
  .hero .hero-visual{max-width:clamp(178.5px,52.7vw,229.5px);margin-top:8px;}

  /* ---- 卡片：轻阴影 + 精致圆角 ---- */
  .card,.price-card,.case-card,.feat-group,.video-card{
    padding:clamp(18px,5vw,22px) clamp(16px,4.6vw,20px);
    border-radius:var(--r);box-shadow:var(--elev-sh),var(--elev-inset);
  }
  .g2,.g3,.g4,.case-grid,.video-grid,.feat-groups{gap:clamp(12px,3.4vw,16px);}

  /* 反馈墙：双列相册感，避免长图纵排 */
  .wall{grid-template-columns:1fr 1fr;gap:10px;}
  /* 张数为奇数时（如 3 张），最后一张居中，避免半宽悬在左侧 */
  .wall img:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 5px);margin:0 auto;}

  /* ---- 对比表：三列 → 卡片式（手机上最好读的形态） ---- */
  .compare{display:block;font-size:14px;background:none;border:0;border-radius:0;overflow:visible;}
  .compare thead{display:none;}
  .compare tbody{display:block;}
  .compare tr{
    display:block;margin-bottom:10px;padding:16px 15px;
    background:var(--elev-1);border:1px solid var(--elev-line);border-radius:var(--r-sm);
    box-shadow:var(--elev-sh),var(--elev-inset);
  }
  .compare tr:last-child{margin-bottom:0;}
  .compare td{display:block;padding:0;border:0;font-size:13.5px;line-height:1.6;}
  .compare td:first-child{
    font-weight:700;color:var(--text);font-size:14.5px;
    margin-bottom:9px;padding-bottom:9px;border-bottom:1px dashed var(--border);
  }
  .compare td:nth-child(2),.compare td:nth-child(3){
    display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:5px 0;
  }
  .compare td:nth-child(2){color:var(--muted);}
  .compare td:nth-child(3){color:var(--text);font-weight:600;}
  /* 标签改读 td 上的 data-label：原先写死在这里，与表头是两处独立内容，
     将来改表头忘同步就会出现「表头叫 A、手机卡片叫 B」。
     另外手机上表格已是卡片形态，胜出列的 3px 竖条在这里没有意义，关掉。 */
  .compare td:nth-child(2)::before{content:attr(data-label);flex:none;font-size:12.5px;color:var(--dim);font-weight:400;}
  .compare td:nth-child(3)::before{content:attr(data-label);flex:none;font-size:12.5px;color:var(--ink-accent);font-weight:400;}
  .compare td.win{box-shadow:none;background:none;}

  /* ---- 流程步骤 ---- */
  .step{padding:0 0 24px;}

  /* ---- 表单：16px 防 iOS 聚焦缩放 ---- */
  input,select,textarea{font-size:16px;}

  /* ---- 通用按压反馈（原生感的关键细节） ---- */
  .btn:active,.cs-btn:active{transform:scale(.975);}

  /* ---- 其他 ---- */
  .marquee-item{font-size:13px;}
  .price-wrap{gap:14px;}
  .cta-band{padding:clamp(30px,8vw,38px) clamp(18px,5vw,22px);border-radius:var(--r-lg);}
  .cta-band h2{font-size:clamp(21px,5.8vw,25px);line-height:1.35;}
  .cta-band p{font-size:clamp(14px,3.9vw,15px);}
  .stat .big,.stat .num{font-size:clamp(28px,8vw,34px);}
  .brand span{font-size:clamp(14px,4vw,15.5px);}
}

/* 极小屏（≤360）兜底：clamp 已覆盖绝大多数场景，这里只收最窄处的留白 */
@media (max-width:360px){
  .container{padding:0 14px;}
  .hero .hero-visual{max-width:166.6px;}
  .compare tr{padding:12px 13px;}
  .hero-stats .num{font-size:17px;}
  .hero-stats .lbl{font-size:11px;}
}

/* ======================================================================
   APP 下载（安卓直下 / 电脑扫码）
   —— 全部走主题变量，深色与浅色主题下都成立；
      二维码卡片固定白底，因为二维码必须有高对比底才扫得准
   ====================================================================== */

/* ---------- 头部下载按钮 ---------- */
.btn-dl{
  background:var(--brand-soft);
  border-color:rgba(var(--brand-rgb),.36);
  color:var(--text);
}
.btn-dl:hover{background:rgba(var(--brand-rgb),.20);border-color:var(--brand);}
/* 下载图标：全局兜底尺寸，避免 SVG 在 flex 按钮里被撑成正方形 */
.dl-ico{width:18px;height:18px;flex:none;display:block;}
.btn-dl .dl-ico{width:17px;height:17px;flex:none;color:var(--brand-2);}
.btn-sm .dl-ico{width:16px;height:16px;}
.btn-lg .dl-ico{width:20px;height:20px;}

/* ---------- 下载区块（about.html 与落地页共用） ---------- */
.dl-box{
  display:grid;grid-template-columns:248px 1fr;gap:40px;align-items:center;
  padding:36px 38px;border-radius:var(--r-lg);
  background:var(--elev-1);border:1px solid var(--elev-line);
  box-shadow:var(--elev-sh-hi),var(--elev-inset);
}

/* 二维码卡片：白底是有意的，保证任何主题下都扫得准 */
.dl-qr-card{
  background:#FFFFFF;border-radius:var(--r);padding:14px 14px 10px;
  box-shadow:0 16px 38px var(--sh-float);text-align:center;
}
.dl-qr-card img{width:100%;height:auto;display:block;border-radius:var(--r-xs);}
.dl-qr-card span{display:block;margin-top:8px;font-size:12px;font-weight:700;color:#46536B;letter-spacing:.3px;}

.dl-info h3{font-size:clamp(19px,4.6vw,23px);line-height:1.35;margin-bottom:10px;}
.dl-info > p{font-size:14.5px;line-height:1.78;color:var(--muted);}
.dl-facts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px;}
.dl-fact{
  font-size:12.5px;color:var(--muted);line-height:1;
  padding:7px 12px;border-radius:var(--r-pill);
  background:var(--overlay-2);border:1px solid var(--border);
}
.dl-fact b{color:var(--text);font-weight:700;}
/* 桌面端刻意竖排：先扫码/下载，再走次要动作 */
.dl-box .dl-actions{display:flex;flex-direction:column;flex-wrap:wrap;gap:12px;}
.dl-hint{
  display:block;margin-top:14px;font-size:13px;line-height:1.7;color:var(--dim);
}

/* 微信 / 内置浏览器 引导条 */
.dl-warn{
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:20px;padding:15px 20px;border-radius:var(--r);
  background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.34);
}
.dl-warn b{font-size:15px;color:var(--text);}
.dl-warn span{font-size:13px;color:var(--muted);line-height:1.65;}

/* 扫码进来（?from=qr）的自动下载状态卡：与 .dl-warn 同一视觉语言，
   只是多了一个动作按钮，所以单独一条以免污染引导条。 */
.dl-auto{
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:20px;padding:16px 20px;border-radius:var(--r);
  background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.34);
}
.dl-auto b{font-size:15px;color:var(--text);}
.dl-auto span{font-size:13px;color:var(--muted);line-height:1.65;}
.dl-auto .btn{margin-top:12px;align-self:flex-start;min-height:44px;}
@media (max-width:720px){
  .dl-auto .btn{width:100%;align-self:stretch;justify-content:center;min-height:48px;}
}

/* ---------- 二维码弹层 ---------- */
.dl-mask{
  position:fixed;inset:0;z-index:240;
  background:rgba(3,7,18,.64);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .26s ease;
}
.dl-mask.show{opacity:1;pointer-events:auto;}

.dl-modal{
  position:fixed;left:50%;top:50%;z-index:241;
  width:min(92vw,392px);max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:26px 26px 24px;border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(165deg,var(--panel-1) 0%,var(--panel-2) 100%);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow),0 0 60px rgba(var(--brand-rgb),.18);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-46%) scale(.96);
  transition:opacity .3s ease,transform .38s cubic-bezier(.34,1.56,.64,1),visibility .3s;
}
.dl-modal.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}

.dl-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--border);
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;font-family:inherit;transition:.2s;
}
.dl-close:hover{color:var(--text);background:var(--surface-2);}

.dl-head{margin-bottom:4px;}
.dl-head-ico{
  width:52px;height:52px;margin:0 auto 14px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:var(--on-brand-2);
  box-shadow:0 12px 30px rgba(var(--brand-rgb),.34);
}
/* 品牌标：星曜星形（形状取自 logo.png，透明底剪影 + currentColor 上色，
   跟随 --on-brand-2，换配色时自动适配） */
.dl-head-star{
  display:block;width:29px;height:29px;background:currentColor;
  -webkit-mask-image:url(img/app-star.png?v=dbf72ba2);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url(img/app-star.png?v=dbf72ba2);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.dl-title{font-size:19px;font-weight:700;line-height:1.35;}
.dl-sub{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.6;}

.dl-qr{
  width:210px;margin:20px auto 0;padding:13px;border-radius:var(--r);
  background:#FFFFFF;box-shadow:0 14px 32px var(--sh-float);
}
.dl-qr img{width:100%;height:auto;display:block;border-radius:var(--r-xs);}
.dl-qr-tag{display:block;margin-top:10px;font-size:12px;color:var(--dim);}

/* 引导态（微信 / 内置浏览器 / iOS）：二维码在这几种环境里没用，直接换成说明 */
.dl-guide{display:none;margin:20px 0 4px;padding:20px 18px;border-radius:var(--r);
  background:var(--overlay-2);border:1px dashed var(--border-strong);}
.dl-guide-arrow{
  width:42px;height:42px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:var(--brand-2);
  background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.30);
}
.dl-guide b{display:block;font-size:15px;color:var(--text);line-height:1.5;}
.dl-guide p{font-size:13px;color:var(--muted);line-height:1.7;margin-top:8px;}

.dl-modal[data-mode="wechat"] .dl-qr,
.dl-modal[data-mode="wechat"] .dl-qr-tag,
.dl-modal[data-mode="inapp"] .dl-qr,
.dl-modal[data-mode="inapp"] .dl-qr-tag,
.dl-modal[data-mode="ios"] .dl-qr,
.dl-modal[data-mode="ios"] .dl-qr-tag{display:none;}
.dl-modal[data-mode="wechat"] .dl-guide,
.dl-modal[data-mode="inapp"] .dl-guide,
.dl-modal[data-mode="ios"] .dl-guide{display:block;}

.dl-meta{
  margin-top:18px;font-size:12.5px;color:var(--dim);line-height:1.6;
  padding-top:16px;border-top:1px solid var(--border);
}
.dl-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.dl-actions .btn{width:100%;justify-content:center;}
.dl-actions .btn.ok{background:var(--ok);border-color:var(--ok);color:#04140C;}
.dl-tip{font-size:12px;color:var(--dim);line-height:1.65;margin-top:14px;}

/* ---------- 企业微信二维码弹层 ----------
   复用 .dl-mask / .dl-modal 的底座（同一种弹层语言，不另起一套），
   只覆盖「头部图标 / 二维码尺寸 / 底部署名」三处差异。 */
.qy-head-mark{
  display:block;width:31px;height:31px;background:currentColor;
  -webkit-mask-image:url(img/qy-wechat-icon.png?v=e4ac735f);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url(img/qy-wechat-icon.png?v=e4ac735f);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
/* 比下载二维码略大：企业微信码是「拿另一台手机扫屏幕」，尺寸要够 */
.qy-qr{width:226px;}
/* 二维码要能被长按识别，别继承页面上的禁选/禁长按 */
.qy-qr img{-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto;}
.qy-qr-tag{margin-top:12px;}
.qy-brand{
  margin-top:15px;padding-top:13px;border-top:1px solid var(--border);
  font-size:12px;color:var(--dim);letter-spacing:.2px;
}

/* ---------- 中小屏：头部两个按钮容易挤，提前收窄导航 ---------- */
@media (max-width:1120px){
  .header-inner{gap:16px;}
  .nav a{padding:8px 10px;font-size:14px;}
  .header-cta{gap:8px;}
}

/* ---------- 下载相关：移动端 ---------- */
@media (max-width:720px){
  .dl-box{grid-template-columns:1fr;gap:24px;padding:24px 20px;}
  /* 手机上不需要扫码（自己就是那台手机），收起二维码，让页面聚焦在「下载」这一个动作上 */
  .dl-qr-card{display:none;}
  .dl-info{text-align:center;}
  .dl-facts{justify-content:center;}
  .dl-box .dl-actions{flex-direction:column;gap:11px;}
  .dl-box .dl-actions .btn{width:100%;min-height:50px;}
  .dl-hint{text-align:center;}
  .dl-modal{width:calc(100vw - 32px);max-height:86vh;padding:24px 20px 22px;border-radius:var(--r-lg);}
  .dl-qr{width:min(196px,52vw);}
  .dl-actions .btn{min-height:48px;}
  .dl-close{width:36px;height:36px;}
}

/* ---------- 下载相关：极小屏 ---------- */
@media (max-width:360px){
  .dl-box{padding:20px 16px;}
  .dl-qr-card{width:min(200px,58vw);}
}

/* ---------- 浅色底下的装饰收敛 ----------
   页面底色是浅色的（云白），背景装饰（网格线 / 光晕 / 光球）
   在浅底上会显得过重，故整体压低亮度。
   注意：这几条必须放在文件末尾，靠「同权重 + 更靠后」覆盖上面的原值。 */
.grid-lines{opacity:.5;}
.ambient{opacity:.34;}
.cta-band::after,.footer::before{opacity:.5;}
.mockup-glow{opacity:.7;}

/* ======================================================================
   图标系统 —— 24×24 单色线性图标（1.65px 描边）
   ----------------------------------------------------------------------
   为什么不用 emoji（原来痛点卡是 👤🎤⚠️🎥、产品页是 🤖⭐🕐）：
     · Windows / macOS / Android 各显一套彩色 emoji，同一张卡在三台机器上长得不一样
     · 彩色 emoji 会整块盖掉 .card-icon 的语义色 —— 痛点卡本该是红的
     · 彩色 + 立体，与全站蓝青「仪器感」的线性语言直接对冲，是最明显的廉价感来源

   实现：SVG 编成 data URI 当 mask，元素自身用 background:currentColor 上色 ——
   于是图标颜色 = 所在容器的 color，痛点卡自动变红、能力卡自动变蓝，
   将来换配色也自动跟随（与 app-star.png / qy-wechat-icon.png 同一套机制）。
   零额外请求、无字体依赖、无 JS、无首屏闪烁。
   ====================================================================== */
.ic{
  display:inline-block;flex:none;width:1em;height:1em;
  background:currentColor;
  -webkit-mask-image:var(--ic);
  mask-image:var(--ic);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}

/* —— 商家困境：成本高 —— ¥ 币 */
.ic-cost{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M9.4 9.4l2.6 3.2 2.6-3.2'/%3E%3Cpath d='M12 12.6v4.2'/%3E%3Cpath d='M9.7 14h4.6'/%3E%3Cpath d='M9.7 15.9h4.6'/%3E%3C/svg%3E");}
/* —— 商家困境：不会讲 —— 划掉的麦克风 */
.ic-mic-off{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.1a2.5 2.5 0 0 1 5 0v4.2'/%3E%3Cpath d='M14.5 13.1a2.5 2.5 0 0 1-5-.9V9.2'/%3E%3Cpath d='M6 11.6a6 6 0 0 0 8.6 5.4'/%3E%3Cpath d='M18 11.6a6 6 0 0 1-.6 2.5'/%3E%3Cpath d='M12 17.6v3.3'/%3E%3Cpath d='M4.6 4.6 19.4 19.4'/%3E%3C/svg%3E");}
/* —— 商家困境：违规限流 —— 警告 */
.ic-alert{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.9 3.1 19.5h17.8L12 3.9Z'/%3E%3Cpath d='M12 10.2v4.1'/%3E%3Cpath d='M12 17.3h.01'/%3E%3C/svg%3E");}
/* —— 商家困境：设备门槛 —— 划掉的摄像机 */
.ic-cam-off{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.9' y='7' width='12.2' height='10.4' rx='2.4'/%3E%3Cpath d='M15.1 11.5 20.9 8.4v7.2l-5.8-3.1Z'/%3E%3Cpath d='M4.6 4.4 19.4 19.2'/%3E%3C/svg%3E");}
/* —— 产品：AI 主播 —— 麦克风 */
.ic-mic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a3 3 0 0 1 3 3v5.2a3 3 0 0 1-6 0V6.2a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M5.6 11.4a6.4 6.4 0 0 0 12.8 0'/%3E%3Cpath d='M12 17.8v3'/%3E%3C/svg%3E");}
/* —— 产品：AI 助播 —— 对话气泡 */
.ic-chat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 6.6h14.8a1.6 1.6 0 0 1 1.6 1.6v7.2a1.6 1.6 0 0 1-1.6 1.6h-6.8L8 20.2v-3.2H4.6A1.6 1.6 0 0 1 3 15.4V8.2a1.6 1.6 0 0 1 1.6-1.6Z'/%3E%3Cpath d='M7.2 10.6h9.6'/%3E%3Cpath d='M7.2 13.6h5.6'/%3E%3C/svg%3E");}
/* —— 产品：话术永不循环 —— 循环箭头 */
.ic-loop{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.3 12a7.7 7.7 0 0 1 13-5.5'/%3E%3Cpath d='M17.3 2.9v3.6h-3.6'/%3E%3Cpath d='M19.7 12a7.7 7.7 0 0 1-13 5.5'/%3E%3Cpath d='M6.7 21.1v-3.6h3.6'/%3E%3C/svg%3E");}
/* —— 产品：智能理解回复 —— 机器人 */
.ic-bot{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='8.2' width='15.6' height='11.2' rx='3.2'/%3E%3Cpath d='M12 4.4v3.8'/%3E%3Ccircle cx='12' cy='3.3' r='1.1'/%3E%3Ccircle cx='9.4' cy='12.9' r='1'/%3E%3Ccircle cx='14.6' cy='12.9' r='1'/%3E%3Cpath d='M9.8 16.5h4.4'/%3E%3C/svg%3E");}
/* —— 产品：线上线下同步 —— 时钟 */
.ic-clock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M12 7.4V12l3.2 1.9'/%3E%3C/svg%3E");}
/* —— 开播准备：安卓手机 */
.ic-phone{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.2' y='2.8' width='9.6' height='18.4' rx='2.6'/%3E%3Cpath d='M10.6 5.8h2.8'/%3E%3Cpath d='M10.8 18.4h2.4'/%3E%3C/svg%3E");}
/* —— 开播准备：APP 安装包 */
.ic-download{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11.4'/%3E%3Cpath d='M7.4 10 12 14.6 16.6 10'/%3E%3Cpath d='M4.2 17.2v1.6A2.2 2.2 0 0 0 6.4 21h11.2a2.2 2.2 0 0 0 2.2-2.2v-1.6'/%3E%3C/svg%3E");}
/* —— 开播准备：手机支架 */
.ic-stand{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.6' y='3.4' width='6.8' height='11.4' rx='1.8'/%3E%3Cpath d='M12 14.8v4.4'/%3E%3Cpath d='M8.2 19.2h7.6'/%3E%3C/svg%3E");}
/* —— 开播准备：抖音账号 + 小黄车 */
.ic-cart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.6' cy='19.6' r='1.4'/%3E%3Ccircle cx='17.4' cy='19.6' r='1.4'/%3E%3Cpath d='M2.8 3.6h2.6l2.6 11.2h10.5l2.1-8.2H6.2'/%3E%3C/svg%3E");}
/* —— 关于我们：只做一件事 —— 靶心 */
.ic-target{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='12' cy='12' r='1.1'/%3E%3C/svg%3E");}
/* —— 关于我们：服务对象 —— 店铺 */
.ic-store{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 9.6 5.2 4.4h13.6l1.6 5.2'/%3E%3Cpath d='M4.8 9.6V19a1.6 1.6 0 0 0 1.6 1.6h11.2A1.6 1.6 0 0 0 19.2 19V9.6'/%3E%3Cpath d='M10 20.6v-6h4v6'/%3E%3C/svg%3E");}
/* —— 关于我们：相信的方式 —— 天平（不夸大、讲规则） */
.ic-scale{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2v15.6'/%3E%3Cpath d='M6.4 6.6h11.2'/%3E%3Cpath d='M3.4 12.8 6.4 6.6l3 6.2a2.9 2.9 0 0 1-6 0Z'/%3E%3Cpath d='M14.6 12.8l3-6.2 3 6.2a2.9 2.9 0 0 1-6 0Z'/%3E%3Cpath d='M8.4 19.8h7.2'/%3E%3C/svg%3E");}

/* —— 图标容器内的尺寸与语义色 ——
   图标颜色跟随容器 color：能力卡 / 关于我们 → 品牌蓝；痛点卡 → 危险红 */
.card-icon{color:var(--brand);}
.pain-card .card-icon{color:var(--danger-a);}
.card-icon .ic{width:25px;height:25px;}

/* 标题内的行内图标（产品页 h3 里的 🔁🤖🕒） */
.card h3 .ic,
.feat-group h3 .ic{
  width:1.02em;height:1.02em;vertical-align:-.13em;margin-right:9px;color:var(--brand);
}

/* ==========================================================================
   滚动条样式 —— 「流光纺锤」（2026-09-16 第二轮重做）
   --------------------------------------------------------------------------
   形态：真几何纺锤 —— SVG path 两端收尖、中段最宽；再叠一条垂直渐变把两端
        压到 22% 不透明 → 两头细、中间实，颜色两边浅中间深。
   变色：SVG 内嵌 SMIL <animate> 让三个色标在 蓝 → 青 → 紫 之间错相位循环，
        整根光棒缓缓变色（10s 一轮），纯 CSS/SVG、零 JS。
   为什么不用 CSS 渐变做形状：CSS 渐变只能做出「矩形 + 两端透明」，矩形的边
   始终是直的，收不出真正变细的轮廓；SVG path 才能画出纺锤。

   ⚠️⚠️ 动这段之前必读 —— 滚动条伪元素的能力边界（2026-09-16 实测，别重测）：
     【可用】background(-image/-size/-repeat/-position)、data URI、border、var()，
             以及【SVG 内部的 SMIL 动画】
     【静默失效：声明被接受、渲染不动、不报错】
       · animation / @keyframes —— 动画对象根本不会被创建
       · @property 驱动的变量动画
       · mask-image（纺锤形切不出来，实测仍是完整矩形）
       · filter（静态与动画都不生效）
       · 外层用 JS 改 CSS 变量后【不会重绘】→ 变量只能定静态值
     所以「让颜色动起来」这条路只剩 SVG SMIL 一条。

   ⚠️⚠️ 另外三个坑（都踩过）：
   1) Chrome 121+ 只要 scrollbar-width ≠ auto，本段 ::-webkit-scrollbar 定制会被
      浏览器【整个忽略】且不报错。所以 Firefox 降级必须用
      @supports not selector(::-webkit-scrollbar) 互斥隔离，
      ⛔ 绝不能把 scrollbar-width 写进通用选择器。
   2) Playwright 默认带 --hide-scrollbars，截图里不绘滚动条，会误判成「没生效」。
      验收必须 ignore_default_args=["--hide-scrollbars"]。
   3) 量【根】滚动条宽度要用 window.innerWidth - documentElement.clientWidth；
      html 的 offsetWidth 本身已扣掉滚动条，用 offsetWidth-clientWidth 永远得 0。
   ========================================================================== */

/* —— 主滚动条（Chrome / Edge / Safari）+ 面板内滚动条 ——
   thumb 的背景是一张内联 SVG（data URI），两件事叠在一起：
     · 轮廓 = 平滑细纺锤（两端针尖 1.4、中段 7.0，viewBox 28×400）＝
              轨道内最粗处只占约一半宽（10px 轨道上约 5px）。
              ⛔ 形状固定，不做粗细起伏 / 左右摆动 ——
                 v5 那版「边缘水纹波动」已被明确否掉（2026-09-17），别再改回来；
     · 色标 = 5 段：两端 10% 极淡、中段 58% 最实 →「两边浅中间深」；
              三色各错 1/3 相位循环 → 浅蓝 → 浅青 → 浅紫 → 浅蓝（12s）。
              ⛔ 色标 offset 固定，不做「呼吸 / 流动」——只让颜色变，不让形状变。
   ⚠️ 只能有 SVG 这一层，不要再叠 CSS 渐变「兜底」：
      CSS 渐变在水平方向必然铺满整条轨道，两端透明只作用在纵向，
      会在纺锤外面露出一块浅色底衬，把「无轨道」的干净感毁掉。
   ⚠️ SMIL 里可用的动画属性（2026-09-16 实测）：
      stop-color ✅ · stop offset ✅ · path 的 d（同结构线性插值）✅
      而 animation / @property / mask-image / filter 全部静默失效，别试。
      本站只用 stop-color 一个 —— 形状与色带位置都保持静止。
   ⚠️ 「想要多细」改这三处就够：::-webkit-scrollbar 的 width、
      SVG 的 hwMid/hwEnd（28 宽 viewBox 里的半宽）、以及 stop-opacity。
   ⚠️ data URI 里 # 必须写成 %23；构建脚本对 data: 显式放行
      （stamp_assets / verify_stamped 都跳过 data:），不会被打版本号。
   ⚠️ 不设 hover 态：SVG 内部颜色 CSS 够不着，而 filter 在滚动条上不生效。 */
html::-webkit-scrollbar{width:10px;}
.cs-panel::-webkit-scrollbar,
.dl-modal::-webkit-scrollbar{width:7px;}   /* 小圆角浮层里再细一档 */

html::-webkit-scrollbar-track,
.cs-panel::-webkit-scrollbar-track,
.dl-modal::-webkit-scrollbar-track{background:transparent;}

html::-webkit-scrollbar-thumb,
.cs-panel::-webkit-scrollbar-thumb,
.dl-modal::-webkit-scrollbar-thumb{
  background-image:
    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 400' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23B6CDFB' stop-opacity='.10'/><animate attributeName='stop-color' values='%23B6CDFB;%238CD8F2;%23CCC4FB;%23B6CDFB' dur='12s' repeatCount='indefinite'/><stop offset='.24' stop-color='%2372CFF0' stop-opacity='.44'/><animate attributeName='stop-color' values='%2393B4F9;%2372CFF0;%23B0A6FA;%2393B4F9' dur='12s' repeatCount='indefinite'/><stop offset='.5' stop-color='%23B0A6FA' stop-opacity='.58'/><animate attributeName='stop-color' values='%2372CFF0;%23B0A6FA;%2393B4F9;%2372CFF0' dur='12s' repeatCount='indefinite'/><stop offset='.76' stop-color='%2372CFF0' stop-opacity='.44'/><animate attributeName='stop-color' values='%23B0A6FA;%2393B4F9;%2372CFF0;%23B0A6FA' dur='12s' repeatCount='indefinite'/><stop offset='1' stop-color='%23CCC4FB' stop-opacity='.10'/><animate attributeName='stop-color' values='%23CCC4FB;%23B6CDFB;%238CD8F2;%23CCC4FB' dur='12s' repeatCount='indefinite'/></linearGradient></defs><path d='M12.6 8 C12.28 14.4 11.23 33.6 10.65 46.4 C10.08 59.2 9.58 72 9.13 84.8 C8.68 97.6 8.29 110.4 7.97 123.2 C7.66 136 7.41 148.8 7.25 161.6 C7.09 174.4 7 187.2 7 200 C7 212.8 7.09 225.6 7.25 238.4 C7.41 251.2 7.66 264 7.97 276.8 C8.29 289.6 8.68 302.4 9.13 315.2 C9.58 328 10.08 340.8 10.65 353.6 C11.23 366.4 12.28 385.6 12.6 392 L15.4 392 C15.72 385.6 16.77 366.4 17.35 353.6 C17.92 340.8 18.42 328 18.87 315.2 C19.32 302.4 19.71 289.6 20.03 276.8 C20.34 264 20.59 251.2 20.75 238.4 C20.91 225.6 21 212.8 21 200 C21 187.2 20.91 174.4 20.75 161.6 C20.59 148.8 20.34 136 20.03 123.2 C19.71 110.4 19.32 97.6 18.87 84.8 C18.42 72 17.92 59.2 17.35 46.4 C16.77 33.6 15.72 14.4 15.4 8 Z' fill='url(%23g)'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}
/* 两端按钮交还给系统 —— 不画箭头，才和「无轨道」的极简设定一致 */
html::-webkit-scrollbar-button{display:none;height:0;}
/* 右下角两角不画（避免与页面圆角打架出小方块） */
html::-webkit-scrollbar-corner{background:transparent;}

/* —— Firefox 降级 ——
   Firefox 不支持 ::-webkit-scrollbar，只能 two-color 扁平条、不能圆角/发光，
   是硬限制。故意用 @supports 隔离，避免 scrollbar-width 反过来作废上面那套。 */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:var(--brand) transparent;}
}