body{margin:0;background: #111a2e;color: #becbe6;font-family:Arial,Helvetica,sans-serif;line-height:1.65}
.wrap{width:min(920px,calc(100% - 32px));margin:auto}
.head{display:flex;justify-content:space-between;gap:16px;padding:20px 0}
.head nav{display:flex;gap:14px;flex-wrap:wrap}
.head a,main a{color: #becbe6}
.brand{font-weight:800;text-decoration:none;font-size:20px}
.hero{background: #111a2e;color: #f5f7ff;padding:42px 0}
.hero h1{font-size:clamp(32px,7vw,54px);margin:0}
.hero p{color: #becbe6}
main{background: #111a2e;border: 1px solid #344563;border-radius:14px;padding:32px;margin:28px auto}
main h2{margin-top:30px}
.note{background: #111a2e;border-left: 4px solid #344563;padding:14px 16px;border-radius:6px}
.contact{background: #111a2e;border: 1px solid #344563;padding:18px;border-radius:10px}
.foot{padding:0 0 36px;color: #becbe6;font-size:13px}
@media(max-width:640px){.head{flex-direction:column}
main{padding:22px 18px}
}