/* ==========================================================================
   xFinCompass — Facebook 落地页样式（retail.html）

   设计基线（依据 skill 02-设计规范 · 营销着陆页档）：
   · 间距        严格 4px 网格，禁止非 4 倍数值
   · Hero H1     48–72px      · Section H2  36–48px
   · 正文        16–18px      · Caption     14px
   · Section 间距 移动 48–64 / 桌面 64–96
   · 中文行高    标题 1.3–1.4 / 正文 1.625–1.75
   · 中文字间距  必须为 0，禁止负值（负 tracking 会让 CJK 发挥拥挤）
   · 移动端点击目标 ≥ 44×44
   ========================================================================== */

:root{
  /* ---- 间距刻度（4px 网格） ---- */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px;  --s8:32px;  --s10:40px; --s12:48px; --s16:64px;
  --s20:80px; --s24:96px;

  /* ---- 字号刻度（营销着陆页档） ---- */
  --fs-h1:clamp(40px, 5.2vw, 56px);   /* Hero。规范区间 48–64；取 56 使 12 字中文标题在 696px 内容区单行 */
  --fs-h2:clamp(28px, 4.4vw, 44px);   /* Section，规范区间 36–48 */
  --fs-h3:20px;                        /* 卡片标题 */
  --fs-lead:18px;                      /* 引导文 */
  --fs-body:16px;                      /* 正文基准（营销页） */
  --fs-cap:14px;                       /* 辅助文字 */
  --fs-micro:12px;                     /* 法务细则、标签 */

  /* ---- 行高（中文） ---- */
  --lh-title:1.32;
  --lh-lead:1.7;
  --lh-body:1.75;

  /* ---- 颜色 ---- */
  --bg:#0A0B0D; --bg-elev:#131519; --bg-elev-2:#191C21;
  --line:#24272E; --line-soft:#1B1E24;
  --gold:var(--brand-gold,#E4B65C); --gold-bright:var(--brand-gold-bright,#F2CE83); --gold-dim:var(--brand-gold-dim,rgba(228,182,92,.12));
  --txt:#E9EBEE; --txt-2:#A7ADB6; --txt-3:#8D939B;
  --green:#16C784; --green-dim:rgba(22,199,132,.11);
  --red:#EA3943; --red-dim:rgba(234,57,67,.11);

  /* ---- 层次（阴影分级） ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.3);
  --sh-3:0 4px 12px rgba(0,0,0,.35);
  --sh-5:0 20px 48px rgba(0,0,0,.5);

  --radius:16px; --radius-sm:12px;
  --maxw:760px;      /* 直效转化页：窄栏单列，控制阅读路径 */
  --maxw-wide:1120px; /* 仅用于宽幅图 */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--s4)}
@media(min-width:768px){.wrap{padding:0 var(--s8)}}

/* Section 节奏：移动 64 / 桌面 96 —— 呼吸感的主要来源 */
section{padding:var(--s16) 0}
@media(min-width:768px){section{padding:var(--s24) 0}}

.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- 排版层级 ---------- */
h1,h2,h3{letter-spacing:0}          /* 中文禁止负字间距 */
h2{font-size:var(--fs-h2);line-height:var(--lh-title);font-weight:800;margin-bottom:var(--s4)}
h3{font-size:var(--fs-h3);line-height:1.4;font-weight:700}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--txt-2);max-width:56ch}
.sec-head{margin-bottom:var(--s12);text-align:center}
.sec-head .lead{margin-left:auto;margin-right:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-dim);border:1px solid rgba(228,182,92,.22);
  padding:var(--s2) var(--s4);border-radius:100px;margin-bottom:var(--s5);
}

/* ---------- CTA ----------
   规范：landing CTA 16–18px / Hero CTA 高度上限 48px / 单一标签全页重复。
   动效只用「流光 + 单次入场脉冲」，禁止闪烁抖动（低信任广告的视觉语言）。 */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s8);
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.62) 49%, transparent 58%) -60% 0 / 220% 100% no-repeat,
    linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#1A1204;font-weight:800;font-size:var(--fs-body);font-family:inherit;
  line-height:1.2;text-align:center;border:0;border-radius:var(--radius-sm);cursor:pointer;
  box-shadow:0 var(--s1) var(--s6) rgba(228,182,92,.26);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  animation:ctaSheen 2.2s ease-in-out infinite, ctaFloat 1.5s ease-in-out infinite;
  will-change:background-position,transform;
}
@keyframes ctaSheen{
  0%        {background-position:-60% 0, 0 0}
  34%, 100% {background-position:170% 0, 0 0}
}
@keyframes ctaFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-8px)}
}
.cta.pulse{animation:ctaSheen 2.2s ease-in-out infinite, ctaFloat 1.5s ease-in-out infinite, ctaPulse 1s ease-out 1}
@keyframes ctaPulse{
  0%  {box-shadow:0 4px 24px rgba(228,182,92,.26), 0 0 0 0 rgba(228,182,92,.55)}
  100%{box-shadow:0 4px 24px rgba(228,182,92,.26), 0 0 0 20px rgba(228,182,92,0)}
}
.cta:hover{box-shadow:0 var(--s3) var(--s10) rgba(228,182,92,.45);filter:brightness(1.08)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:3px solid var(--gold-bright);outline-offset:var(--s1)}
/* 移动端整宽（触达面积最大化），≥640px 收回自适应宽度 */
.cta-lg{width:100%;font-size:var(--fs-lead);padding:var(--s3) var(--s10)}
@media(min-width:640px){.cta-lg{width:auto;min-width:320px}}
.cta-note{font-size:var(--fs-cap);color:var(--txt-3);margin-top:var(--s3);line-height:1.6}

/* ---------- 风险逆转 ---------- */
.reversal{
  margin-left:auto;margin-right:auto;text-align:left;
  background:var(--green-dim);border:1px solid rgba(22,199,132,.26);
  border-left:3px solid var(--green);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:var(--s4) var(--s5);margin-top:var(--s6);max-width:560px;
}
.reversal p{font-size:var(--fs-body);color:var(--txt-2);line-height:var(--lh-lead)}
.reversal strong{color:var(--txt);font-weight:700}

/* ---------- 品牌条 ----------
   目标人群对杀猪盘高度警惕，「这是一家公司」的可见标识是准入级信任信号。
   资产未就位时显示带标注的占位块，不出现裂图。 */
.brandbar{border-bottom:1px solid var(--line-soft);background:rgba(10,11,13,.6)}
.brandbar .wrap{display:flex;align-items:center;gap:var(--s3);min-height:56px;flex-wrap:wrap}
.brandbar img{height:28px;width:auto;display:block}
.brandbar .wordmark{font-size:var(--fs-body);font-weight:800;color:var(--txt);letter-spacing:0}
.brandbar .tagline{font-size:var(--fs-micro);color:var(--txt-3);margin-left:auto;text-align:right;line-height:1.5}
@media(max-width:520px){.brandbar .tagline{display:none}}
.lang-host{margin-left:var(--s3);display:flex;align-items:center}
.lang-sel{font-family:inherit;font-size:var(--fs-cap);color:var(--txt-2);background:var(--bg-elev-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer}
.lang-sel:hover{color:var(--txt);border-color:var(--line-2)}
[dir="rtl"] .hero-grid,[dir="rtl"] .show-text,[dir="rtl"] .vs2 .side,[dir="rtl"] .qa{text-align:right}

/* 图片占位符：资产未就位时的可见标注，不影响布局 */
.ph{
  display:inline-flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--bg-elev),var(--bg-elev) 8px,var(--bg-elev-2) 8px,var(--bg-elev-2) 16px);
  border:1px dashed rgba(228,182,92,.45);border-radius:8px;
  color:var(--gold);font-family:var(--mono);font-size:var(--fs-micro);
  padding:var(--s2) var(--s3);
  /* 极窄屏可截断 —— 占位符本身不得撑破布局（320px 曾因 nowrap 溢出 21px） */
  min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- HERO ---------- */
.hero{
  padding:var(--s16) 0 var(--s16);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
@media(min-width:768px){.hero{padding:var(--s12) 0 0}}  /* 活动页：hero 底部不留白，让视觉物贴住折线被裁 */
.hero::before{
  content:"";position:absolute;inset:-40% 0 auto -14%;height:680px;
  background:radial-gradient(56% 50% at 26% 40%,rgba(228,182,92,.15),transparent 68%);
  pointer-events:none;
}
.hero .wrap{position:relative}
/* 直效转化页：hero 单列居中，视觉不分叉。产品图放正文之下而非并排 */
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s12);text-align:center;justify-items:center}
.hero-grid > div:first-child{max-width:740px}  /* 容 11 字标题单行；正文块另有 max-width 约束 */

.hook{font-size:var(--fs-h1);line-height:1.2;letter-spacing:0;font-weight:800}
.hook .dim{color:var(--txt-3);font-weight:800}
.hook .gold{
  display:block;
  background:linear-gradient(96deg,var(--gold-bright),var(--gold) 66%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--txt-2);margin:var(--s5) auto var(--s6);max-width:46ch}
.hero-sub strong{color:var(--txt);font-weight:700}

.offerbar{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:center;text-align:center;
  background:linear-gradient(96deg,rgba(228,182,92,.18),rgba(228,182,92,.04));
  border:1px solid rgba(228,182,92,.36);border-radius:var(--radius);
  padding:var(--s5) var(--s6);margin-bottom:var(--s6);
}
.offerbar .amt{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:0;color:var(--gold);line-height:1.2}
.offerbar .txt{font-size:var(--fs-cap);color:var(--txt-2);line-height:1.6}
.offerbar .txt b{color:var(--txt);font-weight:700}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-cap);color:var(--txt-2);
  background:var(--bg-elev);border:1px solid var(--line);padding:var(--s2) var(--s4);border-radius:100px;
}
.tick{width:16px;height:16px;flex-shrink:0;color:var(--green)}

/* ---------- 产品输出卡（层次：最高一级，用 sh-5） ---------- */
.demo{width:100%;max-width:560px;text-align:left;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-5)}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s5);background:var(--bg-elev-2);border-bottom:1px solid var(--line)}
.demo-dots{display:flex;gap:var(--s2)}
.demo-dots i{width:10px;height:10px;border-radius:50%;background:#2C3038;display:block}
.demo-label{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;color:var(--gold);background:var(--gold-dim);border:1px solid rgba(228,182,92,.24);padding:var(--s1) var(--s3);border-radius:100px}
.demo-body{padding:var(--s6)}
.demo-tick{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.demo-tick .sym{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--bg-elev-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-micro);color:var(--gold);flex-shrink:0}
.demo-tick .nm{font-weight:700;font-size:var(--fs-body);line-height:1.4}
.demo-tick .co{font-size:var(--fs-cap);color:var(--txt-3)}
.demo-tick .px{margin-left:auto;text-align:right}
.demo-tick .px b{font-family:var(--mono);font-size:var(--fs-lead);font-weight:700;display:block;line-height:1.3}
.demo-tick .px span{font-size:var(--fs-micro);color:var(--green);font-family:var(--mono)}
.demo-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s5)}
@media(max-width:420px){.demo-cols{grid-template-columns:1fr}}
.dcol{border-radius:var(--radius-sm);padding:var(--s4);border:1px solid var(--line)}
.dcol.bull{background:var(--green-dim);border-color:rgba(22,199,132,.24)}
.dcol.bear{background:var(--red-dim);border-color:rgba(234,57,67,.24)}
.dcol h4{font-size:var(--fs-micro);font-weight:800;letter-spacing:.06em;margin-bottom:var(--s3)}
.dcol.bull h4{color:var(--green)}
.dcol.bear h4{color:var(--red)}
.dcol li{list-style:none;font-size:var(--fs-cap);color:var(--txt-2);line-height:1.65;padding-left:var(--s3);position:relative;margin-bottom:var(--s2)}
.dcol li:last-child{margin-bottom:0}
.dcol li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%}
.dcol.bull li::before{background:var(--green)}
.dcol.bear li::before{background:var(--red)}
.demo-risk{background:var(--bg-elev-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s4)}
.demo-risk .rh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3)}
.demo-risk .rh span{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;color:var(--txt-3)}
.demo-risk .rh b{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--gold);line-height:1.2}
.rbar{height:6px;border-radius:100px;background:#22252B;overflow:hidden;margin-bottom:var(--s3)}
.rbar i{display:block;height:100%;width:64%;border-radius:100px;background:linear-gradient(90deg,var(--green),var(--gold) 62%,var(--red))}
.rmeta{display:flex;flex-wrap:wrap;gap:var(--s2)}
.rmeta span{font-size:var(--fs-micro);color:var(--txt-3);font-family:var(--mono);background:var(--bg-elev);border:1px solid var(--line-soft);padding:var(--s1) var(--s2);border-radius:6px}
.demo-foot{padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--bg-elev-2);font-size:var(--fs-micro);color:var(--txt-3);line-height:1.7}

/* ---------- 产品实景 ---------- */
.shots{display:grid;grid-template-columns:1fr;gap:var(--s6)}

.shot{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-3)}
.shot .frame{
  position:relative;aspect-ratio:16/11;background:var(--bg-elev-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.shot .frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.shot .cap{padding:var(--s5) var(--s6)}
.shot .cap h3{font-size:var(--fs-body);margin-bottom:var(--s2)}
.shot .cap p{font-size:var(--fs-cap);color:var(--txt-2);line-height:var(--lh-body)}

/* 宽幅单图（首屏下方产品全景） */
.shot-wide{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-5)}
.shot-wide .frame{position:relative;aspect-ratio:16/9;background:var(--bg-elev-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.shot-wide .frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.shot-wide .cap{padding:var(--s5) var(--s6);border-top:1px solid var(--line);font-size:var(--fs-cap);color:var(--txt-3);line-height:var(--lh-body)}

/* 「界面示意」角标 —— AI 生成的效果图不得宣称为真实截图 */
.illus{
  display:inline-block;font-size:var(--fs-micro);color:var(--txt-3);
  background:var(--bg-elev-2);border:1px solid var(--line);
  padding:2px var(--s2);border-radius:5px;margin-right:var(--s2);
  vertical-align:middle;
}

/* ---------- 使用流程三步 ---------- */
.steps3{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start}

/* 纵向序列：编号在左，内容在右 —— 读起来是「步骤」不是「三个并列功能」 */
.step3{display:flex;gap:var(--s5);align-items:flex-start;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);box-shadow:var(--sh-1)}
.step3 .n3{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;
  background:var(--gold-dim);border:1px solid rgba(228,182,92,.3);
  color:var(--gold);font-family:var(--mono);font-size:var(--fs-lead);font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.step3 h3{margin-bottom:var(--s2)}
.step3 p{font-size:var(--fs-cap);color:var(--txt-2);line-height:var(--lh-body)}

/* ---------- 双向锚定 ---------- */
.anchor{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:stretch}

.anc{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);box-shadow:var(--sh-1)}
.anc.us{background:linear-gradient(150deg,rgba(228,182,92,.11),rgba(228,182,92,.02));border-color:rgba(228,182,92,.38);box-shadow:var(--sh-3)}
.anc .who{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-bottom:var(--s3)}
.anc.us .who{color:var(--gold)}
.anc .price{font-family:var(--mono);font-size:28px;font-weight:800;letter-spacing:0;margin-bottom:var(--s3);line-height:1.25}
.anc .price.hi{color:var(--red)}
.anc .price.lo{color:var(--txt-3)}
.anc .price.us{color:var(--gold);font-size:24px}
.anc p{font-size:var(--fs-cap);color:var(--txt-2);line-height:var(--lh-body)}
.anc-vs{display:flex;align-items:center;justify-content:center;font-size:var(--fs-cap);font-weight:800;color:var(--txt-3);letter-spacing:.1em}
@media(max-width:859px){.anc-vs{display:none}}

/* ---------- 硬事实卡 ---------- */
/* 单列：直效页强制线性阅读，不给用户左右选择 */
.facts{display:grid;grid-template-columns:1fr;gap:var(--s5)}
.facts.quad{grid-template-columns:1fr}
.fact{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s8);position:relative;overflow:hidden;box-shadow:var(--sh-1)}
.fact::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gold);opacity:.5}
.fact .no{font-family:var(--mono);font-size:var(--fs-micro);font-weight:800;color:var(--gold);letter-spacing:.1em;margin-bottom:var(--s3)}
.fact h3{margin-bottom:var(--s3)}
.fact p{font-size:var(--fs-cap);color:var(--txt-2);line-height:var(--lh-body)}
.fact p strong{color:var(--txt);font-weight:700}
.fact code{font-family:var(--mono);font-size:var(--fs-micro);color:var(--gold);background:var(--gold-dim);padding:2px var(--s2);border-radius:4px}

/* ---------- 规格表 ---------- */
.spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-cap);background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.spec th{text-align:left;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);font-weight:700;padding:var(--s4) var(--s5);background:var(--bg-elev-2);border-bottom:1px solid var(--line);white-space:nowrap}
.spec td{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft);color:var(--txt-2);white-space:nowrap}
.spec tr:last-child td{border-bottom:0}
.spec td:first-child{color:var(--txt);font-weight:700}
.spec td.n{font-family:var(--mono);color:var(--gold);font-weight:700}

/* ---------- 权威来源 ---------- */
.sources{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s8);box-shadow:var(--sh-1)}
.sources .h{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-bottom:var(--s4)}
.srcs{display:flex;flex-wrap:wrap;gap:var(--s3)}
.src{display:inline-flex;flex-direction:column;gap:2px;background:var(--bg-elev-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s3) var(--s5)}
.src b{font-size:var(--fs-cap);color:var(--txt);font-weight:700;letter-spacing:0}
.src span{font-size:var(--fs-micro);color:var(--txt-3)}

/* ---------- 免费 / 计费 ---------- */
.pricing{display:grid;grid-template-columns:1fr;gap:var(--s5)}

.pcard{border-radius:var(--radius);padding:var(--s8);border:1px solid var(--line);background:var(--bg-elev);box-shadow:var(--sh-1)}
.pcard.free{background:var(--green-dim);border-color:rgba(22,199,132,.28)}
.pcard.paid{background:linear-gradient(150deg,rgba(228,182,92,.1),rgba(228,182,92,.02));border-color:rgba(228,182,92,.3);box-shadow:var(--sh-3)}
.pcard .tag{font-size:var(--fs-micro);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s3);display:block}
.pcard.free .tag{color:var(--green)}
.pcard.paid .tag{color:var(--gold)}
.pcard h3{margin-bottom:var(--s3)}
.pcard p{font-size:var(--fs-cap);color:var(--txt-2);margin-bottom:var(--s4);line-height:var(--lh-body)}
.pcard li{list-style:none;font-size:var(--fs-cap);color:var(--txt-2);padding-left:var(--s5);position:relative;margin-bottom:var(--s3);line-height:var(--lh-body)}
.pcard li:last-child{margin-bottom:0}
.pcard li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%}
.pcard.free li::before{background:var(--green)}
.pcard.paid li::before{background:var(--gold)}

/* ---------- 用户证言（无真实数据时整块移除，见 testimonials.js） ---------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--s5)}
.tcard{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s8);box-shadow:var(--sh-1)}
.tcard blockquote{font-size:var(--fs-lead);color:var(--txt);line-height:var(--lh-lead);margin-bottom:var(--s5)}
.tcard blockquote::before{content:"「";color:var(--gold)}
.tcard blockquote::after{content:"」";color:var(--gold)}
.tcard figcaption{display:flex;flex-direction:column;gap:2px}
.tcard figcaption b{font-size:var(--fs-cap);color:var(--txt);font-weight:700}
.tcard figcaption span{font-size:var(--fs-cap);color:var(--txt-3)}
.tcard .tvs{margin-top:var(--s2);align-self:flex-start;font-size:var(--fs-micro);color:var(--gold);background:var(--gold-dim);border:1px solid rgba(228,182,92,.24);padding:var(--s1) var(--s3);border-radius:100px}

/* ---------- 活动 ---------- */
.camp{
  background:linear-gradient(146deg,rgba(228,182,92,.12),rgba(228,182,92,.02) 58%),var(--bg-elev);
  border:1px solid rgba(228,182,92,.3);border-radius:var(--radius);padding:var(--s8);box-shadow:var(--sh-3);
}
@media(min-width:768px){.camp{padding:var(--s10)}}
.camp h3{margin-bottom:var(--s2)}
.camp .sub{font-size:var(--fs-cap);color:var(--txt-2);margin-bottom:var(--s6);line-height:var(--lh-body)}
.badge-live{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-micro);font-weight:700;color:var(--green);background:var(--green-dim);border:1px solid rgba(22,199,132,.3);padding:var(--s1) var(--s3);border-radius:100px;margin-bottom:var(--s4)}
.badge-live i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
.camp-2{display:grid;grid-template-columns:1fr;gap:var(--s6)}

.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:var(--s10);margin-bottom:var(--s4);font-size:var(--fs-cap);color:var(--txt-2);line-height:var(--lh-body)}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:8px;background:var(--gold-dim);border:1px solid rgba(228,182,92,.26);color:var(--gold);font-size:var(--fs-micro);font-weight:800;display:flex;align-items:center;justify-content:center}
.prize{display:flex;flex-direction:column;gap:var(--s2)}
.rung{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2) var(--s4);background:var(--bg-elev-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s3) var(--s4);min-height:48px}
.rung.top{background:linear-gradient(96deg,rgba(228,182,92,.17),rgba(228,182,92,.05));border-color:rgba(228,182,92,.38)}
.rung .r{font-size:var(--fs-cap);color:var(--txt-2);flex-shrink:0}
.rung.top .r{color:var(--txt);font-weight:700}
.rung .p{font-size:var(--fs-cap);color:var(--gold);font-weight:700;text-align:right;line-height:1.5;min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.notice{background:var(--bg-elev);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:var(--s6);margin-top:var(--s5)}
.notice h3{font-size:var(--fs-body);margin-bottom:var(--s4)}
.notice ol{margin:0 0 0 var(--s5)}
.notice li{font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--txt-2);margin-bottom:var(--s3)}
.notice li:last-child{margin-bottom:0}
.notice strong{color:var(--txt);font-weight:700}


/* ==========================================================================
   活动页组件（v2）—— 依据五份实测调研
   · 钱＝视觉系统：大数字用展示字号（真实金融活动页共性）
   · offer 是叠在产品之上的徽章层，不是页面脊椎
   · 状态化进度条 + 第一步已完成（Nunes & Drèze 2006 实地实验 19%→34%）
   ========================================================================== */

/* ---- 大数字（钱＝视觉系统） ---- */
.bignum{
  display:flex;flex-direction:column;align-items:center;gap:var(--s1);
  margin:var(--s5) 0;
}
.bignum .n{
  font-family:var(--mono);font-weight:800;letter-spacing:-.01em;line-height:1;
  font-size:clamp(44px,9vw,84px);
  background:linear-gradient(96deg,var(--gold-bright),var(--gold) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bignum .n em{font-family:var(--font);font-style:normal;font-size:.62em;margin-left:.06em;letter-spacing:0}
.bignum .u{font-size:var(--fs-lead);font-weight:700;color:var(--gold);margin-top:calc(var(--s1) * -1)}
.bignum .d{font-size:var(--fs-body);color:var(--txt2);max-width:34ch;text-align:center;line-height:var(--lh-lead)}

/* ---- 徽章层 ---- */
.badges{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-bottom:var(--s5)}
.badge{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-cap);font-weight:700;color:var(--gold);
  background:var(--gold-dim);border:1px solid rgba(228,182,92,.32);
  padding:var(--s2) var(--s4);border-radius:100px;
}
.badge.plain{color:var(--gold);background:transparent;border-color:rgba(228,182,92,.28)}

/* ---- 状态化进度条 ---- */
.track{
  display:flex;align-items:flex-start;gap:0;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5) var(--s4);margin:var(--s6) auto;max-width:560px;
}
.tstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s2);position:relative;text-align:center}
.tstep .dot{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;z-index:1;
  border:2px solid var(--line);background:var(--bg-elev-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:800;color:var(--txt3);
}
.tstep.done .dot{background:var(--green);border-color:var(--green);color:#04150D}
.tstep.done .lbl{color:var(--txt)}
.tstep .lbl{font-size:var(--fs-micro);color:var(--txt3);line-height:1.5;max-width:12ch}
/* 连接线：画在圆点垂直中心 */
.tstep::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line)}
.tstep:first-child::before{display:none}
.tstep.done::before{background:var(--green)}
.track-why{font-size:var(--fs-cap);color:var(--txt3);text-align:center;margin-top:var(--s3);line-height:var(--lh-body)}
.track-why strong{color:var(--txt2)}

/* ---- 首屏视觉物：大图，被折线裁切 ---- */
.heroshot{
  width:100%;max-width:900px;margin:var(--s6) auto 0;
  border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;
  border:1px solid var(--line);border-bottom:0;
  box-shadow:0 -8px 60px rgba(0,0,0,.6);
  /* 高度大于剩余视口 → 被折线裁切。裁切即滚动暗示（十站 8/10 如此） */
  aspect-ratio:16/10;
}
.heroshot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* ---- 合规提示（双层的上层，贴 CTA） ---- */
.complybar{
  display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:center;
  font-size:var(--fs-micro);color:var(--txt3);line-height:1.6;
  border:1px solid var(--line);border-radius:100px;padding:var(--s2) var(--s4);
  margin-top:var(--s4);
}
.complybar b{color:var(--txt2);font-weight:600}

/* ---- 奖励阶梯（活动区）---- */
.tiers{display:flex;flex-direction:column;gap:var(--s2)}
.tier{
  display:flex;align-items:center;gap:var(--s4);
  background:var(--bg-elev-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--s4) var(--s5);min-height:56px;
}
.tier.top{background:linear-gradient(96deg,rgba(228,182,92,.18),rgba(228,182,92,.05));border-color:rgba(228,182,92,.4)}
.tier .rk{font-size:var(--fs-cap);color:var(--txt2);flex-shrink:0;min-width:5.5em}
.tier.top .rk{color:var(--txt);font-weight:750}
.tier .pz{font-size:var(--fs-body);color:var(--gold);font-weight:700;text-align:right;margin-left:auto;line-height:1.45}


/* ==========================================================================
   认知阶梯组件（v3）
   顺序服从股民落地后的提问顺序，不服从我们的表达顺序。
   每一步配图 —— 图承载结构，文字承载论断。
   ========================================================================== */

/* 场景图 / 说明图：宽幅，带说明 */
.figure{margin:var(--s8) 0 0}
.figure .fbox{
  width:100%;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-elev-2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-3);
}
.figure .fbox img{width:100%;height:100%;object-fit:cover;display:block}
.figure figcaption{
  margin-top:var(--s3);font-size:var(--fs-cap);color:var(--txt-3);
  line-height:var(--lh-body);text-align:center;
}
.figure figcaption b{color:var(--txt-2);font-weight:600}
.figure.r16-9 .fbox{aspect-ratio:16/9}
.figure.r4-3 .fbox{aspect-ratio:4/3}
.figure.r21-9 .fbox{aspect-ratio:21/9}

/* 工作量对比：左他自己 / 右交给它 */
.vs2{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s6)}
@media(min-width:760px){.vs2{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.vs2 .side{border-radius:var(--radius);padding:var(--s6);border:1px solid var(--line);background:var(--bg-elev)}
.vs2 .side.you{border-left:3px solid var(--red)}
.vs2 .side.it{border-left:3px solid var(--green);background:linear-gradient(150deg,rgba(22,199,132,.07),transparent 60%),var(--bg-elev)}
.vs2 .side h4{font-size:var(--fs-body);margin-bottom:var(--s4)}
.vs2 .side.you h4{color:var(--red)}
.vs2 .side.it h4{color:var(--green)}
.vs2 .side li{list-style:none;font-size:var(--fs-cap);color:var(--txt-2);line-height:var(--lh-body);margin-bottom:var(--s3);padding-left:var(--s5);position:relative}
.vs2 .side li:last-child{margin-bottom:0}
.vs2 .side li::before{position:absolute;left:0;font-family:var(--mono);font-size:11px}
.vs2 .side.you li::before{content:"×";color:var(--red)}
.vs2 .side.it li::before{content:"✓";color:var(--green)}
.vs2 .cost{margin-top:var(--s5);padding-top:var(--s4);border-top:1px dashed var(--line);font-family:var(--mono);font-size:var(--fs-lead);font-weight:800}
.vs2 .side.you .cost{color:var(--red)}
.vs2 .side.it .cost{color:var(--green)}

/* 分析输出标注图：图 + 右侧标注列表 */
.annot{display:grid;grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s6)}
.annot ol{counter-reset:a;margin:0;padding:0}
.annot li{
  counter-increment:a;list-style:none;position:relative;padding-left:var(--s10);
  margin-bottom:var(--s4);font-size:var(--fs-cap);color:var(--txt-2);line-height:var(--lh-body);
}
.annot li:last-child{margin-bottom:0}
.annot li::before{
  content:counter(a);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:#1A1204;font-family:var(--mono);font-size:var(--fs-micro);font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.annot li b{color:var(--txt);display:block;margin-bottom:2px}


/* ==========================================================================
   能力橱窗（v4）—— 一个标题 + 一句注释 + 一张大图，几乎不用读
   图占主导（信息承载型），交替左右，移动端图在上。
   ========================================================================== */
.showcase{display:flex;flex-direction:column;gap:var(--s20)}
@media(min-width:768px){.showcase{gap:var(--s24)}}  /* 拉开呼吸空间 */
.show{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start}
@media(min-width:860px){
  .show{grid-template-columns:1.1fr .9fr;gap:var(--s16)}
  .show.flip .show-media{order:2}
  .show.flip .show-text{order:1}
}
.show-media{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-elev-2);box-shadow:var(--sh-5);aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
}
.show-media img{width:100%;height:100%;object-fit:cover;display:block}
.show-text .kicker{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);font-weight:800;
  letter-spacing:.08em;color:var(--gold);background:var(--gold-dim);
  border:1px solid rgba(228,182,92,.3);padding:var(--s1) var(--s3);border-radius:6px;margin-bottom:var(--s4);
}
.show-text h3{font-size:clamp(22px,3.2vw,30px);line-height:1.3;font-weight:800;margin-bottom:var(--s3);letter-spacing:0}
.show-text p{font-size:var(--fs-lead);color:var(--txt-2);line-height:var(--lh-lead);margin:0}
.show-text p strong{color:var(--txt);font-weight:650}
.show-text .note{font-size:var(--fs-cap);color:var(--txt-3);margin-top:var(--s3);line-height:var(--lh-body)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr;gap:var(--s4)}

.qa{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);box-shadow:var(--sh-1)}
.qa h3{font-size:var(--fs-body);margin-bottom:var(--s3);display:flex;gap:var(--s3);align-items:flex-start}
.qa h3 em{color:var(--gold);font-style:normal;font-weight:800;flex-shrink:0}
.qa p{font-size:var(--fs-cap);color:var(--txt-2);line-height:var(--lh-body)}
.qa strong{color:var(--txt);font-weight:700}

/* ---------- 最终 CTA ---------- */
.final{
  background:linear-gradient(146deg,rgba(228,182,92,.12),transparent 62%),var(--bg-elev);
  border:1px solid rgba(228,182,92,.26);border-radius:var(--radius);
  padding:var(--s16) var(--s6);text-align:center;box-shadow:var(--sh-3);
}
@media(min-width:768px){.final{padding:var(--s20) var(--s10)}}
.final .lead{margin:var(--s4) auto var(--s8)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);background:#08090B;padding:var(--s16) 0 var(--s12)}
.legal{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);margin-bottom:var(--s5)}
.legal h3{color:var(--txt);font-size:var(--fs-body);margin-bottom:var(--s3)}
/* 合规正文对比度须达 WCAG AA，禁止做成灰色小字 */
.legal p,.legal li{font-size:var(--fs-cap);line-height:var(--lh-body);color:#B4BAC2}
.legal p+p{margin-top:var(--s3)}
.legal ol{margin:var(--s3) 0 0 var(--s5)}
.legal li{margin-bottom:var(--s2)}
.legal strong{color:var(--txt);font-weight:700}
.hl{border-left:3px solid var(--gold);background:var(--gold-dim);padding:var(--s4) var(--s5);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:var(--s4)}
.hl p{color:#D7DBE1}

/* 可折叠合规块：原生 <details>，内容始终在 DOM（爬虫与法务留证可见），
   summary 保留核心要点，使关键事实在折叠态下依然 clear and conspicuous */
.legal details{margin:0}
.legal summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s1) 0;user-select:none;min-height:44px}
.legal summary::-webkit-details-marker{display:none}
.legal summary:focus-visible{outline:2px solid var(--gold);outline-offset:var(--s1);border-radius:4px}
.legal summary .chev{width:18px;height:18px;flex-shrink:0;margin-top:var(--s1);color:var(--gold);transition:transform .18s ease}
.legal details[open] summary .chev{transform:rotate(90deg)}
.legal summary .stitle{font-size:var(--fs-body);font-weight:700;color:var(--txt);line-height:1.45}
.legal summary .skey{display:block;font-size:var(--fs-cap);color:#B4BAC2;font-weight:400;margin-top:var(--s1);line-height:var(--lh-body)}
.legal summary .more{font-size:var(--fs-micro);color:var(--gold);white-space:nowrap;margin-left:auto;padding-left:var(--s3);align-self:center}
.legal details[open] summary .more{opacity:.5}
.legal details > ol{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line-soft)}

.foot-bottom{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;padding-top:var(--s5);border-top:1px solid var(--line-soft);font-size:var(--fs-cap);color:var(--txt-3)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s1);margin:calc(var(--s3) * -1) 0}
.foot-links a{color:var(--txt-2);padding:var(--s3);display:inline-flex;align-items:center;min-height:44px}
.foot-links a:hover{color:var(--gold)}

/* ---------- 移动吸底 CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(10,11,13,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(115%);transition:transform .28s ease;
}
.sticky.show{transform:translateY(0)}
.sticky .cta{width:100%}
@media(min-width:861px){.sticky{display:none}}

/* ---------- 移动端首屏压缩 ----------
   目标：让视觉物在 844px 视口内被折线裁切（裁切即滚动暗示）。
   手段是收间距，不是砍内容 —— 内容量是中文用户的可信度信号。 */
@media(max-width:640px){
  .hero{padding:var(--s6) 0 0}
  .hook{font-size:clamp(30px,8.2vw,40px)}   /* 让 9 字标题单行不断「吗」孤字 */
  .bignum{margin:var(--s4) 0}
  .bignum .n{font-size:clamp(40px,11vw,56px)}
  .badges{margin-bottom:var(--s3);gap:var(--s1)}
  .badge{padding:var(--s1) var(--s3);font-size:var(--fs-micro)}
  .cta-note{margin-top:var(--s2)}
  .complybar{margin-top:var(--s3);padding:var(--s2) var(--s3)}
  .heroshot{margin-top:var(--s4)}
  .hero-grid{gap:var(--s6)}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}