@charset "UTF-8";
/*
 * Общие стили всех страниц одним файлом: раньше это были base.css, header.css,
 * components.css и footer.css — четыре блокирующих отрисовку запроса.
 * Стили конкретной страницы лежат отдельно (body.css, vats.css и т. д.)
 * и подключаются после этого файла.
 */

/* ======================================================================= */
/* Базовый слой: шрифты, токены, сброс, типографика, утилиты, кнопки. */

/* Один семейный шрифт с весами вместо шести отдельных «семейств».
   Montserrat выбран основным, потому что покрывает и кириллицу, и
   азербайджанские Ə/ə, Ş/ş, İ, и знак маната ₼ — в Involve этих глифов нет,
   из-за чего азербайджанский текст рендерился вперемешку двумя шрифтами. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --black: #10131f;
  --blueBlack: #224382;
  --blueBlack1: #193170;
  --blueBlack2: #1163c8;
  --blueBlack3: #063e82;
  --blueBlack4: #1d325b;
  --silver1: #ecf4ff;
  --backg: #f6fbff;
  --backg-blue: rgba(75, 97, 154, 0.3);
  --ink-muted: #4d5b7c;
  --line: rgba(45, 43, 114, 0.18);
  --accent: #1163c8;
  --accent-dark: #0d4fa3;
  --shadow: 0 6px 24px rgba(12, 29, 112, 0.1);
  --radius: 18px;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Ни один блок не должен расширять страницу вбок. На мобильных широкая
   таблица тарифов растягивала layout viewport, и закреплённая внизу панель
   действий уезжала за край экрана. clip (в отличие от hidden) не создаёт
   контейнер прокрутки и не ломает position: sticky. */
html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--backg);
  color: var(--black);
  font-family: var(--font);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--blueBlack1);
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.6rem); }

p { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

img,
picture,
svg {
  max-width: 100%;
}

img {
  height: auto;
  object-fit: contain;
}

ul, ol { list-style: none; margin: 0; padding: 0; }

/* Списки внутри содержательного текста маркеры сохраняют. */
.prose ul { list-style: disc; padding-left: 1.4rem; }
.prose ol { list-style: decimal; padding-left: 1.4rem; }

.wraper {
  width: min(92vw, 1400px);
  margin-inline: auto;
}

.section-title {
  text-align: center;
  margin: 0 0 clamp(1.5rem, 3vw, 3rem);
  color: var(--blueBlack3);
}

/* Ссылка для клавиатурной навигации: видна только при фокусе. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--blueBlack1);
  color: var(--white);
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* --- Кнопки ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.85em 2em;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--accent);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--accent);
  color: var(--white);
}
.btn--sm { padding: 0.5em 1.4em; font-size: 0.95em; }
.btn--full { width: 100%; }

/* --- Утилиты раскладки (используются в существующей разметке) ----------- */
.flex { display: flex; }
.justySpBet { justify-content: space-between; }
.justySpAro { justify-content: space-around; }
.justyCent { justify-content: center; }
.jusrySpEven { justify-content: space-evenly; }
.alignAtemCen { align-items: center; }
.alignAemStr { align-items: stretch; }
.flDirColum { flex-direction: column; }
.flWrap { flex-wrap: wrap; }
.noFlWrap { flex-wrap: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Видно только скринридерам (легенды форм, служебные подписи). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ======================================================================= */
/* Шапка: бренд, адаптивное меню с кнопкой-бургером, переключатель языка. */

.site-header {
  padding: 1rem 0;
  background: var(--backg);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.header__brand { display: inline-flex; }
.header__brand:hover { text-decoration: none; }

.logo {
  width: clamp(64px, 7vw, 130px);
  height: auto;
}

/* Отступы меньше, чем были до пункта «Отрасли»: с семью пунктами русское меню
   на ширине 1280px не помещалось рядом с логотипом и уходило на вторую строку. */
.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 2.5rem);
  flex-wrap: wrap;
}

.header__menu {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.1vw, 2.2rem);
  flex-wrap: wrap;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.15rem);
}

.header__menu a {
  color: var(--blueBlack);
  font-weight: 500;
}

.header__menu a[aria-current="page"] {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.header__menu-cta a { color: var(--white); }

.header__lang {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 600;
  color: var(--ink-muted);
}
.header__lang li + li::before {
  content: "|";
  margin-right: 0.5rem;
  color: var(--line);
}
.header__lang [aria-current="true"] { color: var(--blueBlack1); }

/* Бургер показывается только на узких экранах. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--blueBlack1);
  content: "";
  transition: transform 0.2s ease;
}
.nav-toggle__bar::before { transform: translateY(-6px); }
.nav-toggle__bar::after { transform: translateY(4px); }

/* На средней ширине меню стоит второй строкой под логотипом. Чуть меньший
   шрифт держит переключатель языка в той же строке, а не третьей. */
@media (min-width: 861px) and (max-width: 1180px) {
  .header__menu { font-size: 0.95rem; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .header__nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1rem;
  }
  .header__nav.is-open { display: flex; }

  .header__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    width: 100%;
  }
}

/* ======================================================================= */
/* Сквозные блоки: хлебные крошки, доверие, FAQ, форма заявки, липкая панель. */

/* --- Хлебные крошки ---------------------------------------------------- */
.breadcrumbs {
  padding: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--line);
}
.breadcrumbs a { color: var(--ink-muted); }
.breadcrumbs [aria-current="page"] { color: var(--blueBlack1); font-weight: 600; }

/* --- Блок доверия ------------------------------------------------------ */
.trust {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background: var(--silver1);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
}
.trust__card {
  padding: clamp(1.2rem, 2vw, 2rem);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.trust__card h3 { margin: 0 0 0.6rem; color: var(--blueBlack3); }
.trust__card p { margin: 0; color: var(--ink-muted); font-size: 0.98rem; }

/* --- Частые вопросы ---------------------------------------------------- */
.faq { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.faq__list {
  display: grid;
  gap: 0.8rem;
  max-width: 900px;
  margin-inline: auto;
}
.faq__item {
  padding: 1rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--blueBlack1);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: 1.4em;
  line-height: 1;
  color: var(--accent);
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { margin: 0.8rem 0 0; color: var(--ink-muted); }

/* --- Форма заявки ------------------------------------------------------ */
.lead {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background: linear-gradient(135deg, #19264e, #1163c8);
  color: var(--white);
}
.lead__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.lead__title { color: var(--white); margin: 0 0 0.8rem; }
.lead__subtitle { margin: 0 0 2rem; color: #d8e4fb; }
.lead__direct { margin: 0 0 0.8rem; color: #d8e4fb; font-size: 0.95rem; }
.lead__direct-links { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.lead__direct-links .btn--ghost { border-color: var(--white); color: var(--white); }
.lead__direct-links .btn--ghost:hover,
.lead__direct-links .btn--ghost:focus-visible { background: var(--white); color: var(--blueBlack1); }

.lead__form {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--black);
}
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--blueBlack4);
}
.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--backg);
  color: var(--black);
  font: inherit;
  font-size: 1rem;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 99, 200, 0.18);
}
.field textarea { resize: vertical; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #d33; }
.field__error { margin: 0.35rem 0 0; color: #d33; font-size: 0.85rem; }

.lead__privacy { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--ink-muted); }
.lead__status {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.95rem;
}
.lead__status--ok { background: #e6f6ec; color: #1c6b3a; }
.lead__status--error { background: #fdecec; color: #a12020; }
.lead__interest {
  margin: 0 0 1.2rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: var(--silver1);
  color: var(--blueBlack4);
  font-size: 0.9rem;
}

/* Honeypot: скрыт от людей, но доступен ботам, которые его и заполняют. */
.lead__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Липкая панель действий (мобильные) -------------------------------- */
.sticky-cta { display: none; }

@media (max-width: 760px) {
  .sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: grid;
    /* minmax(0, …) обязателен: обычный 1fr не даёт колонке стать уже своего
       min-content, и длинная надпись на кнопке растягивала панель за экран. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 1px;
    background: var(--line);
    box-shadow: 0 -4px 16px rgba(12, 29, 112, 0.15);
  }
  .sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.8rem 0.4rem;
    background: var(--white);
    color: var(--blueBlack1);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .sticky-cta a:hover { text-decoration: none; }
  .sticky-cta__primary { background: var(--accent) !important; color: var(--white) !important; }
}

/* --- 404 --------------------------------------------------------------- */
.error-page {
  padding: clamp(3rem, 8vw, 7rem) 0;
  text-align: center;
}
.error-page p { color: var(--ink-muted); }

/* --- Клиенты ------------------------------------------------------------ */
.clients { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.clients__note {
  max-width: 60ch;
  margin: -1rem auto clamp(1.5rem, 3vw, 2.5rem);
  color: var(--ink-muted);
  text-align: center;
}
.clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.5rem);
}
.clients__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  min-height: 6.5rem;
  padding: clamp(1.1rem, 2vw, 1.8rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.clients__name {
  margin: 0;
  color: var(--blueBlack1);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.clients__desc {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

/* --- Карточки тарифов ---------------------------------------------------
   Используются и на странице виртуальной АТС, и на странице цен,
   поэтому живут в общем слое, а не в vats.css. */
.vats-price__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Выделенный тариф помогает выбрать и повышает конверсию среднего плана. */
.price-card--featured {
  border-color: var(--accent);
  box-shadow: 0 10px 34px rgba(17, 99, 200, 0.22);
}
.price-card__badge {
  align-self: flex-start;
  margin: -0.4rem 0 0.8rem;
  padding: 0.3em 1em;
  background: var(--accent);
  border-radius: 999px;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
}
.price-card__header { margin-bottom: 1.2rem; }
.price-card__header h3 { margin: 0 0 0.4rem; }
.price-card__price { margin: 0; color: var(--blueBlack1); }
.price-card__price strong { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.4rem); }
.price-card__price span { color: var(--ink-muted); font-size: 0.95rem; }

/* Кому подходит тариф — снимает главный вопрос «а мой ли это вариант». */
.price-card__audience {
  margin: 0 0 1rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

/* Выгода годовой оплаты в деньгах, а не словами. */
.price-card__compare {
  display: grid;
  gap: 0.25rem;
  margin: 0.7rem 0 0;
  font-size: 0.86rem;
}
.price-card__monthly { color: var(--ink-muted); }
.price-card__saving {
  justify-self: start;
  padding: 0.25em 0.8em;
  background: #e6f6ec;
  border-radius: 999px;
  color: #1c6b3a;
  font-weight: 600;
}

.price-card__highlights {
  display: grid;
  gap: 0.6rem;
  margin: 1.4rem 0;
  font-size: 0.95rem;
}
.price-card__highlights li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--blueBlack4);
}
.price-card__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.95rem;
  height: 0.5rem;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.price-card__footer { margin-top: auto; }

/* ======================================================================= */
/* Подвал: колонки со ссылками, контактами и мессенджерами. */

.site-footer {
  margin-top: clamp(2.5rem, 6vw, 6rem);
  background-color: #19264e;
  color: var(--white);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
}

.footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(1.5rem, 3vw, 3rem);
}

.footer__brand {
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer__city { color: #b9c6e4; margin: 0.5rem 0 0; }

.footer__title {
  margin: 0 0 0.9rem;
  color: #b9c6e4;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer__col ul { display: grid; gap: 0.6rem; }
.footer__col a { color: var(--white); }
.footer__col a:hover { color: #9ec5ff; }

.footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 1.2rem;
}
.footer__social img {
  width: 24px;
  height: 24px;
}

.footer__legal {
  padding-bottom: clamp(4.5rem, 6vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.2rem;
  color: #b9c6e4;
}

/* На мобильных снизу висит панель действий — оставляем под неё место. */
@media (max-width: 760px) {
  .footer__legal { padding-bottom: 5.5rem; }
}