:root {
    --form-ink: #0f172a;
    --form-soft: #64748b;
    --form-accent: #0052ff;
    --form-accent-dark: #003fc7;
    --form-border: #dbe3f0;
    --form-focus: rgba(0, 82, 255, .13);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body.contact-form-page {
    margin: 0;
    padding: 4px 2px;
    background: transparent;
    color: var(--form-ink);
    font-family: "Heebo", Arial, sans-serif;
}

.contact-form-page form {
    width: 100%;
}

.contact-fieldset {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-input {
    width: 100%;
    min-height: 48px;
    padding: 11px 15px;
    border: 1px solid var(--form-border);
    border-radius: 12px;
    outline: 0;
    background: #fff;
    color: var(--form-ink);
    font: 500 1rem/1.4 "Heebo", Arial, sans-serif;
    text-align: right;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-input::placeholder {
    color: #8a98ad;
}

.contact-input:focus {
    border-color: var(--form-accent);
    box-shadow: 0 0 0 4px var(--form-focus);
}

.contact-submit {
    width: 100%;
    min-height: 48px;
    padding: 11px 18px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--form-accent), #4d7cff);
    box-shadow: 0 10px 22px rgba(0, 82, 255, .2);
    color: #fff;
    cursor: pointer;
    font: 700 1rem/1.4 "Heebo", Arial, sans-serif;
    transition: transform .2s ease, box-shadow .2s ease;
}

.contact-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(0, 82, 255, .26);
}

.contact-submit:focus-visible {
    outline: 3px solid rgba(0, 82, 255, .25);
    outline-offset: 3px;
}

.contact-message {
    display: block;
    min-height: 22px;
    color: var(--form-ink);
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
}

.contact-privacy {
    margin-top: 14px;
    color: var(--form-soft);
    font-size: .78rem;
    line-height: 1.55;
    text-align: center;
}

.contact-privacy a {
    color: var(--form-accent);
    font-weight: 600;
}

.contact-form-exit {
    color: #fff;
}

.contact-form-exit .contact-input {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.contact-form-exit .contact-input::placeholder {
    color: rgba(255, 255, 255, .76);
}

.contact-form-exit .contact-input:focus {
    border-color: #7dd3fc;
    box-shadow: 0 0 0 4px rgba(125, 211, 252, .18);
}

.contact-form-exit .contact-message,
.contact-form-exit .contact-privacy {
    color: rgba(255, 255, 255, .8);
}

.contact-form-exit .contact-privacy a {
    color: #7dd3fc;
}

@media (max-width: 420px) {
    body.contact-form-page {
        padding-inline: 0;
    }
}