/* ==== tokens.css ==== */
/* ============================================================
   SAVIN-SEO — DESIGN TOKENS (единственное место с «сырыми» значениями)
   Все блоки используют ТОЛЬКО эти переменные. Новые :root в блоках запрещены.
   Размеры шрифта и отступов — в нотации одежды: xs / s / m / l / xl / xxl.
   ============================================================ */
:root {
  /* ---- COLORS: Primary ---- */
  --color-ink: #0b0b0b;
  --color-black: #050505;
  --color-white: #ffffff;
  --color-bg: #f4f1ea;      /* фон страницы (бумага) */
  --color-paper: #fbf8f0;   /* фон контента */

  /* ---- COLORS: Accent (красный) ---- */
  --color-accent: #ed1616;
  --color-accent-dark: #b70f16;

  /* ---- COLORS: Grey ---- */
  --color-grey-100: #f0ede6;
  --color-grey-200: #e2ded5;
  --color-grey-300: #c9c5bb;
  --color-grey-400: #a9a59b;
  --color-grey-500: #807c73;
  --color-grey-700: #4a4843;
  --color-line: #1d1d1d;     /* линии/границы */
  --color-muted: #6d6a64;    /* приглушённый текст */

  /* ---- COLORS: роли ---- */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-muted);
  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-dark);

  /* ---- LEGACY-алиасы (для уже свёрстанной главной; синий убран → ink) ---- */
  --color-red: var(--color-accent);
  --color-red-dark: var(--color-accent-dark);
  --color-blue: var(--color-ink);

  /* ---- SPACING (одежда) ---- */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 48px;
  --space-xxl: 80px;
  --gap: var(--space-l); /* legacy */

  /* ---- FONT SIZE (одежда) ---- */
  --fz-xs: 12px;   /* подписи, лейблы */
  --fz-s: 14px;    /* мелкий текст */
  --fz-m: 16px;    /* базовый текст */
  --fz-l: 20px;    /* лид/подзаголовок */
  --fz-xl: 28px;   /* H3 */
  --fz-xxl: 40px;  /* H2 */
  --fz-display: clamp(58px, 7.2vw, 116px); /* H1/hero */

  /* ---- LINE HEIGHT ---- */
  --lh-tight: 0.9;
  --lh-snug: 1.15;
  --lh-base: 1.5;

  /* ---- LETTER SPACING ---- */
  --ls-tight: -0.04em;
  --ls-wide: 0.08em;

  /* ---- FONT FAMILY / WEIGHT ---- */
  --font-base: Arial, Helvetica, sans-serif;
  --font-condensed: "Arial Narrow", "Helvetica Neue Condensed", Impact, Arial, sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---- LAYOUT ---- */
  --container: 1180px;
  --line: 1px solid var(--color-line);
  --radius: 0;

  /* ---- CONTROLS / FOCUS ---- */
  --control-h: 52px;        /* высота полей ввода / кнопок-инпутов */
  --tap: 44px;              /* минимальная тач-зона */
  --focus-w: 2px;
  --focus-color: var(--color-accent);

  /* ---- ICON ---- */
  --icon-s: 18px;
  --icon-m: 24px;
  --icon-l: 36px;

  /* ---- BREAKPOINTS (справочно; в @media — px-литералы) ----
     wide: 1120px · tablet: 860px · mobile: 560px */
}


/* ==== base.css ==== */
/* ============================================================
   SAVIN-SEO — BASE: reset, типографика по умолчанию, контейнер,
   хром страницы дизайн-системы (.sg-*) и хелперы для демо.
   Использует только токены из tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fz-m);
  line-height: var(--lh-base);
}

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

/* Глобальный видимый фокус для клавиатуры (покрывает legacy и новые блоки).
   :where() = нулевая специфичность, блоки при необходимости переопределят. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-w) solid var(--focus-color);
  outline-offset: 2px;
}

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

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

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }

/* ---- Контейнер ---- */
.container {
  width: min(var(--container), calc(100% - 2 * var(--space-l)));
  margin-inline: auto;
}

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

/* ============================================================
   STYLEGUIDE CHROME — оформление страницы /UI/index.html
   (не часть продакшн-блоков сайта, только для документации)
   ============================================================ */

.sg-page { background: var(--color-bg); }

.sg-page__head {
  padding: var(--space-xl) var(--space-l);
  border-bottom: var(--line);
  background: var(--color-paper);
}
.sg-page__title {
  font-family: var(--font-condensed);
  font-size: var(--fz-xxl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.sg-page__subtitle {
  margin-top: var(--space-s);
  color: var(--color-muted);
  font-size: var(--fz-s);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.sg-page__body { padding-block: var(--space-xl); }

/* Секция дизайн-системы */
.sg-section {
  margin-bottom: var(--space-xl);
  border: var(--line);
  background: var(--color-paper);
}
.sg-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border-bottom: var(--line);
}
.sg-section__num {
  color: var(--color-accent);
  font-size: var(--fz-l);
  font-weight: var(--fw-black);
}
.sg-section__title {
  font-family: var(--font-condensed);
  font-size: var(--fz-xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}
.sg-section__body { padding: var(--space-l); }

/* Под-блок (для раздела 10. Components) */
.sg-sub { margin-bottom: var(--space-xl); }
.sg-sub:last-child { margin-bottom: 0; }
.sg-sub__title {
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: var(--line);
  font-size: var(--fz-xs);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-muted);
}

/* Демо-хелперы */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-m);
}
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }
.sg-panel {
  padding: var(--space-l);
  border: var(--line);
  background: var(--color-white);
}
.sg-label {
  display: block;
  margin-top: var(--space-s);
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-muted);
}
.sg-code {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: var(--fz-xs);
  color: var(--color-accent);
}

@media (max-width: 560px) {
  /* На телефоне боковые поля контента — space-m (синхронно с шапкой/подвалом) */
  .container { width: calc(100% - 2 * var(--space-m)); }
  .sg-section__body { padding: var(--space-m); }
  .sg-grid { grid-template-columns: 1fr 1fr; }
}


/* ==== blocks/_site.css ==== */
/* ============================================================
   _site.css — уже свёрстанные блоки сайта (из исходного макета).
   :root удалён: переменные берутся из tokens.css. Классы НЕ переименовывать —
   на них завязана главная (Site/index.html). Полная токенизация — фаза-2.
   ============================================================ */
* {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--color-bg);
      color: var(--color-ink);
      font-family: var(--font-base);
      font-size: 16px;
      line-height: 1.45;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

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

    .page {
      min-height: 100vh;
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px) 0 0 / 25% auto,
        var(--color-bg);
    }

    .page__inner {
      width: min(var(--container), calc(100% - 48px));
      margin: 0 auto;
      border-left: var(--line);
      border-right: var(--line);
      background: var(--color-paper);
    }

    .section {
      border-top: var(--line);
    }

    .section__head {
      display: grid;
      grid-template-columns: 96px 1fr auto;
      align-items: start;
      min-height: 72px;
      border-bottom: var(--line);
    }

    .section__number {
      padding: 18px 18px;
      color: var(--color-red);
      font-weight: 800;
      letter-spacing: 0.04em;
      border-right: var(--line);
    }

    .section__title {
      margin: 0;
      padding: 17px 18px;
      font-family: var(--font-condensed);
      font-size: clamp(26px, 4vw, 52px);
      line-height: 0.95;
      text-transform: uppercase;
      letter-spacing: -0.03em;
    }

    .section__caption {
      display: block;
      margin-bottom: 8px;
      font-family: var(--font-base);
      font-size: 12px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--color-muted);
      text-transform: uppercase;
    }

    .section__action {
      padding: 20px 18px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .section__body {
      padding: 0;
    }

    .link-arrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .link-arrow::after {
      content: "↗";
      display: inline-grid;
      place-items: center;
      width: 18px;
      height: 18px;
      font-size: 15px;
      line-height: 1;
      transition: transform 0.2s ease;
    }

    .link-arrow:hover::after {
      transform: translate(3px, -3px);
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 52px;
      padding: 0 28px;
      border: 0;
      background: var(--color-red);
      color: var(--color-white);
      cursor: pointer;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .button::after {
      content: "↗";
      font-size: 16px;
    }

    .button:hover {
      background: var(--color-red-dark);
      transform: translateY(-2px);
    }

    .button--black {
      background: var(--color-black);
    }

    .button--black:hover {
      background: #242424;
    }

    .button--line {
      background: transparent;
      color: var(--color-ink);
      border: var(--line);
    }

    .button--line:hover {
      background: var(--color-ink);
      color: var(--color-white);
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      display: grid;
      grid-template-columns: auto 180px 1fr 220px 72px;
      min-height: 74px;
      border-bottom: var(--line);
      background: rgba(244, 241, 234, 0.94);
      backdrop-filter: blur(16px);
    }

    .header__logo {
      white-space: nowrap;
      display: flex;
      align-items: center;
      padding: 0 24px;
      border-right: var(--line);
      font-family: var(--font-condensed);
      font-size: 32px;
      line-height: 0.9;
      font-weight: 900;
      letter-spacing: -0.04em;
      text-transform: uppercase;
    }

    .header__logo-accent {
      color: var(--color-red);
    }

    .header__descriptor {
      display: flex;
      align-items: center;
      padding: 0 18px;
      border-right: var(--line);
      font-size: 11px;
      line-height: 1.15;
      font-weight: 800;
      text-transform: uppercase;
    }

    .header__nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 34px;
      padding: 0 20px;
    }

    .header__link {
      position: relative;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .header__link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -7px;
      height: 2px;
      background: var(--color-red);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.2s ease;
    }

    .header__link:hover::after {
      transform: scaleX(1);
    }

    .header__cta {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      border-left: var(--line);
      background: var(--color-black);
      color: var(--color-white);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .header__menu {
      display: none;
      place-items: center;
      border-left: var(--line);
      background: transparent;
      cursor: pointer;
    }

    .header__burger {
      width: 28px;
      height: 18px;
      position: relative;
    }

    .header__burger::before,
    .header__burger::after,
    .header__burger span {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--color-ink);
    }

    .header__burger::before {
      top: 0;
    }

    .header__burger span {
      top: 8px;
    }

    .header__burger::after {
      bottom: 0;
    }

    .hero {
      display: grid;
      grid-template-columns: 56px 1.08fr 0.92fr 56px;
      min-height: 520px;
      border-bottom: var(--line);
    }

    .hero__rail {
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: var(--line);
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-muted);
    }

    .hero__rail--right {
      border-right: 0;
      border-left: var(--line);
      transform: none;
    }

    .hero__content {
      position: relative;
      padding: 76px 56px 44px;
    }

    .hero__eyebrow {
      margin: 0 0 28px;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .hero__title {
      max-width: 620px;
      margin: 0 0 28px;
      font-family: var(--font-condensed);
      font-size: clamp(58px, 7.2vw, 116px);
      line-height: 0.86;
      font-weight: 900;
      letter-spacing: -0.06em;
      text-transform: uppercase;
    }

    .hero__title span {
      color: var(--color-red);
    }

    .hero__text {
      max-width: 450px;
      margin: 0 0 34px;
      font-size: 15px;
      line-height: 1.55;
    }

    .hero__actions {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
    }

    .hero__meta {
      position: absolute;
      left: 56px;
      bottom: 32px;
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 16px;
      font-weight: 900;
    }

    .hero__meta-line {
      width: 86px;
      height: 1px;
      background: var(--color-ink);
    }

    .hero__visual {
      position: relative;
      display: grid;
      place-items: stretch;
      border-left: var(--line);
      overflow: hidden;
      background: var(--color-red);
    }

    .hero__visual-grid {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.8) 50%, transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.8) 50%, transparent calc(50% + 1px));
      opacity: 0.8;
    }

    .hero__visual-diagonal {
      position: absolute;
      left: -8%;
      top: 49%;
      width: 116%;
      height: 1px;
      background: var(--color-white);
      transform: rotate(-28deg);
      transform-origin: center;
    }

    .hero__visual-point {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 16px;
      background: var(--color-white);
      transform: translate(-50%, -50%);
    }

    .hero__visual-label {
      position: absolute;
      top: 26px;
      left: 28px;
      color: var(--color-white);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .hero__visual-coords {
      position: absolute;
      top: 26px;
      right: 28px;
      color: var(--color-white);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }

    .hero__monogram {
      position: absolute;
      right: 42px;
      bottom: 30px;
      color: var(--color-white);
      font-family: var(--font-condensed);
      font-size: clamp(120px, 18vw, 230px);
      line-height: 0.8;
      font-weight: 900;
      letter-spacing: -0.08em;
      text-transform: uppercase;
    }

    .trust {
      display: grid;
      grid-template-columns: 140px 1fr 130px;
      min-height: 74px;
      border-bottom: var(--line);
    }

    .trust__label,
    .trust__more {
      display: flex;
      align-items: center;
      padding: 0 18px;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--color-muted);
    }

    .trust__list {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border-left: var(--line);
      border-right: var(--line);
    }

    .trust__item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      border-right: var(--line);
      font-size: clamp(14px, 1.5vw, 21px);
      font-weight: 900;
      text-transform: uppercase;
      filter: grayscale(1);
    }

    .trust__item:last-child {
      border-right: 0;
    }

    .split {
      display: grid;
      grid-template-columns: 0.95fr 1.65fr;
      min-height: 360px;
    }

    .split__left {
      border-right: var(--line);
    }

    .problems {
      display: grid;
      grid-template-rows: 72px 1fr;
    }

    .problems__head,
    .services-summary__head {
      display: flex;
      gap: 16px;
      align-items: center;
      min-height: 72px;
      padding: 18px;
      border-bottom: var(--line);
    }

    .problems__number,
    .services-summary__number {
      color: var(--color-red);
      font-size: 18px;
      font-weight: 900;
    }

    .problems__title,
    .services-summary__title {
      margin: 0;
      font-size: 13px;
      line-height: 1.15;
      font-weight: 900;
      text-transform: uppercase;
    }

    .problems__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .problems__item {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      padding: 24px 24px;
      border-bottom: var(--line);
    }

    .problems__item:last-child {
      border-bottom: 0;
    }

    .problems__mark {
      color: var(--color-red);
      font-size: 22px;
      line-height: 1;
    }

    .problems__name {
      margin: 0 0 8px;
      font-size: 17px;
      line-height: 1.05;
      font-weight: 900;
      text-transform: uppercase;
    }

    .problems__text {
      margin: 0;
      color: var(--color-muted);
      font-size: 13px;
    }

    .services-summary__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

    .service-tile {
      position: relative;
      min-height: 140px;
      padding: 26px 28px;
      border-right: var(--line);
      border-bottom: var(--line);
    }

    .service-tile:nth-child(2n) {
      border-right: 0;
    }

    .service-tile:nth-last-child(-n + 2) {
      border-bottom: 0;
    }

    .service-tile__num {
      position: absolute;
      top: 24px;
      right: 26px;
      color: var(--color-blue);
      font-size: 24px;
      font-weight: 900;
    }

    .service-tile__title {
      max-width: 250px;
      margin: 0 0 10px;
      font-family: var(--font-condensed);
      font-size: 28px;
      line-height: 0.95;
      font-weight: 900;
      text-transform: uppercase;
    }

    .service-tile__text {
      max-width: 260px;
      margin: 0;
      font-size: 13px;
      color: var(--color-muted);
    }

    .process {
      background: var(--color-black);
      color: var(--color-white);
    }

    .process__grid {
      display: grid;
      grid-template-columns: 76px repeat(6, 1fr);
      min-height: 176px;
    }

    .process__label {
      padding: 28px 18px;
      border-right: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--color-white);
    }

    .process__step {
      position: relative;
      padding: 28px 24px;
      border-right: 1px solid rgba(255, 255, 255, 0.3);
    }

    .process__step:last-child {
      border-right: 0;
    }

    .process__num {
      display: block;
      margin-bottom: 14px;
      font-size: 18px;
      font-weight: 900;
    }

    .process__title {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .process__text {
      margin: 0;
      color: rgba(255, 255, 255, 0.74);
      font-size: 13px;
    }

    .process__arrow {
      position: absolute;
      top: 32px;
      right: 18px;
      font-size: 28px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .case-card {
      min-height: 260px;
      border-right: var(--line);
      padding: 24px;
    }

    .case-card:last-child {
      border-right: 0;
    }

    .case-card__tag {
      display: inline-flex;
      margin-bottom: 12px;
      color: var(--color-red);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .case-card__title {
      max-width: 280px;
      margin: 0 0 18px;
      font-family: var(--font-condensed);
      font-size: 32px;
      line-height: 0.95;
      font-weight: 900;
      text-transform: uppercase;
    }

    .case-card__visual {
      height: 92px;
      margin: 0 0 18px;
      border: var(--line);
      background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 0 44%, rgba(255, 255, 255, 0.68) 44% 46%, transparent 46%),
        linear-gradient(90deg, rgba(237, 22, 22, 0.92) 0 48%, rgba(0, 0, 0, 0.06) 48% 100%),
        repeating-linear-gradient(135deg, #d8d8d8 0 8px, #c9c9c9 8px 16px);
    }

    .case-card--blue .case-card__visual {
      background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 0 44%, rgba(255, 255, 255, 0.68) 44% 46%, transparent 46%),
        linear-gradient(90deg, rgba(6, 77, 255, 0.92) 0 50%, rgba(0, 0, 0, 0.06) 50% 100%),
        repeating-linear-gradient(135deg, #d8d8d8 0 8px, #c9c9c9 8px 16px);
    }

    .case-card__metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .case-card__metric {
      border-right: var(--line);
      padding-right: 10px;
    }

    .case-card__metric:last-child {
      border-right: 0;
    }

    .case-card__value {
      display: block;
      color: var(--color-red);
      font-size: 26px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .case-card--blue .case-card__value {
      color: var(--color-blue);
    }

    .case-card__label {
      display: block;
      margin-top: 8px;
      font-size: 10px;
      line-height: 1.2;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--color-muted);
    }

    .team-review {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-top: var(--line);
    }

    .team {
      border-right: var(--line);
    }

    .team__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .person {
      min-height: 240px;
      padding: 18px;
      border-right: var(--line);
    }

    .person:last-child {
      border-right: 0;
    }

    .person__photo {
      height: 154px;
      margin-bottom: 14px;
      border: var(--line);
      background:
        radial-gradient(circle at 50% 35%, #c7c7c7 0 16%, transparent 17%),
        radial-gradient(ellipse at 50% 112%, #222 0 36%, transparent 37%),
        linear-gradient(135deg, #333, #d2d2d2);
      filter: grayscale(1);
    }

    .person__name {
      margin: 0 0 4px;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .person__role {
      margin: 0;
      color: var(--color-muted);
      font-size: 12px;
    }

    .review {
      padding: 0;
    }

    .review__body {
      min-height: 240px;
      padding: 24px 34px;
    }

    .review__quote {
      margin: 0 0 18px;
      color: var(--color-red);
      font-family: var(--font-condensed);
      font-size: 80px;
      line-height: 0.6;
      font-weight: 900;
    }

    .review__text {
      max-width: 480px;
      margin: 0 0 24px;
      font-size: 20px;
      line-height: 1.25;
      font-weight: 700;
    }

    .review__author {
      margin: 0 0 4px;
      color: var(--color-red);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .review__role {
      margin: 0;
      color: var(--color-muted);
      font-size: 12px;
    }

    .review__controls {
      display: flex;
      justify-content: flex-end;
      gap: 20px;
      padding: 0 34px 24px;
    }

    .review__control {
      border: 0;
      background: transparent;
      font-size: 30px;
      cursor: pointer;
    }

    .pricing-faq {
      display: grid;
      grid-template-columns: 1.14fr 0.86fr;
      border-top: var(--line);
    }

    .pricing {
      border-right: var(--line);
    }

    .pricing__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .price-card {
      position: relative;
      min-height: 252px;
      padding: 26px 24px;
      border-right: var(--line);
    }

    .price-card:last-child {
      border-right: 0;
    }

    .price-card--accent {
      background: var(--color-blue);
      color: var(--color-white);
    }

    .price-card__badge {
      position: absolute;
      top: 0;
      right: 0;
      padding: 7px 12px;
      background: var(--color-red);
      color: var(--color-white);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .price-card__title {
      margin: 0 0 12px;
      font-family: var(--font-condensed);
      font-size: 30px;
      line-height: 0.95;
      font-weight: 900;
      text-transform: uppercase;
    }

    .price-card__text {
      margin: 0 0 22px;
      font-size: 13px;
      color: var(--color-muted);
    }

    .price-card--accent .price-card__text {
      color: rgba(255, 255, 255, 0.78);
    }

    .price-card__price {
      display: block;
      margin-bottom: 14px;
      font-size: 30px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .price-card__list {
      margin: 0 0 24px;
      padding-left: 18px;
      font-size: 12px;
    }

    .price-card__list li {
      margin-bottom: 5px;
    }

    .faq {
      padding: 0;
    }

    .faq__item {
      border-bottom: var(--line);
    }

    .faq__button {
      width: 100%;
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 20px;
      border: 0;
      background: transparent;
      text-align: left;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .faq__button::after {
      content: "+";
      font-size: 22px;
      font-weight: 400;
    }

    .faq__answer {
      display: none;
      padding: 0 20px 18px;
      color: var(--color-muted);
      font-size: 13px;
    }

    .faq__item.is-open .faq__answer {
      display: block;
    }

    .faq__item.is-open .faq__button::after {
      content: "-";
    }

    .final {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr 280px;
      min-height: 148px;
      background: var(--color-red);
      color: var(--color-black);
      border-top: var(--line);
    }

    .final__mark {
      position: relative;
      border-right: 1px solid rgba(255, 255, 255, 0.55);
      background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.7) 50%, transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.7) 50%, transparent calc(50% + 1px));
    }

    .final__mark::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 16px;
      background: var(--color-white);
      transform: translate(-50%, -50%);
    }

    .final__title {
      margin: 0;
      padding: 28px 28px 22px;
      font-family: var(--font-condensed);
      font-size: clamp(42px, 6vw, 88px);
      line-height: 0.82;
      font-weight: 900;
      letter-spacing: -0.05em;
      text-transform: uppercase;
    }

    .final__cta {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 18px;
      padding: 24px;
      border-left: 1px solid rgba(255, 255, 255, 0.55);
      color: var(--color-white);
    }

    .final__small {
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .footer {
      display: grid;
      grid-template-columns: 160px 1.2fr 1fr 1fr 1fr;
      min-height: 104px;
      border-top: var(--line);
    }

    .footer__brand {
      padding: 22px 18px;
      border-right: var(--line);
      font-family: var(--font-condensed);
      font-size: 26px;
      line-height: 0.9;
      font-weight: 900;
      text-transform: uppercase;
    }

    .footer__col {
      padding: 22px 18px;
      border-right: var(--line);
    }

    .footer__col:last-child {
      border-right: 0;
    }

    .footer__title {
      margin: 0 0 10px;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--color-muted);
    }

    .footer__text,
    .footer__link {
      display: block;
      margin: 0 0 5px;
      font-size: 12px;
      font-weight: 700;
    }

    .mobile-nav {
      display: none;
    }

    @media (max-width: 1120px) {
      .page__inner {
        width: min(100%, calc(100% - 24px));
      }

      .header {
        grid-template-columns: auto 1fr 190px 64px;
      }

      .header__descriptor {
        display: none;
      }

      .header__nav {
        gap: 22px;
      }

      .hero {
        grid-template-columns: 44px 1fr 0.9fr;
      }

      .hero__rail--right {
        display: none;
      }

      .hero__content {
        padding: 58px 38px 42px;
      }

      .hero__meta {
        left: 38px;
      }

      .split,
      .pricing-faq {
        grid-template-columns: 1fr;
      }

      .split__left,
      .pricing {
        border-right: 0;
        border-bottom: var(--line);
      }

      .process__grid {
        grid-template-columns: 76px repeat(3, 1fr);
      }

      .process__step:nth-child(4) {
        border-right: 0;
      }

      .process__step:nth-child(n + 5) {
        border-top: 1px solid rgba(255, 255, 255, 0.3);
      }
    }

    @media (max-width: 860px) {
      .page {
        background: var(--color-bg);
      }

      .page__inner {
        width: 100%;
        border-left: 0;
        border-right: 0;
      }

      .header {
        grid-template-columns: 1fr 64px;
        min-height: 64px;
      }

      .header__logo {
        padding: 0 18px;
        font-size: 30px;
      }

      .header__nav,
      .header__cta {
        display: none;
      }

      .header__menu {
        display: grid;
      }

      .mobile-nav {
        display: none;
        position: fixed;
        inset: 64px 0 auto 0;
        z-index: 45;
        background: var(--color-paper);
        border-bottom: var(--line);
      }

      .mobile-nav.is-open {
        display: block;
      }

      .mobile-nav__link {
        display: block;
        padding: 18px;
        border-bottom: var(--line);
        font-weight: 900;
        text-transform: uppercase;
      }

      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .hero__rail {
        display: none;
      }

      .hero__content {
        min-height: 430px;
        padding: 44px 18px 28px;
      }

      .hero__title {
        font-size: clamp(54px, 18vw, 86px);
      }

      .hero__meta {
        position: static;
        margin-top: 36px;
      }

      .hero__visual {
        min-height: 320px;
        border-left: 0;
        border-top: var(--line);
      }

      .hero__monogram {
        right: 24px;
        bottom: 24px;
        font-size: 170px;
      }

      .trust {
        grid-template-columns: 1fr;
      }

      .trust__list {
        grid-template-columns: repeat(2, 1fr);
        border-left: 0;
        border-right: 0;
        border-top: var(--line);
        border-bottom: var(--line);
      }

      .trust__item:nth-child(2n) {
        border-right: 0;
      }

      .trust__item:nth-child(n + 3) {
        border-top: var(--line);
      }

      .trust__more {
        justify-content: flex-end;
      }

      .section__head {
        grid-template-columns: 64px 1fr;
      }

      .section__action {
        grid-column: 1 / -1;
        border-top: var(--line);
      }

      .cards,
      .team-review,
      .pricing__grid,
      .footer,
      .final {
        grid-template-columns: 1fr;
      }

      .case-card,
      .team,
      .person,
      .price-card,
      .footer__brand,
      .footer__col,
      .final__mark,
      .final__cta {
        border-right: 0;
        border-bottom: var(--line);
      }

      .team__grid {
        grid-template-columns: 1fr;
      }

      .person {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 16px;
        min-height: auto;
      }

      .person__photo {
        height: 120px;
        margin: 0;
      }

      .review__body {
        min-height: auto;
        padding: 24px 18px;
      }

      .review__text {
        font-size: 18px;
      }

      .pricing-faq {
        grid-template-columns: 1fr;
      }

      .final__mark {
        min-height: 90px;
      }

      .final__title {
        padding: 24px 18px;
      }

      .process__grid {
        grid-template-columns: 1fr;
      }

      .process__label,
      .process__step {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      }

      .process__step:nth-child(n + 5) {
        border-top: 0;
      }
    }

    @media (max-width: 560px) {
      .hero__actions {
        align-items: stretch;
        flex-direction: column;
      }

      .button,
      .button--line {
        width: 100%;
      }

      .services-summary__grid {
        grid-template-columns: 1fr;
      }

      .service-tile,
      .service-tile:nth-child(2n),
      .service-tile:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: var(--line);
      }

      .service-tile:last-child {
        border-bottom: 0;
      }

      .case-card__metrics {
        grid-template-columns: 1fr;
      }

      .case-card__metric {
        border-right: 0;
        border-bottom: var(--line);
        padding: 0 0 12px;
      }

      .case-card__metric:last-child {
        border-bottom: 0;
      }
    }


/* ==== blocks/home.css ==== */
/* ============================================================
   home.css — просторная главная SAVIN-SEO.
   Концепция макета сохранена (узкий гротеск, красный акцент, бумага,
   тонкие акцент-линии), но без плотной сетки бордер-ячеек: крупный
   вертикальный ритм, много воздуха, простые секции. Только токены, БЭМ.
   ============================================================ */

.home { background: var(--color-bg); color: var(--color-text); }

/* Шапка, подвал и контентная обёртка — ОДНА ширина и ОДИН боковой отступ,
   чтобы шапка/подвал точно совпадали по краям с контентом (тот же gutter, что у .container). */
.header,
.footer,
.home__wrap {
  width: min(var(--container), calc(100% - 2 * var(--space-l)));
  margin-inline: auto;
}

/* ---- Секция: крупные вертикальные отступы, тонкий разделитель ---- */
.home-section { padding-block: var(--space-xxl); }
.home-section + .home-section { border-top: 1px solid var(--color-grey-200); }
.home-section__head { max-width: 60ch; margin-bottom: var(--space-xl); }
.home-section__eyebrow {
  display: block;
  margin-bottom: var(--space-m);
  color: var(--color-accent);
  font-size: var(--fz-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.home-section__title {
  margin: 0;
  font-family: var(--font-condensed);
  font-size: var(--fz-xxl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.home-section__intro {
  margin-top: var(--space-m);
  max-width: 64ch;
  color: var(--color-text-muted);
  font-size: var(--fz-l);
}
.home-section__more { margin-top: var(--space-l); }

/* ---- HERO ---- */
.home-hero { padding-block: calc(var(--space-xxl) + var(--space-xl)); }
.home-hero__eyebrow {
  display: block;
  margin-bottom: var(--space-l);
  color: var(--color-accent);
  font-size: var(--fz-s);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.home-hero__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-condensed);
  font-size: var(--fz-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.home-hero__title-accent { color: var(--color-accent); }
.home-hero__text {
  margin-top: var(--space-l);
  max-width: 56ch;
  font-size: var(--fz-l);
  color: var(--color-text-muted);
}
.home-hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  align-items: center;
}
.home-hero__visual {
  margin-top: var(--space-xl);
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
}
/* Реальный логотип бренда в шапке/футере.
   max-width:none перебивает базовое img{max-width:100%}; flex:0 0 auto — не сжимать во флексе;
   так картинка держит свою пропорцию при фиксированной высоте. */
.header__logo-img {
  height: 40px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}
.footer__logo-img {
  height: 34px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}

/* ---- STATS (цифры доверия) ---- */
.home-stats {
  margin-top: var(--space-xxl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl) var(--space-xxl);
}
.home-stats__item { max-width: 26ch; }
.home-stats__value {
  display: block;
  font-family: var(--font-condensed);
  font-size: var(--fz-xxl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
}
.home-stats__label {
  display: block;
  margin-top: var(--space-xs);
  max-width: 22ch;
  font-size: var(--fz-s);
  color: var(--color-text-muted);
}

/* ---- CLIENTS (нам доверяют) ---- */
.home-clients__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l) var(--space-xl);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-clients__item {
  font-family: var(--font-condensed);
  font-size: var(--fz-l);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-grey-500);
}

/* ---- SERVICES ---- */
.home-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
.home-service__num {
  font-family: var(--font-condensed);
  font-size: var(--fz-l);
  font-weight: var(--fw-black);
  color: var(--color-accent);
}
.home-service__title {
  margin: var(--space-s) 0;
  font-family: var(--font-condensed);
  font-size: var(--fz-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}
.home-service__text { margin: 0; color: var(--color-text-muted); }

/* ---- PROCESS ---- */
.home-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}
.home-step__num {
  display: block;
  font-family: var(--font-condensed);
  font-size: var(--fz-xxl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  color: var(--color-grey-300);
}
.home-step__title {
  margin: var(--space-s) 0 var(--space-xs);
  font-size: var(--fz-m);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}
.home-step__text { margin: 0; font-size: var(--fz-s); color: var(--color-text-muted); }

/* ---- CASES (используем .portfolio-card) ---- */
.home-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
}

/* ---- PRICING ---- */
.home-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
}
.home-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  border: 1px solid var(--color-grey-300);
  background: var(--color-paper);
}
.home-plan--featured {
  border-color: var(--color-accent);
  box-shadow: var(--space-xs) var(--space-xs) 0 var(--color-accent);
}
.home-plan__name {
  font-family: var(--font-condensed);
  font-size: var(--fz-xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}
.home-plan__price {
  margin: var(--space-s) 0 var(--space-l);
  font-family: var(--font-condensed);
  font-size: var(--fz-xl);
  font-weight: var(--fw-black);
  color: var(--color-accent);
}
.home-plan__list {
  margin: 0 0 var(--space-l);
  padding-left: var(--space-l);
  color: var(--color-text-muted);
  font-size: var(--fz-s);
}
.home-plan__list li { margin-bottom: var(--space-xs); }
.home-plan__cta { margin-top: auto; }

/* ---- WHY US ---- */
.home-why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
.home-why__item {
  display: grid;
  grid-template-columns: var(--space-xl) 1fr;
  gap: var(--space-m);
  align-items: start;
}
.home-why__mark {
  font-family: var(--font-condensed);
  font-size: var(--fz-xl);
  font-weight: var(--fw-black);
  color: var(--color-accent);
  line-height: var(--lh-tight);
}
.home-why__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--fz-m);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}
.home-why__text { margin: 0; color: var(--color-text-muted); font-size: var(--fz-s); }

/* ---- FOUNDER ---- */
.home-founder {
  --mono-fz: clamp(96px, 14vw, 180px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  align-items: center;
}
.home-founder__mono {
  font-family: var(--font-condensed);
  font-size: var(--mono-fz);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
}
.home-founder__photo {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  border: 1px solid var(--color-line);
}
.home-founder__name {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-condensed);
  font-size: var(--fz-xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}
.home-founder__role {
  margin: 0 0 var(--space-m);
  color: var(--color-accent);
  font-size: var(--fz-s);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.home-founder__text { margin: 0; color: var(--color-text-muted); font-size: var(--fz-m); }

/* ---- FINAL CTA ---- */
.home-cta {
  margin-block: 0 var(--space-xxl);
  padding: var(--space-xxl) var(--space-xl);
  background: var(--color-accent);
  color: var(--color-white);
  text-align: center;
}
.home-cta__title {
  margin: 0 auto var(--space-l);
  max-width: 20ch;
  font-family: var(--font-condensed);
  font-size: var(--fz-xxl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.home-cta__text { margin: 0 auto var(--space-l); max-width: 48ch; }

/* ---- АДАПТИВ ---- */
@media (max-width: 860px) {
  .home-process { grid-template-columns: repeat(2, 1fr); }
  .home-cases,
  .home-pricing { grid-template-columns: repeat(2, 1fr); }
  .home-founder { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* На телефоне сужаем боковые поля до space-m и держим шапку/подвал/контент синхронными */
  .header,
  .footer,
  .home__wrap { width: calc(100% - 2 * var(--space-m)); }
  .home-cta { padding: var(--space-xl) var(--space-m); }
  .home-section { padding-block: var(--space-xl); }
  .home-hero { padding-block: var(--space-xxl); }
  .home-services,
  .home-process,
  .home-cases,
  .home-pricing,
  .home-why { grid-template-columns: 1fr; }
}


/* ==== blocks/page.css ==== */
/* ============================================================
   page.css — внутренние страницы (обвязка + типографика).
   Контент в .container (base.css), вертикальный ритм + .prose.
   Только токены. Формы/FAQ/CTA берут готовые блоки (.field/.faq/.home-cta).
   ============================================================ */

.page { padding-block: var(--space-xl) var(--space-xxl); }

/* ---- Хлебные крошки ---- */
.crumbs { margin-bottom: var(--space-l); }
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--space-xs) var(--space-s); padding: 0; margin: 0;
  font-size: var(--fz-s);
}
.crumbs li { color: var(--color-muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--space-s); color: var(--color-grey-400); }
.crumbs a { color: var(--color-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); }
.crumbs [aria-current="page"] { color: var(--color-ink); font-weight: var(--fw-bold); }

/* ---- Заголовок страницы ---- */
.page-hero { margin-bottom: var(--space-xl); }
.page-hero__eyebrow {
  display: block; margin-bottom: var(--space-m);
  color: var(--color-accent); font-size: var(--fz-xs); font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.page-hero__title {
  margin: 0; max-width: 22ch;
  font-family: var(--font-condensed); font-size: var(--fz-xxl); line-height: var(--lh-tight);
  font-weight: var(--fw-black); letter-spacing: var(--ls-tight); text-transform: uppercase;
}
.page-hero__intro {
  margin-top: var(--space-m); max-width: 64ch;
  color: var(--color-text-muted); font-size: var(--fz-l);
}

/* ---- Проза (контент внутренней страницы) ---- */
.prose { max-width: 78ch; }
.prose h2 {
  margin: var(--space-xl) 0 var(--space-s);
  font-family: var(--font-condensed); font-size: var(--fz-xl); line-height: var(--lh-snug);
  font-weight: var(--fw-black); letter-spacing: var(--ls-tight); text-transform: uppercase;
}
.prose h3 { margin: var(--space-l) 0 var(--space-xs); font-size: var(--fz-l); font-weight: var(--fw-black); }
.prose p { margin: 0 0 var(--space-m); }
.prose ul, .prose ol { margin: 0 0 var(--space-m); padding-left: var(--space-l); }
.prose li { margin-bottom: var(--space-xs); }
.prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-link-hover); }
.prose strong { font-weight: var(--fw-black); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-m); }
.prose th, .prose td { padding: var(--space-s); border: var(--line); text-align: left; font-size: var(--fz-s); }

@media (max-width: 560px) {
  .page { padding-block: var(--space-l) var(--space-xl); }
  .page-hero__title { font-size: var(--fz-xl); }
}


/* ==== blocks/grid.css ==== */
/* ============================================================
   BLOCK: l-grid — грид-система SAVIN-SEO.
   Контейнер: max var(--container)=1180, поля var(--space-l).
   Колоночные сетки 2/3/4/6, gap var(--space-l), адаптив.
   Только токены (геометрия/проценты/fr и px-брейкпоинты — допустимо).
   ============================================================ */

/* Контейнер ширины контента — общий .container из base.css (не дублируем). */

/* Базовый грид */
.l-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}

/* Модификаторы числа колонок */
.l-grid--2 { grid-template-columns: repeat(2, 1fr); }
.l-grid--3 { grid-template-columns: repeat(3, 1fr); }
.l-grid--4 { grid-template-columns: repeat(4, 1fr); }
.l-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* ---- Адаптив: планшет 860px → максимум 2 колонки ---- */
@media (max-width: 860px) {
  .l-grid--3,
  .l-grid--4,
  .l-grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Адаптив: мобайл 560px → 1 колонка ---- */
@media (max-width: 560px) {
  .l-grid--2,
  .l-grid--3,
  .l-grid--4,
  .l-grid--6 {
    grid-template-columns: 1fr;
  }
}


/* ==== blocks/spacing.css ==== */
/* ============================================================
   SAVIN-SEO — BLOCK: spacing
   Шкала отступов (нотация одежды). Ширина полосы = соответствующий
   токен --space-*. Только токены из tokens.css; без :root и сырых px.
   ============================================================ */

.spacing {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.spacing__row {
  display: grid;
  grid-template-columns: var(--space-xxl) 1fr;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: var(--line);
  background: var(--color-white);
}

.spacing__bar {
  height: var(--space-m);
  background: var(--color-accent);
}

.spacing__bar--xs  { width: var(--space-xs); }
.spacing__bar--s   { width: var(--space-s); }
.spacing__bar--m   { width: var(--space-m); }
.spacing__bar--l   { width: var(--space-l); }
.spacing__bar--xl  { width: var(--space-xl); }
.spacing__bar--xxl { width: var(--space-xxl); }

.spacing__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  flex-wrap: wrap;
  min-width: 0;
}

.spacing__name {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

.spacing__val {
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-muted);
}

@media (max-width: 860px) {
  .spacing__row {
    grid-template-columns: var(--space-xl) 1fr;
    gap: var(--space-s);
  }
}

@media (max-width: 560px) {
  .spacing__row {
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }
}


/* ==== blocks/typography.css ==== */
/* ============================================================
   SAVIN-SEO — TYPOGRAPHY
   Утилиты типографики, привязанные к токенам шкалы --fz-*.
   Заголовочные (.t-display/.t-h2/.t-h3) — condensed, uppercase,
   --ls-tight, line-height --lh-tight. Текстовые — base, --lh-base.
   Только токены. БЭМ: блок .t-*, утилитарные модификаторы .t--*.
   ============================================================ */

/* ---- Headings: condensed, uppercase, tight ---- */
.t-display,
.t-h2,
.t-h3 {
  font-family: var(--font-condensed);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.t-display { font-size: var(--fz-display); }
.t-h2 { font-size: var(--fz-xxl); }
.t-h3 { font-size: var(--fz-xl); }

/* ---- Lead: крупный вводный текст ---- */
.t-lead {
  font-family: var(--font-base);
  font-size: var(--fz-l);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

/* ---- Body: базовый текст ---- */
.t-body {
  font-family: var(--font-base);
  font-size: var(--fz-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}

/* ---- Small: мелкий текст ---- */
.t-small {
  font-family: var(--font-base);
  font-size: var(--fz-s);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}

/* ---- Caption: подписи/лейблы ---- */
.t-caption {
  font-family: var(--font-base);
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---- Модификаторы веса ---- */
.t--regular { font-weight: var(--fw-regular); }
.t--bold { font-weight: var(--fw-bold); }
.t--black { font-weight: var(--fw-black); }

/* ---- Модификаторы семейства ---- */
.t--base { font-family: var(--font-base); }
.t--condensed { font-family: var(--font-condensed); }

/* ---- Модификаторы цвета (роли текста) ---- */
.t--accent { color: var(--color-accent); }
.t--muted { color: var(--color-text-muted); }

/* ---- Адаптив: ужимаем заголовки на планшете/мобайле ---- */
@media (max-width: 860px) {
  .t-h2 { font-size: var(--fz-xl); }
  .t-h3 { font-size: var(--fz-l); }
}

@media (max-width: 560px) {
  .t-lead { font-size: var(--fz-m); }
}


/* ==== blocks/colors.css ==== */
/* ============================================================
   BLOCK: swatch — чип палитры (цвет + имя токена + hex).
   Только токены из tokens.css. БЭМ. Аддитивно к _site.css.
   ============================================================ */

.swatch {
  /* высота цветового образца — локальная блок-переменная (НЕ :root) */
  --chip: var(--space-xxl);
  display: flex;
  flex-direction: column;
  border: var(--line);
  background: var(--color-white);
}

/* Цветовой образец */
.swatch__chip {
  position: relative;
  height: var(--chip);
  border-bottom: var(--line);
  background: var(--color-grey-100);
}

/* Образец светлого цвета — внутренняя рамка для видимости на белой панели */
.swatch__chip--bordered::after {
  content: "";
  position: absolute;
  inset: var(--space-s);
  border: var(--line);
}

/* Тёмный образец — индикатор «инверсный» */
.swatch__chip--dark {
  color: var(--color-white);
}

/* Подписи */
.swatch__meta {
  padding: var(--space-s) var(--space-m) var(--space-m);
}

.swatch__name {
  display: block;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  word-break: break-all;
}

.swatch__hex {
  display: block;
  margin-top: var(--space-xs);
  font-family: ui-monospace, "Courier New", monospace;
  font-size: var(--fz-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-muted);
}

/* ---- Адаптив ---- */
@media (max-width: 860px) {
  .swatch {
    --chip: 72px;
  }
}

@media (max-width: 560px) {
  .swatch {
    --chip: 64px;
  }
  .swatch__meta {
    padding: var(--space-s) var(--space-s) var(--space-m);
  }
}


/* ==== blocks/button.css ==== */
/* ============================================================
   button.css — РАЗМЕРЫ и СОСТОЯНИЯ кнопки (аддитивно к _site.css).
   База .button / .button--black / .button--line / .link-arrow —
   уже в _site.css, здесь НЕ дублируются. Только токены.
   БЭМ: .button--s / .button--l (модификаторы размера),
        .button[disabled] / .button.is-disabled (состояние).
   ============================================================ */

/* ---- Размер S ---- */
.button--s {
  min-height: var(--space-xl);          /* 48px — тач-зона ≥44px */
  padding: 0 var(--space-m);
  font-size: var(--fz-xs);
  gap: var(--space-s);
}

.button--s::after {
  font-size: var(--fz-s);
}

/* ---- Размер L ---- */
.button--l {
  min-height: calc(var(--space-xl) + var(--space-m));   /* выше базовой */
  padding: 0 var(--space-xl);
  font-size: var(--fz-m);
  gap: var(--space-m);
}

.button--l::after {
  font-size: var(--fz-l);
}

/* ---- Состояние disabled ---- */
.button[disabled],
.button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  transform: none;
}

/* ---- Имитация состояний для styleguide-демо ----
   Статичный показ :hover / :focus-visible на странице дизайн-системы.
   Дублируют визуал из _site.css (:hover) и base.css (:focus-visible). */
.button--state-hover {
  background: var(--color-red-dark);
  transform: translateY(-2px);
}

.button--state-hover.button--black {
  background: color-mix(in srgb, var(--color-black) 78%, var(--color-white));
}

.button--state-hover.button--line {
  background: var(--color-ink);
  color: var(--color-white);
}

.button--state-focus {
  outline: var(--focus-w) solid var(--focus-color);
  outline-offset: 2px;
}

/* ---- Адаптив: ПК + мобайл ---- */
@media (max-width: 560px) {
  .button--s,
  .button--l {
    width: 100%;
  }
}


/* ==== blocks/nav.css ==== */
/* ============================================================
   nav.css — навигация SAVIN-SEO: breadcrumbs, pagination, tabs.
   Только токены из tokens.css. БЭМ. Адаптив ПК + мобайл.
   Главное меню переиспользует .header__nav из _site.css (новых стилей нет).
   ============================================================ */

/* ---- BREADCRUMBS ---- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.breadcrumbs__item:hover {
  color: var(--color-link-hover);
}

.breadcrumbs__item--current {
  color: var(--color-text);
  pointer-events: none;
}

.breadcrumbs__sep {
  color: var(--color-grey-400);
  font-weight: var(--fw-regular);
  user-select: none;
}

/* ---- PAGINATION ---- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--space-s);
  border: var(--line);
  background: var(--color-white);
  color: var(--color-text);
  font-size: var(--fz-s);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pagination__item:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.pagination__item--current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  font-weight: var(--fw-black);
  pointer-events: none;
}

.pagination__item--gap {
  border-color: transparent;
  background: transparent;
  color: var(--color-muted);
  pointer-events: none;
}

.pagination__item--disabled {
  color: var(--color-grey-400);
  background: var(--color-grey-100);
  border-color: var(--color-grey-300);
  pointer-events: none;
}

/* ---- TABS ---- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  border-bottom: var(--line);
}

.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-s) 0;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  font-size: var(--fz-s);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: color 0.2s ease;
}

.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.tabs__tab:hover {
  color: var(--color-text);
}

.tabs__tab--active {
  color: var(--color-text);
  font-weight: var(--fw-black);
}

.tabs__tab--active::after {
  transform: scaleX(1);
}

/* ---- a11y: видимый фокус ---- */
.breadcrumbs__item:focus-visible,
.pagination__item:focus-visible,
.tabs__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 860px) {
  .tabs {
    gap: var(--space-m);
  }
}

@media (max-width: 560px) {
  .breadcrumbs {
    gap: var(--space-xs);
  }

  .tabs {
    flex-wrap: nowrap;
    gap: var(--space-m);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs__tab {
    white-space: nowrap;
  }
}


/* ==== blocks/input.css ==== */
/* ============================================================
   INPUTS — поля форм дизайн-системы SAVIN-SEO.
   БЭМ-блоки: .field (.field__label/__hint/__error), .input, .textarea,
   .select, .checkbox (__box/__label), .radio.
   Только токены. Геометрия (1px бордеры, проценты, em) — допустима.
   ============================================================ */

/* ---- FIELD: контейнер поля (лейбл + контрол + подсказка/ошибка) ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.field__label {
  font-size: var(--fz-xs);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text);
}

.field__hint {
  font-size: var(--fz-xs);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.field__error {
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  color: var(--color-accent);
}

/* ---- INPUT / TEXTAREA / SELECT: общая база ---- */
.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-m);
  border: var(--line);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fz-m);
  line-height: var(--lh-base);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 var(--focus-w) color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* ---- TEXTAREA ---- */
.textarea {
  --textarea-min-h: calc(var(--control-h) + var(--space-xxl)); /* ≈132px, локальная блок-переменная */
  min-height: var(--textarea-min-h);
  resize: vertical;
}

/* ---- SELECT: своя стрелка-индикатор ---- */
.select {
  appearance: none;
  padding-right: var(--space-xl);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: right var(--space-m) center, right calc(var(--space-m) + 6px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ---- СОСТОЯНИЕ: ошибка ----
   Отличается от фокуса: насыщенный красный border + плотное двойное кольцо. */
.input--error,
.textarea--error,
.select--error,
.is-error .input,
.is-error .textarea,
.is-error .select {
  border-color: var(--color-accent-dark);
  box-shadow: 0 0 0 1px var(--color-accent-dark),
    0 0 0 var(--focus-w) color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.input--error:focus,
.textarea--error:focus,
.select--error:focus,
.is-error .input:focus,
.is-error .textarea:focus,
.is-error .select:focus {
  border-color: var(--color-accent-dark);
  box-shadow: 0 0 0 1px var(--color-accent-dark),
    0 0 0 var(--focus-w) color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* ---- СОСТОЯНИЕ: disabled ---- */
.input[disabled],
.textarea[disabled],
.select[disabled] {
  background: var(--color-grey-100);
  color: var(--color-text-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- CHECKBOX ---- */
.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-s);
  min-height: 44px;
  cursor: pointer;
}

.checkbox__box {
  position: relative;
  flex: 0 0 auto;
  width: var(--icon-s);
  height: var(--icon-s);
  margin-top: 2px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.checkbox__box:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}

.checkbox__box:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.checkbox__box:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 9px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.checkbox__label {
  font-size: var(--fz-s);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.checkbox__box[disabled] {
  background: var(--color-grey-100);
  opacity: 0.6;
  cursor: not-allowed;
}

.checkbox__box[disabled] + .checkbox__label {
  color: var(--color-text-muted);
}

/* ---- FORM: вертикальная раскладка (каждое поле/чекбокс/кнопка на своей строке) ---- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  align-items: stretch;
}
.form .button { align-self: flex-start; }

/* ---- RADIO ---- */
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-s);
  min-height: 44px;
  cursor: pointer;
}

.radio__box {
  position: relative;
  flex: 0 0 auto;
  width: var(--icon-s);
  height: var(--icon-s);
  margin-top: 2px;
  border: var(--line);
  border-radius: 50%;
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.radio__box:focus-visible {
  outline: none;
  border-color: var(--color-accent);
}

.radio__box:checked {
  border-color: var(--color-accent);
}

.radio__box:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}

.radio__label {
  font-size: var(--fz-s);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.radio__box[disabled] {
  background: var(--color-grey-100);
  opacity: 0.6;
  cursor: not-allowed;
}

.radio__box[disabled] + .radio__label {
  color: var(--color-text-muted);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 560px) {
  .input,
  .textarea,
  .select {
    font-size: var(--fz-m);
  }
}


/* ==== blocks/search.css ==== */
/* ============================================================
   SAVIN-SEO — BLOCK: search (строка поиска)
   БЭМ. Только токены из tokens.css. Editorial brutalism, красный акцент.
   Тач-зона полей/кнопок ≥ 44px. Адаптив: ПК + мобайл.
   ============================================================ */

.search {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 520px;
  border: var(--line);
  background: var(--color-white);
}

.search:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Поле ввода ---- */
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--control-h);
  padding: var(--space-s) var(--space-m);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fz-m);
  line-height: var(--lh-base);
}

.search__input::placeholder {
  color: var(--color-text-muted);
}

.search__input:focus {
  outline: 0;
}

/* ---- Иконка (line-стиль, наследует currentColor) ---- */
.search__icon {
  flex: none;
  width: var(--icon-m);
  height: var(--icon-m);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Иконка слева внутри поля (декоративная) ---- */
.search__lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-h);
  min-height: var(--control-h);
  color: var(--color-text-muted);
}

.search:focus-within .search__lead {
  color: var(--color-accent);
}

/* когда есть лид-иконка слева — убираем дублирующий левый отступ поля */
.search__lead + .search__input {
  padding-left: 0;
}

/* ---- Кнопка ---- */
.search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  flex: none;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--space-m);
  border: 0;
  border-left: var(--line);
  background: var(--color-accent);
  color: var(--color-white);
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--fz-xs);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  transition: background 0.2s ease;
}

.search__button:hover {
  background: var(--color-accent-dark);
}

.search__button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: -4px;
}

/* кнопка только с иконкой — квадратная тач-зона */
.search__button--icon {
  padding: 0;
  width: var(--control-h);
}

/* ---- Модификатор: иконка-кнопка слева (вариант без текста) ---- */
.search--lead-icon .search__button {
  border-left: 0;
  border-right: var(--line);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 560px) {
  .search {
    max-width: none;
  }

  .search__input {
    min-height: 48px;
    font-size: var(--fz-s);
  }

  .search__lead {
    width: 48px;
    min-height: 48px;
  }

  /* текст кнопки прячем — оставляем иконку, чтобы тач-зона не съедала ширину поля */
  .search__button {
    min-height: 48px;
    padding: 0;
    width: 48px;
  }
}


/* ==== blocks/icon.css ==== */
/* ============================================================
   BLOCK: icon — иконография (один инлайн SVG-спрайт + класс .icon)
   Использование: <svg class="icon icon--m"><use href="#i-telegram"></use></svg>
   Только токены. БЭМ. Аддитивно к _site.css.
   ============================================================ */

/* Спрайт скрыт из потока и из дерева доступности (aria-hidden в разметке) */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Базовый класс иконки — line-стиль по умолчанию */
.icon {
  display: inline-block;
  width: var(--icon-m);
  height: var(--icon-m);
  flex: none;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;
}

/* ---- Размеры ---- */
.icon--s { width: var(--icon-s); height: var(--icon-s); }
.icon--m { width: var(--icon-m); height: var(--icon-m); }
.icon--l { width: var(--icon-l); height: var(--icon-l); }

/* ---- Цветовой модификатор ---- */
.icon--accent { color: var(--color-accent); }

/* ---- Заливочный модификатор (для solid-символов, если понадобятся) ---- */
.icon--fill { fill: currentColor; stroke: none; }


/* ==== blocks/header.css ==== */
/* ============================================================
   BLOCK: header — модификатор .header--dark (аддитивно к _site.css).
   Базовые .header / .header__* объявлены в _site.css — НЕ дублировать.
   Только токены. БЭМ. Без :root и без переопределения токенов.
   ============================================================ */

/* Тёмная шапка: чёрный фон, белый текст/ссылки, красное акцент-подчёркивание */
.header--dark {
  background: var(--color-black);
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

/* Логотип — белый, акцентная часть остаётся красной (.header__logo-accent из _site.css) */
.header--dark .header__logo {
  border-right-color: var(--color-white);
  color: var(--color-white);
}

.header--dark .header__descriptor {
  border-right-color: var(--color-white);
  color: var(--color-white);
}

/* Навигация: белые ссылки; подчёркивание ::after наследует красный из _site.css */
.header--dark .header__link {
  color: var(--color-white);
}

/* CTA на тёмном фоне — инвертируем в акцент, чтобы выделялся */
.header--dark .header__cta {
  border-left-color: var(--color-white);
  background: var(--color-accent);
  color: var(--color-white);
}

.header--dark .header__cta:hover {
  background: var(--color-accent-dark);
}

/* Бургер-кнопка и линии — белые */
.header--dark .header__menu {
  border-left-color: var(--color-white);
}

.header--dark .header__burger::before,
.header--dark .header__burger::after,
.header--dark .header__burger span {
  background: var(--color-white);
}

/* a11y: видимый фокус на интерактивных элементах тёмной шапки */
.header--dark .header__link:focus-visible,
.header--dark .header__cta:focus-visible,
.header--dark .header__menu:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Адаптив ---- */
@media (max-width: 1120px) {
  .header--dark .header__descriptor {
    border-right-color: var(--color-white);
  }
}

@media (max-width: 860px) {
  /* На мобайле остаются видимыми только логотип и бургер-меню */
  .header--dark .header__logo {
    border-right-color: var(--color-white);
  }
  .header--dark .header__menu {
    border-left-color: var(--color-white);
  }
}


/* ==== blocks/footer.css ==== */
/* ============================================================
   FOOTER — аддитивно к _site.css.
   Базовые .footer / .footer__brand / .footer__col / .footer__title /
   .footer__text / .footer__link уже свёрстаны в _site.css (НЕ дублировать).
   Здесь только новый модификатор --dark и его подэлементы.
   Только токены; БЭМ; адаптив.
   ============================================================ */

/* Тёмный подвал: инверсия фон/текст */
.footer--dark {
  background: var(--color-black);
  color: var(--color-white);
  border-top-color: var(--color-white);
}

.footer--dark .footer__brand,
.footer--dark .footer__col {
  border-right-color: var(--color-grey-700);
}

.footer--dark .footer__title {
  color: var(--color-grey-400);
}

.footer--dark .footer__text {
  color: var(--color-grey-300);
}

.footer--dark .footer__link {
  color: var(--color-white);
  transition: color 0.2s ease;
}

.footer--dark .footer__link:hover,
.footer--dark .footer__link:focus-visible {
  color: var(--color-accent);
}

/* Видимый фокус для ссылок (a11y) на тёмном фоне */
.footer--dark .footer__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: var(--space-xs);
}

/* Правовая полоса: на всю ширину подвала, отдельной строкой снизу.
   Ссылки на политику/обработку ПДн/карту сайта + копирайт. */
.footer__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
  padding: var(--space-m) var(--space-l);
  border-top: var(--line);
  font-size: var(--fz-xs);
  color: var(--color-muted);
}

.footer__legal .footer__link {
  font-size: var(--fz-xs);
}

.footer__copy {
  margin-left: auto;
}

@media (max-width: 560px) {
  .footer__copy {
    margin-left: 0;
  }
}

/* Ряд соцсетей — иконки */
.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-s);
}

.footer__social {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--line);
  color: var(--color-ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer__social:hover,
.footer__social:focus-visible {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.footer__social:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: var(--space-xs);
}

.footer--dark .footer__social {
  border-color: var(--color-grey-700);
  color: var(--color-white);
}

.footer--dark .footer__social:hover,
.footer--dark .footer__social:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

@media (max-width: 860px) {
  /* На мобайле колонки тёмного подвала отделяются светлой линией
     (базовый .footer уже схлопывается в 1 колонку в _site.css) */
  .footer--dark .footer__brand,
  .footer--dark .footer__col {
    border-right: 0;
    border-bottom: 1px solid var(--color-grey-700);
  }

  .footer--dark .footer__col:last-child {
    border-bottom: 0;
  }
}


/* ==== blocks/card.css ==== */
/* ============================================================
   BLOCK: card — карточки услуг и кейсов.
   .service-tile и .case-card(--blue/...) уже определены в _site.css —
   здесь НЕ дублируются. Аддитивно добавлен только модификатор
   .case-card--accent (акцентный кейс на токене --color-accent).
   Только токены из tokens.css. БЭМ. Без :root и переопределения токенов.
   ============================================================ */

/* Акцентный кейс: визуал и значения метрик окрашены в фирменный красный
   через токен (в отличие от legacy .case-card--blue с сырым синим). */
.case-card--accent .case-card__visual {
  background:
    linear-gradient(115deg, transparent 0 44%, var(--color-white) 44% 46%, transparent 46%),
    linear-gradient(90deg, var(--color-accent) 0 48%, var(--color-grey-200) 48% 100%),
    repeating-linear-gradient(135deg, var(--color-grey-300) 0 8px, var(--color-grey-200) 8px 16px);
}

.case-card--accent .case-card__tag,
.case-card--accent .case-card__value {
  color: var(--color-accent);
}

/* Аддитивный адаптив: на мобайле метрики в одну колонку
   (на случай рендера блока card вне контекста главной страницы). */
@media (max-width: 560px) {
  .case-card--accent .case-card__metrics {
    grid-template-columns: 1fr;
  }
}


/* ==== blocks/portfolio-card.css ==== */
/* ============================================================
   portfolio-card — карточка проекта в портфолио.
   Только токены из tokens.css. БЭМ. Аддитивно к _site.css.
   __visual — CSS-плейсхолдер (градиенты, без <img>), hover-подъём.
   ============================================================ */

.portfolio-card {
  /* локальные блок-переменные (НЕ :root) — выносим «магические» размеры */
  --pc-visual-h: 150px;

  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  border: var(--line);
  background: var(--color-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--color-line);
}

/* ---- Визуал-плейсхолдер (на градиентах) ---- */
.portfolio-card__visual {
  position: relative;
  height: var(--pc-visual-h);
  margin-bottom: var(--space-m);
  border: var(--line);
  overflow: hidden;
  background:
    linear-gradient(115deg, transparent 0 44%, color-mix(in srgb, var(--color-white) 68%, transparent) 44% 46%, transparent 46%),
    linear-gradient(90deg, var(--color-accent) 0 48%, color-mix(in srgb, var(--color-ink) 6%, transparent) 48% 100%),
    repeating-linear-gradient(135deg, var(--color-grey-200) 0 8px, var(--color-grey-300) 8px 16px);
  transition: background-position 0.3s ease, filter 0.3s ease;
}

.portfolio-card:hover .portfolio-card__visual {
  filter: saturate(1.15) contrast(1.05);
}

/* ---- Реальная картинка кейса поверх плейсхолдера ---- */
.portfolio-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* модификаторы ниш — смена акцентного градиента визуала */
.portfolio-card--ecom .portfolio-card__visual {
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--color-white) 70%, transparent) 0 9%, transparent 10%),
    linear-gradient(135deg, var(--color-accent) 0 52%, var(--color-ink) 52% 100%),
    repeating-linear-gradient(90deg, var(--color-grey-200) 0 8px, var(--color-grey-300) 8px 16px);
}

.portfolio-card--med .portfolio-card__visual {
  background:
    linear-gradient(0deg, transparent calc(50% - 1px), color-mix(in srgb, var(--color-white) 75%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(135deg, var(--color-grey-400) 0 50%, var(--color-accent) 50% 100%),
    repeating-linear-gradient(45deg, var(--color-grey-100) 0 8px, var(--color-grey-200) 8px 16px);
}

.portfolio-card--industry .portfolio-card__visual {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-white) 50%, transparent) 0 2px, transparent 2px 12px),
    linear-gradient(115deg, var(--color-ink) 0 46%, var(--color-accent) 46% 100%),
    repeating-linear-gradient(135deg, var(--color-grey-300) 0 8px, var(--color-grey-400) 8px 16px);
}

/* ---- Оверлей-метка поверх визуала ---- */
.portfolio-card__overlay {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--fz-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ---- Тег ниши ---- */
.portfolio-card__tag {
  display: inline-flex;
  margin-bottom: var(--space-s);
  color: var(--color-accent);
  font-size: var(--fz-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ---- Заголовок проекта ---- */
.portfolio-card__title {
  margin-bottom: var(--space-m);
  font-family: var(--font-condensed);
  font-size: var(--fz-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

/* ---- Метрики ---- */
.portfolio-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  margin-bottom: var(--space-l);
  padding-top: var(--space-m);
  border-top: var(--line);
}

.portfolio-card__metric {
  padding-right: var(--space-s);
  border-right: var(--line);
}

.portfolio-card__metric:last-child {
  padding-right: 0;
  border-right: 0;
}

.portfolio-card__value {
  display: block;
  color: var(--color-accent);
  font-size: var(--fz-xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
}

.portfolio-card__label {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--fz-xs);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

/* ---- Ссылка на кейс (прижата к низу) ---- */
.portfolio-card__link {
  margin-top: auto;
  color: var(--color-ink);
}

.portfolio-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* ============================================================
   АДАПТИВ: 3 → 2 → 1 (демо-сетка отдаётся через .sg-* в body.html,
   ниже — внутренняя раскладка метрик карточки на узких экранах)
   ============================================================ */
@media (max-width: 860px) {
  .portfolio-card__title {
    font-size: var(--fz-l);
  }

  .portfolio-card__value {
    font-size: var(--fz-l);
  }
}

@media (max-width: 560px) {
  .portfolio-card__meta {
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }

  .portfolio-card__metric {
    padding-right: 0;
    padding-bottom: var(--space-s);
    border-right: 0;
    border-bottom: var(--line);
  }

  .portfolio-card__metric:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}


/* ==== blocks/video.css ==== */
/* ============================================================
   VIDEO — плеер-плейсхолдер и раскладка «видео + список превью».
   Только токены из tokens.css. БЭМ. Без :root и сырых значений.
   ============================================================ */

/* ---- .video : плейсхолдер плеера ---- */
.video {
  --video-play: 72px;
  position: relative;
}

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--line);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--color-white) 8%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--color-ink) 0%, var(--color-black) 100%);
  overflow: hidden;
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--video-play);
  height: var(--video-play);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.video__play:hover {
  background: var(--color-accent-dark);
  transform: translate(-50%, -50%) scale(1.06);
}

.video__play:focus-visible {
  outline: var(--line);
  outline-offset: var(--space-xs);
}

.video__label {
  position: absolute;
  top: var(--space-m);
  left: var(--space-m);
  max-width: 70%;
  color: var(--color-white);
  font-size: var(--fz-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.video__duration {
  position: absolute;
  right: var(--space-m);
  bottom: var(--space-m);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

/* ---- .video-structure : крупное видео + список превью ---- */
.video-structure {
  --vs-col: 96px;
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  border: var(--line);
}

.video-structure__main {
  padding: var(--space-l);
  border-right: var(--line);
}

.video-structure__aside {
  display: flex;
  flex-direction: column;
}

.video-structure__item {
  display: grid;
  grid-template-columns: var(--vs-col) 1fr;
  gap: var(--space-m);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: var(--space-m);
  border: 0;
  border-bottom: var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-structure__item:last-child {
  border-bottom: 0;
}

.video-structure__item:hover,
.video-structure__item:focus-visible {
  background: var(--color-grey-100);
  outline: 0;
}

.video-structure__item:focus-visible {
  outline: var(--line);
  outline-offset: calc(-1 * var(--space-xs));
}

.video-structure__item-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--line);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--color-white) 8%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--color-ink) 0%, var(--color-black) 100%);
}

.video-structure__item-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--color-white);
  transform: translate(-40%, -50%);
}

.video-structure__item-title {
  margin: 0;
  font-size: var(--fz-s);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* ---- Адаптив ---- */
@media (max-width: 860px) {
  .video-structure {
    grid-template-columns: 1fr;
  }

  .video-structure__main {
    border-right: 0;
    border-bottom: var(--line);
  }
}

@media (max-width: 560px) {
  .video__play {
    width: 56px;
    height: 56px;
  }

  .video-structure__item {
    grid-template-columns: 72px 1fr;
    gap: var(--space-s);
    padding: var(--space-s);
  }
}


/* ==== blocks/faq.css ==== */
/* ============================================================
   BLOCK: faq — «Вопросы и ответы» (аккордеон)
   Базовые селекторы (.faq .faq__item .faq__button .faq__answer .is-open)
   уже описаны в _site.css, тоггл — в app.js. Здесь ТОЛЬКО аддитивные
   правила: a11y-фокус, тач-зоны, анимация маркера, адаптив. Не дублируем.
   Все значения — токены (var(--…)); сырые px — лишь в @media и геометрии.
   ============================================================ */

/* Видимый фокус для клавиатуры (a11y) */
.faq__button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Маркер +/- (из _site.css ::after) — плавный поворот при открытии */
.faq__button::after {
  transition: transform 0.2s ease, color 0.2s ease;
}

.faq__item.is-open .faq__button::after {
  color: var(--color-accent);
  transform: rotate(180deg);
}

/* Лёгкая подсветка строки на hover/в открытом состоянии */
.faq__button:hover {
  color: var(--color-accent);
}

.faq__item.is-open .faq__button {
  color: var(--color-accent);
}

/* ---- Модификатор: компактный список (для узких колонок) ---- */
.faq--compact .faq__button {
  min-height: var(--space-xl);
  font-size: var(--fz-xs);
}

.faq--compact .faq__answer {
  font-size: var(--fz-xs);
}

/* ============================================================
   АДАПТИВ — тач-зоны ≥ 44px и читаемость на мобайле
   ============================================================ */
@media (max-width: 860px) {
  .faq__button {
    min-height: 56px;
    font-size: var(--fz-s);
  }

  .faq__answer {
    font-size: var(--fz-s);
  }
}

@media (max-width: 560px) {
  .faq__button {
    gap: var(--space-s);
    padding: var(--space-m);
  }

  .faq__answer {
    padding: 0 var(--space-m) var(--space-m);
  }
}


/* ==== blocks/review.css ==== */
/* ============================================================
   review.css — БЛОК «Отзывы» (карточка отзыва).
   НОВЫЙ блок .review-card. Существующий .review (одиночная цитата)
   живёт в _site.css и здесь НЕ дублируется/не переименовывается.
   Только токены из tokens.css. БЭМ. Аддитивно.
   ============================================================ */

/* ---- Сетка карточек ---- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}

/* ---- Карточка отзыва ---- */
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l);
  border: var(--line);
  background: var(--color-white);
}

/* ---- Шапка: аватар + имя/роль ---- */
.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.review-card__avatar {
  flex: 0 0 auto;
  width: var(--space-xl);
  height: var(--space-xl);
  display: grid;
  place-items: center;
  border: var(--line);
  background: var(--color-grey-100);
  color: var(--color-accent);
  font-family: var(--font-condensed);
  font-size: var(--fz-l);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  overflow: hidden;
}

.review-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.review-card__name {
  margin: 0;
  font-size: var(--fz-s);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.review-card__role {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--fz-xs);
  line-height: var(--lh-snug);
}

/* ---- Рейтинг звёздами ---- */
.review-card__stars {
  display: inline-flex;
  gap: var(--space-xs);
  font-size: var(--fz-l);
  line-height: 1;
}

.review-card__star {
  color: var(--color-grey-300);
}

.review-card__star--on {
  color: var(--color-accent);
}

/* ---- Текст отзыва ---- */
.review-card__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fz-m);
  line-height: var(--lh-base);
}

/* ---- Модификатор: акцентная карточка ---- */
.review-card--accent {
  background: var(--color-black);
  color: var(--color-white);
}

.review-card--accent .review-card__avatar {
  background: var(--color-black);
  color: var(--color-white);
}

.review-card--accent .review-card__text {
  color: var(--color-white);
}

.review-card--accent .review-card__star {
  color: var(--color-grey-700);
}

/* ---- Адаптив ---- */
@media (max-width: 860px) {
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .review-grid {
    grid-template-columns: 1fr;
  }

  .review-card {
    padding: var(--space-m);
  }
}


/* ==== blocks/cookie.css ==== */
/* ============================================================
   cookie.css — баннер согласия на использование файлов cookie.
   Фиксируется внизу экрана, показывается до нажатия «Принять».
   Разметка вставляется скриптом app.js, состояние — в localStorage.
   Только токены из tokens.css. БЭМ. Кнопка «Принять» = базовый .button.
   ============================================================ */

.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-l);
  padding: var(--space-m) var(--space-l);
  background: var(--color-paper);
  border-top: var(--line);
  box-shadow: 0 calc(-1 * var(--space-xs)) var(--space-l)
              color-mix(in srgb, var(--color-ink) 12%, transparent);
}

.cookie__text {
  margin: 0;
  max-width: 110ch;
  font-size: var(--fz-s);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.cookie__link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie__link:hover {
  color: var(--color-accent-dark);
}

.cookie__accept {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .cookie {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-m);
  }
  .cookie__accept {
    width: 100%;
  }
}