:root { --primary: #0E2D5F; --secondary: #FFBF2C; color-scheme: light; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--primary); background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; }
main { width: 100%; padding: 26px 30px 30px; }
section { max-width: 470px; margin: 0 auto; }
.contact-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.contact-brand .logo { width: 40px; height: auto; }
.contact-brand > span { font-size: 17px; font-weight: 750; letter-spacing: -.03em; }
.contact-brand small { display: block; color: #61738b; font-size: 10px; font-weight: 500; letter-spacing: .04em; margin-top: 3px; }
h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
section > p { color: #60718a; font-size: 13px; line-height: 1.7; margin: 0 0 22px; }
.contact-form { display: grid; gap: 16px; }
.form-field { display: grid; gap: 7px; min-width: 0; }
.form-field label { font-size: 12px; font-weight: 650; }
input, textarea, button { font: inherit; }
.form-input, .form-textarea { display: block; width: 100%; border: 1px solid #ccd5e2; border-radius: 7px; padding: 12px 13px; background: #f7f9fc; color: var(--primary); font-size: 16px; }
.form-input { min-height: 46px; }
.form-textarea { min-height: 100px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: #7c8ba0; opacity: 1; }
.form-input:focus, .form-textarea:focus { outline: 2px solid var(--primary); outline-offset: 2px; background: #fff; }
.iti { width: 100%; display: block; }
.iti__country-list { max-width: min(350px, calc(100vw - 70px)); white-space: normal; font-size: 13px; }
.iti__selected-flag { border-radius: 7px 0 0 7px; }
.iti input { width: 100%; }
.iti--separate-dial-code .iti__selected-flag { background: #edf1f7; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; border: 0; border-radius: 7px; color: var(--primary); background: var(--secondary); font-size: 14px; font-weight: 750; padding: 12px; cursor: pointer; width: 100%; }
.btn svg { width: 23px; height: 23px; flex-shrink: 0; }
.btn:hover { background: #ffcd59; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.container_msg { font-size: 12px; line-height: 1.5; }
.error-msg { color: #a52923; }
.valid-msg { color: #25613f; }
input.error { border-color: #a52923; }
.hide { display: none; }
.form-note { color: #667790; font-size: 11px; line-height: 1.6; margin: 0; }
@media (max-width: 380px) { main { padding: 22px 20px; } h1 { font-size: 25px; } }