/* ═══════════════════════════════════════════════
   INFO — Dark full-viewport footer
═══════════════════════════════════════════════ */

.footer-section {
    height: 100vh !important;
    min-width: 600px;
    padding: 0 !important;
    background-color: #2a2a2a;
}

.info-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: max(40px, calc(2.8vw * var(--scale)));
    color: #fff;
}

/* ── Center block (logo + social + links) ── */
.info-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

.info-logo {
    text-decoration: none;
    color: #fff;
}

.info-logo-image {
    height: max(48px, calc(3.3vw * var(--scale)));
    width: auto;
    filter: brightness(0) invert(1);
}

.info-logo-text {
    font-family: var(--font1);
    font-size: max(48px, calc(3.3vw * var(--scale)));
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #fff;
}

.info-brand-subtitle {
    font-family: var(--font2);
    font-size: max(12px, calc(0.83vw * var(--scale)));
    font-weight: 300;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.6);
    margin-top: max(8px, calc(0.56vw * var(--scale)));
}

/* ── Social icons ── */
.info-social-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
    margin-top: max(40px, calc(2.8vw * var(--scale)));
}

.info-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.info-social-icon:hover {
    opacity: 1;
}

.info-social-icon svg {
    width: max(20px, calc(1.39vw * var(--scale)));
    height: max(20px, calc(1.39vw * var(--scale)));
}

/* ── Links ── */
.info-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: max(16px, calc(1.11vw * var(--scale)));
    margin-top: max(16px, calc(1.11vw * var(--scale)));
}

.info-link {
    font-family: var(--font2);
    font-size: max(12px, calc(0.83vw * var(--scale)));
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.info-link:hover {
    opacity: 1;
}

/* Ghost secondary nav */
.info-links .footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: max(16px, calc(1.11vw * var(--scale)));
    padding: 0;
    margin: 0;
    max-height: none;
}

.info-links .footer-nav a {
    font-family: var(--font2);
    font-size: max(12px, calc(0.83vw * var(--scale)));
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.info-links .footer-nav a:hover {
    opacity: 1;
}

/* ── Bottom bar ── */
.info-bottom {
    position: absolute;
    z-index: 1;
    bottom: max(40px, calc(2.8vw * var(--scale)));
    left: max(40px, calc(2.8vw * var(--scale)));
    right: max(40px, calc(2.8vw * var(--scale)));
    display: flex;
    justify-content: space-between;
    font-family: var(--font2);
    font-size: max(12px, calc(0.83vw * var(--scale)));
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.info-bottom a {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.info-bottom a:hover {
    opacity: 0.7;
}


@media (max-width: 991px) {
    .footer-section {
        height: auto !important;
        min-height: 100vh;
    }

    .info-brand {
        padding-top: 8vh;
    }

    .info-panel {
        padding: max(24px, calc(1.67vw * var(--scale)));
        min-height: 100vh;
    }
}