.footer {
  --footer-text: rgba(255, 255, 255, 0.92);
  --footer-link: rgba(255, 255, 255, 0.84);
  --footer-link-muted: rgba(255, 255, 255, 0.74);
  --footer-overlay-top: rgba(43, 111, 124, 0.62);
  --footer-overlay-middle: rgba(67, 124, 120, 0.18);
  --footer-overlay-bottom: rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
  padding: 104px 24px 34px;
  color: var(--footer-text);
  background: #06111f;
}

.footer__bg,
.footer__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.footer__bg {
  background:
    radial-gradient(circle at 16% 18%, rgba(112, 197, 243, 0.22), transparent 26%),
    radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.10), transparent 18%),
    url("./img_cards/planvip.963da518577c.png") center 42% / cover no-repeat;
  transform: scale(1.06);
  filter: saturate(0.88) contrast(0.92);
}

.footer__overlay {
  background:
    linear-gradient(180deg, var(--footer-overlay-top) 0%, var(--footer-overlay-middle) 42%, rgba(8, 18, 33, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 17, 31, 0.84) 0%, rgba(6, 17, 31, 0.58) 34%, rgba(6, 17, 31, 0.72) 100%);
}

.footer__container {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 38px 0 42px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col h4 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.footer__col a,
.footer__col p,
.footer__link-button {
  margin: 0;
  color: var(--footer-link);
  font-size: 0.98rem;
  line-height: 1.7;
  text-decoration: none;
  transition: color 0.22s ease, transform 0.22s ease;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer__social-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex: 0 0 auto;
}

.footer__social-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.footer__col a:hover,
.footer__link-button:hover {
  color: #ffffff;
  transform: translateX(2px);
}

.footer__link-button {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.footer__col--highlight {
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 48px rgba(3, 10, 21, 0.18);
}

.footer__col--highlight p {
  color: var(--footer-text);
}

.footer__description {
  color: var(--footer-text);
}


.footer__bottom {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--footer-link-muted);
  font-size: 0.92rem;
}

.footer__bottom span {
  margin-right: auto;
}

.footer__bottom a {
  color: var(--footer-link-muted);
  text-decoration: none;
  transition: color 0.22s ease;
}

.footer__bottom a:hover {
  color: #ffffff;
}

.footer--dashboard {
  padding-top: 84px;
}

.footer--dashboard .footer__bg {
  filter: saturate(0.76) contrast(0.88) brightness(0.88);
}

.footer--dashboard .footer__overlay {
  background:
    linear-gradient(180deg, rgba(30, 73, 92, 0.54) 0%, rgba(41, 90, 96, 0.18) 42%, rgba(8, 18, 33, 0.9) 100%),
    linear-gradient(90deg, rgba(6, 17, 31, 0.88) 0%, rgba(6, 17, 31, 0.62) 34%, rgba(6, 17, 31, 0.76) 100%);
}