/* ============================================================
   StaffMesh — 营销官网共享样式
   设计语言与产品控制面板严格一致(tokens.css 对齐)
   ============================================================ */

/* ---------- 1. 设计 Token ---------- */
:root {
  /* 色彩 — 全站锁暖色域(色相 28–70),冷色仅宝蓝点睛 */
  --bg:            oklch(97% 0.018 70);    /* 极浅暖米白 */
  --surface:       oklch(99% 0.008 70);    /* 近白卡片表面 */
  --surface-sink:  oklch(95% 0.016 72);    /* 略下沉的暖底 */
  --text:          oklch(22% 0.02 50);     /* 深暖褐主文字 */
  --text-2:        oklch(34% 0.02 50);     /* 三级文字 */
  --muted:         oklch(50% 0.018 50);    /* 次要暖灰褐 */
  --faint:         oklch(64% 0.014 70);    /* 最弱文字 */
  --border:        oklch(90% 0.014 70);    /* 边框 */
  --border-strong: oklch(84% 0.018 68);

  --primary:       oklch(64% 0.13 28);     /* 赤陶橙红 — 灵魂色 / CTA */
  --primary-hover: oklch(56% 0.13 28);
  --primary-tint:  oklch(94% 0.04 38);     /* 主色淡底 */
  --primary-ring:  oklch(64% 0.13 28 / 0.28);

  --dark:          oklch(24% 0.04 50);     /* 深暖褐对比区 / footer */
  --dark-2:        oklch(30% 0.035 52);

  --blue:          oklch(48% 0.16 268);    /* 宝蓝点睛 */
  --success:       oklch(52% 0.14 155);
  --warning:       oklch(72% 0.15 75);
  --error:         oklch(55% 0.2 25);

  /* 5-bar 品牌色(ThinkingBars) */
  --bar-1: #F0E2C8;
  --bar-2: #E89A2B;
  --bar-3: #C8654E;
  --bar-4: #9F3A38;
  --bar-5: #3A3FD3;

  /* 字体 */
  --font-display: 'Newsreader', 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', system-ui, sans-serif;

  /* 几何 */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* 暖调阴影 — 极轻,不要冷灰 */
  --shadow-xs: 0 1px 2px oklch(40% 0.03 50 / 0.05);
  --shadow-sm: 0 2px 8px oklch(40% 0.04 50 / 0.06);
  --shadow-md: 0 8px 24px oklch(40% 0.05 50 / 0.08);
  --shadow-lg: 0 18px 48px oklch(35% 0.05 50 / 0.12);

  --nav-h: 68px;
  --maxw: 1180px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

::selection { background: var(--primary-tint); color: var(--primary-hover); }

:focus-visible { outline: 2px solid var(--primary-ring); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. 排版 ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--text);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--primary);
}

.section-title {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);
  font-weight: 600;
}
.section-lead {
  margin-top: 14px;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- 4. 布局 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.section { padding: clamp(72px, 6vw, 116px) 0; }
.section-head { margin-bottom: clamp(38px, 4vw, 60px); }
.section-head.center { text-align: center; }
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-size: 0.97rem;
  font-weight: 600;
  font-family: var(--font-body);
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 18px oklch(64% 0.13 28 / 0.28);
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 8px 22px oklch(64% 0.13 28 / 0.34); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.btn-ghost { background: transparent; color: var(--text-2); padding: 0 14px; }
.btn-ghost:hover { color: var(--primary); }

.btn-sm { height: 38px; padding: 0 16px; font-size: 0.9rem; }
.btn-lg { height: 54px; padding: 0 30px; font-size: 1.05rem; }

.btn-on-dark.btn-secondary {
  background: transparent;
  color: oklch(94% 0.01 70);
  border-color: oklch(100% 0 0 / 0.22);
}
.btn-on-dark.btn-secondary:hover { border-color: var(--primary); color: #fff; }

/* ---------- 6. ThinkingBars Logo ---------- */
.thinking-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.0875em;                   /* 间距 ≈ 14/160 比例 */
  height: 1em;
  font-size: var(--tb-size, 22px);
}
.thinking-bars .tb {
  width: 0.175em;                  /* 竖条宽 ≈ 28/160 比例 */
  border-radius: 0.0875em;         /* 圆角 ≈ 14/160 比例 */
  transform-origin: bottom;
}
.thinking-bars .tb1 { height: calc(90 / 160 * 1em);  background: var(--bar-1); }
.thinking-bars .tb2 { height: calc(130 / 160 * 1em); background: var(--bar-2); }
.thinking-bars .tb3 { height: calc(160 / 160 * 1em); background: var(--bar-3); }
.thinking-bars .tb4 { height: calc(130 / 160 * 1em); background: var(--bar-4); }
.thinking-bars .tb5 { height: calc(110 / 160 * 1em); background: var(--bar-5); }

/* Hero 大 logo 脉动 */
.thinking-bars.pulse .tb {
  animation: tb-pulse 1.5s ease-in-out infinite;
}
.thinking-bars.pulse .tb1 { animation-delay: 0s; }
.thinking-bars.pulse .tb2 { animation-delay: 0.15s; }
.thinking-bars.pulse .tb3 { animation-delay: 0.30s; }
.thinking-bars.pulse .tb4 { animation-delay: 0.45s; }
.thinking-bars.pulse .tb5 { animation-delay: 0.60s; }
@keyframes tb-pulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.45); }
}

/* 品牌字组 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.brand .brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* ---------- 7. 导航栏 ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: oklch(97% 0.018 70 / 0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.nav.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--primary); background: var(--primary-tint); }

.nav-actions { display: flex; align-items: center; gap: 8px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { background: var(--primary-tint); }
.nav-toggle svg { stroke: var(--text); }

/* 移动端抽屉菜单 */
.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  background: oklch(97% 0.018 70 / 0.98);
  backdrop-filter: blur(20px);
  padding: 22px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.mobile-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu a {
  padding: 15px 6px;
  font-size: 1.15rem;
  font-family: var(--font-display);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.mobile-menu .mm-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-menu .mm-actions .btn { width: 100%; }

/* ---------- 8. 卡片基类 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* ---------- 9. Footer ---------- */
.footer {
  background: var(--dark);
  color: oklch(82% 0.015 70);
  padding: 76px 0 32px;
}
.footer a { color: oklch(78% 0.014 70); transition: color .15s ease; }
.footer a:hover { color: #fff; }

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid oklch(100% 0 0 / 0.1);
}
.footer-brand .brand .brand-name { color: oklch(96% 0.01 70); }
.footer-brand p {
  margin-top: 16px;
  font-size: 0.92rem;
  color: oklch(72% 0.014 70);
  max-width: 30ch;
  line-height: 1.7;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(66% 0.014 70);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col li { font-size: 0.93rem; }
.footer-bottom {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: oklch(64% 0.014 70);
}
.footer-bottom .beian { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- 10. 滚动渐入 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ---------- 11. 标签 / 药丸 ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--primary-tint);
  color: var(--primary-hover);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--surface-sink);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 920px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-actions .nav-cta-mobile { display: inline-flex; }
  .nav-toggle { display: flex; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .btn-lg { height: 50px; }
}

/* ---------- 无障碍:减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .thinking-bars.pulse .tb { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}