:root { color-scheme: light; --ink: #10263b; --muted: #536879; --blue: #1268c4; --pale: #eef7ff; --line: #d9e5ee; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: linear-gradient(160deg, #f5fbff, #fff 45%); line-height: 1.65; }
.container { max-width: 900px; margin: 0 auto; padding: 44px 24px 64px; }
.brand { color: var(--blue); text-decoration: none; font-size: 1.2rem; font-weight: 800; }
.hero { max-width: 650px; margin: 72px 0 42px; }
.eyebrow { color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .11em; }
h1 { margin: 8px 0; font-size: clamp(2.25rem, 6vw, 4.3rem); line-height: 1.05; letter-spacing: -.045em; }
h2 { margin: 8px 0; font-size: 1.2rem; line-height: 1.25; }
.hero p:last-child, .card p { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { display: block; min-height: 185px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; color: inherit; background: #fff; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 15px 32px #10263b18; }
.card span { color: var(--blue); font-size: .8rem; font-weight: 800; }
.card p { margin: 8px 0 0; font-size: .95rem; }
.page { max-width: 800px; margin: 0 auto; padding: 38px 24px 64px; }
.back { display: inline-block; margin-bottom: 38px; color: var(--blue); font-weight: 700; text-decoration: none; }
.page h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
.page h2 { margin-top: 36px; }
.lead { color: var(--muted); font-size: 1.08rem; }
.notice { margin: 26px 0; padding: 18px 20px; border-left: 4px solid var(--blue); border-radius: 8px; background: var(--pale); }
.button { display: inline-block; margin: 8px 0; padding: 12px 17px; border-radius: 10px; color: #fff; background: var(--blue); font-weight: 750; text-decoration: none; }
li { margin: 8px 0; }
footer { padding: 24px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: .9rem; }
@media (max-width: 620px) { .container { padding-top: 28px; } .hero { margin: 52px 0 30px; } .cards { grid-template-columns: 1fr; } }