/* ==========================================================================
   天羽华夏 · 水墨武侠 · 怀旧游戏官网（真实水墨画版本）
   主视觉：AI 生成传统水墨画（山水·武侠人物）
   主色：浓墨 #0e0c08 │ 淡墨 #2a251c │ 墨灰 #4a443a │ 留白 #e8e2d5 │ 宣纸灰 #b8b0a0
   点缀：朱红 #b23a2e │ 暗金 #b08d57
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700;900&family=Ma+Shan+Zheng&family=Long+Cang&display=swap');

:root {
  /* 墨色阶 */
  --ink-dark:  #0e0c08;   /* 浓墨（主背景） */
  --ink-mid:   #2a251c;   /* 淡墨 */
  --ink-light: #4a443a;   /* 墨灰 */
  --ink-pale:  #6e665a;   /* 淡墨灰 */

  /* 纸色（文字）—— 高强度提亮，暗角下清晰可读 */
  --paper:      #ffffff;   /* 留白 / 宣纸（主文字，纯白） */
  --paper-dim:  #f0e8d8;   /* 灰宣纸（次要文字） */
  --paper-mute: #d6ccb8;   /* 暗宣纸（辅助文字） */

  /* 传统点缀色 */
  --vermilion:      #b23a2e;   /* 朱红（印章/主按钮/点缀） */
  --vermilion-bright:#bd4a39;   /* 主色调略收，降低刺眼 */
  --gold:           #b08d57;   /* 暗金（细线/边框） */
  --gold-soft:      rgba(176,141,87,0.35);

  --border:   rgba(184,176,160,0.16);
  --border-bright: rgba(184,176,160,0.34);
  --shadow-ink: 0 0 30px rgba(0,0,0,0.45);
  --shadow-deep: 0 12px 45px rgba(0,0,0,0.6);

  --gradient-ink: linear-gradient(135deg, #6e665a 0%, #4a443a 45%, #2a251c 100%);
  --gradient-seal: linear-gradient(150deg, #c8503c 0%, #b23a2e 60%, #8e2a20 100%);

  font-family: 'Noto Serif SC', 'STKaiti', 'KaiTi', '楷体', serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--ink-dark);   /* 背景图交由 body::before 承载，便于统一调暗/降饱和 */
  color: var(--paper);
  overflow-x:hidden;
  min-height:100vh;
  line-height:1.85;
  font-family: 'Noto Serif SC','STKaiti','楷体',serif;
  letter-spacing:0.02em;
  position:relative;
  -webkit-font-smoothing: antialiased;
}

/* 背景图层：承载全站统一的水墨背景图，统一降低亮度/饱和度，柔和舒适 */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-5; pointer-events:none;
  background: url("../assets/hero.png") center top / cover no-repeat;
  filter: brightness(0.78) saturate(0.80) contrast(1.03);
}

/* 全局暗调蒙版：置于背景图之上、所有内容之下（z-index:-4）——
   因此只压背景、不压文字，文字保持纯白高对比。
   全屏均匀纯色暗调（非径向），亮度整体一致、无中心亮斑；
   固定视口、不拦截点击；覆盖全站所有区域（含导航/页脚），切换页面不变。 */
body::after {
  content:'';
  position:fixed; inset:0; z-index:-4; pointer-events:none;
  background: rgba(0,0,0,0.50);
}

a { color:inherit; text-decoration:none; }
ul { list-style:none; }
.container { max-width:1200px; margin:0 auto; padding:0 2rem; }

/* ======================================================================
   一、导航栏（朱红印章 Logo + 水墨卷轴感）
   ====================================================================== */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(14,12,8,0);
  background-color: transparent;
  border-bottom:none;
  box-shadow:none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 导航栏不再显示任何边框/阴影，与页面背景完全融为一体 */
.nav-container {
  max-width:1400px; margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between; height:72px;
}
.logo { display:flex; align-items:center; gap:0.8rem; user-select:none; }
/* 朱红印章（更立体） */
.logo-seal {
  width:40px; height:40px; flex:none;
  background: var(--gradient-seal);
  color:#f3ede0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Ma Shan Zheng','Noto Serif SC',serif; font-size:1.4rem;
  border-radius:5px;
  box-shadow:0 0 16px rgba(178,58,46,0.5), inset 0 0 0 1.5px rgba(255,255,255,0.22), inset 0 0 14px rgba(0,0,0,0.32);
  letter-spacing:0;
  transition: transform 0.35s, box-shadow 0.35s;
}
.logo:hover .logo-seal { transform:rotate(-4deg) scale(1.05); box-shadow:0 0 22px rgba(178,58,46,0.62), inset 0 0 0 1.5px rgba(255,255,255,0.28); }
.logo-text {
  font-family:'Ma Shan Zheng','Noto Serif SC',serif;
  font-size:1.9rem; color: var(--paper);
  letter-spacing:0.16em; filter: drop-shadow(0 0 10px rgba(0,0,0,0.55));
}
.nav-menu { display:flex; gap:2.3rem; align-items:center; }
.nav-menu li a {
  position:relative; padding:0.55rem 0.1rem;
  color: var(--paper-dim); font-weight:500; font-size:0.96rem;
  transition: color 0.3s; letter-spacing:0.14em;
}
.nav-menu li a::after {
  content:''; position:absolute; bottom:-1px; left:50%; width:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--vermilion-bright), transparent);
  transform:translateX(-50%); transition: width 0.3s; border-radius:2px;
}
.nav-menu li a:hover, .nav-menu li a.active { color: var(--paper); }
.nav-menu li a.active { color: var(--vermilion-bright); }
.nav-menu li a:hover::after, .nav-menu li a.active::after { width:100%; }

/* ======================================================================
   二、Hero 主视觉（真实水墨画 hero.png 全屏）
   ====================================================================== */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:7rem 2rem 4rem; overflow:hidden;
  background: transparent;
}
/* 仅保留极淡暗角，避免压暗与下方不统一 */
.hero::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,12,8,0.08) 0%, transparent 30%, transparent 60%, rgba(14,12,8,0.15) 100%),
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(14,12,8,0.06) 0%, transparent 55%, transparent 100%);
}
/* 浮动墨雾：与 body 背景自然过渡 */
.hero-fog {
  position:absolute; left:0; right:0; bottom:0; height:35%; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(14,12,8,0.12) 70%, rgba(14,12,8,0.22) 100%);
}
.hero-content { text-align:center; max-width:940px; z-index:3; position:relative; }

.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.4rem 1.5rem;
  background: rgba(14,12,8,0.45);
  border:1px solid var(--border); border-radius:2px;
  font-size:0.85rem; color: var(--paper-dim);
  backdrop-filter:blur(6px);
  margin-bottom:2rem; letter-spacing:0.18em;
  animation: gentle-float 3s ease-in-out infinite;
}
@keyframes gentle-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
.badge-dot {
  width:6px; height:6px; background:var(--vermilion); border-radius:50%;
  box-shadow:0 0 8px var(--vermilion-bright); animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.hero-title { margin-bottom:1.2rem; }
.title-line {
  display:block;
  font-family:'ZCOOL QingKe HuangYou','Noto Serif SC',serif; font-weight:400;
  font-size: clamp(3.2rem, 12vw, 6.4rem);
  color: var(--paper);
  letter-spacing:0.04em;
  filter: drop-shadow(0 2px 24px rgba(0,0,0,0.7));
  letter-spacing:0.22em; line-height:1.1;
  animation: ink-glow 6s ease-in-out infinite;
}
@keyframes ink-glow {
  0%,100% { filter:drop-shadow(0 2px 24px rgba(0,0,0,0.7)); }
  50%     { filter:drop-shadow(0 2px 38px rgba(176,141,87,0.25)); }
}
.title-sub {
  display:block;
  font-family:'Long Cang','Noto Serif SC',serif;
  font-size: clamp(1.2rem, 4.2vw, 2.3rem); font-weight:400;
  color: var(--paper-dim); letter-spacing:0.5em;
  margin-top:0.4rem; text-shadow:0 2px 10px rgba(0,0,0,0.7);
}
.hero-subtitle {
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  color: var(--paper-mute); margin-bottom:2.8rem; letter-spacing:0.28em;
  text-shadow:0 1px 8px rgba(0,0,0,0.7);
}

/* 按钮（朱红主 + 墨色辅） */
.hero-buttons { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin-bottom:4rem; }
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:0.9rem 2.3rem; font-size:1.05rem; font-weight:700;
  border-radius:3px; cursor:pointer; overflow:hidden;
  transition: all 0.35s; letter-spacing:0.18em;
  border:1px solid var(--border-bright);
  font-family:'Noto Serif SC','STKaiti',serif;
  background: rgba(14,12,8,0.50); color: var(--paper);
  backdrop-filter: blur(4px);
}
.btn::before {
  content:''; position:absolute; inset:0;
  background: var(--gradient-ink); opacity:0;
  transition: opacity 0.35s; z-index:-1;
}
.btn:hover::before { opacity:1; }
.btn:hover { transform:translateY(-3px); box-shadow: var(--shadow-ink); border-color: var(--paper-dim); }
.btn-primary {
  background: var(--gradient-seal); color:#fff;
  border-color: var(--vermilion); box-shadow:0 4px 24px rgba(178,58,46,0.35);
}
.btn-primary::before { display:none; }
.btn-primary:hover { box-shadow:0 6px 34px rgba(178,58,46,0.5); background:linear-gradient(150deg,#d35a44,#b23a2e); }

/* 数据面板 */
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; max-width:820px; margin:0 auto; }
.stat-item {
  position:relative; padding:1.2rem 1rem;
  background: rgba(14,12,8,0.50);
  border:1px solid var(--border); border-radius:3px;
  backdrop-filter:blur(6px); transition: all 0.35s;
}
.stat-item::before, .stat-item::after {
  content:''; position:absolute; width:12px; height:12px; border:2px solid var(--gold);
}
.stat-item::before { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.stat-item::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }
.stat-item:hover { border-color:var(--vermilion); transform:translateY(-3px); box-shadow:var(--shadow-ink); }
.stat-value {
  font-family:'Noto Serif SC','STKaiti',serif; font-size:1.8rem; font-weight:900;
  color: var(--paper); margin-bottom:0.2rem; letter-spacing:0.08em;
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
}
.stat-label { font-size:0.85rem; color:var(--paper-mute); letter-spacing:0.12em; }


/* ======================================================================
   三、山水长卷 · 全幅水墨横幅（landscape.png）
   ====================================================================== */
.scroll-band {
  position:relative; padding:7rem 2rem; overflow:hidden;
  background: transparent;
  border-top:none;
  border-bottom:none;
}
.scroll-band::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(14,12,8,0.12) 0%, rgba(14,12,8,0.04) 50%, rgba(14,12,8,0.12) 100%);
}
.band-inner { position:relative; z-index:2; text-align:center; max-width:900px; margin:0 auto; }
.band-poem {
  font-family:'Ma Shan Zheng','Noto Serif SC',serif;
  font-size: clamp(2rem, 6vw, 3.6rem); color: var(--paper);
  letter-spacing:0.3em; text-shadow:0 2px 20px rgba(0,0,0,0.7); line-height:1.5;
}
.band-poem .seal-dot { color:var(--vermilion-bright); }
.band-sub {
  margin-top:1.4rem; font-family:'Long Cang','Noto Serif SC',serif;
  font-size: clamp(1rem, 3vw, 1.5rem); color: var(--paper-dim);
  letter-spacing:0.35em; text-shadow:0 1px 10px rgba(0,0,0,0.7);
}

/* ======================================================================
   四、通用 section
   ====================================================================== */
section { padding:5.5rem 0; position:relative; z-index:1; }
.section-title { text-align:center; margin-bottom:3.5rem; }
.section-title h2 {
  font-family:'Ma Shan Zheng','Noto Serif SC',serif;
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight:400;
  color: var(--paper); letter-spacing:0.32em;
  display:inline-block; position:relative; padding:0 1rem;
}
.section-title h2::before, .section-title h2::after {
  content:''; position:absolute; top:50%; width:46px; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.section-title h2::before { left:-56px; transform:scaleX(-1); }
.section-title h2::after  { right:-56px; }
.section-sub {
  text-align:center; color:var(--paper-dim);
  font-size:0.92rem; letter-spacing:0.18em; margin-top:-2.2rem; margin-bottom:3rem;
  text-shadow:0 1px 8px rgba(0,0,0,0.55);
}

/* ======================================================================
   五、游戏特色
   ====================================================================== */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
.feature-card {
  position:relative; padding:2.6rem 2rem;
  background: rgba(14,12,8,0.55);
  border:1px solid var(--border); border-radius:4px;
  text-align:center; backdrop-filter:blur(8px);
  transition: all 0.4s; overflow:hidden;
}
.feature-card::before, .feature-card::after {
  content:''; position:absolute; width:16px; height:16px; border:1px solid var(--gold); transition: all 0.4s;
}
.feature-card::before { top:8px; left:8px; border-right:0; border-bottom:0; }
.feature-card::after { bottom:8px; right:8px; border-left:0; border-top:0; }
.feature-card:hover { transform:translateY(-6px); border-color:var(--vermilion); box-shadow:var(--shadow-ink); }
.feature-card:hover::before, .feature-card:hover::after { width:26px; height:26px; border-color:var(--vermilion); }
.feature-icon {
  font-size:2.8rem; margin-bottom:1.2rem;
  filter: grayscale(0.2) drop-shadow(0 0 8px rgba(0,0,0,0.4));
}
.feature-card h3 { font-size:1.3rem; font-weight:700; margin-bottom:0.6rem; color:var(--paper); letter-spacing:0.12em; }
.feature-card p { color:var(--paper-dim); line-height:1.75; font-size:0.95rem; text-shadow:0 1px 6px rgba(0,0,0,0.55); }

/* ======================================================================
   六、职业展示（真实水墨人物肖像 swordsman/archer/sorcerer）
   ====================================================================== */
.classes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.class-card {
  position:relative; padding:0; overflow:hidden;
  background: rgba(14,12,8,0.55); border:1px solid var(--border); border-radius:4px;
  text-align:center; backdrop-filter:blur(6px); transition: all 0.45s;
}
.class-card:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:var(--shadow-deep); }
/* 肖像框 */
.class-portrait {
  position:relative; width:100%; height:340px; overflow:hidden;
  border-bottom:1px solid var(--border);
  background: var(--ink-mid);
}
.class-portrait img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter: grayscale(0.12) contrast(1.02);
  transition: transform 0.6s ease, filter 0.6s ease;
}
.class-card:hover .class-portrait img { transform:scale(1.06); filter:grayscale(0) contrast(1.05); }
/* 肖像底部墨晕渐隐，与文字自然衔接 */
.class-portrait::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:55%;
  background: linear-gradient(180deg, transparent, rgba(14,12,8,0.85) 90%, var(--ink-dark));
  pointer-events:none;
}
.class-body { padding:1.6rem 1.8rem 2rem; position:relative; }
/* 角标印章 */
.class-seal {
  position:absolute; top:-26px; right:18px; z-index:2;
  width:50px; height:50px; border-radius:4px;
  background:var(--gradient-seal); color:#f3ede0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Ma Shan Zheng','Noto Serif SC',serif; font-size:1.6rem;
  box-shadow:0 0 16px rgba(178,58,46,0.45), inset 0 0 0 1px rgba(255,255,255,0.18);
  transition: transform 0.45s;
}
.class-card:hover .class-seal { transform:rotate(-6deg) scale(1.05); }
.class-card h3 {
  font-family:'Ma Shan Zheng','Noto Serif SC',serif; font-size:1.7rem; font-weight:400;
  color: var(--paper); letter-spacing:0.18em; margin-bottom:0.4rem;
}
.class-sub { font-size:0.85rem; color:var(--vermilion-bright); letter-spacing:0.12em; margin-bottom:1rem; }
.class-desc { color:var(--paper-dim); line-height:1.75; font-size:0.9rem; text-shadow:0 1px 6px rgba(0,0,0,0.55); }

/* ======================================================================
   七、新闻公告（水墨时间线）
   ====================================================================== */
.news-timeline { position:relative; max-width:720px; margin:1.5rem auto 0; padding-left:0; transform:translateX(150px); }
@media (max-width:768px) { .news-timeline { transform:translateX(0); } }
/* 竖向连线：贯穿所有红点的时间线（暗金渐隐，贴合水墨风） */
.news-timeline::before {
  content:'';
  position:absolute; left:5px; top:10px; bottom:10px; width:2px;
  background: linear-gradient(180deg, rgba(176,141,87,0) 0%, rgba(176,141,87,0.55) 12%, rgba(176,141,87,0.55) 88%, rgba(176,141,87,0) 100%);
  border-radius:2px;
}
/* 左对齐时间线：红点贴线，文字居左 */
.news-item { display:flex; align-items:flex-start; justify-content:flex-start; gap:1rem; padding:0 0 1.4rem; transition: all 0.3s; }
.news-item:last-child { padding-bottom:0; }
.news-dot {
  position:relative; z-index:1;
  flex:0 0 auto; margin-top:0.55rem; width:11px; height:11px; border-radius:50%;
  background: var(--vermilion); border:2px solid var(--ink-dark);
  box-shadow: 0 0 12px rgba(178,58,46,0.5); transition: all 0.3s;
}
.news-item:hover .news-dot { box-shadow:0 0 20px rgba(200,80,60,0.7); transform:scale(1.25); }
.news-date { font-size:0.85rem; color:var(--paper-mute); letter-spacing:0.12em; margin-bottom:0.25rem; }
.news-title {
  font-family:'Noto Serif SC',serif; font-weight:700; color:#ffffff; letter-spacing:0.04em;
  font-size:1.7rem; text-align:left; margin-bottom:1.1rem; line-height:1.4;
  text-shadow:0 2px 12px rgba(0,0,0,0.6);
}
.news-title:hover { color:var(--vermilion-bright); }
.news-summary {
  font-family:'Noto Serif SC',serif; font-size:1.2rem; color:var(--paper);
  line-height:1.7; text-align:left;
  text-shadow:0 1px 6px rgba(0,0,0,0.55);
}

/* ======================================================================
   八、联系方式
   ====================================================================== */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
.contact-card {
  position:relative; padding:1.8rem 1.5rem;
  background: rgba(14,12,8,0.55); border:1px solid var(--border); border-radius:4px;
  text-align:center; backdrop-filter:blur(6px); transition: all 0.35s;
  color:inherit; text-decoration:none; cursor:pointer;
}
.contact-card::before, .contact-card::after {
  content:''; position:absolute; width:12px; height:12px; border:1px solid var(--gold);
}
.contact-card::before { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.contact-card::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }
.contact-card:hover { transform:translateY(-4px); border-color:var(--vermilion); box-shadow:var(--shadow-ink); }
.contact-icon { font-size:2.2rem; margin-bottom:0.8rem; filter:grayscale(0.2); }
.contact-card h3 { font-size:1rem; color:var(--paper); letter-spacing:0.12em; margin-bottom:0.5rem; }
.contact-value { color:var(--paper-dim); font-size:1.1rem; margin-bottom:0.5rem; }
.contact-tag {
  display:inline-block; padding:0.2rem 1rem;
  background: rgba(178,58,46,0.08); color:var(--vermilion-bright);
  border:1px solid rgba(178,58,46,0.3); font-size:0.75rem; letter-spacing:0.1em; border-radius:2px;
}

/* ---------- QQ 跳转按钮（可点击的联系卡片） ---------- */
.contact-card[data-qq-action]{ cursor:pointer; }
.contact-card[data-qq-action]:focus{ outline:1px dashed var(--gold); outline-offset:3px; }
.contact-card[data-qq-action]:hover .contact-tag{
  background:rgba(178,58,46,0.18); color:var(--vermilion-bright); border-color:var(--vermilion);
}
.contact-card .contact-cta{
  display:block; margin-top:.7rem; font-size:.72rem; letter-spacing:.18em;
  color:var(--gold); opacity:0; transform:translateY(4px); transition:all .3s;
}
.contact-card:hover .contact-cta,
.contact-card:focus .contact-cta{ opacity:1; transform:translateY(0); }

/* ---------- QQ 降级提示 Toast ---------- */
.qq-toast-mask{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px); padding:1.2rem;
}
.qq-toast-box{
  max-width:340px; width:100%; padding:1.6rem 1.4rem; text-align:center; border-radius:6px;
  background:linear-gradient(180deg,#1b1710,#100d08);
  border:1px solid var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.6);
  font-family:inherit;
}
.qq-toast-title{ color:var(--paper); font-size:1.05rem; letter-spacing:.1em; margin-bottom:.6rem; }
.qq-toast-desc{ color:var(--paper-dim); font-size:.9rem; line-height:1.6; margin-bottom:1.1rem; }
.qq-toast-desc b{ color:var(--gold); font-size:1.05rem; letter-spacing:.05em; }
.qq-toast-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.qq-toast-actions button, .qq-toast-actions a{
  cursor:pointer; padding:.5rem 1rem; font-size:.85rem; border-radius:3px; text-decoration:none;
  border:1px solid var(--vermilion); background:rgba(178,58,46,.12); color:var(--vermilion-bright);
  transition:all .25s;
}
.qq-toast-actions button:hover, .qq-toast-actions a:hover{ background:var(--gradient-seal); color:#fff; }
.qq-toast-close{ border-color:var(--border)!important; background:transparent!important; color:var(--paper-mute)!important; }

/* ======================================================================
   九、底部
   ====================================================================== */
/* 页脚：内容保持现状，不再额外叠加暗角——直接复用全站统一的 0.50 全局蒙版，
   与首页/下载页/新手指南页亮度一致，消除「页脚过暗」问题 */
.footer {
  padding:4rem 0 2rem;
  position:relative;
  background:transparent;
  border-top:none;
  margin-top:0;
  overflow:visible;
}

.footer::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: rgba(0,0,0,0.24);
}

.footer-grid,
.footer-bottom {
  position:relative;
  z-index:1;
}

.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-bottom:2.5rem; }
.footer-col h4 {
  font-size:1rem; color:#ffffff; letter-spacing:0.15em;
  border-bottom:none; padding-bottom:0.5rem; margin-bottom:0.8rem;
  text-shadow:0 2px 10px rgba(0,0,0,0.85);
}
.footer-col a, .footer-col p {
  display:block; color:#f7f1e6; margin-bottom:0.4rem; transition: color 0.3s; font-size:0.9rem;
  text-shadow:0 2px 8px rgba(0,0,0,0.75);
}
.footer-col a:hover { color:#f0b0a2; }
.footer-bottom {
  padding-top:1.5rem; border-top:none;
  text-align:center; color:#f7f1e6; font-size:0.85rem; letter-spacing:0.08em;
  text-shadow:0 2px 8px rgba(0,0,0,0.75);
}
.footer-bottom p { margin-bottom:0.3rem; }

/* ======================================================================
   十、响应式
   ====================================================================== */
@media (max-width:968px) {
  .nav-menu { display:none; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .classes-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  body, .navbar, .hero, .scroll-band { background-attachment:scroll !important; }
}
@media (max-width:568px) {
  .hero { padding:6rem 1.2rem 3rem; }
  .hero-buttons { flex-direction:column; width:100%; }
  .btn { width:100%; }
  .features-grid, .classes-grid, .contact-grid { grid-template-columns:1fr; }
  .classes-grid .class-card:last-child { grid-column:auto; }
  .hero-stats { grid-template-columns:repeat(2,1fr); gap:0.8rem; }
  .stat-item { padding:0.8rem; }
  .stat-value { font-size:1.4rem; }
  .footer-grid { grid-template-columns:1fr; }
  .news-item { padding-left:0; }
  .section-title h2::before, .section-title h2::after { width:24px; }
  .section-title h2::before { left:-30px; }
  .section-title h2::after  { right:-30px; }
  .class-portrait { height:300px; }
}

/* ======================================================================
   十一、滚动条 & 选中
   ====================================================================== */
::-webkit-scrollbar { width:7px; }
::-webkit-scrollbar-track { background:var(--ink-dark); }
::-webkit-scrollbar-thumb { background:var(--gradient-ink); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--ink-light); }
::selection { background:var(--vermilion); color:#fff; }

/* ======================================================================
   十二、全局模块背景统一（所有版块共用 body 的固定背景图，消除割裂感）
   说明：body 已铺设 hero.png 并加全局暗角蒙版；下方各版块仅保留
   通透的半透明底色，确保背景图连贯、文字可读。
   移动端关闭 fixed 视差见响应式。
   ====================================================================== */
.news, .features, .classes, .contact {
  background: rgba(14,12,8,0.28);
}
.scroll-band {
  background: transparent;
  border-top:1px solid rgba(176,141,87,0.08);
  border-bottom:1px solid rgba(176,141,87,0.08);
}
.scroll-band::before {
  background: transparent;
}

/* 文字阴影——确保在统一的背景图上仍可清晰阅读 */
.hero-content, .section-title, .section-sub, .feature-card, .class-card, .contact-card, .news-title, .news-summary,
.band-poem, .band-sub {
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}