/* ========================================
   FOOTER (hidden on mobile)
   ======================================== */
#footer{display:none}

/* ========================================
   TABLET (>= 768px) — show footer
   ======================================== */
@media (min-width: 768px){
#footer{display:block;margin-top:3rem;padding:3rem var(--site-gutter) 2rem;background:linear-gradient(8deg,#5BC4F1 4%,#57C2F0 23%,#4ABDEE 42%,#35B4EB 63%,#17A8E6 83%,#009de0 96%);color:var(--color-surface)}
#footer .inner{max-width:var(--site-max);margin:0 auto;display:grid;grid-template-columns:2fr repeat(4, 1fr);gap:3rem}
#footer .brand{display:flex;flex-direction:column}
#footer .copyright a{display:inline-flex;align-items:center}
#footer .copyright a img{display:block;height:3rem;width:auto}
#footer .brand p + p{font-size:0.875rem;line-height:1.55;color:rgba(255,255,255,0.7);max-width:22rem}
#footer .col{display:flex;flex-direction:column}
#footer .col-title{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.55);margin-bottom:0.875rem}
#footer .col-title ~ .col-title{margin-top:auto;padding-top:1.5rem}
#footer .col ul{display:flex;flex-direction:column;gap:0.5rem}
#footer .col a{font-size:0.875rem;color:rgba(255,255,255,0.85);transition:color .15s}
#footer .col a:hover{color:var(--color-primary)}
#footer .bottom{max-width:var(--site-max);margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.18);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:0.8125rem;color:rgba(255,255,255,0.55)}
#footer .copyright{display:flex;align-items:center;gap:1rem}
#footer .bottom ul{display:flex;gap:1.25rem;flex-wrap:wrap}
#footer .bottom a:hover{color:var(--color-primary)}
}

/* ========================================
   DESKTOP (>= 1024px)
   ======================================== */
@media (min-width: 1024px){
#footer .inner{grid-template-columns:2fr repeat(4, 1fr);gap:2.5rem}
}