/* ============================================================
   xmj98.com 原创主题 —— 鸦青深底 · 玉青 · 铜金（沉着诚信风）
   单文件外部样式表；所有模块类全局定义，无 layout 作用域前缀。
   ============================================================ */
:root {
  --night: #141b21;        /* 鸦青深底 */
  --night-2: #1b242c;      /* 抬一档 */
  --slate: #24303a;        /* 面板 */
  --slate-2: #2d3b47;      /* 面板亮 */
  --line: #3a4a57;         /* 描边 */
  --jade: #79bda3;         /* 玉青 */
  --jade-deep: #3f7c68;    /* 玉青沉 */
  --jade-mist: #a9d6c4;    /* 玉青雾 */
  --copper: #c8874a;       /* 铜金 */
  --copper-lite: #e2a86b;  /* 铜金亮 */
  --copper-deep: #8f5a2a;  /* 铜金暗 */
  --paper: #e9efeb;        /* 主文字（冷白微青） */
  --muted: #9fb1ac;        /* 次文字 */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 40px rgba(5, 9, 12, 0.45);
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 85% -8%, rgba(63, 124, 104, 0.20), transparent 60%),
    radial-gradient(900px 460px at 8% 106%, rgba(200, 135, 74, 0.14), transparent 60%),
    var(--night);
  color: var(--paper);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  font-size: 16.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jade); text-decoration: none; }
a:hover { color: var(--jade-mist); }
p { margin: 0 0 14px; overflow-wrap: anywhere; }
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 12px; font-weight: 700; overflow-wrap: anywhere; }
h1 { font-size: clamp(28px, 4.4vw, 44px); letter-spacing: 1px; }
h2 { font-size: clamp(21px, 2.6vw, 28px); }
h3 { font-size: 18px; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: rgba(121, 189, 163, 0.35); color: #f2f7f4; }
:focus-visible { outline: 3px solid var(--copper-lite); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

/* ---------- 顶条与导航 ---------- */
.topline {
  background: linear-gradient(90deg, rgba(63, 124, 104, 0.35), rgba(143, 90, 42, 0.30));
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.topline .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding: 8px 0; }
.topline a { color: var(--copper-lite); font-weight: 600; white-space: nowrap; }
.topline a:hover { color: var(--copper); }

.site-head { position: sticky; top: 0; z-index: 50; background: rgba(20, 27, 33, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 14px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--paper); letter-spacing: 1px; }
.brand:hover { color: var(--paper); }
.brand .seal {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  background: linear-gradient(150deg, var(--jade-deep), #2c5a4b);
  border: 1.5px solid var(--copper); border-radius: 10px;
  color: var(--copper-lite); font-size: 13px; font-weight: 800; letter-spacing: 2px;
}
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.site-nav a {
  display: inline-block; padding: 7px 12px; border-radius: 9px;
  color: var(--muted); font-size: 14.5px; font-weight: 600;
}
.site-nav a:hover { color: var(--jade-mist); background: rgba(63, 124, 104, 0.18); }
.site-nav a.active, .site-nav a[aria-current="page"] { color: #10231c; background: linear-gradient(135deg, var(--jade), var(--jade-mist)); }

.crumbs { padding: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--jade); }
.crumbs .sep { margin: 0 8px; color: var(--line); }

/* ---------- 通用分区 ---------- */
.section { padding: 62px 0; border-bottom: 1px solid rgba(58, 74, 87, 0.5); }
.section.tint { background: linear-gradient(180deg, rgba(63, 124, 104, 0.10), rgba(63, 124, 104, 0.03)); }
.section.warm { background: linear-gradient(180deg, rgba(200, 135, 74, 0.10), rgba(200, 135, 74, 0.03)); }
.section.deep { background: linear-gradient(160deg, var(--night-2), #182028 60%, rgba(45, 59, 71, 0.6)); }
.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head h2 { color: var(--paper); }
.section-head p { color: var(--muted); margin: 0; }
.kicker {
  display: inline-block; margin-bottom: 10px; padding: 3px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 3px;
  color: var(--copper-lite); border: 1px solid rgba(200, 135, 74, 0.5);
  border-radius: 999px; background: rgba(143, 90, 42, 0.12);
}
.bar { width: 56px; height: 4px; border-radius: 4px; margin: 14px 0 18px;
  background: linear-gradient(90deg, var(--jade), var(--copper)); }

.panel {
  background: linear-gradient(165deg, rgba(45, 59, 71, 0.72), rgba(36, 48, 58, 0.9));
  border: 1px solid var(--line); border-left: 4px solid var(--jade-deep);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow);
}
.panel p { color: #cdd9d4; }
.panel h3 { color: var(--copper-lite); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block; margin-top: 10px; padding: 13px 30px;
  background: linear-gradient(135deg, var(--copper), var(--copper-lite));
  color: #23130a; font-size: 16px; font-weight: 800; letter-spacing: 1px;
  border: 1px solid rgba(226, 168, 107, 0.8); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(143, 90, 42, 0.35);
  -webkit-text-fill-color: currentColor;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn:hover { color: #1c0f06; filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(143, 90, 42, 0.45); }
.btn:active { transform: translateY(2px) scale(0.97); }
.btn-jade {
  background: linear-gradient(135deg, var(--jade-deep), var(--jade));
  border-color: rgba(121, 189, 163, 0.7); color: #0c1a15;
  box-shadow: 0 10px 24px rgba(63, 124, 104, 0.35);
}
.btn-jade:hover { color: #081310; }

/* ---------- Hero ---------- */
.hero { padding: 74px 0 66px; border-bottom: 1px solid var(--line);
  background: radial-gradient(820px 400px at 88% 10%, rgba(63, 124, 104, 0.22), transparent 62%),
              radial-gradient(700px 380px at 5% 95%, rgba(143, 90, 42, 0.16), transparent 60%); }
.hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 46px; align-items: center; }
.hero h1 { color: var(--paper); }
.hero .sub { color: #c3d1cc; font-size: 17px; max-width: 560px; }
.hero .hero-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); border-left: 3px solid var(--copper-deep); padding-left: 12px; }
.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: linear-gradient(150deg, var(--slate), var(--slate-2));
}
.corner-tag {
  position: absolute; right: 14px; bottom: 14px; padding: 6px 14px;
  background: rgba(20, 27, 33, 0.86); color: var(--copper-lite);
  border: 1px solid rgba(200, 135, 74, 0.55); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 2px;
}

/* ---------- 卡片 ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; background: linear-gradient(165deg, rgba(45, 59, 71, 0.72), rgba(30, 40, 48, 0.92));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px 22px; overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--jade-deep); box-shadow: var(--shadow); }
.card .icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  background: rgba(63, 124, 104, 0.18); border: 1px solid rgba(121, 189, 163, 0.45);
  border-radius: 12px; color: var(--jade-mist); font-size: 19px; font-weight: 800;
}
.card h3 { color: var(--paper); }
.card p { color: var(--muted); font-size: 14.5px; margin: 0; }
.card .tag {
  position: absolute; top: 18px; right: -34px; transform: rotate(38deg);
  background: linear-gradient(90deg, var(--copper-deep), var(--copper));
  color: #fdf3e7; font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  padding: 3px 38px;
}

/* ---------- 数字 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat {
  text-align: center; padding: 26px 12px;
  background: linear-gradient(165deg, rgba(63, 124, 104, 0.14), rgba(20, 27, 33, 0.4));
  border: 1px solid var(--line); border-top: 3px solid var(--copper);
  border-radius: var(--radius);
}
.stat b { display: block; font-size: 30px; letter-spacing: 1px; color: var(--copper-lite); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13.5px; color: var(--muted); }

/* ---------- 步骤 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: st; }
.step {
  position: relative; padding: 24px 20px 20px;
  background: rgba(36, 48, 58, 0.72); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step::before {
  counter-increment: st; content: counter(st, decimal-leading-zero);
  display: block; margin-bottom: 10px; font-size: 22px; font-weight: 800;
  color: var(--jade); font-variant-numeric: tabular-nums;
}
.step h3 { color: var(--paper); font-size: 16.5px; }
.step p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- 时间线 ---------- */
.timeline { position: relative; margin-left: 10px; padding-left: 30px; border-left: 2px solid rgba(121, 189, 163, 0.4); }
.tl-item { position: relative; padding: 0 0 26px 14px; }
.tl-item::before {
  content: ""; position: absolute; left: -41px; top: 6px; width: 14px; height: 14px;
  background: var(--night); border: 3px solid var(--copper); border-radius: 50%;
}
.tl-item h3 { color: var(--copper-lite); font-size: 17px; }
.tl-item p { color: #bdcac5; margin: 0; font-size: 15px; }

/* ---------- 双栏 ---------- */
.split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 28px; align-items: start; }
.check-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 10px;
  background: rgba(36, 48, 58, 0.6); border: 1px solid var(--line); border-radius: 10px;
  color: #cdd9d4; font-size: 15px;
}
.check-list .dot {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px;
  background: rgba(63, 124, 104, 0.25); border: 1px solid var(--jade-deep);
  border-radius: 50%; color: var(--jade-mist); font-size: 13px; font-weight: 800;
}

/* ---------- 表格 ---------- */
.table-card { background: rgba(36, 48, 58, 0.7); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
.table-card table { min-width: 560px; }
th, td { padding: 13px 16px; text-align: left; font-size: 14.5px; border-bottom: 1px solid rgba(58, 74, 87, 0.6); }
th { background: rgba(63, 124, 104, 0.22); color: var(--jade-mist); font-weight: 700; letter-spacing: 1px; }
tr:last-child td { border-bottom: 0; }
td { color: #cdd9d4; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(200, 135, 74, 0.08); }

/* ---------- FAQ ---------- */
.faq-item { background: rgba(36, 48, 58, 0.66); border: 1px solid var(--line); border-left: 4px solid var(--copper-deep); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; transition: border-color 0.2s ease; }
.faq-item:hover { border-left-color: var(--copper-lite); }
.faq-q { font-weight: 700; color: var(--paper); margin: 0 0 6px; font-size: 16px; }
.faq-a { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- 引语 ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.quote { background: linear-gradient(160deg, rgba(45, 59, 71, 0.8), rgba(28, 37, 45, 0.9)); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; position: relative; }
.quote::before { content: "”"; position: absolute; top: 2px; right: 16px; font-size: 54px; line-height: 1; color: rgba(121, 189, 163, 0.28); font-family: Georgia, serif; }
.quote p { color: #cdd9d4; font-size: 15px; margin: 0 0 10px; }
.quote .who { font-size: 13px; color: var(--copper); font-weight: 700; letter-spacing: 1px; }

/* ---------- 编号大列表 ---------- */
.big-list li { display: flex; gap: 18px; align-items: flex-start; padding: 18px 4px; border-bottom: 1px dashed rgba(58, 74, 87, 0.8); }
.big-list li:last-child { border-bottom: 0; }
.big-list .no { flex: none; width: 40px; height: 40px; display: inline-grid; place-items: center;
  background: rgba(200, 135, 74, 0.14); border: 1px solid rgba(200, 135, 74, 0.55); border-radius: 50%;
  color: var(--copper-lite); font-weight: 800; font-variant-numeric: tabular-nums; }
.big-list b { color: var(--jade-mist); font-size: 16.5px; }
.big-list p { color: var(--muted); margin: 4px 0 0; font-size: 15px; }

/* ---------- 联络入口卡 ---------- */
.entry-card { text-align: center; max-width: 720px; margin-inline: auto; padding: 40px 30px;
  background: linear-gradient(165deg, rgba(63, 124, 104, 0.16), rgba(143, 90, 42, 0.12));
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.entry-card h2 { color: var(--paper); }
.entry-card .contact-line { color: var(--copper-lite); font-weight: 700; letter-spacing: 1px; }
.entry-card p { color: #cdd9d4; }
.entry-card .hint { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* ---------- 通栏 ---------- */
.banner { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
  padding: 30px 34px; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(63, 124, 104, 0.28), rgba(20, 27, 33, 0.6) 55%, rgba(143, 90, 42, 0.28));
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.banner .btn { margin-top: 0; }
.banner h3 { font-size: clamp(19px, 2.4vw, 26px); color: var(--paper); margin-bottom: 8px; }
.banner p { color: #c3d1cc; margin: 0; max-width: 640px; }

/* ---------- 标签墙 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips a {
  display: inline-block; padding: 10px 20px; font-size: 14.5px; font-weight: 600;
  color: #bfe0d2; background: rgba(36, 48, 58, 0.8);
  border: 1px solid var(--line); border-radius: 999px;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.chips a:hover { transform: translateY(-2px); border-color: var(--jade); background: rgba(63, 124, 104, 0.25); color: var(--jade-mist); }
.chips a.hot { border-color: rgba(200, 135, 74, 0.75); color: var(--copper-lite); background: rgba(143, 90, 42, 0.16); }
.chips a.hot:hover { border-color: var(--copper-lite); background: rgba(143, 90, 42, 0.3); color: #f0d9bd; }

/* ---------- 页脚 ---------- */
.site-foot { padding: 56px 0 0; background: linear-gradient(180deg, #10161b, #0c1116); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; padding-bottom: 34px; }
.foot-brand { font-size: 18px; font-weight: 800; color: var(--copper-lite); letter-spacing: 1px; margin-bottom: 12px; }
.foot-grid h4 { color: var(--jade-mist); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.foot-grid p, .foot-grid li { color: #8ea39d; font-size: 14px; }
.foot-links li { margin-bottom: 9px; }
.foot-links a { color: #a9beb8; }
.foot-links a:hover { color: var(--copper-lite); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  border-top: 1px solid rgba(58, 74, 87, 0.7); padding: 18px 0 26px; font-size: 13px; color: #6f847e; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .section { padding: 46px 0; }
  .hero { padding: 50px 0 46px; }
  .card-grid, .card-grid.cols-2, .card-grid.cols-4, .quote-grid,
  .stat-grid, .steps, .foot-grid { grid-template-columns: 1fr; }
  .site-nav { margin-left: 0; width: 100%; overflow-x: auto; }
  .site-nav ul { flex-wrap: nowrap; }
  .banner { flex-direction: column; align-items: flex-start; }
  .corner-tag { right: 10px; bottom: 10px; }
  .topline .wrap { justify-content: center; text-align: center; }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* === 移动端汉堡下拉导航 (2026-09-15) === */
.nav-toggle{display:none;width:44px;height:44px;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;background:transparent;color:inherit;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.nav-toggle-bar{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .18s ease}
.nav-toggle:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  .site-head .wrap{position:relative}
  .site-head .wrap{flex-wrap:nowrap}
  .nav-toggle{display:flex}
  .site-nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;background:var(--slate);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.28);padding:6px 16px;max-height:72vh;overflow-y:auto;text-align:left}
  .site-nav.open{display:block}
  .site-nav ul,.site-nav .nav-list{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
  .site-nav li{width:100%}
  .site-nav a{display:block;padding:12px 2px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--paper);border-radius:0}
  .site-nav li:last-child a{border-bottom:0}
  .site-nav a.active,.site-nav a[aria-current="page"]{font-weight:700}
}

/* ---------- 页脚更新日期(新鲜度信号) ---------- */
.site-updated{font-size:13px;line-height:1.7;opacity:.72;margin-top:10px}

/* ---------- 语义主区 ---------- */
.site-main{display:block}

/* ---------- 正文配图 ---------- */
.fig{margin:22px 0;padding:0}
.fig img{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.fig figcaption{margin-top:8px;font-size:14.5px;line-height:1.7;opacity:.78;text-align:center}