/* ============================================================================
   今昔饭否 · 产品官网（单页）
   配色与排版沿用 App 与设计稿的 OKLch 令牌，没有引入新颜色。
   ========================================================================== */

:root {
  --bg:      oklch(98% 0.004 95);
  --surface: oklch(100% 0.002 95);
  --sunken:  oklch(96.5% 0.005 95);
  --fg:      oklch(20% 0.018 70);
  --muted:   oklch(48% 0.012 70);
  --border:  oklch(90% 0.006 95);
  --border-strong: oklch(84% 0.008 95);
  --primary:        oklch(53% 0.145 28);
  --primary-ink:    oklch(99% 0.004 95);
  --primary-hover:  oklch(45% 0.14 28);
  --primary-tint:   oklch(53% 0.145 28 / 0.10);
  --shadow:   oklch(20% 0.02 60 / 0.10);

  --font-display: 'Iowan Old Style', 'Charter', 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wrap: 1080px;
  --gutter: 24px;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      oklch(17% 0.008 70);
    --surface: oklch(22% 0.009 70);
    --sunken:  oklch(20% 0.008 70);
    --fg:      oklch(94% 0.005 95);
    --muted:   oklch(67% 0.010 80);
    --border:  oklch(30% 0.008 70);
    --border-strong: oklch(38% 0.009 70);
    --primary:        oklch(74% 0.14 30);
    --primary-ink:    oklch(18% 0.02 40);
    --primary-hover:  oklch(81% 0.12 30);
    --primary-tint:   oklch(74% 0.14 30 / 0.18);
    --shadow:   oklch(0% 0 0 / 0.4);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, dt, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
.meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.dot { color: var(--border-strong); margin-inline: 2px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 14px;
}
.eyebrow.is-primary { color: var(--primary); }
.h2 { font-family: var(--font-display); font-size: clamp(25px, 3.4vw, 36px); line-height: 1.16; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-size: 19px; line-height: 1.3; font-weight: 600; }
.lead { font-size: 16.5px; line-height: 1.7; color: var(--muted); max-width: 60ch; }
.section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.section-head .lead { margin-top: 14px; }
.section { padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--border); }

/* ── 按钮 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }
.btn-block { width: 100%; justify-content: center; word-break: break-all; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { border-color: var(--border-strong); color: var(--fg); }
.btn-ghost:hover { background: var(--sunken); }
.btn-ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg); /* 老浏览器不支持 color-mix 时的兜底 */
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 18px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.brand-icon { border-radius: 7px; }
.topnav { display: none; gap: 22px; margin-left: auto; font-size: 14.5px; color: var(--muted); }
.topnav a:hover { color: var(--fg); }
.topbar .btn-sm { margin-left: auto; }
@media (min-width: 760px) {
  .topnav { display: flex; }
  .topbar .btn-sm { margin-left: 0; }
}

/* ── 首屏 ─────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(52px, 8vw, 92px) clamp(44px, 6vw, 72px); }
.hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-icon {
  width: 120px; height: 120px;
  border-radius: 27px;
  box-shadow: 0 18px 40px -18px var(--shadow), 0 2px 6px -2px var(--shadow);
  margin-bottom: 26px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero-lead { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.6; max-width: 34ch; font-weight: 400; }
.hero-lead b { color: var(--primary); font-weight: 600; }
.hero-sub { margin-top: 14px; color: var(--muted); font-size: 15.5px; max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.hero-meta { margin-top: 22px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }

/* ── 功能 ─────────────────────────────────────────────────────────────── */
.features {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature { background: var(--bg); padding: 24px 22px 26px; }
.feature-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--primary); letter-spacing: 0.12em; }
.feature .h3 { margin: 10px 0 8px; }
.feature p { color: var(--muted); font-size: 14.5px; line-height: 1.68; }
@media (min-width: 720px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); } }

/* ── 平台 ─────────────────────────────────────────────────────────────── */
.platforms { display: grid; gap: 16px; }
.platform {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface);
}
.platform.is-primary { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.platform-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.platform-ico { width: 20px; height: 20px; color: var(--primary); flex: 0 0 auto; }
.platform-head .h3 { margin-right: auto; }
.platform-note { margin-top: 12px; color: var(--muted); font-size: 14.5px; }
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  white-space: nowrap;
}
.tag-ok { border-color: color-mix(in oklab, var(--primary) 45%, transparent); color: var(--primary); background: var(--primary-tint); }
.spec { margin-top: 18px; display: grid; gap: 12px; font-size: 14.5px; }
.spec > div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; }
.spec dt { color: var(--muted); font-size: 13px; }
.spec dd { margin: 0; }
.spec-tight { gap: 11px; font-size: 14px; }
.spec-tight > div { grid-template-columns: 52px 1fr; gap: 14px; }
.spec-tight dt { font-size: 12.5px; }
@media (max-width: 379px) {
  .spec > div { grid-template-columns: 1fr; gap: 2px; }
  .spec dt { font-size: 12px; }
}
@media (min-width: 820px) { .platforms { grid-template-columns: 1.35fr 1fr 1fr; } }

.notes { margin-top: 22px; display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
.notes li { padding-left: 18px; position: relative; }
.notes li::before {
  content: '';
  position: absolute; left: 2px; top: 0.68em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); opacity: .55;
}
@media (min-width: 820px) { .notes { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ── 公测 ─────────────────────────────────────────────────────────────── */
.section-beta { background: var(--sunken); }
.beta-inner { display: grid; gap: 28px; }
.beta-points { margin-top: 20px; display: grid; gap: 9px; color: var(--muted); font-size: 14.5px; max-width: 46ch; }
.beta-points li { padding-left: 18px; position: relative; }
.beta-points li::before {
  content: '';
  position: absolute; left: 2px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); opacity: .55;
}
.beta-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: grid;
  gap: 20px;
  box-shadow: 0 14px 34px -26px var(--shadow);
}
.beta-card .spec { margin-top: 0; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.btn-download { width: 100%; justify-content: center; padding-inline: 18px; }
@media (min-width: 880px) {
  .beta-inner { grid-template-columns: 1fr 360px; align-items: start; gap: 56px; }
}

/* ── 已知问题 ─────────────────────────────────────────────────────────── */
.issues { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.issue { background: var(--bg); padding: 20px 22px; }
.issue-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.issue-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; margin-right: auto; }
.issue p { margin-top: 8px; color: var(--muted); font-size: 14.5px; max-width: 68ch; }

/* ── 反馈 ─────────────────────────────────────────────────────────────── */
.feedback { display: grid; gap: 14px; }
.feedback-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--surface);
}
.feedback-kind { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--muted); }
.feedback-value { font-family: var(--font-mono); font-size: 19px; letter-spacing: -0.01em; word-break: break-all; }
.feedback-go { font-size: 13px; color: var(--muted); margin-top: 6px; }
.feedback-note { margin-top: 16px; }
@media (min-width: 720px) { .feedback { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

/* ── 页脚 ─────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding-block: 34px 46px; background: var(--sunken); }
.footer-inner { display: grid; gap: 14px; }
.footer-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 15.5px; }
.footer-brand img { border-radius: 6px; }
.footer-note { color: var(--muted); font-size: 13px; max-width: 62ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--muted); }
.footer-links a:hover { color: var(--primary); }
@media (min-width: 780px) {
  .footer-inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer-note { grid-column: 1 / 2; }
  .footer-links { grid-column: 2 / 3; grid-row: 1 / 3; justify-content: flex-end; max-width: 26ch; }
}

/* ── 滚动淡入 ─────────────────────────────────────────────────────────── */
.js .feature, .js .platform, .js .issue, .js .feedback-card, .js .beta-card {
  opacity: 0;
  transform: translateY(10px);
}
.js .is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .feature, .js .platform, .js .issue, .js .feedback-card, .js .beta-card { opacity: 1; transform: none; }
}