/**
 * Основа стиля сайта: токены, сброс, утилиты, поверхности.
 * Всё, что переживёт отдельную страницу, живёт здесь.
 * Специфика экрана — в своём файле (hero.css и далее).
 */

:root {
  /* ── цвет ─────────────────────────────────────────────── */
  --bg:     #EAECE8;   /* фон страницы */
  --ink:    #000000;   /* текст и тёмные поверхности */
  --panel:  #BAC0B4;   /* светлая поверхность */
  --paper:  #F8F8F8;   /* бумага: таблицы, длинные тексты */
  --lime:   #E4FF4E;   /* единственный акцент, из логотипа */

  /* ── сетка ────────────────────────────────────────────── */
  --gap:    20px;      /* поле страницы и зазор между поверхностями */
  --rail:   80px;      /* ширина вертикальной рельсы */

  /* ── форма ────────────────────────────────────────────── */
  --radius: 17px;                /* внешние большие контейнеры */
  --radius-block: 14px;          /* блок внутри поверхности: на 3 px меньше внешнего */
  --radius-card: 11px;           /* карточка внутри такого блока: ещё на 3 px меньше */
  --radius-sm: 8px;              /* мелкие элементы: плашки, поля */
  --corner-smoothing: 0.6;       /* сглаживание угла, шкала Figma: 0.6 — пресет iOS */

  /* ── движение ─────────────────────────────────────────── */
  --dur-fast: 0.16s;             /* отклик на курсор */
  --dur-base: 0.28s;             /* смена состояния */
  --dur-slow: 0.5s;              /* появление блока */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* быстрый старт, мягкая посадка */

  /* ── шрифт ────────────────────────────────────────────── */
  /*
   * Дисплейная пара: латиницу рисует Sage, кириллицы в нём нет —
   * для русского браузер сам берёт следующий в списке, Unbounded.
   */
  --font-display: "Sage Grotesk", "Unbounded", "Arial Narrow", system-ui, sans-serif;
  --weight-display: 500;         /* насыщенность заголовков: 400 или 500 */
  --lh-display:     1;           /* множитель межстрочного заголовков, см. русский ниже */
  /* латиница — Space Grotesk, кириллицы в нём нет: её берёт IBM Plex Mono */
  --font-ui:      "Space Grotesk", "IBM Plex Mono", ui-monospace, system-ui, sans-serif;
  --font-text:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --weight-text:  400;           /* насыщенность абзацев */
}

/*
 * Русские заголовки публичного сайта набираются Montserrat Bold. В Sage нет
 * кириллицы, и русские буквы подмешивались из Unbounded — он выглядел чужим
 * рядом с латиницей; Manrope Bold рядом с широким Sage читался сплющенным.
 * Montserrat широкий и геометричный — ближе всех к характеру Sage.
 * Английские вставки (lang="en") остаются в Sage.
 * Закрытый раздел пока на прежней паре Sage + Unbounded.
 */
html[data-zone="public"]:lang(ru) {
  /* цифры — из Sage, как в английской версии; буквы — из Montserrat */
  --font-display: "Sage Digits", "Montserrat", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --weight-display: 700;
  /* на 15% мельче английских — уменьшение зашито в сам шрифт, см. fonts.css */
  /* межстрочный же считается от полного кегля, и буквы на 15% мельче стоят
     слишком свободно. Плотнее 0,95 нельзя: хвост «Д» строкой выше садится
     на «Й» и «Ё» («ПРОДУКТОВЫЙ / ДИЗАЙН») — проверка /tmp/cyrclash.py */
  --lh-display: 0.95;
}

html[data-zone="public"] [lang="en"] {
  --font-display: "Sage Grotesk", "Unbounded", "Arial Narrow", system-ui, sans-serif;
  --weight-display: 500;
  --lh-display: 1;
}

/* ── Сброс ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: var(--gap);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: var(--weight-text);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ── Поверхности ────────────────────────────────────────── */

/**
 * Внешний большой контейнер: рельса, экран, секция.
 * Форму угла строит squircle.js по методу Figma — элементу нужен
 * атрибут data-squircle. Без скрипта останется круглый угол того же радиуса.
 */
.surface {
  border-radius: var(--radius);   /* запасной вариант: обычный круглый угол */
}

/* мелкая форма: плашки, поля ввода, кнопки */
.surface--sm {
  border-radius: var(--radius-sm);
}

/* ── Каркас страницы: рельса + содержимое ───────────────── */
/* экраны идут стопкой с тем же зазором, что между рельсой и контентом */
.stack {
  display: grid;
  gap: var(--gap);
  align-content: start;
}


.shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

/* ── Рельса и меню ──────────────────────────────────────── */
.rail {
  position: sticky;
  top: var(--gap);
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* пунктов стало четыре — в узкую строку не влезают */
  gap: 12px 18px;
  min-width: 0;
  min-height: 56px;
  padding: 14px 20px;
}

/* фон рельсы отдельным слоем: скругление обрезает его, а не выезжающее меню */
.rail__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
}

.rail__item { position: relative; }

.rail__logo {
  position: relative;
  display: block;
  width: 73.5px;
  height: 16px;
  flex: none;
}

.rail__logo img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 73.5px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.rail__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail__link {
  display: block;
  color: var(--panel);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: color 0.18s ease;
}

.rail__link.is-current { color: var(--lime); }

/* «Обо мне» как аккаунт: круглая аватарка перед подписью, при наведении — лаймовое кольцо */
.rail__account {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rail__avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: box-shadow var(--dur-fast) var(--ease);
}

.rail__account:hover .rail__avatar,
.rail__account:focus-visible .rail__avatar { box-shadow: 0 0 0 1.5px var(--lime); }

/* «Обо мне» и связь стоят особняком от каталога: на телефоне справа, на десктопе внизу */
.rail__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.rail__contact {
  /* приглушена цветом, а не прозрачностью (на вид то же): волна .u-ink
     закрашивает её в полный лайм — как прежнее наведение */
  --ink-fill: var(--lime);
  display: block;
  color: color-mix(in srgb, var(--lime) 75%, transparent);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.rail__contact.is-current { color: var(--lime); }

/* ── Мега-меню ──────────────────────────────────────────── */

/*
 * «Веб» и «Дизайн» только раскрывают меню. На десктопе это чёрная поверхность
 * на всю область контента: слева группы услуг, справа превью услуги под
 * курсором. Размеры текста — прежние, воздух дают отступы. На телефоне —
 * панель под рельсой, без превью. Открывает и закрывает rail.js (.is-open).
 */

/* кнопка пункта выглядит как ссылка рельсы */
.rail__link[aria-expanded] {
  padding: 0;
  border: 0;
  background: none;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}
.rail__link[aria-expanded="true"] { color: var(--lime); }

.mega { display: none; }

.mega__panel {
  background: var(--ink);
  color: var(--panel);
}

/* шапка меню: раздел слева, «Закрыть» справа */
.mega__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mega__title,
.mega__head,
.mega__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--lime);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.mega__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--panel);
  font-size: 10px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.mega__close:hover,
.mega__close:focus-visible { color: var(--lime); }

/* крестик из двух линий; на наведении поворачивается на четверть оборота */
.mega__x {
  position: relative;
  width: 12px;
  height: 12px;
  transition: transform 0.4s var(--ease);
}
.mega__close:hover .mega__x,
.mega__close:focus-visible .mega__x { transform: rotate(90deg); }
.mega__x::before,
.mega__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.mega__x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* стрелка ссылки — .arw--sm: на наведении вытягивается ножка */
.mega__title:hover .arw,
.mega__title:focus-visible .arw,
.mega__head:hover .arw,
.mega__head:focus-visible .arw,
.mega__preview:hover .arw,
.mega__preview:focus-visible .arw { width: 19px; }

.mega__body { margin-top: 26px; }

/* группа: заголовок-ссылка на раздел и его услуги */
.mega__group {
  padding-bottom: 32px;
  break-inside: avoid;
}
.mega__group:last-child { padding-bottom: 0; }

.mega__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mega__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--panel);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.16s ease, transform 0.16s ease;
}

.mega__num {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  opacity: 0.4;
}

/* лайм наведения даёт волна .u-ink; пункт, который сейчас в превью, остаётся закрашенным */
.mega__link:hover,
.mega__link:focus-visible,
.mega__link.is-previewed { transform: translateX(3px); }

.mega__link.is-previewed > .u-ink__fill { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.mega__link.is-previewed > .u-ink__base { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }

.mega__preview { display: none; }

/* телефон и планшет: панель под рельсой, во всю её ширину */
@media (max-width: 899px) {
  .rail__item[data-menu] { position: static; }   /* панель считается от рельсы, а не от пункта */

  .rail__item.is-open .mega {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
  }

  .mega__panel {
    max-height: calc(100svh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 24px 26px;
    border-radius: var(--radius);
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .mega__groups { columns: 2; column-gap: 32px; }
}

/* десктоп: поверхность на всю область контента, раскрывается от рельсы */
@media (min-width: 900px) {
  .mega {
    display: block;
    position: fixed;
    top: var(--gap);
    right: var(--gap);
    bottom: var(--gap);
    left: calc(var(--gap) * 2 + var(--rail));
    z-index: 30;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.4s;     /* прячем, когда закрытие отыграло */
  }

  .rail__item.is-open .mega {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .mega__panel {
    height: 100%;
    overflow-y: auto;
    padding: clamp(28px, 3vw, 48px) clamp(32px, 3.6vw, 64px) clamp(32px, 3.4vw, 56px);
    border-radius: var(--radius);
    clip-path: inset(0 100% 0 0 round var(--radius));
    transition: clip-path 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .rail__item.is-open .mega__panel {
    clip-path: inset(0 0 0 0 round var(--radius));
    transition: clip-path 0.6s var(--ease);
  }

  .mega__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 30%);
    align-items: start;
    gap: clamp(40px, 5vw, 96px);
    margin-top: clamp(32px, 3.4vw, 56px);
  }

  .mega__groups {
    columns: 2;
    column-gap: clamp(40px, 5vw, 96px);
  }

  /* строки проявляются по очереди, когда поверхность уже раскрылась */
  .mega__head,
  .mega__list li,
  .mega__preview {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .rail__item.is-open .mega__head,
  .rail__item.is-open .mega__list li {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(180ms + var(--i, 0) * 28ms);
  }

  /* превью: картинка услуги, раздел, имя, строка описания */
  .mega__preview {
    position: sticky;
    top: 0;
    display: grid;
    gap: 12px;
    color: inherit;
    text-decoration: none;
  }

  .rail__item.is-open .mega__preview {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--ease) 0.3s, transform 0.7s var(--ease) 0.3s;
  }

  .mega__preview > * { transition: opacity 0.3s ease; }
  .mega__preview.is-swapping > * { opacity: 0; transition-duration: 0.12s; }   /* смена услуги: гаснет и проявляется */

  .mega__art {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 52svh;
    border-radius: var(--radius-block);
  }

  .mega__kicker {
    margin-top: 8px;
    color: #8C9186;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .mega__name {
    color: #F2F4EF;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: calc(1 * var(--lh-display));
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  .mega__lead {
    max-width: 36ch;
    color: #A3A89C;
    font-size: 13px;
    line-height: 1.45;
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .mega,
  .mega__panel,
  .mega__head,
  .mega__list li,
  .mega__preview,
  .mega__preview > *,
  .mega__x { transition: none !important; }
}

/* ── Кнопка со стрелкой ─────────────────────────────────── */
/*
 * Общий стиль лаймовых кнопок сайта — как «Дальше» в брифе: лаймовая
 * заливка, подпись капсом 11 px, справа стрелка .arw. При наведении стрелка
 * вытягивается и отъезжает — кнопка не подпрыгивает и не меняет цвет.
 * Разметка: <a|button class="send u-ui">Текст<span class="arw" aria-hidden="true"></span></…>
 */
.send {
  --radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--on-accent, var(--ink));
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: gap var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}

.send:hover,
.send:focus-visible { gap: 18px; }

.send:active { opacity: 0.85; }

/*
 * Стрелка собрана из ножки и наконечника, а не взята символом: у символа
 * длину не изменить. При наведении ножка вытягивается, и кнопка растёт
 * ровно на столько же — движение идёт от самой стрелки, а не от масштаба.
 */
.arw {
  position: relative;
  display: inline-block;
  flex: none;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width var(--dur-base) var(--ease);
}

.arw::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.arw--back { transform: scaleX(-1); }   /* та же стрелка, отражённая */

.send:hover .arw,
.send:focus-visible .arw { width: 24px; }

a.send { text-decoration: none; }

/* стрелка текстовых ссылок — мельче, тоньше и тише, чем у кнопок;
   на наведении так же вытягивается ножка */
.arw--sm {
  width: 11px;
  height: 0;
  /* ножка — тоже рамкой, как наконечник: заливку и рамку тоньше пикселя браузер
     округляет по-разному, и ножка выходила другого оттенка, чем стрелка */
  border-top: 1px solid currentColor;
  background: none;
  /* приглушена чистым цветом, без прозрачности: цвет текста, смешанный с фоном
     под стрелкой (--arw-bg: по умолчанию чёрный, на светлых блоках — свой) */
  color: color-mix(in srgb, currentColor 55%, var(--arw-bg, var(--ink)));
}
.arw--sm::after {
  top: -0.5px;                       /* середина линии: рамка стоит над нулевой высотой блока */
  width: 5px;
  height: 5px;
  border-top-width: 1px;
  border-right-width: 1px;
}

/* ── Заливка «за курсором» ─────────────────────────────── */
/*
 * Для всех кнопок в стиле тегов: серая плашка, при наведении тёмная заливка
 * набегает с той стороны, откуда пришёл курсор, и уходит туда, куда он ушёл,
 * — тот же приём, что у вкладок брифа. Сторону даёт hover-slide.js через
 * --from, на касание он держит класс .is-slid. Разметка: class="… u-slide" data-slide.
 * Цвет заливки и текста меняются переменными --slide-bg / --slide-color.
 */
.u-slide {
  /* «дольше и мягче»: общая кривая стартует рывком, а заливка идёт через
     всю плашку, и резкий старт читается как щелчок */
  --slide-dur: 0.5s;
  --slide-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: color var(--slide-dur) var(--slide-ease), gap var(--dur-base) var(--ease);
}

.u-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--slide-bg, var(--ink));
  transform: scaleX(0);
  transform-origin: var(--from, left) center;
  transition: transform var(--slide-dur) var(--slide-ease);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .u-slide:hover { color: var(--slide-color, var(--lime)); }
  .u-slide:hover::before { transform: scaleX(1); }
}

.u-slide.is-slid,
.u-slide:focus-visible { color: var(--slide-color, var(--lime)); }

.u-slide.is-slid::before,
.u-slide:focus-visible::before { transform: scaleX(1); }

/* ── Закраска букв «за курсором» ─────────────────────────── */
/*
 * Для текстовых ссылок — тот же приём, что у кнопок (.u-slide): цвет наведения
 * набегает с той стороны, откуда пришёл курсор, и уходит туда, куда он ушёл.
 * Цвет и отрисовку шрифта не трогаем: hover-slide.js заворачивает текст ссылки
 * в .u-ink__base и кладёт поверх его копию .u-ink__fill в цвете наведения
 * (--ink-fill). Маска копии растёт от стороны курсора, маска оригинала ровно
 * столько же уходит с той стороны — в каждой точке виден один слой, буквы не
 * толстеют. Приглушённые части (номера) в копии приглушены так же.
 * Разметка: class="… u-ink" data-slide. --ink-collapsed — «пустая» маска:
 * по горизонтали 0% 100%, у вертикальных подписей 100% 0%.
 */
.u-ink { position: relative; }

.u-ink__base,
.u-ink__fill {
  /* копия и обёртка раскладываются так же, как сама ссылка */
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  --slide-dur: 0.5s;
  --slide-ease: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-mask: linear-gradient(#000, #000) no-repeat;
          mask: linear-gradient(#000, #000) no-repeat;
  transition: -webkit-mask-size var(--slide-dur) var(--slide-ease), mask-size var(--slide-dur) var(--slide-ease);
}

.u-ink__base {
  -webkit-mask-position: var(--from-opp, right);
          mask-position: var(--from-opp, right);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.u-ink__fill {
  position: absolute;
  inset: 0;
  padding: inherit;
  color: var(--ink-fill, var(--lime));
  pointer-events: none;
  user-select: none;
  -webkit-mask-position: var(--from, left);
          mask-position: var(--from, left);
  -webkit-mask-size: var(--ink-collapsed, 0% 100%);
          mask-size: var(--ink-collapsed, 0% 100%);
}

@media (hover: hover) and (pointer: fine) {
  .u-ink:hover > .u-ink__fill { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  .u-ink:hover > .u-ink__base { -webkit-mask-size: var(--ink-collapsed, 0% 100%); mask-size: var(--ink-collapsed, 0% 100%); }
}

.u-ink.is-slid > .u-ink__fill,
.u-ink:focus-visible > .u-ink__fill { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

.u-ink.is-slid > .u-ink__base,
.u-ink:focus-visible > .u-ink__base { -webkit-mask-size: var(--ink-collapsed, 0% 100%); mask-size: var(--ink-collapsed, 0% 100%); }

/* ── «Картинка» услуги ──────────────────────────────────── */
/*
 * Нарисована стилями: два световых пятна по палитре направления, узор
 * направления и зерно. Где стоят пятна — задаёт art_vars() по адресу услуги
 * (partials/art.php). Одна и та же в карусели главной и в превью меню.
 */
.art {
  position: relative;
  overflow: hidden;
  background:
    var(--pattern, none),
    radial-gradient(90% 70% at var(--ax, 30%) var(--ay, 25%), var(--c1) 0%, transparent 62%),
    radial-gradient(80% 70% at var(--bx, 70%) var(--by, 75%), var(--c2) 0%, transparent 68%),
    linear-gradient(165deg, var(--c3), #060606 85%);
}

.art::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* сайты — лайм и сетка вёрстки */
.art--websites {
  --c1: #E4FF4E; --c2: #7C8F12; --c3: #1B2203;
  --pattern:
    repeating-linear-gradient(0deg,  rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 22px);
}
/* дизайн — тёплое золото и круги */
.art--design {
  --c1: #FFE7AE; --c2: #D98A2B; --c3: #2A1606;
  --pattern: repeating-radial-gradient(circle at var(--bx, 70%) var(--by, 75%), rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 18px);
}
/* автоматизация — шалфей и точечная матрица */
.art--automation {
  --c1: #EEF1EA; --c2: #8E9A86; --c3: #151A14;
  --pattern: radial-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1.6px) 0 0 / 14px 14px;
}
/* поддержка и SEO — холодная сталь и строки развёртки */
.art--support,
.art--seo-geo {
  --c1: #DCE6EF; --c2: #5D7486; --c3: #0D141A;
  --pattern: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 6px);
}

/* ── Подвал ─────────────────────────────────────────────── */
.foot {
  display: grid;
  gap: 32px;
  padding: 36px 24px 28px;
  background: var(--ink);
  color: var(--panel);
}

.foot__top {
  display: grid;
  gap: 32px;
}

.foot__brand { display: grid; gap: 18px; justify-items: start; }

/*
 * Знак в подвале лежит горизонтально. Размеры остаются натуральными
 * (16×73.5), поворот их меняет местами — иначе рисунок растянется.
 * Поля по вертикали гасят место, которое занимает неповёрнутый элемент.
 */
.foot__mark {
  width: 16px;
  height: 73.5px;
  transform: rotate(90deg);
  transform-origin: center;
  margin: -28px 28px;
}

.foot__claim {
  max-width: 34ch;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.55;
}

.foot__label {
  margin: 0 0 14px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--lime);
  opacity: 0.8;
}

.foot__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot__link {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  /* приглушение — цветом, а не прозрачностью (на вид то же): волна .u-ink
     закрашивает ссылку в полный цвет, как прежнее наведение */
  --ink-fill: var(--panel);
  color: color-mix(in srgb, currentColor 75%, transparent);
}

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(234, 236, 232, 0.14);
}

.foot__rights {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.5;
}

.foot__social {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot__icon {
  display: block;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.foot__icon svg { width: 15px; height: 15px; display: block; }

.foot__icon:hover,
.foot__icon:focus-visible { opacity: 1; color: var(--lime); }

/* ── Утилиты ────────────────────────────────────────────── */

/*
 * Табличные цифры — точечно, а не на весь сайт.
 * В Zalando Sans фича tnum приводит к ширине цифры и пробел,
 * из-за чего расстояние между словами удваивается.
 */
.u-nums { font-variant-numeric: tabular-nums; }

/* интерфейсный текст: меню, подписи, метки — всегда капсом */
.u-ui {
  font-family: var(--font-ui);
  font-weight: 400;
  text-transform: uppercase;
}

/*
 * Приписка — закреплённый стиль подписей рядом с заголовками и итоговых строк
 * («Фронтенд · Бэкенд…», «Дизайн и код выстроены…»). Одинаков в обеих версиях
 * сайта. Новая приписка получает этот класс, а не свои настройки шрифта.
 */
.u-caption {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #666B61;
}

@media (min-width: 900px) {
  .u-caption { font-size: clamp(12px, 0.85vw, 15px); }
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Десктоп: рельса встаёт вертикально ─────────────────── */
@media (min-width: 900px) {
  .shell {
    grid-template-columns: var(--rail) 1fr;
    align-items: start;
  }

  .rail {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 34px;
    height: calc(100svh - var(--gap) * 2);
    padding: 34px 0;
  }

  .rail__logo {
    width: 16px;
    height: 73.5px;
  }

  .rail__logo img { transform: translate(-50%, -50%); }

  .rail__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 26px;
  }

  /* подвал живёт в колонке содержимого, рядом с рельсой */
  .foot {
    grid-column: 2;
    padding: clamp(40px, 3.4vw, 60px) clamp(32px, 2.9vw, 52px) clamp(28px, 2.4vw, 40px);
  }

  .foot__top {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
  }

  /* пункты читаются снизу вверх, как знак */
  .rail__link {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
  }

  /* вертикальные подписи: волна «за курсором» идёт вдоль надписи — растёт высота слоя.
     :where не добавляет веса — правило наведения .u-ink:hover остаётся сильнее */
  .rail__list > li > .rail__link,
  .rail__contact,
  .rail__label { --ink-collapsed: 100% 0%; }

  /* «Обо мне»: подпись закрашивается и когда курсор на аватарке — как раньше */
  .rail__account:hover .rail__label > .u-ink__fill { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  .rail__account:hover .rail__label > .u-ink__base { -webkit-mask-size: 100% 0%; mask-size: 100% 0%; }

  /* у аккаунта повёрнута только подпись: аватарка стоит над ней ровно */
  .rail__account {
    flex-direction: column;
    gap: 12px;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .rail__account .rail__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .rail__avatar {
    width: 46px;               /* файл 144 px — чёткий и на тройной плотности */
    height: 46px;
  }

  .rail__foot {
    flex-direction: column;
    gap: 26px;
    margin: auto auto 0;      /* прижаты к низу рельсы */
  }

  .rail__contact {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
  }
}

/* ── Движение ───────────────────────────────────────────── */

/*
 * Переход между страницами. Название услуги, по которому кликнули,
 * физически переезжает на своё место в заголовке — это связывает
 * список и страницу в один жест вместо перезагрузки.
 */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: fade-out var(--dur-base) var(--ease) both;
}

::view-transition-new(root) {
  animation: fade-in var(--dur-base) var(--ease) both;
}

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } }

/*
 * Появление блока при подходе к экрану. Таймлайн считает браузер,
 * без скриптов и без обработчика скролла.
 */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }

  /* строка таблицы не принимает transform — ей только проявление */
  .reveal--soft {
    animation: reveal-soft linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 34%;
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes reveal-soft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* подпись канала в подвале: tg / wa / mail */
.foot__tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.45;
}

/* ── Переключатель языка ────────────────────────────────── */
.foot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.langs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-decoration: none;
  opacity: 0.4;
  transition: opacity var(--dur-fast) var(--ease);
}

.lang:hover,
.lang:focus-visible { opacity: 0.85; }

.lang--current { opacity: 1; color: var(--lime); }

/* разделитель между языками */
.langs > * + *::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.35;
}