/* ==========================================================================
   IFC — СВЕТЛАЯ ТЕМА (единственная тема сайта, без prefers-color-scheme)
   Цель по шрифту — системный шрифт Apple. Он проприетарный, встраивать его
   нельзя, но на устройствах Apple доступен системно через -apple-system.
   На остальных платформах подстраховкой служит Inter — самостоятельный
   хостинг, только локальные woff2, без единого внешнего шрифтового CDN.
   Антиквы в проекте больше нет: у прежней засечной пары не было варианта,
   пригодного для встраивания в единый стек, и вся типографическая иерархия
   теперь держится на размере, насыщенности и трекинге одной гарнитуры —
   см. §5 задания и «Контракт вёрстки».
   ========================================================================== */

/* ==========================================================================
   ШРИФТЫ — Inter, 3 начертания (400/500/600) × 2 набора символов (cyrillic/latin).
   Единственный самостоятельно хостящийся шрифт проекта; работает как fallback
   для платформ без системного SF Pro (Windows, Android, Linux).
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-normal-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-normal-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-normal-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-normal-500-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-normal-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-normal-600-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 {
  color-scheme: light;

  /* ---- Фоны ---- */
  --bg-page: #F7F6F3;
  --bg-warm: #F1EFE9;
  --bg-header: rgba(247, 246, 243, 0.88);
  --bg-pill: rgba(247, 246, 243, 0.94);
  --bg-media-ph: #EDEAE3;

  /* ---- Текст ----
     Внимание: --text-muted / --text-faint / --text-quiet2 ЗАТЕМНЕНЫ относительно
     исходных значений макета — оригинальные (#8E8A80 ≈3.2:1, #A8A49B ≈2.3:1,
     #B0ABA0 ещё ниже) не добирают WCAG AA (4.5:1) для обычного текста на фоне
     --bg-page. Ниже — ближайшие оттенки той же тёплой серой гаммы, которые
     проходят AA. Историческое (макетное) значение указано в комментарии. */
  --text-primary: #1A1B18;
  --text-secondary: #57544D;
  --text-tertiary: #6E6B63;   /* ≈4.93:1 на --bg-page — уже проходит AA, не менялся */
  --text-muted: #6B6760;      /* было #8E8A80 (≈3.2:1) → ≈5.2:1 */
  --text-faint: #756F65;      /* было #A8A49B (≈2.3:1) → ≈4.6:1 */
  --text-quiet2: #726C61;     /* было #B0ABA0 (ещё ниже) → ≈4.8:1 */
  --text-dash: #C2BDB2;       /* декоративный маркер-тире перед пунктами — не текст, AA не требуется */

  /* ---- Границы ---- */
  --border-strong: #1A1B18;
  --border-default: #E6E3DC;
  --border-soft: #E1DED6;
  --border-input: #D9D5CB;
  --border-hairline: #EAE7E0;
  --border-underline: #CFCBC1;
  --border-pill-dark: rgba(26, 27, 24, 0.12);
  --border-mark-divider: #DDD9D0;  /* резерв: разделитель рядом с лого/переключателем, если появится спутник */

  /* ---- Акценты ---- */
  --accent: #A9502F;
  --accent-hover: #7E3A21;
  --accent-wash: rgba(169, 80, 47, 0.14);
  --accent-border-soft: rgba(169, 80, 47, 0.35);
  /* Историческое значение зелёного статуса (#3E7A5E) даёт лишь 4.4:1 на фоне
     --bg-warm (секция #contact) — не добирает WCAG AA (4.5:1) для текста
     («Отвечаем в течение дня» рядом с точкой-индикатором). Ниже — тот же
     оттенок на пару делений темнее: 5.5:1 на --bg-warm, 5.8:1 на --bg-page. */
  --status-green: #356A51;

  /* ---- Типографика — одна гарнитура на весь сайт (см. §5 задания).
     На Mac/iPhone/iPad -apple-system и системные "SF Pro Display"/"SF Pro Text"
     подхватывают настоящий системный шрифт Apple; на Windows/Android/Linux
     реальным начертанием становится локальный Inter — без единого внешнего
     шрифтового сервиса. */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    system-ui, Inter, "Helvetica Neue", Arial, sans-serif;

  /* Ровно три начертания, реально существующих и в Inter, и системно.
     Заголовки, которые раньше набирались антиквой (font-weight 300/400),
     теперь используют --fw-regular и отличаются от обычного текста
     размером и отрицательным трекингом (--ls-*), а не гарнитурой или весом. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;  /* только словомарка логотипа "IFC" */

  /* Трекинг — второй (после размера) механизм иерархии для одной гарнитуры. */
  --ls-logo: -0.05em;      /* только словомарка лого */
  --ls-tightest: -0.022em; /* h1 hero, h2 contact */
  --ls-tighter: -0.017em;  /* case-card__title */
  --ls-tight: -0.015em;    /* h2 секций, service-card__title */
  --ls-snug: -0.01em;      /* about__intro, process-step__title, header tagline */
  --ls-normal: 0;

  --wrap-balance: balance;
  --wrap-pretty: pretty;

  --radius-pill: 999px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --radius-full: 50%;

  --blur-header: blur(10px);
  --blur-pill: blur(6px);

  --transition-color: color .2s ease;
  --transition-bg: background .2s ease;
  --transition-bg-t: background .2s ease, transform .2s ease;
  --transition-bg-c: background .2s ease, color .2s ease;
  --transition-border: border-color .2s ease;
  --transition-border-c: color .2s ease, border-color .2s ease;

  --container-max: 1080px;
  --container-pad-x: 48px;
  --header-height: 74px;
  --sidebar-col: 220px;
}

/* ==========================================================================
   СБРОС / БАЗА
   Макетный корневой <div style="min-width:1120px"> сознательно НЕ переносится:
   макет — десктоп-фикс без единого @media, а задача по CSS явно требует
   рабочей адаптивности вплоть до 360px (брейкпоинты — в конце файла).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video {
  max-width: 100%;
  display: block;
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

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

::selection { background: var(--accent-wash); }

/* Скрытый до фокуса скип-линк — первый фокусируемый элемент body. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 1000;
  background: var(--text-primary);
  color: var(--bg-page);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: var(--fw-medium);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Утилита для визуально скрытого, но доступного скринридеру текста
   (например «открывается в новой вкладке» на ссылках кейсов). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ГРАНИЦЫ МЕЖДУ СЕКЦИЯМИ + якорный скролл под sticky-шапку.
   #top(.hero) — без верхней границы, сразу под header.
   ========================================================================== */
.about, .services, .cases, .process, .stack, .contact {
  border-top: 1px solid var(--border-default);
}

.hero, .case-hero, .about, .services, .cases, .process, .stack, .contact {
  scroll-margin-top: var(--header-height);
}

/* ==========================================================================
   HEADER (sticky)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-header);
  backdrop-filter: var(--blur-header);
  -webkit-backdrop-filter: var(--blur-header);
  border-bottom: 1px solid var(--border-default);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-x);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 40px;
}
/* ==========================================================================
   ЛОГОТИП — композиция «скобка + IFC + точка + скобка» с анимацией входа.
   SVG/keyframes/тайминги перенесены дословно из logo-animation-source.html;
   px-размеры (svg 11×28, слово 22px, точка 4×4) — из design-v3.dc.html:
   там они заданы напрямую в px под контекст шапки, здесь получаются той же
   em-относительной механикой источника при font-size:22px на .site-header__mark.
   ========================================================================== */
.site-header__brand {
  display: flex;
  align-items: center;
  line-height: 0;
}
.site-header__mark {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 22px;
  transform-origin: center;
}
.site-header__mark-bracket {
  width: .48em;
  height: 1.23em;
  flex: none;
}
.site-header__mark-bracket path {
  stroke: var(--text-primary);
}
.site-header__mark-word {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-logo);
  color: var(--text-primary);
  line-height: 1;
}
.site-header__mark-dot {
  width: .145em;
  height: .145em;
  border-radius: var(--radius-full);
  background: var(--accent);
  margin: .42em 0 0 .08em;
  flex: none;
}

/* Ключевые кадры — дословно из источника, ни тайминги, ни кривые не менялись. */
@keyframes ifc-b-l { from { opacity: 0; transform: translateX(.42em); } to { opacity: 1; transform: translateX(0); } }
@keyframes ifc-b-r { from { opacity: 0; transform: translateX(-.42em); } to { opacity: 1; transform: translateX(0); } }
@keyframes ifc-w   { from { opacity: 0; transform: translateY(.145em); } to { opacity: 1; transform: translateY(0); } }
@keyframes ifc-d   { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ifc-s   { 0% { transform: scale(1); } 40% { transform: scale(1.014); } 100% { transform: scale(1); } }

/* .play вешается на .site-header__mark (и на .hero__logo, см. ниже) через
   js/main.js (initLogoIntro) на ВСЕХ страницах при КАЖДОЙ загрузке — без
   ограничения на главную и без «один раз за сессию» — кроме
   prefers-reduced-motion, при котором класс не добавляется вовсе. До
   получения класса .play у частей нет ни opacity, ни transform, поэтому
   лого рендерится сразу в конечном состоянии без кадра «мигания». */
.site-header__mark.play {
  animation: ifc-s .44s cubic-bezier(.22,.61,.36,1) 1.16s both;
}
.site-header__mark.play .site-header__mark-bracket--left {
  animation: ifc-b-l .66s cubic-bezier(.16,.84,.28,1) .12s both;
}
.site-header__mark.play .site-header__mark-word {
  animation: ifc-w .48s cubic-bezier(.22,.61,.36,1) .66s both;
}
.site-header__mark.play .site-header__mark-dot {
  animation: ifc-d .36s cubic-bezier(.34,1.4,.5,1) 1.1s both;
}
.site-header__mark.play .site-header__mark-bracket--right {
  animation: ifc-b-r .66s cubic-bezier(.16,.84,.28,1) .12s both;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 15.5px;
}
.site-header__nav a {
  color: var(--text-tertiary);
  transition: var(--transition-color);
}
.site-header__nav a:hover { color: var(--text-primary); }

/* Переключатель языка EN/RU — настоящие <a href>, работает без JS;
   js/main.js лишь запоминает выбор в localStorage (ключ ifc-lang). */
.site-header__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
}
.site-header__lang-link {
  color: var(--text-tertiary);
  transition: var(--transition-color);
}
.site-header__lang-link:hover { color: var(--text-primary); }
.site-header__lang-link[aria-current="true"] {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Бургер-меню ниже 900px. В исходном контракте прототипа его нет вообще
   (дизайн — десктоп-фикс), классы .site-header__burger/-line добавлены как
   необходимое расширение для требуемой адаптивности; js/main.js уже
   переключает .is-open на кнопке и на .site-header__nav и синхронизирует
   aria-expanded/aria-label. */
.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.site-header__burger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  transition: transform .2s ease, opacity .2s ease;
}
.site-header__burger.is-open .site-header__burger-line:nth-child(1),
.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__burger.is-open .site-header__burger-line:nth-child(2),
.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(2) {
  opacity: 0;
}
.site-header__burger.is-open .site-header__burger-line:nth-child(3),
.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   КНОПКИ / ПИЛЮЛИ
   .btn + .btn--dark/--outline/--lg — общая система модификаторов из контракта.
   Компонентные классы (site-header__cta, cases__cta-btn, contact__submit-btn,
   contact__reset-btn) продублированы в тех же группах селекторов, поэтому
   верстальщик может как навесить .btn рядом, так и обойтись без него —
   визуальный результат одинаков.
   ========================================================================== */
.btn,
.site-header__cta,
.cases__cta-btn,
.contact__submit-btn,
.contact__reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 15.5px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  padding: 13px 26px;
}

/* Вариант 1 — тёмная пилюля (header CTA, hero CTA, cases CTA, сабмит формы) */
.btn--dark,
.site-header__cta,
.cases__cta-btn,
.contact__submit-btn {
  background: var(--text-primary);
  color: var(--bg-page);
  border-color: var(--text-primary);
  transition: var(--transition-bg-t);
}
.btn--dark:hover,
.site-header__cta:hover,
.cases__cta-btn:hover,
.contact__submit-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-page);
}
/* Крупный размер (hero) — плюс лёгкий подъём на hover.
   Font-size у пилюль в макете задан НЕ единообразно (15.5px только у шапки) —
   у крупных CTA (hero/cases/сабмит формы) он 17px, у обводки 16.5px, у «Отправить
   ещё одну» 16px. Заданный ниже font-size переопределяет общую базу 15.5px
   отдельно на каждый вариант, вместо единого значения на всю группу .btn. */
.btn--lg { padding: 17px 32px; font-size: 17px; }
.btn--lg:hover { transform: translateY(-1px); }

/* Паддинги по контексту (тот же вариант 1, разные места) */
/* --------------------------------------------------------------------------
   Ссылки на соцсети в шапке. Иконки монохромные — брендовые цвета Telegram
   и LinkedIn спорили бы с тёплой палитрой сайта; узнаваемость несёт форма.
   -------------------------------------------------------------------------- */
.site-header__social {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-header__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  transition: color .2s ease, background-color .2s ease;
}
.site-header__social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
.site-header__social-link:hover {
  color: var(--text-primary);
  background: var(--bg-warm);
}
.site-header__social-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 860px) {
  /* На узких экранах иконки уступают место кнопке и бургеру. Контакты
     остаются доступны в подвале и в секции заявки. */
  .site-header__social { display: none; }
}

.site-header__cta { padding: 11px 20px; }
.cases__cta-btn { padding: 16px 30px; font-size: 17px; flex: none; }
.contact__submit-btn { padding: 17px 24px; font-size: 17px; margin-top: 6px; align-self: flex-start; }
/* В макете обе кнопки на hover также приподнимаются на 1px, как hero CTA. */
.cases__cta-btn:hover,
.contact__submit-btn:hover {
  transform: translateY(-1px);
}

/* Вариант 2 — обводка (about/process «Оставить заявку») */
.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
  padding: 13px 26px;
  font-size: 16.5px;
  transition: var(--transition-bg-c);
}
.btn--outline:hover {
  background: var(--text-primary);
  color: var(--bg-page);
}

/* Вариант 3 — тихая пилюля с обводкой (форма, «Отправить ещё одну») */
.contact__reset-btn {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-input);
  padding: 12px 24px;
  font-size: 16px;
  transition: var(--transition-border-c);
}
.contact__reset-btn:hover {
  background: transparent;
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Вариант 4 — текстовая ссылка с подчёркиванием («Посмотреть работы») */
.hero__link-secondary {
  display: inline-block;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-underline);
  padding-bottom: 2px;
  font-size: 17px;
  transition: var(--transition-border-c);
}
.hero__link-secondary:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* Вариант 5 — акцентная ссылка-CTA услуг с полупрозрачным подчёркиванием */
.service-card__cta {
  display: inline-block;
  margin-top: 26px;
  font-size: 16.5px;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-border-soft);
  padding-bottom: 1px;
  transition: var(--transition-border-c);
}
.service-card__cta:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Вариант 6 — маленькая плашка-ссылка поверх картинки кейса */
.case-card__link-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  background: var(--bg-pill);
  border: 1px solid var(--border-pill-dark);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  backdrop-filter: var(--blur-pill);
  -webkit-backdrop-filter: var(--blur-pill);
  pointer-events: auto;
  transition: var(--transition-bg-c);
}
.case-card__link-badge:hover {
  background: var(--text-primary);
  color: var(--bg-page);
}

/* ==========================================================================
   HERO (#top)
   ========================================================================== */
.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 108px var(--container-pad-x) 96px;
}

/* ==========================================================================
   ЛОГОТИП В ГЕРОЕ (.hero__logo) — та же композиция «скобка + IFC + точка +
   скобка», что и .site-header__mark в шапке, но декоративная (aria-hidden
   на разметке — текстовый смысл «IFC» уже несут <h1> и лого-ссылка шапки),
   в разы крупнее и на собственном наборе классов, чтобы масштаб и объём
   ниже не утекали в шапку.
   Пропорции — те же em-отношения, что в шапке (там font-size:22px):
   скобка .48×1.23em, точка .145×.145em с отступом .42em/.08em, gap
   4px/22px ≈ .18em. Меняется только сам font-size — он и держит адаптив:
   clamp(44px…104px). На 360px (доступная ширина контейнера 328px при
   --container-pad-x:16px) логотип ≈51px → композиция ≈150px, почти вдвое
   меньше доступной ширины, прокрутки нет; на широких экранах — 104px,
   заметно крупнее уменьшенного .hero__title (см. ниже), как и просили.
   ========================================================================== */
.hero__logo {
  display: inline-flex;
  align-items: center;
  gap: .18em;
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.25rem);
  flex: none;
  transform-origin: center;
}
.hero__logo-bracket {
  width: .48em;
  height: 1.23em;
  flex: none;
}
.hero__logo-bracket path {
  stroke: var(--text-primary);
}
.hero__logo-word {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-logo);
  color: var(--text-primary);
  line-height: 1;
}
.hero__logo-dot {
  width: .145em;
  height: .145em;
  border-radius: var(--radius-full);
  margin: .42em 0 0 .08em;
  flex: none;
  background: var(--accent);
}

/* Анимация появления — те же пять @keyframes (описаны ниже, у .site-header__
   mark.play) и те же тайминги/кривые, применённые к элементам героя; класс
   .play вешает js/main.js (initLogoIntro) одновременно с шапочным лого. */
.hero__logo.play {
  animation: ifc-s .44s cubic-bezier(.22,.61,.36,1) 1.16s both;
}
.hero__logo.play .hero__logo-bracket--left {
  animation: ifc-b-l .66s cubic-bezier(.16,.84,.28,1) .12s both;
}
.hero__logo.play .hero__logo-word {
  animation: ifc-w .48s cubic-bezier(.22,.61,.36,1) .66s both;
}
.hero__logo.play .hero__logo-dot {
  animation: ifc-d .36s cubic-bezier(.34,1.4,.5,1) 1.1s both;
}
.hero__logo.play .hero__logo-bracket--right {
  animation: ifc-b-r .66s cubic-bezier(.16,.84,.28,1) .12s both;
}

/* Первый экран: заголовок слева, логотип справа от него. На узких экранах
   ряд разворачивается в колонку — логотип уходит под заголовок, но остаётся
   в потоке, без абсолютного позиционирования. */
.hero__headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 30px;
}
.hero__headline .hero__title {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 860px) {
  .hero__headline {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

.hero__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-tertiary);
}
.hero__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--status-green);
  flex: none;
}
.hero__title {
  margin-top: 30px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  /* Верхняя граница уменьшена примерно на треть (было 4.625rem/74px, стало
     ~3.083rem/49px ≈ −33.8%) — вес первого экрана переходит к .hero__logo
     выше; нижняя граница и наклон не менялись, поэтому на 360px значение
     то же самое, что и раньше (там clamp и до правки упирался в preferred,
     а не в верхнюю границу). */
  font-size: clamp(2.25rem, 1.55rem + 3.2vw, 3.083rem);
  line-height: 1.06;
  letter-spacing: var(--ls-tightest);
  color: var(--text-primary);
  max-width: 900px;
  text-wrap: var(--wrap-balance);
}
.hero__lead {
  margin-top: 30px;
  font-size: 21px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 620px;
  text-wrap: var(--wrap-pretty);
}
.hero__actions {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.hero__stats {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--border-default);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.hero__stat-value {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 40px;
  line-height: 1;
  color: var(--text-primary);
}
.hero__stat-label {
  margin-top: 10px;
  font-size: 16px;
  color: var(--text-tertiary);
}
.accent-dot { color: var(--accent); }

/* ==========================================================================
   ПАТТЕРН «ЛЕЙБЛ + ЗАГОЛОВОК» — общая сетка 220px/1fr, gap 56px,
   встречается в about/services/cases/process/stack. Нет отдельного класса
   .section-head в контракте — свойства сгруппированы по селектору вместо
   добавления новых имён классов в разметку.
   ========================================================================== */
.services__head,
.cases__head,
.process__head {
  display: grid;
  grid-template-columns: var(--sidebar-col) 1fr;
  gap: 56px;
  align-items: baseline;
}
.about__inner,
.stack__inner {
  display: grid;
  grid-template-columns: var(--sidebar-col) 1fr;
  gap: 56px;
}

.services__label,
.cases__label,
.process__label,
.about__label,
.stack__label {
  font-size: 15px;
  color: var(--text-muted);
}

.services__title,
.cases__title,
.process__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  line-height: 1.14;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  max-width: 620px;
  text-wrap: var(--wrap-balance);
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__inner { padding: 88px var(--container-pad-x); max-width: var(--container-max); margin: 0 auto; }
.about__intro {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.0625rem);
  line-height: 1.36;
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
}
.about__text {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 660px;
  text-wrap: var(--wrap-pretty);
}
.about__content > * + * { margin-top: 20px; }
.about__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
.about__note {
  font-size: 16px;
  color: var(--text-muted);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services__inner { padding: 88px var(--container-pad-x); max-width: var(--container-max); margin: 0 auto; }
.services__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.service-card {
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}
.service-card__num {
  font-size: 14.5px;
  color: var(--accent);
}
.service-card__title {
  margin-top: 18px;
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.service-card__text {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-secondary);
  text-wrap: var(--wrap-pretty);
}
.service-card__list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.service-card__item {
  display: flex;
  gap: 11px;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
/* Маркер «—» — первый span внутри пункта (порядок задан структурой разметки). */
.service-card__item > *:first-child {
  color: var(--text-dash);
  flex: none;
}

/* ==========================================================================
   CASES
   ========================================================================== */
.cases__inner { padding: 88px var(--container-pad-x); max-width: var(--container-max); margin: 0 auto; }
.cases__grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 40px;
}
.case-card {
  display: flex;
  flex-direction: column;
}
.case-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-media-ph);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Оба скриншота кейсов — реальные снимки главных страниц, 1600×1000
   (соотношение 1.6:1, оно же 16:10) — точно совпадают с aspect-ratio
   контейнера выше, поэтому object-fit:cover ничего не кадрирует и служит
   лишь страховкой на случай будущей замены картинки другим форматом;
   карточки при этом остаются одинаковой высоты вне зависимости от контента. */
.case-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.case-card__media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  pointer-events: none;
}
.case-card__meta {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.case-card__category { font-size: 15px; color: var(--text-muted); }
.case-card__badge { font-size: 14px; color: var(--text-quiet2); }
.case-card__title {
  margin-top: 12px;
  font-size: 25px;
  font-weight: var(--fw-medium);
  line-height: 1.24;
  letter-spacing: var(--ls-tighter);
  color: var(--text-primary);
  text-wrap: var(--wrap-pretty);
}
/* Заголовок ведёт на детальную страницу кейса — цвет ссылки не должен
   перекрашиваться общим правилом a{color:accent}. */
.case-card__title a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-color);
}
.case-card__title a:hover { color: var(--accent); }
.case-card__compare {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px 14px;
  align-items: baseline;
}
.case-card__compare-label { font-size: 15px; color: var(--text-faint); }
.case-card__compare-value { font-size: 17.5px; line-height: 1.55; color: var(--text-secondary); }
.case-card__metric {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.case-card__metric-value {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 36px;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
.case-card__metric-note {
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--text-muted);
}
.cases__cta {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px 48px;
}
.cases__cta-text {
  flex: 1 1 320px;
  min-width: 0;
}
.cases__cta-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 31px;
  line-height: 1.25;
  color: var(--text-primary);
}
.cases__cta-desc {
  margin-top: 8px;
  font-size: 17.5px;
  color: var(--text-secondary);
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process__inner { padding: 88px var(--container-pad-x); max-width: var(--container-max); margin: 0 auto; }
.process__grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.process-step {
  padding-top: 20px;
  border-top: 1px solid var(--border-input);
}
.process-step__num {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 27px;
  color: var(--accent);
}
.process-step__title {
  margin-top: 12px;
  font-size: 19px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
}
.process-step__text {
  margin-top: 9px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
  text-wrap: var(--wrap-pretty);
}
.process__actions {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
.process__note { font-size: 16px; color: var(--text-muted); }

/* ==========================================================================
   STACK («Инструменты») — самая компактная секция (72px вместо 88px).
   ========================================================================== */
.stack__inner { padding: 72px var(--container-pad-x); max-width: var(--container-max); margin: 0 auto; }
.stack__label-note {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 190px;
}
.stack__row {
  padding: 18px 0;
  border-top: 1px solid var(--border-hairline);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: baseline;
}
.stack__row-label { font-size: 16px; color: var(--text-tertiary); }
.stack__row-items { font-size: 16px; line-height: 1.6; color: var(--text-muted); }

/* ==========================================================================
   CONTACT + подвал сайта (внутри той же секции, фон --bg-warm)
   ========================================================================== */
.contact { background: var(--bg-warm); }
.contact__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 96px var(--container-pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.contact__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.625rem);
  line-height: 1.08;
  letter-spacing: var(--ls-tightest);
  color: var(--text-primary);
  text-wrap: var(--wrap-balance);
}
.contact__lead {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 420px;
  text-wrap: var(--wrap-pretty);
}
.contact__details {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 17px;
}
.contact__row {
  display: flex;
  gap: 16px;
}
.contact__row > *:first-child {
  flex: none;
  width: 92px;
  color: var(--text-muted);
}
/* Значение статуса — единственная строка, где значение это <span>, а не
   ссылка: остальные ссылки уже красятся общим правилом a{color:accent}. */
.contact__row span:last-child { color: var(--status-green); }

.contact__form-card {
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 40px;
}
.contact__success[hidden],
.contact__form[hidden] { display: none; }
.contact__success { text-align: center; }
.contact__success-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.0625rem);
  line-height: 1.2;
  color: var(--text-primary);
}
.contact__success-text {
  margin-top: 14px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.contact__reset-btn { margin-top: 28px; }

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact__field-label {
  font-size: 15px;
  color: var(--text-muted);
}
.contact__field input,
.contact__field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-input);
  border-radius: 0;
  padding: 8px 0;
  font-family: inherit;
  font-size: 18px;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition-border);
}
.contact__field input::placeholder,
.contact__field textarea::placeholder {
  color: var(--text-faint);
}
.contact__field input:focus,
.contact__field textarea:focus {
  border-color: var(--text-primary);
}
.contact__field textarea {
  resize: vertical;
  min-height: 96px;
}
.contact__hint {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.contact__footer-bar {
  border-top: 1px solid var(--border-soft);
}
.contact__footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px var(--container-pad-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  font-size: 15.5px;
  color: var(--text-muted);
}
.contact__footer-name { color: var(--text-muted); }
.contact__footer-top {
  color: var(--text-muted);
  transition: var(--transition-color);
}
.contact__footer-top:hover { color: var(--text-primary); }

/* ==========================================================================
   ЮРИДИЧЕСКАЯ СТРАНИЦА (politika.html) — одноколоночная вёрстка,
   та же шапка/подвал и тот же набор токенов, без собственных цветов.
   ========================================================================== */
.legal__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 88px var(--container-pad-x) 96px;
}
.legal__eyebrow { font-size: 15px; color: var(--text-muted); }
.legal__title {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  line-height: 1.14;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.legal__intro {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.legal__draft {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-warm);
}
.legal__draft-label {
  font-size: 14.5px;
  font-weight: var(--fw-medium);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.legal__draft p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.legal__draft p:first-of-type { margin-top: 6px; }
.legal__body { margin-top: 48px; }
.legal__body h2 {
  margin-top: 40px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 25px;
  line-height: 1.3;
  color: var(--text-primary);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--text-secondary); }
.legal__body ul { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.legal__body li {
  padding-left: 18px;
  position: relative;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.legal__body li::before { content: "—"; position: absolute; left: 0; color: var(--text-dash); }
.legal__card {
  margin-top: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-page);
}
.legal__card p { font-size: 16.5px; line-height: 1.7; color: var(--text-secondary); }
.legal__card p + p { margin-top: 8px; }
.legal__closing {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border-default);
  font-size: 16.5px;
  color: var(--text-secondary);
}

/* ==========================================================================
   СТРАНИЦЫ КЕЙСОВ (keys-*.html) — переиспользуют токены, .btn и .case-card
   (мини-карточка «Другие кейсы»), плюс узко-именованные классы под
   нарративную структуру «Задача / Решение / Результат», которой нет
   на главной.
   ========================================================================== */
.case-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 88px var(--container-pad-x) 80px;
}
.case-hero__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.case-hero__category { font-size: 15px; color: var(--text-muted); }
.case-hero__badge { font-size: 14px; color: var(--text-quiet2); }
.case-hero__title {
  margin-top: 26px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  max-width: 780px;
  text-wrap: var(--wrap-balance);
}
.case-hero__lead {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 640px;
  text-wrap: var(--wrap-pretty);
}
.case-hero__tags {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.case-hero__tag {
  font-size: 14.5px;
  color: var(--text-tertiary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}
.case-hero__media {
  margin-top: 40px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-media-ph);
  overflow: hidden;
  max-width: 760px;
}
.case-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-hero__actions { margin-top: 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.case-hero__note { margin-top: 14px; font-size: 15px; color: var(--text-muted); }

.case-block { border-top: 1px solid var(--border-default); }
.case-block__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--container-pad-x);
  display: grid;
  grid-template-columns: var(--sidebar-col) 1fr;
  gap: 56px;
}
.case-block__label { font-size: 15px; color: var(--text-muted); }
.case-block__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 31px;
  color: var(--text-primary);
}
.case-block__body > * + * { margin-top: 18px; }
.case-block__body p {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 660px;
  text-wrap: var(--wrap-pretty);
}
.case-block__note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-hairline);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 660px;
}

.case-services { border-top: 1px solid var(--border-default); }
.case-services__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 88px var(--container-pad-x);
}
.case-services__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.case-services__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  color: var(--text-primary);
}
.case-services__cta {
  font-size: 16.5px;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-border-soft);
  padding-bottom: 1px;
  transition: var(--transition-border);
}
.case-services__cta:hover { border-color: var(--accent); color: var(--accent); }
.case-services__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.case-metrics {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 40px;
  max-width: 660px;
}
.case-metric-value {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.case-metric-note {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted);
}

.case-other { border-top: 1px solid var(--border-default); }
.case-other__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 88px var(--container-pad-x);
}
.case-other__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.case-other__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  color: var(--text-primary);
}
.case-other__meta { font-size: 15px; color: var(--text-muted); }
.case-other__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); }
.case-other .case-card { max-width: 460px; }

@media (max-width: 900px) {
  .case-block__inner { grid-template-columns: 1fr; gap: 20px; }
  .case-services__grid { grid-template-columns: repeat(2, 1fr); }
  .case-other__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .case-hero__inner, .case-block__inner, .case-services__inner, .case-other__inner {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .case-services__grid { grid-template-columns: 1fr; }
  .case-metrics { grid-template-columns: 1fr 1fr; }
}

/* Примечание: [data-reveal] не несёт собственных CSS-правил — состояние
   «скрыто перед появлением» ставится исключительно инлайн-стилями из
   js/main.js (initReveal), уже после guard-проверки (IntersectionObserver
   в наличии, вкладка видима, без prefers-reduced-motion). Без JS весь
   контент остаётся видимым по умолчанию — CSS этому ничем не мешает. */

/* ==========================================================================
   ACCESSIBILITY — фокус (§6 задания): при клике мышью рамки нет, но полностью
   убирать outline нельзя — тогда сайт станет непроходимым с клавиатуры.
   Правильная пара: outline:none только когда фокус НЕ клавиатурный
   (:focus:not(:focus-visible)), а видимое кольцо — только для :focus-visible.
   Современные браузеры рисуют outline по border-radius элемента, поэтому
   отдельно подгонять форму контура под пилюли не требуется.
   ========================================================================== */
*:focus:not(:focus-visible) {
  outline: none;
}
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.site-header__burger:focus-visible {
  outline-offset: 0;
}

/* ==========================================================================
   ПРЕДПОЧТЕНИЕ СНИЖЕНИЯ ДВИЖЕНИЯ
   Все переходы в макете идут через токены --transition-* — обнуляем их
   длительность здесь же, без дублирования правил. Анимация логотипа —
   единственное исключение с !important: так же, как в logo-animation-source.html,
   потому что пять @keyframes логотипа запускаются через отдельный класс .play,
   а не через токен-переменную, и должны быть отключены безусловно.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root {
    --transition-color: color 0s;
    --transition-bg: background 0s;
    --transition-bg-t: background 0s, transform 0s;
    --transition-bg-c: background 0s, color 0s;
    --transition-border: border-color 0s;
    --transition-border-c: color 0s, border-color 0s;
  }
  .btn--lg:hover,
  .cases__cta-btn:hover,
  .contact__submit-btn:hover { transform: none; }
  .skip-link { transition: none; }

  .site-header__mark.play,
  .site-header__mark.play .site-header__mark-bracket--left,
  .site-header__mark.play .site-header__mark-word,
  .site-header__mark.play .site-header__mark-dot,
  .site-header__mark.play .site-header__mark-bracket--right,
  .hero__logo.play,
  .hero__logo.play .hero__logo-bracket--left,
  .hero__logo.play .hero__logo-word,
  .hero__logo.play .hero__logo-dot,
  .hero__logo.play .hero__logo-bracket--right {
    animation: none !important;
  }
}

/* ==========================================================================
   АДАПТИВНОСТЬ — макет зафиксирован на ~1200px без единого @media;
   брейкпоинты ниже написаны с нуля, чтобы сайт оставался рабочим вплоть
   до 360px. Горизонтальные отступы контейнеров идут через переменную
   --container-pad-x — переопределяем её один раз на брейкпоинт вместо
   повторения padding в каждом селекторе.
   ========================================================================== */

/* --- ≤1100px: чуть уже боковые поля контейнеров --- */
@media (max-width: 1100px) {
  :root { --container-pad-x: 32px; }
}

/* --- ≤900px: навигация уходит в бургер, все 220px/1fr сетки схлопываются --- */
@media (max-width: 900px) {
  :root { --container-pad-x: 24px; }

  .site-header__nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    margin-left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-header);
    backdrop-filter: var(--blur-header);
    -webkit-backdrop-filter: var(--blur-header);
    border-bottom: 1px solid var(--border-default);
    padding: 8px 24px 16px;
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-hairline);
  }
  .site-header__nav a:last-child { border-bottom: none; }
  .site-header__burger { display: flex; }
  .site-header__inner { gap: 16px; }

  .about__inner,
  .services__head,
  .cases__head,
  .process__head,
  .stack__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .cases__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }

  .contact__inner { grid-template-columns: 1fr; gap: 48px; }
}

/* --- ≤640px: телефоны — вертикальные паддинги секций и оставшиеся сетки в 1 колонку --- */
@media (max-width: 640px) {
  :root { --container-pad-x: 20px; }

  .hero__inner { padding-top: 64px; padding-bottom: 56px; }
  .about__inner,
  .services__inner,
  .cases__inner,
  .process__inner { padding-top: 56px; padding-bottom: 56px; }
  .stack__inner { padding-top: 44px; padding-bottom: 44px; }
  .contact__inner { padding-top: 56px; padding-bottom: 56px; }

  .hero__stats { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; }

  .services__grid { grid-template-columns: 1fr; gap: 32px; }
  .process__grid { grid-template-columns: 1fr; gap: 28px; }

  .stack__row { grid-template-columns: 1fr; gap: 6px; }

  .cases__cta { flex-direction: column; align-items: flex-start; }
  .cases__cta-btn { width: 100%; }

  .contact__row { flex-direction: column; gap: 4px; }
  .contact__row > *:first-child { width: auto; }

  .contact__footer-inner { justify-content: flex-start; }
}

/* --- ≤400px: самые узкие экраны — статы hero в один столбец --- */
@media (max-width: 400px) {
  .hero__stats { grid-template-columns: 1fr; gap: 20px; }
}

/* --- ≤380px: нижняя граница адаптива (вплоть до 360px).
   В шапке на этой ширине одновременно живут лого, переключатель языка,
   CTA и бургер — сжимаем их, чтобы строка не переполнялась и не переносилась
   (высота sticky-шапки должна остаться постоянной). --- */
@media (max-width: 380px) {
  :root { --container-pad-x: 16px; }
  .site-header__inner { gap: 10px; }
  .site-header__mark { font-size: 19px; }
  .site-header__lang { font-size: 12px; gap: 6px; }
  .site-header__cta { padding: 9px 14px; font-size: 14px; }
}