:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #162033; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
main { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 11vh 0 64px; }
.hero { max-width: 760px; }
.eyebrow { margin: 0 0 18px; color: #3176c9; font-size: .78rem; font-weight: 700; letter-spacing: .14em; }
h1 { margin: 0; color: #101a2c; font-size: clamp(2rem, 5vw, 3.65rem); letter-spacing: .025em; line-height: 1.2; }
.intro { margin: 28px 0 0; color: #536178; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.85; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 70px; }
article, .notice { border: 1px solid #e3e8f0; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgb(16 38 73 / 5%); }
article { min-height: 206px; padding: 28px; }
h2 { margin: 0 0 14px; color: #18253a; font-size: 1.1rem; }
p { color: #58657a; line-height: 1.85; }
article p, .notice p { margin: 0; font-size: .95rem; }
.notice { margin-top: 18px; padding: 28px; border-left: 4px solid #3176c9; }
footer { display: flex; justify-content: space-between; gap: 16px; width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 30px; color: #768399; font-size: .85rem; }
footer a { color: #4b78b5; text-decoration: none; }
footer a:hover { text-decoration: underline; }
@media (max-width: 720px) { main { padding-top: 68px; } .grid { grid-template-columns: 1fr; margin-top: 48px; } article { min-height: 0; } footer { flex-direction: column; } }