/* =====================================================
   CiroX Landing — Footer
   ===================================================== */

.footer {
  padding: var(--space-10) 0 var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: rgba(4, 6, 12, 0.8);
  position: relative;
  z-index: var(--z-base);
}
.footer-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.footer-brand { max-width: 280px; }
.footer-logo-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.footer-brand .brand-logo-img { height: 32px; }
.footer-brand p { font-size: var(--text-sm); color: var(--text-subtle); line-height: 1.6; }

.footer-links { display: flex; gap: var(--space-10); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col h4 { font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); margin-bottom: var(--space-1); }
.footer-col a { font-size: var(--text-sm); color: var(--text-subtle); transition: color var(--dur-quick) var(--ease-quick); }
.footer-col a:hover { color: var(--volt-cyan-bright); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs); color: var(--text-subtle);
}
.footer-made-with { display: flex; align-items: center; gap: 6px; }
.footer-made-with .status-dot-active { width: 6px; height: 6px; }

@media (max-width: 768px) {
  .footer-row { flex-direction: column; }
  .footer-links { gap: var(--space-6); }
  .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }
}