/* ChromaShift — footer condiviso da tutte le pagine
   Usa le variabili del tema (--accent, --accent-rgb, --border, --text, --muted, --mono),
   quindi segue il colore del preset attivo. Classi con prefisso csf- per non
   confliggere con gli stili delle singole pagine. */

.csf-footer, .csf-footer *, .csf-footer *::before, .csf-footer *::after { box-sizing: border-box; }

.csf-footer {
  position: relative;
  padding: 70px 0 26px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.008), transparent 70%);
  overflow: hidden;
}
.csf-footer::before {
  content: "";
  position: absolute;
  width: 420px; height: 220px;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb), .12), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.csf-footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.csf-footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 55px; }

.csf-footer-brand { max-width: 330px; }
.csf-footer-logo { display: flex; align-items: center; gap: 9px; width: fit-content; margin-bottom: 18px; font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.csf-footer-logo-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: csf-footer-pulse 2s ease-in-out infinite; }
@keyframes csf-footer-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--accent); }
  50%      { box-shadow: 0 0 18px var(--accent), 0 0 30px rgba(var(--accent-rgb), .33); }
}
.csf-footer-description { color: var(--muted); font-size: .88rem; line-height: 1.7; margin: 0 0 22px; }

.csf-footer-column { display: flex; flex-direction: column; align-items: flex-start; }
.csf-footer-column-title { margin-bottom: 18px; color: var(--text); font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.csf-footer-column a { position: relative; margin-bottom: 11px; color: var(--muted); font-size: .82rem; text-decoration: none; transition: color .2s ease, transform .2s ease; }
.csf-footer-column a:hover { color: var(--accent); transform: translateX(3px); }
.csf-footer-external { margin-left: 3px; font-family: var(--mono); font-size: .7rem; opacity: .6; }

.csf-footer-divider { height: 1px; background: var(--border); margin-bottom: 22px; }
.csf-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .78rem; }
.csf-footer-bottom-left { display: flex; align-items: center; gap: 12px; }
.csf-footer-bottom a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.csf-footer-bottom a:hover { color: var(--accent); }

@media (max-width: 800px) {
  .csf-footer-top { grid-template-columns: 1fr 1fr; gap: 42px 30px; }
  .csf-footer-brand { grid-column: 1 / -1; max-width: 500px; }
}
@media (max-width: 600px) {
  .csf-footer { padding: 50px 0 22px; }
  .csf-footer-inner { padding: 0 16px; }
  .csf-footer-top { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
  .csf-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 400px) {
  .csf-footer-top { grid-template-columns: 1fr; }
  .csf-footer-brand { grid-column: auto; }
}