.contact-page{
    --contact-border:#3a4352;
    --contact-border-hover:#536074;
    --contact-surface:#11151c;
    --contact-field-bg:#0c0f14;
    width:100%;
    max-width:760px;
}

html[data-theme="light"] .contact-page{
    --contact-border:#c9d1dc;
    --contact-border-hover:#9eabba;
    --contact-surface:#f7f8fa;
    --contact-field-bg:#fff;
}

.contact-header{
    margin:0 0 1.8rem;
}

.contact-header h1{
    margin:0 0 .7rem;
    font-size:clamp(2rem,4vw,2.7rem);
    line-height:1.16;
    letter-spacing:-.025em;
}

.contact-lead{
    margin:0;
    color:var(--text-soft);
    font-size:1.05rem;
    line-height:1.7;
}

.contact-form{
    margin-top:1.5rem;
}

.contact-card{
    padding:1.35rem;
    border:1px solid var(--contact-border);
    border-radius:var(--radius-md);
    background:var(--contact-surface);
}

.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:1rem;
}

.contact-field{
    margin:0 0 1rem;
}

.contact-field:last-child{
    margin-bottom:0;
}

.contact-field label{
    display:block;
    margin:0 0 .45rem;
    color:var(--text);
    font-size:.92rem;
    font-weight:650;
}

.contact-optional,
.contact-hint,
.contact-field-meta,
.contact-status{
    color:var(--text-muted);
}

.contact-optional{
    font-size:.82rem;
    font-weight:400;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
    display:block;
    width:100%;
    border:1px solid var(--contact-border);
    border-radius:var(--radius-sm);
    background:var(--contact-field-bg);
    color:var(--text);
    font:inherit;
    outline:0;
    transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}

.contact-field input,
.contact-field select{
    min-height:46px;
    padding:.7rem .8rem;
}

.contact-field textarea{
    min-height:190px;
    padding:.78rem .82rem;
    line-height:1.55;
    resize:vertical;
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover{
    border-color:var(--contact-border-hover);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--focus-ring);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
    color:var(--text-muted);
    opacity:1;
}

.contact-hint{
    margin:.4rem 0 0;
    font-size:.82rem;
    line-height:1.5;
}

.contact-field-meta{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    margin-top:.4rem;
    font-size:.78rem;
}

.contact-actions{
    display:flex;
    align-items:center;
    gap:.9rem;
    margin-top:1.2rem;
}

.contact-submit{
    min-height:44px;
    padding:.68rem 1.15rem;
    border:1px solid var(--site-action-fill);
    border-radius:var(--radius-sm);
    background:var(--site-action-fill);
    color:#fff;
    font:inherit;
    font-weight:650;
    cursor:pointer;
    transition:background var(--transition),border-color var(--transition),transform var(--transition);
}

.contact-submit:hover:not(:disabled){
    background:var(--site-action-fill-hover);
    border-color:var(--site-action-fill-hover);
}

.contact-submit:active:not(:disabled){
    transform:translateY(1px);
}

.contact-submit:focus-visible{
    outline:3px solid var(--focus-ring);
    outline-offset:3px;
}

.contact-submit:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.contact-status{
    font-size:.86rem;
}

.contact-alert{
    margin:0 0 1rem;
    padding:.85rem 1rem;
    border:1px solid var(--contact-border);
    border-radius:var(--radius-sm);
    font-size:.92rem;
    line-height:1.55;
}

.contact-alert ul{
    margin:.45rem 0 0;
    padding-left:1.2rem;
}

.contact-alert-success{
    border-color:#23884a;
    background:color-mix(in srgb,#23884a 12%,transparent);
    color:var(--text);
}

.contact-alert-error{
    border-color:#b14a4a;
    background:color-mix(in srgb,#b14a4a 12%,transparent);
    color:var(--text);
}

.contact-trap{
    position:absolute!important;
    left:-10000px!important;
    top:auto!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}

.grecaptcha-badge{
    left:0!important;
    right:auto!important;
    width:70px!important;
    overflow:hidden!important;
    border-radius:0 4px 4px 0!important;
    transition:width .18s ease!important;
}

.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within{
    width:256px!important;
}

@media(max-width:650px){
    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-card{
        padding:1rem;
    }

    .contact-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .contact-submit{
        width:100%;
    }

    .contact-field-meta{
        flex-direction:column;
        gap:.15rem;
    }
}