.footer { border-top: 1px solid var(--border); background: var(--bg-card); padding-top: 64px; } .footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; align-items: start; } .footer__brand { display: flex; flex-direction: column; gap: 12px; } .footer__logo { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--text); } .footer__brand p { font-size: 14px; color: var(--text-dim); line-height: 1.5; max-width: 260px; } .footer__status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green); } .footer__status-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse-glow 2s ease infinite; } .footer__links { display: contents; } .footer__col { display: flex; flex-direction: column; gap: 12px; } .footer__col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; } .footer__col a { font-size: 14px; color: var(--text-muted); transition: color 0.2s; } .footer__col a:hover { color: var(--text); } .footer__bottom { border-top: 1px solid var(--border); padding: 16px 0; } .footer__bottom .container { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-dim); } @media (max-width: 768px) { .footer__inner { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .footer__links { display: contents; } .footer__bottom .container { flex-direction: column; gap: 4px; text-align: center; } }