:root { color-scheme: light; --navy: #173548; --teal: #3eb39b; --mint: #bde8dc; --cream: #f6f1e5; --ink: #17222a; --muted: #53616b; --line: #d8e1e0; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font: 18px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: #075f6b; font-weight: 700; }
header, main, footer { width: min(100% - 40px, 860px); margin: 0 auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); font-size: 21px; font-weight: 900; text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 12px; }
nav { display: flex; flex-wrap: wrap; gap: 14px; }
nav a { font-size: 15px; }
.hero { margin: 24px 0 36px; padding: clamp(28px, 8vw, 70px); border-radius: 30px; color: white; background: var(--navy); overflow: hidden; }
.hero img { width: min(225px, 46vw); float: right; margin: -18px -28px 12px 24px; border-radius: 28px; }
h1 { max-width: 620px; font-size: clamp(38px, 7vw, 67px); line-height: 1.06; margin: 0 0 18px; letter-spacing: -0.04em; }
h2 { margin-top: 38px; color: var(--navy); font-size: 29px; line-height: 1.2; }
h3 { color: var(--navy); font-size: 21px; }
p, li { max-width: 760px; }
.lead { max-width: 600px; font-size: 21px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 28px 0; }
.card { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.button { display: inline-block; padding: 13px 18px; border-radius: 14px; color: white; background: #087c78; text-decoration: none; }
.notice { padding: 18px; border-left: 5px solid var(--teal); border-radius: 12px; background: var(--mint); }
footer { padding: 42px 0 54px; color: var(--muted); font-size: 14px; }
@media (max-width: 590px) { header { align-items: flex-start; flex-direction: column; } .hero img { float: none; display: block; margin: 0 0 24px; width: 132px; } }