* { box-sizing: border-box; }
body {
  margin: 0;
  background: #1c1917;
  color: #f4efe6;
  font-family: "DIN Alternate", "Microsoft YaHei", sans-serif;
  line-height: 1.7;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  border-bottom: 1px solid #3f3a34;
}

.head .brand { color: #fbbf24; text-decoration: none; font-size: 20px; font-weight: 700; }

.head nav a {
  color: #d6d3d1;
  text-decoration: none;
  margin-left: 20px;
  font-size: 14px;
}

.head nav a.current { color: #fbbf24; border-bottom: 2px solid #fbbf24; padding-bottom: 4px; }

.hero-dark {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px 36px;
  background: radial-gradient(circle at 20% 20%, #3f2e14 0%, #1c1917 55%);
}

.hero-dark h1 { font-size: 34px; max-width: 880px; margin: 0 0 16px; }
.hero-dark p { max-width: 760px; color: #d6d3d1; }

.btn {
  display: inline-block;
  margin: 16px 10px 0 0;
  padding: 11px 18px;
  background: #d97706;
  color: #1c1917;
  text-decoration: none;
  font-weight: 700;
}

.btn-ghost {
  background: transparent;
  color: #fbbf24;
  border: 1px solid #fbbf24;
}

.main { padding: 10px 40px 64px; }

.versus {
  margin: 28px 0;
  border: 1px solid #44403c;
}

.versus h2 {
  margin: 0;
  padding: 14px 18px;
  background: #292524;
  font-size: 20px;
  color: #fbbf24;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.split > div { padding: 16px 18px; border-top: 1px solid #44403c; }
.split > div + div { border-left: 1px solid #44403c; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { border: 1px solid #44403c; padding: 9px 10px; text-align: left; }
th { background: #292524; color: #fbbf24; }

.panel { margin: 28px 0; padding: 8px 0 0; }
.panel h2 { color: #fbbf24; font-size: 20px; }
.panel p { color: #e7e5e4; }

.faq dt { margin-top: 14px; color: #fde68a; }
.faq dd { margin: 6px 0 0; color: #d6d3d1; }

.foot {
  border-top: 1px solid #44403c;
  padding: 22px 40px 36px;
  color: #a8a29e;
  font-size: 13px;
}

.foot a { color: #fbbf24; }

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split > div + div { border-left: 0; }
  .head, .hero-dark, .main, .foot { padding-left: 18px; padding-right: 18px; }
}