:root {
  --footer-bg: #102f31;
  --footer-surface: #163a3b;
  --footer-text: #eef9f7;
  --footer-muted: #a8c4c2;
  --footer-line: rgba(255,255,255,.10);
  --footer-teal: #42cdbd;
}

footer {
  margin-top: 48px;
  padding: 58px 24px 24px;
  color: var(--footer-text);
  background: var(--footer-bg);
  position: relative;
  overflow: hidden;
}
footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 0%, rgba(66,205,189,.14), transparent 34%); pointer-events: none; }
footer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #0f9b8e, #42cdbd); }
.footer-content { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 42px; }
.footer-column { min-width: 0; }
.footer-column h4 { margin: 0 0 16px; color: #fff; font-size: .95rem; letter-spacing: .03em; }
.footer-column ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-column li { margin: 0; }
.footer-column a { color: var(--footer-muted); text-decoration: none; transition: color .2s ease, transform .2s ease; }
.footer-column a:hover { color: #fff; }
.footer-brand p { max-width: 330px; margin: 16px 0 0; color: var(--footer-muted); line-height: 1.7; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; font-size: 1.35rem; font-weight: 850; }
.footer-logo img { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; }

/* Keep the footer's social links in the normal left-side flow so floating
   support/chat controls never cover GitHub or portfolio links. */
.footer-bottom { position: relative; z-index: 1; max-width: 1180px; margin: 42px auto 0; padding-top: 20px; border-top: 1px solid var(--footer-line); display: flex; justify-content: flex-start; align-items: center; gap: 24px; }
.footer-bottom p { margin: 0; color: var(--footer-muted); font-size: .85rem; }
.social-media { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.social-media a { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 12px; color: #fff !important; background: var(--footer-surface); border: 1px solid var(--footer-line); text-decoration: none; transition: transform .2s ease, background .2s ease; }
.social-media a:hover { transform: translateY(-2px); background: #1d4b4c; }

@media (max-width: 850px) {
  .footer-content { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  footer { padding: 46px 18px 20px; }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }