/* ───── 基础样式:reset / 字体 / 页面布局骨架 ───── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
    "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .4s var(--ease), color .4s var(--ease);
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent-tint); color: var(--text); }
.mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }

/* 层级:固定导航/进度条等浮层在内容之上;内容区统一 z-index:1
   (hero 局部暖色柔光在 hero.css,z-index:-1) */
nav, header, main, section, footer { position: relative; z-index: 1; }

/* 跳到正文(无障碍) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
  font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* 页面布局骨架 */
section { max-width: var(--page-max); margin: 0 auto; padding: 64px 22px; }
main { max-width: var(--page-max); margin: 0 auto; padding: 128px 22px 64px; }

/* 小眉标(通用):大写字母间距,用于区块/页头上方的一行标签 */
.eyebrow {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 8px;
}

/* 区块标题:小眉标 + 大标题 + 右侧"更多"链接 */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.sec-head h2 { font-size: clamp(24px, 4vw, 32px); font-weight: 680; letter-spacing: -.6px; line-height: 1.2; }
.sec-head .more {
  font-size: 14px; color: var(--accent); text-decoration: none; white-space: nowrap;
  transition: gap .2s var(--ease), opacity .2s; display: inline-flex; align-items: center; gap: 4px;
}
.sec-head .more:hover { opacity: .75; gap: 8px; }
.sec-head .more::after { content: "→"; }

/* 区块标题(关于页风格):暖色竖条 + 标题 */
.sec-title {
  font-size: 21px; font-weight: 680; letter-spacing: -.3px;
  margin: 48px 0 20px; display: flex; align-items: center; gap: 10px;
}
.sec-title .bar { width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }

/* 通用胶囊标签 */
.chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 100px; font-size: 12.5px;
  background: var(--chip-bg); color: var(--chip-text); white-space: nowrap;
}

/* 加载 / 空状态提示 */
.state-note {
  text-align: center; color: var(--text-3); font-size: 14.5px;
  padding: 48px 16px; line-height: 1.9;
}
.state-note code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--code-inline-bg); color: var(--code-inline-text);
  padding: 2px 7px; border-radius: 6px; font-size: 13px;
}

@media (max-width: 600px) {
  main { padding-top: 104px; }
  section { padding: 48px 20px; }
}