/* ════ FOOTER ════ */
footer{background:#0A1628;color:rgba(255,255,255,.65); overflow: hidden;}
.footer-top{padding:60px 0 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.1fr;gap:40px}
.f-brand{font-family:'Roboto',sans-serif;font-size:22px;font-weight:900;color:#fff;margin-bottom:10px;}
.f-brand em{color:var(--gold);font-style:normal}
.f-tagline{font-size:13px;color:rgb(255, 255, 255);line-height:1.85;margin-bottom:18px;max-width:280px}
.f-sub-brands{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.f-sub{font-size:10px;font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);padding:3px 9px;border-radius:4px;letter-spacing:.3px}
.f-social{display:flex;gap:9px}
.f-social a{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,255,255,.55);transition:var(--trans)}
.f-social a:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
footer h4{font-family:'Roboto',sans-serif;font-size:15px;font-weight:700;color:rgb(255, 255, 255);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:18px}
footer ul{display:flex;flex-direction:column;gap:9px}
footer ul a{font-size:13px;color:rgba(255, 255, 255, 0.948);transition:var(--trans)}
footer ul a:hover{color:var(--gold);padding-left:4px}
.footer-bottom{border-top:1px solid rgba(255, 255, 255, 0.953);padding:20px 0}
.footer-bottom-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-bottom p,.footer-bottom a{font-size:12px;color:rgba(255, 255, 255, 0.868)}
.footer-bottom a:hover{color:rgba(255,255,255,.6)}
.footer-cert{display:flex;gap:12px;align-items:center}

footer {
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("background/felix-mittermeier-milky-way-2695569.jpg") center / cover no-repeat;

    opacity: 0.2;

    z-index: 0;
}

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


/* ════ RESPONSIVE ════ */
@media(max-width:960px) {
     .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media(max-width:640px) {
     .footer-grid {
        grid-template-columns: 1fr;
    }

    .f-brand{
        width: 350px;
        padding-bottom: 20px;
    }

}