/* ============================================================
   宣传页（intro.html）· 严格按 Apple 参考实现
   —— 黑色展台：Carbon #111 画布 / Absolute Black #000 舞台 /
      巨号 Display 600 标题 / 彩色只在购买与链接处出现。
   参考里的 Do & Don't 逐条落实：
     · hero 后面不放渐变，舞台就是纯黑；
     · 卡片与媒体块 28px 圆角、**不加投影**（层次靠表面切换与裁切）；
     · 胶囊按钮 980px；徽标 5px；选择胶囊 36px；
     · 全局导航 44px、本地导航 52px，标签 12px；
     · 巨号标题 64px / 行高 1.06 / 字距 -0.576px / 字重 600（不用 700）；
     · 购买蓝 #0071e3 只用于填充按钮；链接蓝 #0066cc 只做文字链；
       绿/橙不参与（本页没有电池与库存那类信号）；
     · 整页一套主题，不在页面中间翻转（--tint/--dark 只改表面，不改主题）。
   字体：参考用 SF Pro；本页零依赖、不引外部字体，按平台取系统字体，
   由“字号 + 行高 + 字距 + 字重”承担观感（字距是这套语言的关键，逐级写死）。
   ============================================================ */

:root {
  /* 颜色（与参考同名同值） */
  --polar-white: #f5f5f7;
  --absolute-black: #000000;
  --carbon: #111111;
  --white: #ffffff;
  --graphite: #1d1d1f;
  --steel: #86868b;
  --divider-gray: #6e6e73;
  --control-charcoal: #333336;
  --glyph-silver: #cccccc;
  --link-blue: #0066cc;
  --purchase-blue: #0071e3;

  /* 字体 */
  --font-display: system-ui, -apple-system, "SF Pro Display", "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-text: system-ui, -apple-system, "SF Pro Text", "Segoe UI", "Microsoft YaHei", sans-serif;

  /* 圆角（参考量测值） */
  --radius-badge: 5px;
  --radius-link: 10px;
  --radius-tile: 28px;
  --radius-chip: 36px;
  --radius-pill: 980px;
  --radius-pill-2: 9999px;

  /* 节奏（参考的 section gap / card padding） */
  --section-gap: clamp(64px, 9vw, 144px);
  --card-padding: 16px;

  /* 深色是默认（本页就是黑色展台）；浅色由主题开关切换，整页一致 */
  --canvas: var(--carbon);
  --stage: var(--absolute-black);
  --text: var(--polar-white);
  --muted: var(--steel);
  --hairline: rgba(255, 255, 255, 0.12);
  --tile: var(--absolute-black);
  --tile-text: var(--polar-white);
}

html[data-theme="light"] {
  --canvas: var(--white);
  --stage: var(--polar-white);
  --text: var(--graphite);
  --muted: var(--steel);
  --hairline: rgba(0, 0, 0, 0.1);
  --tile: var(--white);
  --tile-text: var(--graphite);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--font-text); font-size: 17px; line-height: 1.47;
  letter-spacing: -0.374px; -webkit-font-smoothing: antialiased;
}
a { color: var(--link-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.os-skip {
  position: absolute; left: -9999px; background: var(--purchase-blue); color: var(--white);
  padding: 8px 14px; border-radius: var(--radius-pill);
}
.os-skip:focus { left: 12px; top: 12px; z-index: 100; }

/* ---------------- 全局导航 44px / 12px ---------------- */
.os-gnav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(17, 17, 17, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .os-gnav {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.os-gnav-in {
  max-width: 1024px; margin: 0 auto; height: 44px; padding: 0 22px;
  display: flex; align-items: center; gap: 8px;
}
.os-logo {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--polar-white); font-size: 12px; line-height: 1; letter-spacing: -0.12px;
}
html[data-theme="light"] .os-logo { color: var(--graphite); }
.os-logo img { height: 18px; width: auto; display: block; }
/* 窄屏导航被挤时，logo 文字会逐字竖排换行，压在校徽上——禁止换行 */
.os-logo span { white-space: nowrap; }
.os-gnav .w { flex: 1; }
.os-gnav .name { color: rgba(255, 255, 255, 0.8); font-size: 12px; line-height: 1; letter-spacing: -0.12px; }
html[data-theme="light"] .os-gnav .name { color: rgba(29, 29, 31, 0.8); }
.os-themebtn {
  appearance: none; border: 0; cursor: pointer; width: 30px; height: 30px;
  border-radius: var(--radius-pill-2); background: rgba(66, 66, 69, 0.72);
  color: var(--glyph-silver); display: inline-flex; align-items: center; justify-content: center;
}
.os-themebtn svg { width: 15px; height: 15px; }
html[data-theme="light"] .os-themebtn { background: rgba(0, 0, 0, 0.06); color: var(--graphite); }
.os-themebtn .ti { display: none; }
html[data-theme="dark"] .os-themebtn .ti-moon,
html:not([data-theme]) .os-themebtn .ti-moon { display: inline-flex; }
html[data-theme="light"] .os-themebtn .ti-sun { display: inline-flex; }

/* ---------------- 本页目录 52px ---------------- */
.os-lnav {
  position: sticky; top: 44px; z-index: 39; background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  /* 默认整条让开（含 44px 全局导航的高度），滚过首屏后由 .on 滑入 */
  transform: translateY(calc(-100% - 44px));
  transition: transform 0.3s ease;
}
.os-lnav.on { transform: none; }
.os-lnav-in {
  max-width: 1024px; margin: 0 auto; height: 52px; padding: 0 22px;
  display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none;
}
.os-lnav-in::-webkit-scrollbar { display: none; }
.os-lnav a { color: var(--muted); font-size: 12px; line-height: 1; letter-spacing: -0.12px; white-space: nowrap; padding: 6px 0; }
.os-lnav a:hover, .os-lnav a.on { color: var(--text); text-decoration: none; }
.os-lnav a.on { box-shadow: inset 0 -1px 0 currentColor; }
/* 目录条右侧的购买/下载胶囊：上面 .os-lnav a 的 padding 优先级更高，会把胶囊压扁，这里夺回来 */
.os-lnav .buy { padding: 3px 14px; color: var(--white); }

/* ---------------- 排版 ---------------- */
.os-hero { background: var(--stage); padding: clamp(72px, 10vw, 112px) 22px clamp(56px, 8vw, 88px); text-align: center; }
.os-eyebrow {
  font-size: 12px; line-height: 1.24; letter-spacing: -0.12px; color: var(--muted);
  text-transform: uppercase; margin: 0 0 14px;
}
.os-h1 {
  font-family: var(--font-display); font-size: clamp(40px, 6.2vw, 64px);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.576px;
  color: var(--polar-white); margin: 0 auto; max-width: 16ch;
}
html[data-theme="light"] .os-h1 { color: var(--graphite); }
.os-sub { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; color: var(--steel); margin: 18px auto 0; max-width: 48ch; }
.os-sec { padding: var(--section-gap) 22px; background: var(--canvas); }
.os-sec--tint, .os-sec--dark { background: var(--stage); }
.os-sec .os-center { max-width: 1024px; margin: 0 auto; }
.os-h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 28px);
  font-weight: 600; line-height: 1.14; letter-spacing: 0.196px; margin: 0 0 12px;
}
.os-sec .os-sub { margin: 0 0 34px; }

/* ---------------- 卡片与媒体块：28px、无投影 ---------------- */
.os-tiles, .os-shots, .os-stats, .os-rules, .os-foot-cols, .os-entries { display: grid; gap: var(--card-padding); }
.os-tiles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.os-tile { background: var(--tile); color: var(--tile-text); border-radius: var(--radius-tile); padding: 22px; box-shadow: none; }
.os-tile h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.21; letter-spacing: 0.228px; margin: 0 0 6px; }
.os-tile p { margin: 0; color: var(--steel); font-size: 14px; line-height: 1.5; }
.os-shot { border-radius: var(--radius-tile); overflow: hidden; background: var(--stage); box-shadow: none; }
/* 没成功加载到图就整块不渲染，避免出现破图（os.js 加载成功会加 .has-shot） */
.os-shot:not(.has-shot) { display: none; }
.os-shot img { display: block; width: 100%; height: auto; }
.os-shot--phone, .os-shot--contain { background: var(--stage); padding: 14px; }
.os-shots { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.os-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: center; }
.os-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.os-stat { background: var(--tile); border-radius: var(--radius-tile); padding: 22px; }
.os-stat b { display: block; font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.144px; }
.os-stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--steel); }
.os-rules { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.os-rule { border-top: 1px solid var(--hairline); padding-top: 14px; }
.os-rule b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.os-rule span { color: var(--steel); font-size: 14px; }
.os-tl { border-top: 1px solid var(--hairline); }
.os-tl-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.os-tl-row b { font-size: 14px; color: var(--muted); font-weight: 600; }
.os-tl-row span { font-size: 17px; }
.os-hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--card-padding); }
.os-hl-item { background: var(--tile); border-radius: var(--radius-tile); padding: 22px; }
.os-hl-item b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.os-hl-item span { color: var(--steel); font-size: 14px; }

/* ---------------- 按钮：饱和色只在这里出现 ---------------- */
.os-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.os-cta.os-center { justify-content: center; }
.os-cta a, .os-more a, .buy {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 3px 14px; border-radius: var(--radius-pill);
  font-size: 12px; line-height: 16px; letter-spacing: -0.12px;
  white-space: nowrap; text-decoration: none;
}
.os-cta a, .buy { background: var(--purchase-blue); color: var(--white); }
.os-cta a:hover, .buy:hover { background: #0077ed; text-decoration: none; }
.os-more { margin-top: 20px; }
.os-more a { background: transparent; color: var(--link-blue); border: 1px solid var(--link-blue); }

/* ---------------- FAQ ---------------- */
.os-faq { grid-template-columns: 1fr; max-width: 760px; }
.os-faq details { border-top: 1px solid var(--hairline); padding: 16px 0; }
.os-faq summary { cursor: pointer; font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.os-faq p { color: var(--steel); font-size: 14px; margin: 10px 0 0; }

/* 折叠箭头：内联 SVG 只给了 viewBox，不给尺寸会被默认拉满整行宽（真机抓到过，
   一支箭头放大约 50 倍）。summary 改 flex 排版：文字居左，箭头 14px 居右，展开时翻转。 */
.os-faq summary, .os-spec summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.os-faq summary svg, .os-spec summary svg {
  width: 14px; height: 14px; flex: none; color: var(--muted);
  transition: transform 0.25s ease;
}
.os-faq details[open] > summary svg, .os-spec[open] > summary svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .os-faq summary svg, .os-spec summary svg { transition: none; }
}

/* ---------------- 页脚：Polar White 浅色带（参考里的对比收尾） ---------------- */
.os-foot { background: var(--polar-white); color: var(--graphite); padding: 56px 22px 40px; }
.os-foot-cols { max-width: 1024px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.os-foot h4 { font-size: 12px; letter-spacing: -0.12px; margin: 0 0 10px; }
.os-foot a { display: block; color: var(--graphite); font-size: 12px; line-height: 2; }
.os-foot-legal {
  max-width: 1024px; margin: 30px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.1); color: var(--steel); font-size: 12px; line-height: 1.6;
}

/* 入场：一次、8px、0.5s。
   注意：只有 JS 到位（html.os-anim）才隐藏待入场元素——
   否则脚本没跑时整页内容会永久不可见（自检抓到的真回归）。 */
.os-anim .os-rv { opacity: 0; transform: translateY(8px); }
.os-anim .os-rv.in { opacity: 1; transform: none; }
.os-rv { transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .os-anim .os-rv { opacity: 1; transform: none; transition: none; }
}

/* 锚点跳转要给两条粘性导航留出高度（44 + 52 + 余量） */
.os-sec, .os-hero { scroll-margin-top: 112px; }
.os-lnav[hidden] { display: none !important; }

@media (max-width: 734px) {
  .os-hero { padding: 64px 18px 56px; }
  .os-sec { padding: 64px 18px; }
  .os-lnav-in { gap: 16px; }
  .os-tl-row { grid-template-columns: 72px 1fr; }
  body { font-size: 16px; }
}

/* 旧结构里仍在用的几个容器（保持骨架不变，只按参考给表面与节奏） */
.os-w { max-width: 1024px; margin: 0 auto; }
.os-entry { border-top: 1px solid var(--hairline); padding: 16px 0; }
.os-mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--card-padding); }
.os-spec { color: var(--muted); font-size: 14px; line-height: 1.6; }
.os-spec b { color: var(--text); font-weight: 600; }

/* 两条导航里是 ul/li 列表（我第一版漏了这层，导致竖排项目符号）。
   重置列表样式并让 li 成为行内项——导航必须一行排完。 */
.os-gnav ul, .os-lnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.os-gnav ul { margin-left: auto; }
.os-gnav li, .os-lnav li { display: inline-flex; align-items: center; }
.os-gnav ul a { color: rgba(255, 255, 255, 0.8); font-size: 12px; line-height: 1; letter-spacing: -0.12px; white-space: nowrap; }
html[data-theme="light"] .os-gnav ul a { color: rgba(29, 29, 31, 0.8); }
.os-gnav ul a:hover { color: #fff; text-decoration: none; }
html[data-theme="light"] .os-gnav ul a:hover { color: var(--graphite); }
/* 导航里的"打开大屏"是 .os-cta，但 cla 同时带了 os-cta 类，这里只保证不被撑高 */
.os-gnav .os-cta { min-height: 26px; padding: 3px 12px; }
@media (max-width: 900px) {
  .os-gnav ul { gap: 14px; overflow-x: auto; }
  .os-gnav ul a { font-size: 11.5px; }
}