/* ==========================================================================
   ШРИФТЫ — самостоятельный хостинг, без единого внешнего запроса.
   Space Grotesk (из оригинального дизайна) не содержит кириллицы, поэтому
   везде, где дизайн просил Space Grotesk, реально используется Manrope
   (тот же геометричный характер, полная поддержка кириллицы). JetBrains
   Mono оставлен как есть — кириллица в нём есть.
   ========================================================================== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ
   ========================================================================== */
:root {
  /* ============ ФОНЫ ============ */
  --bg:                    #0A0E14; /* базовый фон страницы: html, body, секции top/about/contact */
  --bg-alt:                #0B0F1A; /* полоса секций services + stack (немного другой тон) */
  --bg-header:             rgba(10,14,20,0.82); /* липкая шапка, требует backdrop-filter: blur(14px) */
  --bg-panel-grad-top:     #10141D; /* градиент панели hero-иллюстрации, старт (180deg) */
  --bg-panel-grad-bottom:  #0B0F17; /* градиент панели hero-иллюстрации, конец; тот же hex — фон полей ввода и заливка узлов canvas */
  --bg-card:               #12161F; /* карточки услуг, карточки кейсов, панель формы контактов */
  --bg-input:              #0B0F17; /* фон текстового поля / textarea */

  /* ============ ГРАНИЦЫ ============ */
  --border:                #1B212E; /* нижняя граница шапки, разделители секций, верхняя линия строки стека, граница панели hero */
  --border-soft:           #232A38; /* границы пилюль/кнопок/тегов, цвет пунктирного разделителя, внешняя граница панели контактов */
  --border-card:           #1F2634; /* граница карточек услуг/кейсов, внутренний разделитель шапки формы */
  --border-hover:          #3A445C; /* hover-граница outline-кнопки и ghost-кнопки */

  /* ============ ТЕКСТ ============ */
  --text-primary:          #EDF1F7; /* заголовки, hover-текст, значение в input, базовый цвет body */
  --text-secondary:        #A8B2C4; /* основной текст, подзаголовок hero, значения полей кейса, моно-списки */
  --text-tertiary:         #8B95A8; /* ссылки навигации в покое, описания карточек, значения строк контактов */
  --text-muted:            #6C778C; /* подписи "хрома" окна, мета-текст, метки групп стека, примечания метрик */
  --text-faint:            #55607A; /* плейсхолдеры, тусклые подписи, ключи строк контактов, подсказка формы */
  --text-tag:              #C4CDDB; /* текст чипов технологий стека, состояние покоя */

  /* ============ АКЦЕНТ — циан ============ */
  --accent:                #2FE6FF;
  --accent-rgb:            47,230,255;
  --accent-hover:          #9CF3FF; /* глобальный цвет текста a:hover */
  --accent-bright:         #6EEEFF; /* цвет кольца свечения в hover-тени основной кнопки */
  --accent-on:             #0A0E14; /* цвет текста на циановой заливке */

  /* ============ ВТОРИЧНЫЙ АКЦЕНТ — синий ============ */
  --blue:                  #4EA8FF; /* метка категории карточки кейса; hover-граница/тень карточки кейса */
  --blue-rgb:              78,168,255;

  /* ============ БАЗА НЕЙТРАЛЬНОГО ОВЕРЛЕЯ ============ */
  --muted-rgb:             139,149,168; /* точки dot-grid, направляющие линии hero/contact, обводки canvas */

  /* ============ ШРИФТЫ ============ */
  /* Дизайн указывает 'Space Grotesk' — в нём НЕТ кириллицы, поэтому русский текст
     им не набрать. Заменён на Manrope (тот же геометричный характер, полная
     кириллица). JetBrains Mono оставлен как есть (кириллица есть) для моно-роли.
     Оба шрифта самостоятельно захостены, без запроса к Google Fonts. */
  --font-sans:             'Manrope', system-ui, sans-serif;
  --font-mono:             'JetBrains Mono', monospace;

  /* ============ РАЗМЕРЫ ШРИФТА (вся шкала, каждое значение из дизайна) ============ */
  --fs-h1:                 62px;   /* hero H1 "Илья Гольдштейн" */
  --fs-h2-contact:         44px;   /* контакты H2 "Оставьте заявку" */
  --fs-h2:                 34px;   /* заголовки секций: About/Services/Cases/Stack */
  --fs-lead:               21px;   /* подзаголовок-абзац hero */
  --fs-h3:                 21px;   /* заголовок карточки услуги */
  --fs-h3-case:            19.5px; /* заголовок карточки кейса */
  --fs-title-sm:           22px;   /* заголовок успеха формы; цифра метрики кейса */
  --fs-body-lg:            18px;   /* абзацы about; вступительный абзац контактов */
  --fs-banner-title:       20px;   /* заголовок баннера кейсов "Похожая задача?" */
  --fs-body:               16.5px; /* описание карточки услуги; сообщение об успехе; подзаголовок баннера кейсов */
  --fs-input:              16px;   /* текст в input/textarea формы; значения "Задача"/"Сделал" в кейсе */
  --fs-note:               14.5px; /* примечание метрики кейса; подпись кнопки отправки */
  --fs-btn:                14px;   /* основная/вторичная кнопки CTA в hero */
  --fs-btn-sm:             13.5px; /* CTA в about; строки контактной информации; CTA-кнопка баннера кейсов */
  --fs-mono-sm:            13px;   /* ссылка "Обсудить задачу →"; список буллетов карточки услуги; чип стека */
  --fs-logo:               14px;   /* логотип шапки "ilya_goldstein" */
  --fs-xs:                 12.5px; /* ссылки навигации; ВСЕ эпиграфы секций; "Ответ в течение дня"; мета кейсов; ссылка футера карточки; кнопка сброса */
  --fs-badge:              12px;   /* текст пилюли статуса; skill-пилюли hero; метка группы стека; текст подсказки формы */
  --fs-label:              11.5px; /* подписи полей формы; строка категории/бейджа карточки кейса; заголовок шапки панели формы ("request.form") */
  --fs-micro:              11px;   /* текст "хрома" окна hero; подпись hero; подписи строк "Задача"/"Сделал" карточки кейса */

  /* ============ НАСЫЩЕННОСТЬ ШРИФТА ============ */
  --fw-regular:            400;
  --fw-medium:             500;    /* только цифра метрики кейса */
  --fw-semibold:           600;    /* все заголовки (h1/h2/h3), заголовок успеха, заголовок баннера */

  /* ============ ТРЕКИНГ ============ */
  --ls-tightest:           -0.028em; /* h1 */
  --ls-tighter:            -0.025em; /* h2 контактов */
  --ls-tight:              -0.02em;  /* h2 секции */
  --ls-snug:               -0.01em;  /* h3, заголовки карточек/кейсов, цифра метрики, заголовок баннера */
  --ls-normal:             0;
  --ls-wide-xs:            0.02em;   /* логотип */
  --ls-wide-sm:            0.05em;   /* подписи кнопок (uppercase) */
  --ls-wide:               0.06em;   /* ссылки навигации, общие uppercase-микро-метки, футер */
  --ls-wider:              0.08em;   /* текст "хрома" окна, подписи строк задача/сделал, подпись hero */
  --ls-widest:             0.1em;    /* пилюля статуса, подписи полей формы, категория/бейдж кейса, метка группы стека */
  --ls-widest-xl:          0.14em;   /* эпиграфы секций */

  /* ============ ВЫСОТА СТРОКИ ============ */
  --lh-h1:                 1.02;
  --lh-h2-contact:         1.08;
  --lh-h2:                 1.12;
  --lh-case-title:         1.25;
  --lh-metric-note:        1.35;
  --lh-body:               1.5;    /* подзаголовок hero, значение поля кейса, textarea, подсказка формы */
  --lh-success-msg:        1.55;
  --lh-card-body:          1.6;    /* описание карточки услуги, подзаголовок баннера кейсов */
  --lh-about-body:         1.65;

  /* ============ КОНТЕЙНЕР / ОТСТУПЫ ============ */
  --container-max:         1200px;
  --container-pad-x:       40px;
  --header-h:              68px;   /* также scroll-margin-top на каждом <section id> */
  --section-pad-y:         88px;   /* about / services / cases / stack */
  --hero-pad:              96px 40px 88px;
  --contact-pad:           88px 40px 96px;
  --gap-cards:             20px;   /* сетки карточек услуг / кейсов */
  --gap-hero:              56px;   /* 2-колоночная сетка hero */
  --gap-about:             56px;   /* 2-колоночная сетка about */
  --gap-contact:           64px;   /* 2-колоночная сетка контактов */
  --gap-stack-cols:        56px;   /* 2-колоночная сетка stack, только column-gap */
  --pad-card-service:      30px 28px 26px;
  --pad-card-case:         26px 24px;
  --pad-form-panel:        30px 32px 32px;
  --dot-grid-size:         32px;   /* плитка dot-grid фона hero + contact */

  /* ============ РАДИУСЫ ============ */
  --radius-xs:             3px;    /* чипы стека в карточке кейса */
  --radius-sm:             4px;    /* CTA-кнопка шапки, skill-пилюли hero, чипы стека */
  --radius-md:             5px;    /* большинство кнопок, поля формы */
  --radius-lg:             6px;    /* карточки услуг/кейсов, баннер CTA кейсов */
  --radius-xl:             8px;    /* панель hero-иллюстрации, панель формы контактов */
  --radius-pill:           999px;  /* пилюля доступности статуса */

  /* ============ ТЕНИ / СВЕЧЕНИЯ ============ */
  --shadow-btn-primary:         0 0 0 1px var(--accent), 0 8px 30px rgba(var(--accent-rgb), 0.18);
  --shadow-btn-primary-hover:   0 0 0 1px var(--accent-bright), 0 10px 40px rgba(var(--accent-rgb), 0.42);
  --shadow-btn-submit:          0 0 0 1px var(--accent), 0 10px 34px rgba(var(--accent-rgb), 0.22);
  --shadow-btn-submit-hover:    0 0 0 1px var(--accent-bright), 0 12px 44px rgba(var(--accent-rgb), 0.45);
  --shadow-header-cta-hover:    0 0 24px rgba(var(--accent-rgb), 0.45);
  --shadow-about-cta-hover:     0 0 26px rgba(var(--accent-rgb), 0.4);
  --shadow-banner-btn-hover:    0 0 28px rgba(var(--accent-rgb), 0.42);
  --shadow-discuss-hover:       0 0 24px rgba(var(--accent-rgb), 0.22);
  --shadow-card-hover-cyan:     0 0 0 1px rgba(var(--accent-rgb), 0.18), 0 16px 40px rgba(0,0,0,0.45);
  --shadow-card-hover-blue:     0 0 0 1px rgba(var(--blue-rgb), 0.18), 0 16px 40px rgba(0,0,0,0.45);
  --shadow-tag-hover:           0 0 16px rgba(var(--accent-rgb), 0.14);
  --shadow-form-panel:          0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 24px 60px rgba(0,0,0,0.5);
  --shadow-input-focus:         0 0 0 3px rgba(var(--accent-rgb), 0.12);

  /* ============ ПЕРЕХОДЫ ============ */
  --ease-standard:         .22s ease;  /* кнопки, карточки */
  --ease-fast:             .2s ease;   /* поля ввода, чипы стека, a:hover */

  /* ============ ПРОЧЕЕ ============ */
  --z-header:              50;
  --z-skip-link:           100;
  --blur-header:           14px;
  --selection-bg:          rgba(var(--accent-rgb), 0.28);
  --focus-ring:            0 0 0 3px rgba(var(--accent-rgb), 0.35);
}

/* ==========================================================================
   СБРОС / БАЗА
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Прототип оборачивал всё в <div style="overflow-x:hidden">, чтобы декоративные
     full-bleed элементы (hero__frame на 1200px и т.п.) не рождали горизонтальный
     скролл на промежуточных ширинах вьюпорта. Переносим это свойство на body,
     раз в сборке нет отдельной обёртки .page-wrap. */
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; background: none; border: none; color: inherit; }

a { color: var(--accent); text-decoration: none; transition: color var(--ease-fast); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--selection-bg); }
input, textarea, button { font: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* Прототип оборачивал всё в <div class="page-wrap" style="min-width:1200px">
   (фиксированная десктопная композиция без брейкпоинтов). В реальной сборке
   отдельной обёртки нет — соответствующие свойства (background, overflow-x)
   уже объявлены на body выше, поэтому класса .page-wrap в разметке нет и
   здесь для него намеренно нет правила. */

/* Единое кольцо фокуса для клавиатурной навигации — применяется точечно
   по всем интерактивным элементам ниже (раздел "ACCESSIBILITY"). */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: var(--z-skip-link);
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  transition: top var(--ease-standard);
}
.skip-link:focus {
  top: 12px;
}

/* Универсальная утилита JS-переключения панелей (форма контактов, бургер-меню) */
.is-hidden { display: none; }

/* ==========================================================================
   ШАПКА САЙТА
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg-header);
  backdrop-filter: blur(var(--blur-header));
  -webkit-backdrop-filter: blur(var(--blur-header));
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-x);
  height: var(--header-h); display: flex; align-items: center; gap: 40px;
}
.site-header__logo {
  font-family: var(--font-mono); font-size: var(--fs-logo); letter-spacing: var(--ls-wide-xs);
  color: var(--text-primary); display: flex; align-items: center; gap: 8px;
}
.site-header__logo-mark { color: var(--accent); }

.site-header__nav {
  display: flex; align-items: center; gap: 28px; margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.site-header__nav-link { color: var(--text-tertiary); }
.site-header__nav-link:hover { color: var(--text-primary); }

.site-header__cta {
  font-family: var(--font-mono); text-transform: uppercase;
  transition: box-shadow var(--ease-standard), transform var(--ease-standard);
  font-size: var(--fs-xs); padding: 10px 18px; border-radius: var(--radius-sm);
  color: var(--accent-on); background: var(--accent);
  border: 1px solid var(--accent); box-shadow: none;
}
.site-header__cta:hover { box-shadow: var(--shadow-header-cta-hover); transform: translateY(-1px); color: var(--accent-on); }

/* Бургер-меню — появляется только ниже 900px (см. раздел «АДАПТИВНОСТЬ»).
   Классы .site-header__burger / .site-header__burger-line не входят в
   исходный контракт разметки прототипа (там бургера не было в принципе —
   дизайн фиксирован на 1200px), но необходимы, чтобы выполнить требование
   работать вплоть до 360px. HTML-реализация должна добавить эту кнопку
   рядом с .site-header__nav и переключать класс .is-open на нём по клику. */
.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  margin-left: auto;
  border-radius: var(--radius-sm);
}
.site-header__burger-line {
  display: block; width: 20px; height: 2px; background: var(--text-primary);
  transition: transform var(--ease-standard), opacity var(--ease-standard);
}
.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Если бургер собран как одна SVG-иконка (три линии в path), а не как три
   span.site-header__burger-line — оформляем её тем же линейным стилем,
   что и остальные иконки дизайна (обводка, без заливки). */
.site-header__burger svg {
  width: 20px; height: 20px;
  stroke: var(--text-primary); fill: none; stroke-width: 1.6; stroke-linecap: round;
}

/* ==========================================================================
   КНОПКИ — весь каталог CTA-вариантов
   ========================================================================== */
.hero__btn,
.about__cta,
.services__cta-link,
.services__card-link,
.cases__cta-btn,
.contact__submit,
.contact__success-reset,
.site-header__cta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  transition: box-shadow var(--ease-standard), transform var(--ease-standard);
}

/* .hero__btn--primary — циан заливка, основной повторяющийся CTA */
.hero__btn--primary {
  font-size: var(--fs-btn); letter-spacing: var(--ls-wide-sm);
  color: var(--accent-on); background: var(--accent);
  padding: 16px 28px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-btn-primary);
  display: inline-block;
}
.hero__btn--primary:hover { box-shadow: var(--shadow-btn-primary-hover); transform: translateY(-2px); color: var(--accent-on); }

/* .hero__btn--secondary — контурный вторичный CTA hero ("Смотреть кейсы →") */
.hero__btn--secondary {
  font-size: var(--fs-btn); letter-spacing: var(--ls-wide-sm); color: var(--text-secondary);
  padding: 16px 24px; border-radius: var(--radius-md); border: 1px solid var(--border-soft);
  transition: border-color var(--ease-standard), color var(--ease-standard);
  display: inline-block;
}
.hero__btn--secondary:hover { border-color: var(--border-hover); color: var(--text-primary); }

/* about-секция / баннер кейсов — среднего размера, без постоянной тени-кольца */
.about__cta {
  font-size: var(--fs-btn-sm); padding: 13px 22px; border-radius: var(--radius-md); box-shadow: none;
  color: var(--accent-on); background: var(--accent);
  display: inline-block;
}
.about__cta:hover { box-shadow: var(--shadow-about-cta-hover); transform: translateY(-1px); }

.cases__cta-btn {
  font-size: var(--fs-btn-sm); padding: 15px 26px; border-radius: var(--radius-md); box-shadow: none;
  color: var(--accent-on); background: var(--accent);
  display: inline-block; white-space: nowrap;
}
.cases__cta-btn:hover { box-shadow: var(--shadow-banner-btn-hover); transform: translateY(-2px); }

/* .services__cta-link — контурная акцентная ссылка ("Обсудить задачу →") */
.services__cta-link {
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-wide-sm); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.35); padding: 12px 20px; border-radius: var(--radius-md);
  transition: box-shadow var(--ease-standard), background var(--ease-standard);
  text-transform: uppercase;
  display: inline-block;
}
.services__cta-link:hover { box-shadow: var(--shadow-discuss-hover); background: rgba(var(--accent-rgb), 0.08); }

/* .services__card-link — голая акцентная ссылка внутри карточки ("Оставить заявку →") */
.services__card-link {
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--accent);
  text-transform: uppercase;
}
.services__card-link:hover { color: var(--accent-hover); }

/* .contact__success-reset — сброс/вторичная кнопка на экране успеха формы */
.contact__success-reset {
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--text-tertiary);
  background: transparent; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 11px 20px; text-transform: uppercase;
}
.contact__success-reset:hover { color: var(--text-primary); border-color: var(--border-hover); }

/* .contact__submit — циан заливка, кнопка отправки формы на всю ширину */
.contact__submit {
  font-size: var(--fs-note); letter-spacing: var(--ls-wide-sm); color: var(--accent-on);
  background: var(--accent); border: none; border-radius: var(--radius-md);
  padding: 18px 24px; box-shadow: var(--shadow-btn-submit);
  text-transform: uppercase; width: 100%;
}
.contact__submit:hover { box-shadow: var(--shadow-btn-submit-hover); transform: translateY(-2px); }

/* ==========================================================================
   ПИЛЮЛЯ СТАТУСА (бейдж доступности в hero)
   ========================================================================== */
.hero__status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: var(--fs-badge); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--border-soft); background: transparent;
  border-radius: var(--radius-pill); padding: 7px 14px;
}

/* ==========================================================================
   HERO — секция #top
   ========================================================================== */
.hero {
  position: relative; scroll-margin-top: var(--header-h); border-bottom: 1px solid var(--border);
  background-image: radial-gradient(rgba(var(--muted-rgb), 0.16) 1px, transparent 1px);
  background-size: var(--dot-grid-size) var(--dot-grid-size); background-position: -1px -1px;
}
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 78% 8%,
    rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--blue-rgb), 0.05) 32%, rgba(10,14,20,0) 62%);
}
.hero__frame {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1200px; margin-left: -600px;
  pointer-events: none;
  border-left: 1px solid rgba(var(--muted-rgb), 0.10);
  border-right: 1px solid rgba(var(--muted-rgb), 0.10);
}
.hero__inner {
  position: relative; max-width: var(--container-max); margin: 0 auto; padding: var(--hero-pad);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--gap-hero); align-items: center;
}
/* Обёртка левой колонки — своих визуальных свойств не несёт, только
   ограничивает минимальную ширину, чтобы balance/pretty-текст не распирал грид. */
.hero__content { min-width: 0; }
.hero__title {
  margin: 28px 0 0;
  font-size: clamp(32px, 4.2vw + 12px, var(--fs-h1));
  line-height: var(--lh-h1); letter-spacing: var(--ls-tightest);
  font-weight: var(--fw-semibold); color: var(--text-primary);
  text-wrap: balance;
}
.hero__subtitle {
  margin: 22px 0 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-secondary);
  max-width: 560px; text-wrap: pretty;
}
.hero__tags {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono); font-size: var(--fs-badge); letter-spacing: var(--ls-wide);
  color: var(--text-tertiary); text-transform: uppercase;
}
.hero__tag { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 6px 11px; }
.hero__actions { margin-top: 40px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Пояснение под кнопкой демо-версии на странице кейса (hero__actions выше). */
.hero__demo-note { margin-top: 14px; font-size: var(--fs-note); line-height: var(--lh-metric-note); color: var(--text-muted); }

/* Панель-схема hero */
.hero__panel {
  position: relative; height: 420px; border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--bg-panel-grad-top) 0%, var(--bg-panel-grad-bottom) 100%);
  overflow: hidden;
}
.hero__panel-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-wider);
  color: var(--text-muted); text-transform: uppercase;
}
.hero__panel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-soft); }
/* Дизайн даёт этой подписи ещё +8px margin-left поверх gap:8px панели-бара —
   итоговый отступ от кластера точек до текста 16px, а не 8px. */
.hero__panel-label { margin-left: 8px; }
.hero__panel-status { margin-left: auto; color: var(--accent); }
.hero__canvas {
  position: absolute; top: 34px; left: 0; width: 100%; height: calc(100% - 34px); display: block;
}
.hero__panel-caption {
  position: absolute; left: 16px; bottom: 14px; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider); color: var(--text-faint); text-transform: uppercase;
}

/* ==========================================================================
   ЭПИГРАФ + ЗАГОЛОВОК СЕКЦИИ (переиспользуется в about/services/cases/stack)
   ========================================================================== */
.about__eyebrow, .services__eyebrow, .cases__eyebrow, .stack__eyebrow, .contact__eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-widest-xl);
  text-transform: uppercase; color: var(--accent);
}
.about__title, .services__title, .cases__title, .stack__title {
  margin: 18px 0 0;
  font-size: clamp(24px, 2.4vw + 14px, var(--fs-h2));
  line-height: var(--lh-h2); letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold); color: var(--text-primary);
}

/* ==========================================================================
   ABOUT — секция #about
   ========================================================================== */
.about { scroll-margin-top: var(--header-h); border-bottom: 1px solid var(--border); }
.about__inner {
  max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x);
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--gap-about);
}
/* Обёртки колонок — без собственного оформления, только ограничение ширины грид-ячейки. */
.about__lead, .about__body { min-width: 0; }
.about__paragraph {
  margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-about-body); color: var(--text-secondary);
  max-width: 640px; text-wrap: pretty;
}
.about__paragraph + .about__paragraph { margin-top: 18px; }
.about__footer {
  margin-top: 30px; display: flex; align-items: center; gap: 26px; padding-top: 26px;
  border-top: 1px dashed var(--border-soft); flex-wrap: wrap;
}
.about__note {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  color: var(--text-muted); text-transform: uppercase;
}

/* ==========================================================================
   SERVICES — секция #services
   ========================================================================== */
.services { scroll-margin-top: var(--header-h); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.services__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x); }
.services__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
/* Обёртка эпиграфа+заголовка внутри флекс-строки шапки секции — без своих стилей. */
.services__heading { min-width: 0; }
.services__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-cards); }

.services__card {
  border: 1px solid var(--border-card); border-radius: var(--radius-lg); background: var(--bg-card);
  padding: var(--pad-card-service); display: flex; flex-direction: column;
  transition: border-color var(--ease-standard), box-shadow var(--ease-standard), transform var(--ease-standard);
}
.services__card:hover { border-color: rgba(var(--accent-rgb), 0.5); box-shadow: var(--shadow-card-hover-cyan); transform: translateY(-3px); }
.services__card-icon { width: 30px; height: 30px; stroke: var(--accent); stroke-width: 1.35; fill: none; }
.services__card-title { margin: 22px 0 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); color: var(--text-primary); }
.services__card-desc { margin: 12px 0 0; font-size: var(--fs-body); line-height: var(--lh-card-body); color: var(--text-tertiary); }
.services__card-list {
  margin-top: 20px; display: flex; flex-direction: column; gap: 9px;
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-secondary);
}
.services__card-list-item { }
.services__card-link { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--border-soft); }

/* ==========================================================================
   CASES — секция #cases
   ========================================================================== */
.cases { scroll-margin-top: var(--header-h); border-bottom: 1px solid var(--border); }
.cases__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x); }
.cases__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
/* Обёртка эпиграфа+заголовка внутри флекс-строки шапки секции — без своих стилей. */
.cases__heading { min-width: 0; }
.cases__meta {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
/* auto-fit вместо фиксированных 3 колонок: в сетке навсегда ровно 2 карточки
   кейсов (плюс 1 в блоке "Другие кейсы" на страницах кейсов) — при
   repeat(3,1fr) пустая 3-я колонка ломала баланс сетки. auto-fit схлопывает
   недостающие колонки и растягивает реальные карточки на всю ширину
   независимо от их количества. */
.cases__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap-cards); }

.cases__card {
  border: 1px solid var(--border-card); border-radius: var(--radius-lg); background: var(--bg-card);
  padding: var(--pad-card-case); display: flex; flex-direction: column;
  transition: border-color var(--ease-standard), box-shadow var(--ease-standard), transform var(--ease-standard);
}
.cases__card:hover { border-color: rgba(var(--blue-rgb), 0.55); box-shadow: var(--shadow-card-hover-blue); transform: translateY(-3px); }
.cases__card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-widest); text-transform: uppercase;
}
.cases__card-category { color: var(--blue); }
.cases__card-badge { color: var(--text-muted); }
.cases__card-title {
  margin: 16px 0 0; font-size: var(--fs-h3-case); font-weight: var(--fw-semibold);
  line-height: var(--lh-case-title); letter-spacing: var(--ls-snug); color: var(--text-primary);
}
.cases__card-facts { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.cases__card-fact { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; }
.cases__card-fact-label {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--text-faint);
}
.cases__card-fact-value { font-size: var(--fs-input); line-height: var(--lh-body); color: var(--text-secondary); }
.cases__card-stack {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px;
  font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-tertiary);
}
.cases__card-tag { border: 1px solid var(--border-soft); border-radius: var(--radius-xs); padding: 4px 8px; }
/* Единственный разрешённый контрактом класс-обёртка метрики — несёт и роль
   "прижать к низу карточки" (margin-top:auto), и роль строки-разделителя
   (пунктирная верхняя граница + flex baseline). Раньше это было раскидано по
   двум классам (…-metric + несуществующему в контракте …-metric-row) —
   слито в один, вне контракта класс не заводим. */
.cases__card-metric {
  margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--border-soft);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.cases__card-metric-value {
  font-family: var(--font-mono); font-size: var(--fs-title-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug); color: var(--accent); white-space: nowrap;
}
.cases__card-metric-note { font-size: var(--fs-note); line-height: var(--lh-metric-note); color: var(--text-muted); }

/* Кнопка «Открыть демо-версию →» в карточке кейса + пояснение под ней. */
.cases__card-demo {
  margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.cases__card-demo-link {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-btn-sm); letter-spacing: var(--ls-wide-sm);
  text-transform: uppercase; color: var(--accent-on); background: var(--accent);
  padding: 11px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-btn-submit);
  transition: box-shadow var(--ease-standard), transform var(--ease-standard);
}
.cases__card-demo-link:hover { box-shadow: var(--shadow-btn-submit-hover); transform: translateY(-1px); color: var(--accent-on); }
.cases__card-demo-note { font-size: var(--fs-note); line-height: var(--lh-metric-note); color: var(--text-muted); }

/* Ссылка «Подробнее →» на отдельную страницу кейса, низ карточки. */
.cases__card-more {
  margin-top: 16px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--accent);
}
.cases__card-more:hover { color: var(--accent-hover); }

.cases__cta-banner {
  margin-top: 24px; border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07) 0%, rgba(11,15,26,0) 60%);
  padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}
/* Обёртка заголовка+подписи внутри баннера — без своих стилей, только
   допускает перенос текста в flex-строке space-between. */
.cases__cta-copy { min-width: 0; }
.cases__cta-title { font-size: var(--fs-banner-title); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); color: var(--text-primary); }
.cases__cta-text { margin-top: 7px; font-size: var(--fs-body); color: var(--text-tertiary); }

/* ==========================================================================
   STACK — секция #stack
   ========================================================================== */
.stack { scroll-margin-top: var(--header-h); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.stack__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-y) var(--container-pad-x); }
/* Обёртка эпиграфа+заголовка над сеткой — без своих стилей. */
.stack__lead { }
.stack__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--gap-stack-cols); }
.stack__group {
  padding: 24px 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: start;
}
.stack__group-label {
  font-family: var(--font-mono); font-size: var(--fs-badge); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-muted);
}
.stack__group-items { display: flex; flex-wrap: wrap; gap: 8px; }
.stack__item {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-tag);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 7px 12px;
  transition: border-color var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast);
}
.stack__item:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--text-primary); box-shadow: var(--shadow-tag-hover); }

/* ==========================================================================
   CONTACT — секция #contact
   ========================================================================== */
.contact {
  scroll-margin-top: var(--header-h); position: relative;
  background-image: radial-gradient(rgba(var(--muted-rgb), 0.13) 1px, transparent 1px);
  background-size: var(--dot-grid-size) var(--dot-grid-size);
}
.contact__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 80% at 20% 100%, rgba(var(--accent-rgb), 0.10) 0%, rgba(10,14,20,0) 60%);
}
.contact__inner {
  position: relative; max-width: var(--container-max); margin: 0 auto; padding: var(--contact-pad);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--gap-contact); align-items: start;
}
/* Обёртка левой колонки — без своих стилей, только ограничение ширины грид-ячейки. */
.contact__info { min-width: 0; }
.contact__title {
  margin: 18px 0 0;
  font-size: clamp(28px, 3vw + 14px, var(--fs-h2-contact));
  line-height: var(--lh-h2-contact);
  letter-spacing: var(--ls-tighter); font-weight: var(--fw-semibold); color: var(--text-primary); text-wrap: balance;
}
.contact__text { margin: 20px 0 0; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-secondary); max-width: 460px; }
.contact__details {
  margin-top: 34px; display: flex; flex-direction: column; gap: 14px;
  font-family: var(--font-mono); font-size: var(--fs-btn-sm); color: var(--text-tertiary);
}
.contact__detail-row { display: flex; align-items: center; gap: 12px; }
.contact__detail-label { color: var(--text-faint); width: 88px; flex-shrink: 0; }
.contact__detail-value { }
.contact__detail-value--status { color: var(--text-muted); }

/* Панель формы */
.contact__panel {
  border: 1px solid var(--border-soft); border-radius: var(--radius-xl); background: var(--bg-card);
  box-shadow: var(--shadow-form-panel); overflow: hidden;
}
.contact__panel-bar {
  height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  border-bottom: 1px solid var(--border-card);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-muted);
}
.contact__panel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* Текст "request.form" в шапке панели — наследует шрифт/цвет от .contact__panel-bar. */
.contact__panel-label { }

/* Состояние успеха */
.contact__success-panel { padding: 52px 32px; text-align: center; }
.contact__success-icon { width: 40px; height: 40px; stroke: var(--accent); stroke-width: 1.3; fill: none; margin: 0 auto; }
.contact__success-title { margin-top: 20px; font-size: var(--fs-title-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.contact__success-title:focus { outline: none; }
.contact__success-text { margin-top: 10px; font-size: var(--fs-body); line-height: var(--lh-success-msg); color: var(--text-tertiary); }
.contact__success-panel .contact__success-reset { margin-top: 26px; }

/* Состояние формы */
.contact__form-panel { padding: var(--pad-form-panel); display: flex; flex-direction: column; gap: 20px; }
/* Без этого правила переключение через IDL-свойство `.hidden = true` (js/main.js)
   не срабатывает: авторское `display:flex` выше — обычное объявление автора и
   ВСЕГДА перебивает обычное объявление user-agent `[hidden]{display:none}` в
   каскаде независимо от специфичности (ориджины: UA-normal < author-normal).
   Нужна явная авторская перебивка на самом атрибуте. То же на всякий случай
   для success-панели, хотя у неё сегодня нет конфликтующего display. */
.contact__form-panel[hidden],
.contact__success-panel[hidden] { display: none; }
.contact__field { display: flex; flex-direction: column; gap: 9px; }
.contact__field-label {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-muted);
}
.contact__input, .contact__textarea {
  background: var(--bg-input); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 14px 15px; font-size: var(--fs-input); color: var(--text-primary); outline: none;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
  width: 100%;
}
.contact__textarea { line-height: var(--lh-body); resize: vertical; font-family: var(--font-sans); }
.contact__input:focus, .contact__textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-input-focus); }
.contact__hint {
  font-family: var(--font-mono); font-size: var(--fs-badge); line-height: var(--lh-body);
  color: var(--text-faint); text-align: center;
}
.contact__hint--error { color: var(--blue); }

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); }
.site-footer__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 26px var(--container-pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-badge); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-faint);
}
/* Текст копирайта — наследует шрифт/цвет от .site-footer__inner. */
.site-footer__text { }
.site-footer__links { display: flex; align-items: center; gap: 16px; }
.site-footer__link { color: var(--text-muted); }
.site-footer__link:hover { color: var(--text-primary); }
.site-footer__top { color: var(--text-muted); }
.site-footer__top:hover { color: var(--text-primary); }

/* Примечание: [data-reveal] сам по себе ничего не скрывает в разметке — состояние
   "скрыто" применяется ТОЛЬКО инлайн-стилями из js/main.js (initReveal()), и только
   после успешной guard-проверки (IntersectionObserver в наличии, вкладка не скрыта).
   Поэтому здесь нет .reveal/.is-visible классов: они не входят в разрешённый список
   классов контракта и не понадобились бы — при отключённом JS весь контент остаётся
   полностью видимым по умолчанию, что и требуется. */

/* ==========================================================================
   ACCESSIBILITY — фокус, поддержка клавиатуры
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* У полей формы уже есть собственное кольцо на :focus (box-shadow) —
   не дублируем контур поверх него. */
.contact__input:focus-visible,
.contact__textarea:focus-visible {
  outline: none;
}
.site-header__burger:focus-visible {
  outline-offset: 0;
}

/* ==========================================================================
   ПРЕДПОЧТЕНИЕ СНИЖЕНИЯ ДВИЖЕНИЯ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   АДАПТИВНОСТЬ — прототип зафиксирован на 1200px без брейкпоинтов;
   ниже — собственные брейкпоинты, чтобы сайт работал вплоть до 360px.
   ========================================================================== */

/* --- ≤1100px: уменьшаем внешние отступы контейнеров, сетки на fr уже тянутся сами --- */
@media (max-width: 1100px) {
  .site-header__inner,
  .hero__inner,
  .about__inner,
  .services__inner,
  .cases__inner,
  .stack__inner,
  .contact__inner,
  .site-footer__inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero__inner { padding-top: 72px; padding-bottom: 64px; }
  .contact__inner { padding-top: 64px; padding-bottom: 72px; }
  .services__inner, .cases__inner, .stack__inner {
    padding-top: 64px; padding-bottom: 64px;
  }
  .about__inner { padding-top: 64px; padding-bottom: 64px; }
  .hero__frame { width: 100%; left: 0; margin-left: 0; }
}

/* --- ≤980px: навигация уходит в бургер, сетка hero/about/contact ужимается --- */
@media (max-width: 980px) {
  .site-header__nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-header);
    backdrop-filter: blur(var(--blur-header));
    -webkit-backdrop-filter: blur(var(--blur-header));
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
    display: none;
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__nav-link {
    width: 100%; padding: 14px 0;
    border-bottom: 1px dashed var(--border-soft);
  }
  .site-header__nav-link:last-of-type { border-bottom: none; }
  .site-header__cta { margin-left: 0; }
  .site-header__burger { display: flex; }
  .site-header__inner { gap: 16px; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__panel { order: -1; height: 320px; }

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

  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .cases__grid { grid-template-columns: repeat(2, 1fr); }

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

/* --- ≤720px: всё в один столбец, крупные заголовки чуть спокойнее --- */
@media (max-width: 720px) {
  .services__grid,
  .cases__grid,
  .stack__grid {
    grid-template-columns: 1fr;
  }
  .stack__group { grid-template-columns: 1fr; gap: 10px; }

  .services__header,
  .cases__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .cases__cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__btn--primary, .hero__btn--secondary { text-align: center; }

  .contact__panel { }
  .contact__detail-row { flex-wrap: wrap; }
}

/* --- ≤480px: финальная подгонка под маленькие телефоны, вплоть до 360px --- */
@media (max-width: 480px) {
  .site-header__inner,
  .hero__inner,
  .about__inner,
  .services__inner,
  .cases__inner,
  .stack__inner,
  .contact__inner,
  .site-footer__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero__inner { padding-top: 56px; padding-bottom: 48px; }
  .contact__inner { padding-top: 48px; padding-bottom: 56px; }
  .services__inner, .cases__inner, .stack__inner, .about__inner {
    padding-top: 48px; padding-bottom: 48px;
  }

  .hero__panel { height: 260px; }
  .hero__subtitle { font-size: 17px; }

  .services__card { padding: 22px 18px 20px; }
  .cases__card { padding: 20px 16px; }
  .cases__card-fact { grid-template-columns: 1fr; gap: 4px; }

  .contact__form-panel { padding: 22px 18px 24px; }
  .contact__success-panel { padding: 36px 20px; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* На самых узких экранах логотип + бургер + CTA не помещаются в 68px без
     переноса текста кнопки — слегка ужимаем кнопку, чтобы уместить в одну строку. */
  .site-header__inner { gap: 10px; }
  .site-header__cta { padding: 9px 12px; white-space: nowrap; }
}

/* ==========================================================================
   LEGAL — страница politika.html, вне макета design.dc.html (канвас описывал
   только одностраничник-визитку). Своих токенов не заводит — только разметка
   поверх уже объявленных переменных, перенесена сюда из инлайн <style>
   politika.html, чтобы все классы страницы жили в одном файле стилей.
   ========================================================================== */
.legal { scroll-margin-top: var(--header-h); }
.legal__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px var(--container-pad-x) 96px;
}
.legal__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest-xl);
  text-transform: uppercase;
  color: var(--accent);
}
.legal__title {
  margin: 18px 0 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.legal__intro {
  margin: 18px 0 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 560px;
}
.legal__draft {
  margin-top: 32px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.legal__draft-label {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
}
.legal__draft p:last-child {
  margin: 0;
  font-size: var(--fs-note);
  line-height: var(--lh-metric-note);
  color: var(--text-tertiary);
}
.legal__body { margin-top: 48px; }
.legal__body h2 {
  margin: 40px 0 0;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p {
  margin: 14px 0 0;
  font-size: var(--fs-input);
  line-height: var(--lh-about-body);
  color: var(--text-secondary);
  max-width: 640px;
}
.legal__body ul {
  margin: 14px 0 0;
  padding-left: 20px;
  list-style: disc;
  color: var(--text-secondary);
  font-size: var(--fs-input);
  line-height: var(--lh-about-body);
  max-width: 640px;
}
.legal__body li + li { margin-top: 6px; }
.legal__body p + p { margin-top: 10px; }
.legal__card {
  margin-top: 18px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-note);
  color: var(--text-secondary);
}
.legal__card p { margin: 0; font-size: inherit; color: inherit; max-width: none; }
.legal__closing {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px dashed var(--border-soft);
  font-size: var(--fs-note);
  color: var(--text-muted);
}
@media (max-width: 680px) {
  .legal__inner { padding: 48px 20px 64px; }
}