/* 站点设计 token 与通用排版。区块自己的样式一律放在 assets/blocks/<name>.css，
   并以 .blk-<name> 作前缀 —— 区块之间不允许互相选择对方的选择器。
   视觉基准：大标题重字重 + 居中区块头 + 圆角浅灰容器 + 柔和投影（参考腾讯 WorkBuddy 官网语言）。 */
:root {
  --ink: #0F1A15;
  --ink-soft: #3C4A42;
  --muted: #6B7A70;
  --bamboo: #2E8F63;
  --bamboo-deep: #1F6B49;
  --leaf: #4FBE7C;
  --sprout: #7ED957;
  --shoot: #CDF27A;
  --frost: #F4F7F4;
  --tint: #F5F6F7;
  --tint-strong: #ECEFEC;
  --white: #FFFFFF;
  --line: rgba(22, 38, 31, 0.10);
  --line-strong: rgba(22, 38, 31, 0.18);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --maxw: 1160px;
  --shadow-sm: 0 1px 2px rgba(22, 38, 31, 0.06);
  --shadow: 0 1px 2px rgba(22, 38, 31, 0.06), 0 14px 44px rgba(22, 38, 31, 0.10);
  --shadow-lg: 0 2px 6px rgba(15, 26, 21, 0.05), 0 40px 90px rgba(15, 26, 21, 0.14);
  --font: "Inter", "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 锚点跳转后给目标区块一个短高亮，让用户看得见「刚才那一下去哪儿了」。 */
.is-flash { animation: blk-flash 1.5s ease-out; }
@keyframes blk-flash {
  from { box-shadow: 0 0 0 3px rgba(46, 143, 99, .38); }
  to { box-shadow: 0 0 0 3px rgba(46, 143, 99, 0); }
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.16; letter-spacing: -0.03em; font-weight: 760; }
p { margin: 0; }
::selection { background: rgba(126, 217, 87, .38); }
.skip-link { position: absolute; left: -9999px; top: 8px; padding: 8px 14px; background: var(--ink); color: #fff; border-radius: 999px; z-index: 99; }
.skip-link:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section--tight { padding: 60px 0; }
.section--soft { background: var(--frost); }
/* 浅灰圆角容器：WorkBuddy 的每个大区块都装在这种「卡片纸」里，用来把内容与白色页面分开。 */
.sheet { width: 100%; border-radius: var(--radius-xl); background: var(--tint); padding: 64px 56px; }
.sheet--plain { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bamboo); }
.section-head { margin-bottom: 40px; }
.section-title { font-size: clamp(28px, 3.4vw, 42px); }
.section-sub { margin-top: 14px; max-width: 60ch; color: var(--muted); font-size: 17px; }
.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 650; cursor: pointer;
  transition: transform .14s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--bamboo); color: #fff; box-shadow: 0 10px 24px rgba(46, 143, 99, .26); }
.btn-primary:hover { background: var(--bamboo-deep); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: rgba(255, 255, 255, .8); }
.btn-ghost:hover { border-color: var(--bamboo); color: var(--bamboo-deep); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.grid { display: grid; gap: 20px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
[data-block-error] { display: none; }
.site-error { padding: 80px 24px; text-align: center; color: var(--muted); }

@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .sheet { padding: 36px 20px; border-radius: var(--radius-lg); }
  .wrap { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }