:root{
  --bg:#05060a;
  --ink:#e9f0ff;
  --muted:#8fa1c4;
  --line:rgba(140,170,220,.14);
  --sky:#7dd3fc;
  --indigo:#a5b4fc;
  --glow:rgba(125,211,252,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,transparent 42%,rgba(5,6,10,.85) 100%);}
.page{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column}
.wrap{width:min(1080px,92vw);margin:0 auto}

/* nav */
.nav{padding:22px 0;flex:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{font-weight:800;letter-spacing:.24em;font-size:14px;
  background:linear-gradient(135deg,#fff,#8fd3ff 60%,#a5b4fc);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.links{display:flex;gap:22px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.links a{transition:.22s}
.links a:hover,.links a[aria-current]{color:#fff}
.links a[aria-current]{box-shadow:0 1px 0 var(--sky)}

/* footer */
.foot{padding:20px 0 26px;flex:none;color:#5d6c8a;font-size:12.5px}
.foot .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.foot a{color:#8fa1c4;transition:.2s}
.foot a:hover{color:var(--sky)}

/* content pages */
.content{flex:1;padding:26px 0 84px}
.kicker{font-size:11.5px;letter-spacing:.34em;color:var(--sky);text-transform:uppercase;margin:0 0 14px;opacity:.85}
h1.title{margin:0 0 20px;font-size:clamp(30px,5vw,46px);font-weight:750;letter-spacing:.03em;line-height:1.25}
h2{margin:38px 0 18px;font-size:clamp(21px,3vw,27px);font-weight:650;letter-spacing:.04em}
h2:first-of-type{margin-top:0}
p.body{color:var(--muted);font-size:15.5px;margin:0 0 14px;max-width:66ch;text-wrap:pretty}
p.body strong{color:#dbe8ff;font-weight:600}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:44px 0;border:0}
.back{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px;color:var(--muted);transition:.2s}
.back:hover{color:var(--sky)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:26px}
.card{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(140,170,220,.07),rgba(140,170,220,.02));transition:.3s}
.card::after{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg,rgba(125,211,252,.55),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -26px rgba(90,140,255,.5)}
.card:hover::after{opacity:1}
.card .dot{width:8px;height:8px;border-radius:50%;background:var(--sky);
  box-shadow:0 0 14px 3px var(--glow);margin-bottom:16px}
.card h3{margin:0 0 10px;font-size:17px;font-weight:650;letter-spacing:.03em}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
.card ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.9}
.card ul li::marker{color:var(--sky)}
.card .en{position:absolute;top:22px;right:24px;font-size:10.5px;letter-spacing:.22em;color:#4f5f80}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0 0}
.stat{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(140,170,220,.035)}
.stat .v{font-size:23px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,#fff,#9fd2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .k{font-size:11.5px;color:var(--muted);letter-spacing:.16em;margin-top:4px}
.constellation{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 0 18px rgba(125,211,252,.18));margin-top:30px}
.constellation .ln{stroke:rgba(140,180,255,.28);stroke-width:1}
.constellation .st{fill:#dbeaff}
.constellation .st.big{fill:#fff;filter:drop-shadow(0 0 8px rgba(160,215,255,.9))}
.constellation text{fill:#6d7d9e;font-size:9px;letter-spacing:.18em;font-family:inherit}

/* buttons */
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;
  border:1px solid var(--line);background:rgba(140,170,220,.06);color:#dbe8ff;font-size:14px;
  backdrop-filter:blur(6px);transition:.25s}
.btn:hover{border-color:rgba(125,211,252,.5);color:#fff;transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(125,211,252,.18),0 8px 34px -12px var(--glow)}
.btn.primary{background:linear-gradient(135deg,rgba(125,211,252,.16),rgba(165,180,252,.16));
  border-color:rgba(125,211,252,.4)}

/* cta box */
.cta-box{border:1px solid var(--line);border-radius:24px;padding:46px 32px;text-align:center;
  background:radial-gradient(90% 120% at 50% 0%,rgba(125,211,252,.1),transparent 65%);margin-top:8px}
.cta-box h2{margin:0 0 12px}
.cta-box p{color:var(--muted);margin:0 auto 26px;max-width:52ch;font-size:15px}
.cta-box .actions{justify-content:center}

/* reveal (只在 JS 生效时隐藏，保证无 JS 也能看到内容) */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.in{opacity:1;transform:none}

@media (max-width:640px){
  .nav .wrap{gap:12px}
  .links{gap:16px;font-size:13px}
  .content{padding:18px 0 64px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1;transform:none}
}