/* ============================================================
   「穹枢自助台球」B 端获客落地页 V1.0
   设计概念：「球房的第二本账」
   —— 呢绒绿深夜场次 × 粉笔纸账本排版 × 黄铜刻线 × 衬线老式数字
   依据《开发落地页面规划.md》§8.4.3 视觉规范：
   主色品牌绿 #0f8f5f（与小程序 app.json 同源）/ Hero 深墨绿渐变底白字
   / 数据大号数字 / 整体克制、可信、数据感
   ============================================================ */

:root {
  /* 色板 */
  --brand: #0f8f5f;
  --brand-deep: #0b6b47;
  --brand-bright: #17b378;
  --felt-950: #05130d;
  --felt-900: #071b14;
  --felt-850: #082018;
  --felt-800: #0a241a;
  --felt-700: #0d3023;
  --chalk: #f3efe4;
  --chalk-2: #ece5d4;
  --chalk-3: #e3dbc6;
  --ink: #1c261f;
  --ink-2: #57635b;
  --ink-3: #8b958c;
  --brass: #c2a05e;
  --brass-dim: rgba(194, 160, 94, .38);
  --brass-faint: rgba(194, 160, 94, .18);
  --red-ink: #a8442c;
  --green-ink: #0c7a4f;

  /* 字体（大陆网络环境：不引外部字体，LCP 友好） */
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", SimSun, serif;
  --mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Roboto Mono", "PingFang SC", monospace;

  --wrap: 1140px;
  --r-card: 18px;
  --hairline: 1px solid var(--brass-faint);
}

/* ============ 基础 ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--chalk);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
/* hidden 兜底：组件自身的 display 规则会覆盖 UA 默认隐藏（如 .nav-tel / .final-tel），必须强制 */
[hidden] { display: none !important; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: rgba(15, 143, 95, .25); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ============ 滚动条（黄铜细杆，呼应刻线质感；Firefox 走标准属性，WebKit 走伪元素） ============ */
html { scrollbar-width: thin; scrollbar-color: rgba(194, 160, 94, .6) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent; border-radius: 999px;
  background-image: linear-gradient(180deg, rgba(194, 160, 94, .45), rgba(194, 160, 94, .72));
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, rgba(194, 160, 94, .68), rgba(227, 178, 60, .92));
}

.mono { font-family: var(--mono); letter-spacing: .14em; }
/* 大号数据：衬线老式数字（Georgia 自带 oldstyle figures，账本质感） */
.num {
  font-family: var(--serif);
  font-variant-numeric: oldstyle-nums;
  font-weight: 700;
  letter-spacing: 0;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
section { scroll-margin-top: 58px; }
.only-mobile { display: inline; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ============ 通用区块头 ============ */
.sec { position: relative; isolation: isolate; overflow: clip; }
.sec-paper { background: var(--chalk); color: var(--ink); }
.sec-chalk { background: var(--chalk-2); color: var(--ink); }

.sec-head { padding: 72px 0 12px; max-width: 640px; }
.sec-index {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--green-ink); text-transform: uppercase;
  margin-bottom: 16px;
}
.sec-index::after { content: ""; width: 42px; height: 1px; background: var(--brass-dim); }
.sec-title {
  font-size: clamp(25px, 5vw, 36px);
  font-weight: 800; line-height: 1.32; letter-spacing: .01em;
}
.sec-sub { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.sec-sub b { color: var(--ink); }
.sec-footnote { margin: 26px 0 0; font-size: 12px; color: var(--ink-3); }

/* 深色区变体 */
.sec-felt, .sec-night { color: rgba(255, 255, 255, .88); }
.sec-felt { background:
  radial-gradient(120% 90% at 50% -10%, rgba(23, 179, 120, .10), transparent 55%),
  linear-gradient(178deg, var(--felt-850), var(--felt-900) 60%, var(--felt-950));
}
.sec-night { background:
  radial-gradient(90% 70% at 80% -10%, rgba(194, 160, 94, .07), transparent 60%),
  linear-gradient(180deg, var(--felt-900), var(--felt-950));
}
/* 呢面织理（低透明度噪声） + 暗角 */
.sec-felt::before, .sec-night::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sec-head-light .sec-index { color: var(--brass); }
.sec-head-light .sec-title { color: #fff; }
.sec-head-light .sec-sub { color: rgba(255, 255, 255, .62); }
.sec-head-light .sec-sub b { color: rgba(255, 255, 255, .92); }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: 13px;
  font-size: 15.5px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: linear-gradient(160deg, var(--brand-bright), var(--brand-deep));
  color: #fff;
  box-shadow: 0 10px 26px rgba(15, 143, 95, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15, 143, 95, .48); }
.btn-ghost {
  background: rgba(255, 255, 255, .06); color: #fff;
  border: 1px solid rgba(255, 255, 255, .26);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-block { width: 100%; }

/* ============ 桌面章节导轨 ============ */
.rail {
  display: none; position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
  z-index: 40; flex-direction: column; gap: 7px;
}
.rail a {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; color: var(--ink-3); text-decoration: none;
  font-family: var(--mono); letter-spacing: .1em;
  padding: 3px 4px; border-radius: 6px;
  transition: color .2s;
}
.rail a i { font-style: normal; width: 17px; text-align: right; }
.rail a span {
  opacity: 0; transform: translateX(-4px); transition: .2s;
  background: var(--ink); color: var(--chalk);
  padding: 1px 7px; border-radius: 4px; font-size: 10px; letter-spacing: .2em;
}
.rail a:hover span, .rail a.active span { opacity: 1; transform: none; }
.rail a.active { color: var(--brand); }
.rail a.active i { position: relative; }
.rail a.active i::after {
  content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--brass);
}

/* ============ 顶部导航 ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 58px; padding: 0 18px;
  background: rgba(7, 22, 15, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(194, 160, 94, .16);
}
.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.nav-ball { width: 26px; height: 26px; }
.nav-name { font-size: 16.5px; font-weight: 800; letter-spacing: .04em; }
/* 导航文字禁止折行：小屏折行会撑破 58px 导航条 */
.nav-name, .nav-cta { white-space: nowrap; }
.nav-tag {
  display: none; /* 小屏空间不足先隐藏徽标，≥480px 恢复 */
  font-size: 10.5px; font-family: var(--mono); letter-spacing: .18em;
  color: var(--brass); border: 1px solid var(--brass-dim);
  padding: 2px 8px; border-radius: 999px; margin-left: 2px;
}
.nav-acts { display: flex; align-items: center; gap: 12px; }
.nav-tel {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, .72); text-decoration: none; font-size: 13.5px;
}
.nav-tel:hover { color: #fff; }
.nav-tel .ico { width: 15px; height: 15px; }
.nav-cta {
  font-size: 13.5px; font-weight: 700; text-decoration: none; color: #fff;
  background: linear-gradient(160deg, var(--brand-bright), var(--brand-deep));
  padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 143, 95, .35);
}
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brass));
}
body { padding-top: 58px; }

/* ============ S1 · Hero ============ */
.sec-hero {
  color: #fff;
  background:
    radial-gradient(130% 100% at 72% 8%, rgba(23, 179, 120, .16), transparent 52%),
    radial-gradient(90% 80% at 50% 110%, rgba(5, 19, 13, .9), transparent 60%),
    linear-gradient(168deg, #0a2b1e 0%, #07211a 46%, #04150f 100%);
}
.sec-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 66px 22px 54px; }

.hero-kicker {
  display: inline-flex; flex-direction: column; gap: 5px; margin-bottom: 26px;
  padding: 9px 16px; border-left: 2px solid var(--brass);
  background: rgba(194, 160, 94, .06);
}
.hero-kicker .mono { font-size: 10px; color: var(--brass); }
.hero-kicker-zh { font-size: 13px; color: rgba(255, 255, 255, .78); letter-spacing: .08em; }

.hero-title {
  font-size: clamp(31px, 7.4vw, 58px);
  font-weight: 900; line-height: 1.3; letter-spacing: .015em;
  display: flex; flex-direction: column;
}
.hero-title span { display: block; }
.hero-title em {
  font-style: normal; position: relative; white-space: nowrap;
  color: #ffd98f;
  text-decoration: none;
}
.hero-title em::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: .04em; height: .16em;
  background: rgba(194, 160, 94, .4); z-index: -1; border-radius: 2px;
}
.hero-answer {
  margin-top: 18px;
  font-size: clamp(17px, 3.6vw, 24px); font-weight: 800; color: var(--brand-bright);
  letter-spacing: .06em;
}
.hero-answer::before { content: "—— "; color: var(--brass); font-weight: 400; }
.hero-sub {
  margin-top: 16px; max-width: 560px;
  font-size: clamp(14.5px, 2.4vw, 16.5px); color: rgba(255, 255, 255, .78);
}
.hero-sub b { color: #fff; font-weight: 700; }

.hero-acts { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 13px; }
.hero-acts .btn-primary { padding: 15px 24px; font-size: 16.5px; } /* 移动端收紧内距，保证 320px 仍单行 */

.hero-chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips li {
  font-size: 12px; color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
  padding: 5px 12px; border-radius: 999px; letter-spacing: .03em;
}

/* 台面插画 + 核心闭环微演示（扫码支付 → 灯亮开台 → 母球入袋 → 循环）
   所有场景动画共用 12s 时钟，按百分比编排：
   0–17%   暗桌待客：灯灭，桌码呼吸，chip 显示「空闲」
   17–23%  支付成功 toast 弹出
   30–33%  支付回调 → 继电器点火（闪两下）→ 满亮
   40–72%  母球开杆滚入右下袋
   78–84%  toast 收起；90–100% 灯灭复位，进入下一单 */
.hero-table { position: relative; margin: 34px auto 0; max-width: 620px; }
.hero-svg { width: 100%; height: auto; display: block; }
.hero-balls-idle { animation: felt-float 9s ease-in-out infinite; }
@keyframes felt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 灯光编排（元素基础态 = 亮灯：动画被关闭时静态呈现「已开台」画面）
   开灯冲击感：暗幕加浓到 .7 拉开明暗反差；30% 起在 0.27s 内完成
   「亮 → 闪断 → 满亮」的继电器点火节奏，配合峰值更高的闪光 */
.hero-dim       { opacity: 0; animation: hero-dim 12s linear infinite; }
.hero-beam      { opacity: 1; animation: hero-beam 12s linear infinite; }
.hero-flash     { opacity: 0; animation: hero-flash 12s linear infinite; }
.hero-lamp-glow { opacity: 1; animation: hero-bulb 12s linear infinite; }
.hero-qr-halo   { opacity: 0; animation: qr-pulse 2.6s ease-in-out infinite; }

@keyframes hero-dim {
  0%, 30%     { opacity: .7; }
  30.8%       { opacity: .25; }  /* 点火第一闪：暗幕骤减 */
  31.4%       { opacity: .6; }   /* 闪断回弹 */
  32.2%, 90%  { opacity: 0; }    /* 满亮 */
  93%, 100%   { opacity: .7; }
}
@keyframes hero-beam {
  0%, 30%     { opacity: 0; }
  30.8%       { opacity: .85; }
  31.4%       { opacity: .1; }
  32.2%, 90%  { opacity: 1; }
  93%, 100%   { opacity: 0; }
}
@keyframes hero-bulb {
  0%, 29.6%   { opacity: 0; }
  30.4%       { opacity: .9; }
  31.1%       { opacity: .12; }
  31.8%, 90%  { opacity: 1; }
  93%, 100%   { opacity: 0; }
}
@keyframes hero-flash {
  0%, 30%     { opacity: 0; }
  31.2%       { opacity: .45; }
  34%         { opacity: .14; }
  36.5%, 100% { opacity: 0; }
}
@keyframes qr-pulse   { 0%, 100% { opacity: 0; } 50% { opacity: .8; } }

/* 浮层：支付成功 toast + 桌态 chip */
.hero-scene { position: absolute; inset: 0; pointer-events: none; }
.hero-toast {
  position: absolute; left: 3%; top: 4%;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px; border-radius: 13px;
  background: rgba(250, 248, 241, .97);
  box-shadow: 0 12px 30px rgba(2, 16, 11, .5), 0 0 0 1px rgba(194, 160, 94, .28);
  opacity: 0;
  animation: hero-toast 12s cubic-bezier(.22, 1.2, .36, 1) infinite;
}
.hero-toast-ico {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: #07c160; color: #fff;
}
.hero-toast-ico svg { width: 13px; height: 13px; }
.hero-toast-txt b { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ink); letter-spacing: .01em; }
.hero-toast-txt i { display: block; font-style: normal; font-size: 10.5px; line-height: 1.35; color: var(--ink-2); }

.hero-chip {
  position: absolute; right: 3%; top: 50%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(6, 24, 17, .84);
  border: 1px solid rgba(194, 160, 94, .42);
  box-shadow: 0 10px 26px rgba(2, 16, 11, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #17b378; box-shadow: 0 0 10px rgba(23, 179, 120, .9);
  animation: chip-dot 12s linear infinite;
}
.hero-chip-labels { display: grid; }
.hero-chip-labels > span {
  grid-area: 1 / 1; white-space: nowrap;
  font-size: 11.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .92);
}
.hero-chip .l-idle { opacity: 0; animation: chip-idle 12s linear infinite; }
.hero-chip .l-open { opacity: 1; animation: chip-open 12s linear infinite; }

@keyframes hero-toast {
  0%, 17%   { opacity: 0; transform: translateY(12px) scale(.9); }
  21%       { opacity: 1; transform: translateY(0) scale(1.04); }
  23%, 78%  { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: translateY(-10px) scale(.95); }
}
@keyframes chip-idle { 0%, 32% { opacity: 1; } 35.5%, 89% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes chip-open { 0%, 32% { opacity: 0; } 36.5%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes chip-dot {
  0%, 32%    { background: #79867d; box-shadow: none; }
  36.5%, 88% { background: #17b378; box-shadow: 0 0 10px rgba(23, 179, 120, .9); }
  94%, 100%  { background: #79867d; box-shadow: none; }
}

/* 母球：灯亮后开杆，滚入右下袋（起点 (190,215)，袋口 (522,446)） */
.hero-cueball {
  transform: translate(190px, 215px);
  animation: cue-roll 12s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes cue-roll {
  0%, 40%   { transform: translate(190px, 215px) scale(1); opacity: 1; }
  66%       { transform: translate(488px, 412px) scale(1); opacity: 1; }
  69%       { transform: translate(512px, 437px) scale(.55); opacity: .9; }
  72%       { transform: translate(517px, 442px) scale(.15); opacity: 0; }
  78%       { transform: translate(190px, 215px) scale(.7); opacity: 0; }
  84%, 100% { transform: translate(190px, 215px) scale(1); opacity: 1; }
}

/* 数据带 */
.hero-stats {
  margin-top: 40px; padding-top: 26px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px;
  border-top: 1px solid rgba(194, 160, 94, .28);
}
.stat dt { font-size: 12px; color: rgba(255, 255, 255, .55); order: 1; }
.stat dd { order: 0; display: flex; align-items: baseline; gap: 3px; }
.stat .num { font-size: clamp(30px, 6vw, 42px); color: #ffd98f; line-height: 1.1; }
.stat .unit { font-size: 15px; color: #ffd98f; font-weight: 700; }
.stat p { order: 2; font-size: 12.5px; color: rgba(255, 255, 255, .48); margin-top: 3px; }
.stat { display: flex; flex-direction: column; }
.hero-footnote { margin-top: 22px; font-size: 11.5px; color: rgba(255, 255, 255, .35); }

/* ============ S2 · 痛点 ============ */
.pains { display: grid; grid-template-columns: 1fr; gap: 16px; padding-bottom: 12px; }
.pain {
  background: #fbf8f0; border: 1px solid #e4ddc9; border-radius: var(--r-card);
  padding: 24px 22px 20px; position: relative; overflow: hidden;
}
.pain::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass), transparent 70%);
}
.pain-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pain-stat { display: flex; align-items: baseline; gap: 4px; color: var(--red-ink); }
.pain-stat b { font-size: clamp(34px, 7vw, 44px); line-height: 1; }
.pain-stat i { font-style: normal; font-size: 14px; font-weight: 700; }
.pain-tag { font-size: 10.5px; color: var(--brand); letter-spacing: .16em; white-space: nowrap; }
.pain h3 {
  margin-top: 14px; font-size: 17.5px; font-weight: 800; line-height: 1.5;
}
.pain > p { margin-top: 8px; font-size: 13.8px; color: var(--ink-2); }
.pain-fix {
  margin-top: 16px; padding: 13px 14px; border-radius: 12px;
  background: rgba(15, 143, 95, .07); border-left: 3px solid var(--brand);
  font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start;
}
.pain-fix b {
  flex: none; color: #fff; background: var(--brand);
  font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-top: 3px;
  letter-spacing: .1em;
}
.pain-fix span b { color: var(--green-ink); }

/* ============ S3 · 架构 ============ */
.arch { padding: 8px 0 64px; display: flex; flex-direction: column; align-items: stretch; }
.arch-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.arch-node {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(194, 160, 94, .22);
  border-radius: 16px; padding: 18px 18px 16px;
}
.arch-node-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 12px;
}
.arch-node-name .ico { color: var(--brass); width: 19px; height: 19px; }
.arch-node ul { display: flex; flex-wrap: wrap; gap: 7px; }
.arch-node li {
  font-size: 12px; color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
  padding: 3px 11px; background: rgba(255, 255, 255, .03);
}
.arch-node-core {
  border-color: rgba(23, 179, 120, .5);
  background: linear-gradient(170deg, rgba(23, 179, 120, .12), rgba(15, 143, 95, .05));
}
.arch-node-badge {
  margin-top: 13px; font-size: 12px; color: #ffd98f;
  display: flex; align-items: center; gap: 7px;
}
.arch-node-badge::before { content: "◈"; color: var(--brass); font-size: 11px; }
/* 连接线：横/竖自适应 */
.arch-link, .arch-vlink {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  justify-content: center; padding: 2px 0;
}
.arch-link .mono, .arch-vlink .mono { font-size: 9.5px; color: var(--brass); letter-spacing: .22em; white-space: nowrap; }
.arch-link i, .arch-vlink i {
  width: 2px; height: 30px;
  background: repeating-linear-gradient(180deg, var(--brass) 0 7px, transparent 7px 14px);
  animation: dash-v 1.4s linear infinite;
}
@keyframes dash-v { to { background-position: 0 14px; } }
@keyframes dash-h { to { background-position: 14px 0; } }
.arch-vlink { padding: 16px 0 10px; }
.arch-hw {
  border: 1px dashed rgba(194, 160, 94, .4); border-radius: 16px;
  padding: 16px 18px; background: rgba(0, 0, 0, .16);
}
.arch-hw-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--brass); margin-bottom: 12px;
}
.arch-hw ul { display: flex; flex-wrap: wrap; gap: 8px; }
.arch-hw li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  padding: 7px 14px; border-radius: 10px;
}
.arch-hw li .ico { color: var(--brass); width: 17px; height: 17px; }
.arch-hw-note { margin-top: 11px; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* ============ S4 · 功能 ============ */
.feats {
  display: grid; grid-template-columns: 1fr; gap: 13px;
  padding: 10px 0 64px;
}
.feats li {
  background: #fbf8f0; border: 1px solid #e4ddc9; border-radius: var(--r-card);
  padding: 21px 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feats li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28, 38, 31, .09); border-color: var(--brass-dim); }
.feats h3 { margin-top: 15px; font-size: 16.5px; font-weight: 800; }
.feats p { margin-top: 7px; font-size: 13.5px; color: var(--ink-2); }
.feats p b { color: var(--green-ink); }

/* 台球编号徽章（纯 CSS 光泽球） */
.ball {
  position: relative; display: inline-block; width: 46px; height: 46px; border-radius: 50%;
  box-shadow: inset -5px -7px 10px rgba(0, 0, 0, .35), inset 4px 5px 7px rgba(255, 255, 255, .28), 0 5px 10px rgba(28, 38, 31, .22);
}
.ball i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 21px; height: 21px; border-radius: 50%; background: var(--chalk);
  color: #17211b; font-style: normal; font-family: var(--serif); font-weight: 700;
  font-size: 12.5px; display: grid; place-items: center;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .25);
}
.ball-1 { background: radial-gradient(circle at 34% 30%, #f7d774, #e3b23c 55%, #a87f1e); }
.ball-2 { background: radial-gradient(circle at 34% 30%, #6da3d6, #3e78b0 55%, #1f4468); }
.ball-3 { background: radial-gradient(circle at 34% 30%, #e27a5c, #c14e34 55%, #82301d); }
.ball-4 { background: radial-gradient(circle at 34% 30%, #a67fc7, #7a4f9e 55%, #472c63); }
.ball-5 { background: radial-gradient(circle at 34% 30%, #e59a55, #d07a2d 55%, #8f5117); }
.ball-6 { background: radial-gradient(circle at 34% 30%, #3fc08b, #17925f 55%, #0b573a); }
.ball-7 { background: radial-gradient(circle at 34% 30%, #b06052, #8c3332 55%, #571b1a); }
.ball-8 { background: radial-gradient(circle at 34% 30%, #565656, #1f1f1f 55%, #000); }

/* 黑八彩蛋卡 */
.feats li.feat-more {
  background: linear-gradient(165deg, #13281e, #0a1b13);
  border: 1px solid var(--brass-dim); color: rgba(255, 255, 255, .88);
}
.feat-more h3 { color: #fff; display: flex; align-items: center; gap: 12px; }
.feat-more p { color: rgba(255, 255, 255, .62); }
.feat-more p b { color: #ffd98f; }

/* ============ S5 · 演示 ============ */
.demo {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 34px; padding: 14px 0 64px;
}
.phone {
  width: min(292px, 80vw);
  border-radius: 42px; background: #0d100e;
  border: 9px solid #0d100e;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1.5px rgba(194, 160, 94, .25);
  position: relative;
  transition: transform .3s ease;
}
.phone-notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 24px; border-radius: 999px; background: #0d100e; z-index: 5;
  pointer-events: none; /* 纯装饰，避免挡住视频的轻触切换 */
}
.phone-screen {
  position: relative;
  border-radius: 33px; overflow: hidden; background: #000;
  aspect-ratio: 448 / 960; /* 与演示录屏原生分辨率一致，视频满屏无裁切 */
}
/* aspect-ratio 回退（旧内核）：按 274px 内容宽 × 960/448 给定高度 */
@supports not (aspect-ratio: 1) {
  .phone-screen { height: 587px; }
}
.phone figcaption {
  /* 流式排列：原绝对定位 bottom:-46px 会下探越过 demo 间距，窄屏与下一台手机重叠 */
  margin-top: 14px;
  text-align: center; font-size: 12px; color: rgba(255, 255, 255, .55); line-height: 1.6;
}
.phone figcaption b { color: var(--brass); font-size: 12.5px; }

/* 演示录屏视频：进屏自动播放（静音循环）· 离屏暂停 · 轻触切换 */
.ph-video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; /* 屏幕与录屏同比例，正常无裁切，仅容错微小比例差 */
}
.ph-video-tag {
  position: absolute; top: 16px; left: 14px; z-index: 3;
  font-size: 9px; color: rgba(255, 255, 255, .88);
  background: rgba(7, 22, 15, .5);
  border: 1px solid rgba(194, 160, 94, .32);
  padding: 3px 9px; border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ph-video-btn {
  position: absolute; inset: 0; z-index: 4;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.ph-play {
  position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(7, 22, 15, .66);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translate(-50%, -50%) scale(.82);
  transition: opacity .25s ease, transform .25s ease;
}
.ph-play svg { width: 22px; height: 22px; margin-left: 3px; }
.phone-screen.is-paused .ph-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.demo-cta { text-align: center; margin: 26px 0 10px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.demo-cta .mono { font-size: 10.5px; color: var(--brass); letter-spacing: .24em; }

/* ============ S6 · 交付流程 ============ */
.steps {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 26px;
  padding: 16px 0 8px;
}
.steps::before {
  content: ""; position: absolute; left: 22px; top: 12px; bottom: 12px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--brass-dim) 0 7px, transparent 7px 14px);
}
.step { position: relative; padding-left: 68px; }
.step-ball {
  position: absolute; left: 0; top: -2px; width: 46px; height: 46px;
}
.step-ball i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 21px; height: 21px; border-radius: 50%; background: var(--chalk);
  font-style: normal; font-family: var(--serif); font-weight: 700; font-size: 12.5px;
  display: grid; place-items: center; color: #17211b;
}
.step:nth-child(1) .step-ball { background: radial-gradient(circle at 34% 30%, #f7d774, #e3b23c 55%, #a87f1e); box-shadow: inset -5px -7px 10px rgba(0, 0, 0, .35), inset 4px 5px 7px rgba(255, 255, 255, .28); }
.step:nth-child(2) .step-ball { background: radial-gradient(circle at 34% 30%, #6da3d6, #3e78b0 55%, #1f4468); box-shadow: inset -5px -7px 10px rgba(0, 0, 0, .35), inset 4px 5px 7px rgba(255, 255, 255, .28); }
.step:nth-child(3) .step-ball { background: radial-gradient(circle at 34% 30%, #e27a5c, #c14e34 55%, #82301d); box-shadow: inset -5px -7px 10px rgba(0, 0, 0, .35), inset 4px 5px 7px rgba(255, 255, 255, .28); }
.step:nth-child(4) .step-ball { background: radial-gradient(circle at 34% 30%, #a67fc7, #7a4f9e 55%, #472c63); box-shadow: inset -5px -7px 10px rgba(0, 0, 0, .35), inset 4px 5px 7px rgba(255, 255, 255, .28); }
.step h3 { font-size: 17px; font-weight: 800; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.step p { margin-top: 6px; font-size: 13.8px; color: var(--ink-2); max-width: 520px; }
.step p b { color: var(--ink); }
.step-time { font-size: 10.5px; color: var(--brand); letter-spacing: .16em; }

/* ============ S7 · 前置条件 ============ */
.prep { display: grid; grid-template-columns: 1fr; gap: 13px; padding-bottom: 64px; }
.prep li {
  display: flex; gap: 15px; align-items: flex-start;
  background: #fbf8f0; border: 1px solid #e0d8c2; border-radius: var(--r-card);
  padding: 20px;
}
.prep .ico { width: 27px; height: 27px; color: var(--brand); flex: none; margin-top: 2px; }
.prep h3 { font-size: 15.5px; font-weight: 800; }
.prep p { margin-top: 5px; font-size: 13.5px; color: var(--ink-2); }
.prep p b { color: var(--ink); }

/* ============ S8 · 价格 ============ */
.pricing { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 16px; padding-bottom: 60px; }
.price {
  position: relative; border-radius: 22px; padding: 30px 26px 26px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .12);
}
.price-hero {
  border: 1.5px solid rgba(194, 160, 94, .55);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(23, 179, 120, .14), transparent 55%),
    rgba(255, 255, 255, .04);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.price-badge {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
}
.price-badge span {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  color: #06231a; background: linear-gradient(120deg, #ffd98f, #e3b23c);
  padding: 6px 18px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(227, 178, 60, .35);
}
.price-badge-plain span { background: none; color: var(--brass); border: 1px solid var(--brass-dim); box-shadow: none; }
.price-head h3 { font-size: 21px; font-weight: 900; color: #fff; letter-spacing: .02em; }
.price-head p { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.price-nums { margin: 22px 0 6px; padding: 18px 16px; border-block: 1px solid rgba(194, 160, 94, .25); }
.price-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-main .num { font-size: clamp(44px, 9vw, 58px); color: #ffd98f; line-height: 1.05; }
.price-main .num.big { font-size: clamp(40px, 8vw, 50px); }
.price-main s.num { font-size: 21px; color: rgba(255, 255, 255, .38); margin-right: 6px; }
.price-main .cur { font-size: 20px; color: #ffd98f; font-weight: 700; align-self: flex-start; margin-top: .35em; }
.price-main i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .5); width: 100%; margin-top: 4px; letter-spacing: .06em; }
.price-sub { margin-top: 12px; font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.price-sub b { color: #fff; font-family: var(--serif); font-size: 19px; }
.price-scope { font-size: 11.5px; color: rgba(255, 255, 255, .42); }
.price-list { margin: 18px 0 22px; display: grid; gap: 11px; }
.price-list li {
  position: relative; padding-left: 20px;
  font-size: 13.8px; color: rgba(255, 255, 255, .82);
}
.price-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #3fc08b, #17925f 60%, #0b573a);
  box-shadow: inset -1px -2px 2px rgba(0, 0, 0, .3);
}
.price-list b { color: #fff; }
/* 退款承诺行（S8 专属部署版）：绿色勾选 + 描边底色，与普通圆点列表区分 */
.price-list li.li-guarantee {
  margin-top: 5px; padding: 11px 12px 11px 34px;
  border: 1px solid rgba(63, 192, 139, .35);
  border-radius: 12px;
  background: rgba(63, 192, 139, .09);
}
.price-list li.li-guarantee::before {
  content: "✓"; top: .5em; left: 12px;
  width: auto; height: auto; border-radius: 0;
  background: none; box-shadow: none;
  color: #3fc08b; font-weight: 800; font-size: 13.5px;
}
.price-note { font-size: 12px; color: rgba(255, 255, 255, .45); line-height: 1.7; }
.price-note b { color: rgba(255, 255, 255, .75); }
.price-anchor { opacity: .92; }

/* ============ S9 · 对比账本 ============ */
.ledger { display: grid; grid-template-columns: 1fr; gap: 18px; padding-top: 14px; position: relative; }
.ledger-col {
  border-radius: var(--r-card); padding: 24px 22px;
  background: #fbf8f0; border: 1px solid #e4ddc9;
  border-top: 4px solid var(--red-ink);
}
.ledger-green { border-top-color: var(--green-ink); }
.ledger-col header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ledger-col h3 { font-size: 16.5px; font-weight: 800; }
.ledger-red h3 { color: var(--red-ink); }
.ledger-green h3 { color: var(--green-ink); }
.ledger-col header .mono { font-size: 9px; color: var(--ink-3); letter-spacing: .22em; }
.ledger-col ul { display: grid; gap: 11px; }
.ledger-col li { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.ledger-col li span { color: var(--ink-2); }
.ledger-col li i { flex: 1; border-bottom: 2px dotted #d5cdb6; transform: translateY(-4px); }
.ledger-col li b { font-family: var(--serif); font-size: 15px; white-space: nowrap; }
.ledger-red li b { color: var(--red-ink); }
.ledger-green li b { color: var(--green-ink); }
.ledger-sum {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #e4ddc9;
  font-size: 13.5px; color: var(--ink-2);
}
.ledger-sum b { font-family: var(--serif); font-size: 20px; }
.ledger-red .ledger-sum b { color: var(--red-ink); }
.ledger-green .ledger-sum b { color: var(--green-ink); }

.ledger-delta {
  margin: 34px auto 0; text-align: center; max-width: 640px;
  font-size: clamp(16px, 3.4vw, 20px); line-height: 1.9; color: var(--ink);
}
.ledger-delta b { font-family: var(--serif); font-size: 1.5em; color: var(--green-ink); padding: 0 2px; }
.ledger-delta span { font-size: .82em; color: var(--ink-2); }

.pullquote {
  margin: 44px auto 0; max-width: 620px; text-align: center; position: relative;
  padding: 30px 18px 26px;
}
.pullquote::before, .pullquote::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 130px; height: 1px; background: var(--brass-dim);
}
.pullquote::before { top: 0; } .pullquote::after { bottom: 0; }
.pullquote p {
  font-family: var(--serif);
  font-size: clamp(16.5px, 3.2vw, 20px); line-height: 2.1; color: var(--ink);
}
.sec-paper .sec-footnote { text-align: center; }

/* ============ S10 · 信任 ============ */
.trust { display: grid; grid-template-columns: 1fr; gap: 13px; padding-top: 12px; }
.trust article {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(194, 160, 94, .2); border-radius: var(--r-card);
  padding: 22px 20px;
}
.trust h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 15.5px; font-weight: 800; color: #fff;
}
.trust h3 .ico { color: var(--brass); width: 20px; height: 20px; flex: none; }
.trust p { margin-top: 9px; font-size: 13.5px; color: rgba(255, 255, 255, .66); }
.trust p b { color: rgba(255, 255, 255, .92); }
.trust-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center;
  border: 1.5px dashed rgba(194, 160, 94, .45) !important;
  background: rgba(23, 179, 120, .06) !important;
  padding: 34px 20px !important; margin-bottom: 60px;
}
.trust-cta p { font-size: 15px; color: rgba(255, 255, 255, .85); }

/* ============ S11 · FAQ ============ */
.faq { display: grid; gap: 10px; padding-bottom: 26px; }
.faq details {
  background: #fbf8f0; border: 1px solid #e4ddc9; border-radius: 14px;
  overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px;
  font-size: 15px; font-weight: 700;
  transition: background .15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: #f6f1e3; }
.faq-plus {
  position: relative; flex: none; width: 15px; height: 15px;
}
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--brand); transition: transform .25s ease;
}
.faq-plus::before { width: 15px; height: 2px; transform: translate(-50%, -50%); }
.faq-plus::after { width: 2px; height: 15px; transform: translate(-50%, -50%); }
.faq details[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary { border-bottom: 1px dashed #e4ddc9; }
.faq details p { padding: 15px 20px 18px; font-size: 13.8px; color: var(--ink-2); }
.faq details p b { color: var(--ink); }

/* ============ 终局转化（纯企微，V1.1 移除留资表单） ============ */
.sec-final { padding-bottom: 30px; }
.final-grid { display: grid; grid-template-columns: 1fr; }
.final-wechat .sec-head { padding-top: 66px; margin-inline: auto; text-align: center; }
.qr {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: var(--chalk); border-radius: 20px;
  padding: 26px 26px 22px; width: fit-content; margin: 8px auto 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  border: 1px solid rgba(194, 160, 94, .3);
}
.qr img { width: 232px; height: 232px; border-radius: 8px; aspect-ratio: 1; object-fit: contain; } /* 防御非方图拉伸（当前占位图 574×593） */
.qr figcaption { text-align: center; }
.qr-hint { font-size: 13px; color: var(--ink); font-weight: 700; }
.qr-hint::before { content: "◎ "; color: var(--brand); } /* ⌖ 部分安卓字体缺字形会渲染豆腐块，◎ 全平台 CJK 字体覆盖 */
.final-tel {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  color: var(--green-ink); font-weight: 700; font-size: 14px; text-decoration: none;
  border: 1px solid var(--brass-dim); border-radius: 999px; padding: 7px 16px;
}
.final-tel:hover { background: rgba(15, 143, 95, .08); }
.final-worktime { margin-top: 18px; font-size: 10.5px; color: rgba(255, 255, 255, .4); letter-spacing: .18em; text-align: center; }

/* ============ 页脚 ============ */
.footer { background: var(--felt-950); color: rgba(255, 255, 255, .5); border-top: 1px solid rgba(194, 160, 94, .14); }
.footer .wrap { padding: 34px 22px 30px; display: grid; gap: 14px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 15px; }
.footer-brand span { color: rgba(255, 255, 255, .45); font-weight: 400; font-size: 12.5px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; }
.footer-links a {
  color: rgba(255, 255, 255, .6); text-decoration: none;
  padding: 9px 0; margin: -9px 0; /* 负边距抵消：视觉布局不变，触控区 22→40px */
}
.footer-links a:hover { color: var(--brass); }
.footer-meta { font-size: 11.5px; color: rgba(255, 255, 255, .32); }

/* ============ 悬浮 CTA（移动端） ============ */
.floatcta {
  position: fixed; left: 12px; right: 12px;
  bottom: 12px; /* 回退：不支持 env() 的旧内核 */
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateY(130%); opacity: 0;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.2, .9, .3, 1.1), opacity .3s;
}
.floatcta.show { transform: none; opacity: 1; pointer-events: auto; }
.floatcta-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(160deg, var(--brand-bright), var(--brand-deep));
  color: #fff; font-size: 15.5px; font-weight: 800; text-decoration: none;
  padding: 15px; border-radius: 15px;
  box-shadow: 0 14px 34px rgba(5, 19, 13, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.floatcta-btn .ico { width: 19px; height: 19px; }
.floatcta-btn::after { content: "›"; font-size: 19px; opacity: .7; }

/* ============ 返回顶部（滚动过首屏后出现） ============ */
.backtop {
  position: fixed; right: 14px;
  bottom: 80px; /* 回退：不支持 env() 的旧内核 */
  bottom: calc(80px + env(safe-area-inset-bottom)); /* 避让移动端悬浮 CTA */
  z-index: 55;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  padding: 0; border: 1px solid var(--brass-dim);
  background: rgba(7, 22, 15, .84);
  color: var(--brass);
  cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(2, 16, 11, .45);
  opacity: 0; transform: translateY(14px); visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility .3s, border-color .2s, color .2s;
}
.backtop.show { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.backtop:hover { color: #ffd98f; border-color: var(--brass); }
.backtop:active { transform: translateY(1px); }
.backtop svg { width: 20px; height: 20px; }

/* ============ 入场动画（html.js 门控：JS 失效时内容直接可见，不白屏） ============ */
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s ease var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
html.js.no-reveal .reveal { opacity: 1; transform: none; }

/* ============ 响应式 ============ */
@media (min-width: 480px) {
  .nav-tag { display: inline-block; }
}

@media (min-width: 720px) {
  .only-mobile { display: none; }
  .sec-head { padding-top: 92px; }
  .hero-inner { padding-top: 90px; }
  .hero-acts .btn-primary { padding: 16px 30px; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .pains { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .feats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 30px 40px; }
  .steps::before { display: none; }
  .step { padding-left: 0; padding-top: 66px; }
  .step-ball { top: 0; left: 0; }
  .prep { grid-template-columns: repeat(2, 1fr); }
  .ledger { grid-template-columns: 1fr 1fr; gap: 22px; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust-cta { grid-column: 1 / -1; }
  .floatcta { display: none; }
  .backtop { right: 22px; bottom: 26px; }
  .demo { gap: 56px; }
  .phone-customer { transform: rotate(-2deg); }
  .phone-admin { transform: rotate(2deg); }
  .phone:hover { transform: rotate(0) translateY(-8px); }
}

@media (min-width: 1024px) {
  .arch-row { grid-template-columns: 1fr auto 1.15fr auto 1fr; align-items: stretch; }
  .arch-link { flex-direction: column; }
  .arch-link i {
    width: 64px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--brass) 0 7px, transparent 7px 14px);
    animation: dash-h 1.4s linear infinite;
  }
  .arch-link .mono { writing-mode: vertical-rl; font-size: 9px; }
  .feats { grid-template-columns: repeat(4, 1fr); }
  .feat-more { grid-column: auto; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .prep { grid-template-columns: repeat(4, 1fr); }
  .pricing { grid-template-columns: 1.12fr .88fr; gap: 26px; align-items: start; }
  .trust { grid-template-columns: repeat(3, 1fr); }
  .trust-cta { grid-column: 1 / -1; }
  .hero-inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: 20px 48px; align-items: center; }
  .hero-inner > .hero-kicker,
  .hero-inner > .hero-title,
  .hero-inner > .hero-answer,
  .hero-inner > .hero-sub,
  .hero-inner > .hero-acts,
  .hero-inner > .hero-chips { grid-column: 1; }
  .hero-table { grid-column: 2; grid-row: 1 / span 6; margin: 0; max-width: none; }
  .hero-stats, .hero-footnote { grid-column: 1 / -1; }
  .hero-inner > .hero-kicker { margin-top: 20px; }
}

@media (min-width: 1360px) {
  .rail { display: flex; }
}

/* ============ 微信内/外双态（§8.4.1，JS 切换 body.in-wechat） ============ */
body.in-wechat .qr-hint.out-wechat { display: none; }
body.in-wechat .qr-hint.in-wechat { display: block; }
body:not(.in-wechat) .qr-hint.in-wechat { display: none; }

/* ============ 动效关照 ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-cueball, .hero-balls-idle, .arch-link i, .arch-vlink i,
  .hero-dim, .hero-beam, .hero-flash, .hero-lamp-glow, .hero-qr-halo,
  .hero-toast, .hero-chip-dot, .hero-chip .l-idle, .hero-chip .l-open { animation: none; }
  .btn, .feats li, .phone, .floatcta, .backtop, .ph-play { transition: none; }
}