---

<footer class="footer">
  <div class="container">
    <div class="footer__top">

      <div class="footer__brand">
        <a href="#" class="logo">
          <span class="logo__icon">▥</span>

          <span class="logo__text">
            <strong>МУЗЕЙ</strong>
            <small>истории и культуры</small>
          </span>
        </a>

        <p>
          Пространство, объединяющее историю,
          культуру и современный взгляд на наследие человечества.
        </p>

        <div class="footer__socials">
          <a href="#">VK</a>
          <a href="#">TG</a>
          <a href="#">YT</a>
        </div>
      </div>

      <div class="footer__column">
        <h3>Навигация</h3>

        <a href="#">Главная</a>
        <a href="#">Выставки</a>
        <a href="#">Экспонаты</a>
        <a href="#">О музее</a>
        <a href="#">Контакты</a>
      </div>

      <div class="footer__column">
        <h3>Посетителям</h3>

        <a href="#">Купить билет</a>
        <a href="#">Экскурсии</a>
        <a href="#">Новости</a>
        <a href="#">События</a>
        <a href="#">FAQ</a>
      </div>

      <div class="footer__column">
        <h3>Контакты</h3>

        <div class="footer__contact">
          <span>⌖</span>
          <p>г. Москва, ул. Примерная, 1</p>
        </div>

        <div class="footer__contact">
          <span>✆</span>
          <p>+7 (999) 123-45-67</p>
        </div>

        <div class="footer__contact">
          <span>✉</span>
          <p>museum@example.ru</p>
        </div>
      </div>

    </div>

    <div class="footer__bottom">
      <p>© 2026 Музей истории и культуры. Все права защищены.</p>

      <div class="footer__links">
        <a href="#">Политика конфиденциальности</a>
        <a href="#">Пользовательское соглашение</a>
      </div>
    </div>
  </div>
</footer>

/* FOOTER */

.footer {
  position: relative;
  overflow: hidden;
  padding: 90px 0 30px;
  background:
    radial-gradient(circle at top right, rgba(58, 134, 255, 0.16), transparent 30%),
    #05060a;
  border-top: 1px solid var(--border);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,0.015));
  pointer-events: none;
}

.footer__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--border);
}

.footer__brand p {
  max-width: 340px;
  margin: 24px 0 28px;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 15px;
}

.footer__socials {
  display: flex;
  gap: 14px;
}

.footer__socials a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: 0.25s;
  font-size: 14px;
  font-weight: 700;
}

.footer__socials a:hover {
  background: var(--gradient);
  border-color: transparent;
  transform: translateY(-3px);
}

.footer__column {
  display: flex;
  flex-direction: column;
}

.footer__column h3 {
  margin-bottom: 24px;
  font-size: 18px;
  font-family: Georgia, serif;
  font-weight: 400;
}

.footer__column a {
  margin-bottom: 16px;
  color: var(--text-secondary);
  transition: 0.2s;
  font-size: 15px;
}

.footer__column a:hover {
  color: white;
  transform: translateX(3px);
}

.footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.footer__contact span {
  color: var(--accent-blue);
  font-size: 18px;
}

.footer__contact p {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 15px;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
}

.footer__bottom p {
  color: #7f8699;
  font-size: 14px;
}

.footer__links {
  display: flex;
  gap: 28px;
}

.footer__links a {
  color: #7f8699;
  font-size: 14px;
  transition: 0.2s;
}

.footer__links a:hover {
  color: white;
}

/* FOOTER ADAPTIVE */

@media (max-width: 1050px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  .footer {
    padding: 70px 0 24px;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer__links {
    flex-direction: column;
    gap: 14px;
  }
}