/* ==========================================================================
   北京九层企业顾问有限公司 · 官网共享样式表
   来源：DESIGN-v0.3.md ｜ 单一事实来源：website/index-v0.1.html
   视觉语言：东方沉稳 · 现代高级 · 五行五常哲学映射 · 暖纸基底 + 分层渐变体系
   ========================================================================== */

/* ===== 1. 设计令牌 Design Tokens ===== */
:root {
  /* --- 页面基调 Surface & Background --- */
  --paper:          #FAF5EC;   /* 页面主底（Hero / Business 区） */
  --sand:           #F2E9D9;   /* 区块底（Quote / CTA 区基底） */
  --sand-center:    #FAF2E6;   /* Quote 径向渐变中心（智慧之光） */
  --sand-edge:      #E5D6C0;   /* Quote 径向渐变边缘 */
  --sand-cta-light: #F8F0E0;   /* CTA 对角渐变亮端 */
  --sand-cta-dark:  #E0D1BA;   /* CTA 对角渐变暗端 */
  --paper-cream:    #FFF7EC;   /* 按钮文字 / 反白 */

  /* --- 金系 Metal（决断、公义 → 文字与 UI） --- */
  --ink:          #2E2419;   /* 主墨色 · 标题文字 */
  --ink-2:        #3E3222;   /* 次级墨色 · 引言/区块标题 */
  --brown:        #6E5637;   /* 品牌棕 · Logo 底 */
  --gold-rule:    #C9B085;   /* 古铜金 · 边框/分割线 */
  --text-brown:   #55483A;   /* 正文深棕 */
  --text-body:    #7C6A52;   /* 正文棕灰 */
  --text-muted:   #8A7659;   /* 弱化文字 */
  --text-muted-2: #9E8767;   /* 最弱文字 · 注脚 */
  --footer-text:  #B0A088;   /* 页脚导航文字 */
  --footer-muted: #7A6B58;   /* 页脚版权文字 */
  --footer-bg:    #3D3229;   /* 页脚背景 */

  /* --- 火系 Fire（行动、礼仪 → CTA 交互） --- */
  --terra:       #A9603F;   /* CTA 主色 */
  --terra-light: #BD734A;   /* CTA 渐变亮端（左上） */
  --terra-dark:  #A9603F;   /* CTA 渐变暗端（右下） */
  --terra-glow:  rgba(169, 96, 63, 0.28);

  /* --- 土系 Earth（承载、诚信 → 背景 + 组织业务） --- */
  --earth-1: #3A2616;  /* L1 累土 · 最深 */
  --earth-2: #523823;  /* L2 */
  --earth-3: #6E5438;  /* L3 */
  --o-badge-bg:   #EFE5D4;
  --o-badge-text: #6E5438;

  /* --- 水系 Water（智慧、流动 → AI 业务） --- */
  --water-1: #3F617F;  /* L4 · 最深深水蓝 */
  --water-2: #52809F;  /* L5 */
  --water-3: #6A9CC0;  /* L6 */
  --a-badge-bg:   #E6EDF3;
  --a-badge-text: #2D4A6B;

  /* --- 木系 Wood（生长、仁爱 → 个人业务） --- */
  --wood-1: #7EA382;  /* L7 · 最深苍绿 */
  --wood-2: #94B598;  /* L8 */
  --wood-3: #B0CFB2;  /* L9 · 最浅苍绿 */
  --p-badge-bg:   #E8F1E9;
  --p-badge-text: #4A6B4E;

  /* --- 三维度文字色（正文强调） --- */
  --wood-ink:  #4A6B4E;
  --earth-ink: #6E5438;
  --water-ink: #2D4A6B;

  /* --- 语义色（扩展，表单/提示场景） --- */
  --success: #5C8A60;  --success-bg: #E8F1E9;
  --warning: #B07A36;  --warning-bg: #F3E7D3;
  --error:   #B5472E;  --error-bg:   #F4E0D8;
  --info:    #3F617F;  --info-bg:    #E6EDF3;

  /* --- 阴影 Shadow Tokens --- */
  --shadow-xs:    0 1px 2px  rgba(46, 36, 25, 0.06);
  --shadow-sm:    0 3px 6px  rgba(51, 38, 26, 0.15);
  --shadow-md:    0 8px 28px rgba(51, 38, 26, 0.06);
  --shadow-lg:    0 18px 40px rgba(51, 38, 26, 0.12);
  --shadow-xl:    0 12px 32px rgba(169, 96, 63, 0.28);
  --shadow-glow:  0 0 12px  rgba(224, 189, 88, 0.45);
  --shadow-title: 0 4px 16px rgba(46, 36, 25, 0.12);

  /* --- 渐变矩阵：统一"光从左上斜入"（45° 对角） --- */
  --grad-terra:  linear-gradient(135deg, var(--terra-light), var(--terra-dark));
  --grad-t9:     linear-gradient(135deg, #C7DBC2, #9EBA9E 50%, #8CAD8F);
  --grad-t8:     linear-gradient(135deg, #A8C4A8, #85A88A 50%, #709975);
  --grad-t7:     linear-gradient(135deg, #94B596, #709675 50%, #5C8466);
  --grad-t6:     linear-gradient(135deg, #8AADCC, #668EB2 50%, #527DA3);
  --grad-t5:     linear-gradient(135deg, #6B94B2, #477594 50%, #336384);
  --grad-t4:     linear-gradient(135deg, #577591, #335675 50%, #244766);
  --grad-t3:     linear-gradient(135deg, #84664C, #664D33 50%, #523D26);
  --grad-t2:     linear-gradient(135deg, #6B4F38, #47301E 50%, #382314);
  --grad-t1:     linear-gradient(135deg, #523824, #302111 50%, #24170C);

  /* --- 间距节奏（8px 基数，按 §7 常用档位） --- */
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  22px;
  --space-lg:  28px;
  --space-xl:  40px;
  --space-2xl: 56px;
  --space-3xl: 76px;
  --space-4xl: 110px;

  /* --- 排版 --- */
  --font-serif: 'Noto Serif SC', 'Songti SC', serif;
  --font-sans:  'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* --- 动效（指数缓动，无回弹） --- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hover:  250ms;
  --dur-reveal: 800ms;

  /* --- 布局 --- */
  --page-gutter: clamp(24px, 6vw, 120px);
  --max-width: 1280px;
}

/* ===== 2. 基线重置 Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: rgba(169, 96, 63, 0.16); }

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

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

/* 无障碍：仅供屏幕阅读器 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 跳转链接 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--terra);
  color: var(--paper-cream);
  padding: 12px 22px;
  border-radius: 0 0 12px 0;
  font: 500 14px var(--font-sans);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ===== 3. Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 82px;
  padding: 0 var(--page-gutter);
  background: rgba(250, 245, 236, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(138, 118, 89, 0.12);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
.logo-mark {
  width: 42px; height: 42px; border-radius: 9px;
  background: var(--brown);
  display: flex; align-items: center; justify-content: center;
  color: #F2E9D9; font: 700 23px var(--font-serif);
}
.logo-text { display: flex; flex-direction: column; gap: 2px; }
.logo-text .t { font: 700 20px var(--font-serif); color: #362B1E; line-height: 1.1; }
.logo-text .s { font: 500 9px var(--font-sans); color: var(--text-muted); letter-spacing: 1.5px; }

.nav { display: flex; align-items: center; gap: 40px; }
.nav a {
  font: 500 15px var(--font-sans);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-hover);
}
.nav a:hover { color: var(--terra); }
.nav a[aria-current="page"] { color: var(--terra); }

.nav-cta {
  background: var(--grad-terra);
  color: var(--paper-cream);
  padding: 11px 22px; border-radius: 24px;
  font: 500 14px var(--font-sans);
  border: none; cursor: pointer;
  text-decoration: none;
  transition: filter var(--dur-hover), transform var(--dur-hover);
}
.nav-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ===== 4. Hero（纯色留白 · 静态聚焦） ===== */
.hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2xl);
  padding: var(--space-3xl) var(--page-gutter);
  background: var(--paper);
}
.hero-left { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 620px; }

.kicker { display: flex; align-items: center; gap: 12px; }
.kicker .rule { width: 30px; height: 2px; background: var(--terra); }
.kicker span { font: 500 14px var(--font-sans); color: var(--text-muted); letter-spacing: 2px; }

.hero-title {
  font: 700 66px var(--font-serif);
  color: var(--ink); letter-spacing: 2px; line-height: 1.15;
  filter: drop-shadow(0 4px 16px rgba(46, 36, 25, 0.12));
}
.hero-sub { font: 500 22px var(--font-serif); color: var(--text-brown); letter-spacing: 1px; }
.hero-desc { font: 400 16px var(--font-sans); color: var(--text-body); line-height: 1.8; max-width: 500px; }
.hero-ctas { display: flex; gap: 16px; align-items: center; padding: 10px 0; flex-wrap: wrap; }

/* ===== 5. Buttons ===== */
.btn-primary {
  background: var(--grad-terra); color: var(--paper-cream);
  padding: 15px 32px; border-radius: 28px; border: none; cursor: pointer;
  font: 500 15px var(--font-sans);
  text-decoration: none; display: inline-block;
  transition: filter var(--dur-hover), transform var(--dur-hover);
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-2px); }

.btn-ghost {
  background: var(--paper); color: #4A3B29;
  padding: 15px 30px; border-radius: 28px;
  border: 1.5px solid var(--gold-rule); cursor: pointer;
  font: 500 15px var(--font-sans);
  text-decoration: none; display: inline-block;
  transition: background var(--dur-hover), transform var(--dur-hover);
}
.btn-ghost:hover { background: #F3EAD9; transform: translateY(-2px); }

.cta-btn {
  background: var(--grad-terra); color: var(--paper-cream);
  padding: 18px 42px; border-radius: 32px; border: none; cursor: pointer;
  font: 500 17px var(--font-sans);
  text-decoration: none; display: inline-block;
  box-shadow: 0 12px 32px var(--terra-glow), 0 8px 24px rgba(169, 96, 63, 0.15);
  transition: filter var(--dur-hover), transform var(--dur-hover);
}
.cta-btn:hover { filter: brightness(1.07); transform: translateY(-2px); }

/* ===== 6. 通用区块节奏 ===== */
.section { padding: var(--space-4xl) var(--page-gutter); }
.section--paper { background: var(--paper); }
.section--sand  { background: var(--sand); }

/* 区块标题组（居中） */
.section-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
  margin-bottom: var(--space-2xl);
}
.s-label { font: 500 14px var(--font-sans); color: var(--terra); letter-spacing: 3px; }
.s-title { font: 600 40px var(--font-serif); color: var(--ink); letter-spacing: 1px; }
.s-sub   { font: 400 17px var(--font-sans); color: #6B5C4A; line-height: 1.75; max-width: 640px; }

/* 区块标题组（左对齐） */
.section-head--left { align-items: flex-start; text-align: left; }
.section-head--left .s-sub { max-width: 720px; }

/* 显式分隔线 */
.rule-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 176, 133, 0) 0%, rgba(201, 176, 133, 0.55) 50%, rgba(201, 176, 133, 0) 100%);
  border: 0;
}

/* ===== 7. Quote 引言区（径向发光 · 智慧扩散） ===== */
.quote {
  background: radial-gradient(circle at 50% 50%, var(--sand-center) 0%, var(--sand-edge) 100%);
  padding: var(--space-4xl) var(--page-gutter);
  display: flex; flex-direction: column; align-items: center;
  gap: 30px; text-align: center;
}
.quote .rule {
  width: 2px; height: 56px;
  background: linear-gradient(180deg, #C07050 0%, var(--terra-dark) 100%);
}
.quote-text { font: 600 42px var(--font-serif); color: var(--ink-2); letter-spacing: 2px; line-height: 1.7; }
.quote-src  { font: 500 16px var(--font-sans); color: var(--text-muted); letter-spacing: 1px; }
.quote-note { font: 400 14px var(--font-sans); color: var(--text-muted-2); }

/* ===== 8. Badge ===== */
.badge { padding: 6px 12px; border-radius: 12px; font: 500 12px var(--font-sans); white-space: nowrap; }
.p-badge { background: var(--p-badge-bg); color: var(--p-badge-text); }
.o-badge { background: var(--o-badge-bg); color: var(--o-badge-text); }
.a-badge { background: var(--a-badge-bg); color: var(--a-badge-text); }

/* ===== 9. 业务卡片 ===== */
.cards { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; }

.card {
  width: 360px; flex: 0 0 360px;
  border: 1px solid #ECEDEB; border-radius: 20px;
  padding: 36px 34px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  transition: transform 300ms var(--ease-out-quart), box-shadow 300ms var(--ease-out-quart);
}
.card:hover { transform: translateY(-6px); }

.card-personal {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F9F2 100%);
  box-shadow: var(--shadow-md), 0 16px 40px rgba(126, 163, 130, 0.08);
}
.card-personal:hover { box-shadow: var(--shadow-lg), 0 18px 44px rgba(126, 163, 130, 0.14); }

.card-org {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF2EB 100%);
  box-shadow: var(--shadow-md), 0 16px 40px rgba(169, 96, 63, 0.08);
}
.card-org:hover { box-shadow: var(--shadow-lg), 0 18px 44px rgba(169, 96, 63, 0.14); }

.card-ai {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F5FB 100%);
  box-shadow: var(--shadow-md), 0 16px 40px rgba(63, 97, 127, 0.08);
}
.card-ai:hover { box-shadow: var(--shadow-lg), 0 18px 44px rgba(63, 97, 127, 0.14); }

.card-title { font: 600 26px var(--font-serif); color: var(--ink); }
.card-desc {
  font: 400 15px var(--font-sans); color: #6B5C4A;
  line-height: 1.7; text-align: center;
}

/* 卡内三层迷你台 */
.mini { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mini-tier {
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 500 14px var(--font-sans);
  box-shadow: 0 2px 5px rgba(51, 38, 26, 0.10);
}
.mt-3 { width: 140px; height: 38px; }
.mt-2 { width: 196px; height: 38px; }
.mt-1 { width: 252px; height: 40px; }

/* 个人 · 苍绿 → 渐变（左上亮 → 右下暗） */
.p-t3 { background: linear-gradient(135deg, #B8D1B8, #94B896); color: #2A4B2E; }
.p-t2 { background: linear-gradient(135deg, #84AD86, #618B66); color: #FFFFFF; }
.p-t1 { background: linear-gradient(135deg, #618064, #3F5E42); color: #FFFFFF; }
/* 组织 · 暖土棕 */
.o-t3 { background: linear-gradient(135deg, #D9BA91, #B8996B); color: #4A3826; }
.o-t2 { background: linear-gradient(135deg, #B39067, #8F6A45); color: #FFFFFF; }
.o-t1 { background: linear-gradient(135deg, #84664C, #604730); color: #FFFFFF; }
/* AI · 深水蓝 */
.a-t3 { background: linear-gradient(135deg, #9EC2DE, #80A5C6); color: #1E3A56; }
.a-t2 { background: linear-gradient(135deg, #618CB3, #426D95); color: #FFFFFF; }
.a-t1 { background: linear-gradient(135deg, #42617F, #264261); color: #FFFFFF; }

/* ===== 10. 九层台视觉 ===== */
.terrace { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tier {
  height: 27px; border-radius: 5px;
  box-shadow: 0 3px 6px rgba(51, 38, 26, 0.15);
}
.t-l9 { width: 128px; background: var(--grad-t9); box-shadow: var(--shadow-glow), 0 3px 6px rgba(51, 38, 26, 0.15); }
.t-l8 { width: 160px; background: var(--grad-t8); }
.t-l7 { width: 192px; background: var(--grad-t7); }
.t-l6 { width: 224px; background: var(--grad-t6); }
.t-l5 { width: 256px; background: var(--grad-t5); }
.t-l4 { width: 288px; background: var(--grad-t4); }
.t-l3 { width: 320px; background: var(--grad-t3); }
.t-l2 { width: 352px; background: var(--grad-t2); }
.t-l1 { width: 386px; height: 31px; background: var(--grad-t1); }

/* Hero 内九层台容器 */
.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 24px; flex: 0 0 480px; }
.hv-label { font: 500 12px var(--font-sans); color: var(--terra); letter-spacing: 3px; }
.hv-caption { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hv-caption .m { font: 600 17px var(--font-serif); color: var(--ink); letter-spacing: 2px; }
.hv-caption .s { font: 500 9px var(--font-sans); color: #7A6646; letter-spacing: 1.5px; }

/* ===== 11. CTA 预约区（对角线性 · 方向性引导） ===== */
.cta {
  background: linear-gradient(135deg, var(--sand-cta-light) 0%, var(--sand-cta-dark) 100%);
  padding: var(--space-4xl) var(--page-gutter);
  display: flex; flex-direction: column; align-items: center;
  gap: 26px; text-align: center;
}
.cta-icon {
  width: 56px; height: 56px; border-radius: 28px;
  background: var(--grad-terra);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper-cream); font: 700 26px var(--font-serif);
  box-shadow: 0 10px 26px var(--terra-glow);
}
.cta-title { font: 600 44px var(--font-serif); color: var(--ink); letter-spacing: 1px; }
.cta-sub   { font: 400 17px var(--font-sans); color: #6B5C4A; line-height: 1.75; max-width: 620px; }
.cta-email { font: 500 15px var(--font-sans); color: var(--text-muted); }
.cta-email a { color: var(--terra); text-decoration: none; }
.cta-email a:hover { text-decoration: underline; }

/* ===== 12. Footer ===== */
.footer {
  background: var(--footer-bg);
  padding: 50px var(--page-gutter);
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo .m {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--grad-terra);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper-cream); font: 700 20px var(--font-serif);
}
.footer-logo .t { font: 700 18px var(--font-serif); color: #F2E9D9; }
.footer-tag { font: 400 13px var(--font-sans); color: var(--text-muted-2); }
.footer-nav { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.footer-nav a {
  font: 400 14px var(--font-sans); color: var(--footer-text);
  text-decoration: none; transition: color var(--dur-hover);
}
.footer-nav a:hover { color: var(--paper-cream); }
.footer-copy { font: 400 12px var(--font-sans); color: var(--footer-muted); line-height: 1.7; }

/* ===== 13. 滚动揭示动画 ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-out-quart),
              transform var(--dur-reveal) var(--ease-out-quart);
}
.reveal.in { opacity: 1; transform: none; }

/* 交错揭示（子元素依次浮现） */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.stagger.in > * { opacity: 1; transform: none; }

/* ===== 14. 响应式 ===== */
@media (max-width: 980px) {
  .hero { flex-direction: column; text-align: center; gap: 48px; }
  .hero-left { align-items: center; max-width: 100%; }
  .kicker, .hero-ctas { justify-content: center; }
  .hero-visual { flex: none; }
  .nav { gap: 24px; }
}

@media (max-width: 768px) {
  .nav a { display: none; }
  .hero-title { font: 700 44px var(--font-serif); }
  .quote-text { font: 600 30px var(--font-serif); }
  .s-title    { font: 600 30px var(--font-serif); }
  .cta-title  { font: 600 32px var(--font-serif); }
  .card { flex: 1 1 100%; max-width: 420px; }
  .footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hero-title { font: 700 36px var(--font-serif); }
  .hero-sub   { font: 500 18px var(--font-serif); }
  .terrace { transform: scale(0.82); transform-origin: top center; }
  .section, .quote, .cta { padding: 72px 24px; }
}

/* ===== 15. 动效无障碍 ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .stagger > * { opacity: 1; transform: none; }
}