/* home.css — 首页（scripts/build-home.mjs 生成，<body class="v3 home">）在 v3.css 之上的增量：
 * 首屏行动按钮、产品截图、问题→模式、功能栅格、免费/买断对比表、底部行动区、移动端吸底按钮、语言菜单与语言提示条。
 * 令牌沿用 v3.css；全部规则以 .home 作用域开头。 */

/* ---------- 多语言字体 ---------- */
.home:lang(zh-Hant) { --f-ui: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif; }
.home:lang(ja) { --f-ui: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', Meiryo, system-ui, sans-serif; }
.home:lang(ko) { --f-ui: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif; }
.home:lang(ko) h1, .home:lang(ko) h2, .home:lang(ko) h3 { word-break: keep-all; }
.home .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 顶栏：语言菜单 ---------- */
.home .v3-langs { position: relative; }
.home .v3-langs summary {
  list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--hair-2); border-radius: var(--r-btn); color: var(--ink-dim); font-size: 13px; font-weight: 600; cursor: pointer;
}
.home .v3-langs summary::-webkit-details-marker { display: none; }
.home .v3-langs summary::after { display: none; }
.home .v3-langs summary svg { width: 16px; height: 16px; }
.home .v3-langs[open] summary, .home .v3-langs summary:hover { color: var(--ink); border-color: var(--brass-deep); }
.home .v3-langs ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 2px;
  background: var(--panel-2); border: 1px solid var(--hair-2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.home .v3-langs:not([open]) ul { display: none; }
.home .v3-langs a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink-dim); font-size: 14px; white-space: nowrap; }
.home .v3-langs a:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.home .v3-langs a[aria-current] { color: var(--brass-hi); font-weight: 700; }
.home .head-cta { display: none; }
.home .v3-login { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; border-radius: var(--r-btn); color: var(--ink-dim); font-size: 14px; }
.home .v3-login:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.home .v3-login svg { width: 18px; height: 18px; flex: none; }
.home .v3-login span { display: none; }
@media (min-width: 720px) { .home .v3-login span { display: inline; } }

/* 语言提示条（浏览器语言与本页不同、且未选过语言时出现） */
.home .lang-banner { background: var(--panel-2); border-bottom: 1px solid var(--hair-2); font-size: 14px; }
.home .lang-banner .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; }
.home .lang-banner a { color: var(--brass-hi); font-weight: 600; }
.home .lang-banner a::after { content: ' →'; }
.home .lang-banner button { width: 36px; height: 36px; border: 0; background: none; color: var(--ink-faint); font-size: 20px; cursor: pointer; }

/* 锚点跳转避开吸顶页头 */
.home section[id], .home details[id] { scroll-margin-top: 72px; }

/* ---------- 首屏 ---------- */
.home .home-hero h1 { font-size: 27px; line-height: 1.2; margin: 2px 0 8px; }
.home .home-hero .hero-sub { font-size: 14px; }
.home .hero-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 2px; }
.home .hero-play { min-height: 50px; padding: 0 28px; font-size: 17px; width: 100%; max-width: 340px; }
.home .hero-play span { transition: transform 150ms var(--ease); }
.home .hero-play:hover span { transform: translateX(3px); }
.home .hero-note { color: var(--ink-faint); font-size: 12px; margin: 0; }
.home .hero-chips { display: none; flex-wrap: wrap; justify-content: center; gap: 6px 14px; list-style: none; padding: 0; margin: 14px 0 4px; color: var(--ink-dim); font-size: 13px; }
.home .hero-chips li { display: inline-flex; align-items: center; gap: 6px; }
.home .hero-chips li::before { content: '✓'; color: var(--g-good); font-weight: 800; font-size: 12px; }

/* ---------- 产品截图 ---------- */
.home .shot-stage { position: relative; max-width: 1000px; margin: 0 auto; }
.home .shot-desk {
  margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair-2); background: #050806;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(212, 169, 79, .08);
}
.home .shot-desk .bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #111a15; border-bottom: 1px solid var(--hair); }
.home .shot-desk .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(236, 230, 214, .16); }
.home .shot-desk .bar span { margin-left: 10px; color: var(--ink-faint); font-size: 11px; letter-spacing: .02em; }
.home .shot-desk img, .home .shot-phone img { display: block; width: 100%; height: auto; }
.home .shot-phone {
  display: none; margin: 0; position: absolute; right: -12px; bottom: -36px; width: 21%; min-width: 150px;
  border-radius: 26px; overflow: hidden; border: 6px solid #0a0f0c; outline: 1px solid var(--hair-2);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .85);
}
.home .shot-points { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1000px; display: grid; gap: 14px; }
.home .shot-points li { display: flex; gap: 12px; align-items: flex-start; }
.home .shot-points .n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brass-soft); color: var(--brass-hi); font-size: 13px; font-weight: 700; border: 1px solid rgba(212, 169, 79, .35);
}
.home .shot-points b { color: var(--ink); font-size: 15px; }
.home .shot-points p { margin: 2px 0 0; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }

/* ---------- 问题 → 模式 ---------- */
.home .mode-pain { margin: 0 0 4px; color: var(--ink-faint); font-size: 13px; line-height: 1.4; }
.home .mode-pain::before { content: '“'; }
.home .mode-pain::after { content: '”'; }
.home .mode h3 { color: var(--brass-hi); }

/* ---------- 功能栅格 ---------- */
.home .feat-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.home .feat-grid li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--hair); }
.home .feat-grid svg { flex: none; width: 22px; height: 22px; color: var(--brass); margin-top: 2px; }
.home .feat-grid b { color: var(--ink); font-size: 15px; }
.home .feat-grid p { margin: 2px 0 0; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }

/* ---------- 价格：对比表 + 购买卡 ---------- */
.home .price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; align-items: start; }
.home .cmp-wrap { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--hair); background: var(--panel); }
.home .cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.home .cmp th, .home .cmp td { padding: 11px 12px; text-align: center; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.home .cmp tbody tr:last-child th, .home .cmp tbody tr:last-child td { border-bottom: 0; }
.home .cmp thead th { color: var(--ink-dim); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.home .cmp thead th.pro { color: var(--brass-hi); }
.home .cmp tbody th { text-align: left; color: var(--ink); font-weight: 500; }
.home .cmp td { color: var(--ink-dim); white-space: nowrap; }
.home .cmp td.pro { color: var(--ink); font-weight: 600; background: rgba(212, 169, 79, .05); }
.home .cmp .ck { color: var(--g-good); font-weight: 800; }

.home .buy-card {
  display: grid; gap: 10px; padding: 22px; border-radius: var(--r-card);
  background: radial-gradient(120% 80% at 100% 0%, rgba(212, 169, 79, .14), transparent 60%), var(--panel-2);
  border: 1px solid rgba(212, 169, 79, .4); box-shadow: 0 20px 50px -24px rgba(212, 169, 79, .35);
}
.home .buy-card .plan { margin: 0; color: var(--brass); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.home .buy-card .price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.home .buy-card .price-big { font-size: 44px; }
.home .buy-card .price-local { color: var(--ink-dim); font-size: 15px; font-weight: 600; }
.home .buy-card .once { margin: 0 0 6px; color: var(--ink); font-size: 14px; }
.home .buy-card .pay-note { margin: 4px 0 0; color: var(--ink-faint); font-size: 12px; line-height: 1.6; }
.home .buy-card .pay-note a { color: var(--brass); white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; vertical-align: middle; }
.home .pricing .price-fine { max-width: 1000px; margin: 16px auto 0; text-align: center; }

/* ---------- 底部行动区 ---------- */
.home .home-final {
  padding: 56px 0 64px; text-align: center; border-top: 1px solid var(--hair);
  background: radial-gradient(60% 80% at 50% 100%, rgba(31, 90, 63, .5), transparent 70%), var(--bg);
}
.home .home-final h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.25; color: var(--ink); }
.home .home-final p { margin: 0 0 20px; color: var(--ink-dim); font-size: 15px; }
.home .home-final .v3-btn { min-height: 54px; padding: 0 32px; font-size: 17px; }

/* ---------- 移动端吸底按钮（滚过首屏按钮后出现，到底部行动区时收起） ---------- */
.home .sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 19, 16, .94); border-top: 1px solid var(--hair-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform 220ms var(--ease);
}
.home .sticky-cta.show { transform: none; }
.home .sticky-cta .sc-price { color: var(--ink-dim); font-size: 13px; }
.home .sticky-cta .v3-btn { flex: none; min-width: 140px; }

/* ---------- 断点 ---------- */
/* 矮屏手机（iPhone SE 等）：首屏要同时放下标题、按钮和题卡选项 → 省掉副标题 */
@media (max-width: 759.98px) and (max-height: 700px) {
  .home .home-hero .hero-sub { display: none; }
  .home .home-hero h1 { font-size: 23px; margin-bottom: 4px; }
  .home .hero-note { display: none; }
  .home .v3-hero.home-hero { padding-top: 10px; }
  .home .hero-cta { margin-top: 10px; }
}
@media (min-width: 560px) {
  .home .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .home .head-cta { display: inline-flex; }
  .home .shot-phone { display: block; }
  .home .shot-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
  .home .home-final { padding: 88px 0 96px; }
  .home .home-final h2 { font-size: 34px; }
  .home .sticky-cta { display: none; }
}
@media (min-width: 760px) {
  .home .home-hero .hero-copy { padding-top: 40px; }
  .home .home-hero h1 { font-size: 44px; margin: 12px 0 14px; }
  .home .home-hero .hero-sub { font-size: 17px; max-width: 32em; }
  .home .hero-cta { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; margin-top: 28px; }
  .home .hero-note { margin: 0; align-self: center; }
  .home .hero-play { width: auto; }
  .home .hero-chips { display: flex; justify-content: flex-start; margin-top: 22px; }
  .home .home-hero .hero-copy .eyebrow { display: inline-flex; }
}
@media (min-width: 900px) {
  .home .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .home .price-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
  .home .buy-card { position: sticky; top: 76px; }
}
@media (min-width: 1024px) {
  .home .home-hero h1 { font-size: 50px; }
}
@media (max-height: 480px) and (min-width: 760px) {
  .home .home-hero h1 { font-size: 30px; }
  .home .hero-cta { margin-top: 14px; }
}