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

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

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

  /* ── форма ────────────────────────────────────────────── */
  --radius: 17px;                /* внешние большие контейнеры */
  --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 */
  /* латиница — 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;           /* насыщенность абзацев */
}

/* ── Сброс ──────────────────────────────────────────────── */
*, *::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:hover,
.rail__link:focus-visible { color: var(--lime); }

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

/* связь стоит особняком от каталога услуг */
.rail__contact {
  display: block;
  margin-left: auto;
  color: var(--lime);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease);
}

.rail__contact:hover,
.rail__contact:focus-visible,
.rail__contact.is-current { opacity: 1; }

/* ── Выезжающее меню подразделов ────────────────────────── */

/*
 * На мобилке рельса горизонтальная и наведения нет — пункт просто ведёт
 * на страницу направления, где те же подразделы перечислены списком.
 */
.flyout { display: none; }

@media (min-width: 900px) {
  .flyout {
    display: block;
    position: absolute;
    top: 50%;
    left: 100%;
    z-index: 30;
    padding-left: var(--gap);   /* мостик, чтобы курсор не терял меню по дороге */
    transform: translateY(-50%);
    pointer-events: none;
  }

  .flyout__panel {
    width: 260px;
    padding: 22px 24px 24px;
    background: var(--ink);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .rail__item:hover .flyout,
  .rail__item:focus-within .flyout { pointer-events: auto; }

  .rail__item:hover .flyout__panel,
  .rail__item:focus-within .flyout__panel {
    opacity: 1;
    transform: translateX(0);
  }

  .flyout__head {
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--lime);
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .flyout__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flyout__link {
    display: block;
    color: var(--panel);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: color 0.16s ease, transform 0.16s ease;
  }

  .flyout__link:hover,
  .flyout__link:focus-visible {
    color: var(--lime);
    transform: translateX(3px);
  }
}

/* ── Подвал ─────────────────────────────────────────────── */
.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;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease);
}

.foot__link:hover,
.foot__link:focus-visible { opacity: 1; }

.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-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;
  }

  .rail__contact {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: auto auto 0;      /* прижата к низу рельсы */
    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;
}