@layer components {
  .site-footer {
    padding-block: var(--sp-64) var(--sp-32);
    overflow: hidden;
    background: var(--surface-primary);
  }

  .site-footer__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-24);
    padding-block-end: var(--sp-24);
  }

  .site-footer__brand {
    display: flex;
    flex: 0 0 282px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-24);
    width: 282px;
    overflow: hidden;
  }

  .site-footer__brand-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-12);
    width: 100%;
    padding-inline: var(--sp-12);
  }

  .site-footer__logo {
    display: block;
    width: 194.286px;
    height: 40px;
    color: var(--label-primary);
    text-decoration: none;
  }

  .site-footer__logo svg {
    width: 100%;
    height: 100%;
  }

  .site-footer__about {
    width: 100%;
    color: var(--label-quaternary);
    line-height: 16px;
    white-space: normal;
  }

  .site-footer__contacts,
  .site-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .site-footer__heading {
    width: 100%;
    height: 30px;
    margin: 0;
    padding: var(--sp-8) var(--sp-12);
    overflow: hidden;
    color: var(--label-quinary);
    line-height: 14px;
    white-space: nowrap;
  }

  .site-footer__contact-links,
  .site-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    list-style: none;
  }

  .site-footer__contact,
  .site-footer__links a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-height: 34px;
    padding: var(--sp-8) var(--sp-12);
    border-radius: var(--r-8);
    color: var(--label-secondary);
    font-size: var(--fs-subtitle-2);
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  }

  .site-footer__contact:hover,
  .site-footer__links a:hover {
    background: var(--surface-glass-2);
    color: var(--accent-primary);
  }

  .site-footer__cols {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-24);
    min-width: 0;
  }

  .site-footer__col--stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-16);
  }

  .site-footer__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-24);
    padding-block-start: var(--sp-16);
    box-shadow: inset 0 .5px 0 #bec1c74d;
  }

  .site-footer__legal {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--sp-16);
    list-style: none;
  }

  .site-footer__legal a,
  .site-footer__copy {
    color: var(--label-quinary);
    font-size: var(--fs-body-2);
    line-height: 1.43;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-footer__legal a:hover { color: var(--label-primary); }
  .site-footer__legal li { display: flex; line-height: 1.43; }

  @media (max-width: 900px) {
    .site-footer__inner {
      flex-direction: column;
      gap: var(--sp-24);
      width: 100%;
      max-width: 1200px;
      padding-inline: var(--sp-4);
    }

    .site-footer__brand { flex-basis: auto; }

    .site-footer__cols {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--sp-24);
      width: 100%;
    }

    .site-footer__links { gap: var(--sp-4); }

    .site-footer__bottom {
      width: 100%;
      max-width: 1200px;
      padding-inline: var(--sp-16);
    }
  }
}