/* ════════════════════════════════════════════════════════
   Footer — Подвал
   Сетка = hero/fw-sticky-wrap: padding 16px → 28px
   ════════════════════════════════════════════════════════ */

footer.site-footer {
    padding: 48px 16px 72px;
    background:
        radial-gradient(circle at 16% 8%, rgba(216, 230, 227, 0.16), transparent 28%),
        linear-gradient(135deg, #101010 0%, #171717 48%, #242424 100%);
}
@media (min-width: 768px)  { footer.site-footer { padding: 64px 28px 88px; } }
@media (min-width: 1024px) { footer.site-footer { padding: 72px 28px 100px; } }

/* ── Карточка внутри тёмного фона ── */
.footer-shell {
    width: 100%;
    padding: 56px 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 34px;
    background:
        radial-gradient(circle at 78% 74%, rgba(216, 230, 227, 0.18), transparent 30%),
        #f4f4f1;
    box-shadow: 0 34px 120px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
@media (min-width: 768px)  { .footer-shell { padding: 64px 56px; } }
@media (min-width: 1024px) { .footer-shell { padding: 72px; } }

/* ── Верхняя зона: CTA + ссылки ── */
.footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
@media (min-width: 1024px) {
    .footer-top {
        grid-template-columns: minmax(360px, 1.15fr) minmax(480px, 1fr);
        gap: 76px;
    }
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.site-footer .logo-img--footer {
    height: clamp(32px, 3.4vw, 46px);
}

.footer-kicker {
    margin-top: 40px;
    color: #626262;
    font-size: 14px;
    font-weight: 600;
}

.footer-cta h2 {
    max-width: 640px;
    margin-top: 16px;
    color: #151515;
    font-size: clamp(36px, 5vw, 78px);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: 0;
}

/* ── Email-форма ── */
.footer-cta {
    min-width: 0;
}

.footer-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    margin-top: 32px;
    padding: 8px;
    border: 1px solid #e3e3df;
    border-radius: 100px;
    background: white;
    box-sizing: border-box;
}

.footer-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border: none;
    outline: none;
    padding: 0 20px;
    border-radius: 100px;
    background: transparent;
    color: #151515;
    font-size: 15px;
    font-weight: 500;
}

.footer-form input::placeholder {
    color: #9a9a9a;
}

.footer-form button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: 52px;
    border: none;
    border-radius: 100px;
    padding: 0 26px;
    background: #151515;
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-top: 0;
    box-shadow: 0 8px 24px rgba(27, 27, 27, .16);
    transition: background 220ms ease, color 220ms ease;
}

.footer-form button:hover {
    background: #2a2a2a;
    color: white;
}

.footer-note {
    max-width: 560px;
    margin-top: 14px;
    color: #a0a09b;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}

/* ── Колонки ссылок ── */
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    padding-top: 0;
}
@media (min-width: 1024px) {
    .footer-links { padding-top: 64px; gap: 48px; }
}

.footer-column {
    display: grid;
    gap: 18px;
    align-content: start;
}

.footer-column p {
    color: #151515;
    font-size: 14px;
    font-weight: 800;
}

.footer-column a {
    width: fit-content;
    color: #525252;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    transition: color 200ms ease;
}

.footer-column a:hover,
.footer-column .footer-accent-link {
    color: #151515;
}

/* ── Нижняя зона: big brand + meta ── */
.footer-bottom {
    margin-top: 64px;
}
@media (max-width: 767px) { .footer-bottom { margin-top: 40px; } }

.footer-brand {
    display: block;
    width: 100%;
    line-height: 0;
}

.footer-brand-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    opacity: 1;
    mix-blend-mode: normal;
    transform: translateX(-0.25%);
    transform-origin: left center;
}

.footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(21, 21, 21, 0.10);
}

.footer-meta span,
.footer-meta a {
    color: #686868;
    font-size: 13.5px;
    font-weight: 600;
}

.footer-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 100px;
    background: #151515;
    color: white;
    transition: background 220ms ease;
}

.footer-meta a:hover {
    background: #2a2a2a;
    color: white;
}

/* ── Mobile (<640px) ── */
@media (max-width: 640px) {
    .footer-shell {
        padding: 28px 22px;
        border-radius: 26px;
    }

    .site-footer .logo-img--footer {
        height: clamp(30px, 9vw, 40px);
    }

    .footer-kicker {
        margin-top: 22px;
        font-size: 13px;
    }

    .footer-form {
        gap: 6px;
        padding: 6px;
        width: 100%;
        max-width: 100%;
    }

    .footer-form input,
    .footer-form button {
        height: 46px;
        font-size: 14px;
    }

    .footer-form input  {
        flex: 1 1 0;
        min-width: 0;
        width: 100%;
        padding: 0 12px;
    }
    .footer-form button {
        flex: 0 0 auto;
        padding: 0 18px;
    }

    .footer-note { font-size: 12px; }

    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }

    .footer-column {
        gap: 6px;
        padding-top: 14px;
        border-top: 1px solid rgba(21, 21, 21, 0.10);
    }

    .footer-column:last-child {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

    .footer-column p {
        grid-column: 1 / -1;
        margin-bottom: 2px;
        font-size: 13px;
    }

    .footer-column a {
        width: 100%;
        font-size: 12.5px;
    }

    .footer-brand-img {
        width: 112%;
        max-width: none;
    }

    .footer-meta {
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-meta a {
        align-self: stretch;
        justify-content: center;
        min-height: 42px;
    }
}

@media (max-width: 360px) {
    .footer-form button {
        flex-basis: 94px;
        padding: 0 12px;
    }

    .footer-brand-img { width: 118%; }

    .footer-column:last-child {
        grid-template-columns: 1fr;
    }
}