.footer {

  position: relative;
  padding: var(--layout-footer-y) 0 var(--space-8);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);

}

/* Плавный переход светлого main → тёмный футер (над футером, не поверх контента) */
.footer::before {

  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 96px;
  background: var(--footer-transition);
  pointer-events: none;

}

.footer__top {

  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 8%, transparent);

}

/* Логотип в футере */
.footer .header__logo--footer {

  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;

}

.footer .header__logo--footer .header__logo-mark {

  grid-column: 1;
  grid-row: 1;
  height: 44px;
  width: auto;

}

.footer .header__logo--footer .header__logo-wordmark {

  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  font-size: 1.375rem;

}

.footer .header__logo--footer .header__logo-wordmark-primary {

  color: color-mix(in srgb, var(--color-light) 75%, transparent);

}

.footer .header__logo--footer .header__logo-wordmark-accent {

  color: var(--color-gold-light);
  text-shadow: 0 0 24px color-mix(in srgb, var(--color-gold) 35%, transparent);

}

.footer .header__logo-desc {

  grid-column: 1 / -1;
  grid-row: 2;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-text-inverse) 45%, transparent);

}

.footer__brand-desc {

  max-width: 280px;
  margin-top: 16px;
  margin-bottom: 24px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text-inverse) 45%, transparent);

}

.footer__socials {

  display: flex;
  gap: 10px;

}

.footer__social {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: color-mix(in srgb, var(--color-text-inverse) 50%, transparent);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-text-inverse) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);

}

.footer__social:hover {

  color: var(--color-gold);
  background: var(--color-gold-dim);
  border-color: var(--color-border-accent);

}

.footer__social svg {

  width: 16px;
  height: 16px;

}

/* Колонки */
.footer__contacts h4,
.footer__links h4,
.footer__contact h4 {
margin-bottom: 20px;
  
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-inverse) 30%, transparent);
}

.footer__contact-item {
display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  
  color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 4%, transparent);
  transition: color var(--transition-fast);
}

.footer__contact-item:last-child {

  border-bottom: none;

}

a.footer__contact-item:hover {

  color: var(--color-text-inverse);

}

.footer__contact-item svg {

  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: color-mix(in srgb, var(--color-text-inverse) 30%, transparent);

}

.footer__links {

  display: flex;
  flex-direction: column;

}

.footer__links a {
display: flex;
  align-items: center;
  padding: 8px 0;
  
  color: color-mix(in srgb, var(--color-text-inverse) 55%, transparent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 4%, transparent);
  transition: all var(--transition-fast);
}

.footer__links a:last-child {

  border-bottom: none;

}

.footer__links a:hover {

  padding-left: 8px;
  color: var(--color-text-inverse);

}

.footer__contact-btn {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  background: var(--color-gold);
  color: var(--color-surface-inverse);
  box-shadow: var(--shadow-gold);

}

.footer__contact-btn:hover {

  background: #C49840;
  color: var(--color-surface-inverse);

}

.legal-disclaimer-desktop {
  display: none;
}

.legal-disclaimer-mobile {
  display: block;
}

@media (min-width: 768px) {
  .legal-disclaimer-mobile {
    display: none;
  }

  .legal-disclaimer-desktop {
    display: block;
  }
}

.footer__offer-disclaimer {
  margin-bottom: 24px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
  font-size: 0.75rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text-inverse) 38%, transparent);
  max-width: 72ch;
}

@media (max-width: 767px) {
  .footer__offer-disclaimer {
    margin-bottom: 16px;
    padding-top: 14px;
    max-width: none;
    text-align: center;
  }

  .footer__offer-disclaimer .legal-disclaimer-mobile {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.35;
    color: color-mix(in srgb, var(--color-text-inverse) 42%, transparent);
  }
}

.footer__bottom {

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

}

.footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.footer__legal {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
}

.footer__legal-title {
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-inverse) 30%, transparent);
}

.footer__legal-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__legal-line {
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text-inverse) 50%, transparent);
}

.footer__bottom p,
.footer__bottom a,
.footer__bottom-links a {
color: color-mix(in srgb, var(--color-text-inverse) 45%, transparent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__bottom a:hover,
.footer__bottom-links a:hover {

  color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);

}



/* Tablet typography + polish (layout in responsive.css) */
@media (min-width: 768px) and (max-width: 1199px) {

  .footer .header__logo--footer .header__logo-wordmark {
    font-size: 1.25rem;
  }

  .footer .header__logo-desc {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .footer__brand-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  .footer__contacts h4,
  .footer__links h4,
  .footer__contact h4 {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
  }

  .footer__contact-item {
    font-size: 0.9375rem;
    gap: 12px;
  }

  .footer__contact-item svg {
    width: 16px;
    height: 16px;
  }

  .footer__links a {
    font-size: 0.875rem;
    padding: 9px 0;
  }

  .footer__contact p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .footer__contact-btn {
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
  }

  .footer__legal-title {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }

  .footer__legal-line {
    font-size: 0.8125rem;
  }

  .footer__offer-disclaimer {
    font-size: 0.6875rem;
  }

  .footer__bottom p,
  .footer__bottom a,
  .footer__bottom-links a {
    font-size: 0.8125rem;
  }

  @media (hover: none) {
    .footer__links a:hover {
      padding-left: 0;
    }
  }

}

@media (min-width: 1200px) {
  .footer .header__logo-desc { font-size: 11px; }
  .footer__brand-desc { font-size: 14px; }
  /* Колонки */
.footer__contacts h4,
.footer__links h4,
.footer__contact h4 { font-size: 11px; }
  .footer__contact-item { font-size: 14px; }
  .footer__links a { font-size: 14px; }
  .footer__legal-title { font-size: 11px; }
  .footer__legal-line { font-size: 13px; }
  .footer__offer-disclaimer { font-size: 12px; }
  .footer__bottom p,
.footer__bottom a,
.footer__bottom-links a { font-size: 13px; }
}