/* ========== 赤迹 — 严格按照《赤迹UI设计方案》重写 ========== */

/* === 色彩体系 (方案文档 §二) === */
:root {
  /* 主色 */
  --red: #C41E24;
  --red-party: #D80909;
  --red-dark: #8B0000;
  --red-deeper: #5C0000;
  /* 辅助色 */
  --gold: #C9A96E;
  --gold-light: #D4A853;
  --gold-bg: #FAF3E8;
  /* 中性色 */
  --ink: #1A1A1A;
  --text: #333333;
  --text-sub: #666666;
  --text-muted: #999999;
  --bg-gray: #F5F5F7;
  --bg: #FEFEFE;
  --border: #ececec;
  /* 语义色 */
  --success: #2E7D32;
  --warning: #E65100;
  --info: #1565C0;
  /* 动画缓动 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;
  --duration-hero: 1.2s;
  /* 阴影体系 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-glow-red: 0 0 30px rgba(196,30,36,0.15);
  --shadow-glow-gold: 0 0 20px rgba(201,169,110,0.12);
}

/* === 全局重置 === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* === 毛体字体 === */
@font-face {
  font-family: "MaoTi";
  src: local("毛泽东字体"), local("方正毛泽东体"), local("FZMaoTi"),
       url("../fonts/maoti.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === 字体体系 (方案文档 §三) — 全局放大一号 === */
body {
  font: 400 18px/1.8 "SimSun", "宋体", serif;
  color: var(--text);
  background: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Microsoft YaHei", "微软雅黑", "SimHei", "黑体", sans-serif;
  font-weight: 600;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
a:hover { color: var(--red); }
ul { list-style: none; }

/* === 顶部红色装饰条 4px (方案文档 §四 布局图) === */
body::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #C41E24 0%, #ff4d4d 30%, #C9A96E 50%, #ff4d4d 70%, #C41E24 100%);
}

/* ========================================================
   加载动画 (方案文档 §七 动效清单)
   ======================================================== */
.page-loader {
  position: fixed; inset: 0;
  background: var(--red-dark);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s, visibility 0.5s;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-content { text-align: center; color: #fff; }
.loader-star {
  width: 140px; height: 140px;
  margin: 0 auto 32px;
  animation: loaderPulse 1.5s ease-in-out infinite;
  border-radius: 24px;
  overflow: hidden;
}
.loader-star svg { width: 100%; height: 100%; fill: var(--gold); }
.loader-star img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}
.loader-text {
  font: 900 56px/1 "MaoTi", "毛泽东字体", "STXingkai", "华文行楷", "KaiTi", "楷体", "SimSun", serif;
  letter-spacing: 0.6em;
  color: var(--gold);
}

/* ========================================================
   导航栏 (方案文档 §五 5.1)
   高度56px / 底部2px红线 / Logo红底金字32×32 / 链接15px YaHei
   ======================================================== */
.navbar {
  position: sticky; top: 0;
  width: 100%; z-index: 1000;
  background: var(--bg);
  border-bottom: 2px solid var(--red);
  padding: 0 20px;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  transition: box-shadow 0.2s;
}
.navbar.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.nav-brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--red);
  font: 700 20px/1 "MaoTi", "毛泽东字体", "STXingkai", "华文行楷", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.08em;
}
.brand-icon {
  width: 32px; height: 32px;
  overflow: hidden;
}
.brand-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.nav-links { display: flex; }
.nav-links a {
  color: var(--text);
  padding: 0 14px;
  font: 400 16px/56px "Microsoft YaHei", "微软雅黑", sans-serif;
  display: block;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: var(--red); }
.nav-links a.active {
  color: var(--red);
  font-weight: 600;
  border-bottom-color: var(--red);
}

.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  cursor: pointer; padding: 5px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); }

/* ========================================================
   Hero 沉浸区 (方案文档 §四 布局图 + §五 + §六)
   520px+ / 深红渐变 / 祥云纹背景 / 金色标题入场动画
   ======================================================== */
.hero {
  background: linear-gradient(135deg, #8B0000 0%, #5C0000 100%);
  min-height: 520px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  text-align: center;
}

/* 祥云纹背景纹理 (方案文档 §六 6.2 方案B) */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='160' viewBox='0 0 260 160'%3E%3Cpath d='M30 120c0-30 15-50 40-35s30-20 50 0 10 45-15 55c-15 6-25 6-40-5S30 125 30 120z' fill='rgba(255,255,255,0.018)' /%3E%3Cpath d='M160 60c0-20 10-35 28-22s20-14 35 0 7 30-10 38c-10 4-17 4-28-3s-25-8-25-13z' fill='rgba(255,255,255,0.012)' /%3E%3Cpath d='M80 30c0-14 8-24 20-16s14-10 24 0 5 22-7 28c-8 3-12 3-20-3S80 33 80 30z' fill='rgba(255,255,255,0.015)' /%3E%3C/svg%3E");
  pointer-events: none;
}

/* 光晕装饰 */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(201,169,110,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.particle {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(255,215,0,0.3);
  border-radius: 50%;
  opacity: 0;
  animation: floatUp 12s infinite;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(100vh); }
  5% { opacity: 0.4; }
  95% { opacity: 0; }
  100% { opacity: 0; transform: translateY(-5vh); }
}

.hero-content {
  z-index: 2; padding: 40px 20px;
  max-width: 680px; color: #fff;
}

/* 金色标题入场动画 (方案文档 §七 动效清单 "Hero标题 金色文字渐显+微上浮 0.8s") */
.hero-title {
  font: 900 96px/1.2 "MaoTi", "毛泽东字体", "STXingkai", "华文行楷", "KaiTi", "楷体", "SimSun", serif;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  margin-bottom: 30px;
  animation: heroTitleIn 0.8s ease-out;
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 副标题 — 仿宋 (方案文档 §三 引言体) */
.hero-subtitle {
  font: 300 22px/1.6 "FangSong", "仿宋", "SimSun", serif;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  animation: heroTitleIn 0.8s ease-out 0.15s backwards;
}

.hero-desc {
  font: 400 17px/2 "SimSun", "宋体", serif;
  color: rgba(255,255,255,0.55);
  max-width: 560px;
  margin: 0 auto 30px;
  animation: heroTitleIn 0.8s ease-out 0.3s backwards;
}

.hero-buttons {
  display: flex; gap: 12px;
  justify-content: center; flex-wrap: wrap;
}

/* ========================================================
   按钮系统 (方案文档 §五 5.2)
   无圆角方形 / padding 10px 28px / 14px YaHei 500
   ======================================================== */
.btn {
  display: inline-block;
  padding: 12px 32px;
  font: 500 16px/1.6 "Microsoft YaHei", "微软雅黑", sans-serif;
  cursor: pointer; border: none;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
/* Primary: 红底白字 */
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
/* Outline: 透明边框白字 */
.btn-outline {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-outline:hover { color: #fff; border-color: #fff; }
/* Gold: 透明边框金字 */
.btn-gold {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-gold:hover { background: rgba(255,215,0,0.1); color: var(--gold); }
/* White: 白底红字 */
.btn-white { background: #fff; color: var(--red); }
.btn-white:hover { background: var(--bg-gray); color: var(--red); }

/* ========================================================
   数据统计条 (方案文档 §五 5.5)
   浅灰背景 / border分隔 / 36px Georgia红色数字 / 13px SimSun灰色
   ======================================================== */
.number-highlight {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-gray);
  border-bottom: 1px solid var(--border);
}
.number-item {
  padding: 28px 16px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.number-item:last-child { border-right: none; }
.number-item .num {
  font: 300 42px/1 "Georgia", "Times New Roman", serif;
  color: var(--red);
  margin-bottom: 6px;
}
.number-item .label {
  font: 400 15px/1.6 "SimSun", "宋体", serif;
  color: var(--text-sub);
  letter-spacing: 0.1em;
}
.counter { display: inline-block; }

/* ========================================================
   引言块 (方案文档 §五 5.6)
   上下虚线边框 / 居中 / max-width 760px / 20px仿宋深红
   两侧五角星装饰 (方案文档 §十 "引言区增加红旗/党徽装饰")
   ======================================================== */
.quote-block {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 45px 60px;
  border-top: 1px dashed #d0d0d0;
  border-bottom: 1px dashed #d0d0d0;
  background: var(--bg);
  position: relative;
}
.quote-block::before,
.quote-block::after {
  content: '\2605';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-size: 16px;
  color: var(--red);
  opacity: 0.25;
}
.quote-block::before { left: 20px; }
.quote-block::after { right: 20px; }
.quote-block blockquote {
  font: 400 22px/2.2 "FangSong", "仿宋", "KaiTi", "楷体", serif;
  color: var(--red-dark);
  margin-bottom: 10px;
}
.quote-block cite {
  font: 400 16px/1.6 "SimSun", "宋体", serif;
  color: var(--text-muted);
}

/* ========================================================
   通用区块背景交替 (方案文档 §四 4.3)
   白底区 → 浅灰底区 → 白底区 → 深色底区 → 白底区 → 深红底区 → 深褐页脚
   区块之间无margin，通过背景色交替和border分隔
   ======================================================== */
.section {
  padding: 50px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.section-gray { background: var(--bg-gray); padding: 50px 20px; }
.section-warm { background: var(--gold-bg); padding: 50px 20px; }
.section-dark { background: var(--ink); color: #fff; padding: 50px 20px; }
.section-dark .section-inner { max-width: 1200px; margin: 0 auto; }
.section-red {
  background: linear-gradient(135deg, #8B0000 0%, #5C0000 100%);
  color: #fff;
  padding: 50px 20px;
  position: relative;
}
/* CTA区祥云纹背景 (方案文档 §十 "CTA区增加背景装饰") */
.section-red::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 200 120'%3E%3Cpath d='M25 90c0-22 12-38 30-26s22-15 38 0 8 34-12 42c-12 5-19 5-30-4S25 93 25 90z' fill='rgba(255,255,255,0.02)' /%3E%3Cpath d='M130 50c0-15 8-26 20-17s15-11 26 0 6 23-8 29c-8 3-13 3-20-2s-18-6-18-10z' fill='rgba(255,255,255,0.015)' /%3E%3C/svg%3E");
  pointer-events: none;
}

/* 栏目标题 (方案文档 §三 栏目标题 22-24px YaHei 600 letter-spacing 0.08em) */
.section-title {
  font: 600 28px/1.4 "Microsoft YaHei", "微软雅黑", sans-serif;
  text-align: center;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.08em;
}
/* 下划线动画：从中间向两侧展开 (方案文档 §七 "栏目标题下划线 从中间向两侧展开 0.4s") */
.section-title::after {
  content: '';
  display: block;
  width: 0; height: 3px;
  background: var(--red);
  margin: 12px auto 0;
  transition: width 0.4s ease;
}
.section-title.visible::after { width: 40px; }

.section-subtitle {
  text-align: center;
  color: var(--text-sub);
  font: 400 16px/1.8 "SimSun", "宋体", serif;
  margin-bottom: 35px;
}

/* 深色/红色区块内的标题 */
.section-dark .section-title { color: #fff; }
.section-dark .section-title::after { background: var(--gold); width: 40px; }
.section-dark .section-subtitle { color: rgba(255,255,255,0.5); }
.section-red .section-title { color: #fff; }
.section-red .section-title::after { background: var(--gold); width: 40px; }
.section-red .section-subtitle { color: rgba(255,255,255,0.5); }

/* ========================================================
   左右图文 (方案文档 §四 布局图)
   ======================================================== */
.intro-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  background: var(--bg);
  max-width: 1200px;
  margin: 0 auto;
}
.intro-img { overflow: hidden; }
.intro-img img { width: 100%; height: 100%; object-fit: cover; }
.intro-text {
  padding: 50px 40px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.intro-text h2 {
  font: 700 26px/1.6 "Microsoft YaHei", "微软雅黑", sans-serif;
  color: var(--text);
  margin-bottom: 16px;
}
.intro-text p {
  font: 400 17px/2.2 "SimSun", "宋体", serif;
  color: var(--text-sub);
  margin-bottom: 20px;
}

/* ========================================================
   功能卡片 (方案文档 §五 5.3)
   无圆角无阴影紧凑网格 / 3列×2行 border分隔 / hover背景变浅灰
   ======================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  max-width: 1200px;
  margin: 0 auto;
}
.feature-card {
  padding: 30px 24px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.feature-card:nth-child(3n) { border-right: none; }
.feature-card:nth-child(n+4) { border-bottom: none; }
.feature-card:hover { background: var(--bg-gray); }

/* 功能图标 — 印章感 (方案文档 §六 6.3)
   44×44 红底金字 SimHei 800 / box-shadow inset金色边框 */
.feature-icon {
  width: 44px; height: 44px;
  background: var(--red);
  color: #FFD700;
  display: flex; align-items: center; justify-content: center;
  font: 800 18px/1 "SimHei", "黑体", sans-serif;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 2px rgba(255,215,0,0.3);
}
/* 卡片标题 16px YaHei 600 (方案文档 §三) */
.feature-card h3 {
  font: 600 18px/1.4 "Microsoft YaHei", "微软雅黑", sans-serif;
  margin-bottom: 8px;
  color: var(--text);
}
.feature-card p {
  font: 400 16px/1.9 "SimSun", "宋体", serif;
  color: var(--text-sub);
}

/* ========================================================
   景点卡片 (方案文档 §五 5.4)
   300px高 / hover scale(1.06) / 底部渐变遮罩 / 金色边框标签
   2列网格 border分隔
   ======================================================== */
.spot-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  max-width: 1200px;
  margin: 0 auto;
}
.spot-item {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.spot-item:nth-child(2n) { border-right: none; }
.spot-item:nth-child(n+3) { border-bottom: none; }
.spot-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s;
}
.spot-item:hover img { transform: scale(1.06); }
.spot-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #fff;
}
/* 18px YaHei 600 白色 (方案文档 §五 5.4) */
.spot-overlay h3 {
  font: 600 20px/1.4 "Microsoft YaHei", "微软雅黑", sans-serif;
  margin-bottom: 4px;
}
.spot-overlay p {
  font: 400 15px/1.8 "SimSun", "宋体", serif;
  color: rgba(255,255,255,0.7);
}
.spot-tag {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid rgba(255,215,0,0.5);
  font: 400 14px/1.6 "SimSun", "宋体", serif;
  color: var(--gold);
  margin-top: 8px;
  width: fit-content;
}

/* ========================================================
   AI聊天组件 (方案文档 §五 5.7)
   整体border无圆角 / 红底标题栏 / 浅灰消息区 / 方形输入框+红色按钮
   ======================================================== */
.chat-container {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--border);
}
.chat-header {
  background: var(--ink);
  color: rgba(255,255,255,0.85);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  border-bottom: 2px solid var(--red);
  position: relative;
}
.chat-avatar {
  width: 32px; height: 32px;
  background: var(--red-dark);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 "SimHei", "黑体", sans-serif;
  border: 1px solid rgba(201,169,110,0.3);
}
.chat-messages {
  padding: 20px;
  min-height: 360px;
  max-height: 460px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-gray);
}
.chat-msg {
  display: flex; gap: 10px;
  max-width: 80%;
}
.chat-msg.bot { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1 "SimHei", "黑体", sans-serif;
  flex-shrink: 0;
}
.chat-msg.bot .msg-avatar { background: var(--red); color: var(--gold); }
.chat-msg.user .msg-avatar { background: var(--text); color: #fff; }
.msg-bubble {
  padding: 10px 14px;
  font: 400 14px/1.9 "SimSun", "宋体", serif;
}
/* 白底气泡 */
.chat-msg.bot .msg-bubble {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}
/* 红底白字气泡 */
.chat-msg.user .msg-bubble {
  background: var(--red);
  color: #fff;
}
/* 方形输入框 */
.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
  background: #fff;
}
.chat-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  font: 400 14px/1.6 "SimSun", "宋体", serif;
  outline: none;
  background: var(--bg-gray);
}
.chat-input:focus { border-color: var(--red); }
.chat-send {
  padding: 8px 20px;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid rgba(201,169,110,0.3);
  cursor: pointer;
  font: 500 13px/1.6 "Microsoft YaHei", "微软雅黑", sans-serif;
  letter-spacing: 0.1em;
  transition: all 0.2s;
}
.chat-send:hover { background: var(--red-dark); color: #fff; border-color: var(--red-dark); }

/* ========================================================
   数据可视化区 (方案文档 §二 2.2 数据区)
   墨色底 + 红色数据 + 金色装饰线
   ======================================================== */
.dash-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 16px;
}
.dash-card h3 {
  font: 300 15px/1.6 "SimSun", "宋体", serif;
  color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,169,110,0.15);
}
.dash-card.span-2 { grid-column: span 2; }
.dash-card.span-3 { grid-column: span 3; }
.dash-chart { width: 100%; height: 250px; }

/* ========================================================
   技术架构区
   ======================================================== */
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
}
.tech-left { padding: 30px; }
.tech-right {
  padding: 30px;
  background: var(--bg-gray);
  border-left: 1px solid var(--border);
}
.tech-section-title {
  color: var(--red);
  font: 600 16px/1.4 "Microsoft YaHei", sans-serif;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--red);
}
.tech-step {
  display: flex; gap: 12px; align-items: start;
  margin-bottom: 16px;
}
.tech-step:last-child { margin-bottom: 0; }
.tech-step-num {
  width: 28px; height: 28px;
  background: var(--red);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font: 700 12px/1 "Georgia", serif;
}
.tech-step-title {
  font: 600 16px/1.5 "Microsoft YaHei", sans-serif;
}
.tech-step-desc {
  font: 400 15px/1.8 "SimSun", "宋体", serif;
  color: var(--text-sub);
  margin-top: 2px;
}
.arch-layer {
  text-align: center;
  padding: 8px;
  font: 500 13px/1.6 "Microsoft YaHei", sans-serif;
  letter-spacing: 0.1em;
}
.arch-arrow {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 2px 0;
}
.arch-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 6px 0;
}
.arch-split div {
  text-align: center;
  padding: 8px;
  border: 1px solid var(--border);
  font: 400 13px/1.6 "SimSun", "宋体", serif;
}

.tech-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tech-tag {
  padding: 3px 10px;
  border: 1px solid var(--border);
  font: 400 12px/1.6 "SimSun", "宋体", serif;
  color: var(--text-sub);
  background: var(--bg-gray);
}

/* ========================================================
   页脚 (方案文档 §二 2.2 深褐红 #2A0A0A)
   ======================================================== */
.footer {
  background: #2a0a0a;
  color: rgba(255,255,255,0.5);
  padding: 40px 20px 20px;
  border-top: 4px solid var(--gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-brand {
  color: var(--gold);
  font: 600 24px/1.4 "MaoTi", "毛泽东字体", "STXingkai", "华文行楷", "Microsoft YaHei", sans-serif;
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}
.footer-desc {
  font: 400 15px/1.9 "SimSun", "宋体", serif;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}
.footer h4 {
  color: rgba(255,255,255,0.6);
  font: 500 16px/1.4 "Microsoft YaHei", "微软雅黑", sans-serif;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer ul li { margin-bottom: 4px; }
.footer ul a {
  color: rgba(255,255,255,0.35);
  font: 400 15px/1.8 "SimSun", "宋体", serif;
}
.footer ul a:hover { color: var(--gold); }
.footer-bottom {
  max-width: 1200px;
  margin: 30px auto 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  text-align: center;
  font: 400 14px/1.6 "SimSun", "宋体", serif;
  color: rgba(255,255,255,0.2);
}

/* ========================================================
   滚动动画 (方案文档 §七)
   ======================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-left { opacity: 0; transform: translateX(-16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in-left.visible { opacity: 1; transform: translateX(0); }
.fade-in-right { opacity: 0; transform: translateX(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in-right.visible { opacity: 1; transform: translateX(0); }

/* ========================================================
   滚动进度条 3px红色 (方案文档 §七 7.3)
   ======================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--red);
  z-index: 9999;
}

/* ========================================================
   返回顶部 (方案文档 §七 7.3)
   ======================================================== */
.back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 36px; height: 36px;
  background: var(--red);
  color: var(--gold);
  border: none; cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  z-index: 100;
  transition: opacity 0.2s;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--red-dark); }

/* ========================================================
   Toast
   ======================================================== */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--red);
  color: #fff;
  padding: 10px 24px;
  font: 400 14px/1.6 "SimSun", "宋体", serif;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ========================================================
   打字指示器
   ======================================================== */
.typing-indicator {
  display: flex; gap: 4px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  width: fit-content;
}
.typing-dot {
  width: 5px; height: 5px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typing 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ========================================================
   页面头部 (子页面共用)
   ======================================================== */
.page-header {
  padding: 100px 20px 50px;
  background: linear-gradient(135deg, #8B0000 0%, #5C0000 100%);
  text-align: center;
  color: #fff;
  position: relative;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='160' viewBox='0 0 260 160'%3E%3Cpath d='M30 120c0-30 15-50 40-35s30-20 50 0 10 45-15 55c-15 6-25 6-40-5S30 125 30 120z' fill='rgba(255,255,255,0.018)' /%3E%3Cpath d='M160 60c0-20 10-35 28-22s20-14 35 0 7 30-10 38c-10 4-17 4-28-3s-25-8-25-13z' fill='rgba(255,255,255,0.012)' /%3E%3C/svg%3E");
  pointer-events: none;
}
.page-header h1 {
  font: 700 40px/1.4 "MaoTi", "毛泽东字体", "STXingkai", "华文行楷", "KaiTi", "楷体", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  color: var(--gold);
  position: relative;
}
.page-header p {
  font: 400 17px/1.8 "FangSong", "仿宋", "SimSun", serif;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
  position: relative;
}

/* ========================================================
   时间线 (方案文档 §八 8.2 中轴线双侧交替)
   ======================================================== */
.timeline-container {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 0;
}
.timeline-container::before {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 0; bottom: 0;
  width: 2px;
  background: var(--red);
  opacity: 0.3;
}
.timeline-item {
  display: flex; align-items: flex-start;
  margin-bottom: 30px;
  position: relative;
}
.timeline-item:nth-child(odd) { flex-direction: row-reverse; }
.timeline-item:nth-child(odd) .timeline-content {
  text-align: right; margin-right: 30px; margin-left: 0;
}
.timeline-dot {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--red);
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 0 2px var(--red);
}
.timeline-content {
  width: 44%;
  margin-left: 30px;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  transition: box-shadow 0.2s;
}
.timeline-item:nth-child(odd) .timeline-content {
  border-left: 1px solid var(--border);
  border-right: 3px solid var(--red);
}
.timeline-content:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.timeline-year {
  display: inline-block;
  background: var(--red);
  color: var(--gold);
  padding: 2px 10px;
  font: 700 13px/1.6 "Georgia", "Times New Roman", serif;
  margin-bottom: 6px;
}
.timeline-content h3 {
  font: 600 15px/1.5 "Microsoft YaHei", "微软雅黑", sans-serif;
  color: var(--text);
  margin-bottom: 4px;
}
.timeline-content p {
  font: 400 13px/1.9 "SimSun", "宋体", serif;
  color: var(--text-sub);
}

/* ========================================================
   知识图谱
   ======================================================== */
.graph-container {
  width: 100%; height: 600px;
  background: #1a0a0a;
  overflow: hidden;
}

/* ========================================================
   数据大屏
   ======================================================== */
.dashboard-page {
  min-height: 100vh;
  background: #080812;
  color: #fff;
  padding: 60px 16px 20px;
}
.dashboard-header { text-align: center; padding: 20px 0 16px; }
.dashboard-header h1 {
  font: 400 22px/1.4 "FangSong", "仿宋", "SimSun", serif;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.4em;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ========================================================
   知识竞赛
   ======================================================== */
.quiz-card {
  background: #fff;
  padding: 36px;
  border: 1px solid var(--border);
  max-width: 680px;
  margin: 0 auto;
}
.quiz-progress { display: flex; gap: 4px; margin-bottom: 24px; }
.quiz-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.quiz-dot.active { background: var(--red); transform: scale(1.3); }
.quiz-dot.done { background: var(--text-muted); }
.quiz-question {
  font: 600 18px/1.7 "Microsoft YaHei", "微软雅黑", sans-serif;
  margin-bottom: 24px;
  color: var(--text);
}
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  padding: 12px 16px;
  border: 1px solid var(--border);
  cursor: pointer;
  font: 400 15px/1.6 "SimSun", "宋体", serif;
  background: transparent;
  text-align: left;
  transition: all 0.15s;
}
.quiz-option:hover { border-color: var(--red); background: #fff5f5; }
.quiz-option.correct { border-color: var(--success); background: #f0f7f0; color: var(--success); }
.quiz-option.wrong { border-color: #C62828; background: #fef0f0; color: #C62828; }

/* ========================================================
   统计卡片 (深色背景中)
   ======================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-card {
  text-align: center;
  padding: 24px 16px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.stat-card:last-child { border-right: none; }
.stat-number {
  font: 300 28px/1 "Georgia", "Times New Roman", serif;
  color: #fff;
  margin-bottom: 6px;
}
.stat-label {
  font: 400 13px/1.6 "SimSun", "宋体", serif;
  color: rgba(255,255,255,0.45);
}

/* ========================================================
   信息卡片
   ======================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.info-card {
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.info-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.info-card-img { height: 180px; overflow: hidden; position: relative; }
.info-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.info-card:hover .info-card-img img { transform: scale(1.06); }
.info-card-body { padding: 16px; }
.info-card-body h3 {
  font: 600 15px/1.5 "Microsoft YaHei", "微软雅黑", sans-serif;
  margin-bottom: 6px;
  color: var(--text);
}
.info-card-body p {
  font: 400 13px/1.9 "SimSun", "宋体", serif;
  color: var(--text-sub);
}
.tag {
  display: inline-block;
  padding: 1px 8px;
  background: #fff5f5;
  color: var(--red);
  font: 400 12px/1.6 "SimSun", "宋体", serif;
  margin-top: 8px;
  border: 1px solid rgba(216,9,9,0.15);
}

/* ========================================================
   Tab组件
   ======================================================== */
.tabs {
  display: flex; gap: 0;
  justify-content: center;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  padding: 10px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font: 400 14px/1.6 "Microsoft YaHei", "微软雅黑", sans-serif;
  color: var(--text-sub);
  margin-bottom: -1px;
  transition: color 0.15s;
}
.tab-btn:hover { color: var(--red); }
.tab-btn.active {
  color: var(--red);
  border-bottom-color: var(--red);
  font-weight: 600;
}

/* ========================================================
   搜索框
   ======================================================== */
.search-box {
  display: flex;
  max-width: 420px;
  margin: 0 auto 30px;
  border: 1px solid var(--border);
}
.search-box input {
  flex: 1;
  padding: 8px 14px;
  border: none; outline: none;
  font: 400 14px/1.6 "SimSun", "宋体", serif;
  background: transparent;
}
.search-box button {
  padding: 8px 20px;
  background: var(--red);
  color: #fff;
  border: none; cursor: pointer;
  font: 500 14px/1.6 "Microsoft YaHei", "微软雅黑", sans-serif;
}

/* ========================================================
   关于页
   ======================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
}
.about-img { overflow: hidden; }
.about-img img { width: 100%; height: 100%; object-fit: cover; }

/* ========================================================
   快捷问题
   ======================================================== */
.quick-q {
  width: 100%; text-align: left;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  cursor: pointer;
  font: 400 13px/1.6 "SimSun", "宋体", serif;
  color: var(--text-sub);
  transition: all 0.15s;
}
.quick-q:hover { background: #fff5f5; color: var(--red); }

/* ========================================================
   介绍区图片占位符
   ======================================================== */
.intro-img-placeholder {
  background: linear-gradient(135deg, #8B0000 0%, #5C0000 50%, #3A0000 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  min-height: 320px;
}
.intro-img-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M100 20l3 9h10l-8 6 3 9-8-6-8 6 3-9-8-6h10z' fill='rgba(201,169,110,0.08)' /%3E%3Cpath d='M50 100l3 9h10l-8 6 3 9-8-6-8 6 3-9-8-6h10z' fill='rgba(201,169,110,0.05)' /%3E%3Cpath d='M150 100l3 9h10l-8 6 3 9-8-6-8 6 3-9-8-6h10z' fill='rgba(201,169,110,0.05)' /%3E%3Cpath d='M100 180l3 9h10l-8 6 3 9-8-6-8 6 3-9-8-6h10z' fill='rgba(201,169,110,0.04)' /%3E%3C/svg%3E");
  pointer-events: none;
}
.intro-placeholder-text {
  font: 900 56px/1 "SimHei", "黑体", sans-serif;
  color: rgba(201,169,110,0.15);
  letter-spacing: 0.3em;
  z-index: 1;
}

/* ========================================================
   景点卡片占位符背景
   ======================================================== */
.spot-placeholder {
  position: relative;
}
.spot-placeholder-name {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  font: 900 64px/1 "SimHei", "黑体", sans-serif;
  color: rgba(255,255,255,0.06);
  letter-spacing: 0.2em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.spot-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 10l2 6h7l-5.5 4 2 6-5.5-4-5.5 4 2-6-5.5-4h7z' fill='rgba(201,169,110,0.04)' /%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ========================================================
   红色精神谱系 — 横向滚动卡片
   ======================================================== */
.spirit-scroll-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
}
.spirit-scroll {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
  padding-bottom: 12px;
}
.spirit-scroll::-webkit-scrollbar { height: 4px; }
.spirit-scroll::-webkit-scrollbar-track { background: transparent; }
.spirit-scroll::-webkit-scrollbar-thumb { background: var(--red); }
.spirit-card {
  flex: 0 0 220px;
  padding: 28px 20px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-right: none;
  scroll-snap-align: start;
  position: relative;
  transition: background 0.2s;
}
.spirit-card:last-child { border-right: 1px solid var(--border); }
.spirit-card:hover { background: #fff9f0; }
.spirit-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20px; right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--gold) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.spirit-card:hover::after { opacity: 1; }
.spirit-year {
  font: 700 13px/1.4 "Georgia", "Times New Roman", serif;
  color: var(--red);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.spirit-icon-deco {
  color: var(--gold);
  opacity: 0.3;
  margin-bottom: 10px;
}
.spirit-name {
  font: 700 18px/1.4 "Microsoft YaHei", "微软雅黑", sans-serif;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}
.spirit-place {
  font: 400 13px/1.6 "SimSun", "宋体", serif;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.spirit-desc {
  font: 400 13px/1.9 "SimSun", "宋体", serif;
  color: var(--text-sub);
}

/* ========================================================
   AI聊天骨架屏（替代弹跳点）
   ======================================================== */
.skeleton-bubble {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skeleton-line-long { width: 100%; }
.skeleton-line-medium { width: 75%; }
.skeleton-line-short { width: 50%; }
@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================================
   CTA区域装饰
   ======================================================== */
.cta-section { position: relative; overflow: hidden; padding: 60px 20px; }
.cta-star {
  position: absolute;
  color: rgba(201,169,110,0.08);
  z-index: 0;
}
.cta-star-left { top: 20px; left: 40px; }
.cta-star-right { bottom: 20px; right: 40px; }
.cta-flag-deco {
  text-align: center;
  margin-bottom: 16px;
  opacity: 0.6;
}

/* ========================================================
   响应式 (方案文档 §九)
   桌面端 >1024 / 平板端 768-1024 / 手机端 <768 / 小屏 <480
   ======================================================== */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card:nth-child(3n) { border-right: 1px solid var(--border); }
  .feature-card:nth-child(2n) { border-right: none; }
  .feature-card:nth-child(n+3) { border-bottom: 1px solid var(--border); }
  .feature-card:nth-child(n+5) { border-bottom: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .number-highlight { grid-template-columns: repeat(2, 1fr); }
  .number-item:nth-child(2n) { border-right: none; }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .spot-showcase { grid-template-columns: 1fr; }
  .spot-item { border-right: none !important; }
  .spot-item:last-child { border-bottom: none; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-right { border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 768px) {
  body { font-size: 15px; }
  .hero { min-height: 420px; }
  .hero-title { font-size: 48px; }
  .hero-subtitle { font-size: 15px; letter-spacing: 0.15em; }
  .section { padding: 36px 16px; }
  .section-gray, .section-dark, .section-red { padding: 36px 16px; }
  .features-grid { grid-template-columns: 1fr; }
  .feature-card { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .feature-card:last-child { border-bottom: none !important; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dash-card.span-2, .dash-card.span-3 { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .intro-section { grid-template-columns: 1fr; }
  .intro-text { padding: 30px 20px; }
  .intro-img { height: 240px; }
  .about-grid { grid-template-columns: 1fr; }
  .timeline-container::before { left: 16px; }
  .timeline-item, .timeline-item:nth-child(odd) { flex-direction: column; padding-left: 30px; }
  .timeline-dot { left: 16px; }
  .timeline-content, .timeline-item:nth-child(odd) .timeline-content {
    width: 100%; margin-left: 0; margin-right: 0; text-align: left;
    border-left: 3px solid var(--red); border-right: 1px solid var(--border);
  }
  .nav-links {
    display: none; position: fixed;
    top: 60px; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 2px solid var(--red);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .nav-links.show { display: flex; }
  .nav-links a { line-height: 44px; padding: 0 20px; border-bottom: none; margin-bottom: 0; }
  .nav-toggle { display: flex; }
  .spot-showcase { grid-template-columns: 1fr; }
  .spot-item { height: 220px; }
  .quote-block { padding: 30px 30px; }
  .spirit-card { flex: 0 0 200px; padding: 24px 16px 20px; }
  .spirit-name { font-size: 16px; }
  .spot-placeholder-name { font-size: 48px; }
  .cta-star { display: none; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 36px; }
  .number-highlight { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .spirit-card { flex: 0 0 180px; padding: 20px 14px 18px; }
  .intro-placeholder-text { font-size: 36px; }
  .spot-placeholder-name { font-size: 36px; }
}

/* ==========================================================================
   PHASE 1-5: 视觉与交互全面升级
   ========================================================================== */

/* === 页面过渡幕布 === */
.page-transition-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #8B0000, #5C0000);
  z-index: 10000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
  pointer-events: none;
}
.page-transition-overlay.active {
  transform: scaleX(1);
  pointer-events: all;
}

/* === 滚动动画增强 === */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

.scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.scale-in.visible { opacity: 1; transform: scale(1); }

.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.56s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(9) { transition-delay: 0.64s; opacity: 1; transform: translateY(0); }

/* === PHASE 2: Hero 区变革 === */
.hero {
  min-height: 100vh;
}
.hero-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hero-layer-mountains {
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  clip-path: polygon(
    0% 100%, 0% 82%, 3% 78%, 8% 72%, 15% 76%, 22% 65%, 28% 70%, 35% 58%,
    42% 64%, 48% 55%, 55% 60%, 62% 52%, 68% 58%, 75% 48%, 82% 54%,
    88% 46%, 93% 52%, 97% 58%, 100% 55%, 100% 100%
  );
  z-index: 1;
}
.hero-layer-glow {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(201,169,110,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(255,77,77,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(201,169,110,0.08) 0%, transparent 45%);
  animation: heroLightShift 20s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes heroLightShift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(3%, -2%) rotate(2deg); }
}

/* Hero 标题金属渐变 */
.hero .hero-title {
  font-size: clamp(56px, 10vw, 120px);
  color: transparent;
  background: linear-gradient(180deg, #FFD700 0%, #C9A96E 40%, #8B6914 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 4px 20px rgba(201,169,110,0.3)) drop-shadow(0 0 60px rgba(201,169,110,0.15));
  animation: heroTitleReveal 1.2s var(--ease-out-expo) forwards;
}
@keyframes heroTitleReveal {
  0% { opacity: 0; transform: translateY(40px) scale(0.95); letter-spacing: 0.4em; }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.2em; }
}

/* 增强粒子样式 */
.particle-enhanced {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(100vh) rotate(0deg); }
  5% { opacity: 0.6; }
  50% { opacity: 0.3; }
  95% { opacity: 0; }
  100% { opacity: 0; transform: translateY(-5vh) rotate(180deg); }
}

/* 滚动指示器 */
.hero-scroll-hint {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  animation: scrollHintPulse 2.5s ease-in-out infinite;
}
.hero-scroll-hint span {
  font: 400 12px/1 "SimSun", serif;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.3em;
}
.hero-scroll-hint::after {
  content: '';
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, rgba(201,169,110,0.5), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollHintPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* === PHASE 3: 微交互 === */

/* 按钮涟漪 + 上浮 */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-out-expo);
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s, opacity 0.5s;
  pointer-events: none;
}
.btn:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(196,30,36,0.3);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-gold);
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline:hover {
  transform: translateY(-2px);
}

/* 功能卡片增强 */
.feature-card {
  transition: background 0.3s, transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
  position: relative;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.feature-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}
.feature-card:hover .feature-icon {
  transform: rotate(-5deg) scale(1.1);
  box-shadow: 0 4px 12px rgba(196,30,36,0.2), inset 0 0 0 2px rgba(255,215,0,0.5);
}

/* 导航栏毛玻璃 */
.navbar {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(254,254,254,0.92);
  transition: box-shadow 0.3s, background 0.3s;
}
.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  background: rgba(254,254,254,0.98);
}
/* 导航链接下划线动画 */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 2px;
  background: var(--red);
  transition: width 0.3s var(--ease-out-expo), left 0.3s var(--ease-out-expo);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%; left: 0;
}
.nav-links a {
  position: relative;
}

/* 景点卡片悬浮升级 */
.spot-overlay {
  transition: padding-bottom 0.4s var(--ease-out-expo), background 0.4s;
}
.spot-item:hover .spot-overlay {
  padding-bottom: 32px;
  background: linear-gradient(to top, rgba(92,0,0,0.9) 0%, rgba(92,0,0,0.4) 40%, transparent 100%);
}
.spot-tag {
  transition: all 0.3s;
}
.spot-item:hover .spot-tag {
  background: rgba(255,215,0,0.15);
  border-color: var(--gold);
}

/* 信息卡片悬浮 */
.info-card {
  transition: box-shadow 0.3s, transform 0.3s var(--ease-out-expo);
}
.info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* === PHASE 4: 加载动画升级 === */
.page-loader {
  background: #1a0000;
}
.loader-star {
  position: relative;
}
.loader-star::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(201,169,110,0.25);
  border-radius: 28px;
  animation: loaderRing 2s ease-in-out infinite;
}
@keyframes loaderRing {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(1.15); opacity: 0.6; }
}
.page-loader .loader-text {
  color: transparent;
  background: linear-gradient(90deg, #C9A96E, #FFD700, #C9A96E);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: loaderTextShimmer 2s ease-in-out infinite;
}
@keyframes loaderTextShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.loader-progress {
  width: 120px; height: 1px;
  background: rgba(201,169,110,0.1);
  margin: 20px auto 0;
  position: relative;
  overflow: hidden;
}
.loader-progress::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  height: 100%; width: 0;
  background: var(--gold);
  animation: loaderBar 0.6s ease-out forwards;
}
@keyframes loaderBar {
  to { width: 100%; }
}

/* === PHASE 5: 区块视觉深度 === */

/* 区块分隔线 */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
  max-width: 200px;
  margin: 0 auto;
  position: relative;
}
.section-divider::before {
  content: '\2605';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 0 12px;
  color: var(--red);
  font-size: 10px;
  opacity: 0.4;
}

/* 深色区块光斑呼吸 */
.section-dark {
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(196,30,36,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(201,169,110,0.03) 0%, transparent 40%);
  animation: darkSectionGlow 15s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes darkSectionGlow {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* 引言块升级 */
.quote-block {
  background: linear-gradient(135deg, #FEFEFE 0%, #FAF3E8 100%);
}
.quote-block blockquote::before {
  content: '\201C';
  position: absolute;
  top: -20px; left: -10px;
  font: 900 72px/1 Georgia, serif;
  color: rgba(196,30,36,0.06);
}
.quote-block blockquote {
  position: relative;
}

/* 数据大屏角标装饰 */
.dash-card {
  position: relative;
}
.dash-card::before,
.dash-card::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(201,169,110,0.2);
  pointer-events: none;
}
.dash-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.dash-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* 音效开关按钮 */
.sound-toggle {
  position: fixed;
  bottom: 24px; left: 24px;
  width: 36px; height: 36px;
  background: rgba(26,26,26,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--gold);
  font-size: 14px;
  cursor: pointer;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.sound-toggle:hover { background: rgba(26,26,26,0.8); }
.sound-toggle .sound-off { display: none; }
.sound-toggle.muted .sound-on { display: none; }
.sound-toggle.muted .sound-off { display: inline; text-decoration: line-through; opacity: 0.5; }

/* 精神卡片悬浮增强 */
.spirit-card {
  transition: background 0.3s, transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}
.spirit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* 时间线节点脉冲 */
.timeline-item.visible .timeline-dot {
  animation: timelineDotPulse 0.6s ease-out;
}
@keyframes timelineDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(196,30,36,0.4); }
  100% { box-shadow: 0 0 0 10px rgba(196,30,36,0); }
}

/* will-change 性能提示 */
.hero-layer, .particle-enhanced, .page-transition-overlay { will-change: transform; }
.hero-content { will-change: opacity, transform; }

/* ========== Phase 7: CSS 艺术景点背景 ========== */
.spot-art-jinggangshan {
  background:
    radial-gradient(ellipse 60% 40% at 30% 80%, rgba(60,20,20,0.9), transparent),
    radial-gradient(ellipse 50% 35% at 70% 75%, rgba(80,25,25,0.8), transparent),
    radial-gradient(circle at 50% 20%, rgba(255,215,0,0.04) 0%, transparent 60%),
    linear-gradient(135deg, #2A0A10 0%, #4A1520 40%, #1A0505 100%) !important;
}
.spot-art-jinggangshan::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,215,0,0.4), transparent),
    radial-gradient(1px 1px at 60% 15%, rgba(255,215,0,0.3), transparent),
    radial-gradient(1px 1px at 80% 25%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 35% 10%, rgba(255,215,0,0.25), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}
.spot-art-yanan {
  background:
    radial-gradient(ellipse 80% 30% at 50% 85%, rgba(30,30,50,0.9), transparent),
    conic-gradient(from 200deg at 50% 60%, rgba(40,20,30,0.6), rgba(30,25,50,0.8), rgba(40,20,30,0.6)),
    radial-gradient(circle at 80% 20%, rgba(255,180,60,0.05) 0%, transparent 40%),
    linear-gradient(135deg, #0D0D1A 0%, #2A1530 40%, #1A0A20 100%) !important;
}
.spot-art-yanan::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 75% 25%, rgba(255,180,60,0.35), transparent),
    radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 55% 35%, rgba(255,215,0,0.2), transparent);
  pointer-events: none;
}
.spot-art-zunyi {
  background:
    radial-gradient(ellipse 70% 45% at 45% 75%, rgba(60,15,20,0.9), transparent),
    radial-gradient(circle at 20% 30%, rgba(196,30,36,0.06) 0%, transparent 50%),
    linear-gradient(160deg, #1A0A10 0%, #3A1018 35%, #2A0808 100%) !important;
}
.spot-art-zunyi::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(196,30,36,0.08) 100%),
    radial-gradient(1px 1px at 30% 15%, rgba(255,215,0,0.3), transparent),
    radial-gradient(1px 1px at 65% 28%, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}
.spot-art-tiananmen {
  background:
    radial-gradient(ellipse 100% 20% at 50% 90%, rgba(40,20,40,0.8), transparent),
    radial-gradient(circle at 50% 40%, rgba(196,30,36,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0A0515 0%, #1A1030 40%, #2A1540 100%) !important;
}
.spot-art-tiananmen::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 50% 20%, rgba(255,215,0,0.5), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 70% 15%, rgba(255,215,0,0.2), transparent),
    radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.15), transparent);
  pointer-events: none;
}
.spot-item { position: relative; }
.spot-placeholder-name {
  font: 900 48px/1 "SimHei","黑体",sans-serif;
  color: rgba(201,169,110,0.06);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  letter-spacing: 0.3em;
  pointer-events: none;
  z-index: 0;
}

/* ========== Phase 6: 时间线轴增强 ========== */
.timeline-item .timeline-content {
  transition: transform 0.5s var(--ease-out-expo), opacity 0.5s var(--ease-out-expo);
}
.timeline-item:nth-child(odd) .timeline-content { transform: translateX(-20px); }
.timeline-item:nth-child(even) .timeline-content { transform: translateX(20px); }
.timeline-item.visible .timeline-content { transform: translateX(0); }

/* ========== Phase 6: 数据大屏扫描线+角标+LED ========== */
.dash-scanline {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(196,30,36,0.4), transparent);
  animation: dashScan 4s linear infinite;
  pointer-events: none;
  z-index: 999;
}
@keyframes dashScan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.dash-card-corner::before,
.dash-card-corner::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-color: rgba(196,30,36,0.3);
  border-style: solid;
}
.dash-card-corner::before {
  top: -1px; left: -1px;
  border-width: 1px 0 0 1px;
}
.dash-card-corner::after {
  bottom: -1px; right: -1px;
  border-width: 0 1px 1px 0;
}
.led-val {
  font-family: "Georgia","Times New Roman",serif;
  text-shadow: 0 0 8px rgba(196,30,36,0.3), 0 0 20px rgba(196,30,36,0.1);
}

/* ========== Phase 6: 答题完成粒子爆发 ========== */
.quiz-particle-burst {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.quiz-particle-burst span {
  position: absolute;
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: quizBurst 1.2s ease-out forwards;
}
@keyframes quizBurst {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ========== Phase 6: AI导览打字光标+思考脉冲 ========== */
.typing-cursor::after {
  content: '|';
  display: inline;
  animation: cursorBlink 0.6s step-end infinite;
  color: var(--red);
  font-weight: 300;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.thinking-pulse {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 8px 16px;
  background: var(--bg-gray);
  border: 1px solid var(--border);
}
.thinking-pulse span {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: thinkPulse 1.2s ease-in-out infinite;
}
.thinking-pulse span:nth-child(2) { animation-delay: 0.2s; }
.thinking-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ========== Phase 6: 知识图谱呼吸光效 ========== */
.graph-glow {
  animation: graphBreathe 4s ease-in-out infinite;
}
@keyframes graphBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,30,36,0); }
  50% { box-shadow: 0 0 30px 2px rgba(196,30,36,0.08); }
}

/* ========== Phase 6: 地图雷达扫描 ========== */
.map-radar {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0.3;
}
.map-radar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(196,30,36,0.2);
}
.map-radar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(196,30,36,0.15) 30deg, transparent 60deg);
  animation: radarSweep 3s linear infinite;
}
@keyframes radarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========== Phase 6: 关于页技术栈跑马灯 ========== */
.tech-marquee-wrapper {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  background: var(--bg-gray);
}
.tech-marquee {
  display: flex;
  gap: 40px;
  animation: marqueeScroll 20s linear infinite;
  width: max-content;
}
.tech-marquee span {
  font: 500 13px/1.6 "Microsoft YaHei","微软雅黑",sans-serif;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero { min-height: 520px; }
  .fade-in, .scale-in, .stagger-children > * { opacity: 1; transform: none; }
}