.app-footer {
    margin-top: auto;
    background-color: #0F172A;
    color: #94A3B8;
    font-size: var(--ac-fs-sm);
}

.app-footer::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #0D6EFD 0%, #38BDF8 50%, #0F172A 100%);
}

.app-footer-inner {
    padding-inline: var(--ac-page-gutter);
}

.app-footer a {
    color: #94A3B8;
    text-decoration: none;
    transition: color .15s ease;
}
.app-footer a:hover,
.app-footer a:focus {
    color: #FFFFFF;
}

.footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
    padding-block: 1.25rem;
}

.footer-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    min-width: 0;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #F8FAFC;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.3px;
    white-space: nowrap;
}
.footer-brand-icon {
    color: #0D6EFD;
    font-size: 1.15rem;
}

.footer-lead {
    max-width: 62ch;
}

.footer-aside {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.footer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.footer-chip {
    display: inline-block;
    padding: .15rem .55rem;
    border: 1px solid #334155;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .03);
    color: #CBD5E1;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.app-footer .footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #CBD5E1;
    transition: all .15s ease;
}
.app-footer .footer-social:hover {
    background-color: #1E293B;
    border-color: #475569;
    color: #FFFFFF;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    padding-block: .75rem;
    border-top: 1px solid #1E293B;
    font-size: var(--ac-fs-xs);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

.footer-meta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: .1rem .5rem;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #CBD5E1;
    font-family: var(--ac-font-mono);
    font-size: .6875rem;
}