/* Шрифт Onest — локально, вариативный (wght 100–900), два субсета из Google Fonts (v11).
   unicode-range позволяет браузеру грузить только нужный субсет; на странице используются оба.
   Файлы подключены также через <link rel="preload"> в index.html. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --infotec-black: #010007;
  --infotec-grey: #46485B;
  --vrubel: #253858;
  --vrubel-jr: #2F4770;
  --dowden: #A0C800;
  --white: #FDFEFF;
  --page: #F7F7F7;
  --panel: #F4F5F7;
  --info-bg: #ECEEF2;
  --text-muted: #64748B;
  --line: #D7DAE0;
  --news-text: #002C55;
  --blue: #0083CC;
  /* Страница «Демонстрация» (products.html): граница переключателя продуктов и граница карточки
     скриншота при наведении — оттенки из макета и прототипа, в других секциях не встречаются.
     --viewer-overlay и --text-disabled — затемнение и подпись в полноэкранном просмотре. */
  --switch-border: #DCE2EA;
  --line-hover: #B7C0CE;
  --viewer-overlay: rgba(0, 0, 0, .8);
  --text-disabled: #DDDEE0;
  --dark-hover: #2F4770;
  --dark-active: #1E304F;
  --green-hover: #95B80A;
  --green-active: #88A809;

  /* Страница тарифов (tariffs.html) — цвета и тени из её макета */
  --blue-hover: #0076B8;
  --blue-active: #006DAA;

  /* Цвета страницы тарифов — из макета */
  --lime: #BCE034;
  --lime-hover: #AFD42A;
  --lime-active: #A3C622;
  --lime-text: #8CAF00;
  --lime-tint: #F6FAE6;
  --heading: #243247;
  --subheading: #718096;
  --plan-title: #263A60;
  --plan-text: #66758E;
  --chip-saas: #1296DB;
  --chip-saas-bg: #E8F4FB;
  --chip-server: #5D9D2E;
  --chip-server-bg: #EEF7E4;
  --summary-bg: rgba(230, 243, 250, .5);
  --summary-custom-bg: rgba(246, 250, 230, .5);
  --summary-line: rgba(47, 71, 112, .1);
  --summary-custom-line: rgba(140, 175, 0, .2);
  --table-bg: #F1F9FF;
  --table-label-bg: #E8F5FE;
  --table-group-bg: #DBEBF7;
  --table-group-text: #142E54;
  --table-line: #D6E5F2;
  --table-head-line: rgba(230, 243, 250, .1);
  --table-row-light: #FBFEFF;
  --table-row-dark: #F4FAFF;
  --table-text: #1F334F;
  --table-note: #7F868F;
  --contact-name: #1C2E4D;
  --contact-position: #6E82A1;
  --contact-phone: #1F3B61;
  --contact-border: #D6E5F5;
  --contact-strong: #E0EFFB;
  --contact-soft: #ECF3F9;

  --shadow-card: 0 12px 28px rgba(27, 42, 70, .10);
  --shadow-table: 0 8px 26px rgba(20, 56, 97, .10);
  --shadow-contact: 0 4px 14px rgba(26, 51, 87, .06);
  /* Наведение на карточки тарифов и контактов: тень чуть плотнее и тонкая цветная рамка (в макете hover нет) */
  --shadow-card-hover: 0 16px 36px rgba(27, 42, 70, .16);
  --shadow-contact-hover: 0 8px 22px rgba(26, 51, 87, .12);
  --hover-ring: rgba(0, 131, 204, .35);
  --hover-ring-lime: rgba(140, 175, 0, .45);
  --shadow-button: 0 1px 3px rgba(10, 30, 184, .30);

  /* Раскладка: контейнер 1424px по центру (248px по бокам при 1920px), у hero — 1580px (170px).
     На узких экранах боковой отступ не меньше 32px, а контейнер сжимается. */
  --container: 1424px;
  --gutter: max(32px, calc((100% - var(--container)) / 2));
  --hero-gutter: max(32px, calc((100% - 1580px) / 2));
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page); }
/* Плавная прокрутка к якорям навигации (#ticketnet, #support, #tariffs…); при prefers-reduced-motion — мгновенная */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: "Onest", Arial, sans-serif;
  color: var(--vrubel);
}
button, a { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible,
.projects:focus-visible, .ticketnet:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
/* Skip-link «Перейти к содержимому» — первый элемент в <body>, ведёт на <main id="main">.
   Спрятан за верхним краем окна и появляется только при фокусе с клавиатуры (Tab). */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 10;
  padding: 12px 20px;
  border-radius: 0 0 16px 16px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-100%);
}
.skip-link:focus-visible {
  transform: none;
  outline-offset: -3px;
  outline-color: #fff;
}
/* <main tabindex="-1"> получает фокус после skip-link; сигнал для пользователя — сама прокрутка, обводка не нужна */
main:focus { outline: none; }
/* Текст только для скринридеров: заголовок <h1> страницы «Демонстрация» (в макете его нет, но он нужен
   для структуры документа). Не display: none — иначе скринридер его тоже пропустит. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* height: auto — чтобы атрибуты width/height у <img> задавали только пропорцию (резерв места до загрузки),
   а не фиксировали высоту при сжатии через max-width. */
img { display: block; max-width: 100%; height: auto; }

/* Секции идут потоком на всю ширину; высоты и внутренние размеры — из макета Figma 1920px.
   При ширине ≥1488px раскладка совпадает с макетом, ниже — см. адаптивные блоки в конце. */
.page {
  position: relative;
  width: 100%;
  background: var(--page);
}

.btn {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease, transform 80ms ease;
}
.btn img { pointer-events: none; }
.btn--ghost {
  height: 50px;
  padding: 12px 23px;
  border-radius: 16px;
  background: var(--white);
  color: var(--vrubel);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.btn--dark {
  min-height: 50px;
  padding: 12px 32px;
  border-radius: 16px;
  background: var(--vrubel);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  filter: drop-shadow(0 1px 1.5px rgba(10,30,184,.30));
}
.btn--green {
  min-height: 50px;
  padding: 12px 20px;
  border-radius: 16px;
  background: var(--dowden);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  box-shadow: 0 1px 3px rgba(149,184,10,.30);
}
.btn--ghost:hover { background: var(--panel); }
.btn--ghost:active { background: var(--info-bg); transform: translateY(1px); }
.btn--dark:hover { background: var(--dark-hover); }
.btn--dark:active { background: var(--dark-active); transform: translateY(1px); filter: none; }
.btn--green:hover { background: var(--green-hover); }
.btn--green:active { background: var(--green-active); transform: translateY(1px); box-shadow: none; }
.inline-arrow { width: 11px; height: 12px; margin-left: 16px; object-fit: contain; }
.inline-arrow--center { width: 16px; height: 16px; margin-left: 8px; object-fit: contain; }

/* HERO */
/* На десктопе hero занимает весь экран (100vh, а не макетные 1080px): картинка с object-fit: cover
   кропится под любую пропорцию окна без искажения. min-height — страховка для низких окон:
   шапка (120px) плюс заголовок, подзаголовок и бейдж (~410px) иначе не помещаются.
   Планшетный и мобильный блоки задают свою фиксированную высоту. */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: #E7E6E2;
}
.hero__bg {
  position: absolute;
  width: 108.61%;
  height: 107.77%;
  left: -6.98%;
  top: -1.44%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.50) 6.111%, rgba(255,255,255,0) 23.935%);
  pointer-events: none;
}
/* Шапка тянется на всю ширину, а отступы — через padding: так выпадающее меню (абсолютное, внутри шапки)
   занимает всю ширину страницы, а его внутренний отступ var(--hero-gutter) считается от той же ширины.
   z-index выше, чем у .hero__content, чтобы раскрытое меню лежало поверх заголовка. */
.hero__header {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  height: 98px;
  padding: 24px var(--hero-gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.hero__left {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 80px;
}
.logo-link { display: inline-flex; flex-shrink: 0; }
.logo { width: 173px; height: 20px; object-fit: contain; }
.hero__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 50px;
}
.nav-link {
  min-height: 40px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  color: #303030;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: 12px;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.nav-link:hover { background: rgba(236,238,242,.55); }
.nav-link:active { background: rgba(236,238,242,.85); transform: translateY(1px); }
/* Выпадающее меню шапки (TicketNet, Сервисы, О компании) — по составу как блок menu__collapsed на infotec.ru,
   по виду — как карточки лендинга: белая «плавающая» панель по сетке шапки (скругление 24px, мягкая
   тень), слева заголовок и колонки ссылок, справа акцентная карточка (синяя / тёмно-синяя / светло-серая у «О компании») с
   логотипом, описанием и круглой стрелкой. Раскрывается по :hover и :focus-within (клавиатура: Tab
   на ссылку-триггер, Esc закрывает — см. js/main.js). Ниже 1024px hover нет: панель открывает тап по
   триггеру (класс .is-open из js/main.js), раскладка в одну колонку — см. планшетный блок.
   Обёртка .menu__collapsed начинается сразу под ссылкой-триггером (top: 69px = 24px padding шапки +
   5px центровки в 50px строке + 40px ссылки) и прозрачна до низа шапки плюс 8px зазора — чтобы курсор
   на пути от ссылки к панели не выходил из .nav-dropdown и меню не закрывалось. */
.nav-dropdown { display: inline-flex; }
.nav-link--dropdown { position: relative; padding-right: 36px; }
.nav-link--dropdown::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease, margin-top 160ms ease;
}
.nav-dropdown:hover > .nav-link--dropdown,
.nav-dropdown:focus-within > .nav-link--dropdown { background: rgba(236,238,242,.55); }
.nav-dropdown:hover > .nav-link--dropdown::after,
.nav-dropdown:focus-within > .nav-link--dropdown::after { margin-top: -2px; transform: rotate(225deg); }
.menu__collapsed {
  position: absolute;
  left: var(--hero-gutter);
  right: var(--hero-gutter);
  top: 69px;
  padding-top: 37px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.nav-dropdown:hover .menu__collapsed,
.nav-dropdown:focus-within .menu__collapsed {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.menu__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(37,56,88,.16), 0 2px 8px rgba(37,56,88,.06);
}
.menu__main {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 8px;
}
.menu__title {
  margin: 0 0 28px;
  color: var(--vrubel);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 2.25rem;
}
.menu__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
}
.menu__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 160px;
}
/* Меню TicketNet: четыре колонки всегда в одну строку. При нехватке места первой ужимается последняя
   («Региональная билетная система») — её текст переносится на две строки, «билетная система» держит &nbsp; */
.menu__cols--nowrap { flex-wrap: nowrap; }
.menu__cols--nowrap .menu__col { flex-shrink: 0; }
.menu__cols--nowrap .menu__col:last-child { flex-shrink: 1; min-width: auto; }
.menu__item {
  --pad-x: 12px;
  display: inline-block;
  margin-left: calc(-1 * var(--pad-x));
  padding: 8px var(--pad-x);
  border-radius: 12px;
  color: var(--vrubel);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.menu__item span { color: var(--blue); }
.menu__item:hover { background: var(--panel); }
.menu__item:active { background: var(--info-bg); transform: translateY(1px); }
.menu__block {
  position: relative;
  flex: 0 0 435px;
  width: 435px;
  min-height: 260px;
  padding: 36px 36px 32px;
  border-radius: 20px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  transition: background-color 120ms ease, transform 80ms ease;
}
.menu__block--dark { background: var(--vrubel); }
.menu__block--light { background: var(--info-bg); color: var(--vrubel); } /* «О компании»: серая карточка с цветным логотипом, как на infotec.ru */
.menu__block:hover { background: #0076B8; }
.menu__block--dark:hover { background: var(--dark-hover); }
.menu__block--light:hover { background: #E2E5EA; }
.menu__block:active { transform: translateY(1px); }
.menu__logo { display: block; height: 32px; width: auto; margin: 0 0 24px; }
.menu__block--dark .menu__logo { height: 22px; }
.menu__block--light .menu__logo { height: 20px; } /* logo.svg 173×20 — как в шапке */
.menu__block--light .menu__text { color: var(--text-muted); }
.menu__brand { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; }
.menu__brand-mark { display: block; height: 32px; width: auto; }
.menu__brand-name { font-size: 1.375rem; font-weight: 700; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.menu__text {
  margin: 0;
  padding-right: 72px;
  color: rgba(255,255,255,.78);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.375rem;
}
.menu__text strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.menu__next {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.menu__next img { width: 24px; height: 24px; }
.menu__block:hover .menu__next { box-shadow: 0 4px 12px rgba(0,0,0,.18); transform: translateX(4px); }
.hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
}
.header-contact,
.header-language {
  height: 50px;
  border: 0;
  border-radius: 12px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: background-color 120ms ease, transform 80ms ease;
}
.header-contact {
  display: inline-flex;
  align-items: center;
  padding: 15px 36px;
  white-space: nowrap;
  text-decoration: none;
  background: #0083CC;
  color: #fff;
}
.header-contact:hover { background: #0076B8; }
.header-contact:active { background: #006DAA; transform: translateY(1px); }
.header-language {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: rgba(236,238,242,.60);
  color: #253858;
  text-decoration: none; /* ссылка на другую языковую версию */
}
.header-language:hover { background: rgba(236,238,242,.85); }
.header-language:active { background: #ECEEF2; transform: translateY(1px); }
/* Кнопка-бургер (44×44, белая, три полоски) — только ниже 1024px, где навигация свёрнута в панель
   (см. планшетный блок и [data-burger] в js/main.js); на десктопе скрыта. Открытое состояние —
   aria-expanded="true": полоски складываются в крестик. .header-contact--menu — дубль «Напишите нам»
   в конце навигации, виден только внутри панели бургера. */
.header-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  transition: background-color 120ms ease, transform 80ms ease;
}
.header-burger span {
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--vrubel);
  transition: transform 160ms ease, opacity 160ms ease;
}
.header-burger:hover { background: var(--panel); }
.header-burger:active { background: var(--info-bg); transform: translateY(1px); }
.header-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.header-contact--menu { display: none; }
.hero__content {
  position: absolute;
  z-index: 2;
  left: var(--hero-gutter);
  top: calc(50% + .5px);
  width: 666.692px;
  max-width: calc(100% - 2 * var(--hero-gutter));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}
.hero__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero h1 {
  margin: 0;
  color: var(--vrubel);
  font-size: 4.125rem;
  font-weight: 700;
  line-height: 5.322125rem;
  letter-spacing: -2.4204px;
}
.hero__subtitle {
  margin: 0;
  color: var(--vrubel);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 2.20675rem;
}
.hero__badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 36px;
  border: 1.5px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 16px rgba(155,164,169,.20);
}
.hero__badge-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
}
.hero__badge p {
  width: 362px;
  margin: 0;
  color: var(--blue);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6rem;
}
/* Английский текст бейджа (en/index.html) при 362px переносится на три строки — чуть шире */
.hero__badge p:lang(en) { width: 400px; }
/* Шапка без hero (faq.html): та же разметка .hero__header внутри <header class="hero hero--plain">, но без
   картинки и контента — высота складывается из шапки (98px), она стоит в потоке на фоне страницы.
   Выпадающие меню и панель бургера позиционируются от .hero__header и работают без изменений.
   Селекторы из двух классов перекрывают планшетные/мобильные правила .hero (height: 540px и т.п.),
   поэтому в медиа-блоках дублировать их не нужно. */
.hero.hero--plain { height: auto; min-height: 0; overflow: visible; background: var(--page); }
.hero.hero--plain::before { content: none; }
.hero--plain .hero__header { position: relative; }

/* PROJECTS */
.projects-section {
  position: relative;
  width: 100%;
  height: 868px;
  padding: 80px var(--gutter);
}
.projects {
  position: relative;
  width: 100%;
  height: 708px;
  padding: 60px 50px;
  border-radius: 36px;
  background: var(--panel);
  overflow: hidden;
}
/* Фон карточки: прозрачность 10% из макета уже запечена в альфа-канал файлов (экспорт Figma), в CSS opacity не задавать.
   На мобильном подставляется полная картинка (projects-bg-mobile.webp), на остальных — десктопный кроп. */
.projects__bg-picture { display: contents; }
.projects__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: bottom;
  pointer-events: none;
}
.projects > *:not(.projects__bg-picture) { position: relative; z-index: 1; }
.section-head {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-head h2 {
  margin: 0;
  color: var(--vrubel);
  font-size: 2rem;
  font-weight: 500;
  line-height: 3.625rem;
}
.projects__body {
  margin-top: 40px;
  width: 100%;
}
.projects__row {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  height: 460px;
}
.projects__metric {
  width: 435px;
  height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.projects__metric-top { width: 542px; }
.metric-number {
  margin: 0;
  width: 411px;
  color: var(--vrubel);
  font-size: 10.25rem;
  font-weight: 700;
  line-height: 10.625rem;
  letter-spacing: -4px;
}
.metric-copy {
  margin: 16px 0 0;
  width: 542px;
  color: var(--vrubel-jr);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.125rem;
}
/* Макетные 542px шире колонки (435px) и заходят под картинку слайда: русский текст переносится
   раньше, английский (en/index.html) — нет, поэтому для него ширина ограничена колонкой */
.metric-copy:lang(en) { width: 435px; }
/* Логотипы объектов: у каждого серая и цветная версии одного размера, цветная лежит поверх и
   проявляется у активного слайда (класс .is-active ставит JS карусели, см. [data-project-logo]).
   Логотипы не кликабельны — переключение только стрелками и точками пагинации. */
.brand-strip {
  width: 435px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.brand-strip__item {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  height: 44px;
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.brand-strip__item.is-active { transform: scale(1.08); }
.brand-strip__logo {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity 360ms ease;
}
.brand-strip__logo--color {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.brand-strip__item.is-active .brand-strip__logo { opacity: 0; }
.brand-strip__item.is-active .brand-strip__logo--color { opacity: 1; }
.projects__slide {
  position: relative;
  flex: 1 1 auto;
  height: 460px;
  border-radius: 24px;
  background: #CFCFCF;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y; /* свайп по горизонтали — см. attachSwipe в js/main.js */
}
.projects__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.projects__panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  will-change: opacity, transform;
}
.projects__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.projects__panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 42.94%);
  pointer-events: none;
}
/* Кроп из макета в процентах от слайда 809×460: при сужении картинка обрезается, а не растягивается. */
.projects__slide-image {
  position: absolute;
  z-index: 0;
  width: 113.562%;
  height: 107.064%;
  left: -3.762%;
  top: -9.724%;
  max-width: none;
  object-fit: cover;
}
.round-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}
.round-arrow { transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease; }
.round-arrow:hover { background: var(--panel); box-shadow: 0 2px 8px rgba(37,56,88,.12); }
.round-arrow:active { background: var(--info-bg); transform: scale(.94); box-shadow: none; }
.round-arrow img { width: 24px; height: 24px; }
.round-arrow--left { left: 40px; }
.round-arrow--right { right: 40px; }
/* Прижата к низу (в макете — top: 340px при однострочном заголовке): длинные названия
   и описания растут вверх, оставаясь внутри градиента .projects__panel::after.
   Ширина 640px — чтобы «ФК «Спартак» / Стадион «Открытие Арена»» (606px) и описание Эрмитажа (495px)
   шли в одну строку и подписи всех слайдов стояли на одной высоте; до стрелки справа остаётся 40px. */
.slide-copy {
  position: absolute;
  z-index: 2;
  left: 40px;
  bottom: 56px;
  width: 640px;
  max-width: calc(100% - 80px);
  color: #fff;
}
.slide-copy h3 {
  margin: 0 0 8px;
  max-width: 100%;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: normal;
}
.slide-copy p {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
}
/* Точки прижаты к правому краю центрированного блока 606px — так они стоят в макете. */
.projects-pagination {
  position: relative;
  width: 606px;
  height: 10px;
  margin: 20px auto 0;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}
.projects-pagination__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #D9D9D9;
  transition: background-color 220ms ease;
}
/* Зона нажатия 24px при видимой точке 10px, раскладку не меняет. */
.projects-pagination__dot::before {
  content: '';
  position: absolute;
  inset: -7px;
}
.projects-pagination__dot:hover { background: var(--text-muted); }
.projects-pagination__dot.is-active { background: var(--vrubel-jr); }

/* TICKETNET */
.ticketnet-section {
  position: relative;
  width: 100%;
  height: 821px;
  padding: 80px var(--gutter);
  background: var(--info-bg);
}
.ticketnet {
  width: 100%;
  height: 661px;
  padding: 60px 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-radius: 36px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.ticketnet > .round-arrow {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  margin: 0;
  flex: 0 0 48px;
}
.ticketnet__slides {
  position: relative;
  flex: 1 1 auto;
  height: 541px;
  overflow: hidden;
  touch-action: pan-y; /* свайп по горизонтали — см. attachSwipe в js/main.js */
}
.ticketnet__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity 320ms cubic-bezier(.22,1,.36,1), transform 320ms cubic-bezier(.22,1,.36,1), visibility 0s linear 320ms;
}
.ticketnet__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}
.ticketnet__copy {
  flex: 0 1 480px;
  width: 480px;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.ticketnet__copy-inner {
  width: 100%;
  min-height: 407px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.ticketnet__copy-inner--454 { width: 454px; min-height: 0; }
.ticketnet h2 {
  margin: 0;
  color: var(--vrubel);
  font-size: 3.375rem;
  font-weight: 500;
  line-height: 3.625rem;
}
.ticketnet p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.125rem;
}
.ticketnet__visual {
  position: relative;
  flex: 0 1 730px;
  width: 730px;
  min-width: 0;
  height: auto;
  aspect-ratio: 730 / 541;
  border-radius: 36px;
  overflow: hidden;
}
.ticketnet__visual--ticketnet {
  background: linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,.20)), #0083CC;
}
.ticketnet__visual--ticketnet > img {
  position: absolute;
  width: 159.726%;
  height: 121.257%;
  left: -70.959%;
  top: -15.712%;
  max-width: none;
  object-fit: fill;
  object-position: bottom;
}
.ticketnet__visual--constructor {
  border: 1px solid #000;
}
.ticketnet__visual--constructor > img {
  position: absolute;
  width: 100.10%;
  height: 100.94%;
  left: -0.10%;
  top: -0.41%;
  max-width: none;
}
.ticketnet__visual--equipment > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ticketnet__visual--features {
  background: var(--vrubel-jr);
  padding: 24px;
}
.ticketnet-features {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ticketnet-feature {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  color: #000;
}
.ticketnet-feature p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #000;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.25rem;
}
.ticketnet-feature--tight p { letter-spacing: -1px; }
.ticketnet-feature__art {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.ticketnet-feature__art img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
/* Позиции иллюстраций — в процентах от плитки 220.67×157.67 (макет), чтобы масштабироваться вместе с ней. */
.ticketnet-feature__art { height: auto; aspect-ratio: 1; }
.ticketnet-feature__art--1 { left: 61.18%; top: 45.03%; width: 56.19%; }
.ticketnet-feature__art--2 { left: 38.67%; top: 19.66%; width: 98.8%; display: grid; place-items: center; }
.ticketnet-feature__art--2 img { width: 70.76%; height: 70.76%; transform: rotate(-137.19deg); }
.ticketnet-feature__art--3 { left: 63.29%; top: 45.03%; width: 58.91%; }
.ticketnet-feature__art--4 { left: 61.18%; top: 45.25%; width: 56.19%; overflow: hidden; }
.ticketnet-feature__art--4 img { position: absolute; left: -8.9%; top: -5.94%; width: 111.15%; height: 111.15%; }
.ticketnet-feature__art--5 { left: 52.27%; top: 34.47%; width: 61.63%; }
.ticketnet-feature__art--6 { left: 37.91%; top: 23.68%; width: 79.76%; }
.ticketnet-feature__art--7 { left: 47.13%; top: 27.06%; width: 67.07%; overflow: hidden; }
.ticketnet-feature__art--7 img { position: absolute; left: -25.64%; top: -24.17%; width: 136.06%; height: 136.06%; }
.ticketnet-feature__art--8 { left: 53.63%; top: 32.13%; width: 69.79%; }
.ticketnet-feature__art--9 { left: 54.23%; top: 32.13%; width: 65.71%; }
@media (prefers-reduced-motion: reduce) {
  .ticketnet__slide { transition: none; }
  .projects__panel, .projects-pagination__dot, .brand-strip__item, .brand-strip__logo { transition: none; }
  .menu__collapsed { transition: none; }
  .faq-item__panel, .faq-item__answer, .faq-item__icon img { transition: none; }
}

/* INTERFACE */
.interface-section {
  position: relative;
  width: 100%;
  height: 988px;
  padding: 80px var(--gutter);
}
.interface-card {
  width: 100%;
  height: 828px;
  padding-bottom: 80px;
  border-radius: 36px;
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.interface-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 1424 / 568;
  margin-bottom: -24px;
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.interface-visual img {
  position: absolute;
  width: 104.9%;
  height: 109.74%;
  left: .01%;
  top: -3.63%;
  max-width: none;
  object-fit: fill;
}
.interface-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #F4F5F7 1.937%, rgba(255,255,255,0) 13.116%);
  pointer-events: none;
}
.interface-copy {
  position: relative;
  z-index: 3;
  width: min(860px, 100%);
  text-align: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  overflow: visible;
}
.interface-copy h2 {
  position: relative;
  z-index: 4;
  margin: 0;
  color: var(--vrubel);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 4rem;
}
.interface-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.125rem;
}
.interface-card .btn { position: relative; z-index: 3; margin-top: 48px; width: 269px; }

/* TARIFFS */
.tariffs-section {
  position: relative;
  width: 100%;
  height: 543px;
  padding: 80px var(--gutter);
  background: var(--info-bg);
}
.tariffs-card {
  position: relative;
  width: 100%;
  height: 383px;
  padding-left: clamp(80px, 25.86% - 168.3px, 200px); /* 200px при ширине карточки 1424px, 80px при 960px */
  border-radius: 36px;
  overflow: hidden;
  background: #D9E0E6;
}
/* Картинка экспортирована сжатой по горизонтали, поэтому её бокс держит пропорцию 1449.84×405
   (object-fit: fill); бокс масштабируется вместе с карточкой и прижат к правому краю. */
.tariffs-visual {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% + 26px);
  height: auto;
  aspect-ratio: 1449.84 / 405;
  background: linear-gradient(-90deg, rgb(217,224,230) 42.787%, rgba(217,224,230,0) 100%);
}
.tariffs-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: bottom;
}
.tariffs-copy {
  position: relative;
  z-index: 1;
  width: min(554px, 100%);
  height: 100%;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
.tariffs-copy h2 {
  margin: 0;
  color: var(--vrubel);
  font-size: 3.375rem;
  font-weight: 500;
  line-height: 3.625rem;
}
.tariffs-copy .btn { width: 269px; height: 60px; font-size: 1rem; }

/* PROCESS */
.process-section {
  position: relative;
  width: 100%;
  height: 810px;
  padding: 80px var(--gutter);
}
.process {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.process-copy { width: 100%; text-align: center; }
.process-copy h2 {
  margin: 0 0 20px;
  color: var(--vrubel);
  font-size: 3.375rem;
  font-weight: 500;
  line-height: 4rem;
}
.process-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.25rem;
}
.process-rail { width: 100%; }
/* Отступы 43px и промежутки 32px из макета в процентах (от 1424px и от content-box 1338px соответственно),
   чтобы карточки совпадали с точками process-rail.svg на любой ширине. */
.process-cards {
  width: 100%;
  padding: 0 3.02%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2.392%;
}
.process-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 242px;
  height: auto;
  aspect-ratio: 242 / 390;
  padding: 24px;
  border-radius: 24px;
  overflow: hidden;
  background: #D9D9D9;
  color: rgba(255,255,255,.90);
}
.process-card__bg {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.process-card:nth-child(1) .process-card__bg { width: 231.09%; height: 136.97%; left: -65.36%; top: .11%; }
.process-card:nth-child(2) .process-card__bg { width: 211.17%; height: 123.91%; left: -55.33%; top: .01%; }
.process-card:nth-child(3) .process-card__bg { width: 233.58%; height: 150.6%; left: -66.91%; top: -7.15%; }
.process-card:nth-child(4) .process-card__bg { width: 100.09%; height: 100.01%; left: -.11%; top: 0; }
.process-card:nth-child(5) .process-card__bg { inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: bottom; }
.process-card__num {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255,255,255,.60);
  font-size: 4rem;
  font-weight: 400;
  line-height: 4rem;
}
.process-card h3 {
  position: relative;
  z-index: 1;
  margin: 6px 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375rem;
}
.process-rail-graphic {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 12px;
}

/* SUPPORT */
.support-section {
  position: relative;
  width: 100%;
  height: 504px;
  padding: 80px var(--gutter);
  background: var(--info-bg);
}
.support-card {
  position: relative;
  width: 100%;
  height: 344px;
  padding-left: 80px;
  border-radius: 36px;
  background: var(--panel);
  overflow: hidden;
}
/* Иллюстрация в процентах от карточки 1424×344: бокс 1081×461 прижат к правому краю (−31px) и центрирован по вертикали. */
.support-visual {
  position: absolute;
  right: -2.185%;
  top: calc(50% + 3.63px);
  transform: translateY(-50%);
  width: 75.92%;
  height: auto;
  aspect-ratio: 1081.116 / 460.714;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.support-visual__inner {
  position: relative;
  width: 98.193%;
  height: auto;
  aspect-ratio: 1061.583 / 406.572;
  transform: rotate(-2.95deg);
}
.support-visual__inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: bottom;
}
.support-visual__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #F4F5F7 3.49%, rgba(244,245,247,0) 27.448%);
}
.support-copy {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
.support-copy__text { color: var(--vrubel); }
.support-copy h2 {
  margin: 0 0 20px;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 3.125rem;
}
.support-copy p {
  margin: 0;
  max-width: 587px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
}

/* NEWS */
.news-section {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 779px; /* высоты секции, карточки и тела — минимальные: при длинных заголовках карточки растут */
  padding: 80px var(--gutter);
}
.news {
  width: 100%;
  height: auto;
  min-height: 619px;
  padding: 60px 50px;
  border-radius: 36px;
  background: var(--panel); /* серая карточка, как у проектов */
  overflow: hidden;
}
.news-list {
  margin-top: 40px;
  width: 100%;
  display: flex;
  gap: 40px;
}
.news-card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 401px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}
.news-card__image {
  position: relative;
  height: auto;
  aspect-ratio: 414.667 / 332; /* 332px при ширине карточки из макета */
  margin-bottom: -61px;
  background: #D2D6DA;
  overflow: hidden;
}
/* Картинка заполняет рамку целиком (cover, без искажения): новости меняются, у фото разные пропорции.
   Кроп из макета (увеличение 120% со сдвигом влево) был подобран под прежние фото и у новых
   срезал края — на обложке вебинара обрезался текст. */
.news-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.news-card__date {
  position: absolute;
  right: 24px;
  top: 23px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--news-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
}
.news-card__body {
  isolation: isolate; /* поверх картинки (заезжает на неё на 61px); не position — см. .news-card__go::after */
  flex: 1 1 auto;
  height: auto;
  min-height: 130px;
  padding: 24px;
  border-radius: 24px 24px 0 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  color: var(--news-text);
}
.news-card__footer {
  flex: 1 1 auto; /* тянется на всё тело карточки: текст сверху, стрелка (align-self) у нижнего края */
  min-height: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.news-card h3 { /* заголовок новости — обычным текстом, как в макете */
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25rem;
}
.news-card__go {
  flex: 0 0 32px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--news-text);
  font-size: 1.25rem;
}
.news-card__go { transition: background-color 120ms ease, box-shadow 120ms ease; }
.news-card__go:hover { background: var(--panel); box-shadow: 0 2px 8px rgba(37,56,88,.10); }
/* Нажатие сжимает только значок: transform на самой ссылке стал бы точкой отсчёта для её ::after — слой
   сжался бы до стрелки, отпускание кнопки мыши пришлось бы мимо ссылки, и переход не случился бы */
.news-card__go:active { background: var(--info-bg); box-shadow: none; }
.news-card__go img { pointer-events: none; transition: transform 80ms ease; }
.news-card__go:active img { transform: scale(.92); }
/* Вся карточка — ссылка: прозрачный слой стрелки растянут на карточку (точка отсчёта — .news-card).
   .news-card__body поднят над картинкой через isolation, а не position — иначе слой растянулся бы только на тело.
   Наведение на любую часть карточки подсвечивает стрелку (слой — часть ссылки). */
.news-card__go::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.news-card__go:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Стрелка скрыта, если адреса нет (страница новости ещё не сверстана; адрес приходит из data/news.json) */
.news-card__go[hidden] { display: none; }

/* CTA */
.cta-section {
  position: relative;
  width: 100%;
  height: 444px;
  padding: 80px var(--gutter);
  background: var(--info-bg);
}
.cta {
  position: relative;
  width: 100%;
  height: 284px;
  padding: 48px;
  border-radius: 36px;
  overflow: hidden;
  background: var(--vrubel-jr);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: bottom;
  pointer-events: none;
}
.cta__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.cta h2 {
  margin: 0;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 3.125rem;
}
.cta p {
  margin: 0;
  width: min(732px, 100%);
  color: rgba(255,255,255,.80);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.25rem;
}
.cta__actions {
  position: relative;
  z-index: 1;
  height: 86px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 20px;
}
.cta__actions .btn--green { width: 202px; }

/* FAQ — страница faq.html (Figma «Вопросы 1+», 466:2762, 1920px). Заголовок 54/64 через 48px под шапкой,
   ниже через 64px список карточек-вопросов 1424×72 (скругление 24px, зазор 20px); карточка целиком — кнопка
   .faq-item__toggle: текст 20/24 и круглая стрелка 48px справа. Ответ — панель под карточкой: заходит под неё
   на 28px, текст 16/24 с отступами 48px по бокам, 24px от низа вопроса и 36px снизу, нижние скругления 36px
   (боковые/нижний — из макета; верхний в макете 44px, по замечанию заказчика уменьшен до 24px, как в прототипе). Заливка панели —
   «стекло» из прототипа заказчика (docs/infotec-faq-20px-gap20.html, по Figma: fill black 0.4%, GLASS radius 4,
   refraction .8, depth 20, light -45°): почти прозрачный диагональный градиент + backdrop-filter, внутренние
   тени-блики по краям (::before) и слой подсветки из верхнего левого угла в режиме screen (::after).
   Раскрытие — JS ([data-faq] в js/main.js) переключает .is-open у .faq-item и aria-expanded у кнопки.
   Анимация высоты — grid-template-rows 0fr → 1fr у .faq-item__panel (без измерения scrollHeight):
   .faq-item__answer с overflow: hidden схлопывается до нуля, поэтому отступы лежат на вложенном
   .faq-item__text, а не на нём. У закрытой панели visibility: hidden (с задержкой на время анимации) —
   содержимое не читается скринридером и не попадает в Tab. Фон — на ::before/::after панели: они
   выступают вверх на 28px под белую карточку (z-index у кнопки выше), а при закрытии прячутся вместе
   с панелью. Текст при раскрытии проявляется и съезжает вниз на 12px, как в прототипе. */
.faq-section {
  position: relative;
  width: 100%;
  padding: 48px var(--gutter) 0;
}
.faq-section h1 {
  margin: 0 0 64px;
  color: var(--vrubel);
  font-size: 3.375rem;
  font-weight: 700;
  line-height: 4rem;
  letter-spacing: -1.08px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.faq-item__question { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.faq-item__toggle {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 72px;
  padding: 12px 48px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--vrubel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5rem;
  transition: box-shadow 200ms ease;
}
.faq-item.is-open .faq-item__toggle { box-shadow: 0 8px 5px rgba(0,0,0,.05); }
.faq-item__title { flex: 1 1 auto; min-width: 0; }
.faq-item__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--page);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease;
}
.faq-item__icon img {
  width: 24px;
  height: 24px;
  transition: transform 200ms ease;
}
/* hover как в прототипе заказчика (docs/infotec-faq-20px-gap20.html): только фон, без тени */
.faq-item__toggle:hover .faq-item__icon { background: var(--info-bg); }
.faq-item.is-open .faq-item__icon img { transform: rotate(180deg); }
.faq-item__panel {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 300ms ease, visibility 0s 300ms;
}
.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 300ms ease, visibility 0s;
}
.faq-item__panel::before,
.faq-item__panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  bottom: 0;
  border-radius: 0 0 36px 36px;
  pointer-events: none;
}
.faq-item__panel::before {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.055) 24%,
      rgba(255,255,255,.015) 48%,
      rgba(219,227,238,.025) 72%,
      rgba(255,255,255,.10) 100%),
    rgba(0,0,0,.004);
  -webkit-backdrop-filter: blur(4px) saturate(112%) contrast(1.015);
  backdrop-filter: blur(4px) saturate(112%) contrast(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 1px 0 0 rgba(255,255,255,.28),
    inset -1px 0 0 rgba(37,56,88,.035),
    inset 0 -1px 0 rgba(37,56,88,.055);
}
.faq-item__panel::after {
  background:
    radial-gradient(120% 80% at 5% 0%, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(315deg, rgba(37,56,88,.018), transparent 38%);
  mix-blend-mode: screen;
}
.faq-item__answer {
  position: relative;
  z-index: 1; /* текст над слоем подсветки ::after */
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 300ms ease;
}
.faq-item.is-open .faq-item__answer {
  opacity: 1;
  transform: none;
}
.faq-item__text {
  padding: 24px 48px 36px;
  color: var(--vrubel);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.faq-item__text p, .faq-item__text ul { margin: 0; }
/* Список в ответе — как в макете: без отступа слева, маркер «- » текстом, строки без зазора */
.faq-item__text ul { padding-left: 0; list-style: none; }
.faq-item__text li::before { content: "- "; }

/* ПРОДУКТЫ — страница products.html (Figma «products_1», 373:8406, 1920px). Секция с отступом 24px
   сверху и снизу: переключатель продуктов 1424×64, через 16px — белая панель активного продукта
   (скругление 20px, отступы 32/36, макетная высота 854px через min-height, чтобы панель не прыгала
   при разном числе скриншотов). В панели шапка (заголовок 66/72, описание 24/34 шириной 740px,
   кнопка PDF 40px справа) и сетка карточек 420×271 в три колонки с зазором 20px.
   Переключение — JS ([data-product-tab] в js/main.js): у активного таба .is-active и aria-selected,
   у неактивных панелей — атрибут hidden. Без JS переключатель скрыт, а все панели видны
   (<noscript> в <head> страницы). */
.products-section {
  position: relative;
  width: 100%;
  padding: 24px var(--gutter);
}
.products-switch {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 6px;
  border: 1px solid var(--switch-border);
  border-radius: 20px;
  background: #fff;
}
.products-switch__tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.products-switch__tab.is-active { background: var(--vrubel); color: #fff; }
.products-switch__tab:not(.is-active):hover { background: var(--panel); color: var(--vrubel); }
/* Разделитель между табами — 1px×36px по левому краю; у активного таба и у следующего за ним его нет
   (в макете линия остаётся только между двумя неактивными). */
.products-switch__tab + .products-switch__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 36px;
  background: var(--line);
  transform: translateY(-50%);
}
.products-switch__tab.is-active::before,
.products-switch__tab.is-active + .products-switch__tab::before { content: none; }

.products-panel {
  margin-top: 16px;
  min-height: 854px;
  padding: 32px 36px;
  border-radius: 20px;
  background: #fff;
}
/* Сетка шапки: заголовок и кнопка PDF в первой строке, описание — во второй под заголовком.
   На мобильном описание раскрывается на обе колонки (см. блок max-width: 479px). */
.products-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 8px;
  padding-bottom: 32px;
}
.products-panel__title {
  grid-column: 1;
  margin: 0;
  color: var(--vrubel);
  font-size: 4.125rem;
  font-weight: 700;
  line-height: 4.5rem;
  letter-spacing: -2px;
}
.products-panel__desc {
  grid-column: 1;
  margin: 12px 0 0;
  max-width: 740px;
  color: var(--text-muted);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.125rem;
}
/* Кнопка PDF — светлый вариант «DS / Button / Main / S» из макета: 40px, скругление 12px, иконка 16px */
.products-panel__pdf {
  grid-column: 2;
  grid-row: 1;
  gap: 8px;
  height: 40px;
  padding: 8px 20px;
  border-radius: 12px;
  background: var(--info-bg);
  color: var(--vrubel);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.products-panel__pdf:hover { background: var(--line); }
.products-panel__pdf:active { background: var(--line); transform: translateY(1px); }
.products-panel__pdf img { width: 16px; height: 16px; }

.products-screens {
  display: grid;
  grid-template-columns: repeat(3, 420px);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Карточка скриншота целиком — кнопка, открывающая полноэкранный просмотр.
   Высота области картинки задана пропорцией макета (420×234), подпись 36px + разделитель = 271px. */
.screen-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 160ms ease;
}
.screen-card:hover { border-color: var(--line-hover); }
.screen-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 420 / 234;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.screen-card__media img { width: 100%; height: 100%; object-fit: cover; }
.screen-card__caption {
  display: block;
  padding: 8px 16px;
  background: var(--panel);
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Полноэкранный просмотр скриншота (Figma «products_modal», 384:2271). В макете затемнение начинается
   под шапкой, но шапка страницы прокручивается вместе с контентом, поэтому слой на всю высоту окна —
   как в прототипе заказчика. Картинка вписывается в область (по ширине — не больше 1330px, по высоте —
   окно минус поля и подпись), подпись — сразу под ней.
   Открытие, листание и возврат фокуса — JS ([data-viewer] в js/main.js). */
.viewer {
  /* Поля слоя и предел ширины картинки — токенами: по ним же считается предел высоты картинки */
  --viewer-pad-top: 96px;
  --viewer-pad-bottom: 64px;
  --viewer-pad-x: 295px;
  --viewer-media-max: 1330px;
  --viewer-caption-h: 52px; /* высота подписи: 16 + 20 + 16 */
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--viewer-pad-top) var(--viewer-pad-x) var(--viewer-pad-bottom);
  background: var(--viewer-overlay);
  animation: viewer-in 180ms ease;
}
.viewer[hidden] { display: none; }
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
/* Блок просмотра сжимается по картинке (fit-content), а не занимает всю область: от его краёв
   отсчитываются крестик и стрелки, поэтому они держатся у картинки при любом размере окна.
   Предел высоты картинки задан в единицах окна — процент от высоты fit-content не считается. */
.viewer__media {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: min(100%, var(--viewer-media-max));
  height: fit-content;
  max-height: 100%;
  min-height: 0;
  touch-action: pan-y; /* горизонтальный жест доходит до attachSwipe, вертикальный остаётся браузеру */
}
.viewer__media img {
  max-width: 100%;
  max-height: calc(100vh - var(--viewer-pad-top) - var(--viewer-pad-bottom) - var(--viewer-caption-h));
  max-height: calc(100dvh - var(--viewer-pad-top) - var(--viewer-pad-bottom) - var(--viewer-caption-h));
  width: auto;
  height: auto;
  object-fit: contain;
}
/* width: 0 + min-width: 100% — подпись занимает ширину картинки, но не задаёт ширину блока */
.viewer__caption {
  flex: 0 0 auto;
  width: 0;
  min-width: 100%;
  padding: 16px 10px;
  color: var(--text-disabled);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25rem;
  text-align: center;
}
.viewer__close,
.viewer__arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* Крестик и стрелки — абсолютом внутри блока просмотра: крестик над правым верхним углом картинки
   (44px правее, 56px выше), стрелки — в 24px от её боков по середине высоты (подпись не в счёт) */
.viewer__close { top: -56px; right: -44px; width: 32px; height: 32px; }
.viewer__close img { width: 32px; height: 32px; }
.viewer__arrow { top: calc((100% - var(--viewer-caption-h)) / 2); width: 40px; height: 40px; transform: translateY(-50%); }
.viewer__arrow img { width: 40px; height: 40px; }
.viewer__arrow--prev { left: -64px; }
.viewer__arrow--next { right: -64px; }
.viewer__close:focus-visible,
.viewer__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .viewer { animation: none; }
}
/* Пока открыт просмотр, страница под ним не прокручивается (ширину полосы прокрутки компенсирует JS) */
body.is-viewer-open { overflow: hidden; }

/* 404 (404.html, en/404.html) — своего макета в Figma нет, секция собрана из токенов лендинга:
   заголовок как <h1> на FAQ, кнопки из общего набора. Контент по центру, отступы держат подвал внизу
   на коротком тексте. */
.notfound-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 120px var(--gutter) 160px;
  text-align: center;
}
.notfound__code {
  margin: 0;
  color: var(--dowden);
  font-size: 7.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.4px;
}
.notfound__title {
  margin: 24px 0 0;
  color: var(--vrubel);
  font-size: 3.375rem;
  font-weight: 700;
  line-height: 4rem;
  letter-spacing: -1.08px;
}
.notfound__text {
  max-width: 640px;
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1.875rem;
}
.notfound__actions {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}

/* ТАРИФЫ — страницы tariffs.html и en/tariffs.html (Figma «TicketNet — Тарифные карточки» 777:13511,
   «Тарифы / Tablet 768» 805:13517, «Тарифы / Mobile 360» 805:14627). В отличие от остального файла блок написан
   mobile-first: база — мобильный макет 360px, дальше min-width 480 / 720 / 1024 / 1488px; адаптив блока — внутри
   него, в общие блоки max-width в конце файла не вынесен. Классы — БЭМ в Яндекс-нотации (block__elem_mod_val).
   Шапка и подвал — общие партиалы; фон страницы #F4F7FB — модификатор .page--tariffs (токен --page). */
.page--tariffs { --page: #F4F7FB; }

/* BUTTON — «button» из макета: L (60px, 16/20 semibold) в карточках тарифов, M (50px, 14/20 medium) в CTA */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px 32px;
  border: 0;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, transform 80ms ease;
}
.button:active { transform: translateY(1px); }
.button_theme_blue { background: var(--blue); color: #fff; }
.button_theme_blue:hover { background: var(--blue-hover); }
.button_theme_blue:active { background: var(--blue-active); }
.button_theme_lime { background: var(--lime); color: var(--vrubel); }
.button_theme_lime:hover { background: var(--lime-hover); }
.button_theme_lime:active { background: var(--lime-active); }
.button_size_m {
  min-height: 50px;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-button);
}

/* SECTION-HEADING — заголовок и подзаголовок секции по центру («Сравнение возможностей», «Коммерческий отдел») */
.section-heading { text-align: center; }
.section-heading__title {
  margin: 0;
  color: var(--heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.375rem;
}
.section-heading__subtitle {
  margin: 10px 0 0;
  color: var(--subheading);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375rem;
}

/* TARIFFS-HERO — мобильный (838:14395): картинка 360px с пазлом (кадр 593×360 со сдвигом −42px — экспорт
   этого кадра из макета, hero-mobile.webp),
   под ней заголовок и подзаголовок по центру. В макете подзаголовок 8px — увеличен до 12px (читаемость). */
.tariffs-hero { position: relative; }
.tariffs-hero__picture {
  position: relative;
  display: block;
  height: 360px;
  overflow: hidden;
}
.tariffs-hero__bg {
  position: absolute;
  top: 0;
  left: -11.67%;
  width: 164.72%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.tariffs-hero__inner { padding: 20px 11px 0; }
.tariffs-hero__content { text-align: center; }
.tariffs-hero__title {
  margin: 0;
  color: var(--vrubel-jr);
  font-size: 1.68rem;
  font-weight: 700;
  line-height: 2.142rem;
  word-spacing: .15em; /* слова заголовка чуть дальше обычного пробела — правка ПМ */
}
.tariffs-hero__title-accent { color: var(--dowden); }
.tariffs-hero__subtitle {
  margin: 6px 0 0;
  color: var(--vrubel-jr);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1rem;
}
.tariffs-hero__puzzle-picture { display: none; }
.tariffs-hero__break { display: none; }

/* PLANS — карточки тарифов 338×890: на мобильном в столбик (зазор 16px), с 720px — 2×2 (16/20px),
   с 1488px — четыре в ряд (24px), как в макете 1920px. */
.plans { padding: 20px 11px 40px; }
.plans__list {
  display: grid;
  grid-template-columns: minmax(0, 338px);
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* PLAN-CARD — фон-подложка сверху (334×271, скругление 14px) и иллюстрация здания снизу лежат абсолютом
   по координатам макета; текст — в потоке, плашка оплаты прижата к низу карточки. */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 890px;
  padding: 32px 0 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 200ms ease;
}
.plan-card__bg,
.plan-card__visual {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.plan-card__bg {
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  border-radius: 14px 14px 0 0;
}
.plan-card__visual {
  top: 520px;
  left: 0;
  width: 100%;
}
.plan-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px;
}
.plan-card__title {
  margin: 0;
  color: var(--plan-title);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.875rem;
  letter-spacing: -.02em;
}
.plan-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan-card__summary {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 111px;
  padding-right: 16px;
  border-radius: 8px;
  background: var(--summary-bg);
  overflow: hidden;
}
.plan-card__puzzle {
  flex: 0 1 126px;
  width: 126px;
  min-width: 0;
  height: 111px;
  object-fit: contain;
}
.plan-card__puzzle_square { flex-basis: 111px; width: 111px; }
.plan-card__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 78px;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--summary-line);
  color: var(--vrubel);
  font-weight: 600;
}
.plan-card__count-number {
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: -.01em;
}
.plan-card__count-unit {
  font-size: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: -.01em;
}
/* «Под ваши задачи»: 24/30 semibold по левому краю, «задачи» — с новой строки 32px bold, как в макете */
.plan-card__count_text {
  display: block;
  height: auto;
  color: var(--lime-text);
  font-size: 1.5rem;
  line-height: 1.875rem;
  letter-spacing: -.01em;
}
.plan-card__count-accent {
  display: block;
  font-size: 2rem;
  font-weight: 700;
}
.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
}
.plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--plan-text);
  font-size: .875rem;
  line-height: 1.125rem;
}
.plan-card__feature-icon {
  flex: none;
  width: 20px;
  height: 20px;
}
/* Плашка оплаты 306×118: на 8px шире текстовой колонки с каждой стороны (16px от края карточки) */
.plan-card__footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: auto 16px 0;
  padding: 12px 16px 16px;
  border-radius: 20px;
  background: var(--info-bg);
}
.plan-card__payment {
  margin: 0;
  color: var(--blue);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.125rem;
  text-align: center;
}
.plan-card__button { width: 100%; }

/* Максимальный: рамка 2px (inset-тенью, чтобы не сдвигать содержимое) и бейдж «Популярный» над карточкой */
.plan-card_type_max {
  overflow: visible;
  box-shadow: inset 0 0 0 2px var(--vrubel-jr), var(--shadow-card);
}
.plan-card_type_max .plan-card__visual {
  top: 514px;
  left: 2px;
  width: calc(100% - 4px);
}
.plan-card__badge {
  position: absolute;
  z-index: 1;
  top: -14px;
  left: 50%;
  margin: 0;
  padding: 8px 20px;
  border-radius: 7px;
  background: var(--vrubel-jr);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: .875rem;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Индивидуальный: подложка на всю ширину, высокая иллюстрация (338×508 от 322px), лаймовые акценты */
.plan-card_type_custom .plan-card__bg {
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 0;
}
.plan-card_type_custom .plan-card__visual { top: 322px; }
.plan-card_type_custom .plan-card__title { color: var(--vrubel); }
.plan-card_type_custom .plan-card__summary {
  gap: 0;
  padding-right: 13px;
  background: var(--summary-custom-bg);
}
.plan-card_type_custom .plan-card__count { border-left-color: var(--summary-custom-line); }
.plan-card_type_custom .plan-card__footer { background: var(--lime-tint); }
.plan-card_type_custom .plan-card__payment { color: var(--lime-text); }
/* Английская страница: «Tailored to your needs» длиннее «Под ваши задачи» — шрифт меньше (20/24),
   а пазл не сжимается, иначе текст вытесняет его из плашки */
.plan-card__count_text:lang(en) { font-size: 1.25rem; line-height: 1.5rem; }
/* «to your needs» — тем же шрифтом, что и «Tailored» (правка ПМ; на русской «задачи» крупнее, как в макете) */
.plan-card__count_text:lang(en) .plan-card__count-accent { font-size: inherit; font-weight: inherit; }
.plan-card_type_custom .plan-card__puzzle:lang(en) { flex-shrink: 0; }

/* Наведение: только подсветка — тень плотнее и рамка 1px, без сдвига и увеличения.
   Рамка — отдельным слоем ::after поверх карточки: inset-тень самой карточки рисуется под содержимым,
   и подложка с иллюстрацией (абсолютные картинки) её перекрывали. Слой последний в карточке, поэтому
   лежит над картинками без z-index; pointer-events: none — не мешает кликам по кнопке.
   У «Максимального» вместо неё остаётся его рамка 2px, у «Индивидуального» рамка лаймовая. */
.plan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hover-ring);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.plan-card_type_max::after { content: none; }
.plan-card_type_custom::after { box-shadow: inset 0 0 0 1px var(--hover-ring-lime); }
/* Только для устройств с мышью: на тач-экранах hover «залипает» после тапа */
@media (hover: hover) {
  .plan-card:hover { box-shadow: var(--shadow-card-hover); }
  .plan-card:hover::after { opacity: 1; }
  .plan-card_type_max:hover { box-shadow: inset 0 0 0 2px var(--vrubel-jr), var(--shadow-card-hover); }
}

/* CHIP — метка варианта размещения (SaaS / Свой сервер) */
.chip {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .6875rem;
  font-weight: 600;
  line-height: .875rem;
}
.chip_type_saas { background: var(--chip-saas-bg); color: var(--chip-saas); }
.chip_type_server { background: var(--chip-server-bg); color: var(--chip-server); }

/* COMPARE — секция таблицы сравнения: заголовок, карточка с таблицей, легенда */
.compare { padding: 36px 16px; }
.compare__card {
  margin-top: 24px;
  padding: 16px 0;
  border-radius: 30px;
  background: var(--table-bg);
  box-shadow: var(--shadow-table);
  overflow: hidden;
}

/* COMPARE-TABLE — на мобильном (805:14808) это не таблица, а список: строка «Функционал» и подписи тарифов,
   у каждой группы — название и повтор подписей тарифов, у каждой функции — название на всю ширину и под
   ним четыре ячейки статусов по 82px. С 480px — обычная таблица (табличная раскладка браузера). */
.compare-table {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--table-text);
}
.compare-table__head,
.compare-table__body { display: block; }
.compare-table__head { border-radius: 14px 14px 0 0; overflow: hidden; }
.compare-table__head-row,
.compare-table__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.compare-table__head-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 5px 3px;
  border-right: 1px solid var(--table-line);
  background: var(--vrubel);
  color: #fff;
  font-size: .5625rem;
  font-weight: 500;
  line-height: .75rem;
  text-align: center;
}
.compare-table__head-cell_type_feature {
  grid-column: 1 / -1;
  justify-content: flex-start;
  min-height: 36px;
  padding: 8px 12px;
  border-right: 0;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.125rem;
  text-align: left;
}
.compare-table__head-cell_accent {
  border-right: 0;
  background: var(--lime);
  color: var(--vrubel);
  font-weight: 600;
}
.compare-table__group { display: block; }
.compare-table__group-cell {
  display: block;
  padding: 0;
  font-weight: inherit;
  text-align: left;
}
.compare-table__group-title {
  display: block;
  padding: 8px 12px;
  background: var(--table-group-bg);
  color: var(--table-group-text);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.125rem;
  text-transform: uppercase;
}
.compare-table__group-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--table-line);
}
.compare-table__group-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 5px 3px;
  border-right: 1px solid var(--table-line);
  background: var(--table-label-bg);
  color: var(--vrubel);
  font-size: .5625rem;
  font-weight: 500;
  line-height: .75rem;
  text-align: center;
}
.compare-table__group-label_accent {
  border-right: 0;
  background: var(--lime);
  font-weight: 600;
}
.compare-table__row { border-bottom: 1px solid var(--table-line); }
.compare-table__row_shade_light { background: var(--table-row-light); }
.compare-table__row_shade_dark { background: var(--table-row-dark); }
.compare-table__feature {
  grid-column: 1 / -1;
  padding: 7px 10px 7px 12px; /* справа 10px: в макете текст 306px, длинные названия помещаются в строку */
  font-size: .75rem;
  font-weight: 400;
  line-height: 1rem;
  text-align: left;
}
.compare-table__note {
  display: block;
  color: var(--table-note);
  font-size: .75rem;
  line-height: .875rem;
  letter-spacing: -.01em;
}
.compare-table__status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0;
  border-top: 1px solid var(--table-line);
  border-right: 1px solid var(--table-line);
}
.compare-table__status:last-child { border-right: 0; }
.compare-table__icon { width: 16px; height: 16px; }

/* LEGEND — обозначения статусов и сноски под таблицей */
.legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 4px;
}
.legend__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legend__item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--subheading);
  font-size: .75rem;
  line-height: .9375rem;
}
.legend__icon { flex: none; width: 16px; height: 16px; }
.legend__notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.legend__note {
  margin: 0;
  color: var(--subheading);
  font-size: .75rem;
  line-height: 1.125rem;
}

/* CONTACTS — «Коммерческий отдел»: на мобильном карточки в столбик (зазор 14px) */
.contacts { padding: 36px 16px 32px; }
.contacts__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

/* CONTACT-CARD — 120px: имя 20/25, должность 15/20, телефон 15/20 с иконкой. Градиент — как в макете, только
   у двух карточек: насыщенный у коммерческого директора (contact-card_tone_strong), светлее — у его
   заместителя (contact-card_tone_soft). Вся карточка кликабельна: ссылка на телефон растянута на неё
   через ::after (для скринридера это по-прежнему одна ссылка с номером, а не вся карточка). */
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  min-height: 120px;
  padding: 17px 22px;
  border: 1px solid var(--contact-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-contact);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
/* Наведение — та же подсветка, что у карточек тарифов: голубая рамка и тень плотнее, без сдвига */
@media (hover: hover) {
  .contact-card:hover {
    border-color: var(--hover-ring);
    box-shadow: var(--shadow-contact-hover);
  }
}
.contact-card_tone_strong { background: linear-gradient(285deg, var(--contact-strong) 0%, #fff 100%); }
.contact-card_tone_soft { background: linear-gradient(285deg, var(--contact-soft) 0%, #fff 100%); }
/* Фокус с клавиатуры — обводка всей карточки, а не только строки телефона */
.contact-card:has(.contact-card__phone:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.contact-card__name {
  margin: 0;
  color: var(--contact-name);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5625rem;
}
.contact-card__position {
  margin: 0;
  color: var(--contact-position);
  font-size: .9375rem;
  line-height: 1.25rem;
}
.contact-card__phone {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  color: var(--contact-phone);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  transition: color 120ms ease;
}
/* Зона нажатия — вся карточка (скругление как у карточки) */
.contact-card__phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.contact-card__phone:hover { color: var(--blue); }
.contact-card__phone:focus-visible { outline: none; }
.contact-card__phone-icon { flex: none; width: 16px; height: 16px; }

/* TARIFFS-CTA — «Не нашли подходящий вариант?»: на мобильном текст над кнопкой во всю ширину */
.tariffs-cta { padding: 40px 16px; }
.tariffs-cta__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: var(--vrubel);
}
.tariffs-cta__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tariffs-cta__title {
  margin: 0;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2.25rem;
}
.tariffs-cta__description {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .875rem;
  line-height: 1.375rem;
}
.tariffs-cta__button { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .button, .plan-card, .plan-card::after, .contact-card, .contact-card__phone { transition: none; }
}


/* ПЛАНШЕТ — от 480px (макет 805:13517, 768px) */
@media (min-width: 480px) {
  /* Hero 768×400: картинка 1007×400 от левого края (обрезана справа), текст в 100px от левого и верхнего края */
  .tariffs-hero {
    height: 400px;
    overflow: hidden;
    background: #fff;
  }
  .tariffs-hero__picture {
    position: absolute;
    inset: 0;
    height: auto;
  }
  .tariffs-hero__bg { left: 0; width: 131.12%; }
  .tariffs-hero__inner {
    position: relative;
    padding: 100px 0 0 13.02%;
  }
  .tariffs-hero__content { width: 351px; max-width: calc(100% - 32px); text-align: left; }
  .tariffs-hero__title {
    font-size: 2.5rem;
    line-height: 3.1875rem;
  }
  .tariffs-hero__title-accent { display: block; }
  .tariffs-hero__subtitle {
    width: 260px;
    max-width: 100%;
    margin-top: 8px;
    font-size: .875rem;
    line-height: 1.115rem;
  }

  .plans { padding: 48px 32px; }

  .section-heading__subtitle { margin-top: 10px; }

  .compare { padding: 48px 32px; }
  .compare__card { margin-top: 32px; padding: 24px 0; }
  .legend { margin-top: 32px; }

  /* Таблица 704px: функция 296px, тарифы по 102px; шапка 60px, группа 36px, строка 52px */
  .compare-table { display: table; table-layout: fixed; }
  .compare-table__head { display: table-header-group; border-radius: 0; overflow: visible; }
  .compare-table__body { display: table-row-group; }
  .compare-table__head-row,
  .compare-table__row,
  .compare-table__group { display: table-row; }
  .compare-table__col_type_feature { width: 42.05%; }
  .compare-table__head-cell,
  .compare-table__group-cell,
  .compare-table__feature,
  .compare-table__status { display: table-cell; vertical-align: middle; }
  .compare-table__head-cell {
    height: 60px;
    padding: 6px 4px;
    border-right: 1px solid var(--table-head-line);
    font-size: .75rem;
    line-height: .9375rem;
  }
  .compare-table__head-cell_type_feature {
    padding: 6px 12px;
    border-radius: 14px 0 0 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
  }
  .compare-table__head-cell_accent {
    border-right: 0;
    border-radius: 0 14px 0 0;
    font-size: .65625rem;
    line-height: .8125rem;
  }
  .compare-table__group-cell { height: 36px; background: var(--table-group-bg); }
  .compare-table__group-title { padding: 8px 12px; font-size: .8125rem; }
  .compare-table__group-labels { display: none; }
  .compare-table__feature {
    height: 52px;
    vertical-align: top;
    padding: 6px 12px;
    border-bottom: 1px solid var(--table-line);
    font-size: .8125rem;
    line-height: 1.125rem;
  }
  .compare-table__status {
    height: 52px;
    padding: 6px 4px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--table-line);
    border-left: 1px solid var(--table-line);
  }
  .compare-table__icon { margin: 0 auto; }

  .legend__list { gap: 8px; }

  .contacts { padding: 44px 32px 36px; }
  .contacts__list { margin-top: 36px; gap: 16px; }

  .tariffs-cta { padding: 56px 32px; }
  .tariffs-cta__panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px; /* в макете текст 456px вплотную к кнопке: с зазором 20px заголовок уходит на две строки */
    padding: 28px 32px;
  }
  .tariffs-cta__text { flex: 1 1 auto; max-width: 720px; }
  .tariffs-cta__button { flex: none; width: auto; }

}

/* Две колонки карточек тарифов и контактов — с 720px (две карточки 338px + 16px помещаются в 704px) */
@media (min-width: 720px) {
  .plans__list {
    grid-template-columns: repeat(2, 338px);
    gap: 20px 16px;
  }
  /* Директор — по центру над сеткой, шириной в одну колонку */
  .contacts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacts__item_lead {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
}

/* ДЕСКТОП — от 1024px (макет 777:13511, 1920px) */
@media (min-width: 1024px) {
  /* Hero 496px: размытый фон 1944×754 (с полями 12px под размытие), отдельно — пазл на постаменте 349×457,
     обрезанный низом секции. Позиции в процентах от контейнера 1424px: текст — 152px, пазл — 963px. */
  .tariffs-hero {
    height: 496px;
    padding: 0 var(--gutter);
    background: none;
  }
  .tariffs-hero__bg {
    top: -127px;
    left: -12px;
    width: calc(100% + 24px);
    height: 754px;
  }
  .tariffs-hero__inner {
    height: 100%;
    padding: 0;
  }
  .tariffs-hero__content {
    position: absolute;
    top: 144px;
    left: 10.67%;
    width: 772px;
    max-width: calc(57% - 24px);
  }
  .tariffs-hero__title {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px; /* в макете 12px — увеличено по правке ПМ, чтобы слова визуально разделялись */
    font-size: clamp(3rem, 12.69px + 3.448vw, 4rem);
    line-height: 1.275;
  }
  .tariffs-hero__title-accent { display: inline; }
  .tariffs-hero__subtitle {
    width: auto;
    margin-top: 13px;
    font-size: clamp(1rem, 7.17px + .862vw, 1.25rem);
    line-height: 1.275;
  }
  .tariffs-hero__puzzle-picture {
    display: block;
    position: absolute;
    top: 110px;
    left: 67.63%;
    width: 349px;
  }
  .tariffs-hero__puzzle { width: 100%; }

  .plans { padding: 64px var(--gutter) 24px; }

  .compare { padding: 60px var(--gutter) 80px; }
  .compare__card { padding: 24px 28px; }

  /* Таблица 1368px: функция 617px, тарифы по 184px, «Индивидуальный» — 199px; шапка 68px, строка 38px */
  .compare-table__col_type_feature { width: 45.1%; }
  .compare-table__col_type_accent { width: 14.55%; }
  /* Названия тарифов: 14px при 1024px → 18px при 1488px, иначе «Максимальный» не помещается в колонку */
  .compare-table__head-cell {
    height: 68px;
    padding: 12px;
    font-size: clamp(.875rem, 5.17px + .862vw, 1.125rem);
    line-height: 1.25rem;
  }
  .compare-table__head-cell_type_feature {
    padding: 12px 12px 12px 16px;
    font-size: 1.125rem;
    line-height: 1.25rem;
  }
  .compare-table__head-cell_accent { font-size: clamp(.875rem, 5.17px + .862vw, 1.125rem); line-height: 1.25rem; }
  .compare-table__group-title { padding: 8px 16px; font-size: .875rem; }
  .compare-table__feature {
    height: 38px;
    vertical-align: middle;
    padding: 6px 8px 6px 16px;
  }
  .compare-table__feature:has(.compare-table__note) { padding-top: 8px; padding-bottom: 8px; }
  .compare-table__status { height: 38px; padding: 6px; }

  .legend__list { gap: 8px 24px; }

  .contacts { padding: 0 var(--gutter) 20px; }
  .contacts__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    margin-top: 48px;
    padding: 14px 16px;
  }
  .contacts__item_lead {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }

  .tariffs-cta { padding: 80px var(--gutter); }
  .tariffs-cta__panel { gap: 20px; padding: 34px 44px; }

}

/* Контейнер 1424px целиком — четыре карточки тарифов в ряд, как в макете */
@media (min-width: 1488px) {
  /* Перенос подзаголовка hero после «возможностей» — как в макете (при ширине колонки 772px) */
  .tariffs-hero__break { display: inline; }
  .plans__list {
    grid-template-columns: repeat(4, 338px);
    gap: 24px;
  }
}

/* FOOTER — макет 1424×502: верхняя часть (о компании + меню) 204px с отступом 48px и линией,
   строка контактов 73px с линией, юридический блок 96px. Отступ снизу — только 24px из блока legal. */
.footer {
  position: relative;
  width: 100%;
  min-height: 502px;
  padding: 80px var(--gutter) 0;
  color: var(--infotec-black);
}
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.footer__about {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 385px;
  flex: 0 0 385px;
}
.footer__about .logo { width: 173px; height: 20px; object-fit: contain; }
.footer__about p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.footer__menu {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 48px;
  width: 917px;
}
.footer__col { width: 220px; }
.footer__col h3 {
  margin: 0 0 24px;
  padding: 0 4px;
  color: var(--vrubel);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25rem;
}
.footer__col a {
  display: block;
  padding: 2px 4px;
  color: var(--infotec-grey);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1rem;
  border-radius: 6px;
  transition: color 120ms ease, transform 80ms ease;
}
.footer__col a + a { margin-top: 8px; }
/* Hover по макету «Hover для футера» (Figma 353-4134): только цвет ссылки → --blue, без подложки */
.footer__col a:hover, .footer__link:hover { color: var(--blue); }
.footer__col a:active, .footer__link:active { color: var(--blue); transform: translateY(1px); }

/* Строка контактов: слева язык + телефон, справа техподдержка + документы */
.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 48px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.footer__bar-group { display: flex; align-items: center; gap: 48px; }
.footer__bar-group--right { gap: 32px; }
.footer__contacts { display: flex; align-items: center; gap: 32px; }
.footer__policies { display: flex; align-items: center; gap: 24px; }
.footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* в макете: 4px зазор + 8px внутренний отступ текстовой кнопки */
  padding: 0 8px 0 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--vrubel);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none; /* ссылка на другую языковую версию */
  cursor: pointer;
  transition: background-color 120ms ease, transform 80ms ease;
}
.footer__lang img { width: 24px; height: 24px; }
.footer__lang:hover { background: var(--panel); }
.footer__lang:active { background: var(--info-bg); transform: translateY(1px); }
.footer__phone {
  color: var(--vrubel);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem;
  border-radius: 6px;
  transition: color 120ms ease, transform 80ms ease;
}
.footer__phone:hover { color: var(--vrubel-jr); }
.footer__phone:active { color: var(--news-text); transform: translateY(1px); }
.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1rem;
  border-radius: 6px;
  transition: color 120ms ease, transform 80ms ease;
}
.footer__support img { width: 19px; height: 16px; flex-shrink: 0; }

/* Юридический блок */
.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 0;
}
.footer__copyright {
  margin: 0;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.25rem;
}
.footer__consent {
  margin: 0;
  padding: 2px 4px;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1rem;
}
.footer__consent a { color: var(--vrubel); text-decoration: none; } /* в макете ссылка тёмная, текст вокруг — как копирайт */
.footer__consent a:hover { text-decoration: underline; }


button:disabled, .btn:disabled {
  cursor: default;
  opacity: .5;
  transform: none !important;
  box-shadow: none;
}

/* Узкий десктоп 1024–1487px: контейнер 1424px уже не помещается, карточки тянутся на всю ширину
   минус отступы 32px. Размеры и шрифты через clamp() линейно интерполируются от значения при 1024px
   до значения из макета при 1488px. Блок ограничен диапазоном, чтобы не протекать в планшетный. */
@media (min-width: 1024px) and (max-width: 1487px) {
  .projects-section,
  .ticketnet-section,
  .interface-section,
  .tariffs-section,
  .process-section,
  .support-section,
  .news-section,
  .cta-section { height: auto; }
  .process-section { padding-bottom: 60px; } /* в макете: 80px сверху + 670px содержимого при высоте 810px */

  /* Hero: фон не помещается целиком, поэтому кроп + осветление слева под текст (как на планшете) */
  .hero__bg {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-position: 64% center;
  }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(247,247,247,.97) 0%, rgba(247,247,247,.88) 43%, rgba(247,247,247,.10) 78%),
      linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 25%);
  }
  .hero__left { gap: clamp(24px, -99.586px + 12.069vw, 80px); }
  /* Навигация из пяти пунктов и «Напишите нам» помещаются в строку при 1024px только со сжатыми отступами:
     зазор пунктов 8→16px, боковой отступ пункта 12→20px (у стрелки 28→36px), отступ кнопки 24→36px */
  .hero__nav { gap: clamp(8px, -9.655px + 1.724vw, 16px); }
  .nav-link { padding-left: clamp(12px, -5.655px + 1.724vw, 20px); padding-right: clamp(12px, -5.655px + 1.724vw, 20px); }
  .nav-link--dropdown { padding-right: clamp(28px, 10.345px + 1.724vw, 36px); }
  .nav-link--dropdown::after { right: clamp(10px, -7.655px + 1.724vw, 18px); }
  .header-contact { padding-left: clamp(24px, -2.483px + 2.586vw, 36px); padding-right: clamp(24px, -2.483px + 2.586vw, 36px); }
  /* Карточка выпадающего меню: 280px при 1024px → 435px при 1488px, колонки ссылок переносятся */
  .menu__block { flex-basis: clamp(280px, -62.069px + 33.405vw, 435px); width: auto; padding: 28px 28px 24px; }
  .menu__inner { gap: 32px; padding: 32px; }
  .menu__text { padding-right: 0; padding-bottom: 56px; } /* стрелка под текстом, а не сбоку */
  .menu__cols { gap: 12px 40px; }
  /* Четыре колонки TicketNet: зазор 16px при 1024px → 40px при 1488px, шрифт пунктов 14px → 16px,
     боковой отступ пункта 8px → 12px — при 1024px всё ровно помещается в строку */
  .menu__cols--nowrap { gap: 12px clamp(16px, -36.966px + 5.172vw, 40px); }
  .menu__cols--nowrap .menu__col { min-width: auto; }
  .menu__cols--nowrap .menu__item { --pad-x: clamp(8px, -0.828px + .862vw, 12px); font-size: clamp(.875rem, 9.586px + .431vw, 1rem); }

  /* Projects */
  .projects__row { gap: clamp(40px, -48.276px + 8.621vw, 80px); }
  .projects__metric { flex: 0 1 435px; min-width: 0; }
  .projects__metric-top, .metric-copy, .metric-number { width: auto; }
  .metric-number { font-size: clamp(136px, 74.207px + 6.034vw, 164px); line-height: 1.0366; }
  .metric-copy { font-size: clamp(20px, 11.172px + 0.862vw, 24px); line-height: 1.4167; }
  .projects__slide { flex: 1 1 460px; min-width: 0; }
  .slide-copy { width: auto; right: 40px; bottom: 40px; }
  .brand-strip { width: 100%; max-width: 435px; }

  /* TicketNet: высота карусели следует за пропорцией области слайдов из макета (1248×541) */
  .ticketnet { height: auto; }
  .ticketnet__slides { height: auto; aspect-ratio: 1248 / 541; }
  .ticketnet__copy { min-width: 340px; }
  .ticketnet__copy-inner { min-height: 0; }
  .ticketnet h2 { font-size: clamp(32px, -16.552px + 4.741vw, 54px); line-height: 1.0741; }
  .ticketnet p { font-size: clamp(18px, 4.759px + 1.293vw, 24px); line-height: 1.4167; }
  .ticketnet p br { display: none; }
  .ticketnet__visual--features { padding: clamp(12px, -14.483px + 2.586vw, 24px); }
  .ticketnet-features { gap: clamp(6px, -2.828px + 0.862vw, 10px); }
  .ticketnet-feature { padding: clamp(8px, -9.655px + 1.724vw, 16px); }
  .ticketnet-feature p { font-size: clamp(10px, 1.172px + 0.862vw, 14px); line-height: 1.4286; }
  .ticketnet-feature--tight p { letter-spacing: clamp(-1px, 2.207px + -0.216vw, 0px); }

  /* Interface */
  .interface-card { height: auto; }
  .interface-copy h2 { font-size: clamp(32px, 14.345px + 1.724vw, 40px); line-height: 1.6; }

  /* Tariffs */
  .tariffs-copy h2 { font-size: clamp(40px, 9.103px + 3.017vw, 54px); line-height: 1.0741; }

  /* Process */
  .process-copy h2 { font-size: clamp(40px, 9.103px + 3.017vw, 54px); line-height: 1.185; }
  .process-copy p { font-size: clamp(18px, 4.759px + 1.293vw, 24px); line-height: 1.5; }
  .process-card { padding: clamp(16px, -1.655px + 1.724vw, 24px); }
  .process-card__num { font-size: clamp(48px, 12.69px + 3.448vw, 64px); line-height: 1; }
  .process-card h3 { font-size: clamp(16px, 11.586px + 0.431vw, 18px); line-height: 1.222; }

  /* Support: иллюстрация не уменьшается (иначе внутри карточки видны края повёрнутой картинки), а сдвигается вправо */
  .support-visual { width: 1081.116px; right: clamp(-190px, -540.897px + 34.267vw, -31px); }
  .support-copy p { max-width: 440px; font-size: clamp(20px, 11.172px + 0.862vw, 24px); line-height: 1.3333; }
  .support-copy p br { display: none; }

  /* CTA */
  .cta__bg { object-fit: cover; }

  /* FAQ: заголовок 40/48 при 1024px → 54/64 при 1488px, отступы карточки 32px → 48px */
  .faq-section h1 { font-size: clamp(2.5rem, 9.103px + 3.017vw, 3.375rem); line-height: clamp(3rem, 12.69px + 3.448vw, 4rem); }
  .faq-item__toggle { padding-left: clamp(32px, -3.31px + 3.448vw, 48px); padding-right: clamp(32px, -3.31px + 3.448vw, 48px); }
  .faq-item__text { padding-left: clamp(32px, -3.31px + 3.448vw, 48px); padding-right: clamp(32px, -3.31px + 3.448vw, 48px); }

  /* Продукты: карточки скриншотов тянутся (три колонки на всю ширину панели), шапка панели и её отступы
     остаются макетными — заголовки короткие, описание 740px помещается и при 1024px.
     Во вьюере боковое поле 295px → 140px при 1024px: иначе на узком десктопе картинке остаётся
     меньше половины окна. Стрелкам и крестику правил не нужно — они привязаны к самой картинке. */
  .products-screens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .viewer { --viewer-pad-x: clamp(140px, -202.09px + 33.405vw, 295px); }

  /* Footer: описание и колонки меню сжимаются, строка контактов переносится */
  .footer { min-height: 0; }
  .footer__about { flex: 0 1 385px; min-width: 240px; }
  .footer__menu { flex: 1 1 auto; width: auto; min-width: 0; gap: clamp(24px, -28.966px + 5.172vw, 48px); margin-left: 40px; }
  .footer__col { flex: 1 1 0; min-width: 0; width: auto; }
  .footer__bar { flex-wrap: wrap; }
  .footer__bar-group { flex-wrap: wrap; gap: 12px 32px; }
}

/* Планшет 768px (макет Figma «1 / Tablet 768») и мобильный 360px (своего макета нет — уменьшенный планшетный).
   Планшетный макет: шапка 80px с бургером над картинкой hero 768×460; карточки проектов, TicketNet,
   интерфейса и новостей — на всю ширину экрана (скругление 36px), у тарифов, поддержки и CTA — отступ 32px;
   карточки этапов и новостей — в горизонтальной прокрутке. */
@media (max-width: 1023px) {
  .hero,
  .projects-section,
  .ticketnet-section,
  .interface-section,
  .tariffs-section,
  .process-section,
  .support-section,
  .news-section,
  .cta-section,
  .footer { height: auto; }

  /* Базовые пропорции (aspect-ratio) здесь не нужны: размеры заданы явно.
     Исключение — .interface-visual: картинка на всю ширину, высота по пропорции макета (1424/568). */
  .ticketnet__visual, .tariffs-visual, .process-card,
  .support-visual, .support-visual__inner, .news-card__image { aspect-ratio: auto; }

  /* HERO. Шапка 80px в потоке над картинкой (в макете картинка 768×460 начинается под шапкой).
     У hero снят overflow: hidden, чтобы раскрытое меню бургера выходило за его нижнюю границу
     (фон при 100% ширины и так не выступает). Слева картинку не осветляем — в макете только
     вертикальный градиент, текст лежит на светлой стене.
     min-height: 0 — сбрасывает десктопную страховку 720px, иначе hero растёт до 720 и картинка кропится крупнее. */
  .hero { height: 540px; min-height: 0; overflow: visible; background: var(--page); }
  .hero__bg {
    width: 100%;
    height: calc(100% - 80px);
    left: 0;
    top: 80px;
    object-position: 64% center;
  }
  .hero::before { top: 80px; }
  .hero__header {
    position: relative;
    height: 80px;
    padding: 18px 40px;
    align-items: center;
  }
  .hero__left { height: auto; gap: 0; }
  .hero__actions { height: 44px; gap: 12px; }
  .header-contact { display: none; } /* «Напишите нам» — внутри меню бургера (.header-contact--menu) */
  .header-language { height: auto; padding: 2px 8px; border-radius: 8px; background: transparent; }
  .header-burger { display: inline-flex; }
  /* Навигация — панель под шапкой по сетке контента (отступы 32px), раскрывается кнопкой-бургером
     (класс .is-menu-open у .hero__header, см. js/main.js); пункты в столбик, внизу «Напишите нам».
     Открытого состояния в макете нет — панель собрана из карточки выпадающего меню (.menu__inner). */
  .hero__nav {
    display: none;
    position: absolute;
    z-index: 5;
    left: 32px;
    right: 32px;
    top: calc(100% - 8px);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 56px rgba(37,56,88,.16), 0 2px 8px rgba(37,56,88,.06);
  }
  .hero__header.is-menu-open .hero__nav { display: flex; }
  .nav-dropdown { display: flex; flex-direction: column; }
  .nav-link { min-height: 48px; padding: 12px 16px; font-size: 1rem; border-radius: 12px; }
  .nav-link--dropdown { padding-right: 40px; }
  .nav-link--dropdown::after { right: 18px; }
  .header-contact--menu { display: inline-flex; justify-content: center; height: 48px; margin-top: 8px; padding: 14px 24px; }
  /* Выпадающие панели TicketNet / Сервисы — «аккордеон» внутри меню: hover нет, панель раскрывает тап
     по триггеру (класс .is-open, см. js/main.js); :hover/:focus-within ничего не раскрывают (на тач-
     устройствах hover «залипает» после тапа). Панель в потоке, без тени, содержимое в одну колонку. */
  .nav-dropdown:hover > .nav-link--dropdown,
  .nav-dropdown:focus-within > .nav-link--dropdown { background: none; }
  .nav-dropdown:hover > .nav-link--dropdown::after,
  .nav-dropdown:focus-within > .nav-link--dropdown::after { margin-top: -5px; transform: rotate(45deg); }
  .nav-dropdown.is-open > .nav-link--dropdown { background: rgba(236,238,242,.85); }
  .nav-dropdown.is-open > .nav-link--dropdown::after { margin-top: -2px; transform: rotate(225deg); }
  .menu__collapsed {
    display: none;
    position: static;
    padding-top: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-dropdown.is-open .menu__collapsed { display: block; }
  .menu__inner { flex-direction: column; gap: 20px; padding: 12px 4px 4px; border-radius: 0; box-shadow: none; }
  .menu__main { padding-top: 0; }
  .menu__title { display: none; } /* дублирует ссылку-триггер над панелью */
  .menu__cols { gap: 8px 32px; }
  .menu__cols--nowrap { flex-wrap: wrap; } /* в аккордеоне бургера колонки переносятся, как в остальных меню */
  .menu__col { min-width: 0; }
  .menu__cols--nowrap .menu__col:last-child { flex-shrink: 1; }
  .menu__item { margin-left: 0; }
  .menu__block { flex: none; width: auto; min-height: 0; padding: 24px 24px 20px; }
  .menu__text { padding-right: 0; padding-bottom: 56px; } /* стрелка под текстом */
  .hero__content {
    left: 32px;
    top: calc(80px + 230px); /* центр картинки 460px под шапкой */
    width: 688px;
    max-width: calc(100% - 64px);
    transform: translateY(-50%);
    gap: 36px;
  }
  .hero__copy { width: 490px; max-width: 100%; gap: 10px; }
  .hero h1 { font-size: 2.5rem; line-height: 3.125rem; letter-spacing: 0; }
  .hero__subtitle { font-size: 1rem; line-height: 1.5rem; }
  .hero__badge { width: 394px; max-width: 100%; gap: 16px; padding: 20px 16px; }
  .hero__badge-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .hero__badge p, .hero__badge p:lang(en) { width: auto; font-size: 1rem; line-height: 1.25rem; }

  /* Отступы секций: карточки проектов, TicketNet, интерфейса и новостей — на всю ширину экрана */
  .projects-section, .interface-section, .news-section { padding: 48px 0; }
  .ticketnet-section { padding: 0; }
  .tariffs-section, .support-section { padding: 32px; }
  .process-section { padding: 64px 32px 48px; }
  .cta-section { padding: 32px 32px 48px; }

  /* PROJECTS: в столбик — метрика, слайд, полоса логотипов, точки. .projects__metric раскрыт через
     display: contents, чтобы слайд встал между метрикой и логотипами (порядок через order). */
  .projects { height: auto; padding: 40px 32px; }
  .section-head { height: auto; min-height: 58px; }
  .projects__body { margin-top: 32px; }
  .projects__row { height: auto; flex-direction: column; gap: 24px; }
  .projects__metric { display: contents; }
  .projects__metric-top { width: 100%; }
  .metric-number { width: auto; font-size: 7.5rem; line-height: normal; letter-spacing: -4px; }
  .metric-copy, .metric-copy:lang(en) { width: 100%; margin-top: 0; }
  /* Стрелки выходят за край слайда на 20px, поэтому обрезает картинку не .projects__slide, а .projects__stage */
  .projects__slide { order: 1; flex: none; width: 100%; height: 360px; overflow: visible; background: transparent; }
  .projects__stage { overflow: hidden; border-radius: 24px; background: #CFCFCF; }
  .projects__slide-image { width: 100%; height: 135%; left: 0; top: -17.5%; object-fit: cover; } /* кроп 705×486 из макета */
  .slide-copy { left: 24px; bottom: 44px; width: 640px; max-width: calc(100% - 48px); }
  .slide-copy h3 { width: auto; font-size: 1.75rem; line-height: 2.125rem; }
  .slide-copy p { font-size: 1rem; line-height: 1.25rem; }
  .round-arrow--left { left: -20px; }
  .round-arrow--right { right: -20px; }
  .brand-strip { order: 2; width: 100%; height: 68px; gap: 16px; }
  .brand-strip__item { height: 48px; }
  .projects-pagination { width: auto; margin-top: 24px; justify-content: center; } /* слайд на всю ширину — точки по центру */

  /* TICKETNET (Figma node 245:1661): карточка 768×762 без отступов секции, padding 36px 32px; текст 188px по центру,
     картинка 704×402 (скругление 20px), стрелки 48px справа внизу (bottom 36, right 48 / 128) */
  .ticketnet { position: relative; width: 100%; height: 762px; padding: 36px 32px; border-radius: 36px; display: block; }
  .ticketnet__slides { width: 100%; height: 614px; }
  .ticketnet__slide { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 24px; }
  .ticketnet__copy { width: 100%; height: 188px; flex: 0 0 188px; }
  .ticketnet__copy-inner, .ticketnet__copy-inner--454 { width: 100%; min-height: 0; gap: 20px; }
  .ticketnet h2 { font-size: 2rem; line-height: 2.5rem; }
  .ticketnet p { font-size: 1.125rem; line-height: 1.75rem; }
  .ticketnet__copy h2 br, .ticketnet__copy p br { display: none; } /* только текст слайда: в карточках возможностей переносы по макету */
  .ticketnet__visual { width: 100%; height: 402px; flex: 0 0 402px; border-radius: 20px; }
  /* Билет по центру и крупно, низ обрезан (как 546×491 при left 79 / top −49 в макете) */
  .ticketnet__visual--ticketnet > img { width: 115.5%; height: 121.4%; left: -39.8%; top: -11.2%; object-fit: fill; }
  /* Конструктор: по макету картинка 376px по центру на тёмно-синей подложке (цвет фона запечён в самой картинке, токена нет) */
  .ticketnet__visual--constructor { border: 0; background-color: #2E4472; }
  .ticketnet__visual--constructor > img { width: auto; height: calc(100% - 26px); left: 50%; top: 13px; transform: translateX(-50%); border-radius: 28px; } /* width: auto — по пропорции; скругление прячет запечённые чёрные углы */
  /* Оборудование: как на десктопе — фото заливает карточку целиком (object-fit: cover из базового правила) */
  /* Возможности: по макету синяя подложка с затемнением (как у первого слайда), плитки 221×121 с отступом 12px и зазором 8px */
  .ticketnet__visual--features { padding: 12px; background: linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,.20)), var(--blue); }
  .ticketnet-features { gap: 8px; }
  .ticketnet-feature { padding: 16px; border-radius: 16px; }
  .ticketnet-feature p { width: 140px; font-size: .6875rem; line-height: 1rem; }
  .ticketnet-feature--tight p { letter-spacing: 0; }
  /* Позиции иллюстраций — в px от плитки 221.33×120.67 (макет) */
  .ticketnet-feature__art--1 { left: 128px; top: 43px; width: 124px; height: 124px; }
  .ticketnet-feature__art--2 { left: 78px; top: 3px; width: 218px; height: 218px; }
  .ticketnet-feature__art--2 img { width: 154px; height: 154px; }
  .ticketnet-feature__art--3 { left: 132px; top: 43px; width: 130px; height: 130px; }
  .ticketnet-feature__art--4 { left: 128px; top: 43px; width: 124px; height: 124px; }
  .ticketnet-feature__art--5 { left: 108px; top: 26px; width: 136px; height: 136px; }
  .ticketnet-feature__art--6 { left: 83px; top: 9px; width: 176px; height: 176px; overflow: hidden; }
  .ticketnet-feature__art--6 img { position: absolute; left: 16.08%; top: -4.83%; }
  .ticketnet-feature__art--7 { left: 123px; top: 29px; width: 148px; height: 148px; }
  .ticketnet-feature__art--8 { left: 123px; top: 29px; width: 132px; height: 132px; }
  .ticketnet-feature__art--9 { left: 112px; top: 23px; width: 145px; height: 145px; }
  .ticketnet > .round-arrow { position: absolute; z-index: 10; top: auto; bottom: 36px; margin: 0; }
  .ticketnet [data-ticketnet-prev] { left: auto; right: 128px; }
  .ticketnet [data-ticketnet-next] { right: 48px; }

  /* INTERFACE: картинка на всю ширину с кропом из базового правила, текст 624px, кнопка через 36px */
  .interface-card { height: auto; padding-bottom: 48px; }
  .interface-visual { margin-bottom: -1px; }
  .interface-copy { width: min(624px, 100%); padding: 0 16px; }
  .interface-copy h2 { font-size: 2rem; line-height: 2.5rem; }
  .interface-copy p { font-size: 1.125rem; line-height: 1.75rem; }
  .interface-card .btn { margin-top: 36px; }

  /* TARIFFS: картинка в натуральную величину макета (1449.84×405), прижата к правому нижнему углу */
  .tariffs-card { height: 383px; padding-left: 48px; }
  .tariffs-visual { right: -141.84px; top: auto; bottom: -10.57px; transform: none; width: 1449.84px; height: 405px; }
  .tariffs-copy { width: 554px; max-width: 100%; padding: 30px 0; gap: 32px; }
  .tariffs-copy h2 { font-size: 2rem; line-height: 2.5rem; }
  .tariffs-copy .btn { width: auto; height: 50px; padding: 12px 32px; font-size: .875rem; }

  /* PROCESS: карточки 184×297 в горизонтальной прокрутке (ряд 1016px шире экрана), под ними «рельса»
     с точками. Рельса рисуется градиентами в .process-cards::after, чтобы точки совпадали с центрами
     карточек при любых --card-w / --card-gap (мобильный блок меняет только их); SVG process-rail.svg
     здесь не используется. Прокручивается .process-rail, выведенный до правого края экрана. */
  .process { gap: 48px; }
  .process-copy h2 { font-size: 2rem; line-height: 2.5rem; }
  .process-copy p { font-size: 1.125rem; line-height: 1.75rem; }
  .process-rail {
    width: calc(100% + 32px);
    margin-right: -32px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }
  .process-rail::-webkit-scrollbar { display: none; }
  .process-cards {
    --card-w: 184px;
    --card-gap: 24px;
    width: max-content;
    padding: 0 32px 0 0;
    display: grid;
    grid-template-columns: repeat(5, var(--card-w));
    gap: 12px var(--card-gap);
    justify-content: start;
    align-items: stretch;
  }
  .process-cards::after {
    content: "";
    grid-column: 1 / -1;
    height: 32px;
    background:
      radial-gradient(circle, #1296DB 6px, transparent 6.5px)
        calc(var(--card-w) / 2 - (var(--card-w) + var(--card-gap)) / 2) 0
        / calc(var(--card-w) + var(--card-gap)) 32px repeat-x,
      repeating-linear-gradient(90deg,
        #B3C0D8 0 calc(var(--card-w) + var(--card-gap) - 32px),
        transparent calc(var(--card-w) + var(--card-gap) - 32px) calc(var(--card-w) + var(--card-gap)))
        calc(var(--card-w) / 2 + 16px) 15.5px
        / calc(4 * (var(--card-w) + var(--card-gap)) - 32px) 1px no-repeat;
  }
  .process-card { width: auto; max-width: none; height: 297px; padding: 18px; border-radius: 16px; scroll-snap-align: start; }
  .process-card__num { font-size: 3rem; line-height: 3rem; }
  .process-card h3 { font-size: .875rem; line-height: 1rem; }
  .process-rail-graphic { display: none; }

  /* SUPPORT: у фрейма секции в макете нет заливки — карточка лежит на фоне страницы;
     иллюстрация в размерах макета (923×393), прижата к правому нижнему углу */
  .support-section { background: var(--page); }
  .support-card { height: auto; min-height: 266px; padding-left: 32px; }
  .support-copy { padding: 30px 0; gap: 40px; }
  .support-copy h2 { font-size: 2rem; line-height: 2.5rem; margin-bottom: 20px; }
  .support-copy p { max-width: none; font-size: 1.125rem; line-height: 1.75rem; }
  .support-visual { right: -169.48px; top: auto; bottom: -34.11px; transform: none; width: 923.35px; height: 393.48px; }
  .support-visual__inner { width: 906.665px; height: 347.24px; }

  /* NEWS: карточки 430×320 в горизонтальной прокрутке (список выведен до правого края экрана).
     Высота карточки фиксированная: при длинном заголовке растёт тело, а картинка укорачивается. */
  .news-section { min-height: 0; }
  .news { height: auto; min-height: 0; padding: 40px 32px; }
  .news .section-head { min-height: 50px; }
  .news-list {
    margin-top: 32px;
    width: calc(100% + 32px);
    margin-right: -32px;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }
  .news-list::-webkit-scrollbar { display: none; }
  .news-list::after { content: ""; flex: 0 0 8px; } /* с gap 24px — отступ 32px в конце прокрутки */
  .news-card { flex: 0 0 430px; height: 320px; min-height: 0; justify-content: flex-end; scroll-snap-align: start; }
  .news-card__image { flex: 1 1 auto; height: auto; min-height: 0; margin-bottom: -60px; }
  .news-card__date { right: 16px; top: 16px; font-size: .875rem; line-height: 1.1875rem; }
  .news-card__body { flex: 0 0 auto; min-height: 104px; padding: 20px 16px; }
  .news-card h3 { font-size: .875rem; line-height: 1.25rem; }

  /* CTA: сплошная карточка без фоновой картинки, кнопки по центру («Получить консультацию» первая) */
  .cta { height: auto; padding: 32px 24px; }
  .cta__bg { display: none; }
  .cta__copy { gap: 8px; }
  .cta h2 { font-size: 2rem; line-height: 2.5rem; }
  .cta p { width: min(592px, 100%); color: rgba(255,255,255,.9); font-size: 1.125rem; line-height: 1.75rem; }
  .cta__actions { height: auto; margin-top: 32px; flex-wrap: wrap; justify-content: center; align-items: center; }
  .cta__actions .btn--dark { order: -1; }

  /* FAQ (Figma «Вопросы 2+ 768px», 482:2031): заголовок 32/40 medium через 48px под шапкой, выровнен по
     логотипу (шапка с отступом 40px, список — 32px, поэтому padding-left 8px), список через 48px.
     Карточки те же, что на десктопе (72px, скругление 24px, текст 20px, стрелка 48px), но боковой отступ
     32px — в макете первые четыре карточки с 48px, остальные одиннадцать с 32px, взят второй вариант.
     Текст ответа — 28px от низа вопроса (в макете панель на 44px под карточкой с padding-top 72px). */
  .faq-section { padding: 48px 32px 0; }
  .faq-section h1 { margin-bottom: 48px; padding-left: 8px; font-size: 2rem; font-weight: 500; line-height: 2.5rem; letter-spacing: 0; }
  .faq-item__toggle { padding-left: 32px; padding-right: 32px; gap: 16px; }
  .faq-item__text { padding: 28px 32px 36px; }

  /* ПРОДУКТЫ (Figma «products_768px», 554:22488): секция с отступом 32px, переключатель 704×64 как на
     десктопе, панель через 36px (отступы 32/24), заголовок 32/40 medium, описание 16px тёмным на всю
     ширину колонки, скриншоты в две колонки. Вьюер (553:22404): картинка 684px (боковые поля 42px),
     подпись 14/20, стрелки 40px прижаты к краям окна, крестик 24px в правом верхнем углу. */
  .products-section { padding: 24px 32px; }
  .products-panel { margin-top: 36px; padding: 32px 24px; }
  .products-panel__title { font-size: 2rem; font-weight: 600; line-height: 2.5rem; letter-spacing: 0; }
  .products-panel__desc { max-width: none; color: var(--vrubel); font-size: 1rem; line-height: 1.5rem; }
  .products-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer { --viewer-pad-top: 72px; --viewer-pad-bottom: 32px; --viewer-pad-x: 42px; }
  .viewer__caption { font-size: .875rem; }
  .viewer__close { top: -60px; right: -42px; width: 44px; height: 44px; }
  .viewer__close img { width: 24px; height: 24px; }
  .viewer__arrow--prev { left: -42px; }
  .viewer__arrow--next { right: -42px; }

  /* 404: те же пропорции, что и на планшетных макетах остальных страниц — заголовок 32/40, текст 16/24 */
  .notfound-section { padding: 80px 32px 120px; }
  .notfound__code { font-size: 6rem; letter-spacing: -1.92px; }
  .notfound__title { margin-top: 20px; font-size: 2rem; font-weight: 600; line-height: 2.5rem; letter-spacing: 0; }
  .notfound__text { font-size: 1rem; line-height: 1.5rem; }
  .notfound__actions { margin-top: 32px; }

  /* FOOTER: о компании над меню, три колонки на всю ширину, строка контактов в два ряда */
  .footer { min-height: 0; padding: 48px 32px 0; }
  .footer__top { flex-direction: column; gap: 48px; padding-bottom: 48px; }
  .footer__about { width: 100%; flex: none; }
  .footer__menu { width: 100%; justify-content: space-between; gap: 16px; }
  .footer__col { width: auto; flex: 0 1 220px; min-width: 0; }
  .footer__col a { white-space: normal; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 0 25px; }
  .footer__bar-group, .footer__bar-group--right { flex-wrap: wrap; gap: 12px 32px; }
  /* Вложенные группы тоже переносятся: при 480–500px два документа в .footer__policies в строку не помещаются */
  .footer__contacts, .footer__policies { flex-wrap: wrap; gap: 12px 24px; }
  .footer__legal { padding: 24px 0; }
}

@media (max-width: 479px) {
  /* Мобильный макет Figma «1 / Mobile 361» (360px): контент 328px с отступом 16px, карточки проектов,
     TicketNet, тарифов, поддержки и CTA — на всю ширину экрана. Типографика: заголовки секций 28/34,
     текст 16/24, кнопка L — 50px / скругление 16px, кнопка S — 40px / 12px. */
  .btn { max-width: 100%; }
  .btn--ghost { height: 40px; padding: 8px 20px; border-radius: 12px; font-size: .875rem; line-height: 1.25rem; }
  .btn--dark, .btn--green { min-height: 50px; border-radius: 16px; padding: 12px 20px; }
  .inline-arrow { margin-left: 8px; }

  /* HERO. Шапка 64px, под ней картинка 360×424 (правая часть кадра), текст и бейдж — ниже картинки
     в потоке на фоне страницы (в макете они не наложены на фото). Высота hero складывается сама:
     64 + 424 + 302. */
  .hero { height: auto; }
  .hero__bg { top: 64px; height: 424px; object-position: 100% center; }
  .hero::before { top: 64px; bottom: auto; height: 424px; }
  .hero__header { height: 64px; padding: 10px 16px; }
  .logo { width: 139px; height: 16px; }
  .hero__actions { gap: 12px; height: 40px; }
  .header-language { height: 24px; padding: 2px 8px; font-size: .875rem; }
  .header-burger { width: 40px; height: 40px; border-radius: 12px; }
  .hero__nav { left: 16px; right: 16px; padding: 8px; border-radius: 20px; }
  .nav-link { min-height: 44px; padding: 10px 14px; font-size: .9375rem; border-radius: 10px; }
  .nav-link--dropdown { padding-right: 36px; }
  .nav-link--dropdown::after { right: 16px; }
  .header-contact--menu { height: 44px; padding: 12px 20px; font-size: .8125rem; }
  .menu__inner { gap: 16px; padding: 8px 2px 2px; }
  .menu__cols { gap: 4px 24px; }
  .menu__col { gap: 2px; }
  .menu__item { padding: 6px 10px; font-size: .9375rem; }
  .menu__block { padding: 20px 20px 16px; border-radius: 16px; }
  .menu__logo, .menu__brand { margin-bottom: 16px; }
  .menu__brand-mark { height: 28px; }
  .menu__brand-name { font-size: 1.25rem; }
  .menu__text { font-size: .875rem; line-height: 1.25rem; }
  .hero__content {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
    margin-top: 424px;
    padding: 20px 16px;
    transform: none;
    gap: 20px;
  }
  .hero__copy { width: 100%; gap: 10px; }
  .hero h1 { font-size: 2rem; line-height: 2.375rem; letter-spacing: -1px; }
  .hero__subtitle { font-size: 1rem; line-height: 1.5rem; }
  .hero__badge { width: 100%; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.10); }
  .hero__badge-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .hero__badge p, .hero__badge p:lang(en) { font-size: .875rem; line-height: 1.125rem; }

  /* Отступы секций: карточки проектов, TicketNet, тарифов, поддержки и CTA — на всю ширину экрана */
  .projects-section, .news-section { padding: 64px 0; }
  .interface-section, .process-section { padding: 64px 16px; }
  .tariffs-section, .support-section { padding: 0; }
  .cta-section { padding: 0 0 48px; }

  /* PROJECTS: карточка 720px (32px 16px), заголовок 28/34, метрика 72/80, слайд 280px, полоса логотипов 32px,
     внизу ряд «стрелка — точки — стрелка». Стрелки остаются в .projects__slide (overflow: visible)
     и опускаются под полосу логотипов: 100% + 24 (зазор) + 32 (логотипы) + 24 (зазор). */
  .projects { padding: 32px 16px; }
  .section-head { min-height: 40px; }
  .section-head h2 { font-size: 1.75rem; line-height: 2.125rem; }
  .projects__body { margin-top: 32px; }
  .projects__row { gap: 24px; }
  .metric-number { font-size: 4.5rem; line-height: 5rem; letter-spacing: -1px; }
  .metric-copy { font-size: 1rem; font-weight: 400; line-height: 1.5rem; }
  .projects__slide { height: 280px; }
  /* Кроп макета: фото 906×486 (cover в боксе 705×486), сдвиг −100/−63 — в процентах от слайда 328×280 */
  .projects__slide-image { width: 276.2%; height: 173.6%; left: -30.5%; top: -22.5%; }
  .projects__panel::after { background: linear-gradient(0deg, rgba(0,0,0,.85) 31.893%, rgba(0,0,0,0) 61.934%); }
  .slide-copy { left: 0; bottom: 0; width: 100%; max-width: none; padding: 20px 16px 16px; }
  .slide-copy h3 { margin-bottom: 4px; font-size: 1.5rem; line-height: 2.125rem; }
  .slide-copy p { font-size: .875rem; line-height: 1rem; }
  .brand-strip { height: 32px; gap: 4px; }
  .brand-strip__item { height: 28px; }
  .round-arrow { top: calc(100% + 80px); margin-top: 0; }
  .round-arrow--left { left: 0; }
  .round-arrow--right { right: 0; }
  .projects-pagination { height: 48px; margin-top: 24px; align-items: center; }

  /* TICKETNET: карточка (32px 16px) без фиксированной высоты: текст от 176px (макет) и выше — длина абзацев
     разная (у «Всё необходимое» пять строк, на английской странице больше), поэтому слайды сложены стопкой
     в grid (grid-area 1/1 вместо absolute) и высота области слайдов = самому высокому слайду (минимум
     макетные 602px: 176 + 24 + 402). На более коротких слайдах запас уходит в текстовую область (flex: 1),
     картинка всегда у низа. Стрелки — в потоке под слайдами (зазор 16px), ряд по центру через
     flex-wrap + order, между стрелками 44px */
  .ticketnet { height: auto; padding: 32px 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 44px; }
  .ticketnet__slides { flex: 0 0 100%; height: auto; display: grid; }
  .ticketnet__slide { position: relative; inset: auto; grid-area: 1 / 1; gap: 24px; }
  .ticketnet__copy { height: auto; min-height: 176px; flex: 1 0 auto; align-items: flex-start; }
  .ticketnet__copy-inner, .ticketnet__copy-inner--454 { gap: 12px; justify-content: flex-start; }
  .ticketnet h2 { font-size: 1.75rem; line-height: 2.125rem; }
  .ticketnet p { font-size: 1rem; line-height: 1.5rem; }
  .ticketnet__visual { height: 402px; flex-basis: 402px; }
  .ticketnet__visual--ticketnet > img { width: 233.8%; height: 114.4%; left: -137.2%; top: -14.4%; } /* билет (правая треть кадра) по центру, шириной ~260px, низ обрезан */
  .ticketnet__visual--constructor > img { width: calc(100% - 24px); height: auto; top: 50%; transform: translate(-50%, -50%); }
  /* Оборудование (Figma 349:3134): фото 109.35% по ширине в пропорции файла, прижато к низу, по бокам срезано на ~15px, сверху
     синяя подложка (в макете #0487cf; взят цвет верхней кромки картинки, чтобы не было шва) */
  .ticketnet__visual--equipment { background-color: #0188c9; }
  .ticketnet__visual--equipment > img { position: absolute; width: 109.35%; height: auto; left: -4.63%; bottom: 0; max-width: none; object-fit: fill; }
  /* Возможности (Figma 323:7103, 328×402): вместо сетки 3×3 — девять строк 310×37.5 в столбик с отступом 8px и зазором 6px,
     текст 12/16 с боковым отступом 12px по вертикальному центру строки, без переносов; иллюстрации в макете скрыты */
  .ticketnet__visual--features { padding: 8px; }
  .ticketnet-features { display: flex; flex-direction: column; gap: 6px; }
  .ticketnet-feature { flex: 1 1 0; min-height: 0; display: flex; align-items: center; padding: 0 12px; border-radius: 12px; }
  .ticketnet-feature p { width: auto; font-size: .75rem; line-height: 1rem; letter-spacing: 0; }
  .ticketnet-feature p br { display: none; }
  .ticketnet-feature__art { display: none; }
  .ticketnet > .round-arrow { position: relative; z-index: auto; bottom: auto; left: auto; right: auto; }
  .ticketnet [data-ticketnet-prev] { order: 1; }
  .ticketnet [data-ticketnet-next] { order: 2; }

  /* INTERFACE: без карточки — картинка 328×239 со скруглением, текст и кнопка на всю ширину на фоне страницы */
  .interface-card { padding-bottom: 0; border-radius: 0; background: transparent; overflow: visible; align-items: stretch; }
  .interface-visual { aspect-ratio: auto; height: 239px; margin-bottom: 0; border-radius: 24px; }
  .interface-visual img { width: 182.9%; height: 100%; left: -41.5%; top: 0; object-fit: fill; } /* кадр 600×239 по центру */
  .interface-visual::after { background: none; }
  .interface-copy { width: 100%; gap: 8px; padding: 16px 0 0; }
  .interface-copy h2 { font-size: 1.75rem; line-height: 2.125rem; }
  .interface-copy p { font-size: 1rem; line-height: 1.5rem; }
  .interface-card .btn { width: 100%; margin-top: 32px; }

  /* TARIFFS: карточка на всю ширину 518px — сверху окно 360×320 с пазлом по центру, ниже заголовок и кнопка по центру */
  .tariffs-card { height: 518px; padding: 0; display: flex; flex-direction: column; align-items: center; }
  .tariffs-visual { position: relative; right: auto; top: auto; bottom: auto; transform: none; width: 100%; height: 320px; overflow: hidden; background: none; }
  .tariffs-visual img { inset: auto; width: 1160px; height: 324px; left: calc(50% - 921px); top: -4px; } /* бокс макета 1160×324 на x = −741px при 360px (Figma 293:4891): пазл в правой части кадра встаёт по центру экрана; от середины, чтобы при 360–479px не уезжал */
  .tariffs-copy { width: 269px; height: auto; padding: 34px 0 0; gap: 32px; align-items: center; text-align: center; }
  .tariffs-copy h2 { font-size: 1.75rem; line-height: 2.125rem; }
  .tariffs-copy .btn { width: auto; height: 50px; padding: 12px 20px; }

  /* PROCESS (Figma 293:4896): ряд «рельса 32px + зазор 16px + карточки 184px» шириной 232px по центру
     контента, карточки 184×297 в столбик без прокрутки. Вертикальная «рельса» рисуется в .process-cards::before:
     точки на середине высоты каждой карточки, отрезки линии между точками с зазором 16px от центра точки
     (как в SVG макета). */
  .process { gap: 48px; }
  .process-copy h2 { margin-bottom: 16px; font-size: 1.75rem; line-height: 2.125rem; }
  .process-copy p { font-size: 1rem; line-height: 1.5rem; }
  .process-copy p br { display: none; }
  .process-rail { width: 100%; margin-right: 0; overflow: visible; scroll-snap-type: none; }
  .process-cards {
    --card-h: 297px;
    --card-gap: 16px;
    --rail-step: calc(var(--card-h) + var(--card-gap)); /* шаг точек = высота карточки + зазор */
    position: relative;
    width: max-content;
    margin: 0 auto;
    padding: 0 0 0 48px; /* 32px рельса + 16px зазор */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-gap);
  }
  .process-cards::after { display: none; }
  .process-cards::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background:
      radial-gradient(circle, #1296DB 6px, transparent 6.5px)
        0 calc(-1 * var(--card-gap) / 2) / 32px var(--rail-step) repeat-y, /* круг по центру плитки высотой карточка+зазор */
      repeating-linear-gradient(180deg,
        #B3C0D8 0 calc(var(--rail-step) - 32px),
        transparent calc(var(--rail-step) - 32px) var(--rail-step))
        15.5px calc(var(--card-h) / 2 + 16px) / 1px calc(4 * var(--rail-step) - 32px) no-repeat;
  }
  .process-card { flex: none; width: 184px; height: var(--card-h); padding: 18px; scroll-snap-align: none; }
  .process-card__num { font-size: 3rem; line-height: 3rem; }
  .process-card h3 { font-size: .875rem; line-height: 1rem; }

  /* SUPPORT: карточка на всю ширину 495px — сверху окно 360×241 с иллюстрацией (774×330, сдвиг −326),
     ниже текст (24px сверху) и кнопка на всю ширину */
  .support-card { min-height: 0; height: 495px; padding: 0; }
  .support-visual { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; display: block; width: 100%; height: 241px; overflow: hidden; }
  .support-visual__inner { position: absolute; left: -326px; top: 0; width: 774px; height: 330px; transform: none; }
  .support-visual__inner::after { background: linear-gradient(180deg, rgba(244,245,247,0) 55%, #F4F5F7 73%); } /* низ растворяется к текстовой части */
  .support-copy { height: auto; padding: 24px 16px 30px; gap: 32px; }
  .support-copy h2 { margin-bottom: 12px; font-size: 1.75rem; line-height: 2.125rem; }
  .support-copy p { font-size: 1rem; line-height: 1.5rem; }
  .support-copy p br { display: none; }
  .support-copy .btn { width: 100%; }

  /* NEWS: карточки 328×280 в столбик, без прокрутки; тело 100–120px внизу поверх картинки */
  .news { padding: 36px 16px; }
  .news .section-head { min-height: 40px; }
  .news-list { margin-top: 32px; width: 100%; margin-right: 0; display: grid; grid-template-columns: 1fr; gap: 24px; overflow: visible; }
  .news-list::after { display: none; }
  .news-card { height: 280px; }
  .news-card__image img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .news-card__date { padding: 2px 6px; line-height: 1.25rem; }
  .news-card__body { min-height: 100px; }
  .news-card__footer { gap: 8px; }
  .news-card h3 { font-size: .875rem; line-height: 1.25rem; }

  /* CTA: карточка на всю ширину 332px (32px 24px), кнопки на всю ширину в столбик */
  .cta { padding: 32px 24px; }
  .cta__copy { gap: 12px; }
  .cta h2 { font-size: 1.75rem; line-height: 2.125rem; }
  .cta p { font-size: 1rem; line-height: 1.5rem; }
  .cta__actions { width: 100%; margin-top: 24px; flex-direction: column; gap: 16px; }
  .cta__actions .btn, .cta__actions .btn--green { width: 100%; }

  /* FAQ (Figma «Вопросы 2+ 360px», 483:2498): заголовок 28/34 через 24px под шапкой, список через 32px;
     карточки 328px с зазором 20px, кнопка вопроса 80px с отступом 16px, текст 16px с line-height 1.2
     (в макете 19px, ширина 248px) и стрелка 48px вплотную (без зазора); ответ 16/24 — 20px от низа вопроса,
     16px по бокам, 24px снизу. Стрелка, зазор карточек и панель ответа — как на десктопе. */
  .faq-section { padding: 24px 16px 0; }
  .faq-section h1 { margin-bottom: 32px; padding-left: 0; font-size: 1.75rem; line-height: 2.125rem; }
  .faq-item__toggle { min-height: 80px; padding: 12px 16px; gap: 0; font-size: 1rem; line-height: 1.2; }
  .faq-item__text { padding: 20px 16px 24px; }

  /* ПРОДУКТЫ (Figma «products_360px», 561:22971): переключатель 328×40 с отступом 16px, ниже через 24px
     панель на всю ширину экрана (отступы 32/16), заголовок 28/34 medium в строку с кнопкой PDF 32px,
     описание 14px под ними, скриншоты в один столбик. Вьюер (556:22591): картинка 328px, подпись 12/20
     под ней, стрелки 24px — ряд по центру под подписью (в макете зазор между ними 36px). */
  .products-section { padding: 24px 0; }
  .products-switch { margin: 0 16px; height: 40px; padding: 2px 6px; border-radius: 12px; }
  /* Боковой отступ таба 16px → 8px: в макете на «Info Admin» приходится треть от 328px, и с 16px
     название не помещается. Ниже макетных 360px названия перестают влезать и при 8px, поэтому шрифт
     линейно уменьшается до 13px при 320px (макетные 16px — начиная с 360px; на английской странице
     «Ticket sales» длиннее, поэтому минимум именно 13px). */
  .products-switch__tab { height: 100%; padding: 0 8px; border-radius: 8px; font-size: clamp(.8125rem, -11px + 7.5vw, 1rem); }
  .products-switch__tab + .products-switch__tab::before { height: 24px; }
  .products-panel { margin-top: 24px; padding: 32px 16px; }
  .products-panel__head { align-items: center; padding-bottom: 20px; }
  .products-panel__title { font-size: 1.75rem; line-height: 2.125rem; }
  .products-panel__desc { grid-column: 1 / -1; margin-top: 16px; font-size: .875rem; line-height: 1.25rem; }
  .products-panel__pdf { height: 32px; padding: 8px 16px; border-radius: 8px; }
  .products-screens { grid-template-columns: minmax(0, 1fr); }
  .viewer { --viewer-pad-top: 64px; --viewer-pad-bottom: 72px; --viewer-pad-x: 16px; --viewer-caption-h: 44px; }
  .viewer__caption { padding: 12px 10px; font-size: .75rem; }
  .viewer__close { top: -52px; right: -16px; }
  .viewer__close img { width: 16px; height: 16px; }
  /* Стрелки уходят под подпись: пара 24 + 36 + 24 = 84px по центру картинки, в 16px под подписью */
  .viewer__arrow { top: auto; bottom: -40px; width: 24px; height: 24px; transform: none; }
  .viewer__arrow img { width: 24px; height: 24px; }
  .viewer__arrow--prev { left: calc(50% - 42px); }
  .viewer__arrow--next { right: calc(50% - 42px); }

  /* 404: заголовок 28/34, кнопки в столбик на всю ширину контента — как кнопки CTA на мобильном */
  .notfound-section { padding: 48px 16px 80px; }
  .notfound__code { font-size: 4.5rem; letter-spacing: -1.44px; }
  .notfound__title { margin-top: 16px; font-size: 1.75rem; line-height: 2.125rem; }
  .notfound__actions { width: 100%; flex-direction: column; margin-top: 24px; }
  .notfound__actions .btn { width: 100%; }

  /* FOOTER: колонки меню в столбик; строка контактов сеткой — телефон и язык в один ряд,
     ниже техподдержка и документы по одному в строке (группы раскрыты через display: contents) */
  .footer { padding: 48px 16px 0; }
  .footer__top { gap: 32px; padding-bottom: 32px; }
  .footer__about .logo { width: 139px; height: 16px; }
  .footer__about p { font-size: .875rem; line-height: 1.25rem; }
  .footer__menu { flex-direction: column; gap: 36px; }
  .footer__col { width: 100%; flex: none; }
  .footer__col h3 { margin-bottom: 12px; font-size: 1rem; line-height: 1.25rem; }
  .footer__col a { font-size: .875rem; line-height: 1rem; }
  .footer__col a + a { margin-top: 4px; }
  .footer__bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px; padding: 24px 0; }
  .footer__bar-group, .footer__contacts, .footer__policies { display: contents; }
  .footer__phone { order: 1; }
  .footer__lang { order: 2; justify-self: end; }
  .footer__link { grid-column: 1 / -1; justify-self: start; white-space: normal; }
  .footer__support { order: 3; margin-top: 12px; }
  .footer__contacts .footer__link { order: 4; }
  .footer__policies .footer__link { order: 5; }
  .footer__legal { padding: 24px 0; }
}