.site-footer {
  position: relative;

  border-top: 1px solid var(--border-subtle);

  background: rgba(5, 5, 5, 0.7);
}

.footer-main {
  display: grid;

  grid-template-columns:
    minmax(260px, 1.6fr)
    repeat(3, minmax(130px, 0.7fr));

  gap: var(--space-10);

  padding-block:
    var(--space-11)
    var(--space-10);
}

.footer-brand {
  max-width: 330px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-bottom: var(--space-5);

  color: var(--text-primary);

  font-size: 17px;
  font-weight: var(--weight-bold);

  letter-spacing: -0.035em;
}

.footer-logo-mark {
  display: grid;
  place-items: center;

  width: 22px;
  height: 22px;

  border: 1px solid var(--border-strong);
  border-radius: 7px;

  background: var(--surface-3);
}

.footer-logo-mark::before {
  width: 6px;
  height: 6px;

  border-radius: 2px;

  background: var(--text-primary);

  content: "";
}

.footer-description {
  color: var(--text-muted);

  font-size: var(--font-sm);
  line-height: var(--leading-relaxed);
}

.footer-status {
  display: inline-flex;
  align-items: center;

  gap: var(--space-2);

  margin-top: var(--space-6);

  padding:
    7px
    10px;

  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);

  background: var(--surface-1);

  color: var(--text-muted);

  font-size: 11px;
  font-weight: var(--weight-medium);
}

.footer-status-dot {
  width: 6px;
  height: 6px;

  border-radius: var(--radius-full);

  background: var(--status-online);

  box-shadow:
    0 0 10px
    rgba(143, 218, 155, 0.25);
}

.footer-column {
  min-width: 0;
}

.footer-heading {
  margin-bottom: var(--space-5);

  color: var(--text-secondary);

  font-size: 11px;
  font-weight: var(--weight-semibold);

  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.footer-links {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: var(--space-3);
}

.footer-link {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: var(--text-muted);

  font-size: var(--font-sm);

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.footer-link:hover {
  color: var(--text-primary);

  transform: translateX(2px);
}

.footer-link-external::after {
  content: "↗";

  color: var(--text-subtle);

  font-family: var(--font-mono);
  font-size: 10px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 74px;

  gap: var(--space-6);

  border-top: 1px solid var(--border-subtle);
}

.footer-copyright {
  color: var(--text-subtle);

  font-size: var(--font-xs);
}

.footer-bottom-links {
  display: flex;
  align-items: center;

  gap: var(--space-5);
}

.footer-bottom-link {
  color: var(--text-subtle);

  font-size: var(--font-xs);

  transition:
    color var(--transition-fast);
}

.footer-bottom-link:hover {
  color: var(--text-secondary);
}

.footer-version {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: var(--text-subtle);

  font-family: var(--font-mono);
  font-size: 10px;
}

.footer-version::before {
  width: 4px;
  height: 4px;

  border-radius: var(--radius-full);

  background: var(--border-strong);

  content: "";
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    max-width: none;

    grid-column:
      1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-main {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      var(--space-8)
      var(--space-6);
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;

    padding-block: var(--space-6);
  }

  .footer-bottom-links {
    flex-wrap: wrap;

    gap:
      var(--space-3)
      var(--space-5);
  }
}

@media (max-width: 380px) {
  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }
}