/* =================================================================== FOOTER section css =================================================================== */
.footer {
    padding: 0 var(--sp25);

    & .footer__panel {
        position: relative;
        padding-top: var(--sp100);
        background: var(--ink);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        overflow: hidden;
        color: var(--white-muted);

        /* corner glows */
        &::before, &::after {
            position: absolute;
            width: 55%; aspect-ratio: 1;
            border-radius: var(--r-full);
            content: '';
            pointer-events: none;
            filter: blur(40px);
        }
        &::before { top: -35%; left: -25%; background: radial-gradient(circle, var(--glow-blue) 0%, transparent 62%); }
        &::after { right: -25%; bottom: -40%; background: radial-gradient(circle, var(--glow-warm) 0%, transparent 62%); }

        & > * { position: relative; z-index: 1; }
    }

    & .footer__grid {
        display: grid;
        grid-template-columns: 380px 1fr;
        align-items: start;
        gap: var(--sp70);
    }

    /* ---------------- Brand card ---------------- */
    & .footer__brand {
        padding: var(--sp30);
        background: var(--glass);
        border: 1px solid var(--line-dark);
        border-radius: var(--r-lg);
    }

    & .footer__logo { display: inline-flex; margin-bottom: var(--sp20); }

    & .footer__logo-img { width: 190px; }

    & .footer__about { margin-bottom: var(--sp20); color: var(--white); }

    & .footer__facts { margin-bottom: var(--sp25); }

    & .footer__fact {
        display: flex; justify-content: space-between;
        gap: var(--sp15);
        padding-block: var(--sp12);
        font-size: var(--f14);
        color: var(--white);

        & + .footer__fact { border-top: 1px solid var(--line-dark); }
        & strong { font-weight: 500; }
    }

    & .footer__social { display: flex; gap: var(--sp10); }

    & .footer__social-link {
        display: flex; align-items: center; justify-content: center;
        width: 42px; height: 42px;
        background: var(--white);
        border-radius: var(--r-full);
        color: var(--ink);

        &:hover { background: var(--primary); color: var(--white); }
    }

    /* ---------------- Columns ---------------- */
    & .footer__cols {
        display: grid;
        grid-template-columns: 1fr 1.2fr 1.6fr;
        gap: var(--sp40);
        margin-bottom: var(--sp50);
    }

    & .footer__heading {
        margin-bottom: var(--sp25);
        font-size: var(--f25);
        color: var(--white);
    }

    & .footer__links { display: grid; gap: var(--sp12); }

    & .footer__link {
        font-weight: 500;
        color: var(--white);

        &:hover { color: var(--primary); padding-left: var(--sp5); }
    }

    & .footer__cta-text { margin-bottom: var(--sp25); color: var(--white); }

    & .footer__cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp12); }

    /* ---------------- Contact row ---------------- */
    & .footer__contacts {
        display: flex; flex-wrap: wrap;
        gap: var(--sp25) var(--sp40);
    }

    & .footer__contact {
        display: flex; align-items: center;
        gap: var(--sp15);
    }

    & .footer__contact-icon {
        display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
        width: 48px; height: 48px;
        background: var(--primary);
        border-radius: var(--r-full);
        color: var(--white);
    }

    & .footer__contact-label { display: block; font-size: var(--f14); }

    & .footer__contact-value {
        font-family: var(--font-mona);
        font-weight: 500;
        color: var(--white);

        &:hover { color: var(--primary); }
    }

    /* ---------------- Big word strip ---------------- */
    & .footer__ticker {
        margin-block: var(--sp70) var(--sp50);

        & .ticker__word,
        & .ticker__word.ticker__word--accent { background: none; color: var(--white); }
        & .ticker__star { color: var(--white); }
    }

    /* ---------------- Copyright tab + back to top ---------------- */
    & .footer__bottom { position: relative; height: 70px; }

    & .footer__copy {
        --notch-bg: var(--surface-light);
        --notch-r: var(--r-xl);
        left: 50%;
        width: min(680px, calc(100% - 2 * var(--sp60)));
        height: 70px;
        padding: 0 var(--sp20);
        font-size: var(--f16);
        text-align: center;
        color: var(--ink);
        transform: translateX(-50%);
    }

    & .footer__top {
        position: absolute; right: var(--sp25); bottom: var(--sp25);
        display: flex; align-items: center; justify-content: center;
        width: 46px; height: 46px;
        background: var(--primary);
        border-radius: var(--r-btn);
        color: var(--white);

        &:hover { background: var(--primary-blue-dark); transform: translateY(-3px); }
    }
}

/* =================================================================== FOOTER responsive =================================================================== */
@media (max-width: 1365.98px) {
    .footer {
        & .footer__grid { grid-template-columns: 320px 1fr; gap: var(--sp40); }
        & .footer__cols { grid-template-columns: 1fr 1fr; }
        & .footer__cols > :last-child { grid-column: 1 / -1; }
    }
}

@media (max-width: 991.98px) {
    .footer {
        & .footer__grid { grid-template-columns: 1fr; }
        & .footer__brand { max-width: 520px; }
    }
}

@media (max-width: 767.98px) {
    .footer {
        padding: 0 var(--gutter);
        & .footer__panel { padding-top: var(--sp60); border-radius: var(--r-lg) var(--r-lg) 0 0; }
        & .footer__cols { grid-template-columns: 1fr; gap: var(--sp30); }
        & .footer__contacts { flex-direction: column; }
        & .footer__copy { width: calc(100% - 2 * var(--sp20)); font-size: var(--f14); }
        & .footer__top { right: var(--sp12); bottom: 82px; }
    }
}