:root{
  --ink:#171a1f;
  --text:#3c424b;
  --dim:#7a828d;
  --line:#e8eaee;
  --line-2:#f1f3f6;
  --gold:#b8862f;
  --gold-deep:#8f6520;
  --gold-soft:#fdf7e9;
  --red:#c0392b;
  --shadow:0 4px 18px rgba(23,26,31,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.75;
  color:var(--text);
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
ul{list-style:none}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}

/* ================= HERO：logo.png 作为整个区域背景 ================= */
.hero{
  position:relative;
  overflow:hidden;
  min-height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url("../images/bg.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
}
/* 顶部金色装饰线 */
.hero::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,#d8b45c,#b8862f,#d8b45c,transparent);
  z-index:3;
}
/* 白色渐变遮罩：上方轻、下方重，保证文字与按钮可读 */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.06) 38%,
    rgba(255,255,255,.55) 72%,
    rgba(255,255,255,.90) 100%
  );
  pointer-events:none;
  z-index:1;
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:840px;
  margin:0 auto;
  padding:64px 16px 48px;
  text-align:center;
}
.hero-tag{
  display:inline-block;
  padding:5px 15px;
  font-size:12.5px;
  line-height:1.6;
  letter-spacing:2px;
  color:var(--gold-deep);
  background:rgba(255,255,255,.92);
  border:1px solid #ecd9ab;
  border-radius:999px;
  box-shadow:0 2px 10px rgba(184,134,47,.14);
}
.hero-title{
  margin-top:18px;
  font-size:clamp(22px,5.2vw,40px);
  font-weight:900;
  line-height:1.42;
  letter-spacing:.5px;
  color:var(--ink);
  text-wrap:balance;
  text-shadow:0 2px 10px rgba(255,255,255,.85);
}
.hero-sub{
  margin-top:10px;
  font-size:clamp(14px,3.4vw,17px);
  color:#4a5058;
  letter-spacing:.5px;
  text-shadow:0 1px 8px rgba(255,255,255,.9);
}
.hero-url{
  margin-top:26px;
  font-size:clamp(24px,6.6vw,42px);
  font-weight:900;
  line-height:1.25;
  letter-spacing:2px;
  color:var(--gold-deep);
  word-break:break-all;
  text-shadow:0 2px 0 rgba(255,255,255,.95), 0 12px 26px rgba(184,134,47,.25);
}
.hero-note{
  margin-top:8px;
  font-size:clamp(12px,3vw,14px);
  color:#5b6069;
  letter-spacing:.8px;
  text-shadow:0 1px 6px rgba(255,255,255,.9);
}
.hero-btns{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:30px;
}
.hero-btns .btn{
  min-width:168px;
  margin:0;
}

/* ================= 按钮 ================= */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 20px;
  font-size:14.5px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.5px;
  text-align:center;
  border-radius:10px;
  border:1px solid #e6dcc2;
  background:var(--gold-soft);
  color:var(--gold-deep);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-primary{
  border-color:transparent;
  background:linear-gradient(135deg,#e6c67a,#c99a3c 55%,#a97c26);
  color:#241a08;
  box-shadow:0 6px 16px rgba(184,134,47,.32);
}
.btn-red{
  border-color:#f0cfc9;
  background:#fdf3f1;
  color:var(--red);
}
.btn:active{transform:scale(.97)}

@media (hover:hover){
  .btn:hover{border-color:#d8c294;background:#fbf3e2}
  .btn-primary:hover{background:linear-gradient(135deg,#f0d590,#d4a94a 55%,#b88a2c);box-shadow:0 8px 20px rgba(184,134,47,.38)}
  .btn-red:hover{border-color:#e6b3aa;background:#fbeae7}
}

/* ================= 主体布局 ================= */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;
  align-items:start;
  padding:28px 0 10px;
}

/* ================= 卡片（强制左对齐） ================= */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 20px 10px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  text-align:left !important;
}
.card > h2{
  display:flex;
  align-items:center;
  justify-content:flex-start !important;
  gap:9px;
  padding-bottom:11px;
  margin-bottom:6px;
  font-size:16.5px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:.5px;
  color:var(--ink);
  text-align:left !important;
  border-bottom:1px solid var(--line-2);
}
.card > h2::before{
  content:"";
  flex:0 0 auto;
  width:4px;height:15px;
  border-radius:2px;
  background:linear-gradient(180deg,#d8b45c,#b8862f);
}

/* 卡片内正文全部左对齐 */
.card p,
.card li,
.card span,
.card div,
.card strong,
.card em,
.feat-list,
.feat-list li,
.feat-list .k{
  text-align:left !important;
}

/* ================= 条目列表 ================= */
.feat-list li{
  position:relative;
  padding:9px 0 9px 18px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--text);
  border-bottom:1px dashed var(--line-2);
}
.feat-list li:last-child{border-bottom:0}
.feat-list li::before{
  content:"";
  position:absolute;
  left:2px;top:17px;
  width:5px;height:5px;
  border-radius:50%;
  background:#d8b45c;
}
.feat-list .k{
  display:inline-block;
  margin-right:8px;
  padding:0 7px;
  font-size:12px;
  line-height:19px;
  color:var(--gold-deep);
  background:var(--gold-soft);
  border:1px solid #efe0bd;
  border-radius:4px;
  white-space:nowrap;
  vertical-align:1px;
}
.feat-list li em{
  font-style:normal;
  font-weight:700;
  color:var(--red);
}

/* ================= 侧栏 ================= */
.side{position:sticky;top:16px}
.side-card{padding:18px}
.side-card > h2{margin-bottom:14px}
.side-card .btn + .btn{margin-top:11px}

/* ================= 三职业展示（保持居中） ================= */
.class-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding-bottom:14px;
}
.class-grid figure{
  text-align:center !important;
  padding:10px 6px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,#fdfbf5,#ffffff);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.class-grid img{width:100%;height:auto;margin:0 auto}
.class-grid figcaption{
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  color:var(--gold-deep);
  text-align:center !important;
}
@media (hover:hover){
  .class-grid figure:hover{
    border-color:#e2cfa4;
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(184,134,47,.14);
  }
}

/* ================= 页脚 ================= */
.site-footer{
  margin-top:30px;
  padding:26px 16px 34px;
  text-align:center;
  font-size:12.5px;
  line-height:2;
  color:#8b9099;
  background:#fafbfc;
  border-top:1px solid var(--line);
}
.site-footer .copyright{color:#6f7680;letter-spacing:1px}

/* ================= 移动端 ================= */
@media (max-width:860px){
  .layout{grid-template-columns:1fr;gap:0}
  .side{position:static;order:-1}
  .side-card{margin-bottom:18px}
  .hero{min-height:380px}
  .hero-inner{padding:48px 16px 36px}
}
@media (max-width:600px){
  body{font-size:14px}
  .wrap{padding:0 12px}
  .hero{min-height:320px}
  .hero-inner{padding:38px 14px 30px}
  .hero-btns{margin-top:22px}
  .card{padding:16px 15px 6px;border-radius:12px;margin-bottom:14px}
  .card > h2{font-size:15.5px}
  .feat-list li{font-size:14px;padding:8px 0 8px 17px}
  .feat-list li::before{top:16px;width:4px;height:4px}
  .feat-list .k{margin-right:6px;padding:0 5px;font-size:11px}
  .class-grid{gap:8px}
  .class-grid figure{padding:6px 3px 8px;border-radius:10px}
  .class-grid figcaption{font-size:11.5px;letter-spacing:2px}
  .side-card{padding:16px 15px}
  .btn{min-height:48px}
}
@media (max-width:520px){
  .hero-btns{flex-direction:column;gap:10px}
  .hero-btns .btn{width:100%;min-width:0}
}
@media (max-width:360px){
  .hero-url{letter-spacing:0}
}