/* ==========================================================================
   小课通官网 · 用户端设计系统 v0.1
   零依赖、零 CDN，可 file:// 双击直接预览
   品牌主色取自 uni.scss: $uv-primary #00cba1
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* 品牌 */
  --brand: #00cba1;
  --brand-dark: #00a887;
  --brand-darker: #007a63;
  --brand-soft: #e3faf4;
  --brand-soft-2: #f2fcfa;
  --brand-line: #b9f0e2;

  /* 中性 */
  --ink: #10231f;
  --ink-2: #1d342f;
  --text: #3f514c;
  --muted: #7f8f8b;
  --muted-2: #a4b0ad;
  --line: #e7edeb;
  --line-2: #f0f4f3;
  --bg: #ffffff;
  --bg-alt: #f6faf9;
  --bg-deep: #0d211d;

  /* 状态色（对齐 uni.scss） */
  --success: #35b555;
  --warning: #fa6400;
  --error: #ff5555;
  --info: #b7bcc7;
  --accent: #ff8a3d;

  /* 模块分类色（浅底 + 深字，成对使用） */
  --c-green-bg: #e3faf4;   --c-green-fg: #00806a;
  --c-blue-bg: #e8f1ff;    --c-blue-fg: #1c5fd0;
  --c-violet-bg: #f0ecff;  --c-violet-fg: #5b40c4;
  --c-amber-bg: #fff3e3;   --c-amber-fg: #a25f00;
  --c-rose-bg: #ffeef0;    --c-rose-fg: #c0334c;
  --c-teal-bg: #e2f7fa;    --c-teal-fg: #076f7d;

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  /* 字号（流式） */
  --fs-hero: clamp(2rem, 1.35rem + 2.6vw, 3.15rem);
  --fs-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.24rem + 1.1vw, 2rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --fs-h4: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .8125rem;

  /* 间距 / 圆角 / 阴影 */
  --gap: 1.25rem;
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgba(16, 35, 31, .05), 0 2px 8px rgba(16, 35, 31, .04);
  --shadow: 0 6px 24px rgba(16, 35, 31, .07);
  --shadow-l: 0 16px 48px rgba(16, 35, 31, .1);

  --header-h: 68px;
  --container: 1180px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-dark); }
strong { color: var(--ink); font-weight: 600; }
em { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-soft); color: var(--brand-darker); }

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; }
.section { padding: clamp(48px, 4rem + 1vw, 88px) 0; }
.section-tight { padding: clamp(32px, 2.5rem + 1vw, 48px) 0; }
.section-alt { background: var(--bg-alt); }
.section-deep { background: var(--bg-deep); color: #cfe0dc; }
.section-deep h2, .section-deep h3, .section-deep strong { color: #fff; }
.section + .section { border-top: 1px solid solid; border-top: 1px solid var(--line-2); }
.section-alt + .section-alt, .section + .section-alt { border-top: 0; }
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.flex-wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.gap-s { gap: .5rem; }
.gap-m { gap: 1rem; }
.gap-l { gap: 2rem; }
.mt-s { margin-top: .5rem; } .mt-m { margin-top: 1rem; } .mt-l { margin-top: 2rem; }
.mb-m { margin-bottom: 1rem; } .mb-l { margin-bottom: 2rem; }
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4. 排版 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand-darker);
  background: var(--brand-soft); border-radius: var(--radius-pill); padding: 5px 14px;
}
.section-head { max-width: 760px; margin: 0 auto clamp(28px, 3vw, 48px); }
.section-head.left { margin-left: 0; text-align: left; }
.section-head h2 { font-size: var(--fs-h2); line-height: 1.35; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.section-head p { margin-top: .75rem; font-size: 1.0625rem; color: var(--muted); }
h3.title { font-size: var(--fs-h3); color: var(--ink); font-weight: 600; line-height: 1.45; }
.lead { font-size: 1.125rem; line-height: 1.85; color: var(--text); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.mono { font-family: var(--font-mono); font-size: .9em; }
.hl { color: var(--brand-dark); }
.tag-inline { color: var(--muted); font-size: var(--fs-sm); }
.placeholder-mark {
  border-bottom: 1px dashed var(--warning); color: var(--warning);
  font-size: .75em; vertical-align: super; cursor: help;
}

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; height: var(--header-h); gap: 2rem; }
.brand { display: flex; align-items: center; gap: .625rem; font-weight: 700; color: var(--ink); font-size: 1.125rem; flex: none; }
.brand:hover { color: var(--ink); }
.brand .logo { width: 34px; height: 34px; flex: none; }
.brand .brand-sub {
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: .625rem; margin-left: .125rem;
}
.nav-links { display: flex; align-items: center; gap: .25rem; flex: 1 1 auto; }
.nav-links > li > a {
  display: block; padding: 8px 14px; border-radius: var(--radius-s);
  font-size: .9375rem; color: var(--ink-2); font-weight: 500;
}
.nav-links > li > a:hover { background: var(--bg-alt); color: var(--brand-darker); }
.nav-links > li > a[aria-current="page"] { color: var(--brand-darker); font-weight: 600; }
.nav-links > li > a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; background: var(--brand);
  border-radius: 2px; margin-top: 2px;
}
.nav-cta { display: flex; align-items: center; gap: .75rem; flex: none; }
.nav-toggle { display: none; }

/* 下拉（纯 CSS hover/focus，不依赖 JS，保证爬虫与无脚本环境可见） */
.has-drop { position: relative; }
.has-drop .drop {
  position: absolute; left: 0; top: 100%; min-width: 224px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: .16s ease;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 9px 12px; border-radius: var(--radius-s); font-size: .9375rem; color: var(--ink-2); }
.drop a:hover { background: var(--brand-soft-2); color: var(--brand-darker); }
.drop .drop-t { font-size: var(--fs-xs); color: var(--muted-2); padding: 6px 12px 2px; }

/* 移动端抽屉 */
@media (max-width: 1023px) {
  .nav { gap: 1rem; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 9px; border: 1px solid var(--line);
    border-radius: var(--radius-s); background: #fff; cursor: pointer; margin-left: auto;
  }
  .nav-toggle span { height: 2px; background: var(--ink); border-radius: 2px; }
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 20px 20px;
    box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h)); overflow: auto;
    display: none;
  }
  body.nav-open .nav-links { display: flex; }
  .nav-links > li > a { padding: 13px 4px; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav-links > li > a[aria-current="page"]::after { display: none; }
  .has-drop .drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
  .drop a { font-size: .875rem; color: var(--muted); padding: 8px 4px; }
  .nav-cta { display: none; }
  .nav-links .mobile-cta { display: flex; margin-top: 14px; }
}
.nav-links .mobile-cta { display: none; }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 44px; padding: 0 22px; border-radius: var(--radius-pill);
  font-size: .9375rem; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: .15s ease;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-darker); }
.btn-soft { background: var(--brand-soft); color: var(--brand-darker); }
.btn-soft:hover { background: var(--brand-line); color: var(--brand-darker); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 1rem; }
.btn-sm { height: 34px; padding: 0 14px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.btn-link { color: var(--brand-darker); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.btn-link::after { content: "→"; transition: transform .15s; }
.btn-link:hover::after { transform: translateX(3px); }

/* ---------- 7. Card / badge ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; transition: .18s ease;
}
.card-hover:hover { border-color: var(--brand-line); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-flat { background: var(--bg-alt); border-color: transparent; }
.card h3.title { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .9375rem; }
.card-list { margin-top: .875rem; display: grid; gap: .375rem; }
.card-list li { font-size: var(--fs-sm); color: var(--text); display: flex; gap: .5rem; }
.card-list li::before { content: "·"; color: var(--brand); font-weight: 700; }

.icon-badge {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.25rem; flex: none;
  background: var(--brand-soft); color: var(--brand-darker); margin-bottom: 1rem;
}
.icon-badge.green { background: var(--c-green-bg); color: var(--c-green-fg); }
.icon-badge.blue { background: var(--c-blue-bg); color: var(--c-blue-fg); }
.icon-badge.violet { background: var(--c-violet-bg); color: var(--c-violet-fg); }
.icon-badge.amber { background: var(--c-amber-bg); color: var(--c-amber-fg); }
.icon-badge.rose { background: var(--c-rose-bg); color: var(--c-rose-fg); }
.icon-badge.teal { background: var(--c-teal-bg); color: var(--c-teal-fg); }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; background: var(--bg-alt); color: var(--muted);
}
.badge-new { background: var(--brand-soft); color: var(--brand-darker); }
.badge-hot { background: #ffeef0; color: #c0334c; }
.badge-free { background: #fff3e3; color: #a25f00; }
.badge-vip { background: #10231f; color: #ffd48a; }
.chip {
  display: inline-flex; align-items: center; gap: .375rem; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); color: var(--text); background: #fff;
}
.chip:hover { border-color: var(--brand); color: var(--brand-darker); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-darker); font-weight: 600; }

/* ---------- 8. Hero ---------- */
.hero {
  padding: clamp(48px, 5vw, 84px) 0 clamp(48px, 5vw, 80px);
  background:
    radial-gradient(120% 100% at 12% 0%, var(--brand-soft-2) 0%, rgba(242, 252, 250, 0) 62%),
    #fff;
  border-bottom: 1px solid var(--line);
}
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero h1 { font-size: var(--fs-hero); line-height: 1.22; letter-spacing: -.02em; color: var(--ink); font-weight: 800; }
.hero h1 .hl-line { display: block; }
.hero-sub { margin-top: 1.25rem; font-size: 1.125rem; color: var(--muted); max-width: 34em; }
.hero-actions { margin-top: 2rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-note { margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted-2); }
.hero-metrics { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); }
.hero-metrics .num { font-size: 1.75rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.hero-metrics .num i { font-style: normal; font-size: 1rem; color: var(--brand-dark); margin-left: 2px; }
.hero-metrics .lbl { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* 页头（内页通用） */
.page-head { padding: clamp(36px, 4vw, 64px) 0 clamp(28px, 3vw, 44px); background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--fs-h1); color: var(--ink); font-weight: 700; line-height: 1.3; }
.page-head p { margin-top: .875rem; max-width: 46em; color: var(--muted); font-size: 1.0625rem; }
.page-head .hero-actions { margin-top: 1.5rem; }

/* ---------- 9. 手机 mockup（纯 CSS，无图片） ---------- */
.phone {
  width: 300px; flex: none; background: #10231f; border-radius: 38px; padding: 10px;
  box-shadow: var(--shadow-l); margin: 0 auto;
}
.phone-screen { background: #fff; border-radius: 30px; overflow: hidden; aspect-ratio: 9 / 19; display: flex; flex-direction: column; }
.phone-bar { height: 26px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--muted-2); }
.phone-body { flex: 1; overflow: hidden; padding: 0 10px 10px; font-size: 11px; }
.phone-home { height: 22px; display: flex; align-items: center; justify-content: center; }
.phone-home::after { content: ""; width: 96px; height: 4px; border-radius: 4px; background: #10231f; opacity: .85; }
.ph-hero { background: var(--brand); color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 12px; font-weight: 600; }
.ph-hero small { display: block; font-weight: 400; opacity: .85; font-size: 10px; margin-top: 2px; }
.ph-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; margin-top: 8px; }
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; }
.ph-row + .ph-row { border-top: 1px dashed var(--line-2); }
.ph-name { color: var(--ink); font-weight: 600; }
.ph-pill { border-radius: 999px; padding: 1px 7px; font-size: 9px; background: var(--brand-soft); color: var(--brand-darker); }
.ph-pill.grey { background: var(--line-2); color: var(--muted); }
.ph-pill.amber { background: #fff3e3; color: #a25f00; }
.ph-tabs { display: flex; gap: 4px; margin-top: 8px; }
.ph-tabs i { flex: 1; height: 22px; border-radius: 6px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 9px; color: var(--muted); }
.ph-tabs i.on { background: var(--brand-soft); color: var(--brand-darker); font-weight: 600; }
.ph-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; margin-top: 8px; }
.ph-bars i { flex: 1; background: var(--brand-line); border-radius: 3px 3px 0 0; }
.ph-bars i.on { background: var(--brand); }
.phone-stack { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
.phone-stack .phone { position: absolute; }
.phone-stack .p1 { transform: translateX(-28%) rotate(-6deg) scale(.92); z-index: 1; }
.phone-stack .p2 { transform: translateX(28%) rotate(6deg) scale(.92); z-index: 1; }
.phone-stack .p3 { transform: none; z-index: 2; }
@media (max-width: 767px) {
  .phone { width: 262px; }
  .phone-stack { min-height: 480px; }
  .phone-stack .p1, .phone-stack .p2 { display: none; }
}

/* ---------- 10. Tab 切换 ---------- */
.tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.tab-btn {
  border: 1px solid var(--line); background: #fff; color: var(--text);
  padding: 9px 18px; border-radius: var(--radius-pill); cursor: pointer; font-size: .9375rem;
  font-weight: 500; white-space: nowrap;
}
.tab-btn:hover { border-color: var(--brand); color: var(--brand-darker); }
.tab-btn[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.tab-panel[hidden] { display: none; }
.tab-feature { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 3vw, 48px); align-items: center; }
@media (max-width: 1023px) { .tab-feature { grid-template-columns: 1fr; } }

/* 功能详解通用分栏：左文右图（.flip 反转） */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.split.flip > .split-copy { order: 2; }
.split.flip > .split-vis { order: 1; }
.split + .split { margin-top: clamp(40px, 5vw, 72px); }
.split h2 { font-size: var(--fs-h3); color: var(--ink); font-weight: 700; line-height: 1.45; }
.split h2 .num { font-family: var(--font-mono); color: var(--brand-dark); font-size: .8em; margin-right: .5em; }
.split p.sub { margin-top: .75rem; color: var(--muted); font-size: .9375rem; }
.kv-list { margin-top: 1.25rem; display: grid; gap: .75rem; }
.kv-list > li { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; font-size: .9375rem; align-items: start; }
.kv-list > li b { color: var(--ink); font-weight: 600; }
.kv-list > li span { color: var(--muted); }
.anchor-card { border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(22px, 3vw, 40px); background: #fff; }
.anchor-card + .anchor-card { margin-top: clamp(28px, 3vw, 44px); }
.mock {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt);
  padding: 16px; font-size: .8125rem; color: var(--muted);
}
.mock-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.mock-row + .mock-row { margin-top: 8px; }
.mock-row b { color: var(--ink); font-weight: 600; }
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > .split-copy { order: 1; }
  .split.flip > .split-vis { order: 2; }
  .kv-list > li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 11. 列表 / 文章 ---------- */
.article-item { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.article-item:last-child { border-bottom: 0; }
.article-thumb {
  width: 168px; aspect-ratio: 16 / 10; border-radius: var(--radius); flex: none;
  background: var(--brand-soft); display: flex; align-items: center; justify-content: center;
  color: var(--brand-darker); font-weight: 700; font-size: var(--fs-sm); text-align: center; padding: 8px;
}
.article-main { min-width: 0; flex: 1; }
.article-main h3 { font-size: 1.125rem; color: var(--ink); font-weight: 600; line-height: 1.5; }
.article-main h3 a:hover { color: var(--brand-darker); }
.article-main p { margin-top: .5rem; color: var(--muted); font-size: .9375rem; }
.article-meta { margin-top: .75rem; display: flex; align-items: center; gap: 14px; font-size: var(--fs-xs); color: var(--muted-2); flex-wrap: wrap; }
.article-meta time { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .article-item { gap: 14px; }
  .article-thumb { width: 104px; }
}

/* 正文排版 */
.prose { font-size: 1.0625rem; line-height: 1.9; color: var(--text); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 1.375rem; color: var(--ink); font-weight: 700; margin-top: 2em; padding-left: 12px; border-left: 4px solid var(--brand); line-height: 1.45; }
.prose h3 { font-size: 1.125rem; color: var(--ink); font-weight: 600; margin-top: 1.75em; }
.prose p { text-align: justify; }
.prose ul { padding-left: 1.25rem; }
.prose ul > li { list-style: disc; margin-top: .5em; }
.prose ol { padding-left: 1.25rem; }
.prose ol > li { list-style: decimal; margin-top: .5em; }
.prose strong { font-weight: 600; }
.prose a:not(.btn) { color: var(--brand-darker); border-bottom: 1px solid var(--brand-line); }
.prose img { border-radius: var(--radius); margin: 1.5em auto; border: 1px solid var(--line); }
.prose blockquote {
  padding: 14px 18px; background: var(--brand-soft-2); border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--ink-2); font-size: .9375rem;
}
.prose table { margin: 1.5em 0; font-size: .9375rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.prose th { background: var(--bg-alt); color: var(--ink); font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: .875em; background: var(--bg-alt); padding: 2px 6px; border-radius: 4px; }
.prose pre { background: #0f1f1c; color: #d7e7e3; padding: 18px; border-radius: var(--radius); overflow: auto; font-size: .875rem; }
.figure-note { font-size: var(--fs-sm); color: var(--muted-2); text-align: center; margin-top: .5rem !important; }
.step-hint {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--bg-alt); border-radius: var(--radius); font-size: .9375rem;
}
.step-hint b { color: var(--brand-darker); flex: none; }

/* 摘要卡 */
.summary-box { border: 1px solid var(--brand-line); background: var(--brand-soft-2); border-radius: var(--radius); padding: 18px 20px; }
.summary-box .t { font-size: var(--fs-sm); font-weight: 700; color: var(--brand-darker); letter-spacing: .02em; }
.summary-box p { margin-top: .5rem; font-size: .9375rem; color: var(--ink-2); }

/* ---------- 12. 面包屑 / 分页 / 侧栏 ---------- */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--muted); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--brand-darker); }
.breadcrumb .sep { color: var(--muted-2); }
.breadcrumb [aria-current] { color: var(--ink-2); }
.pager { display: flex; gap: .5rem; justify-content: center; align-items: center; margin-top: 2.5rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-s);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--text); background: #fff;
}
.pager a:hover { border-color: var(--brand); color: var(--brand-darker); }
.pager .cur { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager .dots { border: 0; background: none; }

.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.with-aside.left { grid-template-columns: 260px minmax(0, 1fr); }
@media (max-width: 1023px) { .with-aside, .with-aside.left { grid-template-columns: 1fr; } .aside { order: 2; } }
.aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
@media (max-width: 1023px) { .aside { position: static; } }
.aside-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: #fff; }
.aside-box > h4 { font-size: .9375rem; color: var(--ink); font-weight: 700; margin-bottom: .75rem; }
.side-nav a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--radius-s); font-size: .9375rem; color: var(--text); }
.side-nav a:hover { background: var(--bg-alt); color: var(--brand-darker); }
.side-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-darker); font-weight: 600; }
.toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); font-size: .875rem; color: var(--muted); }
.toc a:hover { border-left-color: var(--brand); color: var(--brand-darker); }
.toc .lv3 { padding-left: 24px; }

/* ---------- 13. FAQ / details ---------- */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 0 22px; }
.faq-item + .faq-item { margin-top: 12px; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.35rem; color: var(--brand-dark); font-weight: 400; flex: none; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 0 20px; color: var(--muted); font-size: .9375rem; border-top: 1px solid var(--line-2); padding-top: 14px; }
.faq-item .faq-body p + p { margin-top: .75rem; }

/* ---------- 14. 表格 / 价格 ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.cmp { min-width: 680px; font-size: .9375rem; }
.cmp th, .cmp td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); text-align: left; }
.cmp thead th { background: var(--bg-alt); color: var(--ink); font-weight: 700; position: sticky; top: 0; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td.yes { color: var(--brand-darker); font-weight: 600; }
.cmp td.no { color: var(--muted-2); }
.cmp .grp td { background: var(--brand-soft-2); font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.price-card { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; }
.price-card.featured { border-color: var(--brand); box-shadow: var(--shadow); }
.price-card .ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: var(--fs-xs); font-weight: 600;
  padding: 4px 14px; border-radius: var(--radius-pill); white-space: nowrap;
}
.price-card .pname { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.price-card .pdesc { font-size: var(--fs-sm); color: var(--muted); margin-top: .375rem; min-height: 2.6em; }
.price-value { margin: 18px 0 6px; display: flex; align-items: baseline; gap: 4px; }
.price-value .cur { font-size: 1.125rem; color: var(--ink); font-weight: 600; }
.price-value .val { font-size: 2.5rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.price-value .unit { font-size: var(--fs-sm); color: var(--muted); }
.price-feats { margin: 18px 0 24px; display: grid; gap: .625rem; }
.price-feats li { display: flex; gap: .5rem; font-size: .9375rem; }
.price-feats li i { font-style: normal; color: var(--brand-dark); font-weight: 700; }
.price-feats li.off { color: var(--muted-2); }
.price-feats li.off i { color: var(--muted-2); }

/* ---------- 15. 时间线 / 更新日志 ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 28px; }
.tl-item::before {
  content: ""; position: absolute; left: -26px; top: 6px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--brand);
}
.tl-item.minor::before { border-color: var(--line); }
.tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-head .ver { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.tl-body { margin-top: .625rem; display: grid; gap: .375rem; }
.tl-body li { font-size: .9375rem; color: var(--text); display: flex; gap: .5rem; }
.tl-body li em { flex: none; font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: 4px; height: fit-content; margin-top: 3px; }
.tl-body li.new em { background: var(--brand-soft); color: var(--brand-darker); }
.tl-body li.opt em { background: var(--c-blue-bg); color: var(--c-blue-fg); }
.tl-body li.fix em { background: #ffeef0; color: #c0334c; }

/* ---------- 16. 视频卡 ---------- */
.video-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: .18s; }
.video-card:hover { box-shadow: var(--shadow); border-color: var(--brand-line); }
.video-cover {
  position: relative; aspect-ratio: 16 / 9; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
}
.video-cover::after {
  content: ""; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
}
.video-cover::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-45%, -50%);
  width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--brand-dark); z-index: 1;
}
.video-cover .dur {
  position: absolute; right: 10px; bottom: 10px; background: rgba(16, 35, 31, .8); color: #fff;
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.video-cover .cat { position: absolute; left: 10px; top: 10px; background: #fff; color: var(--brand-darker); font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.video-card:hover::after { background: var(--brand); }
.video-info { padding: 14px 16px 16px; }
.video-info h3 { font-size: 1rem; color: var(--ink); font-weight: 600; line-height: 1.5; }
.video-info p { margin-top: .375rem; font-size: var(--fs-sm); color: var(--muted); }
.video-ep { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-s); font-size: .9375rem; }
.video-ep:hover { background: var(--bg-alt); }
.video-ep .no { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-alt); color: var(--muted); font-size: var(--fs-xs); display: flex; align-items: center; justify-content: center; flex: none; }
.video-ep.playing { background: var(--brand-soft); color: var(--brand-darker); font-weight: 600; }
.video-ep .dur { margin-left: auto; font-size: var(--fs-xs); color: var(--muted-2); }
.player { background: #0d211d; border-radius: var(--radius-l); aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9fb8b3; gap: 12px; }
.player .big-play { width: 72px; height: 72px; border-radius: 50%; background: var(--brand); position: relative; }
.player .big-play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }

/* ---------- 17. 表单 / 搜索 ---------- */
.field { display: grid; gap: .375rem; }
.field > label { font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.field .req { color: var(--error); margin-left: 2px; }
.input, .select, .textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: #fff; font-size: .9375rem; transition: .15s;
}
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.textarea { min-height: 112px; resize: vertical; }
.hint { font-size: var(--fs-xs); color: var(--muted-2); }
.search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-pill); padding: 6px 6px 6px 18px; }
.search-box input { flex: 1; border: 0; outline: 0; font-size: .9375rem; min-width: 0; background: none; }
.search-box .btn { flex: none; }
.radio-cards { display: grid; gap: 12px; }
.radio-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; background: #fff; }
.radio-card:hover { border-color: var(--brand-line); }
.radio-card.on { border-color: var(--brand); background: var(--brand-soft-2); }
.radio-card .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; margin-top: 3px; }
.radio-card.on .dot { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 5px, #fff 5px); }
.radio-card b { color: var(--ink); font-size: .9375rem; display: block; }
.radio-card span { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- 18. CTA / 二维码 ---------- */
.cta-band { background: var(--bg-deep); border-radius: var(--radius-l); padding: clamp(28px, 4vw, 52px); color: #b9cec9; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.cta-band h2 { color: #fff; font-size: var(--fs-h2); line-height: 1.4; }
.cta-band p { margin-top: .625rem; font-size: .9375rem; }
.cta-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 767px) { .cta-band { grid-template-columns: 1fr; } }
.qr { width: 132px; height: 132px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 8px; }
.qr-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(11, 1fr); grid-auto-rows: 1fr; gap: 2px; }
.qr-grid i { background: var(--ink); border-radius: 1px; }
.qr-grid i.o { background: transparent; }
.qr-cap { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-top: .5rem; }

/* 步骤 */
.steps { display: grid; gap: 16px; counter-reset: st; }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .steps-4 { grid-template-columns: 1fr; } }
.step { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; counter-increment: st; }
.step::before {
  content: counter(st, decimal-leading-zero); font-family: var(--font-mono);
  font-size: .8125rem; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-soft); border-radius: 6px; padding: 2px 8px; display: inline-block;
}
.step h3 { font-size: 1rem; color: var(--ink); margin-top: .75rem; font-weight: 600; }
.step p { font-size: var(--fs-sm); color: var(--muted); margin-top: .375rem; }

/* 数字对比 / 痛点 */
.pain-list { display: grid; gap: 10px; }
.pain-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--text); }
.pain-list li::before { content: "✕"; color: var(--error); font-weight: 700; flex: none; }
.tick-list { display: grid; gap: 10px; }
.tick-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.tick-list li::before { content: "✓"; color: var(--brand-dark); font-weight: 700; flex: none; }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) { .vs-grid { grid-template-columns: 1fr; } }
.vs-col { border-radius: var(--radius); padding: 22px; }
.vs-col.before { background: #fbf3f3; border: 1px solid #f3dcdc; }
.vs-col.after { background: var(--brand-soft-2); border: 1px solid var(--brand-line); }

/* 报价/数据条 */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
@media (max-width: 767px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-strip .num { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 800; color: var(--brand-darker); letter-spacing: -.02em; }
.stat-strip .lbl { font-size: var(--fs-sm); color: var(--muted); margin-top: .25rem; }

/* 头像 */
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-darker); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.quote-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 16px; }
.quote-card .q { color: var(--ink-2); font-size: .9375rem; line-height: 1.8; flex: 1; }
.quote-who { display: flex; align-items: center; gap: 12px; }
.quote-who b { display: block; color: var(--ink); font-size: .9375rem; }
.quote-who span { font-size: var(--fs-xs); color: var(--muted); }

/* 行业/角色选择 */
.persona-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; text-align: left; display: block; }
.persona-card:hover { border-color: var(--brand); box-shadow: var(--shadow-s); }
.persona-card .emoji { font-size: 1.5rem; }
.persona-card b { display: block; margin-top: .5rem; color: var(--ink); font-size: .9375rem; }
.persona-card span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 19. Footer ---------- */
.site-footer { background: #0d211d; color: #93aca7; padding: clamp(40px, 5vw, 64px) 0 24px; font-size: .9375rem; margin-top: 0; }
.site-footer a { color: #93aca7; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand { color: #fff; }
.footer-brand .brand .brand-sub { color: #6f8983; border-left-color: #24413b; }
.footer-brand p { margin-top: 1rem; color: #7e9994; font-size: var(--fs-sm); max-width: 30em; }
.footer-col h4 { color: #fff; font-size: .9375rem; font-weight: 700; margin-bottom: 1rem; }
.footer-col li + li { margin-top: .625rem; }
.footer-col a { font-size: var(--fs-sm); }
.footer-bottom {
  margin-top: clamp(28px, 4vw, 48px); padding-top: 20px; border-top: 1px solid #1b3731;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--fs-xs); color: #6f8983;
}
.footer-bottom .icp a { color: #6f8983; }
.footer-legal { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 20. 其他工具类 ---------- */
.notice-bar { background: var(--brand-soft); color: var(--brand-darker); font-size: var(--fs-sm); padding: 9px 0; text-align: center; }
.notice-bar b { color: var(--brand-darker); }
.divider-text { display: flex; align-items: center; gap: 14px; color: var(--muted-2); font-size: var(--fs-sm); margin: 2rem 0; }
.divider-text::before, .divider-text::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.kbd { font-family: var(--font-mono); font-size: .75rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--bg-alt); color: var(--ink-2); }
.anchor-offset { scroll-margin-top: calc(var(--header-h) + 16px); }
.backtop {
  position: fixed; right: 20px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--muted);
  display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 40;
}
body.scrolled .backtop { display: flex; }
.backtop:hover { color: var(--brand-darker); border-color: var(--brand-line); }
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { flex: 1; }
@media (max-width: 767px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 68px; }
  .backtop { bottom: 84px; }
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff; padding: 8px 16px; z-index: 99; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; color: #fff; }

/* ---------- 21. 打印 / 减弱动效 ---------- */
@media print {
  .site-header, .site-footer, .mobile-bar, .backtop, .cta-band, .hero-actions { display: none !important; }
  body { color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}
/* ---------- 22. 窄屏微调 ---------- */
@media (max-width: 639px) {
  .container { padding: 0 18px; }
  .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero-metrics { gap: 18px 28px; }
  .faq-item { padding: 0 16px; }
  .card { padding: 20px; }
  .btn-lg { height: 48px; padding: 0 22px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 23. 完全免费主张 ---------- */
.free-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--brand); color: #fff; padding: 10px 0; font-size: .9375rem; font-weight: 600;
}
.free-strip b { font-weight: 800; }
.free-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); }
.price-zero { display: flex; align-items: baseline; gap: 6px; }
.price-zero .val { font-size: 3rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.price-zero .cur { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.price-zero .unit { font-size: var(--fs-sm); color: var(--muted); }
.free-check { display: grid; gap: .625rem; }
.free-check li { display: flex; gap: .5rem; font-size: .9375rem; color: var(--text); }
.free-check li::before { content: "✓"; color: var(--brand-dark); font-weight: 800; flex: none; }
.free-check li.no::before { content: "✕"; color: var(--error); }

/* ---------- 24. 滚动展示（品牌墙 / 评价墙） ---------- */
.marquee { position: relative; overflow: hidden; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 72px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(255,255,255,0) 100%); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg) 0%, rgba(255,255,255,0) 100%); }
.section-alt .marquee::before { background: linear-gradient(90deg, var(--bg-alt) 0%, rgba(246,250,249,0) 100%); }
.section-alt .marquee::after { background: linear-gradient(270deg, var(--bg-alt) 0%, rgba(246,250,249,0) 100%); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee-x 42s linear infinite; will-change: transform; }
.marquee-track.rev { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee.slow .marquee-track { animation-duration: 64s; }
.marquee.fast .marquee-track { animation-duration: 26s; }
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-stack { display: grid; gap: 16px; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee::before, .marquee::after { display: none; }
  .marquee { overflow-x: auto; }
}

/* 品牌卡 */
.brand-card {
  flex: none; width: 228px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; align-items: center; gap: 12px;
}
.brand-card:hover { border-color: var(--brand-line); }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: .9375rem; color: #fff; background: var(--brand-dark);
  letter-spacing: -.02em;
}
.brand-mark.c1 { background: #00a887; } .brand-mark.c2 { background: #1c5fd0; }
.brand-mark.c3 { background: #5b40c4; } .brand-mark.c4 { background: #a25f00; }
.brand-mark.c5 { background: #c0334c; } .brand-mark.c6 { background: #076f7d; }
.brand-card .bn { min-width: 0; }
.brand-card .bn b { display: block; font-size: .9375rem; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-card .bn span { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* 评价卡（滚动墙里用） */
.t-card {
  flex: none; width: 328px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
}
.t-card .q { font-size: .9375rem; line-height: 1.75; color: var(--ink-2); flex: 1; }
.t-card .who { display: flex; align-items: center; gap: 10px; }
.t-card .who b { display: block; font-size: .875rem; color: var(--ink); }
.t-card .who span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.t-card .stars { color: var(--brand-dark); font-size: .8125rem; letter-spacing: .1em; }
.avatar.a1 { background: var(--c-green-bg); color: var(--c-green-fg); }
.avatar.a2 { background: var(--c-blue-bg); color: var(--c-blue-fg); }
.avatar.a3 { background: var(--c-violet-bg); color: var(--c-violet-fg); }
.avatar.a4 { background: var(--c-amber-bg); color: var(--c-amber-fg); }
.avatar.a5 { background: var(--c-rose-bg); color: var(--c-rose-fg); }
.avatar.a6 { background: var(--c-teal-bg); color: var(--c-teal-fg); }

/* ---------- 25. 真截图（手机框）----------
   默认：自然比例，绝不拉伸。截图是整页长图（420×871 ≈ 1:2.07），
   需要紧凑时加 .shot--win，用 aspect-ratio 开一个「窗口」裁掉下半截，
   而不是给 img 写 height:100%（那种写法在父级高度为 auto 时会退化成拉伸）。 */
.shot { --shot-w: 232px; width: var(--shot-w); flex: none; }
.shot-frame {
  background: #10231f; border-radius: 26px; padding: 7px; box-shadow: var(--shadow);
}
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 20px; background: #fff; }
.shot--win .shot-frame { aspect-ratio: 9 / 16.5; overflow: hidden; }
/* 两轴都必须显式声明：只写 height:100% 而不写 width 时，img 会保留内在宽高，
   在窗口内被拉高或留缝 —— 实测渲染比 0.603 vs 窗口 0.545。cover + 双轴 100% 才是"裁切"而非"拉伸"。 */
.shot--win .shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot-cap { margin-top: .625rem; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.shot-row { display: flex; gap: clamp(14px, 2.5vw, 28px); justify-content: center; flex-wrap: wrap; align-items: flex-start; }
@media (max-width: 767px) { .shot { --shot-w: 200px; } }
.shots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 22px 18px; justify-items: center; align-items: start; }
.shots-grid .shot { --shot-w: 100%; max-width: 216px; }
.shots-grid .shot-cap { min-height: 2.2em; }

/* 公众号引导 */
.wechat-card {
  display: flex; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--brand-line);
  border-radius: var(--radius-l); padding: 22px 24px;
}
.wechat-card img { width: 118px; height: 118px; border-radius: 12px; flex: none; border: 1px solid var(--line); }
.wechat-card h3 { font-size: 1.0625rem; color: var(--ink); font-weight: 700; }
.wechat-card p { font-size: .9375rem; color: var(--muted); margin-top: .375rem; }
@media (max-width: 639px) { .wechat-card { flex-direction: column; text-align: center; } }

/* ---------- 26. 滚动墙：横向全屏 + JS 驱动 + 可见控制 ---------- */
.marquee { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.mq-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.mq-viewport::-webkit-scrollbar { display: none; }
.mq-track {
  display: flex; gap: 16px; width: max-content;
  padding: 4px max(20px, calc((100vw - var(--container)) / 2)) 8px;   /* 首尾对齐正文宽度，卡片不贴屏幕边 */
}
.marquee[data-playing="true"] .mq-track { will-change: scroll-position; }
.mq-ctrl { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 14px; }
.mq-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  color: var(--ink-2); cursor: pointer; font-size: .875rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.mq-btn:hover { border-color: var(--brand); color: var(--brand-darker); }
.mq-hint { font-size: var(--fs-xs); color: var(--muted-2); margin-left: 6px; }

/* 品牌卡：上图下名，像一块真实的机构展示位 */
.brand-card {
  flex: none; width: 268px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: block;
}
.brand-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-s); }
.brand-card .bc-img { display: block; aspect-ratio: 4 / 3; background: var(--brand-soft-2); }
.brand-card .bc-img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-card .bn { padding: 12px 14px 14px; display: flex; align-items: center; gap: 10px; }
.brand-card .bn b { display: block; font-size: .9375rem; color: var(--ink); font-weight: 600; }
.brand-card .bn span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

/* 评价卡：头像 + 原话 + 署名 */
.t-card {
  flex: none; width: 344px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.t-card .q { font-size: .9375rem; line-height: 1.75; color: var(--ink-2); flex: 1; }
.t-card .who { display: flex; align-items: center; gap: 12px; }
.t-card .who b { display: block; font-size: .9375rem; color: var(--ink); }
.t-card .who span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.t-card .ph { width: 46px; height: 46px; border-radius: 50%; flex: none; object-fit: cover; background: var(--brand-soft); }
.t-card .stars { color: var(--brand-dark); font-size: .8125rem; letter-spacing: .1em; }
@media (max-width: 639px) {
  .brand-card { width: 226px; }
  .t-card { width: 296px; }
}

/* 截图 + 简介 组合块：图用窗口裁切保持紧凑，文案顶部对齐，不再出现大片空白 */
.shot-card { display: flex; gap: clamp(18px, 3vw, 34px); align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px; background: #fff; }
.shot-card + .shot-card { margin-top: 18px; }
.shot-card .shot { --shot-w: 214px; }
.shot-card .sc-body { min-width: 0; flex: 1; }
.shot-card h3 { font-size: 1.125rem; color: var(--ink); font-weight: 700; }
.shot-card .sc-tag { font-size: var(--fs-xs); color: var(--brand-darker); background: var(--brand-soft); border-radius: var(--radius-pill); padding: 2px 10px; display: inline-block; margin-bottom: .5rem; }
.shot-card p { font-size: .9375rem; color: var(--muted); margin-top: .5rem; line-height: 1.75; }
.shot-card ul { margin-top: .75rem; display: grid; gap: .375rem; }
.shot-card ul li { font-size: var(--fs-sm); color: var(--text); display: flex; gap: .5rem; }
.shot-card ul li::before { content: "·"; color: var(--brand); font-weight: 700; }
.shot-card.flip { flex-direction: row-reverse; }
@media (max-width: 767px) {
  .shot-card, .shot-card.flip { flex-direction: column; align-items: center; }
  .shot-card .shot { --shot-w: 200px; margin: 0 auto; }
  .shot-card .sc-body { width: 100%; }
}

/* ---------- 27. 首屏真截图叠放 ---------- */
.shot-stack { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.shot-stack .shot { position: absolute; }
.shot-stack .s1 { transform: translateX(-31%) rotate(-6deg) scale(.9); z-index: 1; }
.shot-stack .s2 { transform: translateX(31%) rotate(6deg) scale(.9); z-index: 1; }
.shot-stack .s3 { transform: none; z-index: 2; }
.shot-stack .shot { --shot-w: 262px; }
@media (max-width: 1023px) { .shot-stack { min-height: 520px; } .shot-stack .s1, .shot-stack .s2 { display: none; } }

/* ---------- 28. 关注公众号弹窗（点「免费开始使用」时引导） ---------- */
.wx-mask {
  position: fixed; inset: 0; background: rgba(13, 33, 29, .55); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.wx-mask[hidden] { display: none; }
.wx-modal {
  background: #fff; border-radius: var(--radius-l); padding: 26px 26px 22px; max-width: 420px; width: 100%;
  position: relative; box-shadow: var(--shadow-l); text-align: center;
}
.wx-modal .wx-close {
  position: absolute; right: 12px; top: 10px; width: 32px; height: 32px; border: 0; background: none;
  font-size: 1.25rem; color: var(--muted); cursor: pointer; border-radius: 50%;
}
.wx-modal .wx-close:hover { background: var(--bg-alt); color: var(--ink); }
.wx-modal h3 { font-size: 1.1875rem; color: var(--ink); font-weight: 700; }
.wx-modal .wx-sub { font-size: .9375rem; color: var(--muted); margin-top: .375rem; }
.wx-modal img { width: 168px; height: 168px; margin: 16px auto 8px; border-radius: 12px; border: 1px solid var(--line); display: block; }
.wx-steps { text-align: left; margin: 14px 0 4px; display: grid; gap: .5rem; }
.wx-steps li { display: flex; gap: .5rem; font-size: .9375rem; color: var(--text); }
.wx-steps li i { font-style: normal; font-weight: 700; color: var(--brand-dark); flex: none; }
.wx-modal .wx-alt { font-size: var(--fs-sm); color: var(--muted); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.wx-modal .wx-alt b { font-family: var(--font-mono); }
@media (max-width: 639px) { .wx-modal { padding: 22px 18px 18px; } .wx-modal img { width: 148px; height: 148px; } }

/* ==========================================================================
   29. 首屏升级 hero-x —— 深色沉浸式 / 玻璃质感 / 品牌光晕
   约束：不执行 JS、不播放动画时，所有信息仍然完整可读；动效只是加分项，
   且遵循 prefers-reduced-motion 降级（本机可能就是 reduce）。
   ========================================================================== */
.hero.hero-x {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(56px, 6vw, 96px) 0 clamp(84px, 7vw, 108px);
  background:
    radial-gradient(90% 70% at 78% 22%, rgba(0, 168, 135, .20), transparent 62%),
    radial-gradient(70% 60% at 8% 92%, rgba(23, 96, 180, .16), transparent 66%),
    linear-gradient(155deg, #081b18 0%, #0b2621 48%, #081a17 100%);
  border-bottom: 0; color: #c6ddd6;
}
.hero-x .container { position: relative; z-index: 2; }
.hero-x__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-x__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(78% 72% at 52% 34%, #000 0%, transparent 78%);
  mask-image: radial-gradient(78% 72% at 52% 34%, #000 0%, transparent 78%);
}
.hero-x__orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero-x__orb--a { width: 560px; height: 560px; left: -180px; top: -300px; background: rgba(0, 203, 161, .45); opacity: .5; }
.hero-x__orb--b { width: 480px; height: 480px; right: -160px; bottom: -300px; background: rgba(41, 130, 255, .30); opacity: .42; }
.hero-x__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 1;
  pointer-events: none; background: linear-gradient(to bottom, rgba(8, 26, 23, 0), #fff);
}

.hero-x__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm); font-weight: 500; color: #c9e6dd;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: var(--radius-pill); padding: 7px 16px 7px 12px;
}
.hero-x__eyebrow .live-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; background: #4cf5c2;
  box-shadow: 0 0 0 4px rgba(76, 245, 194, .16), 0 0 14px rgba(76, 245, 194, .9);
  animation: xktPulse 2.6s ease-in-out infinite;
}
.hero-x__eyebrow a { color: #8ff6d4; text-decoration: underline; text-underline-offset: 3px; }
.hero-x__eyebrow a:hover { color: #fff; }
@keyframes xktPulse { 50% { box-shadow: 0 0 0 8px rgba(76, 245, 194, .04), 0 0 20px rgba(76, 245, 194, .9); } }

.hero-x h1 {
  margin-top: 1.5rem; color: #fff; font-weight: 800;
  font-size: clamp(2.35rem, 1.2rem + 3.5vw, 4.05rem);
  line-height: 1.16; letter-spacing: -.035em;
}
.hero-x h1 .hl-line { display: block; }
.hero-x__grad {
  background: linear-gradient(100deg, #9dffe4 0%, #22dcb2 44%, #d9fff2 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero-x .hero-sub { color: #adcbc2; font-size: 1.0625rem; max-width: 33em; margin-top: 1.25rem; }
.hero-x__caps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.hero-x__cap {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: #bcd8d0; padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .045);
}
.hero-x__cap i { width: 5px; height: 5px; border-radius: 50%; background: #3ce7b7; font-style: normal; flex: none; }
.hero-x .hero-actions { margin-top: 1.75rem; }
.hero-x .btn-primary {
  background: linear-gradient(135deg, #16e2b6, #00b88d);
  box-shadow: 0 12px 30px rgba(0, 203, 161, .26), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.hero-x .btn-primary:hover { background: linear-gradient(135deg, #28efc4, #00a987); color: #fff; transform: translateY(-1px); }
.hero-x .btn-ghost {
  background: rgba(255, 255, 255, .06); color: #fff;
  border-color: rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-x .btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .42); }
.hero-x .hero-note { color: #85a79e; }
.hero-x .hero-metrics {
  display: flex; flex-wrap: nowrap; gap: 0; max-width: 600px;
  margin-top: 2.25rem; padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.hero-x .hero-metrics > div { flex: 1 1 0; min-width: 0; padding: 0 16px; border-right: 1px solid rgba(255, 255, 255, .11); }
.hero-x .hero-metrics > div:first-child { padding-left: 0; }
.hero-x .hero-metrics > div:last-child { border-right: 0; }
.hero-x .hero-metrics .num { color: #fff; font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.hero-x .hero-metrics .num i { color: #7ff0cd; }
.hero-x .hero-metrics .lbl { color: #8fb2a9; font-size: var(--fs-xs); }
.hero-x__foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(30px, 4vw, 54px); padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  color: #83a69d; font-size: var(--fs-xs);
}
.hero-x__foot a { color: #b9ead9; }
.hero-x__foot a:hover { color: #fff; }

/* 产品舞台：设备 + 玻璃浮卡 + 光环，纯 CSS，不用额外图片 */
.hero-x__stage {
  position: relative; min-height: 530px; display: flex; align-items: center; justify-content: center;
  -webkit-perspective: 1100px; perspective: 1100px;
}
.hero-x__glow {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 203, 161, .32), transparent 68%); filter: blur(24px);
}
.hero-x__ring { position: absolute; width: 440px; height: 440px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .10); }
.hero-x__ring--2 { width: 590px; height: 590px; border-color: rgba(255, 255, 255, .05); }
.hero-x__device {
  position: relative; z-index: 3; width: 252px;
  -webkit-transform: rotateY(-8deg) rotateX(3deg); transform: rotateY(-8deg) rotateX(3deg);
}
.hero-x__device .shot { width: 100%; }
.hero-x__device .shot-frame {
  border-radius: 32px; padding: 6px;
  background: linear-gradient(155deg, #34574e 0%, #0a1d19 45%, #24453d 100%);
  box-shadow: 0 44px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hero-x__device .shot-frame img { border-radius: 26px; }
.hero-x__device::after {
  content: ""; position: absolute; inset: 0; border-radius: 32px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .14), transparent 42%);
}
.hero-x__float {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 14px;
  background: rgba(15, 40, 34, .76);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
  color: #eef9f5; font-size: var(--fs-sm); white-space: nowrap;
}
.hero-x__float b { display: block; font-size: var(--fs-xs); color: #9cc2b8; font-weight: 500; }
.hero-x__float .fx-icon {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: rgba(0, 203, 161, .18); color: #66f2c8;
  display: grid; place-items: center; font-size: 14px;
}
.hero-x__float--a { top: 15%; left: -1%; animation: xktFloat 6s ease-in-out infinite; }
.hero-x__float--b { bottom: 18%; right: -3%; animation: xktFloat 7.4s ease-in-out infinite reverse; }
@keyframes xktFloat { 50% { -webkit-transform: translateY(-9px); transform: translateY(-9px); } }

@media (max-width: 1023px) {
  .hero-x .hero-inner { grid-template-columns: 1fr; gap: 1rem; }
  .hero-x .hero-visual { order: 0; }
  .hero-x__stage { min-height: 460px; }
  .hero-x__float { display: none; }
  .hero-x__foot { margin-top: 32px; }
}
@media (max-width: 639px) {
  .hero-x h1 { font-size: clamp(2.1rem, 1.3rem + 5.6vw, 2.8rem); }
  .hero-x .hero-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .hero-x .hero-metrics > div { border-right: 0; padding: 0 12px; }
  .hero-x .hero-metrics > div:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .11); padding-left: 0; }
  .hero-x__stage { min-height: 400px; }
  .hero-x__device { width: 200px; }
  .hero-x__ring { width: 320px; height: 320px; }
  .hero-x__ring--2 { width: 420px; height: 420px; }
  .hero-x__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-x__eyebrow .live-dot, .hero-x__float { animation: none !important; }
}

/* ==========================================================================
   30. 实拍画廊：横向滑动 + 滚动吸附（把 6 组图文 + 12 张小图压到一屏高度）
   ========================================================================== */
.shots-carousel { position: relative; }
.sc-viewport {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  border-radius: var(--radius-l);
}
.sc-viewport::-webkit-scrollbar { display: none; }
.sc-viewport:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.sc-track { display: flex; gap: 18px; width: 100%; padding: 2px 0 4px; }
.sc-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.sc-slide .shot-card { align-items: center; padding: 18px 20px; border-radius: var(--radius-l); }
.sc-slide .shot { --shot-w: 172px; flex: none; }
.sc-slide .shot--win .shot-frame { aspect-ratio: 9 / 13.2; }
.sc-slide .shot-card p { margin-top: .4rem; line-height: 1.65; }
.sc-slide .shot-card ul { margin-top: .5rem; gap: .25rem; }
.sc-viewport.is-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; scroll-behavior: auto; }
.sc-ctrl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.sc-nav { display: flex; align-items: center; gap: 8px; }
.sc-arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1; transition: .15s ease;
}
.sc-arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-darker); box-shadow: var(--shadow-s); }
.sc-arrow:disabled { opacity: .35; cursor: default; }
.sc-hint { font-size: var(--fs-xs); color: var(--muted-2); margin-left: 4px; }
.sc-dots { display: flex; align-items: center; gap: 6px; }
.sc-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: .2s ease; }
.sc-dot.is-active { width: 24px; background: var(--brand); }
.sc-count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-count b { color: var(--ink); font-weight: 700; }
.shots-rail .sr-viewport {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  scroll-behavior: smooth; scrollbar-width: thin; padding-bottom: 8px;
}
.shots-rail .sr-viewport::-webkit-scrollbar { height: 6px; }
.shots-rail .sr-viewport::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.shots-rail .sr-track { display: flex; gap: 16px; width: max-content; padding: 4px 2px 8px; }
.shots-rail .shot { --shot-w: 148px; scroll-snap-align: start; }
.shots-rail .shot--win .shot-frame { aspect-ratio: 9 / 13.2; }
.shots-rail .shot-cap { font-size: var(--fs-xs); }
@media (max-width: 767px) {
  .sc-slide .shot-card, .sc-slide .shot-card.flip { flex-direction: column; align-items: center; gap: 14px; }
  .sc-slide .shot { --shot-w: 150px; }
  .sc-slide .shot-card .sc-body { width: 100%; }
  .shots-rail .shot { --shot-w: 132px; }
  .sc-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-viewport, .shots-rail .sr-viewport { scroll-behavior: auto; }
}

/* 31. 站内搜索动态结果 */
#s-empty[hidden] { display: none; }
.s-result-empty { text-align: center; padding: clamp(28px, 4vw, 48px) 0; }
.s-result-empty .empty-glyph { font-size: 2.25rem; margin-bottom: .75rem; }
.s-none-title { font-size: 1.25rem; color: var(--ink); font-weight: 700; }