* { box-sizing: border-box; }
:root { --bg: #f4f7fb; --surface: #fff; --text: #0f172a; --muted: #475569; --line: #dbe2ea; }
html, body { margin: 0; padding: 0; }
body { font-family: "Inter", "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.75; }
.wrap { width: min(980px, calc(100% - 32px)); margin: 28px auto 40px; }
.hero { background: linear-gradient(135deg, #0a2a56 0%, #144ea0 65%, #1e65cc 100%); color: #f8fbff; border-radius: 16px; padding: 28px 24px; border: 1px solid rgba(255,255,255,0.16); }
.eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #cfe3ff; margin-bottom: 8px; }
h1 { margin: 0 0 10px; font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height: 1.25; }
.hero p { margin: 0; color: #d8e8ff; max-width: 74ch; }
article { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px; }
h2 { margin: 26px 0 8px; font-size: 1.34rem; line-height: 1.35; color: #0b2546; }
h2:first-child { margin-top: 0; }
p { margin: 0 0 12px; color: var(--text); }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin: 6px 0; color: var(--text); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; padding: 11px 16px; border-radius: 10px; text-decoration: none; font-weight: 700; border: 1px solid transparent; transition: 0.18s; }
.btn-home { background: #fff; color: #111827; border-color: #d1d5db; }
.btn-register { background: #111827; color: #fff; }
.btn:hover { opacity: 0.9; }
@media (max-width: 768px) { .wrap { width: calc(100% - 20px); margin: 12px auto 20px; } .hero { padding: 20px 16px; } article { padding: 18px 14px; } .btn { width: 100%; min-width: 0; } }