/* ===== 星曜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);
}