.site-footer {
    margin-top: var(--space-4xl); padding: var(--space-2xl) 0 var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: linear-gradient(to bottom, transparent, var(--color-surface) 120%);
}
/* 首頁 hero 撐滿視窗，footer 不需要額外留白 */
.site-footer.footer-flush { margin-top: 0; }

.footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-xl);
    padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border-subtle);
}
.footer-brand { display: flex; align-items: center; gap: var(--space-sm); }
.footer-logo {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    object-fit: contain; flex-shrink: 0; display: block;
}
.footer-name { font-size: 0.82rem; font-weight: var(--font-weight-semibold); }
.footer-sub { font-size: 0.65rem; color: var(--color-text-muted); letter-spacing: 0.06em; }
.footer-tagline { font-size: 0.76rem; line-height: 1.65; color: var(--color-text-muted); margin: var(--space-md) 0; max-width: 34ch; }
.footer-social { display: flex; gap: 6px; }
.footer-social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-md);
    color: var(--color-text-muted); border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}
.footer-social-btn:hover { color: var(--color-text); border-color: var(--color-text-muted); background: var(--color-surface-elevated); }
.footer-social-btn svg { width: 14px; height: 14px; }

.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col-title {
    font-size: 0.66rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px;
}
.footer-col a { font-size: 0.78rem; color: var(--color-text-secondary); transition: color var(--transition-fast); width: fit-content; }
.footer-col a:hover { color: var(--color-accent); }

.footer-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    padding-top: var(--space-md); flex-wrap: wrap;
}
.footer-copy { font-size: 0.68rem; color: var(--color-text-muted); }
.footer-credits { font-size: 0.66rem; color: var(--color-text-muted); opacity: 0.8; }

@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}