/* ============================================================
   小百灵AI · 官网样式
   深色科技风 + 品牌紫，与 App 端视觉一致
   ============================================================ */

:root{
  --bg:        #08090f;
  --bg-2:      #0c0e15;
  --panel:     #12141d;
  --panel-2:   #171a25;
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);
  --txt:       #eef0f6;
  --txt-2:     #a6abbb;
  --txt-3:     #6b7183;
  --brand:     #8b5cf6;
  --brand-2:   #632BC0;
  --brand-3:   #a78bfa;
  --brand-4:   #c9b6ff;
  --ok:        #34d399;
  --radius:    16px;
  --radius-lg: 22px;
  --shadow:    0 18px 50px rgba(0,0,0,.45);
  --glow:      0 0 0 1px rgba(139,92,246,.28), 0 12px 42px rgba(99,43,192,.38);
  --maxw:      1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
              "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:104px 0;position:relative}
.section--tight{padding:76px 0}

/* ---------- 标题 ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.08em;font-weight:600;
  color:var(--brand-3);
  background:rgba(139,92,246,.1);
  border:1px solid rgba(139,92,246,.22);
  padding:6px 14px;border-radius:999px;
  margin-bottom:20px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-3);
  box-shadow:0 0 10px var(--brand-3)}
h1,h2,h3,h4{margin:0;line-height:1.22;font-weight:800;letter-spacing:-.015em}
h2.sec-title{font-size:clamp(26px,4vw,40px);margin-bottom:14px}
.sec-sub{color:var(--txt-2);font-size:clamp(15px,1.6vw,17px);max-width:660px;margin:0 0 8px}
.sec-head{margin-bottom:52px}
.sec-head--center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head--center .sec-sub{margin-left:auto;margin-right:auto}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:12px;font-weight:700;font-size:15px;
  white-space:nowrap;transition:transform .18s ease,box-shadow .22s ease,
    background .22s ease,border-color .22s ease;
}
.btn svg{flex:0 0 auto}
.btn-primary{
  background:linear-gradient(135deg,#8b5cf6,#632BC0);
  color:#fff;box-shadow:0 8px 26px rgba(99,43,192,.45);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(139,92,246,.55)}
.btn-ghost{
  background:rgba(255,255,255,.045);color:var(--txt);
  border:1px solid var(--line-2);
}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
.btn-lg{padding:16px 34px;font-size:16.5px;border-radius:14px}
.btn-block{width:100%}

/* ---------- 顶栏 ---------- */
header.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(8,9,15,.72);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
header.nav.scrolled{border-bottom-color:var(--line);background:rgba(8,9,15,.9)}
.nav-inner{display:flex;align-items:center;gap:24px;height:78px}
.nav-logo{display:flex;align-items:center;flex:0 0 auto;transition:transform .25s ease}
/* 横版锁合比例 3.015:1（「小百灵AI」比原来的「百灵AI」多一个字，画布变宽）。
   给高度就等于给宽度：48px 高 → 约 145px 宽。
   前提：logo-white.svg 根标签的 width/height 必须按 viewBox 真实比例写，
   否则浏览器按 1:1 算固有比例，会把横版塞进正方形里上下留白，看着特别小。 */
.nav-logo img{height:48px;width:auto;display:block}
.nav-logo:hover{transform:scale(1.03)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{
  padding:9px 14px;border-radius:9px;font-size:14.5px;color:var(--txt-2);
  font-weight:500;transition:color .18s,background .18s;
}
.nav-links a:hover{color:var(--txt);background:rgba(255,255,255,.055)}
.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-cta .btn{padding:10px 20px;font-size:14.5px}
.nav-burger{display:none;width:42px;height:42px;border-radius:10px;
  align-items:center;justify-content:center;border:1px solid var(--line-2)}
.nav-burger span{display:block;width:17px;height:1.6px;background:var(--txt);position:relative}
.nav-burger span::before,.nav-burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--txt)}
.nav-burger span::before{top:-5.5px}
.nav-burger span::after{top:5.5px}
.mobile-menu{
  display:none;flex-direction:column;gap:2px;
  padding:12px 22px 20px;border-bottom:1px solid var(--line);
  background:rgba(8,9,15,.97);
}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 6px;font-size:15.5px;color:var(--txt-2);border-radius:8px}
.mobile-menu a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.mobile-menu .btn{margin-top:10px}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:86px 0 96px;
}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:760px;
  background:
    radial-gradient(46% 46% at 22% 30%,rgba(139,92,246,.30),transparent 62%),
    radial-gradient(40% 40% at 78% 18%,rgba(99,43,192,.30),transparent 66%),
    radial-gradient(34% 34% at 60% 78%,rgba(167,139,250,.14),transparent 70%);
  filter:blur(12px);pointer-events:none;
}
.hero-grid{
  position:relative;display:grid;grid-template-columns:1.06fr .94fr;
  grid-template-rows:auto 1fr;
  /* 按钮单独一格：桌面版钉回左栏 copy 下方；≤1000px 变单列排到手机图之后 */
  grid-template-areas:"copy visual" "actions visual";
  gap:0 56px;align-items:center;
}
.hero-copy{grid-area:copy}
.hero-visual{grid-area:visual}
.hero-actions{grid-area:actions;align-self:start}
/* 关键：grid 子项默认 min-width:auto 会被内部固定宽度内容撑开，
   在窄屏会导致正文超出视口。这里强制允许收缩。 */
.hero-grid > *{min-width:0}
.hero h1{font-size:clamp(31px,4.5vw,50px);margin-bottom:20px;letter-spacing:-.02em}
.hero h1 .hl{
  background:linear-gradient(120deg,#c9b6ff,#8b5cf6 45%,#a78bfa);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{
  font-size:clamp(16px,1.85vw,18.5px);color:var(--txt-2);
  max-width:560px;margin-bottom:14px;
}
.hero-lead b{color:var(--txt);font-weight:600}
.hero-note{color:var(--txt-3);font-size:14px;margin-bottom:30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Hero 痛点条（直击传统实体老板） */
.hero-pain{
  margin-top:30px;padding:18px 20px 16px;border-radius:16px;
  background:linear-gradient(150deg,rgba(239,68,68,.075),rgba(255,255,255,.014) 62%);
  border:1px solid rgba(239,68,68,.2);
  position:relative;overflow:hidden;
}
.hp-title{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:#fca5a5;margin-bottom:13px;
}
.hp-warn{
  flex:0 0 auto;width:19px;height:19px;border-radius:6px;
  background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.34);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#f87171;
  animation:warnPulse 2.4s ease-in-out infinite;
}
@keyframes warnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}
  55%{box-shadow:0 0 0 7px rgba(239,68,68,0)}
}
.hp-list{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;
}
.hp-list li{
  font-size:13.5px;color:var(--txt-2);line-height:1.55;
  display:flex;gap:8px;align-items:flex-start;
}
.hp-list li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;margin-top:7px;
  background:#f87171;box-shadow:0 0 8px rgba(248,113,113,.85);
}
.hp-list li i{font-style:normal;color:#fca5a5;font-weight:700}
.hp-foot{
  margin:13px 0 0;padding-top:12px;border-top:1px dashed rgba(255,255,255,.09);
  font-size:13px;color:var(--txt-3);
}
.hp-foot b{color:var(--brand-4)}
@media (max-width:560px){ .hp-list{grid-template-columns:1fr} }

/* ---------- 手机 mockup ---------- */
.phone-stage{display:flex;justify-content:center;position:relative}
.phone-stage::after{
  content:"";position:absolute;width:78%;height:78%;top:11%;left:11%;
  background:radial-gradient(circle,rgba(139,92,246,.34),transparent 68%);
  filter:blur(48px);z-index:0;
}
.phone{
  position:relative;z-index:1;
  width:306px;border-radius:38px;padding:11px;
  background:linear-gradient(160deg,#2a2d3d,#14161f);
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.07),
             0 22px 70px rgba(99,43,192,.34);
}
.phone-screen{
  border-radius:29px;overflow:hidden;background:#0a0c11;
  height:596px;position:relative;display:flex;flex-direction:column;
}
.phone-notch{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:76px;height:6px;border-radius:99px;background:#000;z-index:6;
}
/* 状态栏 */
.pstatus{
  height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;font-size:10.5px;color:#9aa0b0;font-weight:600;
}
/* 应用头 */
.pbar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:4px 14px 11px;border-bottom:1px solid rgba(255,255,255,.06);
}
.pbar img{width:23px;height:23px;border-radius:7px}
.pbar b{font-size:13px;font-weight:700}
.pbar span{margin-left:auto;font-size:10px;color:var(--txt-3);
  border:1px solid var(--line);padding:2px 7px;border-radius:99px}
/* 对话流 */
.pchat{flex:1;padding:14px 13px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.pmsg{display:flex;gap:7px;max-width:100%}
.pmsg .av{
  flex:0 0 auto;width:21px;height:21px;border-radius:6px;
  background:linear-gradient(135deg,#8b5cf6,#632BC0);
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:800;
}
.pbubble{
  font-size:11px;line-height:1.62;padding:8px 11px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);color:#cdd2e0;
  border-top-left-radius:4px;
}
.pmsg.me{justify-content:flex-end}
.pmsg.me .pbubble{
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  border-color:transparent;color:#fff;border-radius:11px;border-bottom-right-radius:4px;
  max-width:82%;
}
.ptask{
  background:linear-gradient(150deg,rgba(139,92,246,.14),rgba(99,43,192,.08));
  border:1px solid rgba(139,92,246,.28);border-radius:12px;padding:10px 11px;
  font-size:10.5px;color:#d7dcea;
}
.ptask .t{display:flex;align-items:center;gap:6px;font-weight:700;
  color:#e9e2ff;margin-bottom:7px;font-size:11px}
.ptask .t i{width:5px;height:5px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px var(--ok);display:block}
.ptask ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.ptask li{display:flex;align-items:center;gap:6px;color:#b9c0d2}
.ptask li em{font-style:normal;color:var(--ok);font-size:9px}
.pinput{
  flex:0 0 auto;margin:0 12px 12px;display:flex;align-items:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;font-size:11px;color:var(--txt-3);
}
.pinput .send{margin-left:auto;width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,#8b5cf6,#632BC0);
  display:flex;align-items:center;justify-content:center}
/* 底部标签栏 */
.ptab{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.06);padding:7px 4px 9px;background:#0b0d14;
}
.ptab div{text-align:center;font-size:9px;color:var(--txt-3);
  display:flex;flex-direction:column;align-items:center;gap:3px}
.ptab div.on{color:var(--brand-3)}
.ptab svg{width:15px;height:15px}

/* 浮动卡 */
.float-card{
  position:absolute;z-index:3;
  background:rgba(20,23,33,.9);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);border-radius:14px;
  padding:11px 14px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;
  animation:floaty 5.5s ease-in-out infinite;
}
.float-card .fc-i{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(99,43,192,.22));
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(139,92,246,.3);
}
.float-card b{display:block;font-size:12.5px;font-weight:700;line-height:1.3}
.float-card span{font-size:10.5px;color:var(--txt-3)}
.fc-1{top:56px;left:-14px}
.fc-2{bottom:104px;right:-18px;animation-delay:1.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- 通用卡片 ---------- */
.grid{display:grid;gap:18px}
.grid > *{min-width:0}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:linear-gradient(168deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.34);
  box-shadow:0 16px 40px rgba(0,0,0,.4)}
.card .ic{
  width:44px;height:44px;border-radius:12px;margin-bottom:16px;
  background:linear-gradient(140deg,rgba(139,92,246,.2),rgba(99,43,192,.12));
  border:1px solid rgba(139,92,246,.26);
  display:flex;align-items:center;justify-content:center;
}
.card .ic svg{width:21px;height:21px;stroke:var(--brand-3);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:17px;margin-bottom:9px}
.card p{margin:0;color:var(--txt-2);font-size:14.5px;line-height:1.72}

/* ---------- 痛点 ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pain{
  display:flex;gap:14px;padding:20px 22px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
}
.pain .x{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.26);
  display:flex;align-items:center;justify-content:center;
  color:#f87171;font-size:13px;font-weight:800;
}
.pain b{display:block;font-size:15px;margin-bottom:4px;font-weight:700}
.pain p{margin:0;font-size:13.5px;color:var(--txt-3);line-height:1.65}

/* ---------- 流程 ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.step{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px 18px;position:relative;
}
.step .n{
  font-size:12px;font-weight:800;color:var(--brand-3);
  letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.step .n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,
  rgba(139,92,246,.45),transparent)}
.step h4{font-size:15.5px;margin-bottom:7px}
.step p{margin:0;font-size:13px;color:var(--txt-3);line-height:1.65}
.step .tagline{
  margin-top:12px;font-size:11.5px;color:var(--brand-4);
  background:rgba(139,92,246,.1);border-radius:7px;padding:5px 9px;
  display:inline-block;border:1px solid rgba(139,92,246,.2);
}

/* ---------- 行业 ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ind{
  display:flex;align-items:center;gap:10px;padding:15px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  font-size:14px;font-weight:600;transition:border-color .2s,transform .2s,background .2s;
}
.ind:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px);
  background:var(--panel-2)}
.ind .e{font-size:19px;line-height:1}
.ind-more{
  grid-column:1/-1;text-align:center;padding:16px;font-size:14px;
  color:var(--txt-3);border:1px dashed var(--line-2);border-radius:12px;
}
.ind-more b{color:var(--brand-3)}

/* ---------- 价格 ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{
  background:linear-gradient(170deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px;position:relative;
}
.plan.hot{
  border-color:rgba(139,92,246,.5);
  box-shadow:var(--glow);
  background:linear-gradient(170deg,rgba(139,92,246,.1),var(--bg-2));
}
.plan .ribbon{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#8b5cf6,#632BC0);color:#fff;
  font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:99px;
  white-space:nowrap;box-shadow:0 6px 18px rgba(99,43,192,.5);
}
.plan h3{font-size:18px;margin-bottom:4px}
.plan .plan-desc{font-size:13px;color:var(--txt-3);margin-bottom:18px}
.plan .amount{display:flex;align-items:baseline;gap:5px;margin-bottom:20px}
.plan .amount .num{font-size:40px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff,#c9b6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.plan .amount .unit{font-size:14px;color:var(--txt-3)}
.plan ul{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:9px;font-size:14px;color:var(--txt-2);line-height:1.6}
.plan li svg{flex:0 0 auto;width:16px;height:16px;margin-top:4px;
  stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plan li b{color:var(--txt);font-weight:700}
.price-note{
  margin-top:26px;padding:20px 24px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);
  font-size:14px;color:var(--txt-2);line-height:1.75;
}
.price-note b{color:var(--txt)}
.price-note .hl-p{color:var(--brand-4);font-weight:700}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:11px}
.faq-item{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:border-color .2s;
}
.faq-item.open{border-color:rgba(139,92,246,.34)}
.faq-q{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  padding:19px 22px;font-size:15.5px;font-weight:600;color:var(--txt);
}
.faq-q .pm{
  margin-left:auto;flex:0 0 auto;width:22px;height:22px;border-radius:7px;
  background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.26);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:transform .25s ease;
}
.faq-q .pm::before,.faq-q .pm::after{
  content:"";position:absolute;background:var(--brand-3);border-radius:2px}
.faq-q .pm::before{width:9px;height:1.6px}
.faq-q .pm::after{width:1.6px;height:9px;transition:opacity .2s}
.faq-item.open .faq-q .pm{transform:rotate(180deg)}
.faq-item.open .faq-q .pm::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq-a-inner{padding:0 22px 20px;color:var(--txt-2);font-size:14.5px;line-height:1.8}
.faq-a-inner b{color:var(--txt)}
.faq-a-inner code{
  background:rgba(139,92,246,.14);color:var(--brand-4);
  padding:1.5px 7px;border-radius:6px;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- 下载区 ---------- */
.dl{
  position:relative;overflow:hidden;border-radius:26px;
  background:linear-gradient(150deg,rgba(139,92,246,.16),rgba(99,43,192,.07) 45%,var(--bg-2));
  border:1px solid rgba(139,92,246,.26);
  padding:56px 48px;
}
.dl::before{
  content:"";position:absolute;top:-40%;right:-10%;width:460px;height:460px;
  background:radial-gradient(circle,rgba(139,92,246,.3),transparent 68%);
  filter:blur(30px);pointer-events:none;
}
.dl-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;
  gap:44px;align-items:center}
.dl h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:12px}
.dl p{color:var(--txt-2);margin:0 0 26px;font-size:15.5px}
.dl-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.dl-file{font-size:13px;color:var(--txt-3);margin-top:16px}
.dl-steps{display:flex;flex-direction:column;gap:14px}
.dl-step{display:flex;gap:12px;align-items:flex-start}
.dl-step .n{
  flex:0 0 auto;width:24px;height:24px;border-radius:8px;
  background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:var(--brand-3);
}
.dl-step p{margin:0;font-size:14px;color:var(--txt-2);line-height:1.6}
.dl-step p b{color:var(--txt)}
.os-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--txt-2);background:rgba(0,0,0,.28);border:1px solid var(--line);
  padding:7px 13px;border-radius:99px;margin-bottom:18px;
}

/* ---------- 页脚 ---------- */
footer{
  border-top:1px solid var(--line);padding:56px 0 40px;margin-top:20px;
  background:var(--bg-2);
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-brand img{height:42px;width:auto;margin-bottom:16px}
.foot-brand p{color:var(--txt-3);font-size:14px;margin:0;max-width:330px;line-height:1.75}
.foot-col h4{font-size:14px;margin-bottom:14px;color:var(--txt)}
.foot-col a,.foot-col span{
  display:block;font-size:14px;color:var(--txt-3);padding:5px 0;
  transition:color .18s;cursor:pointer;
}
.foot-col a:hover{color:var(--brand-3)}
.foot-bottom{
  border-top:1px solid var(--line);padding-top:26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--txt-3);
}

/* ---------- 滚动入场 ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.22,.7,.3,1),transform .65s cubic-bezier(.22,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "visual" "actions";gap:52px}
  .hero-actions{margin-top:-30px}
  .hero-visual{order:2}
  .phone-stage::after{width:64%;height:64%}
  .steps{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .dl-grid{grid-template-columns:1fr;gap:36px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .nav-links{display:none}
  /* 移动端导航只留 logo + 汉堡：CTA 太重复（hero/下载区/页脚都有），
     菜单图标顶到最右 */
  .nav-cta{display:none}
  .nav-burger{display:flex;margin-left:auto}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  /* 分区间距收紧（2026-10-10 用户反馈：手机版分区之间太空） */
  .section{padding:10px 0 20px}   /* 顶部再收紧 10px（用户指定五个分区整体上移） */
  .section--tight{padding:18px 0}
  .g-3,.g-2,.pain-grid{grid-template-columns:1fr}
  .g-4{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}

  /* —— Hero 手机上一屏放下（用户拍板）——
     之前 hero 高约 1500px（文案 5 段 + 大手机模型），用户要滚两屏。
     现在：整体锁 100svh、文案压缩、手机模型缩到 206px，
     一屏 = 导航 + 眉标 + 标题 + 副文 + 3 指标 + 按钮 + 手机屏幕上半部。 */
  .hero{padding:26px 0 12px;min-height:100svh;display:flex;align-items:flex-start}
  .hero .wrap{width:100%}
  .hero-grid{gap:12px}
  .hero h1{font-size:27px;line-height:1.26;margin-bottom:16px}
  .hero-lead{font-size:13.5px;line-height:1.6}
  .phone{width:174px;padding:6px}
  .phone-screen{height:330px}
  .phone-stage{padding:0 4px}
  /* 一屏收尾：按钮横排、指标条压扁 */
  .hero-actions{flex-direction:row;gap:10px;margin-top:16px}
  .hero-actions .btn{flex:1;padding:11px 10px;font-size:14px}
  .hero-stats{gap:14px;margin:10px 0 10px;justify-content:center}
  /* 手机版首屏文案整块居中：眉标 / 大标题 / 副文案 / 三指标 */
  .hero-copy{text-align:center}

  .nav-inner{height:68px;gap:14px}
  .nav-logo img{height:42px}
  .dl{padding:36px 22px;border-radius:20px}
  .foot-grid{grid-template-columns:1fr}
  .fc-1{left:-4px}
  .fc-2{right:-6px}
  .sec-head{margin-bottom:20px}
}
@media (max-width:430px){
  .nav-cta .btn span{display:none}
  .nav-inner{height:62px}
  .nav-logo img{height:36px}
  .foot-brand img{height:36px}
}
@media (max-width:400px){
  .float-card{display:none}
  .phone-stage{padding:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   视觉特效层  ·  2026-10-09 新增
   原则：只动 transform / opacity / background-position，不触发布局；
        鼠标跟随类特效只在「有精确指针」的设备上生效；
        全部可被 prefers-reduced-motion 关掉（见本文件末尾同名媒体查询）。
   ============================================================ */

/* ---------- F1. 顶部滚动进度条 ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;z-index:200;height:2px;width:0;
  background:linear-gradient(90deg,#632BC0,#8b5cf6 45%,#c9b6ff);
  box-shadow:0 0 12px rgba(139,92,246,.75);
  pointer-events:none;will-change:width;
}

/* ---------- F2. Hero 装饰层：细网格底纹 + 漂浮光斑 ---------- */
.hero-grid{z-index:2}
.hero-fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-fx::before{
  content:"";position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(139,92,246,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,.10) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(80% 68% at 50% 34%,#000 10%,transparent 82%);
          mask-image:radial-gradient(80% 68% at 50% 34%,#000 10%,transparent 82%);
  animation:gridDrift 32s linear infinite;
}
@keyframes gridDrift{to{background-position:62px 62px}}
.hero-fx i{
  position:absolute;border-radius:50%;filter:blur(30px);
  background:radial-gradient(circle,rgba(167,139,250,.5),transparent 66%);
}
.hero-fx i:nth-child(1){
  width:300px;height:300px;top:-70px;left:4%;
  animation:driftA 17s ease-in-out infinite alternate;
}
.hero-fx i:nth-child(2){
  width:240px;height:240px;bottom:-60px;right:6%;
  background:radial-gradient(circle,rgba(99,43,192,.58),transparent 66%);
  animation:driftB 21s ease-in-out infinite alternate;
}
@keyframes driftA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(60px,44px,0) scale(1.18)}
}
@keyframes driftB{
  from{transform:translate3d(0,0,0) scale(1.1)}
  to{transform:translate3d(-54px,-38px,0) scale(.92)}
}
/* 原极光层加一层缓慢呼吸位移 */
.hero::before{animation:aurora 20s ease-in-out infinite alternate}
@keyframes aurora{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(2.2%,-1.6%,0) scale(1.07)}
}
/* 手机 mockup 跟随鼠标微视差（由 JS 写 transform） */
.phone-stage{transition:transform .45s cubic-bezier(.22,.7,.3,1)}

/* ---------- F3. 主标题高亮：流光扫过 ---------- */
.hero h1 .hl{
  background:linear-gradient(104deg,
    #a78bfa 0%,#c9b6ff 24%,#ffffff 42%,#c9b6ff 60%,#8b5cf6 84%,#a78bfa 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:hlShine 7s ease-in-out infinite;
}
@keyframes hlShine{
  0%,18%{background-position:130% 0}
  60%,100%{background-position:-40% 0}
}

/* ---------- F4. 卡片鼠标跟随高光 ---------- */
.card,.plan,.step,.ind,.pain,.price-note{--mx:50%;--my:50%}
.card,.pain,.ind,.price-note{position:relative}
.card::after,.plan::after,.step::after,.ind::after,
.pain::after,.price-note::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--mx) var(--my),
             rgba(139,92,246,.20),transparent 62%);
}
.card:hover::after,.plan:hover::after,.step:hover::after,
.ind:hover::after,.pain:hover::after,.price-note:hover::after{opacity:1}

/* ---------- F5. 主按钮：光泽扫过 ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;top:0;left:0;width:52%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-180%) skewX(-18deg);pointer-events:none;
}
.btn-primary:hover::after{animation:btnShine .8s cubic-bezier(.3,.7,.3,1)}
@keyframes btnShine{
  from{transform:translateX(-180%) skewX(-18deg)}
  to{transform:translateX(340%) skewX(-18deg)}
}

/* ---------- F6. 下载区光斑呼吸 ---------- */
.dl::before{animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{
  from{transform:translate3d(0,0,0) scale(1);opacity:.85}
  to{transform:translate3d(-6%,6%,0) scale(1.14);opacity:1}
}

/* ---------- F7. 顶栏当前段落高亮（scrollspy） ---------- */
.nav-links a{position:relative}
.nav-links a.active{color:var(--txt);background:rgba(139,92,246,.16)}
.nav-links a.active::after{
  content:"";position:absolute;left:50%;bottom:1px;width:14px;height:2px;
  border-radius:2px;transform:translateX(-50%);
  background:linear-gradient(90deg,#8b5cf6,#c9b6ff);
  box-shadow:0 0 8px rgba(139,92,246,.9);
}

/* ---------- F8. 行业卡片微投影 ---------- */
.ind{transition:border-color .25s ease,transform .25s ease,
              background .25s ease,box-shadow .25s ease}
.ind:hover{box-shadow:0 10px 28px rgba(99,43,192,.3)}

/* ---------- F9. 无障碍：保留清晰的键盘焦点指示 ---------- */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--brand-3);outline-offset:3px;border-radius:10px;
}

/* ---------- F10. 减少动效：关掉全部装饰性特效 ---------- */
@media (prefers-reduced-motion:reduce){
  .scroll-progress{transition:none}
  .hero-fx::before,.hero-fx i,.hero::before,.hero h1 .hl,
  .dl::before,.btn-primary::after{animation:none!important}
  .hero h1 .hl{background-position:0 0}
  .hero-fx i{opacity:.32}
  .phone-stage{transition:none}
  .card::after,.plan::after,.step::after,.ind::after,
  .pain::after,.price-note::after,.btn-primary::after{display:none}
  .nav-links a.active::after{display:none}
}

/* ============================================================
   第二批  ·  2026-10-09
   ① 手机 mockup 三幕演示（说一句话 → 配音 → 出片）
   ② 分区差异化入场动效 + 段落标题生长线
   ③ 痛点段「代价」标注与反转收口
   原则不变：只动 transform / opacity / background-position。
   ============================================================ */

/* ---------- ① 手机演示舞台 ---------- */
.pd-stage{flex:1;position:relative;overflow:hidden}
.pd-scene{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(16px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.7,.3,1),visibility .5s;
}
.pd-scene.is-on{opacity:1;visibility:visible;transform:none}
.pd-scene[data-scene="chat"] .pchat{flex:1;overflow:hidden}
.pd-scene[data-scene="audio"],
.pd-scene[data-scene="video"]{justify-content:center;padding-bottom:16px}

/* 打字光标 */
.pd-caret{
  display:inline-block;width:1.5px;height:11px;margin-left:1px;
  background:#fff;vertical-align:-1px;animation:pdCaret 1s steps(2) infinite;
}
@keyframes pdCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* 打字还没开始时（或脚本没跑起来时），把空气泡藏掉，别露出一个空紫条 */
.pbubble:has(#pdType:empty){opacity:0}

/* 回复气泡浮现 */
.pd-reply{opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.7,.3,1)}
.pd-reply.show{opacity:1;transform:none}
.pd-col{display:flex;flex-direction:column;gap:9px;min-width:0}

/* 任务清单逐条打勾 */
.ptask li em{opacity:0;transform:scale(.4);
  transition:opacity .28s ease,transform .34s cubic-bezier(.34,1.6,.5,1)}
.ptask li.done em{opacity:1;transform:none}
.ptask li.done{color:#dbe1ee}

/* 幕 2 / 3 面板标题 */
.pd-head{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:14px 15px 11px;font-size:12.5px;font-weight:800;color:#e9e2ff;
}
.pd-head .pd-no{
  font-size:9.5px;font-weight:800;color:var(--brand-3);letter-spacing:.05em;
  background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.3);
  border-radius:6px;padding:2px 6px;
}
.pd-head em{margin-left:auto;font-style:normal;font-size:10px;font-weight:500;color:var(--txt-3)}

/* 口播稿卡 */
.pd-script{margin:0 13px;padding:11px 12px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line)}
.pd-lbl{font-size:9.5px;color:var(--txt-3);margin-bottom:6px;letter-spacing:.04em}
.pd-script p{margin:0;font-size:11px;line-height:1.72;color:#cdd2e0}

/* 声波 */
.pd-voice{margin:11px 13px 0;padding:11px 12px;border-radius:11px;
  background:linear-gradient(150deg,rgba(139,92,246,.14),rgba(99,43,192,.07));
  border:1px solid rgba(139,92,246,.26)}
.pd-voice-top{display:flex;align-items:center;justify-content:space-between;
  font-size:10px;color:var(--txt-3)}
.pd-voice-top b{color:#c9b6ff;font-weight:700}
.pd-wave{display:flex;align-items:center;gap:2.5px;height:32px;margin:9px 0 6px}
.pd-wave i{flex:1;border-radius:2px;height:18%;
  background:linear-gradient(180deg,#a78bfa,#632BC0)}
.pd-scene[data-scene="audio"].is-on .pd-wave i{animation:pdWave .85s ease-in-out infinite alternate}
@keyframes pdWave{from{height:14%}to{height:96%}}
.pd-voice-bot{display:flex;justify-content:space-between;font-size:9.5px;
  color:var(--txt-3);font-variant-numeric:tabular-nums}

/* 完成提示 / 已存相册 */
.pd-flag,.pd-saved{
  margin:11px 13px 0;padding:9px 12px;border-radius:11px;
  display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  color:#7ff0c2;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.26);
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;
}
.pd-flag.show,.pd-saved.show{opacity:1;transform:none}
.pd-flag i,.pd-saved i{font-style:normal}
.pd-saved{font-weight:700}

/* 合成进度 */
.pd-render{margin:2px 13px 0;display:flex;align-items:center;gap:10px}
.pd-bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.pd-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#632BC0,#8b5cf6,#c9b6ff);
  box-shadow:0 0 10px rgba(139,92,246,.7)}
.pd-pct{font-size:11px;font-weight:700;color:var(--brand-4);
  font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

/* 成片卡 */
.pd-film{margin:12px 13px 0;border-radius:12px;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line);
  opacity:0;transform:translateY(12px) scale(.97);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.7,.3,1)}
.pd-film.show{opacity:1;transform:none}
.pd-film-cover{position:relative;height:92px;display:flex;align-items:flex-end;padding:9px 10px;
  background:
    radial-gradient(62% 82% at 28% 26%,rgba(255,193,120,.3),transparent 72%),
    linear-gradient(150deg,#3b2a1b,#191310)}
.pd-film-cover span{font-size:10.5px;font-weight:800;line-height:1.36;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.85)}
.pd-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.78)}
.pd-play::after{content:"";position:absolute;top:50%;left:53%;
  transform:translate(-50%,-50%);
  border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.pd-film-meta{padding:9px 11px;display:flex;flex-direction:column;gap:3px}
.pd-film-meta b{font-size:11px;color:#e9e2ff}
.pd-film-meta span{font-size:9.5px;color:var(--txt-3)}

/* 幕 2 底部操作 */
.pd-acts{display:flex;gap:8px;margin:12px 13px 0}
.pd-chip{
  flex:1;text-align:center;font-size:11px;font-weight:700;
  padding:9px 10px;border-radius:10px;color:var(--txt-2);
  background:var(--panel-2);border:1px solid var(--line);
}
.pd-chip--go{
  background:linear-gradient(135deg,#8b5cf6,#632BC0);border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(99,43,192,.45);
}

/* 幕 3 发布行 */
.pd-pub{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:12px 13px 0;font-size:10px;color:var(--txt-3);
}
.pd-pub b{
  font-size:10px;font-weight:600;color:#c9b6ff;
  background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.24);
  border-radius:7px;padding:3px 8px;
}
.pd-pub em{margin-left:auto;font-style:normal;font-size:9.5px;color:var(--txt-3)}

/* 浮动卡：随幕次出现（漂移动画仍由 floaty 负责，这里只控透明度） */
.float-card{opacity:0;transition:opacity .5s ease}
.float-card.show{opacity:1}

/* ---------- ② 分区差异化入场 ---------- */
.reveal--l{transform:translateX(-38px)}
.reveal--r{transform:translateX(38px)}
.reveal--zoom{transform:scale(.9) translateY(16px)}
.reveal--pop{transform:scale(.84)}
.reveal--up{transform:translateY(34px)}
.reveal.in{transform:none}

/* 段落标题下方生长线 */
.sec-head .sec-title::after{
  content:"";display:block;width:56px;height:3px;border-radius:3px;margin-top:15px;
  background:linear-gradient(90deg,#8b5cf6,#c9b6ff);
  box-shadow:0 0 12px rgba(139,92,246,.7);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.22,.7,.3,1) .15s;
}
.sec-head--center .sec-title::after{margin-left:auto;margin-right:auto;transform-origin:center}
.sec-head.in .sec-title::after{transform:scaleX(1)}

/* 流程步骤：编号右侧连线随入场生长 */
.step .n::after{transform:scaleX(0);transform-origin:left;
  transition:transform .75s cubic-bezier(.22,.7,.3,1) .3s}
.step.in .n::after{transform:scaleX(1)}

/* eyebrow 圆点呼吸 */
.eyebrow .dot{animation:dotPulse 2.8s ease-in-out infinite}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 10px var(--brand-3);transform:scale(1)}
  50%{box-shadow:0 0 16px var(--brand-3),0 0 28px rgba(139,92,246,.55);transform:scale(1.28)}
}

/* 价格「首选」丝带轻浮 */
.plan.hot .ribbon{animation:ribbonFloat 3.4s ease-in-out infinite}
@keyframes ribbonFloat{0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-3px)}}

/* ---------- ③ 痛点段强化 ---------- */
.pain-body{min-width:0;flex:1}
.pain .cost{
  margin-top:9px;display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:#f7a3a3;
  background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.2);
  border-radius:7px;padding:4px 9px;
}
.pain-turn{
  margin-top:26px;padding:28px 32px;border-radius:18px;text-align:center;
  background:linear-gradient(140deg,rgba(139,92,246,.15),rgba(99,43,192,.06) 62%,transparent);
  border:1px solid rgba(139,92,246,.26);
}
.pain-turn b{display:block;font-size:clamp(16px,2.1vw,20px);color:#eef0f6;margin-bottom:9px}
.pain-turn span{font-size:14.5px;color:var(--txt-2);line-height:1.78}
.pain-turn span b{display:inline;font-size:inherit;color:var(--brand-4);margin:0}

/* ---------- 三幕演示 · 减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  .pd-scene{transition:none}
  .pd-caret{animation:none;display:none}
  .pd-scene[data-scene="audio"].is-on .pd-wave i{animation:none;height:58%}
  .plan.hot .ribbon{animation:none}
  .eyebrow .dot{animation:none}
  .sec-head .sec-title::after,.step .n::after{transition:none;transform:scaleX(1)}
}

/* 视口不够宽时（居中容器两侧留白 < 位移量），横向入场会撑出横向滚动，
   统一退回纵向；≥1280px 才启用左右交替。 */
@media (max-width:1279px){
  .reveal--l,.reveal--r{transform:translateY(24px)}
  .reveal--zoom{transform:translateY(20px)}
  .reveal--up{transform:translateY(24px)}
}

/* =====================================================================
   视觉表达层 · 2026-10-09
   做减法：用真实截图 / 对比图 / 真实产出说话，替掉大段文字。
   对应 index.html 里 .hero-stats（Hero）、.cases（谁在用）、
   .shots（软件长什么样）、.vs + .costbars（怎么用）。
   ===================================================================== */

/* ---------- Hero：三个硬指标 ---------- */
.hero-stats{display:flex;gap:36px;flex-wrap:wrap;margin:24px 0 26px;
  padding-top:22px;border-top:1px solid var(--line)}
.hs{display:flex;flex-direction:column;gap:3px}
.hs b{font-size:23px;font-weight:800;letter-spacing:-.4px;
  background:linear-gradient(120deg,#fff,#c9b6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hs span{font-size:12.5px;color:var(--txt-3)}

/* ---------- 真实产出（谁在用） ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.case{
  margin:0;padding:22px 22px 18px;border-radius:16px;
  background:linear-gradient(150deg,rgba(139,92,246,.09),rgba(255,255,255,.018));
  border:1px solid rgba(139,92,246,.2);
  display:flex;flex-direction:column;gap:12px;
}
.case-ind{display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--brand-4)}
.case-ind span{font-size:16px;line-height:1}
.case blockquote{
  margin:0;padding-left:13px;border-left:2px solid var(--brand-3);
  font-size:15px;line-height:1.6;font-weight:600;color:#eef0f6;
}
.case figcaption{font-size:12.5px;color:var(--txt-3);margin-top:auto}
.cases-note{text-align:center;font-size:12.5px;color:var(--txt-3);margin-top:18px;line-height:1.7}
.cases-note strong{color:var(--brand-4);font-weight:600}

/* ---------- 软件截图 ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px}
.shot{margin:0;display:flex;flex-direction:column;gap:13px;align-items:center}
.shot-screen{
  width:100%;max-width:252px;border-radius:24px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background:#0a0812;
  box-shadow:0 20px 48px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.022);
}
.shot-screen img{display:block;width:100%;height:auto}
.shot figcaption{display:flex;flex-direction:column;gap:3px;text-align:center}
.shot figcaption b{font-size:14.5px;color:#eef0f6}
.shot figcaption span{font-size:12.5px;line-height:1.55;color:var(--txt-3)}

/* ---------- 8 步 → 1 步 对比 ---------- */
.vs{display:grid;grid-template-columns:1fr 54px 1fr;align-items:stretch;margin-bottom:34px}
.vs-col{padding:26px 24px;border-radius:18px;border:1px solid}
.vs-old{background:rgba(255,255,255,.022);border-color:rgba(255,255,255,.085)}
.vs-new{background:linear-gradient(150deg,rgba(139,92,246,.14),rgba(99,43,192,.045));
  border-color:rgba(139,92,246,.34)}
.vs-tag{font-size:12.5px;font-weight:700;letter-spacing:.3px;margin-bottom:16px}
.vs-old .vs-tag{color:var(--txt-3)}
.vs-new .vs-tag{color:var(--brand-4)}
.vs-grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vs-grid8 span{display:flex;align-items:center;justify-content:center;height:38px;
  border-radius:9px;font-size:13px;color:var(--txt-2);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.065)}
.vs-grid8--one{grid-template-columns:1fr}
.vs-grid8--one .vs-big{height:88px;font-size:19px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
  border-color:transparent;box-shadow:0 12px 32px rgba(139,92,246,.34)}
.vs-note{margin-top:16px;font-size:13px;line-height:1.6;color:var(--txt-3)}
.vs-arrow{display:flex;align-items:center;justify-content:center;color:var(--brand-3)}

/* ---------- 成本对比条 ---------- */
.costbars{margin:0 0 38px;padding:28px 28px 24px;border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
  border:1px solid var(--line)}
.cb-title{margin:0 0 22px;font-size:15.5px;font-weight:700;color:#eef0f6}
.cb{margin-bottom:20px}
.cb:last-child{margin-bottom:0}
.cb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.cb-head b{font-size:14.5px;color:#eef0f6}
.cb-num{font-size:14px;font-weight:700;color:var(--brand-4)}
.cb-track{height:14px;border-radius:99px;background:rgba(255,255,255,.055);overflow:hidden}
.cb-fill{display:block;height:100%;border-radius:99px;min-width:24px}
.cb-fill--bad{background:linear-gradient(90deg,#f87171,#fb923c)}
.cb-fill--good{background:linear-gradient(90deg,var(--brand-3),var(--brand-1))}
.cb-foot{margin-top:7px;font-size:12.5px;color:var(--txt-3)}
.cb-src{margin:18px 0 0;padding-top:14px;border-top:1px dashed rgba(255,255,255,.075);
  font-size:12px;line-height:1.65;color:var(--txt-3)}

/* ---------- 四档价格 / 四步流程 ---------- */
.price-grid--four{grid-template-columns:repeat(4,1fr);gap:16px}
.steps--four{grid-template-columns:repeat(4,1fr)}

/* ---------- 价格说明（条目式，去掉大段话） ---------- */
.price-note .pn-row{display:flex;gap:12px;padding:11px 0;
  border-bottom:1px dashed rgba(255,255,255,.075)}
.price-note .pn-row:last-child{border-bottom:0}
.price-note .pn-row b{flex:0 0 76px;font-size:13px;color:var(--brand-4)}
.price-note .pn-row span{font-size:13.5px;line-height:1.72;color:var(--txt-2)}

/* ---------- 窄屏 ---------- */
@media (max-width:980px){
  .cases{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr)}
  .vs{grid-template-columns:1fr;gap:14px}
  .vs-arrow{transform:rotate(90deg);height:34px}
  .price-grid--four,.steps--four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .shots{grid-template-columns:1fr;gap:28px}
  .shot-screen{max-width:290px}
  .price-grid--four,.steps--four{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .cb-head{flex-wrap:wrap;gap:4px}
}

/* =====================================================================
   第三批 · 交互强化层  ·  2026-10-09
   ① 「走完一条视频」界面走查：6 张真实截图轮流高亮 + 屏内向下滚动
   ② 板块入场：标题逐字飞入、标签弹出、副标题上浮、首屏分镜
   ③ 图形动态：成本条生长、对比块错峰弹入、流光扫过、emoji 浮动

   ★ 新增动效全部写在 @media (prefers-reduced-motion:no-preference) 里。
     「减少动效」模式下这些声明根本不存在，所以内容天然是「终态可见」，
     不会出现「动画被关了、元素还停在 opacity:0」这类无障碍事故。
   ===================================================================== */

/* ---------- ① 走查导轨 ---------- */
.journey{margin:0 auto 32px;max-width:780px}
.jr-wrap{position:relative}
.jr-rail{
  position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;
  border-radius:2px;background:rgba(255,255,255,.085);overflow:hidden;
}
.jr-fill{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#632BC0,#8b5cf6 55%,#c9b6ff);
  box-shadow:0 0 10px rgba(139,92,246,.85);
}
/* 填充宽度由 JS 按当前步写内联 width；这里只给平滑过渡 */
.jr-steps{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
}
.jr-steps li{display:flex;flex-direction:column;align-items:center;gap:9px}
.jr-dot{
  position:relative;z-index:1;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;line-height:1;
  color:var(--txt-3);background:#12141d;border:1px solid var(--line-2);
  transition:color .3s,background .3s,border-color .3s,
             transform .35s cubic-bezier(.34,1.4,.5,1),box-shadow .3s;
}
.jr-dot:hover{color:var(--txt-2);border-color:rgba(139,92,246,.5)}
.jr-steps li.on .jr-dot{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#8b5cf6,#632BC0);
  box-shadow:0 0 0 5px rgba(139,92,246,.13),0 8px 22px rgba(99,43,192,.5);
  transform:scale(1.14);
}
.jr-lbl{font-size:12px;color:var(--txt-3);transition:color .3s,font-weight .3s}
.jr-steps li.on .jr-lbl{color:var(--brand-4);font-weight:600}

/* ---------- 两条出片路线切换（2026-10-10 用户拍板）----------
   智能云剪：对话→智能剪辑→成片→发布；真人出镜：对话→选素材→成片→发布。
   .shot[data-flow] 标注所属路线，#shots.flow-xxx 控制显隐；导轨由 JS 按路线重建。 */
.flow-tabs{display:flex;justify-content:center;gap:10px;margin:-4px 0 26px}
.ftab{
  padding:10px 24px;border-radius:999px;border:1px solid rgba(167,139,250,.35);
  background:rgba(139,92,246,.08);color:#c4b5fd;font-size:15px;font-weight:600;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s,color .25s,box-shadow .25s}
.ftab:hover{border-color:rgba(167,139,250,.6)}
.ftab.on{
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(139,92,246,.35)}
#shots.flow-cloud .shot:not([data-flow~="cloud"]){display:none}
#shots.flow-live .shot:not([data-flow~="live"]){display:none}

/* ---------- ① 6 张截图 ---------- */
.shots .shot{transition:opacity .55s ease,filter .55s ease,
             transform .65s cubic-bezier(.22,.7,.3,1)}
.shot-screen{
  position:relative;
  /* 三个位移来源合成到一条 transform 上，避免 ::hover / 高亮 / 视差互相覆盖 */
  transform:perspective(1100px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translate3d(0,calc(var(--lift,0px) + var(--par,0px)),0)
            scale(var(--sc,1));
  transition:transform .5s cubic-bezier(.22,.7,.3,1),
             opacity .55s ease,filter .55s ease,
             box-shadow .5s ease,border-color .5s ease;
  will-change:transform;
}
/* 屏内高光扫过（只在切换那一刻闪一次） */
.shot-screen::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(102deg,transparent 38%,
             rgba(255,255,255,.15) 50%,transparent 62%);
  transform:translateX(-130%);opacity:0;
}
.shot figcaption b{transition:color .35s}
.shot figcaption span{transition:color .35s}

@media (prefers-reduced-motion:no-preference){
  /* JS 接管后才裁成一屏并做屏内滚动；没 JS 时完整显示整张截图，不丢内容 */
  .shots.js-walk .shot-screen{aspect-ratio:252 / 470}
  .shots.js-walk .shot-screen img{
    position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;
    transition:transform 3.2s cubic-bezier(.36,0,.36,1);
  }
  /* 复位开关：让 JS 能把屏内滚动「瞬移」回顶部再重新滚，
     否则摘类 → 回流 → 加类 发生在同一帧，会被浏览器判成反向过渡、接不上 */
  .shots.pan-reset .shot-screen img{transition:none!important}
  .shots.js-walk .shot.is-active .shot-screen img{transform:translateY(-13%)}

  /* 非当前的那几张压暗后退，让「正在走的那一步」跳出来。
     压暗加在「屏幕」而不是整张卡片上 —— 否则屏幕下面的说明文字也跟着暗掉，
     那几句正是要给人读的。 */
  .shots.js-walk .shot.in .shot-screen{opacity:.5;filter:saturate(.7) brightness(.86)}
  .shots.js-walk .shot.in.is-active .shot-screen{opacity:1;filter:none}

  .shot.is-active .shot-screen{
    --lift:-10px;--sc:1.035;
    border-color:rgba(139,92,246,.5);
    box-shadow:0 28px 64px rgba(0,0,0,.58),
               0 0 0 1px rgba(139,92,246,.35),
               0 0 38px rgba(99,43,192,.45);
  }
  .shot.is-active .shot-screen::after{animation:shotGlare 1.45s cubic-bezier(.3,.7,.3,1) .22s}
  .shot.is-active figcaption b{color:var(--brand-4)}
  .shot.is-active figcaption span{color:var(--txt-2)}
}

/* ---------- B+. 界面分页平铺（2026-10-10 用户拍板）----------   桌面（≥1000px，3 列网格）下一排只放 3 台：
   第 1 排（①②③）走完 → 自动切到第 2 排（④⑤⑥）→ 循环。
   任何时刻只显示一排，不做两排同屏。
   由 main.js §11 给 .shots 加 .paged、给当前排的 .shot 加 .on-page。
   窄屏（<1000px，2 列/1 列）不启用分页 —— 3 台放不下一排。 */
.shots.paged .shot{display:none}
.shots.paged .shot.on-page{display:flex;animation:shotPageIn .45s ease}
@keyframes shotPageIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
/* 减少动效：JS 根本不会加 .paged（见 §11），这里只是双保险 */
@media (prefers-reduced-motion:reduce){
  .shots.paged .shot.on-page{animation:none}
}

/* ---------- C. 行业用户形象卡（2026-10-10 用户拍板）----------
   6 个行业各一张：AI 人物形象（占位）+ 用户原话痛点 + 应用场景。
   让逛官网的老板看到「跟我一样的人也在用」。 */
.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.persona{margin:0;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  transition:transform .25s ease,border-color .25s ease}
.persona:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.4)}
.persona-pic{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  font-size:56px;background:linear-gradient(150deg,#241b46,#171331 60%,#1d1440)}
.persona-pic i{position:absolute;left:10px;bottom:10px;font-size:11px;font-style:normal;
  color:#b7a8e8;background:rgba(20,14,40,.72);padding:4px 9px;border-radius:7px;
  border:1px dashed rgba(167,139,250,.5)}
.pic-food{background:linear-gradient(150deg,#3a1f2a,#1a1220 65%)}
.pic-deco{background:linear-gradient(150deg,#2c2a1c,#161420 65%)}
.pic-edu{background:linear-gradient(150deg,#1c2a44,#141420 65%)}
.pic-beauty{background:linear-gradient(150deg,#3a1c33,#161420 65%)}
.pic-home{background:linear-gradient(150deg,#1c3a34,#141420 65%)}
.pic-auto{background:linear-gradient(150deg,#33313a,#141420 65%)}
.persona figcaption{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.persona figcaption b{font-size:15.5px;color:#eef0f6}
.persona .pain{margin:0;font-size:13.5px;line-height:1.7;color:var(--txt-2)}
.persona .do{margin:0;font-size:13px;line-height:1.7;color:#a78bfa}
.persona .do::before{content:'→ '}
@media (max-width:1000px){.persona-grid{grid-template-columns:repeat(2,1fr)}}
/* 手机版：6 条按 2 页横排，一屏 3 条，左右切换（JS §17）。
   桌面/平板靠 .persona-page{display:contents} 还原成原本的 2~3 列网格。 */
@media (max-width:720px){
  .persona-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;
    margin:0 -18px;padding:4px 18px 14px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;cursor:grab}
  .persona-grid::-webkit-scrollbar{display:none}
  .persona-grid.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
  .persona-page{flex:0 0 100%;scroll-snap-align:center;
    display:grid;grid-template-columns:1fr;gap:16px}
  .persona{flex-direction:row}
  .persona-pic{flex:0 0 38%;aspect-ratio:auto;min-height:118px;font-size:40px}
  .persona figcaption{padding:13px 14px}
}
@media (min-width:721px){.persona-page{display:contents}}

/* ---------- D. 一键发布块（2026-10-10 用户拍板：突出省事）---------- */
.publish{position:relative;margin-top:56px;padding:34px 30px;border-radius:20px;
  background:linear-gradient(140deg,rgba(139,92,246,.16),rgba(255,255,255,.02) 62%);
  border:1px solid rgba(139,92,246,.34);text-align:center;overflow:hidden}
.publish h3{margin:14px 0 18px;font-size:21px;color:#eef0f6}
.publish h3 .hl{color:#c4b5fd}
.pub-badge{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  font-size:12px;font-weight:700;letter-spacing:.14em;color:#ddd0ff;
  background:rgba(139,92,246,.28);border:1px solid rgba(167,139,250,.5);
  padding:4px 13px;border-radius:99px}
.pub-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pub-row span{font-size:14px;color:#e6e1f7;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);padding:8px 18px;border-radius:99px}
.pub-note{margin:18px auto 0;max-width:520px;font-size:13.5px;line-height:1.8;color:var(--txt-2)}

/* ---------- E. 价格轮播（2026-10-10 用户拍板）----------
   ≤1000px：4 张卡横着排，一屏一张，可手滑 + 自动轮播（JS §15），圆点即切换。
   （原只 ≤720px，用户电脑窗口 721~1000px 时看不到切换控件，故扩展到 1000）
   >1000px 桌面：4 列全摆出，无需切换。 */
@media (max-width:1000px){
  .price-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:28px;
    margin:0 -18px;padding:6px 15px 20px 26px;scrollbar-width:none;
    scroll-padding-left:11px;
    -webkit-overflow-scrolling:touch}
  .price-grid::-webkit-scrollbar{display:none}
  .price-grid .plan{flex:0 0 100%;scroll-snap-align:center}
  .price-grid .plan.hot{transform:none}
  /* 一屏一卡：圆点即切换（点击跳卡），当前点拉长成胶囊 */
  .price-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
  .price-dots{display:flex;gap:2px}
  .price-dots .pdot{padding:10px 6px;background:none;border:0;cursor:pointer;
    display:flex;align-items:center;-webkit-tap-highlight-color:transparent}
  .price-dots .pdot i{width:8px;height:8px;border-radius:99px;background:rgba(167,139,250,.28);
    transition:width .3s cubic-bezier(.22,.7,.3,1),background .25s,transform .2s}
  .price-dots .pdot.on i{width:26px;background:#a78bfa;box-shadow:0 0 10px rgba(167,139,250,.7)}
  .price-dots .pdot:active i{transform:scale(1.35)}
  .price-grid{cursor:grab}
  .price-grid.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
}
@media (min-width:1001px){.price-nav{display:none}}
/* 721~1000px：卡片收中 460px，不要手机版的负边距出血 */
@media (min-width:721px) and (max-width:1000px){
  .price-grid{margin:0 auto;padding:6px 0 20px}
}

/* ---------- F. 「谁在用」手机版：3 条一屏，圆点即切换（2026-10-10）----------
   ≤720px 显示圆点（点击跳页，当前点拉长成发光胶囊）；桌面整块隐藏。 */
.persona-nav{display:none}
@media (max-width:720px){
  .persona-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
  .persona-dots{display:flex;gap:2px}
  .persona-dots .pdot{padding:10px 6px;background:none;border:0;cursor:pointer;
    display:flex;align-items:center;-webkit-tap-highlight-color:transparent}
  .persona-dots .pdot i{width:8px;height:8px;border-radius:99px;background:rgba(167,139,250,.28);
    transition:width .3s cubic-bezier(.22,.7,.3,1),background .25s,transform .2s}
  .persona-dots .pdot.on i{width:26px;background:#a78bfa;box-shadow:0 0 10px rgba(167,139,250,.7)}
  .persona-dots .pdot:active i{transform:scale(1.35)}
}

@keyframes shotGlare{
  0%{transform:translateX(-130%);opacity:0}
  28%{opacity:1}
  100%{transform:translateX(130%);opacity:0}
}

/* ---------- ② 标题逐字飞入 ---------- */
/* .ch 由 JS 拆分生成；没有 JS 时就是普通文本，不受任何影响 */
.sec-head .sec-title .ch{display:inline-block;will-change:transform,opacity}
@media (prefers-reduced-motion:no-preference){
  .sec-head.in .sec-title .ch{
    animation:chIn .58s cubic-bezier(.2,.75,.28,1) both;
    animation-delay:calc(var(--i,0) * 26ms);
  }
  /* 眉标：弹出（带轻微回弹） */
  .sec-head.in .eyebrow{
    animation:popIn .5s cubic-bezier(.34,1.5,.5,1) both;
    animation-delay:.04s;
  }
  /* 副标题：标题起飞后跟上 */
  .sec-head.in .sec-sub{
    animation:fadeUp .62s cubic-bezier(.2,.7,.3,1) both;
    animation-delay:calc(var(--chn, 8) * 26ms * .5 + .08s);
  }
}
@keyframes chIn{
  0%{opacity:0;transform:translateY(.42em) rotate(4.5deg) scale(.88);filter:blur(7px)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes popIn{
  0%{opacity:0;transform:translateY(-9px) scale(.9)}
  100%{opacity:1;transform:none}
}
@keyframes fadeUp{
  0%{opacity:0;transform:translateY(13px)}
  100%{opacity:1;transform:none}
}

/* ---------- ② 首屏分镜入场 ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{animation:hIn .8s cubic-bezier(.2,.72,.28,1) both}
  .hero-copy > *:nth-child(1){animation-delay:.05s}
  .hero-copy > *:nth-child(2){animation-delay:.13s}
  .hero-copy > *:nth-child(3){animation-delay:.22s}
  .hero-copy > *:nth-child(4){animation-delay:.30s}
  .hero-copy > *:nth-child(5){animation-delay:.38s}
  .hero-visual{animation:hVisual 1.05s cubic-bezier(.2,.72,.28,1) .18s both}
  /* 按钮已移出 .hero-copy（手机版在手机图下方），单独补入场 */
  .hero-actions{animation:hIn .8s cubic-bezier(.2,.72,.28,1) .30s both}
  /* 指标数字从下方弹一下 */
  .hero-stats .hs{animation:hIn .6s cubic-bezier(.2,.72,.28,1) both}
  .hero-stats .hs:nth-child(1){animation-delay:.42s}
  .hero-stats .hs:nth-child(2){animation-delay:.49s}
  .hero-stats .hs:nth-child(3){animation-delay:.56s}
}
@keyframes hIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:none}}
@keyframes hVisual{
  0%{opacity:0;transform:translateY(28px) scale(.955)}
  100%{opacity:1;transform:none}
}

/* ---------- ② 下载区错峰 ---------- */
@media (prefers-reduced-motion:no-preference){
  .dl.in .os-badge{animation:popIn .5s cubic-bezier(.34,1.5,.5,1) both}
  .dl.in .dl-grid h2{animation:fadeUp .62s cubic-bezier(.2,.7,.3,1) .08s both}
  .dl.in .dl-grid>div>p{animation:fadeUp .62s cubic-bezier(.2,.7,.3,1) .15s both}
  .dl.in .dl-actions{animation:fadeUp .62s cubic-bezier(.2,.7,.3,1) .22s both}
  .dl.in .dl-file{animation:fadeUp .62s cubic-bezier(.2,.7,.3,1) .29s both}
  .dl.in .dl-step{
    animation:stepIn .58s cubic-bezier(.2,.72,.28,1) both;
    animation-delay:calc(var(--i,0) * 95ms + .16s);
  }
}
@keyframes stepIn{
  0%{opacity:0;transform:translateX(14px)}
  100%{opacity:1;transform:none}
}

/* ---------- ③ 成本对比条：从 0 生长 ---------- */
@media (prefers-reduced-motion:no-preference){
  .costbars .cb-fill{
    transform:scaleX(0);transform-origin:left center;
    transition:transform 1.15s cubic-bezier(.2,.75,.3,1);
  }
  .costbars.in .cb-fill--bad{transform:scaleX(1)}
  .costbars.in .cb-fill--good{transform:scaleX(1);transition-delay:.45s}
}

/* ---------- ③ 「以前 8 步」错峰弹入 ---------- */
@media (prefers-reduced-motion:no-preference){
  .vs-old .vs-grid8 span{
    opacity:0;transform:translateY(10px) scale(.9);
    transition:opacity .4s ease,transform .45s cubic-bezier(.34,1.5,.5,1);
    transition-delay:calc(var(--i,0) * 68ms + .12s);
  }
  .vs-old.in .vs-grid8 span{opacity:1;transform:none}
  .vs-old.in .vs-grid8 span:nth-child(4),
  .vs-old.in .vs-grid8 span:nth-child(5){
    color:var(--txt-3);border-color:rgba(239,68,68,.26);background:rgba(239,68,68,.05);
  }
  /* 「说一句话」大块：弹入 + 持续流光 */
  .vs-new.in .vs-big{animation:bigPop .72s cubic-bezier(.34,1.42,.5,1) .4s both}
  .vs-big{position:relative;overflow:hidden}
  .vs-big::after{
    content:"";position:absolute;top:0;left:0;width:42%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
    transform:translateX(-160%) skewX(-18deg);
    animation:bigShine 3.8s ease-in-out 1.3s infinite;
  }
}
@keyframes bigPop{
  0%{opacity:0;transform:scale(.8)}
  62%{opacity:1;transform:scale(1.035)}
  100%{opacity:1;transform:none}
}
@keyframes bigShine{
  0%{transform:translateX(-160%) skewX(-18deg)}
  46%,100%{transform:translateX(380%) skewX(-18deg)}
}

/* ---------- ③ 案例卡：光标光晕 + emoji 浮动 ---------- */
.case{position:relative}
.case::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(139,92,246,.20),transparent 62%);
}
.case:hover::after{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .case-ind span{display:inline-block;animation:emoFloat 4.6s ease-in-out infinite}
  .ind .e{display:inline-block;animation:emoFloat 5.6s ease-in-out infinite}
  .case:nth-child(2) .case-ind span{animation-delay:.7s}
  .case:nth-child(3) .case-ind span{animation-delay:1.4s}
}
@keyframes emoFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-4px) rotate(-7deg)}
}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  /* 标签不藏，只是缩小 —— 只剩 6 个光点看不出「走到哪一步」 */
  .jr-lbl{font-size:10.5px;line-height:1.3;text-align:center}
  .jr-steps li{gap:6px}
  .jr-dot{width:27px;height:27px;font-size:12px}
  .jr-rail{top:13px}
  .journey{margin-bottom:26px;max-width:none}
}

/* ---------- 减少动效：把上面这套彻底归零 ---------- */
@media (prefers-reduced-motion:reduce){
  .jr-fill{transition:none}
  .journey{display:none}          /* 静态模式下没有「走查」这回事，导轨会误导 */
  .shot-screen{transform:none;will-change:auto}
  .shot-screen img{transform:none!important}
  .shot-screen::after{display:none}
  .shots .shot,.shots .shot-screen{opacity:1!important;filter:none!important}
  .shots .shot-screen{aspect-ratio:auto}
  .shots .shot-screen img{position:static}
  .sec-head .sec-title .ch{display:inline}
  .case::after{display:none}
  .vs-big::after{display:none}
  .case-ind span,.ind .e{animation:none}
}

/* ============================================================
   jQuery 缺席兜底 · 2026-10-10
   jQuery 没加载成功时（文件缺失 / 网络异常），index.html 底部的内联脚本
   会给 <html> 加 .no-jq，这里把「靠 JS 才能显示」的初始隐藏态一律打开，
   保证任何情况下内容都看得见 —— 不能因为一个脚本挂了就白屏。
   注意：这条规则必须放在所有动效层之后，否则会被后面的 opacity:0 覆盖。
   ============================================================ */
.no-jq .reveal,
.no-jq .shot,
.no-jq .sec-title .ch{opacity:1!important;transform:none!important;filter:none!important}
.no-jq .shots .shot,
.no-jq .shots .shot-screen{opacity:1!important;filter:none!important}
.no-jq .shots .shot-screen img{transform:none!important}
.no-jq .journey{display:none}          /* 走查没跑起来，导轨留着反而误导 */
.no-jq .scroll-progress{display:none}
.no-jq .costbar i,
.no-jq .vs-old .vs-grid8 span{transform:none!important}

/* ============================================================
   顶栏压缩态覆盖 · 2026-10-10
   上面 A 段写在文件前部（1329 行附近），而响应式媒体查询在它之前先定义了
   .nav-inner{height:68px/62px}，同权重下**后写的赢** → 窄屏会把压缩态盖掉。
   这里补一条更高权重的，并放在最后，保证任何宽度下压缩态都生效。
   ============================================================ */
.nav.nav-hide .nav-inner{height:56px}
.nav.nav-hide .nav-logo img{height:36px}
@media (max-width:720px){
  .nav.nav-hide .nav-inner{height:52px}
  .nav.nav-hide .nav-logo img{height:32px}
}


/* =====================================================================
   jQuery 动态增强层 · 2026-10-10
   这一层全部依赖 jQuery（main.js §14）。每一项的「初始隐藏态」都写在
   @media (prefers-reduced-motion:no-preference) 里，保证：
     · 减少动效 → 不隐藏、不位移，直接看终态
     · jQuery 挂了 → .no-jq 兜底同样放开
   ===================================================================== */

/* ---------- A. 顶栏滚动压缩 / 还原 ----------
   ⚠️ 不能用 transform:translateY(-100%)：
   position:sticky 的元素被移出视口后就不再「贴」在顶部，
   等于菜单跟着滚走了 —— 用户反馈就是这个（「顶部菜单不会跟随」）。
   改成压高度：顶栏始终 sticky，往下滚只是变矮变淡（78→56，logo 48→36）。
   只动 height / opacity / background，量级小、不触发布局抖动。 */
.nav{transition:transform .32s cubic-bezier(.4,0,.2,1),
               background .3s ease,border-color .3s ease}
.nav .nav-inner,
.nav .nav-logo img{
  transition:height .28s cubic-bezier(.4,0,.2,1),
             opacity .22s ease}
.nav.nav-hide{background:rgba(8,9,15,.94)}
/* 主 CTA 不缩，保证「免费下载 App」任何宽度下都在 */

/* ---------- B. 价格卡：推荐卡（.plan.hot）呼吸光边 ----------
   注意：.plan::after 已被「鼠标高光层」占用，这里用 ::before，别抢。 */
@media (prefers-reduced-motion:no-preference){
  .plan.hot::before{
    content:'';position:absolute;inset:-1px;border-radius:inherit;
    pointer-events:none;border:1px solid rgba(167,139,250,.55);
    animation:planBreath 2.6s ease-in-out infinite;
  }
  @keyframes planBreath{
    0%,100%{opacity:.35;transform:scale(1)}
    50%    {opacity:.95;transform:scale(1.014)}
  }
}

/* ---------- C. 数字滚动收尾微弹 ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-count].counted{animation:numPop .42s cubic-bezier(.34,1.56,.64,1)}
  @keyframes numPop{
    0%  {transform:scale(1)}
    45% {transform:scale(1.11)}
    100%{transform:scale(1)}
  }
  /* 数字本体是 inline，得给个基准才能 scale */
  [data-count]{display:inline-block;transform-origin:50% 62%}
}

/* ---------- D. 分区标题的眉标（eyebrow）跟入 ---------- */
@media (prefers-reduced-motion:no-preference){
  .sec-head .eyebrow{opacity:0;transform:translateY(-10px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.4,.64,1)}
  .sec-head.in .eyebrow{opacity:1;transform:none}
}
/* 眉标初始隐藏态必须同时兜住减少动效与无 JS（这一步不能漏，否则永久不可见） */
@media (prefers-reduced-motion:reduce){
  .sec-head .eyebrow{opacity:1;transform:none}
}
.no-jq .sec-head .eyebrow{opacity:1!important;transform:none!important}

/* ---------- E. 截图屏：当前主角的呼吸光环 ----------
   ⚠️ 必须挂在 .shot 上而不是 .shot-screen：后者有 overflow:hidden，
      负 inset 的光环会被裁掉，等于白写。 */
@media (prefers-reduced-motion:no-preference){
  .shot{position:relative}
  /* ⚠️ is-active 是加在 .shot 自己身上的（见 main.js paintStep），
     所以这里必须是 .shot.is-active::before —— 写成 .shot.is-active .shot::before
     会多套一层后代，永远匹配不到（踩过一次）。 */
  .shots .shot.is-active::before{
    content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:280px;height:280px;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(closest-side,rgba(139,92,246,.30),transparent 72%);
    animation:shotHalo 2.4s ease-in-out infinite;
  }
  .shots .shot.is-active .shot-screen{position:relative;z-index:1}
  @keyframes shotHalo{
    0%,100%{opacity:.5}
    50%    {opacity:1}
  }
}

/* =====================================================================
   F. 成片示例视频位（2026-10-10）+ 人物卡真图
   ===================================================================== */
.demo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.demo-slot{margin:0;max-width:250px;margin:0 auto;width:100%}
.demo-vwrap{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:#1a1430;border:1px solid rgba(167,139,250,.22)}
.demo-vwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo-ph{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;color:#8f86b8;font-size:13px;pointer-events:none}
.demo-ph span{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(139,92,246,.25);color:#c4b5fd;font-size:18px;border:1px solid rgba(167,139,250,.4)}
/* 人物卡真图换入后覆盖 emoji 占位 */
.persona-pic img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:980px){.demo-row{grid-template-columns:repeat(3,1fr);gap:12px}}
@media (max-width:720px){
  .demo-row{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
  .demo-slot{max-width:none;border-radius:12px}
  .demo-ph{font-size:11px}
}
.demo-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;
  background:linear-gradient(transparent,rgba(10,8,20,.85));color:#d9d3f5;font-size:12px;text-align:center}

/* =====================================================================
   G. 「软件长什么样」定制示意图（选素材 → 自动剪辑 → 成片）· 2026-10-10
   ===================================================================== */
.ms{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
  padding:14px 12px;background:linear-gradient(180deg,#181230,#100e1c);color:#e8e4f8;
  font-size:13px;line-height:1.5}
.ms-top{display:flex;align-items:center;gap:8px}
.ms-top b{font-size:14.5px;color:#f4f1ff}
.ms-back{width:9px;height:9px;border-left:2px solid #a78bfa;border-bottom:2px solid #a78bfa;
  border-radius:1px;transform:rotate(45deg);flex:0 0 auto}
.ms-count,.ms-live,.ms-ok{margin-left:auto;font-size:11px;color:#c4b5fd}
.ms-live{color:#f0a5a5}
.ms-ok{color:#8ce6b8}
/* ① 选素材 */
.ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1;min-height:0}
.ms-cell{border-radius:9px;background:linear-gradient(135deg,#241b45,#171128);position:relative;
  border:1.5px solid transparent}
.ms-cell.on{border-color:#8b5cf6;box-shadow:0 0 0 2px rgba(139,92,246,.18)}
.ms-cell:nth-child(1){background:linear-gradient(135deg,#3a2450,#241b45)}
.ms-cell:nth-child(2){background:linear-gradient(135deg,#20304d,#171f33)}
.ms-cell:nth-child(4){background:linear-gradient(135deg,#4d2a33,#2b1a22)}
.ms-cell:nth-child(5){background:linear-gradient(135deg,#2a4a3d,#182b24)}
.ms-check{position:absolute;top:4px;right:4px;width:15px;height:15px;border-radius:50%;
  background:#8b5cf6;color:#fff;font-size:9px;font-style:normal;display:flex;
  align-items:center;justify-content:center}
.ms-tip{font-size:11px;color:#8f86b8;text-align:center}
.ms-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:10px;text-align:center;
  padding:9px 0;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px}
/* ② 自动剪辑 */
.ms-prog{height:7px;border-radius:4px;background:#241b45;overflow:hidden}
.ms-prog i{display:block;height:100%;width:62%;border-radius:4px;
  background:linear-gradient(90deg,#8b5cf6,#c084fc)}
.ms-todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ms-todo li{padding:9px 10px;border-radius:9px;background:rgba(139,92,246,.07);
  border:1px solid rgba(139,92,246,.16);font-size:12px;color:#cfc7ee}
.ms-todo li::before{content:'○';margin-right:7px;color:#6d5fae}
.ms-todo li.done{color:#9be8bc}
.ms-todo li.done::before{content:'✓';color:#8ce6b8}
.ms-todo li.doing{color:#f4f1ff;border-color:rgba(192,132,252,.45)}
.ms-todo li.doing::before{content:'●';color:#c084fc}
/* ③ 成片 */
.ms-player{flex:1;min-height:0;border-radius:11px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#3a2450 0%,#241b45 55%,#1a1430 100%);
  display:flex;align-items:center;justify-content:center}
.ms-play{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff}
.ms-sub{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 8px;text-align:center;
  font-size:11.5px;color:#fff;background:linear-gradient(transparent,rgba(10,8,20,.8))}
.ms-meta{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.ms-meta span{font-size:10.5px;color:#c4b5fd;padding:3px 8px;border-radius:20px;
  border:1px solid rgba(167,139,250,.3)}
.ms-row{display:flex;gap:8px}
.ms-mini{flex:1;text-align:center;padding:8px 0;border-radius:9px;font-size:12px;font-style:normal;
  border:1px solid rgba(167,139,250,.35);color:#d9d3f5}
.ms-mini--pri{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-color:transparent;
  font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .ms-prog i{animation:msProg 2.8s ease-in-out infinite alternate}
  @keyframes msProg{from{width:46%}to{width:78%}}
}

/* =====================================================================
   H. 成片示例：网页叠加主/副标题 + 5s 案例轮换 · 2026-10-10
   ===================================================================== */
.demo-tt{padding:9px 2px 0;text-align:center}
.demo-tt b{display:block;font-size:14px;color:#f4f1ff;font-weight:700}
.demo-tt span{display:inline-block;margin-top:4px;font-size:11px;color:#c4b5fd;
  padding:2px 9px;border-radius:20px;border:1px solid rgba(167,139,250,.3)}
.demo-slot .demo-tt{opacity:.5;transition:opacity .5s ease}
.demo-slot.live .demo-tt{opacity:1}
.demo-slot{transition:transform .5s ease}
.demo-slot .demo-vwrap{transition:border-color .5s ease,box-shadow .5s ease}
.demo-slot.live{transform:translateY(-4px)}
.demo-slot.live .demo-vwrap{border-color:rgba(167,139,250,.55);
  box-shadow:0 10px 34px rgba(139,92,246,.25)}
.demo-slot.live .demo-tt{opacity:1}
@media (prefers-reduced-motion:reduce){
  .demo-slot,.demo-slot .demo-tt,.demo-slot .demo-vwrap{transition:none}
}

/* =====================================================================
   I. 五环节示意图补充：对话出文案 / 数字人 · 2026-10-10
   ===================================================================== */
/* ① 对话出文案 */
.ms-bub{max-width:82%;padding:9px 11px;border-radius:13px;font-size:12px;line-height:1.55}
.ms-bub--me{align-self:flex-end;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;
  border-bottom-right-radius:4px}
.ms-bub--ai{align-self:flex-start;background:rgba(139,92,246,.12);color:#e4defa;
  border:1px solid rgba(139,92,246,.22);border-bottom-left-radius:4px}
.ms-chat{gap:9px}
.ms-chiprow{display:flex;gap:6px;flex-wrap:wrap}
.ms-chiprow span{font-size:10.5px;color:#c4b5fd;padding:3px 8px;border-radius:20px;
  border:1px solid rgba(167,139,250,.3)}
/* ③ 数字人 */
.ms-dhstage{flex:1;min-height:0;border-radius:11px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%,#3a2a60 0%,#221a3c 60%,#141024 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.ms-avatar{width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#c9a7ff,#8b5cf6);
  box-shadow:0 0 0 3px rgba(255,255,255,.14),0 0 26px rgba(139,92,246,.55)}
.ms-wave{display:flex;gap:4px;align-items:flex-end;height:22px}
.ms-wave i{width:4px;border-radius:2px;background:#c084fc;height:8px}
@media (prefers-reduced-motion:no-preference){
  .ms-wave i{animation:msWave 1s ease-in-out infinite}
  .ms-wave i:nth-child(2){animation-delay:.12s}
  .ms-wave i:nth-child(3){animation-delay:.24s}
  .ms-wave i:nth-child(4){animation-delay:.36s}
  .ms-wave i:nth-child(5){animation-delay:.48s}
  .ms-wave i:nth-child(6){animation-delay:.6s}
  .ms-wave i:nth-child(7){animation-delay:.72s}
  @keyframes msWave{0%,100%{height:7px}50%{height:22px}}
}

/* =====================================================================
   J. Hero 手机幕 3「一键发布」· 2026-10-10（替换原配音幕）
   ===================================================================== */
.pd-publist{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.pd-pubrow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);font-size:11.5px}
.pd-pubrow b{color:#f4f1ff;font-size:12px;flex:0 0 auto}
.pd-pubrow span{color:#b3a9d9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-pubrow i{margin-left:auto;flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  background:#34d399;color:#06281a;font-size:9px;font-style:normal;display:flex;
  align-items:center;justify-content:center;font-weight:700}
.pd-pubrow i.mut{background:rgba(192,132,252,.2);color:#c4b5fd;font-weight:400}