/* =============================================================================
   MERIDIAN — визуальный фундамент премиум-сайта IT-бизнес-консалтинга
   Дом: Platinum Noir · графит + патинированная латунь (antique brass) · вер디гри-специя
   Шрифты: Unbounded (display) · Onest (body) · JetBrains Mono (kicker/цифры) — все Cyrillic
   -----------------------------------------------------------------------------
   СИГНАТУРА (авторский почерк, повторяется ≥5×):
     1) Мономер-нумералы секций  (01) (02) …  — крупные, tabular, свисают в левое поле.
        Классы: .section__index, .svc__num, .feature__num, .step__num, .case__metric.
     2) Фирменный «tick» — вертикальный брусок латуни с колпачком-верди­гри.
        Классы/утилиты: .brand__tick, .accent-tick, .hero__kicker::before, .nav__link--active.
   ПИГМЕНТ (HUMANIZATION §5 — авторский, не платиновый centroid):
     hue акцента сдвинут в олив-бронзу, chroma опущена → патинированная латунь;
     <3% «специи» — верди­гри (зелёная патина состаренной латуни) в tick-колпачках и связках.
   EVENTS (HUMANIZATION §3, защитимые, по одному):
     · density event  — секция «Кейсы»: плотный линованный реестр + сноска мелким.
     · contrast event — .section--invert: одна near-black полоса под CTA.
     · grid-break      — нумералы свисают в поле (оптический центр), герой 1.6fr .4fr 1fr,
                         висячая пунктуация «ёлочек» в отзыве.
   ============================================================================= */

@layer base, tokens, components, sections, utilities;

/* ============================================================================
   TOKENS — контракт токенов, обе темы через html[data-theme]
   ============================================================================ */
@layer tokens {
  :root {
    /* — Шрифтовые семейства — */
    --font-display: "Unbounded", "Onest", system-ui, sans-serif;
    --font-body:    "Onest", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

    /* — Модульная шкала (≈1.25, флюид clamp; НЕ фикс px) — */
    --step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.84rem);   /* caption / mono-лейбл */
    --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.075rem);      /* body */
    --step-1:  clamp(1.2rem, 1.13rem + 0.34vw, 1.4rem);
    --step-2:  clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
    --step-3:  clamp(1.8rem, 1.55rem + 1.15vw, 2.6rem);
    --step-4:  clamp(2.3rem, 1.9rem + 1.9vw, 3.6rem);
    --step-5:  clamp(2.9rem, 2.2rem + 3.3vw, 5.2rem);        /* hero-display */

    /* — Спейсинг: 8pt-рамка (4pt-саб) — */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
    --sp-9: 96px; --sp-10: 128px;

    /* — Радиусы: система с контрастом (не rounded-full везде) — */
    --r-xs: 3px; --r-sm: 6px; --r-md: 9px; --r-lg: 14px;

    /* — Раскладка — */
    --container: 1240px;
    --gutter: clamp(24px, 5vw, 88px);

    /* — Моушен: сильные кривые, UI <300ms — */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 130ms; --dur-2: 200ms; --dur-3: 280ms;

    color-scheme: light;
  }

  /* ---- СВЕТЛАЯ ТЕМА — бумага, не #fff; чернила, не #000; тёплый серый (LIGHT_DOCTRINE) ---- */
  html[data-theme="light"], :root {
    /* Белая страница по требованию владельца. Исходная палитра была
       «тёплая бумага» #F2F0EA — читалась как затемнённая.
       Карточки на белом фоне не могут быть «ещё светлее», поэтому
       разделение поверхностей здесь держат границы-волоски и мягкая
       подложка, а не заливка светлее фона. */
    --bg:        #FFFFFF;   /* чистый белый лист */
    --paper:     #FFFFFF;   /* карточка = тот же белый, отделяется границей */
    --paper-2:   #F5F4F1;   /* утопленный тон: полосы и подложки секций */
    --ink:       #211E1A;   /* тёплые чернила, НЕ чёрный */
    --ink-soft:  #423C34;
    --muted:     #6F675C;   /* тёплый серый, НЕ slate */
    --hair:      rgba(33, 30, 26, 0.16);  /* волос-граница (усилена под белый фон) */
    --hair-strong: rgba(33, 30, 26, 0.26);

    --accent:      #7C6330;   /* патинированная латунь — заливка/tick */
    --accent-soft: #9A8352;   /* мягкая латунь для штрихов на фоне */
    --accent-text: #6E5828;   /* тёмная латунь для текста-акцента (AA на бумаге) */
    --accent-wash: rgba(124, 99, 48, 0.09);  /* широкая бледная подложка-тинт */
    --on-accent:   #FAF8F2;   /* тёплый почти-белый на латуни */
    --spice:       #3F524D;   /* <3% «специя» — верди­гри (патина латуни) */

    /* Тёплые слоистые тени цветом чернил, НЕ rgba(0,0,0) */
    --sh-1: 0 1px 2px rgba(60, 50, 38, 0.06), 0 2px 5px rgba(60, 50, 38, 0.05);
    --sh-2: 0 1px 2px rgba(60, 50, 38, 0.06), 0 6px 16px rgba(60, 50, 38, 0.08);
    --sh-3: 0 2px 4px rgba(60, 50, 38, 0.06), 0 14px 34px -8px rgba(60, 50, 38, 0.12);
    --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    --grain-blend: multiply;
    --grain-opacity: 0.015;
  }

  /* ---- ТЁМНАЯ ТЕМА — графит + платина (глубина = свет) ---- */
  html[data-theme="dark"] {
    --bg:        #0A0A0C;   /* графит, НЕ #000 */
    --paper:     #141418;   /* подъём лёгкостью, не прозрачностью */
    --paper-2:   #1C1C21;
    --ink:       #ECEDF0;
    --ink-soft:  #C4C5CC;
    --muted:     #9A9AA2;
    --hair:      rgba(255, 255, 255, 0.11);
    --hair-strong: rgba(255, 255, 255, 0.2);

    --accent:      #CBA765;   /* антик-золото на графите */
    --accent-soft: #A98F5C;
    --accent-text: #D4B378;
    --accent-wash: rgba(203, 167, 101, 0.1);
    --on-accent:   #14110A;
    --spice:       #5C7C71;   /* верди­гри, светлее для тёмного фона */

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.35);
    --sh-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.4);
    --sh-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 20px 48px -10px rgba(0, 0, 0, 0.6);
    --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --grain-blend: soft-light;
    --grain-opacity: 0.05;

    color-scheme: dark;
  }
}

/* ============================================================================
   BASE — reset, RU-микротипографика, доступность
   ============================================================================ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Оптическая якорь-точка прокрутки под sticky-хедер */
    scroll-padding-top: 96px;
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    font-feature-settings: "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
  }

  /* — RU-микротипографика (HUMANIZATION §4.4) — */
  html[lang="ru"] { hanging-punctuation: first allow-end last; }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;   /* негативный трекинг дисплея */
  }

  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
  input, textarea, select { font: inherit; color: inherit; }

  /* Цифры — всегда табличные (выравнивание в столбцы) */
  .stat__num, .case__metric, .section__index, .svc__num,
  .feature__num, .step__num, .stat__label, [data-nums] {
    font-variant-numeric: tabular-nums;
  }

  /* — Кастомный focus-visible, НЕ дефолтный ring — */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--accent); color: var(--on-accent); }
}

/* ============================================================================
   COMPONENTS — примитивы рестайлены (никакого shadcn-силуэта)
   ============================================================================ */
@layer components {

  /* ---------- Раскладка ---------- */
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Секция: вертикальный ритм ВАРЬИРУЕТСЯ (не метрономно) через модификаторы плотности */
  .section { padding-block: clamp(56px, 8vw, 112px); position: relative; }
  .section--tight { padding-block: clamp(40px, 5vw, 72px); }
  .section--airy  { padding-block: clamp(80px, 12vw, 176px); }

  /* CONTRAST EVENT — одна near-black инвертированная полоса */
  .section--invert {
    background: #0A0A0C;
    color: #ECEDF0;
    --ink: #ECEDF0;
    --muted: #9A9AA2;
    --hair: rgba(255, 255, 255, 0.12);
    --paper: #141418;
    --accent-text: #D4B378;
  }
  .section--invert::before {
    /* верхний волос-раздел */
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
    background: var(--hair);
  }

  /* Заголовок секции + свисающий нумерал (сигнатура + grid-break) */
  .section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    max-width: 62ch;
    margin-bottom: clamp(32px, 5vw, 64px);
  }
  .section__index {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  /* accent-tick при нумерале */
  .section__index::after {
    content: ""; width: 28px; height: 2px;
    background: var(--accent);
    box-shadow: 3px 0 0 var(--spice);   /* колпачок-верди­гри */
  }
  .section__title {
    font-size: var(--step-3);
    letter-spacing: -0.025em;
  }
  .section__lede {
    color: var(--muted);
    font-size: var(--step-1);
    line-height: 1.5;
    max-width: 54ch;
  }

  /* ---------- Хедер ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-5);
    padding: 14px var(--gutter);
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--hair);
  }
  .brand {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--font-display);
    font-weight: 700; font-size: 19px; letter-spacing: -0.03em;
  }
  /* СИГНАТУРА — фирменный tick: брусок латуни + колпачок-верди­гри */
  .brand__tick {
    width: 4px; height: 22px; border-radius: 1px;
    background: linear-gradient(var(--accent-soft), var(--accent));
    box-shadow: 0 -3px 0 var(--spice);   /* верди­гри-колпачок сверху */
    flex: none;
  }
  .nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
  .nav__link {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.08em;
    color: var(--muted);
    padding: 8px 2px;
    min-height: 44px; display: inline-flex; align-items: center;
    position: relative;
    transition: color var(--dur-2) var(--ease-out);
  }
  .nav__link:hover { color: var(--ink); }
  .nav__link--active { color: var(--ink); }
  .nav__link--active::before {
    /* tick под активным пунктом */
    content: ""; position: absolute; left: 0; bottom: 4px;
    width: 100%; height: 2px; background: var(--accent);
    box-shadow: 0 0 0 0.5px var(--spice);
  }
  .header__actions { display: flex; align-items: center; gap: var(--sp-3); }

  .theme-toggle, .menu-toggle {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    color: var(--ink);
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  }
  .theme-toggle:hover, .menu-toggle:hover { border-color: var(--hair-strong); background: var(--accent-wash); }
  .menu-toggle { display: none; }

  /* ---------- Кнопки (примитив рестайлен: ритм паддинга, не rounded-2xl) ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px;
    padding: 13px 22px 13px 24px;
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    letter-spacing: -0.005em;
    color: var(--on-accent);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    transition: transform var(--dur-1) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                background var(--dur-2) var(--ease-out);
  }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
  .btn:active { transform: translateY(0); }
  .btn--ghost {
    color: var(--ink);
    background: transparent;
    border-color: var(--hair-strong);
    box-shadow: none;
  }
  .btn--ghost:hover { background: var(--accent-wash); border-color: var(--accent-soft); box-shadow: none; }
  .btn__arrow {
    display: inline-block;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .btn:hover .btn__arrow { transform: translateX(4px); }

  /* ---------- Поля формы ---------- */
  .field { display: grid; gap: 8px; }
  .field__label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.06em;   /* капс только на коротких mono-лейблах */
    text-transform: uppercase;
    color: var(--muted);
  }
  .field__input, .field__textarea {
    width: 100%;
    padding: 13px 15px;
    min-height: 48px;
    background: var(--paper);
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    color: var(--ink);
    box-shadow: var(--sheen);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .field__textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
  .field__input::placeholder, .field__textarea::placeholder { color: var(--muted); opacity: 0.7; }
  .field__input:focus, .field__textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--sheen), 0 0 0 3px var(--accent-wash);
  }
}

/* ============================================================================
   SECTIONS — типизированные блоки контракта
   ============================================================================ */
@layer sections {

  /* ---------- HERO (без announcement-pill; асимметрия 1.6fr .4fr 1fr) ---------- */
  .hero {
    display: grid;
    grid-template-columns: 1.6fr 0.4fr 1fr;
    gap: var(--sp-6);
    align-items: end;
    padding-block: clamp(56px, 9vw, 128px);
    position: relative;
  }
  .hero__kicker {
    grid-column: 1 / -1;
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--step--1); letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent-text);
    margin-bottom: var(--sp-5);
    font-weight: 600;
  }
  .hero__kicker::before {
    /* accent-tick перед кикером */
    content: ""; width: 36px; height: 2px; background: var(--accent);
    box-shadow: 3px 0 0 var(--spice);
  }
  .hero__title {
    grid-column: 1 / 3;
    font-size: var(--step-5);
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  .hero__accent {
    font-style: normal;
    color: var(--accent-text);
    position: relative;
    white-space: nowrap;
  }
  /* tick-подчёркивание акцентного слова в h1 */
  .hero__accent::after {
    content: ""; position: absolute; left: 0; bottom: 0.08em;
    width: 100%; height: 3px; background: var(--accent);
    box-shadow: 0 3px 0 var(--spice);
    opacity: 0.55;
  }
  .hero__lede {
    grid-column: 3 / 4;
    align-self: end;
    color: var(--muted);
    font-size: var(--step-1);
    line-height: 1.5;
    max-width: 40ch;
  }
  .hero__actions {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    margin-top: var(--sp-7);
  }

  /* ---------- STATS (крупные tabular-цифры) ---------- */
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-6);
    border-top: 1px solid var(--hair);
    padding-top: var(--sp-6);
  }
  .stat { display: grid; gap: 6px; }
  .stat__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-4);
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .stat__num sub, .stat__num small {
    font-size: 0.42em; color: var(--accent-text); vertical-align: baseline;
    font-family: var(--font-mono); font-weight: 600;
  }
  .stat__label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.04em;
    color: var(--muted);
    line-height: 1.4;
  }

  /* ---------- УСЛУГИ (value-framed, нумералы вместо иконок; левый брасс-рельс) ---------- */
  .services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0;
    border-top: 1px solid var(--hair);
  }
  .svc {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-5) var(--sp-6) var(--sp-5);
    border-bottom: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
    position: relative;
    transition: background var(--dur-2) var(--ease-out);
  }
  .svc:hover { background: var(--accent-wash); }
  /* левый tick-рельс появляется на hover */
  .svc::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent); transform: scaleY(0); transform-origin: top;
    box-shadow: 2px 0 0 var(--spice);
    transition: transform var(--dur-3) var(--ease-out);
  }
  .svc:hover::before { transform: scaleY(1); }
  .svc__num {
    font-family: var(--font-mono);
    font-size: var(--step-1); font-weight: 600;
    color: var(--accent-text);
    line-height: 1;
  }
  .svc__title { font-size: var(--step-1); letter-spacing: -0.015em; margin-bottom: 6px; }
  .svc__desc { color: var(--muted); font-size: var(--step-0); line-height: 1.55; max-width: 44ch; }
  .svc__link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: var(--sp-4);
    font-family: var(--font-mono); font-size: var(--step--1);
    letter-spacing: 0.04em; color: var(--accent-text);
    min-height: 32px;
  }
  .svc__link::after { content: "→"; transition: transform var(--dur-2) var(--ease-out); }
  .svc__link:hover::after { transform: translateX(4px); }

  /* ---------- КЕЙСЫ — DENSITY EVENT: плотный линованный реестр ---------- */
  .cases { display: grid; gap: var(--sp-6); }
  .case {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 0.72fr);
    gap: var(--sp-7);
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--hair-strong);
    align-items: start;
  }
  .case__meta {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
    display: flex; gap: 14px; flex-wrap: wrap;
  }
  .case__metric {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-4);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--accent-text);
    margin-bottom: var(--sp-3);
  }
  .case__metric small {
    display: block; font-family: var(--font-mono); font-weight: 500;
    font-size: 0.24em; letter-spacing: 0.08em; color: var(--muted);
    margin-top: 10px; text-transform: uppercase;
  }
  /* линованные строки С→З→Р→Р */
  .case__rows { display: grid; gap: 0; }
  .case__row {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: var(--sp-4);
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
    align-items: baseline;
  }
  .case__row-label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.04em;
    color: var(--accent-text);
    text-transform: uppercase;
  }
  .case__row-value { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.5; }

  /* ---------- КОМАНДА / ЭКСПЕРТЫ (моно-инициалы, без AI-глянца) ---------- */
  .team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }
  .member { display: grid; gap: var(--sp-3); }
  .member__photo {
    aspect-ratio: 4 / 5;
    display: grid; place-content: center;
    background: var(--paper-2);
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    box-shadow: var(--sheen);
    font-family: var(--font-mono);
    font-size: var(--step-3);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    position: relative;
    overflow: hidden;
  }
  /* тонкий tick в углу плейсхолдера */
  .member__photo::after {
    content: ""; position: absolute; left: 14px; bottom: 14px;
    width: 3px; height: 20px; background: var(--accent);
    box-shadow: 0 -3px 0 var(--spice);
  }
  .member__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.02em; }
  .member__role {
    font-family: var(--font-mono); font-size: var(--step--1);
    letter-spacing: 0.04em; color: var(--accent-text);
  }
  .member__note { color: var(--muted); font-size: var(--step-0); line-height: 1.5; }

  /* ---------- ОТЗЫВ (ОДИН сильный; висячая пунктуация «ёлочек» = grid-break) ---------- */
  /* ---------- ОТЗЫВ (редакционный: подпись сбоку) ----------
     Раньше цитата шла колонкой 26ch крупным кеглем — это работает только
     для короткой ударной фразы. Реальный отзыв в 300+ знаков растягивал
     секцию на целый экран. Здесь текст держит комфортные ~52ch умеренным
     кеглем, а атрибуция вынесена в левую колонку: высота падает втрое,
     и блок остаётся устойчивым к любой длине, которую впишет заказчик. */
  .quote {
    display: grid;
    /* Вторая колонка забирает остаток: у Unbounded очень широкие знаки,
       и фиксированные 52ch давали всего ~23 знака в строке (12 строк). */
    grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
    max-width: 1000px;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    max-width: none;
    margin-inline: 0;
    text-align: left;
    position: relative;
  }
  .quote__text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-1);
    line-height: 1.45;
    letter-spacing: -0.008em;
    text-wrap: pretty;
    /* висячая «ёлочка» уезжает в левое поле — оптический край */
    text-indent: -0.52em;
    margin: 0;
  }
  .quote__text .q-mark { color: var(--accent-text); }

  /* Левая колонка: метка секции + автор. Порядок в разметке обратный
     (цитата раньше подписи) — так скринридер читает сначала суть. */
  .quote__cite {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding-top: 6px;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .quote__cite::before {
    content: ""; width: 24px; height: 2px; background: var(--accent);
    box-shadow: 3px 0 0 var(--spice); flex: none;
    margin-bottom: 10px;
  }
  .quote__label {
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
  }
  .quote__author {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
  }
  .quote__role { display: block; }

  /* Узкий экран: подпись уходит под цитату, сетка схлопывается в колонку. */
  @media (max-width: 760px) {
    .quote {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-5);
    }
    .quote__cite { grid-column: 1; grid-row: 2; }
  }

  /* ---------- ПРОЦЕСС / МЕТОДОЛОГИЯ (нумералы-ступени) ---------- */
  .process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-6);
    counter-reset: step;
  }
  .step {
    display: grid; gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 2px solid var(--hair-strong);
    position: relative;
  }
  /* связка-верди­гри между ступенями */
  .step::before {
    content: ""; position: absolute; top: -2px; left: 0;
    width: 40px; height: 2px; background: var(--accent);
  }
  .step__num {
    font-family: var(--font-mono);
    font-size: var(--step-2); font-weight: 600;
    color: var(--accent-text); line-height: 1;
  }
  .step__title { font-size: var(--step-1); letter-spacing: -0.015em; }
  .step__desc { color: var(--muted); font-size: var(--step-0); line-height: 1.55; }

  /* ---------- FAQ (аккордеон <details>/<summary>) — часть density event ---------- */
  .faq { display: grid; border-top: 1px solid var(--hair-strong); }
  .faq__item { border-bottom: 1px solid var(--hair); }
  .faq__q {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
    font-family: var(--font-display);
    font-weight: 600; font-size: var(--step-1);
    letter-spacing: -0.015em;
    list-style: none; cursor: pointer;
    min-height: 44px;
    transition: color var(--dur-2) var(--ease-out);
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q::after {
    content: "+"; font-family: var(--font-mono); font-weight: 400;
    font-size: var(--step-2); color: var(--accent-text);
    transition: transform var(--dur-2) var(--ease-out);
    flex: none;
  }
  .faq__item[open] .faq__q::after { transform: rotate(45deg); }
  .faq__q:hover { color: var(--accent-text); }
  .faq__a {
    padding: 0 0 var(--sp-5);
    color: var(--muted);
    font-size: var(--step-0);
    line-height: 1.6;
    max-width: 62ch;
  }

  /* ---------- ФИЧИ (IT-раздел; нумералы) ---------- */
  .features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-6);
  }
  .feature {
    display: grid; gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--paper);
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    box-shadow: var(--sheen);
    /* только hairline-top акцент вместо полной обводки-карточки */
    border-top: 2px solid var(--accent);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .feature:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
  .feature__num {
    font-family: var(--font-mono); font-weight: 600;
    font-size: var(--step-1); color: var(--accent-text); line-height: 1;
  }
  .feature__title { font-size: var(--step-1); letter-spacing: -0.015em; }
  .feature__desc { color: var(--muted); font-size: var(--step-0); line-height: 1.55; }

  /* ---------- КОНТАКТЫ ---------- */
  .contact {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--sp-8);
    align-items: start;
  }
  .contact__details { display: grid; gap: var(--sp-5); align-content: start; }
  .contact__details dl { display: grid; gap: 4px; }
  .contact__details dt {
    font-family: var(--font-mono); font-size: var(--step--1);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  }
  .contact__details dd { font-size: var(--step-1); letter-spacing: -0.01em; }
  .contact__form { display: grid; gap: var(--sp-4); }
  .contact__form .btn { justify-self: start; margin-top: var(--sp-2); }

  /* ---------- CTA-полоса (внутри .section--invert) ---------- */
  .cta-band {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: var(--sp-7);
    align-items: center;
  }
  .cta-band__title {
    font-size: var(--step-4);
    letter-spacing: -0.03em;
    line-height: 1.02;
  }
  .cta-band__text { color: var(--muted); font-size: var(--step-1); line-height: 1.5; max-width: 40ch; }
  .cta-band .btn { justify-self: end; }

  /* ---------- Логотипы / маркиза (НЕ серая стена) ---------- */
  .logos { overflow: hidden; border-block: 1px solid var(--hair); padding-block: var(--sp-5); }
  .logos__track {
    display: flex; align-items: center; gap: clamp(32px, 6vw, 88px);
    animation: marquee 34s linear infinite;
    width: max-content;
  }
  .logo {
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--step-1); letter-spacing: -0.02em;
    color: var(--muted); white-space: nowrap;
    opacity: 0.72; transition: opacity var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .logo::before {
    content: ""; width: 3px; height: 16px; background: var(--accent-soft); flex: none;
  }
  .logo:hover { opacity: 1; color: var(--ink); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- Футер (editorial: плотный sitemap + колофон + sign-off) ---------- */
  .site-footer {
    border-top: 1px solid var(--hair-strong);
    padding-block: var(--sp-8) var(--sp-6);
  }
  .footer__cols {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--sp-6);
    margin-bottom: var(--sp-8);
  }
  .footer__col { display: grid; gap: 10px; align-content: start; }
  .footer__col h4 {
    font-family: var(--font-mono);
    font-size: var(--step--1); letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
    font-weight: 600; margin-bottom: 6px;
  }
  .footer__col a {
    color: var(--ink-soft); font-size: var(--step-0);
    min-height: 32px; display: inline-flex; align-items: center;
    transition: color var(--dur-2) var(--ease-out);
  }
  .footer__col a:hover { color: var(--accent-text); }
  .footer__signoff {
    font-family: var(--font-display);
    font-weight: 600; font-size: var(--step-2);
    letter-spacing: -0.02em;
    max-width: 24ch;
    margin-bottom: var(--sp-4);
  }
  .footer__colophon {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--hair);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    color: var(--muted);
  }
}

/* ============================================================================
   UTILITIES — reveal, grain, mono, accent-tick
   ============================================================================ */
@layer utilities {

  /* Reveal-on-scroll — .in вешает site.js через IntersectionObserver */
  .rv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
    will-change: transform, opacity;
  }
  .rv.in { opacity: 1; transform: none; }

  /* Мономер-лейбл */
  .mono {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
  }

  /* Утилита-tick для акцентов (сигнатура, переиспользуемая в разметке) */
  .accent-tick {
    display: inline-block; width: 4px; height: 1em;
    vertical-align: -0.12em;
    background: var(--accent);
    box-shadow: 3px 0 0 var(--spice);
    border-radius: 1px;
  }

  /* GRAIN — тонкое волокно, ДЕЛАЕТ РАБОТУ (дизерит плоские заливки hero/invert),
     не глобальная декорация. Ставится точечно как <span class="grain">. */
  .grain {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    opacity: var(--grain-opacity);
    mix-blend-mode: var(--grain-blend);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }
  .grain + * { position: relative; z-index: 1; }
}

/* ============================================================================
   REDUCED MOTION — глушим всё (обязательно)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .logos__track { animation: none; }
}

/* ============================================================================
   RESPONSIVE — коллапс раскладок; +30–35% к длине RU учтено (measure, wrap)
   ============================================================================ */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero__title { grid-column: 1; }
  .hero__lede { grid-column: 1; align-self: start; }
  .case { grid-template-columns: 1fr; gap: var(--sp-5); }
  .contact { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cta-band { grid-template-columns: 1fr; gap: var(--sp-5); }
  .cta-band .btn { justify-self: start; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .footer__cols { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: 1fr; }
}

/* ============================================================
   ПЕРЕНОС ДЛИННЫХ СЛОВ (RU)
   Русский даёт слова, которые шире колонки карточки:
   «импортозамещение», «отказоустойчивость», «производительность».
   Без переноса они вылезают за границы и накладываются на соседний
   блок сетки. Правило общее, чтобы это не повторилось в новых секциях.
   ============================================================ */
h1, h2, h3, h4, p, li, dd, dt, span, a, summary {
  overflow-wrap: break-word;
}

/* Цитата набрана крупно и узкой колонкой: break-word здесь рвёт слова
   посреди («Меридиа/н»). Ей достаточно обычного переноса по пробелам. */
blockquote, .quote__text { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Заголовки в узких колонках переносим по слогам (работает благодаря lang="ru"). */
.svc__title, .step__title, .feature__title, .member__name, .faq__q,
.case__row-value, .stat__label, .cta-band__title {
  hyphens: auto;
}

/* Содержимое ячеек сетки не должно расширять саму ячейку.
   min-width:0 нужен и самим карточкам, И их внутренним колонкам: у grid-
   потомка по умолчанию min-width:auto, то есть колонка не может стать уже
   своего содержимого. Из-за этого длинное слово («Импортозамещение»)
   выдавливало текст за границу карточки — прямо на разделительную линию,
   которая подсвечивается при наведении. */
.svc, .step, .feature, .member, .case, .stat, .faq__item,
.svc > *, .step > *, .feature > *, .member > *, .case > *, .stat > * {
  min-width: 0;
}

/* Заголовки в узких колонках: anywhere, а не break-word.
   break-word НЕ учитывается при расчёте min-content, поэтому колонка
   остаётся широкой и текст всё равно вылезает; anywhere учитывается.
   Перенос по слогам (hyphens) браузер попробует первым — разрыв посреди
   слова остаётся крайней мерой. */
.svc__title, .step__title, .feature__title, .member__name, .faq__q {
  overflow-wrap: anywhere;
}