/* layout.css — header, footer, сетка */

:root {
  --header-h: 56px;
}

/* ── Header ── */

/* Хедер — тёмная «рамка» в ОБЕИХ темах: сразу отделяет верх страницы. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background-color: var(--frame);
  border-bottom: 0.5px solid transparent;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  position: relative;
  z-index: 101;
}

/* ── Логотип: один класс .logo, единый размер на всех страницах ── */
.logo {
  font-family: var(--font-base);
  font-size: var(--logo-size);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
  transition: opacity 0.15s;
}
.logo:hover { opacity: 0.75; color: var(--text); }
/* Футерная версия — крупнее одной переменной */
.logo--footer { font-size: var(--logo-size-footer); }

/* Позиционирование в шапке; размер и стиль задаёт .logo */
/* padding растит зону нажатия до 44×44, отрицательный margin возвращает
   глиф на прежнее место — визуально ничего не сдвигается. */
.site-header__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  margin-inline: -10px;
}

/* Бургер (мобайл) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;               /* полоски прежние, зона нажатия 44×44 */
  height: 44px;
  flex-shrink: 0;
  margin-right: -8px;
  order: 3;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--frame-text);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Мобильная навигация — полноэкранный оверлей */
.main-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh; /* dvh учитывает динамический вьюпорт iOS (адресная строка) */
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--space-xl)) var(--space-m) var(--space-l);
  background-color: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: visibility 0s 320ms, opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Топбар внутри мобильного оверлея: крестик | смена темы | лого */
.main-nav__topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 var(--space-m);
}

/* .main-nav__logo — размер и стиль задаёт .logo; позиционирование ниже */

.main-nav__topbar .main-nav__logo  { grid-column: 1; }
.main-nav__topbar .main-nav__close { grid-column: 2; justify-self: end; }

.main-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;               /* крестик прежний, зона нажатия 44×44 */
  height: 44px;
  margin-right: -8px;
  justify-self: end;
  color: var(--text);
  transition: opacity 0.15s;
}
.main-nav__close:hover { opacity: 0.6; }

.main-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: visibility 0s, opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Пока оверлей открыт, логотип шапки лежит под ним и не виден — убираем его
   и из дерева доступности, иначе на экране одна ссылка «SL», а скринридер
   читает две. Видимая копия — .main-nav__logo в топбаре оверлея.
   Только мобильный: на десктопе топбар display:none и копия одна. */
@media (max-width: 47.99em) {
  .site-header__inner:has(.main-nav.is-open) .site-header__logo {
    visibility: hidden;
  }
}

/* Пункты по центру экрана: раньше низ меню держали соцсети, теперь
   их нет и список без центрирования висел бы у верхнего края. */
.main-nav__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

.main-nav__list li + li {
  border-top: none;
}

.main-nav__link {
  display: block;
  padding: var(--space-xs) 0;
  font-family: var(--font-base);
  font-size: clamp(2.8125rem, 11vw, 5.625rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
  transition: color 150ms;
}

.main-nav__link:hover,
.main-nav__link[aria-current="page"] {
  color: var(--accent-text);
}

/* На узких экранах (≤360px) нижняя граница clamp (40px) не давала «ПОРТФОЛИО»
   влезть в строку, и слово срезалось краем экрана. Там, и только там, кегль
   идёт от ширины вьюпорта. */
@media (max-width: 22.5em) {
  .main-nav__link { font-size: min(2.8125rem, 11.5vw); }
}

/* Десктоп (768px+) */
@media (min-width: 48em) {
  /* Трёхколоночная сетка: лого | навигация по центру | пустая колонка для симметрии */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .nav-toggle { display: none; }
  .main-nav__topbar { display: none; }

  .main-nav {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    padding: 0;
    background: none;
    width: auto;
    height: auto;
    overflow: visible;
  }

  .main-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 2.25rem;
  }

  .main-nav__list li + li { border-top: none; }

  .main-nav__link {
    padding: 0;
    font-family: var(--font-base);
    font-size: 0.7875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: normal;
  }

  .main-nav__link:hover,
  .main-nav__link[aria-current="page"] {
    color: var(--text);
  }
}

/* Десктопная навигация лежит в тёмном баре — ссылки светлые. */
@media (min-width: 48em) {
  .main-nav__link { color: var(--frame-muted); }
  .main-nav__link:hover,
  .main-nav__link[aria-current="page"] { color: var(--frame-text); }
}

/* Десктоп — по макету: шапка 94 единицы, лого 36/28 Medium, пункты меню
   24/28 капсом без трекинга. Неактивные пункты в макете белые на 30%, на
   нашем фоне это 2.6:1 — ниже AA, поэтому они на --text-muted (50%).
   Шаг между пунктами — 72 единицы, у «Услуг» в него входит стрелка. */
@media (min-width: 64em) {
  :root {
    --header-h: max(64px, calc(94 * var(--u)));
    --logo-size: max(24px, calc(36 * var(--u)));
  }

  .main-nav__list { gap: calc(72 * var(--u)); }

  .main-nav__link {
    font-size: max(15px, calc(24 * var(--u)));
    line-height: 1.1667;
    letter-spacing: 0;
  }

  .main-nav__item--services { gap: calc(4 * var(--u)); }
  .main-nav__caret svg {
    width: max(14px, calc(20 * var(--u)));
    height: max(14px, calc(20 * var(--u)));
  }
}

/* ── Панель услуг: второй уровень навигации ──
   Все услуги видны прямо из шапки. Пункт «Услуги» при этом остаётся ссылкой
   на хаб — панель открывает только стрелка рядом (и наведение на десктопе).
   Родительский пункт, ставший переключателем, перестаёт кликаться, и до хаба
   уже не добраться — здесь этого нет.

   Без JS панель не открывается вовсе, поэтому базовое состояние — display:none:
   иначе четырнадцать ссылок вываливались бы в шапку на каждой странице. */

.main-nav__item--services {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.main-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;              /* палец: зона нажатия 44×44 */
  height: 44px;
  color: var(--text-muted);
  transition: color 150ms, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.main-nav__caret svg { width: 28px; height: 28px; }
.main-nav__caret:hover { color: var(--text); }
.main-nav__caret[aria-expanded="true"] { transform: rotate(180deg); }

.main-nav__item--services:has(.main-nav__caret[aria-expanded="true"]) > .main-nav__link {
  color: var(--accent-text);
}

.services-panel { display: none; }

/* Раскрытие тем же приёмом, что и «Подробнее» на услугах: 0fr → 1fr.
   min-height: 0 обязателен — иначе строка 0fr не схлопнется. visibility
   убирает свёрнутые ссылки из порядка табуляции. */
.js .services-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Закрытая панель на планшете и десктопе остаётся коробкой 645×468 и больше:
     opacity: 0 прячет её от глаза, но не убирает из hit-теста, а лежит она в
     поддереве пункта «Услуги» — наведение на пустоту под шапкой приходило как
     mouseenter на пункт и открывало меню. Зона наведения обязана совпадать с
     видимым: сам пункт плюс открытая панель. */
  pointer-events: none;
}

.js .services-panel.is-open { grid-template-rows: 1fr; pointer-events: auto; }

.js .services-panel__inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 320ms;
}

.js .services-panel.is-open .services-panel__inner {
  visibility: visible;
  transition: visibility 0s;
}

/* Отступы — на детях, а не на .services-panel__inner: у схлопнутой строки
   0fr собственный padding остаётся высотой и панель не закрывается до конца. */
.services-panel__cols {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-4) var(--s-2);
}

.services-panel__cat {
  margin: 0 0 var(--s-1);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.services-panel__link,
.services-panel__all {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.25;
  transition: color 150ms;
}

.services-panel__link { color: var(--text); }
.services-panel__link:hover { color: var(--accent-text); }

.services-panel__all {
  gap: var(--s-2);
  color: var(--accent-text);
  font-size: var(--step--1);
  border-top: 1px solid var(--border);
}
.services-panel__all:hover { color: var(--text); }

/* Открытая панель делает список выше экрана. При justify-content: center
   верх списка уезжает за край и до него не доскроллить. */
.main-nav__list:has(.services-panel.is-open) { justify-content: flex-start; }

@media (min-width: 48em) {
  .main-nav__item--services { gap: 2px; }

  .main-nav__caret {
    width: 24px;
    height: 44px;
    color: var(--frame-muted);
  }
  .main-nav__caret svg { width: 14px; height: 14px; }
  .main-nav__caret:hover { color: var(--frame-text); }

  .main-nav__item--services:has(.main-nav__caret[aria-expanded="true"]) > .main-nav__link {
    color: var(--frame-text);
  }

  /* Панель висит под шапкой и центрируется по контейнеру, а не по пункту:
     иначе на 1280px четыре колонки уезжают за край экрана. Ширина отбивается
     теми же полями, что и у .container, — за края не вылезет никогда, а лого
     остаётся в строке шапки, выше панели. */
  .js .services-panel {
    position: absolute;
    top: calc(100% + var(--s-2));
    left: 50%;
    width: min(67.5rem, calc(100% - 2 * var(--gutter)));
    display: block;
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .js .services-panel.is-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .js .services-panel__inner {
    overflow: visible;
    padding: var(--s-6);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    transition: visibility 0s 200ms;
  }

  .services-panel__cols {
    grid-template-columns: repeat(2, 1fr);
    padding-block: 0;
  }

  .services-panel__link {
    min-height: 32px;
    font-size: var(--step--1);
  }

  .services-panel__all {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
  }
}

/* Десктоп — в единицах макета, как и сама шапка. На rem панель после
   перехода базы на 16px сжалась до 14px подписей при 24-единичном меню
   над ней и читалась сноской, а не вторым уровнем навигации. */
@media (min-width: 64em) {
  .js .services-panel { width: min(calc(1400 * var(--u)), calc(100% - 2 * var(--gutter))); }

  .js .services-panel__inner { padding: calc(48 * var(--u)); }

  .services-panel__cols {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(40 * var(--u));
  }

  .services-panel__cat {
    margin-bottom: calc(16 * var(--u));
    font-size: max(14px, calc(20 * var(--u)));
    letter-spacing: 0;
  }

  .services-panel__link {
    min-height: max(36px, calc(52 * var(--u)));
    font-size: max(17px, calc(24 * var(--u)));
  }

  .services-panel__all {
    margin-top: calc(40 * var(--u));
    padding-top: calc(24 * var(--u));
    font-size: max(15px, calc(20 * var(--u)));
  }
}

/* Переход снимаем со всех правил, включая раскрытое состояние (оно
   специфичнее и иначе возвращает transition обратно) и всё содержимое панели.
   Дело не в красоте: reset.css при reduce обрезает длительность до
   0.01ms !important, но не свойство, поэтому каждый узел внутри получает
   transition: all — и унаследованная visibility анимируется на каждом уровне
   вложенности. Панель открывается, а её ссылки ещё кадр-другой недоступны
   фокусу: клавиатурное открытие приводит в пустоту. */
@media (prefers-reduced-motion: reduce) {
  .js .services-panel,
  .js .services-panel__inner,
  .js .services-panel.is-open .services-panel__inner,
  .js .services-panel * { transition: none; }
  /* Стрелка остаётся перевёрнутой — это состояние кнопки, а не анимация. */
  .main-nav__caret { transition: color 150ms; }
}

/* ── Footer — поверхность --surface, адаптируется под тему ──
   Раскладка: верхняя полоса (бренд+навигация | контакты) → ряд колонок услуг
   → нижняя полоса. Все цвета — токены темы, работает в светлой и тёмной. */

.site-footer {
  /* моб.: 48px сверху / 24px снизу */
  padding-top: 48px;
  /* Учитываем жестовую полосу iOS, чтобы низ футера не прятался под неё */
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background-color: var(--surface);
  color: var(--text);
}

/* 96px снизу, а не 32: от 48em в правом нижнем углу висит кнопка Telegram
   (.tg-btn, зона 71–74px от края окна). При 32px она на 768–1024px
   накрывала «Настройки cookie» в последней строке, когда страница
   докручена до конца. */
@media (min-width: 48em) {
  .site-footer { padding-bottom: calc(var(--s-9) + env(safe-area-inset-bottom)); }
}

/* ── Верхняя полоса ── */
.site-footer__top {
  display: flex;
  flex-direction: column;   /* моб.: в столбик, по левому краю */
  align-items: flex-start;
  gap: var(--space-l);
}

@media (min-width: 48em) {
  .site-footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-l);
  }
}

/* Логотип SL в футере — размер задаёт .logo--footer */

/* Дескриптор в две строки */
.site-footer__tagline {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: var(--space-s);
  line-height: 1.5;
}

/* Горизонтальный ряд навигации в верхней полосе */
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;                 /* 12 + 2×4px padding ссылки = прежние 20px */
  margin-top: var(--space-m);
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;          /* тап-зона на мобильном */
  min-width: 44px;           /* короткие пункты вроде «Бриф» тоже добираем */
  padding-inline: 4px;
  font-size: 15px;
  color: var(--text-muted);
  transition: color 150ms ease;
}

/* Правая часть: почта, статус, соцсети */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* моб.: по левому краю */
  gap: var(--space-s);
}

@media (min-width: 48em) {
  .site-footer__contact { align-items: flex-end; }
}

.site-footer__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -9px;        /* зона выросла, положение строки прежнее */
  font-size: 16px;
  color: var(--text);
  transition: color 150ms ease;
}
.site-footer__email:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__status {
  font-size: 14px;
  color: var(--accent-text);  /* акцент как текст: проходит WCAG AA в обеих темах */
}

/* Конкретная дата старта — второй строкой, спокойным цветом: «доступна»
   остаётся акцентом, дата уточняет. Заполняется из SITE_CONFIG (main.js). */
.site-footer__status-date {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}

/* Иконки соцсетей в ряд */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--surface-sunk);
  color: var(--text);
  transition: background-color 150ms ease, color 150ms ease;
}


/* ── Ряд колонок услуг ── */
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* моб. и планшет: 2 в ряд */
  gap: 32px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 0.5px solid var(--border);
}


/* Заголовки колонок — кликабельные, ведут на раздел услуг */
.site-footer__col-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--space-s);
}
.site-footer__col-title a { color: inherit; transition: color 150ms ease; }

/* Пункты колонок */
.site-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 0;                    /* отступ переехал в padding ссылок, шаг строк тот же */
  margin-block: -11px;       /* гасим крайние padding, высота колонки прежняя */
}

.site-footer__col-list a {
  display: block;
  padding-block: 11px;
  font-size: 15px;
  color: var(--text-muted);
  transition: color 150ms ease;
}

/* ── Ховеры: только там, где есть настоящий указатель ── */
@media (hover: hover) {
  .site-footer__nav a:hover,
  .site-footer__col-title a:hover,
  .site-footer__col-list a:hover { color: var(--text); }
  .site-footer__social-link:hover {
    background-color: var(--accent);
    color: var(--accent-ink);
  }
}

/* ── Тач: отклик по :active ── */
.site-footer__nav a:active,
.site-footer__col-title a:active,
.site-footer__col-list a:active { color: var(--text); }
.site-footer__social-link:active {
  background-color: var(--accent);
  color: var(--accent-ink);
}

/* ── Нижняя полоса ── */
.site-footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 0.5px solid var(--border);
  font-size: var(--small);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;     /* моб.: в столбик */
  align-items: flex-start;
  gap: 8px;
}

@media (min-width: 48em) {
  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
  }
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.site-footer__legal a,
.site-footer__legal-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;       /* зона выросла, положение строки прежнее */
  font-size: var(--small);
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-base);
  transition: color 150ms ease;
}

@media (hover: hover) {
  .site-footer__legal a:hover,
  .site-footer__legal-btn:hover { color: var(--text); }
}
.site-footer__legal a:active,
.site-footer__legal-btn:active { color: var(--text); }

/* ── Подвал на десктопе — по макету ──
   Подвал 1920: поля 104 сверху и 143 снизу, лого 48/58, подпись и пункты
   24/30, заголовки колонок 32/38. Колонки услуг в макете неравные
   (499 · 482 · 422 · остаток) — так названия колонок стоят под нужными
   местами верхней полосы, сетка повторяет их как есть. */
@media (min-width: 64em) {
  :root { --logo-size-footer: max(30px, calc(48 * var(--u))); }

  .site-footer {
    padding-top: calc(104 * var(--u));
    padding-bottom: max(var(--s-9), calc(143 * var(--u)));
  }

  .site-footer__brand { line-height: 1.2083; }

  .site-footer__tagline,
  .site-footer__status {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }
  .site-footer__tagline { margin-top: calc(11 * var(--u)); }

  .site-footer__nav ul {
    gap: calc(32 * var(--u));
    margin-top: calc(65 * var(--u));
  }
  .site-footer__nav a {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text-secondary);
  }

  .site-footer__contact { gap: calc(35 * var(--u)); }
  .site-footer__email {
    font-size: max(17px, calc(28 * var(--u)));
    color: rgba(255, 255, 255, 0.9);
  }

  .site-footer__cols {
    grid-template-columns: calc(499 * var(--u)) calc(482 * var(--u)) calc(422 * var(--u)) 1fr;
    gap: 0;
    margin-top: calc(80 * var(--u));
    padding-top: calc(70 * var(--u));
    border-top-width: 2px;
  }

  .site-footer__col-title {
    font-size: var(--fs-h6);
    font-weight: 400;
    line-height: var(--lh-h6);
    margin-bottom: calc(17 * var(--u));
  }

  .site-footer__col-list { margin-block: calc(-20 * var(--u)); }
  .site-footer__col-list a {
    padding-block: calc(20 * var(--u));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .site-footer__bottom {
    margin-top: calc(94 * var(--u));
    padding-top: calc(40 * var(--u));
    border-top-width: 2px;
    font-size: var(--fs-small);
    color: var(--text-secondary);
  }
  .site-footer__legal { gap: calc(32 * var(--u)); }
  .site-footer__legal a,
  .site-footer__legal-btn {
    font-size: var(--fs-small);
    color: var(--text-secondary);
  }
}

/* ── Telegram floating btn ── */
/* Кнопка живёт от 48em, в правом нижнем углу: у левого края она наезжала на
   начало строк — бегущую строку на «Обо мне», первые слова текста. Отступ
   16px, с 64em — 24px. На --cookie-h её отступ намеренно НЕ завязан: подъём
   на высоту баннера (~200px) выбрасывает кнопку в первый экран, поверх CTA.
   Пока баннер висит, он её закрывает — это осознанный порядок слоёв
   (--z-cookie выше --z-float), а не случайное совпадение чисел. */
.tg-btn {
  position: fixed;
  bottom: var(--s-4);
  right: var(--s-4);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.09375rem;
  height: 3.09375rem;
  background-color: var(--telegram);
  color: var(--text);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(34,158,217,0.3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tg-btn:hover { transform: translateY(-3px); color: var(--text); }

@media (min-width: 64em) {
  .tg-btn { bottom: var(--s-5); right: var(--s-5); }
}

@media (max-width: 47.99em) { .tg-btn { display: none; } }

/* ── Progress bar ── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-overlay);
  height: 2px;
  width: 0%;
  background-color: var(--accent);
  pointer-events: none;
}

/* ── Sticky CTA (мобайл) ── */
.sticky-cta {
  position: fixed;
  bottom: var(--cookie-h); /* стоит на баннере согласия, а не под ним */
  left: 0;
  right: 0;
  z-index: var(--z-sticky-cta);
  padding: var(--space-s);
  padding-bottom: calc(var(--space-s) + env(safe-area-inset-bottom));
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  border-top: 0.5px solid var(--border);
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 300ms ease, transform 300ms ease, bottom 250ms ease;
  pointer-events: none;
}
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-cta .btn { width: 100%; max-width: 27rem; }

/* Пока на экране форма заявки из калькулятора, нижняя кнопка «Заказать дизайн»
   не нужна: она перекрывает поля и уводит с уже начатой заявки. */
body.calc-form-visible .sticky-cta { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transform: none; transition: opacity 300ms ease; }
}

.sticky-cta {
  background: var(--bg-glass);
}

@media (min-width: 48em) { .sticky-cta { display: none; } }

/* ── Ссылка «Назад» ──
   Для страниц вне основного меню (кейсы, политика): выйти оттуда иначе как
   через хедер нельзя. Отступы задаёт контекст — здесь только сам элемент. */
.back-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px; /* тап-таргет на мобильных */
  font-size: 0.8775rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms ease;
}

.back-nav__arrow {
  transition: transform 200ms ease;
}

.back-nav__link:hover { color: var(--accent-text); }
.back-nav__link:hover .back-nav__arrow { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .back-nav__arrow,
  .back-nav__link:hover .back-nav__arrow { transition: none; transform: none; }
}

/* ── Cookie-баннер ── */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookie);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-xl) calc(var(--space-m) + env(safe-area-inset-bottom)) var(--space-m);
  background-color: var(--bg);
  border-top: 0.5px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 250ms ease, transform 250ms ease, visibility 0s 250ms;
  pointer-events: none;
}

.cookie-consent.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: auto;
}

.cookie-consent__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  width: 2.53125rem;
  height: 2.53125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}
.cookie-consent__close:hover { color: var(--text); }

.cookie-consent__text {
  font-size: var(--small);
  color: var(--text-muted);
  max-width: 60ch;
}

/* На телефоне — мелкий кегль мобильной шкалы: при наборе 17px
   формулировка (её нельзя сокращать) занимала пять строк и баннер
   закрывал треть экрана. При 14/20 — четыре строки уже на 360px.
   Правое поле равно левому: крестик стоит только у первой строки, и
   место под него держит обтекаемая пустышка высотой в одну строку, а не
   поле 64px на весь текст. */
@media (max-width: 47.99em) {
  .cookie-consent { padding-right: var(--space-m); }
  .cookie-consent__text {
    font-size: var(--m-small);
    line-height: var(--m-lh-small);
  }
  .cookie-consent__text::before {
    content: "";
    float: right;
    width: 28px;
    height: 1lh;
  }
  /* Ссылка переносится целиком: иначе на 375–412px «конфиденциальности»
     уходит в последнюю строку одно, отдельно от «политики». */
  .cookie-consent__text a { white-space: nowrap; }
}

.cookie-consent__actions {
  display: flex;
  gap: var(--space-s);
}

.cookie-consent__btn {
  flex: 1;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent { transition: none; }
  .cookie-consent.is-visible { transition: none; }
}

@media (min-width: 48em) {
  .cookie-consent {
    left: var(--space-m);
    right: auto;
    bottom: var(--space-m);
    max-width: 29.25rem;
    border: 0.5px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--space-m);
  }

  /* справа место под крестик: он стоит абсолютно и иначе ложится на текст */
  .cookie-consent__text { flex: 1 1 100%; padding-right: var(--space-m); }
  .cookie-consent__actions { flex: 1 1 100%; }
  /* кнопки делят ряд поровну. Поля общей кнопки (по 60px на десктопе) на
     ширину баннера не рассчитаны: две кнопки выходили шире него, и «Принять»
     вылезала за край. min-height: auto, стоявший здесь раньше, сплющивал обе. */
  .cookie-consent__btn { flex: 1 1 0; min-width: 0; padding-inline: var(--s-3); }
}

/* ── Модальное окно «Расскажите о проекте» ── */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
}
.project-modal[hidden] { display: none; }

/* Планшет и шире — вернуть щедрые отступы (ширину диалога держит max-width) */
@media (min-width: 48em) {
  .project-modal { padding: var(--space-m); }
}

.project-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 250ms ease;
}
.project-modal.is-open .project-modal__overlay { opacity: 1; }

.project-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 33.75rem;
  max-height: calc(100dvh - 2 * var(--space-m));
  overflow-y: auto;
  background: var(--bg);
  border: 0.5px solid var(--border);
  padding: clamp(1.96875rem, 5vw, 3.09375rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 250ms ease, transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.project-modal.is-open .project-modal__dialog {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .project-modal__overlay,
  .project-modal__dialog { transition: none; }
}

.project-modal__close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  width: 2.53125rem;
  height: 2.53125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}
.project-modal__close:hover { color: var(--text); }

.project-modal__title {
  font-size: clamp(1.4625rem, 2.5vw, 1.96875rem);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--space-2xs);
  padding-right: 2.25rem;
}

.project-modal__desc {
  font-size: 0.984375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-l);
  max-width: none;
}

.project-modal__form .form-field { margin-bottom: var(--space-m); }
.project-modal__submit { width: 100%; margin-top: var(--space-2xs); }

.project-modal__divider {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin: var(--space-s) 0;
  color: var(--text-muted);
  font-size: 0.84375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.project-modal__divider::before,
.project-modal__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.project-modal__tg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border: 0.5px solid var(--border);
  color: var(--text);
  font-size: 1.0125rem;
  transition: border-color var(--transition), color var(--transition);
}
.project-modal__tg:hover { border-color: var(--text); color: var(--accent-text); }

.project-modal__note {
  margin-top: var(--space-s);
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  max-width: none;
}
.project-modal__note a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.project-modal__note a:hover { color: var(--accent-text); }

/* Пустая строка статуса не должна съедать высоту попапа */
.project-modal .form-status:empty { display: none; }

/* Невысокое окно (ноутбук): попап держится в один экран без прокрутки */
@media (max-height: 56em) {
  .project-modal__desc { margin-bottom: var(--space-m); }
  .project-modal__form .form-field { margin-bottom: var(--space-s); }
  .project-modal__divider { margin: var(--space-xs) 0; }
}

/* Мобильный: попап на весь экран и ровно в его высоту. Кегли и отступы
   ужаты так, чтобы форма, Telegram и подпись про бриф вставали без
   прокрутки даже на 600px высоты вьюпорта. */
@media (max-width: 47.99em) {
  .project-modal { padding: 0; }
  .project-modal__dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: var(--space-s) 20px;
  }
  .project-modal__close { top: var(--space-xs); right: var(--space-xs); }
  .project-modal .project-modal__title { font-size: 1.35rem; margin-bottom: 4px; }
  .project-modal__desc { font-size: 0.8rem; line-height: 1.45; margin-bottom: var(--space-xs); }
  .project-modal__form .form-field { gap: 4px; margin-bottom: var(--space-xs); }
  .project-modal__form .form-field label { font-size: 0.7rem; }
  .project-modal__form .form-field input,
  .project-modal__form .form-field textarea { padding: 10px 12px; font-size: 16px; }
  .project-modal__form .form-field textarea { height: 4rem; resize: none; }
  .project-modal__submit { margin-top: 4px; }
  .project-modal__divider { margin: var(--space-2xs) 0; }
  .project-modal__tg { padding: 10px 16px; }
  .project-modal__note { margin-top: var(--space-xs); }
}

/* ── Кастомный курсор ── */
/* cursor: none включается только классом .cursor-custom, который ставит на
   <html> сам main.js — уже после того, как кольцо и точка созданы. Если скрипт
   не приехал, подвис или упал, класса нет, и на десктопе остаётся нативный
   указатель. Раньше cursor: none стоял безусловно: падение скрипта означало
   страницу вообще без курсора мыши. */
@media (hover: hover) and (pointer: fine) {
  /* :where() у класса-переключателя — нулевая специфичность. Правило весит
     ровно столько же, сколько прежнее «body, a, button…», поэтому точечные
     .класс { cursor: pointer } перебивают его как и раньше: включение через
     класс ничего не переставляет местами. */
  :where(.cursor-custom) body,
  :where(.cursor-custom) a,
  :where(.cursor-custom) button,
  :where(.cursor-custom) label,
  :where(.cursor-custom) [role="button"] { cursor: none; }

  /* Поля ввода — исключение: I-beam это привычный сигнал «сюда можно
     печатать», и терять его в формах ради эффекта нельзя. */
  .cursor-custom input,
  .cursor-custom textarea { cursor: text; }
  .cursor-custom select,
  .cursor-custom input[type="checkbox"],
  .cursor-custom input[type="radio"],
  .cursor-custom input[type="submit"],
  .cursor-custom input[type="button"] { cursor: pointer; }

  .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    z-index: var(--z-cursor);
    width: 36px; height: 36px;
    border: 1px solid var(--text-muted);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: transform 0.12s ease, width 0.25s ease, height 0.25s ease,
      border-color 0.25s ease, opacity 0.3s ease;
  }
  .cursor-ring.is-visible { opacity: 1; }
  .cursor-ring.is-hovered { width: 52px; height: 52px; border-color: var(--accent); }

  .cursor-dot {
    position: fixed;
    top: 0; left: 0;
    z-index: calc(var(--z-cursor) + 1); /* точка всегда над кольцом */
    width: 4px; height: 4px;
    background-color: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
  }
  .cursor-dot.is-visible { opacity: 1; }

  /* Над полем ввода прячем кольцо и точку — иначе указателей на экране два.
     Правило идёт после .is-visible: специфичность одинаковая, решает порядок. */
  .cursor-ring.is-over-field,
  .cursor-dot.is-over-field { opacity: 0; }

  /* При prefers-reduced-motion сам курсор остаётся — он часть визуального
     языка. Догоняющий лаг кольца снимает общий сброс в reset.css: он давит
     transition-duration до 0.01ms, и кольцо приклеивается к указателю. */
}

/* ── Мобильная версия по макету (до 64em): шапка и подвал ──
   Шапка 55px, лого 20/28. Подвал: лого 32/36, подпись и навигация 14/20,
   почта и статус, линия, колонки услуг 2 × 2 (заголовки 16/20, пункты
   14/20 с шагом 35), линия, внизу копирайт и правовые ссылки столбиком. */
@media (max-width: 63.99em) {
  :root { --logo-size: 20px; }

  .site-footer {
    padding-top: 33px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  .site-footer__top { gap: 60px; }

  .site-footer__brand { --logo-size-footer: 32px; line-height: 1.125; }

  .site-footer__tagline {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4286;
  }

  .site-footer__nav ul {
    gap: 0 7px;
    margin-top: 26px;
    margin-inline: -4px;
  }
  .site-footer__nav a {
    min-height: 40px;
    font-size: 14px;
    color: var(--text-muted);
  }

  .site-footer__contact { gap: 15px; }
  .site-footer__email {
    min-height: 0;
    margin-block: 0;
    font-size: 14px;
    font-weight: 500;
  }
  .site-footer__status { font-size: 14px; }

  .site-footer__cols {
    gap: 40px 15px;
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid var(--border-subtle);
  }

  .site-footer__col-title,
  .site-footer__col-title a {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
  }

  .site-footer__col-list { margin-block: -7.5px; }
  .site-footer__col-list a {
    padding-block: 7.5px;
    font-size: 14px;
    line-height: 1.4286;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-subtle);
    font-size: 16px;
  }
  .site-footer__legal {
    flex-direction: column;
    gap: 15px;
  }
  .site-footer__legal a,
  .site-footer__legal-btn {
    min-height: 0;
    margin-block: 0;
    font-size: 16px;
  }
}