/*
 * Форма заявки и вопроса (templates/site/_lead_form.html.twig) — макет design/site-2026-10-27/Form.dc.html.
 * Подключается главной и /zayavka. Кнопка «на волнах» (`.go.busy`) — компонент дизайн-системы BusyButton.
 */
.h-form { --wv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' preserveAspectRatio='none'%3E%3Cpath d='M0 12C13 2 27 2 40 12C53 22 67 22 80 12V40H0Z'/%3E%3C/svg%3E");
    position: relative; overflow: hidden; background: #15173d; color: #fff; padding: 88px 0 150px; }
.h-form .waves { opacity: .55; }
.h-form .waves.w3 { opacity: .45; }
.h-form .h2 { color: #fff; }
.h-form .lead { color: #c9c8dd; }
.h-form a:not(.go) { color: #c9c2ff; }
.h-form-in { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: start; }
.h-form-in > * { min-width: 0; }
.h-col { display: flex; flex-direction: column; gap: 16px; }
.h-form-f { display: flex; flex-direction: column; gap: 14px; }
[hidden] { display: none !important; }

.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #1f2150; align-self: flex-start; }
.seg a { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #c9c8dd !important; text-decoration: none; transition: background-color .16s ease, color .16s ease; }
.seg a:hover { color: #fff !important; }
.seg a.on { background: #fff; color: #15173d !important; }
.seg a:focus-visible { outline: 2px solid #b5abff; outline-offset: 2px; }
.topic { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: #2a2c5e; color: #e3e0ff; font-size: 13px; font-weight: 600; align-self: flex-start; }

.fld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #c9c8dd; }
.fld .opt { font-size: 12px; }
.inp { height: 46px; border-radius: 10px; border: 1px solid #4a4c7e; background: #1f2150; color: #fff; padding: 0 14px; font: inherit; font-size: 15px; box-sizing: border-box; width: 100%; min-width: 0; transition: border-color .16s ease, box-shadow .16s ease; }
.inp::placeholder { color: #9d9cbc; }
textarea.inp { height: 110px; padding: 12px 14px; resize: vertical; }
.inp:focus, .inp:focus-visible { outline: none; border-color: #b5abff; box-shadow: 0 0 0 3px rgba(181, 171, 255, .25); }
.inp.err { border-color: #f87171; }
.inp[readonly] { opacity: .7; }
.emsg { font-size: 13px; color: #fca5a5; margin-top: -8px; }
.ferr { margin: 0; font-size: 14px; color: #fca5a5; }
.fhint { font-size: 13px; color: #c9c8dd; }
.consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; color: #c9c8dd; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #b5abff; }
.consent input:focus-visible { outline: 2px solid #b5abff; outline-offset: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.go { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 190px; padding: 0 22px; border-radius: 10px; border: 0; background: #fff; color: #15173d !important; font: 600 15px/1 Inter, sans-serif; text-decoration: none; cursor: pointer; align-self: flex-start; box-sizing: border-box; transition: transform .16s var(--s-ease), box-shadow .2s ease; }
.go:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(255, 255, 255, .5); }
.go:active { transform: scale(.98); }
.go:focus-visible { outline: 2px solid #b5abff; outline-offset: 2px; }
.go.busy { cursor: progress; transform: none; box-shadow: none; }
.go.busy::before, .go.busy::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -4px; z-index: -1; -webkit-mask: var(--wv) repeat-x; mask: var(--wv) repeat-x; animation: go-rise .35s var(--s-ease) both, go-run 2.6s linear infinite; }
.go.busy::before { top: 4%; background: #e3e0ff; -webkit-mask-size: 64px 100%; mask-size: 64px 100%; }
.go.busy::after { top: 38%; background: #c9c2ff; -webkit-mask-size: 92px 100%; mask-size: 92px 100%; animation-duration: .45s, 3.6s; animation-direction: normal, reverse; }
@keyframes go-run { from { -webkit-mask-position-x: 0; mask-position-x: 0; } to { -webkit-mask-position-x: 64px; mask-position-x: 64px; } }
@keyframes go-rise { from { translate: 0 100%; } to { translate: 0 0; } }

.ok { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; animation: go-fadein .26s var(--s-ease) both; }
.ok-mark { width: 48px; height: 48px; border-radius: 50%; background: #22c55e; display: grid; place-items: center; }
.ok-title { font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; margin: 0; color: #fff; }
.ok p { margin: 0; color: #c9c8dd; max-width: 44ch; }
@keyframes go-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
    .h-form { padding: 56px 0 120px; }
    .h-form-in { gap: 28px; }
}