/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  padding: var(--sp-7) 0;
}

.contact-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  border: 1px solid var(--border-hi);
}

.contact-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(139,92,246,0.35), transparent 60%),
              radial-gradient(ellipse at 20% 0%, rgba(34,211,238,0.2), transparent 55%),
              radial-gradient(ellipse at 80% 0%, rgba(236,72,153,0.2), transparent 55%),
              var(--deep-2);
  z-index: -1;
}

.contact-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: screen;
  z-index: -1;
  pointer-events: none;
}

.contact-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 760px;
  margin: 0 auto var(--sp-4);
}

.contact-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.contact-actions .btn { padding: 1rem 2rem; font-size: 1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.footer-copy { font-size: 0.85rem; color: var(--ink-faint); }
.footer-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.footer-social a:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-3px); }
.footer-social svg { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .footer-inner { flex-direction: column; text-align: center; }
}