:root { --brand:#1a73e8; --ink:#111; --muted:#555; --bg:#fff; --card:#fff; --border:#e6e6e6; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--ink); font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
header { border-bottom:1px solid var(--border); background:#fff; position: sticky; top:0; z-index: 5; }
.nav { display:flex; align-items:center; justify-content: space-between; gap:16px; padding:14px 24px; }
.brand { font-weight: 900; letter-spacing: .2px; }
.brand a { color: var(--ink); text-decoration:none; }
.menu a { color: var(--muted); text-decoration:none; margin-left: 14px; }
.menu a:hover { color: var(--ink); }
.hero { padding: 28px 24px; }
.hero h1 { margin: 0 0 8px 0; font-size: clamp(28px, 3vw, 40px); }
.hero p { color: var(--muted); margin: 0; }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; background:#eef3ff; color:var(--brand); margin-left:8px; font-weight: 600; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top: 16px; }
.card { border:1px solid var(--border); border-radius:12px; padding:16px; text-decoration:none; color:inherit; background:var(--card); transition: box-shadow .15s ease, transform .05s ease; display:block; }
.card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.08); transform: translateY(-1px); }
.card h3 { margin:0 0 4px 0; }
.card .sub { color: var(--muted); margin: 0; }
.badge { display:inline-block; font-size: .85rem; padding: 2px 8px; border-radius: 999px; background:#f0f7ff; color: var(--brand); margin-right: 6px; border:1px solid #cfe2ff; }
.btn { display:inline-block; padding:10px 16px; border-radius: 999px; text-decoration:none; border:1px solid #cfe2ff; background:#eef6ff; color:#1a73e8; }
.btn.primary { background:#1a73e8; color:#fff; border:0; }
.footer { border-top:1px solid var(--border); margin-top:28px; padding:18px 24px; color:var(--muted); }
.section { padding: 24px 24px; }
.list { margin: 6px 0; }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 68ch; }
hr { border:0; border-top:1px solid var(--border); margin: 12px 0; }
.small { font-size: .92rem; color: var(--muted); }
.notice { background: #fff9e5; border: 1px solid #ffe7a3; padding: 12px; border-radius: 8px; }