:root { font-family: Onest, Arial, sans-serif; color: #17212b; background: #f7f9fa; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { min-height: 100vh; }
a { color: inherit; }
.page { min-height: calc(100vh - var(--cui-h, 0px)); display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse 62% 70% at 50% 50%, #eef4f8 0%, #f7f9fa 78%); }
.wrap { width: min(100% - 64px, 1440px); margin-inline: auto; }
.header { height: 130px; flex: none; display: flex; justify-content: center; align-items: center; }
.brand { display: block; width: 82px; }
.brand img { display: block; width: 100%; height: auto; }
.main { flex: 1; position: relative; display: grid; place-items: center; text-align: center; padding: 24px 0 90px; isolation: isolate; }
.hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.site-status { margin: 0 0 20px; padding: 9px 15px; border-radius: 24px; background: rgba(19, 56, 92, .055); color: #627586; font-size: 13px; line-height: 1.4; }
h1 { font-size: clamp(44px, 5.1vw, 73px); line-height: 1.1; letter-spacing: -.055em; margin: 0; font-weight: 700; }
.intro { max-width: 610px; margin: 25px 0 0; color: #697986; font-size: 17px; line-height: 1.55; text-wrap: balance; }
.actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.button { min-height: 56px; padding: 0 27px; border: 1px solid #13385c; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px; font-weight: 700; transition: background .2s, color .2s, transform .2s; }
.button-primary { background: #13385c; color: white; }
.button-primary:hover { background: #1b4d79; border-color: #1b4d79; }
.button-secondary { background: rgba(255,255,255,.5); color: #13385c; }
.button-secondary:hover { background: #e3edf4; }
a:focus-visible { outline: 2px solid #6d8ca4; outline-offset: 4px; }
.contacts { margin-top: 29px; color: #7b8a95; font-size: 14px; line-height: 1.6; }
.contacts p { margin: 0 0 5px; }
.contacts a { text-decoration: none; color: #344b5d; font-weight: 600; white-space: nowrap; }
.contacts a:hover { color: #1b4d79; text-decoration: underline; text-underline-offset: 4px; }
.art { position: absolute; z-index: 0; pointer-events: none; width: min(63vw, 650px); aspect-ratio: 1; display: grid; place-items: center; transform: translateY(-30px); }
.art::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(44, 103, 148, .075), rgba(44, 103, 148, .025) 48%, transparent 72%); filter: blur(26px); }
.loader { width: 100%; height: 100%; position: relative; border: 1px solid rgba(33, 84, 124, .12); border-radius: 50%; }
.loader::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(transparent 0deg, transparent 125deg, rgba(36, 100, 150, .05) 175deg, rgba(36, 100, 150, .25) 220deg, rgba(36, 100, 150, .65) 275deg, rgba(36, 100, 150, .16) 320deg, transparent 360deg); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px), #000 calc(100% - 2px), transparent 100%); filter: blur(1px) drop-shadow(0 0 6px rgba(36, 100, 150, .3)); }
@media (max-width: 600px) {
 .wrap { width: calc(100% - 40px); }
 .header { height: 105px; }
 .brand { width: 68px; }
 .main { padding: 35px 0 60px; }
 .site-status { margin-bottom: 18px; font-size: 12px; }
 h1 { font-size: clamp(35px, 9vw, 52px); line-height: 1.08; }
 .desktop-break { display: none; }
 .intro { margin-top: 20px; font-size: 15px; max-width: 360px; }
 .actions { width: 100%; margin-top: 25px; gap: 10px; }
 .button { width: min(100%, 300px); min-height: 52px; font-size: 14px; }
 .contacts { margin-top: 24px; font-size: 13px; }
 .art { width: min(115vw, 460px); transform: translateY(-25px); }
}
@media (min-width: 901px) and (max-height: 850px) { .header { height: 110px; } .main { padding: 12px 0 45px; } h1 { font-size: clamp(44px, 4.6vw, 66px); } .intro { margin-top: 18px; } .actions { margin-top: 22px; } .contacts { margin-top: 22px; } .art { width: min(53vw, 570px); } }
@media (prefers-reduced-motion: no-preference) { .loader::after { animation: loader-turn 3.4s linear infinite; } .hero { animation: appear .75s cubic-bezier(.2,.7,.2,1) both; } .button:hover { transform: translateY(-2px); } @keyframes loader-turn { to { transform: rotate(360deg); } } @keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } }