:root {
  --bg: #eff8ff;
  --bg-card: #ffffff;
  --sky: #8ecbff;
  --sky-deep: #4aa8ff;
  --text: #17324d;
  --muted: #4a6a88;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top right, #d8eeff, var(--bg) 45%);
  line-height: 1.6;
}
.container { width: min(1040px, 92vw); margin: 0 auto; }
header {
  position: sticky; top:0; z-index:5;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg) 82%, white 18%);
  border-bottom: 1px solid #d4e9fa;
}
.nav { display:flex; justify-content:space-between; align-items:center; padding:.85rem 0; gap:1rem; }
.logo { font-size:1.2rem; font-weight:800; color:var(--text); text-decoration:none; }
.badge { margin-left:.5rem; font-size:.75rem; color:#fff; background:linear-gradient(135deg,var(--sky),var(--sky-deep)); border-radius:999px; padding:.1rem .55rem; }
nav { display:flex; flex-wrap:wrap; gap:.75rem; }
nav a { text-decoration:none; color:var(--muted); font-weight:600; }
nav a:hover, nav a.active { color:var(--sky-deep); }
main { padding: 3rem 0; }
.hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; align-items:center; }
h1 { font-size: clamp(2rem,3vw + 1rem,3rem); margin:0 0 .9rem; line-height:1.2; }
.subtitle,.muted { color:var(--muted); }
.actions { margin-top:1.1rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.btn { border:0; border-radius:12px; padding:.72rem 1rem; font-weight:700; text-decoration:none; }
.btn.primary { color:#fff; background:linear-gradient(135deg,var(--sky),var(--sky-deep)); box-shadow:0 8px 22px rgba(66,161,237,.35); }
.btn.ghost { color:var(--sky-deep); background:#dff0ff; }
.card { background:var(--bg-card); border:1px solid #d9edfc; border-radius:16px; padding:1rem; }
.cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
footer { border-top:1px solid #d5eafb; padding:1rem 0 2rem; color:var(--muted); font-size:.95rem; }
ul { padding-left:1.2rem; }

#lang-switch { border:1px solid #cde4f8; background:#fff; border-radius:8px; padding:.2rem .35rem; color:#2c4a66; }
