/* ==========================================================================
   LOGISTIC ETALON — main stylesheet
   Направление «Точный инструмент» (Swiss-technical) по docs/design-brief.md:
   тонкие правила, тик-марки, mono-подписи, сигнальный оранжевый акцент.
   Слои токенов: 1) примитивы  2) семантика (темы)  3) компоненты.
   ========================================================================== */

/* -------------------- плавная смена темы (приём GAT) ---------------------
   Тема меняет только значения цветовых переменных на <html>. Токены
   зарегистрированы через @property syntax '<color>' — зарегистрированные
   свойства умеют анимироваться, и фон, текст, рамки и кнопки всей страницы
   перекрашиваются синхронно по transition у html ниже. Без поддержки
   @property тема переключается мгновенно (graceful degradation). */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #F6F7F4; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #EDEFEA; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #12151C; }
@property --ink-muted { syntax: '<color>'; inherits: true; initial-value: #515A64; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #D9DDD6; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #C2410C; }
@property --accent-strong { syntax: '<color>'; inherits: true; initial-value: #9A3412; }
@property --btn-solid { syntax: '<color>'; inherits: true; initial-value: #12151C; }
@property --btn-solid-ink { syntax: '<color>'; inherits: true; initial-value: #F6F7F4; }
@property --btn-accent { syntax: '<color>'; inherits: true; initial-value: #C2410C; }
@property --btn-accent-ink { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --btn-accent-hover { syntax: '<color>'; inherits: true; initial-value: #A83A0A; }
@property --btn-ghost-border { syntax: '<color>'; inherits: true; initial-value: rgba(18, 21, 28, 0.5); }
@property --field-border { syntax: '<color>'; inherits: true; initial-value: #879088; }
@property --focus-ring { syntax: '<color>'; inherits: true; initial-value: #C2410C; }
@property --focus-glow { syntax: '<color>'; inherits: true; initial-value: rgba(194, 65, 12, 0.16); }
@property --shadow-color { syntax: '<color>'; inherits: true; initial-value: rgba(18, 21, 28, 0.08); }
@property --danger { syntax: '<color>'; inherits: true; initial-value: #B3261E; }
@property --success { syntax: '<color>'; inherits: true; initial-value: #1D7A46; }
@property --footer-muted { syntax: '<color>'; inherits: true; initial-value: rgba(246, 247, 244, 0.72); }
@property --footer-line { syntax: '<color>'; inherits: true; initial-value: rgba(246, 247, 244, 0.16); }
@property --footer-accent { syntax: '<color>'; inherits: true; initial-value: #FF8A5C; }

/* ============================== СЛОЙ 1: ПРИМИТИВЫ =========================
   Сырые значения: шкалы цветов, отступы (база 8px), радиусы, шрифты, кривые. */
:root {
    color-scheme: light;

    /* нейтральная шкала (светлая тема) */
    --neutral-0: #FFFFFF;
    --neutral-50: #F6F7F4;
    --neutral-100: #EDEFEA;
    --neutral-200: #D9DDD6;
    --neutral-600: #515A64;
    --neutral-900: #12151C;
    /* шкала тёмной темы */
    --night-900: #101318;
    --night-800: #161B22;
    --night-700: #1D232C;
    --night-600: #2A313B;
    --night-200: #A6AFB8;
    --night-100: #EDEFF2;
    /* сигнальный оранжевый */
    --orange-600: #C2410C;
    --orange-700: #9A3412;
    --orange-300: #FF8A5C;
    --orange-200: #FFB08A;
    /* семантика статусов */
    --red-600: #B3261E;
    --red-400: #FF6B5E;
    --green-600: #1D7A46;
    --green-400: #4CC38A;

    /* отступы, база 8px */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* радиусы */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-pill: 999px;

    /* шрифты */
    --font-display: 'Unbounded', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    /* имя компании — Times New Roman (решение заказчика 2026-10-24): системный
       стек без веб-шрифта, юридическая классика деловых документов */
    --font-brand: 'Times New Roman', 'Liberation Serif', Times, serif;

    /* типографика (шкала 1.25); min-size заголовков ужат под 375px —
       Unbounded широкий, иначе «Внешнеторговая» не помещается в строку.
       H1 — Times New Roman (решение заказчика 2026-10-24): мельче и «тише» */
    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-h3: 1.125rem;
    --text-h2: clamp(1.6rem, 1.25rem + 2vw, 2.6rem);
    --text-h1: clamp(1.45rem, 1.2rem + 1.2vw, 2.35rem);

    /* движение */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --theme-dur: 400ms;

    /* высота шапки: живёт в :root, чтобы html { scroll-padding-top } и
       мобильная панель видели одно значение (переопределяется в @media) */
    --header-h: 72px;

    /* тень (цвет анимируется темой; в тёмной теме — прозрачный) */
    --shadow-card: 0 6px 20px var(--shadow-color);
}

/* ============================== СЛОЙ 2: СЕМАНТИКА =========================
   Роли, зависящие от темы. Светлая — в :root, тёмная — в html[data-theme]. */
:root {
    --paper: var(--neutral-50);
    --surface: var(--neutral-0);
    --surface-2: var(--neutral-100);
    --ink: var(--neutral-900);
    --ink-muted: var(--neutral-600);
    --line: var(--neutral-200);
    --accent: var(--orange-600);
    --accent-strong: var(--orange-700);
    --btn-solid: var(--neutral-900);
    --btn-solid-ink: var(--neutral-50);
    --btn-accent: var(--orange-600);
    --btn-accent-ink: var(--neutral-0);
    --btn-accent-hover: #A83A0A;
    --btn-ghost-border: rgba(18, 21, 28, 0.5);
    --field-border: #879088; /* рамки полей: ≥3:1 на surface (WCAG 1.4.11) */
    --focus-ring: var(--orange-600);
    --focus-glow: rgba(194, 65, 12, 0.16);
    --shadow-color: rgba(18, 21, 28, 0.08);
    --danger: var(--red-600);
    --success: var(--green-600);
    /* подвал: фон --ink, текст --paper (инверсия из брифа) */
    --footer-muted: rgba(246, 247, 244, 0.72);
    --footer-line: rgba(246, 247, 244, 0.16);
    --footer-accent: var(--orange-300);
}

/* Анимация самих токенов: общая длительность, вся страница перекрашивается
   синхронно. prefers-reduced-motion гасит общий блок в конце файла. */
html {
    transition:
        --paper var(--theme-dur) var(--ease), --surface var(--theme-dur) var(--ease),
        --surface-2 var(--theme-dur) var(--ease), --ink var(--theme-dur) var(--ease),
        --ink-muted var(--theme-dur) var(--ease), --line var(--theme-dur) var(--ease),
        --accent var(--theme-dur) var(--ease), --accent-strong var(--theme-dur) var(--ease),
        --btn-solid var(--theme-dur) var(--ease), --btn-solid-ink var(--theme-dur) var(--ease),
        --btn-accent var(--theme-dur) var(--ease),
        --btn-accent-ink var(--theme-dur) var(--ease), --btn-accent-hover var(--theme-dur) var(--ease),
        --btn-ghost-border var(--theme-dur) var(--ease), --field-border var(--theme-dur) var(--ease), --focus-ring var(--theme-dur) var(--ease),
        --focus-glow var(--theme-dur) var(--ease), --shadow-color var(--theme-dur) var(--ease),
        --danger var(--theme-dur) var(--ease), --success var(--theme-dur) var(--ease),
        --footer-muted var(--theme-dur) var(--ease), --footer-line var(--theme-dur) var(--ease),
        --footer-accent var(--theme-dur) var(--ease);
}

/* тёмная тема: инверсия поверхностей, акцент светлее */
html[data-theme='dark'] {
    color-scheme: dark;
    --paper: var(--night-900);
    --surface: var(--night-800);
    --surface-2: var(--night-700);
    --ink: var(--night-100);
    --ink-muted: var(--night-200);
    --line: var(--night-600);
    --accent: var(--orange-300);
    --accent-strong: var(--orange-200);
    --btn-solid: var(--night-100);
    --btn-solid-ink: var(--night-900);
    --btn-accent: var(--orange-300);
    --btn-accent-ink: var(--night-900);
    --btn-accent-hover: var(--orange-200);
    --btn-ghost-border: rgba(237, 239, 242, 0.45);
    --field-border: #5E6B7E; /* ≥3:1 на surface тёмной темы */
    --focus-ring: var(--orange-300);
    --focus-glow: rgba(255, 138, 92, 0.2);
    --shadow-color: rgba(0, 0, 0, 0);
    --danger: var(--red-400);
    --success: var(--green-400);
    /* подвал инвертируется вместе с темой: фон --ink стал светлым */
    --footer-muted: rgba(16, 19, 24, 0.72);
    --footer-line: rgba(16, 19, 24, 0.16);
    --footer-accent: var(--orange-700);
}

/* ================================ БАЗА ==================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h, 72px) + 16px);
}

body {
    margin: 0;
    /* ФОН «ТИШИНА» (заказчик выбрал 2026-10-27 из 3 вариантов дизайнера,
       qa/bg-work/ — превью и рецепты V1/V2/V3): почти чистая бумага — сетки-
       «миллиметровки» больше нет; осталось бумажное зерно + едва заметная
       виньетка по углам вьюпорта (2% чернил, fixed — держится при скролле).
       Тёмная тема: виньетка темнее (28% чёрного) + зерно светлым. История:
       миллиметровка (предложение №1, qa/visual-proposal.md, 2026-10-25,
       усилена по просьбе заказчика) убрана решением 2026-10-27. */
    background-color: var(--paper);
    background-image:
        /* бумажное зерно (предложение №2, «усилитель»): тайл 160px, спеклы 5% —
           тёмные крапинки чернил на светлой бумаге; тёмная тема — отдельное
           правило ниже со светлыми спеклами. Фильтр не поддерживается →
           картинка не рисуется → чистая бумага (graceful). */
        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%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 140% 110% at 50% 42%, transparent 62%, color-mix(in srgb, var(--ink) 2%, transparent) 100%);
    background-size: 160px 160px, 100% 100%;
    background-attachment: scroll, fixed;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.no-scroll {
    overflow: hidden;
}

/* тёмная тема: зерно светлым (RGB → 1 — «пыль на экране прибора»);
   виньетка — темнее (28% чёрного по углам), зерно тем же тайлом */
html[data-theme='dark'] body {
    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%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 140% 110% at 50% 42%, transparent 62%, rgba(0, 0, 0, 0.28) 100%);
}

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

ul, ol {
    padding: 0;
    list-style: none;
}

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

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

/* видимый фокус только с клавиатуры, на всём интерактивном */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

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

/* ======================= СЛОЙ 3: КОМПОНЕНТЫ =============================== */

/* --- контейнер ------------------------------------------------------------- */
.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 3rem);
}

/* --- иконки в кнопках и карточках ------------------------------------------ */
.ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* --- skip-link -------------------------------------------------------------- */
.skip-link {
    position: fixed;
    top: -48px;
    left: var(--space-4);
    z-index: 200;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--focus-ring);
    border-radius: var(--radius-s);
    font-weight: 600;
    transition: top 0.3s var(--ease-out);
}

.skip-link:focus-visible {
    top: var(--space-2);
}

/* --- бровка и mono-подписи -------------------------------------------------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.mono-note {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* ============================ ШАПКА ======================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-card);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* минимальный зазор лого↔нав 24px: при 16px «Kompaniya haqida»
       прижималась к лого в UZ-версии (заказчик, 2026-10-24) */
    gap: var(--space-6);
    min-height: var(--header-h);
}

/* --- лого --------------------------------------------------------------------
   V3-стек (заказчик выбрал 2026-10-27): два прозрачных PNG с метками в цвет
   поверхности — logo-light.png (тёмные метки, светлые фоны) и logo-dark.png
   (светлые метки, тёмные фоны). Первый img в потоке держит размер; второй
   лежит поверх и проявляется opacity-кроссфейдом в такт смене темы (GAT).
   Шапка (бумага) переключается темой; футер (чернила) — инверсно. */
.logo {
    display: inline-flex;
    align-items: center;
    position: relative;
    gap: var(--space-3);
    color: var(--ink);
}

.logo__img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    border-radius: 8px;
    transition: opacity var(--theme-dur) var(--ease);
}

.logo__img--on-dark {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* шапка: светлая тема → тёмные метки, тёмная → светлые */
html[data-theme='dark'] .logo__img--on-light {
    opacity: 0;
}

html[data-theme='dark'] .logo__img--on-dark {
    opacity: 1;
}

/* футер: фон — всегда чернила (светлая тема: тёмный ink; тёмная: светлый),
   знаки инверсны шапке */
html:not([data-theme='dark']) .logo--footer .logo__img--on-light {
    opacity: 0;
}

html:not([data-theme='dark']) .logo--footer .logo__img--on-dark {
    opacity: 1;
}

html[data-theme='dark'] .logo--footer .logo__img--on-light {
    opacity: 1;
}

html[data-theme='dark'] .logo--footer .logo__img--on-dark {
    opacity: 0;
}

.logo__text {
    display: none; /* на <560px текст не влезает рядом с действиями шапки */
    font-family: var(--font-brand); /* имя компании — Times New Roman (решение заказчика) */
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* имя компании внутри текстов (H2 «О компании», копирайт) — фирменный Times */
.brand-name {
    font-family: var(--font-brand);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* H2 «О компании»: вся строка «LOGISTIC ETALON — ваш профильный партнёр
   по ВЭД» — Times New Roman (решение заказчика 2026-10-24).
   Двойной селектор — чтобы перебить .h2, объявленный ниже по файлу */
.h2.h2--brand {
    font-family: var(--font-brand);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.25;
}

/* --- навигация: mobile-панель (список виден внутри панели) --------------------- */
.nav__list {
    display: grid;
}

/* --- действия шапки ----------------------------------------------------------- */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* --- переключатель языка: пилюля RU · EN · UZ ---------------------------------
   Три равные ячейки; текущий язык — не ссылка (.lang-switch__current),
   остальные — навигация на зеркала (работает без JS). Бегунок стоит под
   активным языком сразу — позиция задана только html[lang] чистым CSS, JS
   про положение не знает (приём GAT). Высота 44px — touch-цель по брифу. */
.lang-switch {
    --lang-w: 96px;
    --lang-h: 44px;
    --lang-pad: 2px;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--lang-w);
    height: var(--lang-h);
    padding: 0 var(--lang-pad);
    border: 1px solid var(--btn-ghost-border);
    border-radius: var(--radius-pill);
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.25s var(--ease);
}

.lang-switch:hover {
    border-color: var(--accent);
}

/* ячейки: ссылки-языки и текущий язык — равные трети, на всю высоту */
.lang-switch__link,
.lang-switch__current {
    display: grid;
    place-items: center;
    flex: 1 1 0;
    height: 100%;
}

.lang-switch__link {
    text-decoration: none;
    cursor: pointer;
}

/* бегунок: ширина ровно одной ячейки — шаг сдвига = translateX(100%) */
.lang-switch__thumb {
    position: absolute;
    top: var(--lang-pad);
    left: var(--lang-pad);
    width: calc((100% - var(--lang-pad) * 2) / 3);
    height: calc(100% - var(--lang-pad) * 2);
    border-radius: var(--radius-pill);
    background: var(--btn-solid);
    pointer-events: none;
    transition: transform 0.25s var(--ease-out);
}

/* EN- и UZ-страницы: бегунок под второй и третьей ячейками */
html[lang='en'] .lang-switch__thumb {
    transform: translateX(100%);
}

html[lang='uz'] .lang-switch__thumb {
    transform: translateX(200%);
}

.lang-switch__item {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    pointer-events: none;
    transition: color 0.25s var(--ease);
}

.lang-switch__item.is-active {
    color: var(--btn-solid-ink);
}

/* --- GlideSelect: переключатель языка (порт React Bits) ----------------------
   В JS-режиме заменяет no-JS-пилюлю .lang-switch (взаимная видимость ниже).
   Механика: чип-комбобокс + listbox с «плывущей» пилюлей подсветки, pop
   меню 180мс (уход 2/3), glide 220мс. Все цвета — токены темы. */
.js .lang-switch {
    display: none; /* JS-режим: вместо пилюли — GlideSelect */
}

html:not(.js) .lang-select {
    display: none; /* без JS работает ссылочная пилюля выше */
}

.lang-select {
    position: relative;
    display: inline-block;
}

/* чип: облик старой пилюли — капсула 44px, mono-подпись, рамка ghost */
.lang-select__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    margin: 0;
    padding: 0 12px 0 14px;
    border: 1px solid var(--btn-ghost-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink); /* как у кнопок групп (заказчик 2026-10-27) */
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.25s var(--ease), background-color 0.2s var(--ease),
        transform 0.16s var(--ease-out);
}

.lang-select__trigger:hover {
    border-color: var(--accent);
}

.lang-select__trigger[aria-expanded='true'] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.lang-select__trigger:active {
    transform: scale(0.97);
}

/* шеврон (hugeicons ArrowDown01 → инлайн-SVG, стиль .ico) */
.lang-select__chevron {
    display: inline-flex;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
    transition: transform 0.2s var(--ease-out);
}

.lang-select__chevron svg {
    width: 12px;
    height: 12px;
}

.lang-select__trigger[aria-expanded='true'] .lang-select__chevron {
    transform: rotate(180deg);
}

/* меню: снизу/сверху от чипа, прижато вправо; origin — угол появления */
.lang-select__menu {
    position: absolute;
    z-index: 30;
    width: 150px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.lang-select__menu[data-side='bottom'] {
    top: calc(100% + 6px);
    transform-origin: top right;
}

.lang-select__menu[data-side='top'] {
    bottom: calc(100% + 6px);
    transform-origin: bottom right;
}

.lang-select__menu[data-align='right'] {
    right: 0;
}

.lang-select__menu[data-state='open'] {
    opacity: 1;
    transform: none;
}

.lang-select__menu[data-state='closed'] {
    transition-duration: 120ms; /* уход — 2/3 от pop */
    pointer-events: none;
}

/* строки + глайд-пилюля */
.lang-select__list {
    position: relative;
    display: grid;
    gap: 1px;
    touch-action: none; /* scrub: жест ведёт пилюлю, скролл не нужен */
}

.lang-select__pill {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 40px;
    border-radius: var(--radius-s);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: transform 220ms var(--ease-out), opacity 150ms ease;
}

.lang-select__option {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 10px;
    border-radius: var(--radius-s);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* пометка выбранной строки (60%-микс) — пока пилюля не активна */
.lang-select__option[aria-selected='true'] {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.lang-select__list[data-live] .lang-select__option[aria-selected='true'] {
    background: transparent; /* пилюля перекрывает строку */
}

.lang-select__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lang-select__tag {
    flex-shrink: 0;
    color: var(--ink-muted);
    font-size: 11px;
}

.lang-select__check {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--accent-strong);
    visibility: hidden;
}

.lang-select__check[data-on] {
    visibility: visible;
}

.lang-select__check svg {
    width: 13px;
    height: 13px;
}

/* --- переключатель темы: touch-цель 44×44 (иконка меньше) --------------------- */
.theme-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--btn-ghost-border);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.25s var(--ease), transform 0.15s var(--ease);
}

.theme-toggle:hover {
    border-color: var(--accent);
}

.theme-toggle:active {
    transform: scale(0.94);
}

.theme-toggle__box {
    position: relative;
    width: 18px;
    height: 18px;
}

.theme-toggle__box svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}

/* светлая: солнце активно, луна приглушена */
.theme-toggle__sun {
    opacity: 1;
    transform: rotate(0deg);
}

.theme-toggle__moon {
    opacity: 0.25;
    transform: rotate(-30deg);
}

/* тёмная: наоборот */
html[data-theme='dark'] .theme-toggle__sun {
    opacity: 0.25;
    transform: rotate(30deg);
}

html[data-theme='dark'] .theme-toggle__moon {
    opacity: 1;
    transform: rotate(0deg);
}

/* --- кнопки ------------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
        color 0.3s var(--ease), transform 0.15s var(--ease), box-shadow 0.3s var(--ease);
}

.btn:active {
    transform: scale(0.98);
}

.btn--accent {
    background: var(--btn-accent);
    color: var(--btn-accent-ink);
}

.btn--accent:hover {
    background: var(--btn-accent-hover);
    transform: translateY(-1px);
}

.btn--ghost {
    border-color: var(--btn-ghost-border);
    color: var(--ink);
    background: transparent;
}

.btn--ghost:hover {
    background: var(--surface-2);
    transform: translateY(-1px);
}

.btn--sm {
    min-height: 44px; /* touch-цель и для компактной кнопки шапки */
    font-size: var(--text-sm);
    padding-inline: 0.9rem;
}

.btn--block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* телефонная кнопка шапки: на узких экранах остаётся только иконка */
.header__phone span {
    display: none;
}

/* --- бургер: touch-цель 44×44 ---------------------------------------------------- */
.burger {
    display: grid;
    gap: 5px;
    justify-items: center;
    align-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--btn-ghost-border);
    border-radius: var(--radius-s);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.25s var(--ease);
}

.burger:hover {
    border-color: var(--accent);
}

.burger span {
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
    transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease);
}

.burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.is-active span:nth-child(2) {
    opacity: 0;
}

.burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- мобильная панель навигации -------------------------------------------------------
   Панель живёт НИЖЕ шапки (top: var(--header-h)) и не накрывает её:
   шапка sticky с z-index 50 рисуется поверх панели, бургер-«X» всегда
   виден и кликабелен (фикс бага перекрытия; overlay заодно кликабелен
   под панелью). Высота — по контенту, но не больше экрана. */
.nav {
    position: fixed;
    top: var(--header-h, 72px);
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 40;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--header-h, 72px));
    overflow-y: auto;
    padding: var(--space-6) clamp(1rem, 5vw, 3rem) var(--space-8);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out),
        visibility 0s linear 0.25s;
}

.nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.nav__link {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.3rem;
    font-weight: 600;
    transition: color 0.3s var(--ease); /* плавность 2026-10-27 */
}

.nav__link:active {
    color: var(--accent-strong);
}

.nav__footer {
    margin-top: var(--space-8);
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-6);
}

.nav__phone {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--accent-strong);
}

.nav__mail {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(18, 21, 28, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* ================================ HERO ==================================== */

.hero {
    position: relative; /* вотермарк ::after позиционируется от hero */
    z-index: 0; /* стек-контекст: вотермарк (z-index:-1) над фонами, под контентом */
    overflow: hidden; /* контур обрезается краем листа («штамп уходит за поле»); ovf=0 */
    padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    padding-bottom: 0;
    background:
        /* тёплое «сигнальное» пятно за заголовком (визуальное предложение №3,
           2026-10-25; УСИЛЕНО до 8% по просьбе заказчика «усилить», 2026-10-25):
           акцент 8%, тает к 70% — свет логистической разметки, не глоу.
           Слою position/size не нужны: градиент покрывает бокс. */
        radial-gradient(640px 420px at 14% 6%,
            color-mix(in srgb, var(--accent) 8%, transparent),
            transparent 70%),
        /* тонкая фоновая «шкала» по правому краю — мотив прибора */
        repeating-linear-gradient(to bottom,
            var(--line) 0 1px, transparent 1px 56px) right / 1px 100% no-repeat;
        /* слой var(--paper) убран (предложение №1): сквозь hero видна
           миллиметровка body */
}

/* контурный вотермарк «LOGISTIC ETALON» (визуальное предложение №5, 2026-10-25;
   УСИЛЕНО до 6% по линии «усилить», 2026-10-25): Times 700 — фирменный шрифт
   имени, системный (ноль загрузки). Пустой alt после «/» — псевдо-текст молчит
   для скринридеров; браузер без поддержки синтаксиса отбросит всю декларацию
   content — вотермарк просто не появится (graceful). */
.hero::after {
    content: "LOGISTIC ETALON" / "";
    position: absolute;
    z-index: -1; /* над фонами hero, под контентом (стек-контекст .hero z-index:0) */
    left: 0;
    right: 0; /* по центру страницы (заказчик, 2026-10-25): блок на всю ширину
                 hero, текст центрируется text-align; на узких экранах контур
                 уходит за оба поля симметрично, обрезается overflow:hidden */
    text-align: center;
    bottom: 3%;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 9.5rem);
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    color: transparent; /* только обводка, заливки нет */
    -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 6%, transparent);
    pointer-events: none; /* не ловит события — обязательно */
    user-select: none;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* minmax(0): контент не растягивает колонку */
    gap: var(--space-8);
}

.hero__copy {
    max-width: 640px;
}

.hero__title {
    margin-top: var(--space-4);
    /* H1 — Times New Roman (решение заказчика 2026-10-24): спокойнее
       и мельче Unbounded, «классическая» строка УТП */
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: var(--text-h1);
    line-height: 1.25;
    letter-spacing: 0.005em;
}

/* страховка от сверхдлинных слов в узких колонках */
.hero__title,
.h2 {
    overflow-wrap: break-word;
}

.hero__lead {
    margin-top: var(--space-4);
    max-width: 55ch;
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--ink-muted);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
    max-width: 100%;
}

/* на узких экранах кнопки могут переносить текст (номер длинный) */
.hero__actions .btn {
    white-space: normal;
    padding-inline: 1rem;
}

/* --- схема «путь сделки» (SVG, ≥1024px) ------------------------------------ */
.hero__figure {
    display: none;
}

.hero__scheme {
    width: 100%;
    height: auto;
}

.scheme-text {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    fill: var(--ink);
}

.scheme-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    fill: var(--ink-muted);
}

.scheme-link {
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 2 5;
    stroke-linecap: round;
    opacity: 0.45;
}


/* --- полоса-«линейка» фактов удалена заказчиком (2026-10-24) ----------------- */

/* ================================ СЕКЦИИ ================================== */

.section {
    padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

/* хайрлайны-разделители (визуальное предложение №4, 2026-10-25): волосяная
   линия на стыке секций тает к краям контейнера; слева — короткий акцентный
   тик (мотив тик-марок .tick-list и .service-card). Чередование фонов
   НЕ внедряется (решение лида). Селектор покрывает стыки hero→02 … 05→06
   на RU/EN/UZ — структура страниц зеркальная. */
main > section + section {
    position: relative;
}

main > section + section::before {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(1rem, 5vw, 3rem); /* = padding-inline .container */
    right: clamp(1rem, 5vw, 3rem);
    height: 1px;
    /* УСИЛЕНО (2026-10-25): 100% --line вместо 85%-микса */
    background: linear-gradient(to right,
        transparent,
        var(--line) 18%,
        var(--line) 82%,
        transparent);
}

main > section + section::after {
    content: '';
    position: absolute;
    top: -1px; /* тик сидит на линии: 1px вверх — переполнения не создаёт */
    left: clamp(1rem, 5vw, 3rem);
    width: 24px;
    height: 3px;
    border-radius: 1px;
    background: var(--accent);
    opacity: 0.85; /* УСИЛЕНО (2026-10-25): было 0.6 */
}

/* голова секции: mono-номер в бровке + вертикальное правило с тиками слева */
.section__head {
    position: relative;
    max-width: 720px;
    padding-left: 22px;
}

.section__head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: repeating-linear-gradient(to bottom,
        var(--accent-strong) 0 5px, transparent 5px 12px);
    opacity: 0.6;
}

.h2 {
    margin-top: var(--space-3);
    /* H2 секций — Times New Roman (решение заказчика 2026-10-25, вслед за H1):
       «классические» описания секций; serif на 1.15 тесноват — 1.25 как у H1 */
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: var(--text-h2);
    line-height: 1.25;
}

.section__lead {
    margin-top: var(--space-3);
    max-width: 60ch;
    color: var(--ink-muted);
}

/* ================================ О КОМПАНИИ ============================== */

.about__grid {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.about__text {
    display: grid;
    gap: var(--space-4);
    max-width: 60ch;
    font-size: 1.05rem;
    align-content: start;
}

.about__cards {
    display: grid;
    gap: var(--space-4);
}

.value-card {
    position: relative;
    /* чуть больше воздуха внутри — нумерация сверху убрана (заказчик,
       2026-10-24): заголовок первый, поля 2rem, текст крупнее */
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease);
}

/* hover-подъём — только мышь (2026-10-25, по мотивам adas-trade.uz, заказчик):
   на тач-экранах :hover залипает — гейт (hover: hover). В JS-режиме подъём
   и быстрый переход дорисованы в блоке «АНИМАЦИИ» ниже (обычный :hover
   перебивается специфичностью .js .reveal.is-visible) */
@media (hover: hover) {
    .value-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card);
    }
}

.value-card__title {
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.3;
}

.value-card p {
    margin-top: var(--space-3);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--ink-muted);
}

/* --- чипы -------------------------------------------------------------------- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--space-1) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    background: transparent;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
        color 0.2s var(--ease);
}

.chip--link {
    min-height: 44px; /* touch-цель */
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
}

.chip--link:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent-strong);
}

/* выбранный чип группы услуг: постоянная обводка accent-strong + лёгкий тинт
   акцента (токен focus-glow, виден в обеих темах). Гейт html.js: без JS
   класс is-active не ставится — чипы остаются простыми якорями */
.js .chip--link.is-active {
    border: 1.5px solid var(--accent-strong);
    color: var(--accent-strong);
    background: var(--focus-glow);
}

/* остальные кнопки — «немного меньше» (заказчик, 2026-10-26): когда какая-то
   группа открыта (ряд имеет .has-active — ставит main.js), неактивные чипы
   сжимаются и притухают, активный остаётся полного размера с подсветкой
   is-active выше; при закрытии всё возвращается. Класс ставит только JS —
   no-JS не затрагивается. */
.js .chip-row.has-active .chip--link:not(.is-active) {
    transform: scale(0.94);
    opacity: 0.7;
}

/* плавность сжатия/возврата чипов групп услуг (существующие переходы цветов
   — в базовом .chip выше; гейт html.js — без JS состояний нет) */
.js .chip--link {
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
        color 0.2s var(--ease), transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

/* BellToggle-порт (React Bits, заказчик 2026-10-26): из приёмов пилюли
   осталось нажатие — чип сжимается до 0.97 (data-pressed ставит main.js
   на pointerdown, снимает на up/cancel/leave); распахивание панели —
   WAAPI в main.js. ЗВОН и волны-дуги убраны по просьбе заказчика
   2026-10-26 («уберём звон колокола»). */
.js .chip--link[data-pressed] {
    transform: scale(0.97);
}

/* ================================ УСЛУГИ =================================== */

.service-group {
    margin-top: var(--space-12);
}

/* переключение групп услуг (main.js): неактивные панели прячутся атрибутом
   hidden. Без JS атрибут не ставится — все группы открыты, чипы-якоря
   скроллят как раньше (деградация). Второе правило гасит hidden, если класс
   js снят уже после инициализации (ручная симуляция no-JS, как у вкладок
   калькулятора). */
.service-group[hidden] {
    display: none;
}

html:not(.js) .service-group[hidden] {
    display: block;
}

/* показанная группа коротко проявляется; глобальный блок
   prefers-reduced-motion в конце файла обнуляет анимацию */
.js .service-group {
    animation: group-in 0.25s var(--ease-out);
}

@keyframes group-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* заголовок группы: mono-буква в квадратике с тиками */
.service-group__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.service-group__letter {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--accent-strong);
    background:
        repeating-linear-gradient(to bottom,
            transparent 0 8px, var(--line) 8px 9px, transparent 9px 17px) top / 100% 6px no-repeat,
        var(--surface);
}

.service-group__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.service-grid {
    display: grid;
    gap: var(--space-4);
}

/* карточка услуги: тик-линия слева вырастает при наведении (scaleX, origin left) */
.service-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
}

.service-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 26px;
    width: 18px;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
}

/* hover-кластер карточки услуги — только мышь (2026-10-25, по мотивам
   adas-trade.uz, заказчик): подъём + тень + тик-линия; JS-режим подъёма
   дорисован в блоке «АНИМАЦИИ» ниже */
@media (hover: hover) {
    .service-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card);
    }

    .service-card:hover::before {
        transform: scaleX(1);
    }
}

.service-card__num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--accent-strong);
}

.service-card__icon {
    width: 24px;
    height: 24px;
    margin-top: var(--space-3);
    color: var(--ink);
    transition: color 0.25s var(--ease);
}

@media (hover: hover) {
    .service-card:hover .service-card__icon {
        color: var(--accent-strong);
    }
}

.service-card__title {
    margin-top: var(--space-2);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.service-card__text {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* ================================ СТОИМОСТЬ ================================ */

.pricing__panel {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-6);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    /* hover-подъём (2026-10-25, по мотивам adas-trade.uz, заказчик): панель-
       «документ» приподнимается только мышью; в JS-режиме переход
       переобъявлен в блоке «АНИМАЦИИ» (конфликт с .js .reveal) */
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
    .pricing__panel:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card);
    }
}

/* одна колонка (правый визуал удалён): копия не растягивается
   на всю ширину панели на десктопе */
.pricing__copy {
    max-width: 64ch;
}

/* абзацы панели: приглушённые; :not(.eyebrow) — бровка «04 · СТОИМОСТЬ»
   не должна перебиваться (специфичность .pricing__copy > p выше .eyebrow —
   заказчик, 2026-10-25: бровка 04 была тёмной, остальные оранжевые) */
.pricing__copy > p:not(.eyebrow) {
    margin-top: var(--space-3);
    max-width: 58ch;
    color: var(--ink-muted);
}

/* пункты с тик-марками */
.tick-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.tick-list li {
    position: relative;
    padding-left: 24px;
    max-width: 62ch;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.tick-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 12px;
    height: 3px;
    background: var(--accent);
}

.tick-list strong {
    color: var(--ink);
    font-weight: 600;
}

.pricing__copy .btn {
    margin-top: var(--space-8);
}

.pricing__copy .mono-note {
    margin-top: var(--space-3);
}

/* ================================ КОНТАКТЫ ================================= */

/* тёплое «сигнальное» пятно на выходе (визуальное предложение №3, 2026-10-25;
   УСИЛЕНО до 6% по просьбе заказчика, 2026-10-25): за формой контактов,
   центр ниже нижнего края — «горизонт света». Декор только на уровне
   «бумаги»: карточки и поля не тонируются. */
.contact {
    background: radial-gradient(720px 380px at 50% 108%,
        color-mix(in srgb, var(--accent) 6%, transparent),
        transparent 72%);
}

.contact__grid {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

/* --- форма -------------------------------------------------------------------- */
.form {
    display: grid;
    gap: var(--space-4);
    max-width: 560px;
}

.form[hidden] {
    display: none; /* .form задан display:grid — без этого hidden не скрыл бы */
}

.field {
    display: grid;
    gap: var(--space-2);
}

.field label {
    font-size: var(--text-sm);
    font-weight: 600;
}

.input {
    width: 100%;
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--field-border); /* ≥3:1 в обеих темах (WCAG 1.4.11) */
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-base);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

textarea.input {
    min-height: 112px;
    resize: vertical;
}

.input::placeholder {
    color: var(--ink-muted);
    opacity: 0.75;
}

.input:focus-visible {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--focus-glow);
}

/* ошибка: рамка + подсказка под полем */
.input.is-invalid {
    border-color: var(--danger);
}

/* «волна» при неверном вводе в телефоне (заказчик, 2026-10-24): красное
   кольцо расходится от рамки поля (box-shadow 0→12px, цвет --danger,
   тема-зависимый). Класс ставит main.js; снимается по animationend,
   повторы — снятие + reflow. Блок prefers-reduced-motion внизу гасит. */
@keyframes input-deny-wave {
    from {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent);
    }
    to {
        box-shadow: 0 0 0 12px color-mix(in srgb, var(--danger) 0%, transparent);
    }
}

.input.is-deny {
    animation: input-deny-wave 0.45s var(--ease-out);
    border-color: var(--danger);
}

.field__error {
    min-height: 1.2em;
    font-size: var(--text-xs);
    color: var(--danger);
}

.field__error:empty {
    display: none;
}

.form__status {
    font-size: var(--text-sm);
    min-height: 1.4em;
}

.form__status.is-ok {
    color: var(--success);
}

.form__status.is-error {
    color: var(--danger);
}

.form__status a {
    color: var(--accent-strong);
    font-weight: 600;
    text-decoration: underline;
}

.form__note {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* honeypot: ловушка спам-ботов — уводится за экран, но не через
   display:none (часть ботов проверяет способ скрытия); label и input
   прячутся вместе с обёрткой */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- панель «доставлено» (после успешной отправки в Telegram) ------------------
   Форма скрывается (hidden) и панель встаёт в её grid-колонку. Окружность и
   галочка «рисуются» штрихом через stroke-dashoffset, тексты — каскад fade-up.
   prefers-reduced-motion гасит всё глобальным блоком в конце файла. */
.form-success {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-3);
    max-width: 560px; /* как у .form */
    padding: var(--space-6) 0;
}

.form-success[hidden] {
    display: none; /* перекрывает display:grid выше */
}

.form-success__icon {
    width: 72px;
    height: 72px;
}

.form-success__circle {
    stroke: var(--success);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 157.1; /* длина окружности 2πr, r=25 */
    stroke-dashoffset: 157.1;
    animation: success-draw 0.6s var(--ease-out) forwards;
}

.form-success__check {
    stroke: var(--success);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 34; /* длина пути M17 29 l8 8 l15 -17 */
    stroke-dashoffset: 34;
    animation: success-draw 0.35s var(--ease-out) 0.55s forwards;
}

@keyframes success-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.form-success__title {
    font-weight: 700;
    font-size: 1.15rem;
    animation: fade-up 0.4s var(--ease-out) 0.15s backwards;
}

.form-success__text {
    color: var(--ink-muted);
    animation: fade-up 0.4s var(--ease-out) 0.3s backwards;
}

.form-success__phone {
    color: var(--accent-strong);
    font-weight: 600;
    text-decoration: underline;
    animation: fade-up 0.4s var(--ease-out) 0.4s backwards;
}

.form-success__again {
    margin-top: var(--space-2);
    animation: fade-up 0.4s var(--ease-out) 0.5s backwards;
}

/* --- прямые контакты ------------------------------------------------------------ */
.contact__aside {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.contact-card {
    padding: var(--space-4) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    /* hover-подъём (2026-10-25, по мотивам adas-trade.uz, заказчик):
       только мышь — на тач :hover залипает (гейт hover: hover) */
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
    .contact-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card);
    }
}

.contact-card__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.contact-card__phone {
    display: inline-block;
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
    letter-spacing: 0.01em;
    transition: color 0.3s var(--ease);
}

.contact-card__phone:hover {
    color: var(--accent-strong);
}

.contact-card__mail {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: 0.95rem;
    color: var(--accent-strong);
    word-break: break-all;
    transition: color 0.3s var(--ease);
}

.contact-card__mail:hover {
    color: var(--accent);
}

.contact-card__value {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink);
}

/* адрес офиса (заказчик, 2026-10-26): карточка стала ссылкой на Google
   Maps — цвет чернильный, hover акцент + draw-подчёркивание (в блоке
   АНИМАЦИИ адрес добавлен в link-draw-группу телефона/почты) */
.contact-card__address {
    text-decoration: none;
    color: var(--ink);
    transition: color 0.2s var(--ease);
}

.contact-card__address:hover {
    color: var(--accent-strong);
}

.contact-card__value .ico {
    margin-top: 0.25em;
    color: var(--ink-muted);
}

/* метка-пометка .todo-mark для черновых данных удалена (заказчик 2026-10-24):
   последние использования (адрес, реквизиты) убраны из HTML — правило мёртвое */

/* ================================ КАЛЬКУЛЯТОР ============================== */

/* --- вкладки: пилюли по паттерну чипов, активная залита акцентом --------------
   Без JS вкладки скрыты, обе панели сложены стопкой (деградация). С JS
   показана только активная панель — класс is-active переключает main.js. */
.calc__tabs {
    display: none;
}

.js .calc__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.calc__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* touch-цель */
    padding: var(--space-1) var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--ink); /* как у кнопок групп (заказчик 2026-10-27: весь текст кнопок — единый) */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
        color 0.2s var(--ease);
}

.calc__tab:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.calc__tab[aria-selected='true'] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--btn-accent-ink);
}

.calc__panel {
    margin-top: var(--space-6);
}

.js .calc__panel:not(.is-active) {
    display: none;
}

/* --- панель «Расчёт платежей»: форма и карточка результатов -------------------
   Поля — общие .field/.input из секции контактов; строки результатов — mono-
   числами, акцентные итоги — accent-strong, самый крупный — display-шрифтом. */
.calc__form {
    display: grid;
    gap: var(--space-4);
}

/* подсказка «только цифры» ПОД КОНКРЕТНЫМ полем расчёта (заказчик,
   2026-10-26 — было: один слот под всей формой; образец — слот ошибок
   телефона): красная, xs, появляется при попытке ввести мусор; пустая —
   скрыта (вёрстка не резервирует место); зазор сверху — grid-gap .field. */
.calc__hint {
    min-height: 1.2em;
    font-size: var(--text-xs);
    color: var(--danger);
    margin: 0;
}

.calc__hint:empty {
    display: none;
}

.calc__result {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.calc__rows {
    display: grid;
    gap: var(--space-2);
}

.calc__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.calc__num {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

.calc__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-weight: 600;
}

.calc__total-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--accent-strong);
    white-space: nowrap;
}

.calc__grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.calc__grand-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
    color: var(--accent-strong);
    white-space: nowrap;
}

.calc__disclaimer {
    margin-top: var(--space-4);
    max-width: 62ch;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* --- панель «Валютный калькулятор»: селекты, обмен, результат ------------------
   Поля — общие .field/.input; native select минимален: appearance:none +
   svg-шеврон маской (цвет — токен, тема переключается сама). Кнопка обмена —
   44×44 touch. Результат — в общей карточке .calc__result: главная строка
   как итог платежей, курс и источник — вторыми строками. */
.calc__form--fx {
    grid-template-columns: 1fr; /* мобильная колонка: сумма → из → обмен → в */
}

.calc__swap {
    justify-self: center; /* в колонке — по центру ряда */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.calc__swap:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.calc__swap svg {
    width: 18px;
    height: 18px;
}

/* обёртка селекта: шеврон справа — svg-маской, цвет токеном (тем-зависим) */
.calc__select {
    position: relative;
    display: block;
}

.calc__select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--space-3);
    width: 10px;
    height: 6px;
    transform: translateY(-50%);
    background: var(--ink-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    pointer-events: none;
}

.input--select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: calc(var(--space-3) * 2 + 10px); /* место под шеврон */
}

/* селекты валют — «приборный» шрифт выбора языка (заказчик 2026-10-27:
   «используй тот же, который в выборе языка»): IBM Plex Mono 500 с
   трекингом, как у .lang-select__trigger; коды валют читаются как
   язык-коды ru/uz/en в шапке. Поле суммы остаётся sans — как поля
   платежей; моно — только «инструментальные» надписи */
.calc__select .input--select {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* результат конвертации: гл. строка — mono/accent-strong; is-pulse — тот же
   calc-pulse, что у grand-итога платежей */
.calc__fx-eq {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--accent-strong);
}

.calc__fx-eq.is-pulse {
    animation: calc-pulse 0.3s var(--ease-out);
}

.calc__fx-rate {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.calc__fx-note {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* --- панель «Поиск ставки»: виджет АТБ в карточке-рамке как contact-card ------
   Кросс-доменный iframe (tg.goldsoft.uz), высокий и скроллится внутри себя:
   высота фрейма фиксированная — 640px на мобильных, от 768px — 1000px
   (медиа-блок лежит рядом с компонентом, чтобы не трогать общий адаптив-раздел
   ниже). Якорь #calculator не прячется под sticky-шапкой — якоря всей страницы
   закрывает html { scroll-padding-top }. */
.calc__frame-wrap {
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.calc__frame {
    display: block;
    width: 100%;
    height: 640px;
    border: 0;
}

/* ≥768px: полям — две колонки, виджету — высота 1000px */
@media (min-width: 768px) {
    .calc__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* валютная форма — одним рядом: сумма → из → обмен → в */
    .calc__form--fx {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 44px minmax(0, 1.25fr);
    }

    .calc__swap {
        justify-self: stretch;
        align-self: end; /* на уровне полей ввода, под подписями */
    }

    .calc__frame {
        height: 1000px;
    }
}

/* подпись-источник виджета: инлайн-ссылка оформлена как в статусе формы —
   accent-strong + подчёркивание, текст приглушённый мелкий */
.calc__note {
    margin-top: var(--space-4);
    max-width: 62ch;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.calc__link {
    color: var(--accent-strong);
    font-weight: 600;
    text-decoration: underline;
}

/* ================================ ПОДВАЛ =================================== */

.site-footer {
    background: var(--ink);
    color: var(--paper);
    padding-top: var(--space-12);
}

.footer__grid {
    display: grid;
    gap: var(--space-8);
}

.footer__brand .logo {
    color: var(--paper);
}

.footer__tagline {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--footer-muted);
}

.footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
}

.footer__nav a {
    color: var(--footer-muted);
    transition: color 0.2s var(--ease);
}

.footer__nav a:hover {
    color: var(--footer-accent);
}

.footer__contacts {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.footer__contacts a {
    color: var(--paper);
    transition: color 0.2s var(--ease);
}

.footer__contacts a:hover {
    color: var(--footer-accent);
}

.footer__bottom {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-8);
    padding-block: var(--space-6);
    border-top: 1px solid var(--footer-line);
    font-size: var(--text-sm);
    color: var(--footer-muted);
}

/* ============================ СТРАНИЦА 404 ================================= */
/* Тематическая 404 «декларация не найдена» (заказчик, 2026-10-26): тот же
   канон — миллиметровка+зерно на body, токены тем, Times-заголовок (h2--brand),
   mono-eyebrow, тик-лист фактов, кнопки btn. Специфично для 404: код
   приборным Unbounded и штамп «Выпуск запрещён» (двойная рамка, поворот,
   danger; фон полупрозрачная бумага — читается поверх цифр). Страница
   noindex, языковые ссылки — на 404 соседних языков. Одна анимация —
   fade-up всего блока (гасится глобальным reduced-motion). */

.p404 {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
}

.p404__inner {
    width: 100%;
    max-width: 40rem;
    text-align: center;
    animation: fade-up 0.5s var(--ease-out) both;
}

.p404__logo {
    display: inline-flex;
    align-items: center;
    position: relative; /* якорь для абсолютного второго лого V3-стека */
    gap: var(--space-3);
}

.p404__logo-img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    border-radius: 8px;
    transition: opacity var(--theme-dur) var(--ease);
}

/* V3-стек лого (как в шапке): фон страницы — бумага/тема */
.p404__logo-img--on-dark {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

html[data-theme='dark'] .p404__logo-img--on-light {
    opacity: 0;
}

html[data-theme='dark'] .p404__logo-img--on-dark {
    opacity: 1;
}

.p404__logo-text {
    font-family: var(--font-brand); /* как .logo__text на главной */
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.p404__eyebrow {
    margin-top: var(--space-8);
}

.p404__code {
    position: relative;
    display: inline-block;
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(5.5rem, 22vw, 10rem);
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--ink);
}

/* штамп таможни: двойное кольцо (border + outline), наклон, danger;
   подложка бумаги 92% (ревью 2026-10-26: 82% + opacity давали ~3.4:1
   worst-case поверх тёмных цифр) — читается поверх кода без opacity */
.p404__stamp {
    position: absolute;
    right: -0.6em;
    bottom: 0.3em;
    padding: 0.3em 0.75em;
    font-family: var(--font-mono);
    font-size: clamp(0.68rem, 2.4vw, 0.92rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--danger);
    border: 2px solid currentColor;
    border-radius: 6px;
    outline: 1.5px solid currentColor;
    outline-offset: 3px;
    transform: rotate(-8deg);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
}

.p404__title {
    margin-top: var(--space-8);
}

.p404__lead {
    margin-top: var(--space-4);
    max-width: 42ch;
    margin-inline: auto;
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--ink-muted);
}

/* факты «декларации» — тик-лист по левому краю (чек-строки бланка) */
.p404__facts {
    margin-top: var(--space-6);
    text-align: left;
}

.p404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.p404__actions .btn {
    white-space: normal;
}

.p404__langs {
    display: flex;
    justify-content: center;
    align-items: center; /* ссылки выше (44px) — центрируем текущий-«пилюлю» */
    gap: var(--space-8); /* заказчик 2026-10-26: «чуть дальше» — было var(--space-5),
                            токена нет в шкале → gap падал в 0, языки слипались */
    margin-top: var(--space-12);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* touch-цель 44px, как у шапочного lang-switch (ревью 2026-10-26:
   было 17×27 — маловато для пальца); визуальный зазор не меняется */
.p404__langs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.5em;
    color: var(--ink-muted);
    transition: color 0.2s var(--ease);
}

.p404__langs span { /* текущий язык — не ссылка */
    font-weight: 600;
    color: var(--ink);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
}

.p404__langs a:hover,
.p404__langs a:focus-visible {
    color: var(--accent-strong);
}

@media (max-width: 559px) {
    .p404__logo-text { /* рядом с эмблемой не влезает — как в шапке */
        display: none;
    }

    .p404__stamp {
        right: -0.25em;
        bottom: 0.1em;
    }
}

/* ============================ REVEAL / ЗАГРУЗКА ============================ */

/* появление при скролле: работает только с JS (класс js на html);
   без JS все элементы сразу виды.
   «Плавность» (заказчик 2026-10-27, референс adas-trade.uz): вход длиннее
   и глубже — 0.7с и 24px вместо 0.45с/12px; секции «плывут», а не всплывают */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* закрытие формы перед панелью «доставлено»: правило стоит ПОСЛЕ .is-visible
   нарочно — гасит видимый reveal-стейт, фейд быстрее (0.25с) и без задержки */
.js .reveal.is-closing {
    opacity: 0;
    transform: scale(0.985);
    transition-duration: 0.25s;
    transition-delay: 0ms;
}

/* hero-стаггер при загрузке: бровка → H1 → дескриптор → CTA, шаг 90ms */
.js .fade-up {
    opacity: 0;
    animation: fade-up 0.5s var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================ АДАПТИВ (mobile-first) ====================== */

/* ≥560px: текст лого возвращается (номер телефона в шапке — только с 768px,
   чтобы логотип + телефон + контролы не разъезжались на 560–767px) */
@media (min-width: 560px) {
    .logo__text {
        display: inline;
    }

    .lang-switch {
        --lang-w: 100px;
    }
}

/* ≥640px: карточки услуг в 2 колонки */
@media (min-width: 640px) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* карточки «О компании» — всегда одна широкая колонка (заказчик
       2026-10-24: в узких 2/3-колоночных текст выходил за край столба) */
}

/* ≥768px: кнопки повыше */
@media (min-width: 768px) {
    :root {
        --header-h: 76px;
    }

    .btn {
        min-height: 48px;
    }

    .header__phone span {
        display: inline;
    }

    .footer__grid {
        grid-template-columns: auto 1fr auto;
        align-items: start;
    }

    .footer__bottom {
        grid-auto-flow: column;
        gap: var(--space-6);
        justify-content: space-between;
        align-items: baseline;
    }
}

/* ≥900px: о компании 2 колонки, контакты 2 колонки */
@media (min-width: 900px) {
    .about__grid {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        align-items: start;
    }

    /* карточки «О компании» остаются одной широкой колонкой — см. комментарий
       в блоке ≥600px; 3-колоночная раскладка убрана (текст не влезал) */

    .pricing__panel {
        padding: var(--space-12) var(--space-8);
    }

    .contact__grid {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        align-items: start;
    }
}

/* ≥1024px: горизонтальная навигация + hero-схема, услуги в 3 колонки */
@media (min-width: 1024px) {
    :root {
        --header-h: 80px;
    }

    .nav {
        position: static;
        display: block;
        max-height: none;
        overflow: visible;
        padding: 0;
        background: none;
        border-bottom: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .nav__list {
        display: flex;
        gap: var(--space-4);
    }

    .nav__link {
        padding: var(--space-1) 0;
        border-bottom: none;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--ink-muted);
        transition: color 0.3s var(--ease); /* плавность 2026-10-27 */
    }

    .nav__link:hover {
        color: var(--accent-strong);
    }

    .nav__footer {
        display: none;
    }

    .burger,
    .nav-overlay {
        display: none;
    }

    body.no-scroll {
        overflow: auto;
    }

    .header__actions {
        margin-left: 0;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        align-items: center;
        gap: var(--space-12);
    }

    .hero__figure {
        display: block;
    }

    .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 1024–1279px: телефон в шапке — только иконка (номер не влезает после
   трёхъязычной пилюли; полный номер — ≥1280, см. блок ниже) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .header__phone span {
        display: none;
    }
}

/* ≥1440px: ограничение ширины контента уже задано 1200px — только воздух */
@media (min-width: 1440px) {
    .hero__copy {
        max-width: 680px;
    }
}

/* ========================= АНИМАЦИИ (2026-10-25) ===========================
   По мотивам adas-trade.uz (инвентарь qa/adas-animations.md; заказчик,
   2026-10-25), в нашу манеру «точного инструмента»: чистый CSS, токены
   --ease/--ease-out, тень из shadow-словаря, без библиотек.
   JS-контракт (main.js): .section-in — секция вошла в экран (once);
   .is-visible — существующий reveal; --i — индекс тик-марки (кэп 10);
   .is-pulse — «пересчёт» итога калькулятора. Старт-состояния живут только
   под html.js: без JS все линии статичны и видны сразу; при
   prefers-reduced-motion глобальный блок ниже снимает старт-состояния. */

/* --- 1. «Прочерчивание» линий (line-draw) ------------------------------------ */

/* хайрлайн-разделитель: прочерчивается слева направо, когда секция вошла
   в экран (.section-in ставит main.js); акцентный тик «выстреливает»
   следом (scale-pop от левого края) */
.js main > section + section::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--ease-out) 0.1s;
}

.js main > section + section.section-in::before {
    transform: scaleX(1);
}

.js main > section + section::after {
    transform: scale(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out) 0.25s;
}

.js main > section + section.section-in::after {
    transform: scale(1);
}

/* вертикальное правило головы секции: прочерчивается сверху вниз вместе
   с reveal головы (.is-visible стоит на самом .section__head.reveal) */
.js .section__head::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.6s var(--ease-out) 0.15s;
}

.js .section__head.is-visible::before {
    transform: scaleY(1);
}

/* тик-марки списков: каскадный pop — задержка 55мс × --i (индекс ставит
   main.js), триггер — .is-visible на предке (панель стоимости .reveal) */
.js .tick-list li::before {
    transform: scale(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms);
}

.js .is-visible .tick-list li::before {
    transform: scale(1);
}

/* --- 2. hover-подъём карточек: JS-режим ---------------------------------------
   В JS-режиме transform: translateY(0) из .js .reveal.is-visible перебивает
   обычные :hover-правила карточек — поэтому селекторы здесь с .js и стоят
   ниже reveal-блока по каскаду. Переход переобъявлен: fade входа сохраняет
   stagger (--reveal-delay оставлен только opacity), transform и тень —
   быстрые и без задержки: подъём и возврат откликаются мгновенно. */
@media (hover: hover) {
    .js .value-card,
    .js .service-card,
    .js .pricing__panel {
        transition:
            opacity 0.7s var(--ease-out) var(--reveal-delay, 0ms),
            transform 0.35s var(--ease-out),
            box-shadow 0.35s var(--ease);
    }

    .js .value-card:hover,
    .js .service-card:hover,
    .js .pricing__panel:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card);
    }
}

/* --- 3. link-draw: подчёркивание-прочерчивание текстовых ссылок --------------
   Линия 1px в currentColor рисуется слева направо при hover (мышь) и
   :focus-visible (клавиатура). Кнопки и переключатели не затронуты;
   ссылкам со статичным text-decoration (статусы формы, инлайн-ссылки
   в тексте) draw не добавлялся — подчёркивание уже несёт аффорданс,
   вторая линия не нужна (наш стиль, решение 2026-10-25) */
.footer__nav a,
.contact-card__phone,
.contact-card__mail,
.contact-card__address {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0% 1px;
    transition: background-size 0.5s var(--ease-out), color 0.3s var(--ease);
}

.footer__nav a:focus-visible,
.contact-card__phone:focus-visible,
.contact-card__mail:focus-visible,
.contact-card__address:focus-visible {
    background-size: 100% 1px;
}

@media (hover: hover) {
    .footer__nav a:hover,
    .contact-card__phone:hover,
    .contact-card__mail:hover,
    .contact-card__address:hover {
        background-size: 100% 1px;
    }
}

/* --- 4. «пересчёт прибора»: grand-итог калькулятора коротко вздрагивает ------
   Класс .is-pulse ставит main.js при смене значения (снимает по
   animationend): лёгкий fade + сдвиг 2px, 0.3с — «отклик табло».
   prefers-reduced-motion гасится глобальным блоком ниже. */
.calc__grand-num.is-pulse {
    animation: calc-pulse 0.3s var(--ease-out);
}

@keyframes calc-pulse {
    from {
        opacity: 0.55;
        transform: translateY(2px);
    }
}

/* ====================== ПРЕДПОЧТЕНИЯ ДОСТУПНОСТИ ========================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    /* контент сразу видим: reveal-механика не важна */
    .js .reveal,
    .js .fade-up {
        opacity: 1;
        transform: none;
        animation: none;
    }

    /* GlideSelect: меню появляется без scale-pop (glide уже погашен выше) */
    .lang-select__menu {
        transform: none !important;
    }

    /* АНИМАЦИИ 2026-10-25 (по мотивам adas-trade.uz, заказчик): старт-состояния
       line-draw сняты — хайрлайны, правила голов и тик-марки видны сразу,
       статично; «вздрагивание» итога калькулятора не играет (класс .is-pulse
       main.js всё равно ставит) */
    main > section + section::before,
    main > section + section::after,
    .section__head::before,
    .tick-list li::before {
        transform: none !important;
    }

    .calc__grand-num.is-pulse {
        animation: none !important;
    }

    /* BellToggle-порт: нажатие чипа без сжатия (распахивание панели
       не запускается main.js при reduce) */
    .js .chip--link[data-pressed] {
        transform: none;
    }
}