:root {
  --black: #000000;
  --gray-light: #E0E0E0;
  --white: #FFFFFF;
  --ink: #000000;
  --muted: #999999;
  --page: #FFFFFF;
  --card-border: #EEEEEE;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }

/* 顶部导航 */
.nav { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 10; }
.nav-inner { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
.brand { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.brand span { color: var(--ink); font-weight: 400; font-size: 13px; letter-spacing: 1px; }
.nav nav a { margin-left: 24px; color: var(--muted); font-size: 14px; }
.nav nav a:hover { color: var(--ink); }

/* 主视觉（纯白） */
.hero { background: #FFFFFF; text-align: center; padding: 110px 20px 90px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: 50%; top: -140px; width: 560px; height: 560px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.04), transparent); pointer-events: none; }
.hero h1 { font-size: 42px; letter-spacing: 3px; margin-bottom: 18px; }
.hero p { font-size: 16px; color: var(--muted); max-width: 640px; margin: 0 auto 30px; line-height: 1.9; }
.platforms span { display: inline-block; border: 1px solid rgba(0,0,0,.25); color: var(--ink); border-radius: 20px; padding: 6px 16px; margin: 0 6px; font-size: 13px; background: #fff; }

.section { padding: 72px 20px; text-align: center; background: var(--page); }
.section h2 { font-size: 28px; letter-spacing: 2px; margin-bottom: 12px; }
.section.dark { background: #FFFFFF; }
.section.dark .sub { color: var(--muted); }
.sub { color: var(--muted); margin-bottom: 34px; }
.tip { color: #999999; font-size: 13px; margin-top: 20px; }

.cards { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.card { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; padding: 30px 22px; box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.card h3 { color: var(--ink); margin-bottom: 12px; letter-spacing: 1px; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.8; }

.rank-row { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.rank-item { background: #fff; border: 1px solid var(--card-border); border-radius: 12px; padding: 22px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
.rank-item b { display: block; font-size: 17px; margin-bottom: 6px; }
.rank-item span { font-size: 12px; color: var(--ink); }

.safety-list { max-width: 620px; margin: 0 auto; text-align: left; }
.safety-list p { padding: 9px 0; font-size: 15px; border-bottom: 1px dashed var(--card-border); }

.qr-placeholder { width: 140px; height: 140px; margin: 0 auto; border: 1.5px dashed var(--black); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: #fff; font-size: 28px; }

footer { background: #000000; color: #BBBBBB; text-align: center; padding: 30px 20px; font-size: 13px; }