/* 甲子观象官网 · 品牌视觉
 *
 * 视觉资产沿用品牌既有系统（与 aizu-front/src/styles/home-page.css 同源）：
 *   深绿 #1f473d / #315f54 · 米色底 #f5efe6→#efe5d5→#f9f4ed · 铜色强调 #7d4b22
 *   中文衬线用同域已托管的 Noto Serif SC（/fonts/，不额外下载、不引入第三方 CDN）
 *
 * 为什么字体走同域绝对地址：官网可能被挂在 /pda-web/ 或根路径，字体放在域名根 /fonts/
 * 下两边都能命中；且不依赖 fonts.googleapis.com（国内可达性差，且会带来额外隐私申报）。
 */

@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('https://jiazigx.com/fonts/noto-serif-sc-chinese-simplified-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('https://jiazigx.com/fonts/noto-serif-sc-chinese-simplified-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('https://jiazigx.com/fonts/noto-serif-sc-chinese-simplified-700-normal.woff2') format('woff2');
}

:root {
  --ink: #1f1a17;
  --ink-soft: rgba(31, 26, 23, 0.68);
  /* 0.5 时在最深背景 #efe5d5 上仅 3.13:1（低于 AA 4.5）；0.65 → 4.89:1。
     页脚、备案号、卡片说明都用它，属于要看清的文字，不为好看牺牲可读性。 */
  --ink-mute: rgba(31, 26, 23, 0.65);
  --green: #1f473d;
  --green-2: #315f54;
  --bronze: #7d4b22;
  --card: rgba(255, 250, 244, 0.72);
  --card-solid: #fffaf4;
  --line: rgba(31, 26, 23, 0.1);
  --radius: 20px;
  --radius-lg: 30px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(184, 121, 51, 0.18), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(55, 104, 91, 0.14), transparent 26%),
    linear-gradient(180deg, #f5efe6 0%, #efe5d5 46%, #f9f4ed 100%);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

a { color: var(--bronze); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: 'Noto Serif SC', Georgia, serif; line-height: 1.35; margin: 0; }
h1 { font-size: clamp(28px, 4.6vw, 46px); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(249, 244, 237, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner { display: flex; align-items: center; gap: 18px; min-height: 66px; }
/* flex: 0 0 auto —— 品牌不许被压缩；否则中文会被**逐字折行**（手机上出现「甲/子/观/象」竖排） */
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand__mark { font-family: 'Noto Serif SC', serif; font-size: 20px; font-weight: 700; color: var(--green); letter-spacing: 0.04em; white-space: nowrap; }
.brand__sub { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; white-space: nowrap; }
.topnav { display: flex; gap: 20px; margin-left: auto; font-size: 14px; }
.topnav a { color: var(--ink-soft); }
.topnav a.is-active { color: var(--green); font-weight: 600; }
.topbar__cta { display: flex; gap: 10px; margin-left: 8px; flex: 0 0 auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  white-space: nowrap; flex: 0 0 auto;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { color: #f9f4ed; background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%); box-shadow: 0 8px 20px rgba(31, 71, 61, 0.22); }
.btn--ghost { color: #2a2520; background: rgba(255, 251, 245, 0.8); border-color: var(--line); }
.btn--lg { padding: 14px 28px; font-size: 15px; }

/* ---------- Hero ---------- */
.hero { padding: 54px 0 30px; }
.hero__grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 42px; align-items: center; }
.kicker { font-size: 13px; letter-spacing: 0.14em; color: var(--bronze); font-weight: 600; margin-bottom: 12px; }
.hero__lead { margin-top: 18px; font-size: 16px; color: var(--ink-soft); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__note { margin-top: 16px; font-size: 12.5px; color: var(--ink-mute); }

/* ---------- 决策示例卡（首屏主角） ---------- */
.demo {
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: 0 24px 60px rgba(31, 26, 23, 0.12);
}
.demo__tag {
  display: inline-block; font-size: 11px; letter-spacing: 0.1em; color: var(--bronze);
  background: rgba(184, 121, 51, 0.12); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px;
}
.demo__q { font-family: 'Noto Serif SC', serif; font-size: 17px; color: var(--ink); }
.demo__q::before { content: '问 '; color: var(--ink-mute); font-size: 13px; }
.demo__conclusion {
  margin: 14px 0 16px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(31, 71, 61, 0.08), rgba(49, 95, 84, 0.05));
  border-left: 3px solid var(--green);
}
.demo__conclusion strong { font-family: 'Noto Serif SC', serif; font-size: 19px; color: var(--green); }
.demo__label { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.08em; }
.demo__basis { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.demo__basis li { font-size: 13.5px; color: var(--ink-soft); padding-left: 20px; position: relative; }
.demo__basis li::before {
  content: ''; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); opacity: .65;
}
.demo__basis cite { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-mute); }
.demo__foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
  display: grid; gap: 8px; font-size: 12.5px; color: var(--ink-mute);
}
.demo__foot .conf { color: var(--green); font-weight: 600; }

/* ---------- 通用 section ---------- */
.section { padding: 52px 0; }
.section--tight { padding: 34px 0; }
.section__head { max-width: 62ch; margin-bottom: 26px; }
.section__head p { margin-top: 12px; color: var(--ink-soft); font-size: 15px; }
.section--dark {
  background: linear-gradient(150deg, var(--green) 0%, #173630 100%);
  color: #f4efe7; border-radius: var(--radius-lg); margin: 40px 0; padding: 48px 0;
}
.section--dark h2, .section--dark h3 { color: #fdfaf5; }
.section--dark p, .section--dark li { color: rgba(244, 239, 231, 0.82); }
/* 只作用于**正文里的内联链接**：加 :not(.btn) —— 否则它的优先级(0-2-1)会压过
   .btn--ghost(0-1-0)，把按钮文字也改成棕金，压在浅胶囊底上对比度只有 1.10:1（实测 bug）。 */
.section--dark a:not(.btn) { color: #e8c79a; }

/* 深色区块里的按钮要**反过来**（原来是倒挂的）：
   · 主按钮原用深绿渐变 —— 压在深绿底上几乎看不见（按钮与背景糊在一起）；
   · 次按钮原是浅底胶囊 —— 比主按钮更抢眼，主次颠倒。
   改为：主按钮浅底深字（12.1:1），次按钮描边幽灵（8.8:1），两者都过 AA。 */
.section--dark .btn--primary {
  color: #14332c;
  background: #f7f1e6;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.section--dark .btn--primary:hover { background: #fffdf8; }
.section--dark .btn--ghost {
  color: #f2ece0;
  background: transparent;
  border-color: rgba(242, 236, 224, 0.42);
}
.section--dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.09); }

.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; backdrop-filter: blur(6px);
}
.card h3 { margin-bottom: 8px; color: var(--green); }
.card p { font-size: 14px; color: var(--ink-soft); }
.card__meta { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-mute); }

/* ---------- 对照表 ---------- */
.compare { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { background: rgba(31, 71, 61, 0.07); font-family: 'Noto Serif SC', serif; font-size: 14px; color: var(--green); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td:first-child { color: var(--ink-mute); width: 22%; }
.compare .us { color: var(--green); font-weight: 600; }

/* ---------- 今天 · 决策依据 ---------- */
.today { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 14px; }
.today__cell { background: var(--card-solid); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.today__cell dt { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; }
.today__cell dd { margin: 6px 0 0; font-family: 'Noto Serif SC', serif; font-size: 15px; color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--green); }
.faq p { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }

/* ---------- CTA ---------- */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 下载页 ---------- */
.dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dl .card { display: flex; flex-direction: column; gap: 10px; }
.dl .btn { margin-top: auto; }
.dl__ver { font-size: 12.5px; color: var(--ink-mute); }
.badge { display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: rgba(31, 71, 61, 0.1); color: var(--green); }
.badge--soon { background: rgba(125, 75, 34, 0.12); color: var(--bronze); }

/* ---------- 截图 ---------- */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.shots figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }

/* ---------- 正文排版（产品页/关于页） ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 34px; }
.prose h3 { margin-top: 22px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 15px; }
.prose ul { padding-left: 20px; }
.prose .note { font-size: 13px; color: var(--ink-mute); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }

/* ---------- 页脚 ---------- */
.footer { margin-top: 60px; border-top: 1px solid var(--line); background: rgba(249, 244, 237, 0.7); padding: 36px 0 46px; }
.footer__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: start; }
.footer__brand { display: flex; flex-direction: column; gap: 4px; }
.footer__brand strong { font-family: 'Noto Serif SC', serif; font-size: 17px; color: var(--green); }
.footer__brand span { font-size: 13px; color: var(--ink-mute); }
.footer__links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; }
.footer__meta { font-size: 12.5px; color: var(--ink-mute); display: grid; gap: 4px; }
.footer__beian a { color: var(--ink-mute); }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .today { grid-template-columns: repeat(2, 1fr); }
  .dl, .shots { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
}
/* 窄屏（手机）：顶栏改紧凑版。
   实测 768px 下「品牌 + 导航 + 两个按钮」只要 ~574px，所以导航留到 640 才收；
   640 以下：省掉域名小字、按钮改紧凑，「进入应用」靠 margin-left:auto 贴右。 */
@media (max-width: 640px) {
  .topnav { display: none; }
  .topbar__inner { gap: 10px; min-height: 58px; }
  .topbar__cta { margin-left: auto; gap: 8px; }
  .brand__sub { display: none; }
  .brand__mark { font-size: 18px; }
  .btn { padding: 9px 15px; font-size: 13.5px; }
  .btn--lg { padding: 12px 22px; font-size: 14.5px; }
}
@media (max-width: 560px) {
  .grid--4, .grid--3, .grid--2, .today { grid-template-columns: 1fr; }
  .hero { padding-top: 32px; }
  .compare { font-size: 13.5px; }
  .compare th, .compare td { padding: 11px 12px; }
}