/* ============================================================================
   chrome.css — то, что повторяется на каждой странице: футер и модалка заявки.
   Подключается и лендингом, и внутренними страницами.
   ========================================================================== */

@layer sections {
  /* =========================================================== 16 · Футер */
  .site-footer {
    padding-block: clamp(40px, 5vw, 72px) clamp(20px, 2vw, 32px);
    background: var(--ink);
    color: #fff;
  }

  .site-footer__card {
    padding: clamp(28px, 3.4vw, 48px);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--r-xl);
    background: var(--ink-2);
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: clamp(28px, 4vw, 56px);
  }

  @media (width < 900px) {
    .site-footer__top {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .site-footer__brand {
    display: grid;
    gap: 12px;
    align-content: start;
  }

  .site-footer__brand .logo {
    color: #fff;
  }

  .site-footer__title {
    font: 400 clamp(20px, 2vw, 26px) / 1.2 var(--font-sans);
    letter-spacing: -0.015em;
  }

  .site-footer__text {
    max-width: 38ch;
    font: 400 var(--fs-caption) / 1.6 var(--font-sans);
    color: rgb(255 255 255 / 0.55);
  }

  .subscribe {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-on-dark);
  }

  .subscribe__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: 400 var(--fs-body) / 1.4 var(--font-sans);
    color: #fff;
  }

  .subscribe__input::placeholder {
    color: rgb(255 255 255 / 0.4);
  }

  .subscribe__input:focus {
    outline: none;
  }

  .subscribe__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    cursor: pointer;
    transition: scale var(--dur-fast) ease;
  }

  .subscribe__btn:hover {
    scale: 1.06;
  }

  .subscribe__btn svg {
    width: 18px;
    height: 18px;
  }

  .subscribe__msg {
    position: absolute;
    inset: 100% 0 auto;
    margin-top: 8px;
    font: 400 var(--fs-caption) / 1.4 var(--font-sans);
    color: var(--accent);
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: clamp(20px, 2.4vw, 32px);
  }

  .site-footer__col-title {
    margin-bottom: 14px;
    font: 400 var(--fs-label) / 1 var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.4);
  }

  .site-footer__col ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 400 var(--fs-caption) / 1.4 var(--font-sans);
    color: rgb(255 255 255 / 0.7);
  }

  .site-footer__col a:hover {
    color: var(--accent);
  }

  .site-footer__contacts {
    margin-top: 16px;
  }

  .site-footer__social {
    display: flex !important;
    gap: 8px;
    margin-top: 16px !important;
  }

  .site-footer__social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-on-dark);
    border-radius: 50%;
    font-size: var(--fs-small);
  }

  .site-footer__social a:hover {
    background: rgb(255 255 255 / 0.08);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(28px, 3vw, 40px);
    padding-top: clamp(18px, 2vw, 24px);
    border-top: 1px solid var(--line-on-dark);
    font: 400 var(--fs-caption) / 1.4 var(--font-sans);
    color: rgb(255 255 255 / 0.45);
  }

  .site-footer__legal {
    display: flex;
    gap: 18px;
  }

  /* ==================================================== Модалка «Разбор» */
  .modal {
    width: min(720px, 100% - 2 * var(--gutter));
    max-height: min(880px, 92svh);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
    color: var(--ink);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .modal::backdrop {
    background: rgb(10 10 10 / 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .modal__inner {
    padding: clamp(22px, 2.6vw, 34px);
  }

  .modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(18px, 2vw, 26px);
  }

  .modal__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--dur-fast) ease;
  }

  .modal__close:hover {
    background: var(--bg);
  }

  .modal__close svg {
    width: 18px;
    height: 18px;
  }

  .modal__title {
    font: 400 clamp(24px, 2.6vw, 34px) / 1.15 var(--font-display);
    letter-spacing: -0.02em;
  }

  .modal__fields {
    display: grid;
    gap: 16px;
    margin-top: clamp(18px, 2vw, 26px);
  }

  .modal__submit {
    margin-top: 20px;
  }

  .modal__fallback {
    margin-top: 14px;
    font: 400 var(--fs-caption) / 1.5 var(--font-sans);
    color: var(--ink-muted);
  }

  .modal__fallback a {
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .modal__done {
    display: grid;
    gap: 14px;
    justify-items: start;
  }

  .modal__text {
    font: 400 var(--fs-lead) / 1.6 var(--font-sans);
    color: var(--ink-body);
  }
}