:root {
  --ink: #12141a;
  --muted: #5c6472;
  --line: #e6e8ee;
  --bg: #f5f6f8;
  --card: #fff;
  --brand: #6d4aff;
  --max: 720px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --radius-10: 10px;
  --radius-16: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; display: block; }

.top {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.top-inner, .hero, .panel, .foot-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}
.top-inner {
  display: flex;
  align-items: center;
  min-height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
}
.brand img { width: 36px; height: 36px; border-radius: 50%; }

.hero {
  padding: var(--space-32) 0 var(--space-24);
}
.kicker {
  margin: 0;
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
}
.hero h1 {
  margin: var(--space-8) 0;
  font-size: 40px;
  line-height: 1.15;
}
.lead {
  margin: 0 0 var(--space-24);
  color: var(--muted);
  font-size: 17px;
  max-width: 36em;
}
.cta-row { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-10);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.meta {
  margin: var(--space-12) 0 0;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  padding-bottom: var(--space-32);
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-16);
  padding: var(--space-24);
}
.card h2 {
  margin: 0 0 var(--space-8);
  font-size: 18px;
}
.sub {
  margin: 0 0 var(--space-16);
  color: var(--muted);
  font-size: 14px;
}
.qr {
  width: 168px;
  height: 168px;
  border-radius: var(--radius-10);
  background: #fff;
}
.url {
  margin: var(--space-12) 0 0;
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.foot {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: var(--space-24) 0;
  color: var(--muted);
  font-size: 13px;
}
.foot strong { color: var(--ink); }
.beian { margin: var(--space-8) 0 0; }
.beian a { color: var(--muted); }

@media (max-width: 640px) {
  .hero h1 { font-size: 32px; }
  .panel { grid-template-columns: 1fr; }
}