:root {
  --lapis: #1B2A4A;
  --lapis-deep: #101827;
  --gold: #C9A961;
  --ink: #26251F;
  --muted: #7A786F;
  --paper: #FBFAF7;
  --line: #E6E3DA;
  --serif: "Songti SC", "SimSun", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 26px; }

header {
  background: var(--lapis);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 20;
}
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: auto; display: block; }
.brand .txt { color: #fff; font-size: 15px; letter-spacing: 3px; font-family: var(--serif); }
nav { display: flex; gap: 26px; font-size: 13px; letter-spacing: 1px; }
nav a { color: rgba(255,255,255,.7); padding-bottom: 3px; }
nav a:hover, nav a.on { color: var(--gold); border-bottom: 1px solid var(--gold); }

/* 全屏首图：艺术感的核心 */
.hero {
  background: var(--lapis-deep);
  color: #fff;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 0;
}
.hero h1 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 10px;
  margin: 0 0 26px;
  line-height: 1.5;
}
.hero p {
  margin: 0 auto;
  max-width: 480px;
  color: rgba(255,255,255,.66);
  font-size: 14px;
  letter-spacing: 1px;
}
.hero .gold { color: var(--gold); }
.hero .rule { width: 40px; height: 1px; background: var(--gold); margin: 30px auto 0; }

section { padding: 90px 0; }
h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 4px;
  margin: 0 0 10px;
  color: var(--lapis);
}
.sub { color: var(--muted); font-size: 13px; letter-spacing: 2px; margin: 0 0 40px; }
p { margin: 0 0 18px; }
.lead { font-size: 15px; color: #43423C; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.card { background: #fff; border: 1px solid var(--line); padding: 30px 26px; }
.card h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 2px;
  margin: 0 0 12px;
  color: var(--lapis);
}
.card p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.85; }

.steps { margin: 0; padding: 0; list-style: none; }
.steps li { border-left: 1px solid var(--gold); padding: 0 0 0 22px; margin: 0 0 30px; }
.steps b { display: block; font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: 2px; color: var(--lapis); margin-bottom: 6px; }
.steps span { font-size: 13.5px; color: var(--muted); }

.quote {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 2.1;
  color: var(--lapis);
  margin: 56px 0;
  padding-left: 24px;
  border-left: 1px solid var(--gold);
}

/* 图片位：上线前替换成她的实拍图 */
.figure {
  background: #EFEDE7;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A6A399;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-align: center;
  padding: 20px;
  margin: 0 0 14px;
}
.figure.tall { aspect-ratio: 3 / 4; }
.cap { font-size: 12px; color: #A6A399; text-align: center; margin: 0 0 46px; }

.note {
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px 24px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.9;
}

.btn {
  display: inline-block;
  border: 1px solid var(--lapis);
  color: var(--lapis);
  padding: 12px 34px;
  font-size: 13px;
  letter-spacing: 2px;
  margin-top: 14px;
}
.btn:hover { background: var(--lapis); color: #fff; }

footer {
  background: var(--lapis);
  color: rgba(255,255,255,.55);
  padding: 46px 0;
  font-size: 12.5px;
  text-align: center;
  letter-spacing: 1px;
}
footer b { font-family: var(--serif); color: var(--gold); font-weight: 400; letter-spacing: 3px; }

/* 滚动淡入 */
.fade { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s ease; }
.fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade { opacity: 1; transform: none; transition: none; } }

/* ===== 内页页头 ===== */
.pagehead {
  background: var(--lapis-deep);
  color: #fff;
  padding: 84px 0 64px;
  text-align: center;
}
.pagehead h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 8px;
  margin: 0 0 14px;
}
.pagehead p {
  margin: 0 auto;
  max-width: 460px;
  color: rgba(255,255,255,.6);
  font-size: 13.5px;
  letter-spacing: 1.5px;
}
.pagehead .rule { width: 40px; height: 1px; background: var(--gold); margin: 24px auto 0; }

/* ===== 首页模块卡 ===== */
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.module { display: block; background: #fff; border: 1px solid var(--line); transition: border-color .4s ease; }
.module:hover { border-color: var(--gold); }
.module .figure { margin: 0; border: 0; border-bottom: 1px solid var(--line); aspect-ratio: 4 / 3; }
.module .body { padding: 24px 24px 28px; }
.module h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 3px;
  margin: 0 0 8px;
  color: var(--lapis);
}
.module .en { font-size: 11px; letter-spacing: 2px; color: var(--gold); margin: 0 0 12px; }
.module p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.85; }

/* ===== 四骑士 ===== */
.knights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.knight { background: #fff; border: 1px solid var(--line); padding: 0; display: flex; flex-direction: column; }
.knight .figure { margin: 0; border: 0; border-bottom: 1px solid var(--line); aspect-ratio: 3 / 4; }
.knight .body { padding: 24px; flex: 1; }
.knight .pos { font-size: 11px; letter-spacing: 3px; color: var(--gold); margin: 0 0 10px; }
.knight h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: 4px; margin: 0 0 4px; color: var(--lapis); }
.knight .en { font-size: 11px; letter-spacing: 2px; color: #A6A399; margin: 0 0 16px; }
.knight p { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.85; }
.knight .tags { font-size: 12px; color: #A6A399; letter-spacing: 1px; }
.knight.pending { background: #F6F5F1; }
.knight.pending h3 { color: #A6A399; }
.knight.pending .pos { color: #B9B4A6; }
.knight.pending .figure { color: #BDB9AE; }
.badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2px;
  color: #A6A399;
  border: 1px solid var(--line);
  padding: 3px 12px;
  margin-top: 6px;
}

/* ===== 产品档位 ===== */
.tier { display: flex; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.tier:last-child { border-bottom: 0; }
.tier .nm { flex: 0 0 152px; }
.tier .nm h3 { font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: 2px; margin: 0 0 6px; color: var(--lapis); }
.tier .nm .pr { font-size: 13px; color: var(--gold); letter-spacing: 1px; }
.tier .dc { flex: 1; font-size: 13.5px; color: var(--muted); line-height: 1.9; }
.tier .dc b { font-weight: 400; color: var(--ink); }

/* ===== 动态入口 ===== */
.entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.entry { display: block; border: 1px solid var(--line); background: #fff; padding: 26px 24px; transition: border-color .4s ease; }
.entry:hover { border-color: var(--gold); }
.entry .pl { font-size: 11px; letter-spacing: 3px; color: var(--gold); margin: 0 0 10px; }
.entry h3 { font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: 2px; margin: 0 0 8px; color: var(--lapis); }
.entry p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.8; }

@media (max-width: 600px) {
  .hero { min-height: 68vh; padding: 70px 0; }
  .hero h1 { font-size: 26px; letter-spacing: 6px; }
  section { padding: 56px 0; }
  h2 { font-size: 22px; letter-spacing: 3px; }
  .quote { font-size: 17px; margin: 40px 0; }
  nav { gap: 16px; font-size: 12px; }
  .pagehead { padding: 60px 0 44px; }
  .pagehead h1 { font-size: 22px; letter-spacing: 5px; }
  .tier { flex-direction: column; gap: 10px; }
  .tier .nm { flex: none; }
}

/* ===== 首页：单屏封面（黑→红） ===== */
body.home { background: #08070A; }
header.plain { background: transparent; position: fixed; left: 0; right: 0; }
.screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 26px 96px;
  background: linear-gradient(155deg, #08070A 0%, #150A0C 42%, #3B0B0F 100%);
  color: #F2ECE6;
}
.screen .logo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 12vw, 108px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  line-height: 1.4;
  margin: 0;
  color: #F5EFE9;
}
.screen .cn {
  margin: 30px 0 0;
  font-size: 13px;
  letter-spacing: 0.85em;
  text-indent: 0.85em;
  color: rgba(245,239,233,.62);
}
.screen .rule { width: 44px; height: 1px; background: var(--gold); margin: 40px auto 0; }
.footline {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  color: rgba(245,239,233,.32);
}
.footline a { color: rgba(245,239,233,.5); }

@media (max-width: 600px) {
  header.plain { position: static; }
  .screen { padding: 80px 26px 80px; }
  .screen .cn { font-size: 11.5px; letter-spacing: 0.6em; text-indent: 0.6em; }
}

/* ===== 全站统一：暗调首屏 + 浅色底栏 ===== */
header.plain ~ .pagehead, .pagehead {
  background: linear-gradient(155deg, #08070A 0%, #150A0C 42%, #3B0B0F 100%);
  padding: 150px 0 74px;
}
footer { background: #0D0B0C; color: rgba(245,239,233,.4); }
.footbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #F5F3EF;
  border-top: 1px solid #E8E5DE;
  padding: 13px 26px;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-align: center;
  color: #A9A498;
}
.footbar a { color: #9A958A; }
.footbar a:hover { color: #6E6A60; }

/* 固定顶栏滚动时可读：暗色半透明+模糊 */
header.plain {
  background: rgba(10,8,10,.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ===== 内页首屏：黑红渐变 · 黄金分割高度（约2/3视口） ===== */
.pagehead {
  min-height: 66vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 70px;
}
.pagehead .wrap { width: 100%; }
@media (max-width: 600px) { .pagehead { min-height: 58vh; padding: 90px 0 50px; } }