/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  border-top:1px solid var(--line);
  padding:76px 0 30px;
  background:var(--surface);
  position:relative;
  z-index:1;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 0.8fr 0.8fr 1.2fr;
  gap:40px;
  margin-bottom:56px;
}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:44px;}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

.ft-brand .logo{margin-bottom:6px;}
.ft-brand p{font-size:14px;margin:8px 0 18px;max-width:280px;}
.ft-socials{display:flex;gap:10px;}
.ft-socials a{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  transition:all .2s ease;font-size:12px;letter-spacing:.02em;
}
.ft-socials a:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px);}

.ft-links h4{font-family:var(--font-mono);font-size:12.5px;color:var(--text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px;}
.ft-links ul{list-style:none;display:flex;flex-direction:column;gap:13px;}
.ft-links a{font-size:14px;color:var(--muted);transition:color .2s;}
.ft-links a:hover{color:var(--teal);}

.ft-contact h4{font-family:var(--font-mono);font-size:12.5px;color:var(--text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px;}
.ft-contact p{font-size:14px;margin-bottom:14px;}
.ft-contact a{color:var(--text);}
.ft-contact a:hover{color:var(--teal);}
.ft-contact .btn{margin-top:10px;}

.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:24px;
}
.footer-bottom .ft-tag{font-family:var(--font-mono);font-size:12px;}