.contacts-section {
    position: relative;
    background: #0a0d12;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.contacts-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.contacts-bg__dots {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0.55;
}
.contacts-bg__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 80% at 30% 50%,
        transparent 30%,
        rgba(0,0,0,0.55) 100%
    );
}

.contacts-building {
    position: absolute;
    right: -2%;
    bottom: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.contacts-building__img {
    position: absolute;
    bottom: 0; right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    
    opacity: 0;
    transform: translateX(40px) scale(1.04);
    filter: brightness(0.75) contrast(1.1);
    transition:
        opacity   1.6s cubic-bezier(0.16,1,0.3,1) 0.5s,
        transform 2.0s cubic-bezier(0.16,1,0.3,1) 0.5s;
}
.contacts-section.in-view .contacts-building__img {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.contacts-building__glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.06) 0%,
        transparent 45%,
        rgba(30,80,160,0.08) 100%
    );
    pointer-events: none;
    z-index: 2;
}

.contacts-orbits {
    position: absolute;
    
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(420px, 65vw, 900px);
    height: clamp(420px, 65vw, 900px);
    z-index: 2;
    pointer-events: none;
}
.contacts-orbits__svg {
    width: 100%; height: 100%;
    overflow: visible;
}

.co-ring {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 1;
    transform-origin: 350px 350px;
    transform: scale(0);
    transition: transform 1.4s cubic-bezier(0.34,1.1,0.64,1);
    transition-delay: calc(0.3s + var(--ri) * 0.2s);
}
.contacts-section.in-view .co-ring {
    transform: scale(1);
}

.co-orbit {
    fill: none;
    stroke-width: 1;
    transform-origin: 350px 350px;
}
.co-orbit--1 {
    stroke: rgba(255,255,255,0.12);
    animation: coOrbit1 18s linear infinite;
    animation-play-state: var(--anim-play, running);
    opacity: 0;
    transition: opacity 0.8s ease 1.2s;
}
.co-orbit--2 {
    stroke: rgba(255,255,255,0.07);
    animation: coOrbit2 28s linear infinite reverse;
    animation-play-state: var(--anim-play, running);
    opacity: 0;
    transition: opacity 0.8s ease 1.5s;
}
.contacts-section.in-view .co-orbit--1,
.contacts-section.in-view .co-orbit--2 {
    opacity: 1;
}
@keyframes coOrbit1 { to { transform: rotate(360deg); } }
@keyframes coOrbit2 { to { transform: rotate(360deg); } }

.co-dot {
    fill: rgba(255,255,255,0.55);
    transform-origin: 350px 350px;
    opacity: 0;
    transition: opacity 0.4s ease calc(1.4s + var(--di) * 0.12s);
    
    animation: coDotSpin1 18s linear infinite;
    animation-play-state: var(--anim-play, running);
}
.co-dot--sm {
    fill: rgba(255,255,255,0.35);
    animation: coDotSpin2 28s linear infinite reverse;
    animation-play-state: var(--anim-play, running);
}
.contacts-section.in-view .co-dot {
    opacity: 1;
}
@keyframes coDotSpin1 { to { transform: rotate(360deg); } }
@keyframes coDotSpin2 { to { transform: rotate(360deg); } }

.co-center {
    fill: rgba(255,255,255,0.12);
    stroke: rgba(255,255,255,0.3);
    stroke-width: 1;
    transform-origin: 350px 350px;
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.8s;
}
.contacts-section.in-view .co-center {
    transform: scale(1);
}
.co-center-pulse {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 1;
    transform-origin: 350px 350px;
    animation: coPulse 3s ease-in-out infinite;
    animation-play-state: var(--anim-play, running);
}
@keyframes coPulse {
    0%, 100% { transform: scale(1);    opacity: 0.5; }
    50%       { transform: scale(1.4); opacity: 0; }
}

.contacts-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(340px, 44%) 1fr;
    align-items: center;
    padding: 5rem 6vw;
    gap: 4vw;
    box-sizing: border-box;
}

.contacts-left {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.contacts-title-block {
    overflow: hidden;
}
.contacts-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.contacts-title__line {
    display: block;
    font-family: 'HeroBold', 'Avenir Next World', sans-serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: #fff;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(100%);
    transition:
        opacity   0.8s ease           calc(0.2s + var(--li) * 0.15s),
        transform 0.9s cubic-bezier(0.16,1,0.3,1) calc(0.2s + var(--li) * 0.15s);
}
.contacts-section.in-view .contacts-title__line {
    opacity: 1; transform: none;
}

.contacts-title__line--accent {
    color: rgba(255,255,255,0.82);
}

.contacts-form-wrap .wpcf7 form { margin: 0; }

.contacts-form-wrap .wpcf7 br { display: none; }

.contacts-form-wrap .wpcf7-form-control-wrap {
    display: block;
    position: relative;
    margin-bottom: 1.2rem;
}

.contacts-form-wrap input[type="text"],
.contacts-form-wrap input[type="tel"],
.contacts-form-wrap input[type="email"],
.contacts-form-wrap textarea,

.contacts-form input,
.contacts-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px) saturate(1.3) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.3) brightness(1.1);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding: 1.1rem 3rem 1.1rem 1.4rem;
    color: rgba(255,255,255,0.85);
    font-family: 'Avenir Next World', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    outline: none;
    border-radius: 0;
    transition: background 0.3s ease, border-color 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
}
.contacts-form-wrap input::placeholder,
.contacts-form-wrap textarea::placeholder,
.contacts-form input::placeholder,
.contacts-form textarea::placeholder {
    color: rgba(255,255,255,0.40);
    font-family: 'Avenir Next World', sans-serif;
    letter-spacing: 0.05em;
}
.contacts-form-wrap input:focus,
.contacts-form-wrap textarea:focus,
.contacts-form input:focus,
.contacts-form textarea:focus {
    background: rgba(255,255,255,0.11);
    border-bottom-color: rgba(255,255,255,0.45);
}

.contacts-form-wrap .wpcf7-form-control-wrap::after {
    content: '›';
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.35);
    font-size: 1.3rem;
    line-height: 1;
    pointer-events: none;
    transition: color 0.3s ease;
}

.contacts-form-wrap .wpcf7-form-control-wrap:has(textarea)::after {
    display: none;
}

.contacts-form-wrap input:focus ~ .contacts-field__arrow,
.contacts-form-wrap .wpcf7-form-control-wrap:focus-within::after {
    color: rgba(255,255,255,0.75);
}

.contacts-form-wrap textarea,
.contacts-form textarea {
    resize: none;
    height: 90px;
    padding-right: 1.4rem;
}

.contacts-form-wrap input[type="submit"],
.contacts-form-wrap .wpcf7-submit,
.contacts-form .contacts-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.85);
    font-family: 'Avenir Next World', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.95rem 2.8rem;
    cursor: pointer;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
    margin-top: 0.4rem;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}
.contacts-form-wrap input[type="submit"]:hover,
.contacts-form-wrap .wpcf7-submit:hover,
.contacts-form .contacts-submit:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
}

.contacts-form-wrap .wpcf7-not-valid-tip {
    color: rgba(255,120,120,0.85);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
    display: block;
}
.contacts-form-wrap .wpcf7-response-output {
    border: none;
    margin: 0.8rem 0 0;
    padding: 0.8rem 1.2rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
}
.contacts-form-wrap .wpcf7-mail-sent-ok {
    background: rgba(60,180,100,0.12);
    color: rgba(120,220,150,0.9);
}
.contacts-form-wrap .wpcf7-validation-errors {
    background: rgba(220,80,80,0.08);
    color: rgba(255,140,140,0.85);
}

.contacts-field {
    position: relative;
    margin-bottom: 1.2rem;
}
.contacts-field input,
.contacts-field textarea {
    width: 100%;
}
.contacts-field__arrow {
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.35);
    font-size: 1.3rem;
    pointer-events: none;
}
.contacts-field--textarea { }
.contacts-field--textarea .contacts-field__arrow { display: none; }

.contacts-right {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8rem; 
}

.contacts-alt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s;
}
.contacts-section.in-view .contacts-alt {
    opacity: 1; transform: none;
}

.contacts-alt__or {
    font-family: 'HeroSubtitle', 'Avenir Next World', sans-serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.08em;
    font-style: italic;
}

.contacts-booklet {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    padding: 0.8rem 1.4rem 0.8rem 1.6rem;
    font-family: 'Avenir Next World', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        background    0.35s ease,
        border-color  0.35s ease,
        color         0.35s ease,
        transform     0.35s cubic-bezier(0.16,1,0.3,1);
    position: relative;
    overflow: hidden;
}
.contacts-booklet:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
    transform: translateX(4px);
}

.contacts-booklet::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
    opacity: 0;
    transform: translateX(-100%);
}
.contacts-booklet:hover::before {
    animation: bookletShine 0.55s ease forwards;
}
@keyframes bookletShine {
    0%   { opacity: 0; transform: translateX(-100%); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%); }
}
.contacts-booklet__text { position: relative; z-index: 1; }
.contacts-booklet__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid rgba(255,255,255,0.25);
    flex-shrink: 0;
    transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.34,1.4,0.64,1);
}
.contacts-booklet:hover .contacts-booklet__arrow {
    border-color: rgba(255,255,255,0.55);
    transform: rotate(45deg);
}
.contacts-booklet__arrow svg { width: 16px; height: 16px; }

.contacts-alt__info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.contacts-alt__phone,
.contacts-alt__email {
    font-family: 'Avenir Next World', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.3s ease;
}
.contacts-alt__phone:hover,
.contacts-alt__email:hover {
    color: rgba(255,255,255,0.8);
}

@media (max-width: 64rem) {
    .contacts-inner {
        grid-template-columns: 1fr;
        padding: 4rem 5vw;
        gap: 3rem;
    }
    .contacts-building {
        width: 90%;
        right: -10%;
        opacity: 0.25;
    }
    .contacts-orbits {
        width: clamp(280px, 80vw, 500px);
        height: clamp(280px, 80vw, 500px);
    }
    .contacts-right {
        padding-top: 0;
    }
}
@media (max-width: 40rem) {
    .contacts-title__line { font-size: clamp(2.5rem, 13vw, 4rem); }
    .contacts-building { display: none; }
    .contacts-inner { padding: 3rem 5vw 4rem; }
}