/* ==========================================================================
   高老师个人站 · 设计令牌（Design Tokens）v2
   风格定调：墨蓝高端编辑风 + 品牌色科技感 —— 现场照片是主角，
   动效与光影为其加冕，不抢戏。
   最后更新：2026-10-01（v3.0 底稿定稿 · 高端动效方向）
   ========================================================================== */

:root {
  /* ---------- 品牌色 ---------- */
  --c-ink:        #16324F;  /* 墨蓝：标题、导航、深色区块 */
  --c-ink-deep:   #0E2238;  /* 深墨：页脚、CTA 带、页头 */
  --c-ink-night:  #0A1B2E;  /* 极夜墨：hero 渐变末端 */
  --c-ink-soft:   #2A4A6B;  /* 墨蓝浅一档：次级标题 */
  --c-indigo:     #185FA5;  /* 靛青：按钮、链接、交互态 */
  --c-indigo-dk:  #124B84;  /* 靛青 hover */
  --c-indigo-lt:  #4E8CC9;  /* 靛青亮：深底上的链接与光晕 */
  --c-amber:      #B45309;  /* 暖橙：数字强调、主 CTA */
  --c-amber-lt:   #D97706;  /* 暖橙浅：hover */
  --c-amber-glow: #F59E0B;  /* 暖橙光晕：深底数字与光效 */

  /* ---------- 中性色 ---------- */
  --c-bg:         #FAF8F5;  /* 米白：页面底色 */
  --c-surface:    #FFFFFF;  /* 卡片白 */
  --c-surface-2:  #F4F1EC;  /* 次级面（区块交替底） */
  --c-line:       #E8E4DD;  /* 暖灰：0.5px 分隔线 */
  --c-line-strong:#D8D2C8;  /* 稍重的线：表格 / 输入框 */

  /* ---------- 文字 ---------- */
  --c-text:       #1F2937;  /* 正文 */
  --c-text-mid:   #4B5563;  /* 次级正文 */
  --c-text-mute:  #8A8578;  /* 辅助、注释 */
  --c-text-inv:   #F5F3EE;  /* 深底上的文字（微暖白，不用纯白） */
  --c-text-inv-mute: rgba(245, 243, 238, .62);

  /* ---------- 功能色 ---------- */
  --c-ok:         #15803D;
  --c-warn:       #B45309;
  --c-danger:     #B91C1C;

  /* ---------- 品牌色衍生的光效（科技感来源，不引入外来色相） ---------- */
  --glow-indigo:  rgba(24, 95, 165, .32);
  --glow-indigo-soft: rgba(24, 95, 165, .14);
  --glow-amber:   rgba(245, 158, 11, .26);
  --glow-amber-soft: rgba(245, 158, 11, .12);
  --grad-hero:    linear-gradient(160deg, #16324F 0%, #10283F 45%, #0A1B2E 100%);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(24,95,165,.55), transparent);
  --grad-hairline-amber: linear-gradient(90deg, transparent, rgba(245,158,11,.6), transparent);
  --grad-text-amber: linear-gradient(120deg, #F59E0B, #D97706);

  /* ---------- 字体 ---------- */
  --f-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --f-sans:  "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --f-num:   "Helvetica Neue", "Bahnschrift", "DIN Alternate", Arial, var(--f-sans);

  /* ---------- 字号（clamp 流体） ---------- */
  --fs-display: clamp(30px, 4.6vw, 52px);
  --fs-h1:      clamp(26px, 3.4vw, 36px);
  --fs-h2:      clamp(22px, 2.8vw, 30px);
  --fs-h3:      clamp(17px, 2vw, 20px);
  --fs-body:    15px;
  --fs-sm:      13px;
  --fs-xs:      12px;

  /* ---------- 行高 / 字距 ---------- */
  --lh-tight: 1.3;
  --lh-body:  1.75;
  --ls-title: 0.01em;

  /* ---------- 间距（8 的倍数） ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: clamp(56px, 8vw, 96px);
  --sp-10: clamp(72px, 10vw, 128px);

  /* ---------- 圆角 ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---------- 阴影 / 玻璃 ---------- */
  --sh-card: 0 1px 2px rgba(22, 50, 79, .05);
  --sh-hover: 0 14px 40px rgba(22, 50, 79, .13);
  --sh-deep: 0 24px 64px rgba(10, 27, 46, .35);
  --glass-bg: rgba(250, 248, 245, .86);
  --glass-dark: rgba(14, 34, 56, .55);

  /* ---------- 布局 ---------- */
  --w-page: 1160px;
  --w-narrow: 760px;
  --h-nav: 72px;

  /* ---------- 动效（指数缓动系） ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --dur:  .28s;
  --dur-slow: .6s;
}

/* ==========================================================================
   基础重置
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  color: var(--c-ink);
}

p { margin: 0 0 var(--sp-4); }

a { color: var(--c-indigo); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-indigo-dk); }

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

/* ==========================================================================
   容器
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.section { padding: var(--sp-9) 0; }
.section--tint { background: var(--c-surface-2); }
.section--dark {
  background: var(--grad-hero);
  color: var(--c-text-inv);
  position: relative;
  overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-text-inv); }

/* 深色区块的网格纹理 + 光晕（科技感的克制表达） */
.section--dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,243,238,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,243,238,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 30%, transparent 75%);
  pointer-events: none;
}
.section--dark > .wrap { position: relative; z-index: 1; }

/* 区块标题：小标签 + 主标题 + 导语 */
.sec-head { max-width: 680px; margin-bottom: var(--sp-7); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--c-amber);
  margin-bottom: var(--sp-3);
}
.sec-head__eyebrow::before {
  content: "";
  width: 22px; height: 1.5px;
  background: var(--c-amber);
}
.sec-head--center .sec-head__eyebrow::after {
  content: "";
  width: 22px; height: 1.5px;
  background: var(--c-amber);
}
.sec-head__title { font-size: var(--fs-h2); }
.sec-head__desc { margin: var(--sp-4) 0 0; color: var(--c-text-mid); }
.section--dark .sec-head__desc { color: var(--c-text-inv-mute); }

/* ==========================================================================
   按钮
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: transform var(--dur) var(--ease-expo),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-hover); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--primary {
  background: linear-gradient(135deg, var(--c-amber-lt), var(--c-amber));
  color: #fff;
  box-shadow: 0 6px 20px rgba(180, 83, 9, .28);
}
.btn--primary:hover { box-shadow: 0 10px 30px rgba(180, 83, 9, .4); color: #fff; }

.btn--indigo { background: var(--c-indigo); color: #fff; box-shadow: 0 6px 20px rgba(24,95,165,.24); }
.btn--indigo:hover { background: var(--c-indigo-dk); color: #fff; }

.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }

.btn--onDark {
  background: rgba(245,243,238,.08);
  color: var(--c-text-inv);
  border-color: rgba(245,243,238,.4);
  backdrop-filter: blur(6px);
}
.btn--onDark:hover { background: rgba(245,243,238,.18); color: #fff; border-color: rgba(245,243,238,.7); }

.btn .btn__arrow { transition: transform var(--dur) var(--ease-expo); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ==========================================================================
   卡片
   ========================================================================== */

.card {
  background: var(--c-surface);
  border: .5px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease-expo), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); border-color: var(--c-line-strong); }

/* ==========================================================================
   数字强调（暖橙，转化锚点）
   ========================================================================== */

.stat__num {
  font-family: var(--f-num);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1;
  color: var(--c-amber);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: 16px; font-weight: 500; color: var(--c-amber); margin-left: 2px; }
.stat__label { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-mid); }

/* ==========================================================================
   滚动动效（淡入 + 上浮 + 子项级联）
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   无障碍
   ========================================================================== */

:focus-visible { outline: 2px solid var(--c-indigo); outline-offset: 3px; }

.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: var(--sp-4); top: -60px;
  background: var(--c-ink); color: #fff;
  padding: 8px 16px; border-radius: var(--r-sm);
  z-index: 200; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

/* ==========================================================================
   响应式断点
   ≥1024px  桌面 ｜ 768-1023 平板 ｜ <768px 手机（短视频引流主流量）
   ========================================================================== */
@media (max-width: 768px) {
  .wrap { padding: 0 var(--sp-4); }
}