.site-footer {
    background: var(--color-gray-100);
    color: var(--color-gray-blue-900);
}

.site-footer__main {
    padding-block: 96px;
}

.site-footer__rail {
    display: flex;
    align-items: flex-start;
}

.site-footer__logo {
    display: inline-flex;
    width: 160px;
    height: 160px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex-shrink: 0;
}

.site-footer__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.site-footer__content {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.site-footer__tagline {
    margin: 0;
    max-width: 568px;
    color: var(--color-gray-blue-900);
    font-size: 26px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.site-footer__tagline em {
    color: var(--color-blue-700);
    font-style: normal;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.site-footer__col-text {
    margin: 0;
    color: var(--color-gray-cool-600);
    font-size: 14px;
    line-height: 1.7;
}

.site-footer__socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.social-icon:hover {
    background: var(--color-blue-700);
    color: var(--color-white);
    border-color: var(--color-blue-700);
}

.social-icon svg { width: 20px; height: 20px; }

.site-footer__bottom {
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    padding-block: 32px;
}

.site-footer__copy {
    color: var(--color-gray-cool-600);
    font-size: 14px;
}

.site-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.site-footer__menu a {
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease;
}

.site-footer__menu a:hover { color: var(--color-blue-700); }

@media (max-width: 700px) {
    .site-footer__main { padding-block: 56px; }
    .site-footer__content { gap: 40px; }
}