/* ==========================================================================
   farkop-krasnodar · app.css — продакшен-сборка
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Порядок: fonts → tokens → base → components → sections
   Руками не правим.
   ========================================================================== */


/* ===== fonts.css ===== */
/* ==========================================================================
   farkop-krasnodar · fonts.css
   Локальные переменные шрифты. Файл пишем руками — ds-import его не трогает,
   но подключает первым в app.css.

   Дизайн-система тянет 3 семейства через @import Google Fonts (12 начертаний).
   Здесь то же самое, но: три файла вместо двенадцати (переменная ось wght),
   локально, кириллица + латиница + ₽ № ″ ± × · → ✓, font-display: swap.
   Сборка файлов: _tools/fonts-build.sh

   Отклонение от бюджета ТЗ зафиксировано осознанно: семейств три, а не два.
   Файлов — три из четырёх разрешённых, суммарно ~138 КБ. Решение по составу
   семейств за дизайнером (вопрос №3 в docs/handoff/QUESTIONS-2026-07-30.md).
   ========================================================================== */

/* Onest — заголовки, кнопки, лейблы, логотип. Ось 400–800. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/farkop/fonts/onest-var.woff2") format("woff2");
}

/* Golos Text — основной текст, лиды, подписи, сноски. Ось 400–700. */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/farkop/fonts/golos-text-var.woff2") format("woff2");
}

/* JetBrains Mono — цены, нагрузки, толщина стали, параметры, кикеры.
   Табличные цифры включены в subset (tnum), чтобы колонки цен не «дышали». */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/farkop/fonts/jetbrains-mono-var.woff2") format("woff2");
}

:root {
  --fk-font-display: "Onest", "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fk-font-body: "Golos Text", "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fk-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fk-font-weight-regular: 400;
  --fk-font-weight-medium: 500;
  --fk-font-weight-semibold: 600;
  --fk-font-weight-bold: 700;
  --fk-font-weight-extrabold: 800;
}

/* ===== tokens.css ===== */
/* ==========================================================================
   farkop-krasnodar · tokens.css
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Источник: _ds/tokens/colors.css, _ds/tokens/typography.css, _ds/tokens/spacing.css, _ds/tokens/shape.css, _ds/tokens/motion.css, _ds/tokens/layout.css, _ds/tokens/patterns.css
   Руками не правим — правки затрутся при следующем импорте.
   Дизайн-система: claude.ai/design → «Farkop Krasnodar Design System»
   ========================================================================== */

/* --- добавлено импортом: базовая тема ----------------------------- */
:root { color-scheme: light; }

/* --- tokens/colors.css --------------------------------------------------- */
/* Палитра «Сталь и доверие». Светлая тема — основная и единственная по умолчанию:
   белый лист, холодные стальные нейтралы, синий как цвет доверия, один тёплый CTA.
   Тёмный навигационный/фото-блок — врезка через .fk-invert (алиас .fk-invert).
   Никогда не чистый #000 на больших площадях. */
:root {
  /* Сталь — нейтральная шкала */
  --fk-c-ink-900: #131923;
  --fk-c-ink-800: #1F2833;
  --fk-c-ink-700: #313B48;
  --fk-c-ink-600: #45505F;
  --fk-c-ink-500: #5B6878;
  --fk-c-ink-450: #667485;
  --fk-c-ink-400: #7D8B9B;
  --fk-c-ink-300: #AAB7C5;
  --fk-c-ink-200: #D2DBE4;
  --fk-c-ink-100: #E4EAF1;
  --fk-c-ink-050: #F1F5F9;
  --fk-c-ink-025: #F7FAFC;
  --fk-c-white: #FFFFFF;

  /* Доверие — основной синий */
  --fk-c-blue-050: #EEF4FD;
  --fk-c-blue-100: #DAE7FA;
  --fk-c-blue-200: #B4CDF3;
  --fk-c-blue-300: #7FA9E6;
  --fk-c-blue-400: #3F7FD4;
  --fk-c-blue-500: #1B62C7;
  --fk-c-blue-600: #14509F;
  --fk-c-blue-700: #103F7D;
  --fk-c-blue-900: #0A2645;

  /* Действие — тёплый янтарь. Только «денежная» кнопка и статусы, не декор. */
  --fk-c-amber-050: #FFF6E6;
  --fk-c-amber-100: #FFE3B0;
  --fk-c-amber-300: #FFC961;
  --fk-c-amber-400: #FCAE1E;
  --fk-c-amber-500: #F5920B;
  --fk-c-amber-600: #D9760A;
  --fk-c-amber-700: #A85705;
  --fk-c-amber-800: #8A4703;

  /* Результат */
  --fk-c-green-050: #E7F6EF;
  --fk-c-green-200: #A8DEC6;
  --fk-c-green-500: #12B981;
  --fk-c-green-600: #0B8A5F;
  --fk-c-red-050: #FDECEA;
  --fk-c-red-200: #F4BDB7;
  --fk-c-red-500: #E5483C;
  --fk-c-red-600: #D42B1F;

  --fk-c-brand-whatsapp: #25D366;
  --fk-c-brand-telegram: #229ED9;

  /* Семантика — светлая тема */
  --fk-bg-base: var(--fk-c-white);
  --fk-bg-surface: var(--fk-c-ink-025);
  --fk-bg-elevated: var(--fk-c-ink-050);
  --fk-bg-sunken: var(--fk-c-ink-100);
  --fk-border-default: var(--fk-c-ink-200);
  --fk-border-strong: var(--fk-c-ink-300);
  --fk-text-primary: var(--fk-c-ink-900);
  --fk-text-secondary: var(--fk-c-ink-600);
  --fk-text-muted: var(--fk-c-ink-450);
  --fk-text-link: var(--fk-c-blue-600);
  --fk-text-link-hover: var(--fk-c-blue-700);

  /* Синий = структурный акцент: иконки, ссылки, выбранное состояние, засечки */
  --fk-accent-primary: var(--fk-c-blue-500);
  --fk-accent-primary-hover: var(--fk-c-blue-600);
  --fk-accent-primary-press: var(--fk-c-blue-700);
  --fk-text-on-accent: var(--fk-c-white);

  /* Янтарь = ровно одна главная кнопка на экране */
  --fk-accent-cta: var(--fk-c-amber-500);
  --fk-accent-cta-hover: var(--fk-c-amber-600);
  --fk-accent-cta-press: var(--fk-c-amber-700);
  --fk-text-on-cta: var(--fk-c-ink-900);

  --fk-accent-warn: var(--fk-c-amber-800);
  --fk-text-faint: var(--fk-c-ink-400); /* только декор: размеры на плейсхолдерах */
  --fk-accent-info: var(--fk-c-blue-500);
  --fk-state-success: var(--fk-c-green-600);
  --fk-state-error: var(--fk-c-red-600);

  /* Подложки и рамки под бейджи, callout-ы, выбранные чипы */
  --fk-tint-accent: var(--fk-c-blue-050);
  --fk-tint-info: var(--fk-c-blue-050);
  --fk-tint-warn: var(--fk-c-amber-050);
  --fk-tint-success: var(--fk-c-green-050);
  --fk-tint-error: var(--fk-c-red-050);
  --fk-line-accent: var(--fk-c-blue-200);
  --fk-line-info: var(--fk-c-blue-200);
  --fk-line-warn: var(--fk-c-amber-100);
  --fk-line-success: var(--fk-c-green-200);
  --fk-line-error: var(--fk-c-red-200);

  /* Прозрачность — ровно четыре места: шапка, стеклянная карточка на фото, скрим, подпись на снимке */
  --fk-header-bg: rgba(255, 255, 255, .9); /* @kind color */
  --fk-glass-panel: rgba(255, 255, 255, .84); /* @kind color */
  --fk-overlay-scrim: rgba(19, 25, 35, .55); /* @kind color */
  --fk-scrim-bottom: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.94)); /* @kind color */
  --fk-hero-scrim: linear-gradient(180deg, rgba(10,38,69,.30) 0%, rgba(10,38,69,.72) 55%, rgba(10,38,69,.94) 100%); /* @kind color */
  --fk-shimmer-sheen: rgba(255, 255, 255, .7); /* @kind color */
}
/* Тёмная врезка на глубоком синем: hero поверх фото, футер, «ночные» блоки.
   Ремапит только семантический слой — все компоненты работают внутри без правок. */
.fk-invert {
  --fk-bg-base: var(--fk-c-blue-900);
  --fk-bg-surface: #0E3055;
  --fk-bg-elevated: #123A63;
  --fk-bg-sunken: #071D36;
  --fk-border-default: #1C4877;
  --fk-border-strong: #2B5D95;
  --fk-text-primary: #F2F7FD;
  --fk-text-secondary: #B7CADF;
  --fk-text-muted: #A2B8D2;
  --fk-text-faint: #8AA2BE;
  --fk-text-link: #8FC0FF;
  --fk-text-link-hover: #C2DCFF;
  --fk-accent-primary: #5B9BF0;
  --fk-accent-primary-hover: #85B6F7;
  --fk-accent-primary-press: #3F82DA;
  --fk-text-on-accent: var(--fk-c-blue-900);
  --fk-accent-cta: var(--fk-c-amber-400);
  --fk-accent-cta-hover: var(--fk-c-amber-300);
  --fk-accent-cta-press: var(--fk-c-amber-500);
  --fk-accent-warn: var(--fk-c-amber-300);
  --fk-accent-info: #5B9BF0;
  --fk-state-success: #25C48D;
  --fk-state-error: #FF8577;
  --fk-tint-accent: rgba(91, 155, 240, .16);
  --fk-tint-info: rgba(91, 155, 240, .16);
  --fk-tint-warn: rgba(252, 174, 30, .16);
  --fk-tint-success: rgba(37, 196, 141, .16);
  --fk-tint-error: rgba(255, 133, 119, .16);
  --fk-line-accent: rgba(91, 155, 240, .5);
  --fk-line-info: rgba(91, 155, 240, .5);
  --fk-line-warn: rgba(252, 174, 30, .5);
  --fk-line-success: rgba(37, 196, 141, .5);
  --fk-line-error: rgba(255, 133, 119, .5);
  --fk-header-bg: rgba(10, 38, 69, .9);
  --fk-glass-panel: rgba(11, 42, 77, .78);
  --fk-overlay-scrim: rgba(4, 17, 32, .72);
  --fk-scrim-bottom: linear-gradient(180deg, rgba(7,29,54,0), rgba(7,29,54,.94)); /* @kind color */
  --fk-shimmer-sheen: rgba(255, 255, 255, .1);
  --fk-pattern-line: rgba(150, 190, 240, .55);
  --fk-focus-ring-color: #F2F7FD;
  color: var(--fk-text-primary);
  background: var(--fk-bg-base);
  color-scheme: dark;
}

/* --- tokens/typography.css --------------------------------------------------- */
/* Fluid 375 -> 1440. Values from spec §10; mobile floor / desktop ceiling are exact. */
:root {
  --fk-fs-display: clamp(34px, 20.62px + 3.568vw, 72px);
  --fk-fs-h1: clamp(28px, 20.96px + 1.878vw, 48px);
  --fk-fs-h2: clamp(24px, 19.77px + 1.127vw, 36px);
  --fk-fs-h3: clamp(20px, 17.89px + 0.563vw, 26px);
  --fk-fs-body-l: clamp(17px, 16.65px + 0.094vw, 18px);
  --fk-fs-body: 16px;
  --fk-fs-caption: 14px;
  --fk-fs-micro: 12px;

  --fk-lh-display: 1.05;
  --fk-lh-h1: 1.1;
  --fk-lh-h2: 1.15;
  --fk-lh-h3: 1.25;
  --fk-lh-body-l: 1.55;
  --fk-lh-body: 1.6;
  --fk-lh-caption: 1.45;
  --fk-lh-micro: 1.4;

  --fk-tracking-tight: -0.01em;
  --fk-tracking-normal: 0;
  --fk-tracking-upper: 0.02em;
  --fk-tracking-wide: 0.06em;

  /* Composite shorthands — `font: var(--fk-text-h2)` */
  --fk-text-display: var(--fk-font-weight-extrabold) var(--fk-fs-display) / var(--fk-lh-display) var(--fk-font-display);
  --fk-text-h1: var(--fk-font-weight-extrabold) var(--fk-fs-h1) / var(--fk-lh-h1) var(--fk-font-display);
  --fk-text-h2: var(--fk-font-weight-bold) var(--fk-fs-h2) / var(--fk-lh-h2) var(--fk-font-display);
  --fk-text-h3: var(--fk-font-weight-bold) var(--fk-fs-h3) / var(--fk-lh-h3) var(--fk-font-display);
  --fk-text-body-l: var(--fk-font-weight-regular) var(--fk-fs-body-l) / var(--fk-lh-body-l) var(--fk-font-body);
  --fk-text-body: var(--fk-font-weight-regular) var(--fk-fs-body) / var(--fk-lh-body) var(--fk-font-body);
  --fk-text-body-strong: var(--fk-font-weight-semibold) var(--fk-fs-body) / var(--fk-lh-body) var(--fk-font-body);
  --fk-text-caption: var(--fk-font-weight-regular) var(--fk-fs-caption) / var(--fk-lh-caption) var(--fk-font-body);
  --fk-text-micro: var(--fk-font-weight-regular) var(--fk-fs-micro) / var(--fk-lh-micro) var(--fk-font-body);
  --fk-text-label: var(--fk-font-weight-bold) var(--fk-fs-caption) / 1.2 var(--fk-font-display);
  --fk-text-button: var(--fk-font-weight-bold) 15px / 1 var(--fk-font-display);
  /* Technical / numeric: prices, loads, steel gauges, params. Always tabular. */
  --fk-text-data: var(--fk-font-weight-medium) var(--fk-fs-body) / 1.4 var(--fk-font-mono);
  --fk-text-data-s: var(--fk-font-weight-medium) var(--fk-fs-caption) / 1.4 var(--fk-font-mono);
  --fk-text-kicker: var(--fk-font-weight-bold) var(--fk-fs-micro) / 1.2 var(--fk-font-mono);
  --fk-text-metric: var(--fk-font-weight-bold) clamp(40px, 24px + 4.2vw, 72px) / 1 var(--fk-font-display);

  --fk-measure: 68ch; /* 60-75 characters */
  --fk-measure-narrow: 44ch;
}

/* --- tokens/spacing.css --------------------------------------------------- */
/* 4px base. Only these steps exist. */
:root {
  --fk-space-0: 0px;
  --fk-space-4: 4px;
  --fk-space-8: 8px;
  --fk-space-12: 12px;
  --fk-space-16: 16px;
  --fk-space-24: 24px;
  --fk-space-32: 32px;
  --fk-space-48: 48px;
  --fk-space-64: 64px;
  --fk-space-96: 96px;
  --fk-space-128: 128px;

  /* Semantic */
  --fk-gap-inline: var(--fk-space-8);
  --fk-gap-stack: var(--fk-space-16);
  --fk-gap-card: var(--fk-space-16);
  --fk-gap-grid: var(--fk-space-24);
  --fk-pad-card: var(--fk-space-24);
  --fk-pad-card-s: var(--fk-space-16);
  --fk-pad-sheet: var(--fk-space-24);
  --fk-section-y: clamp(48px, 24px + 5vw, 128px);
  --fk-section-y-tight: clamp(32px, 16px + 3vw, 64px);
  --fk-block-gap: clamp(24px, 12px + 2vw, 48px);
}

/* --- tokens/shape.css --------------------------------------------------- */
/* Radii stop at 8px. Depth comes from 1px borders + background steps, not shadow. */
:root {
  --fk-radius-0: 0px;
  --fk-radius-4: 4px;
  --fk-radius-8: 8px;
  --fk-radius-button: var(--fk-radius-4);
  --fk-radius-input: var(--fk-radius-4);
  --fk-radius-card: var(--fk-radius-8);
  --fk-radius-badge: var(--fk-radius-4);
  --fk-radius-pill: 999px; /* chips / filter tabs only */

  --fk-border-w: 1px;
  --fk-border-w-strong: 2px;
  --fk-border-hairline: 1px solid var(--fk-border-default); /* @kind other */
  --fk-border-accent: 2px solid var(--fk-accent-primary); /* @kind other */
  --fk-border-emphasis: 1px solid var(--fk-border-strong); /* @kind other */

  /* Only two shadows exist in the whole system. */
  --fk-shadow-modal: 0 24px 60px rgba(10, 38, 69, .18);
  --fk-shadow-sticky: 0 -6px 20px rgba(10, 38, 69, .10);

  --fk-focus-ring-color: var(--fk-accent-primary);
  --fk-focus-ring: var(--fk-border-w-strong) solid var(--fk-focus-ring-color); /* @kind other */
  --fk-focus-offset: 2px;

  /* The single decorative device: corner ticks (уголковые засечки), 12px legs. */
  --fk-tick-len: 12px;
  --fk-tick-w: 1px; /* @kind spacing */
  --fk-tick-color: var(--fk-accent-primary);
}

/* --- tokens/motion.css --------------------------------------------------- */
/* 150-250ms, ease-out. Nothing longer than 400ms exists in this system. */
:root {
  --fk-dur-fast: 150ms;
  --fk-dur-base: 200ms;
  --fk-dur-slow: 250ms;
  --fk-ease-out: cubic-bezier(.22, .61, .36, 1);
  --fk-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --fk-transition-color: color var(--fk-dur-fast) var(--fk-ease-out), background-color var(--fk-dur-fast) var(--fk-ease-out), border-color var(--fk-dur-fast) var(--fk-ease-out);
  --fk-transition-shape: transform var(--fk-dur-base) var(--fk-ease-out), opacity var(--fk-dur-base) var(--fk-ease-out);
  --fk-enter-shift: 8px; /* section reveal: fade + 8px, never more */
}
@media (prefers-reduced-motion: reduce) {
  :root { --fk-dur-fast: 1ms; --fk-dur-base: 1ms; --fk-dur-slow: 1ms; --fk-enter-shift: 0px; }
}

/* --- tokens/layout.css --------------------------------------------------- */
:root {
  --fk-container-max: 1280px;
  --fk-container-narrow: 880px;
  --fk-grid-cols: 12;
  --fk-gutter: 24px;
  --fk-page-x: 64px;

  --fk-header-h: 72px;
  --fk-header-h-compact: 56px;
  --fk-quickbar-h: 56px;
  --fk-fixed-max: 112px; /* header + quickbar combined ceiling */

  --fk-tap-min: 44px;
  --fk-tap-cta: 48px;
  --fk-control-h-l: 52px;
  --fk-control-h-m: 44px;
  --fk-control-h-s: 36px;

  --fk-safe-b: env(safe-area-inset-bottom, 0px);
  --fk-z-header: 100;
  --fk-z-quickbar: 90;
  --fk-z-sheet: 200;
  --fk-z-modal: 300;
  --fk-z-toast: 400;
}
@media (max-width: 1023px) { :root { --fk-grid-cols: 8; --fk-gutter: 16px; --fk-page-x: 32px; } }
@media (max-width: 767px) { :root { --fk-grid-cols: 4; --fk-gutter: 12px; --fk-page-x: 16px; --fk-header-h: 56px; --fk-header-h-compact: 56px; } }

/* --- tokens/patterns.css --------------------------------------------------- */
/* Technical drawing underlays. Never above 8% opacity, never behind body copy. */
:root {
  --fk-pattern-opacity: .10; /* @kind other */
  --fk-pattern-line: rgba(20, 60, 110, .38); /* @kind color */
  /* Millimeter paper: 8px fine grid + 40px major grid */
  --fk-pattern-graph: repeating-linear-gradient(0deg, var(--fk-pattern-line) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, var(--fk-pattern-line) 0 1px, transparent 1px 8px); /* @kind other */
  --fk-pattern-graph-major: repeating-linear-gradient(0deg, var(--fk-pattern-line) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, var(--fk-pattern-line) 0 1px, transparent 1px 40px); /* @kind other */
  /* Weld-seam hatch, 45° */
  --fk-pattern-hatch: repeating-linear-gradient(45deg, var(--fk-pattern-line) 0 1px, transparent 1px 6px); /* @kind other */
  /* Dimension ruler ticks */
  --fk-pattern-ruler: repeating-linear-gradient(90deg, var(--fk-pattern-line) 0 1px, transparent 1px 12px); /* @kind other */
}

/* ===== base.css ===== */
/* ==========================================================================
   farkop-krasnodar · base.css
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Источник: _ds/css/base.css, _ds/css/utilities.css
   Руками не правим — правки затрутся при следующем импорте.
   Дизайн-система: claude.ai/design → «Farkop Krasnodar Design System»
   ========================================================================== */

/* --- css/base.css --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fk-bg-base);color:var(--fk-text-primary);font:var(--fk-text-body);font-family:var(--fk-font-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--fk-font-display);color:var(--fk-text-primary);text-wrap:balance}
h1{font:var(--fk-text-h1)}
h2{font:var(--fk-text-h2)}
h3{font:var(--fk-text-h3)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:var(--fk-text-link);text-decoration:none;text-underline-offset:3px;transition:var(--fk-transition-color)}
a:hover{color:var(--fk-text-link-hover);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--fk-focus-ring);outline-offset:var(--fk-focus-offset)}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
::selection{background:var(--fk-accent-primary);color:var(--fk-text-on-accent)}
:where(input,textarea)::placeholder{color:var(--fk-text-muted)}

/* --- css/utilities.css --------------------------------------------------- */
.fk-container{width:100%;max-width:var(--fk-container-max);margin-inline:auto;padding-inline:var(--fk-page-x)}
.fk-container--narrow{max-width:var(--fk-container-narrow)}
.fk-section{padding-block:var(--fk-section-y);position:relative;background:var(--fk-bg-base)}
.fk-section--tight{padding-block:var(--fk-section-y-tight)}
.fk-section--surface{background:var(--fk-bg-surface)}
.fk-grid{display:grid;gap:var(--fk-gap-grid)}
.fk-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fk-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fk-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fk-row{display:flex;align-items:center;gap:var(--fk-gap-inline)}
.fk-stack{display:flex;flex-direction:column;gap:var(--fk-gap-stack)}
.fk-kicker{font:var(--fk-text-kicker);letter-spacing:var(--fk-tracking-wide);text-transform:uppercase;color:var(--fk-accent-primary)}
.fk-kicker--muted{color:var(--fk-text-muted)}
.fk-lead{font:var(--fk-text-body-l);color:var(--fk-text-secondary);max-width:var(--fk-measure)}
.fk-data{font:var(--fk-text-data);font-variant-numeric:tabular-nums}
.fk-micro{font:var(--fk-text-micro);color:var(--fk-text-secondary)}
.fk-prose{max-width:var(--fk-measure);color:var(--fk-text-secondary);font:var(--fk-text-body-l);display:flex;flex-direction:column;gap:var(--fk-space-16)}
.fk-prose h2{margin-top:var(--fk-space-16)}
.fk-prose h3{margin-top:var(--fk-space-8)}
.fk-prose ul{display:flex;flex-direction:column;gap:var(--fk-space-8)}
.fk-prose li{padding-left:var(--fk-space-16);position:relative}
.fk-prose li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--fk-accent-primary)}
/* Single decorative device: corner ticks. Apply to any bordered box. */
.fk-ticks{position:relative}
.fk-ticks::before,.fk-ticks::after{content:"";position:absolute;width:var(--fk-tick-len);height:var(--fk-tick-len);pointer-events:none}
.fk-ticks::before{top:-1px;left:-1px;border-top:var(--fk-tick-w) solid var(--fk-tick-color);border-left:var(--fk-tick-w) solid var(--fk-tick-color)}
.fk-ticks::after{bottom:-1px;right:-1px;border-bottom:var(--fk-tick-w) solid var(--fk-tick-color);border-right:var(--fk-tick-w) solid var(--fk-tick-color)}
.fk-pattern{position:absolute;inset:0;background-image:var(--fk-pattern-graph);opacity:var(--fk-pattern-opacity);pointer-events:none}
.fk-pattern--major{background-image:var(--fk-pattern-graph-major)}
.fk-pattern--hatch{background-image:var(--fk-pattern-hatch)}
.fk-pattern--ruler{background-image:var(--fk-pattern-ruler);inset:auto 0 0 0;height:8px;opacity:.25}
.fk-hr{height:1px;background:var(--fk-border-default);border:0;margin:0}
.fk-vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fk-scroller{display:flex;gap:var(--fk-gap-card);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--fk-page-x);margin-inline:calc(var(--fk-page-x) * -1)}
.fk-scroller::-webkit-scrollbar{display:none}
.fk-scroller>*{scroll-snap-align:start;flex:0 0 auto}
.fk-reveal{opacity:0;transform:translateY(var(--fk-enter-shift));animation:fk-reveal var(--fk-dur-slow) var(--fk-ease-out) forwards}
@keyframes fk-reveal{to{opacity:1;transform:none}}
@media (max-width:1023px){.fk-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.fk-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.fk-grid--2,.fk-grid--3,.fk-grid--4{grid-template-columns:minmax(0,1fr)}}

/* ===== components/buttons.css ===== */
/* ==========================================================================
   farkop-krasnodar · components/buttons.css
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Источник: _ds/css/buttons.css
   Руками не правим — правки затрутся при следующем импорте.
   Дизайн-система: claude.ai/design → «Farkop Krasnodar Design System»
   ========================================================================== */

.fk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--fk-space-8);font:var(--fk-text-button);font-family:var(--fk-font-display);letter-spacing:var(--fk-tracking-upper);text-transform:uppercase;border:1px solid transparent;border-radius:var(--fk-radius-button);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--fk-transition-color);position:relative}
.fk-btn:hover{text-decoration:none}
.fk-btn--l{height:var(--fk-control-h-l);padding-inline:var(--fk-space-24);font-size:16px}
.fk-btn--m{height:var(--fk-control-h-m);padding-inline:var(--fk-space-20,20px);padding-inline:20px;font-size:15px}
.fk-btn--s{height:var(--fk-control-h-s);padding-inline:var(--fk-space-12);font-size:13px}
.fk-btn--block{width:100%}
.fk-btn--primary{background:var(--fk-accent-primary);color:var(--fk-text-on-accent)}
.fk-btn--primary:hover{background:var(--fk-accent-primary-hover)}
.fk-btn--primary:active{background:var(--fk-accent-primary-press)}
.fk-btn--cta{background:var(--fk-accent-cta);color:var(--fk-text-on-cta)}
.fk-btn--cta:hover{background:var(--fk-accent-cta-hover)}
.fk-btn--cta:active{background:var(--fk-accent-cta-press)}
.fk-btn--cta .fk-spinner{color:var(--fk-text-on-cta)}
.fk-btn--secondary{background:transparent;color:var(--fk-text-primary);border-color:var(--fk-border-strong)}
.fk-btn--secondary:hover{background:var(--fk-bg-elevated);border-color:var(--fk-text-secondary)}
.fk-btn--secondary:active{background:var(--fk-bg-surface);border-color:var(--fk-border-strong)}
.fk-btn--ghost{background:transparent;color:var(--fk-text-primary);text-transform:none;letter-spacing:0;font-family:var(--fk-font-body);font-weight:var(--fk-font-weight-semibold);padding-inline:var(--fk-space-8)}
.fk-btn--ghost:hover{color:var(--fk-accent-primary)}
.fk-btn--ghost:active{color:var(--fk-accent-primary-press)}
.fk-btn[aria-disabled="true"],.fk-btn:disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
.fk-btn--loading{color:transparent!important}
.fk-btn__spin{position:absolute;inset:0;display:grid;place-items:center}
.fk-spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fk-spin .7s linear infinite}
.fk-btn--primary .fk-spinner{color:var(--fk-text-on-accent)}
.fk-btn--secondary .fk-spinner,.fk-btn--ghost .fk-spinner{color:var(--fk-text-primary)}
@keyframes fk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fk-spinner{animation-duration:2s}}

.fk-iconbtn{display:inline-grid;place-items:center;width:var(--fk-tap-min);height:var(--fk-tap-min);border-radius:var(--fk-radius-button);border:1px solid transparent;background:transparent;color:var(--fk-text-primary);cursor:pointer;transition:var(--fk-transition-color);flex:0 0 auto}
.fk-iconbtn--outline{border-color:var(--fk-border-default);background:var(--fk-bg-surface)}
.fk-iconbtn--solid{background:var(--fk-accent-primary);color:var(--fk-text-on-accent)}
.fk-iconbtn--solid:hover{background:var(--fk-accent-primary-hover)}
.fk-iconbtn--ghost:hover,.fk-iconbtn--outline:hover{background:var(--fk-bg-elevated);border-color:var(--fk-border-strong)}
.fk-iconbtn--s{width:36px;height:36px}
.fk-iconbtn--l{width:var(--fk-tap-cta);height:var(--fk-tap-cta)}
.fk-iconbtn:disabled{opacity:.4;pointer-events:none}

.fk-msgbtn{display:inline-flex;align-items:center;gap:var(--fk-space-8);height:var(--fk-control-h-m);padding-inline:var(--fk-space-16);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-button);background:var(--fk-bg-elevated);color:var(--fk-text-primary);font:var(--fk-text-body-strong);cursor:pointer;text-decoration:none;transition:var(--fk-transition-color)}
.fk-msgbtn--l{height:var(--fk-control-h-l);padding-inline:var(--fk-space-24)}
.fk-msgbtn--block{width:100%;justify-content:center}
.fk-msgbtn:hover{text-decoration:none;background:var(--fk-bg-surface)}
.fk-msgbtn__dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.fk-msgbtn--whatsapp:hover{border-color:var(--fk-c-brand-whatsapp)}
.fk-msgbtn--whatsapp .fk-msgbtn__mark{color:var(--fk-c-brand-whatsapp)}
.fk-msgbtn--telegram:hover{border-color:var(--fk-c-brand-telegram)}
.fk-msgbtn--telegram .fk-msgbtn__mark{color:var(--fk-c-brand-telegram)}
.fk-msgbtn--phone:hover{border-color:var(--fk-accent-primary)}
.fk-msgbtn--phone .fk-msgbtn__mark{color:var(--fk-accent-primary)}
.fk-msgbtn__sub{font:var(--fk-text-micro);color:var(--fk-text-secondary);display:block}
.fk-msgbtn__label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;gap:2px}

/* ===== components/forms.css ===== */
/* ==========================================================================
   farkop-krasnodar · components/forms.css
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Источник: _ds/css/forms.css
   Руками не правим — правки затрутся при следующем импорте.
   Дизайн-система: claude.ai/design → «Farkop Krasnodar Design System»
   ========================================================================== */

.fk-field{display:flex;flex-direction:column;gap:var(--fk-space-8)}
.fk-label{font:var(--fk-text-label);letter-spacing:var(--fk-tracking-upper);text-transform:uppercase;color:var(--fk-text-secondary)}
.fk-label__req{color:var(--fk-accent-primary)}
.fk-label__opt{font-family:var(--fk-font-body);font-weight:400;text-transform:none;letter-spacing:0;color:var(--fk-text-muted)}
.fk-control{width:100%;height:var(--fk-control-h-l);padding-inline:var(--fk-space-16);background:var(--fk-bg-elevated);color:var(--fk-text-primary);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-input);font:var(--fk-text-body);font-family:var(--fk-font-body);transition:var(--fk-transition-color);appearance:none}
.fk-control--m{height:var(--fk-control-h-m)}
.fk-control--mono{font:var(--fk-text-data);letter-spacing:.04em}
.fk-control:hover{border-color:var(--fk-border-strong)}
.fk-control:focus{outline:var(--fk-focus-ring);outline-offset:1px;border-color:var(--fk-border-strong)}
.fk-control--error{border-color:var(--fk-state-error)}
.fk-control--success{border-color:var(--fk-state-success)}
.fk-control:disabled{opacity:.45;cursor:not-allowed}
textarea.fk-control{height:auto;min-height:120px;padding-block:var(--fk-space-12);resize:vertical;line-height:1.55}
.fk-hint{font:var(--fk-text-micro);color:var(--fk-text-secondary)}
.fk-msg{font:var(--fk-text-caption);display:flex;align-items:flex-start;gap:6px}
.fk-msg--error{color:var(--fk-state-error)}
.fk-msg--success{color:var(--fk-state-success)}
.fk-msg__mark{font-family:var(--fk-font-mono);font-weight:700;line-height:1.45}
.fk-inputwrap{position:relative;display:flex;align-items:center}
.fk-inputwrap__suffix{position:absolute;right:var(--fk-space-12);color:var(--fk-text-muted);font:var(--fk-text-data-s);pointer-events:none}

.fk-select{position:relative}
.fk-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-space-8);width:100%;height:var(--fk-control-h-l);padding-inline:var(--fk-space-16);background:var(--fk-bg-elevated);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-input);color:var(--fk-text-primary);font:var(--fk-text-body);cursor:pointer;text-align:left;transition:var(--fk-transition-color)}
.fk-select__trigger:hover{border-color:var(--fk-border-strong)}
.fk-select__trigger[data-placeholder="true"]{color:var(--fk-text-muted)}
.fk-select__caret{width:0;height:0;border:5px solid transparent;border-top-color:var(--fk-text-secondary);margin-top:4px;flex:0 0 auto}
.fk-select__list{position:absolute;z-index:var(--fk-z-sheet);top:calc(100% + 4px);left:0;right:0;background:var(--fk-bg-elevated);border:1px solid var(--fk-border-strong);border-radius:var(--fk-radius-input);box-shadow:var(--fk-shadow-modal);max-height:280px;overflow:auto;padding:var(--fk-space-4)}
.fk-select__opt{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--fk-tap-min);padding:var(--fk-space-8) var(--fk-space-12);background:transparent;border:0;border-radius:var(--fk-radius-4);color:var(--fk-text-primary);font:var(--fk-text-body);text-align:left;cursor:pointer}
.fk-select__opt:hover{background:var(--fk-bg-surface)}
.fk-select__opt[aria-selected="true"]{color:var(--fk-accent-primary);font-weight:600}
.fk-select__opt-mark{font-family:var(--fk-font-mono);color:var(--fk-accent-primary)}
.fk-select__sheet-title{font:var(--fk-text-label);text-transform:uppercase;letter-spacing:var(--fk-tracking-upper);color:var(--fk-text-secondary);padding:var(--fk-space-8) var(--fk-space-12)}

.fk-auto__status{display:flex;align-items:center;gap:var(--fk-space-8);padding:var(--fk-space-12);font:var(--fk-text-caption);color:var(--fk-text-secondary)}
.fk-auto__empty{display:flex;flex-direction:column;gap:var(--fk-space-8);padding:var(--fk-space-12)}
.fk-auto__hit{font-weight:700;color:var(--fk-accent-primary)}

.fk-check{display:flex;align-items:flex-start;gap:var(--fk-space-12);cursor:pointer;min-height:var(--fk-tap-min);padding-block:var(--fk-space-4)}
.fk-check__box{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border:1px solid var(--fk-border-strong);border-radius:var(--fk-radius-4);background:var(--fk-bg-elevated);display:grid;place-items:center;transition:var(--fk-transition-color)}
.fk-check input{position:absolute;opacity:0;width:0;height:0}
.fk-check input:checked+.fk-check__box{background:var(--fk-accent-primary);border-color:var(--fk-accent-primary)}
.fk-check input:checked+.fk-check__box::after{content:"";width:11px;height:6px;border-left:2px solid var(--fk-text-on-accent);border-bottom:2px solid var(--fk-text-on-accent);transform:rotate(-45deg) translateY(-2px)}
.fk-check input:focus-visible+.fk-check__box{outline:var(--fk-focus-ring);outline-offset:2px}
.fk-check--error .fk-check__box{border-color:var(--fk-state-error)}
.fk-check__text{font:var(--fk-text-caption);color:var(--fk-text-secondary)}

.fk-radiocard{display:flex;align-items:flex-start;gap:var(--fk-space-12);width:100%;min-height:72px;padding:var(--fk-space-16);background:var(--fk-bg-surface);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-card);cursor:pointer;text-align:left;transition:var(--fk-transition-color),border-color var(--fk-dur-fast) var(--fk-ease-out)}
.fk-radiocard:hover{border-color:var(--fk-border-strong);background:var(--fk-bg-elevated)}
.fk-radiocard[aria-pressed="true"],.fk-radiocard[data-selected="true"]{border:2px solid var(--fk-accent-primary);padding:15px;background:var(--fk-bg-elevated)}
.fk-radiocard__icon{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-4);color:var(--fk-accent-primary)}
.fk-radiocard__title{display:block;font:var(--fk-text-body-strong);color:var(--fk-text-primary)}
.fk-radiocard__caption{display:block;font:var(--fk-text-caption);color:var(--fk-text-secondary);margin-top:2px}
.fk-radiocard__check{margin-left:auto;font-family:var(--fk-font-mono);color:var(--fk-accent-primary);opacity:0}
.fk-radiocard[data-selected="true"] .fk-radiocard__check{opacity:1}

.fk-tabswitch{display:inline-flex;padding:var(--fk-space-4);gap:var(--fk-space-4);background:var(--fk-bg-surface);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-4)}
.fk-tabswitch__item{min-height:var(--fk-control-h-s);padding:0 var(--fk-space-16);background:transparent;border:0;border-radius:2px;color:var(--fk-text-secondary);font:var(--fk-text-body-strong);cursor:pointer;transition:var(--fk-transition-color)}
.fk-tabswitch__item:hover{color:var(--fk-text-primary)}
.fk-tabswitch__item[aria-selected="true"]{background:var(--fk-accent-primary);color:var(--fk-text-on-accent)}
.fk-tabswitch--full{display:flex;width:100%}
.fk-tabswitch--full .fk-tabswitch__item{flex:1}

.fk-chips{display:flex;flex-wrap:wrap;gap:var(--fk-space-8)}
.fk-chip{display:inline-flex;align-items:center;gap:var(--fk-space-8);min-height:var(--fk-tap-min);padding:0 var(--fk-space-16);background:var(--fk-bg-surface);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-pill);color:var(--fk-text-primary);font:var(--fk-text-body);cursor:pointer;transition:var(--fk-transition-color)}
.fk-chip:hover{border-color:var(--fk-border-strong);background:var(--fk-bg-elevated)}
.fk-chip[data-selected="true"]{border-color:var(--fk-accent-primary);color:var(--fk-accent-primary);background:var(--fk-tint-accent)}
.fk-chip__mark{font-family:var(--fk-font-mono);font-size:13px}

/* ===== components/containers.css ===== */
/* ==========================================================================
   farkop-krasnodar · components/containers.css
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Источник: _ds/css/containers.css
   Руками не правим — правки затрутся при следующем импорте.
   Дизайн-система: claude.ai/design → «Farkop Krasnodar Design System»
   ========================================================================== */

.fk-card{background:var(--fk-bg-surface);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-card);padding:var(--fk-pad-card);position:relative;transition:border-color var(--fk-dur-fast) var(--fk-ease-out),background-color var(--fk-dur-fast) var(--fk-ease-out)}
.fk-card--flat{background:transparent}
.fk-card--featured{border:2px solid var(--fk-accent-primary);padding:calc(var(--fk-pad-card) - 1px)}

.fk-service{display:flex;flex-direction:column;gap:var(--fk-space-12);text-decoration:none;color:inherit;height:100%}
.fk-service:hover{border-color:var(--fk-border-strong);background:var(--fk-bg-elevated);text-decoration:none}
.fk-service__icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-4);color:var(--fk-accent-primary)}
.fk-service__title{font:var(--fk-text-h3);color:var(--fk-text-primary)}
.fk-service__benefit{font:var(--fk-text-caption);color:var(--fk-text-secondary)}
.fk-service__foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fk-space-12);margin-top:auto;padding-top:var(--fk-space-16);border-top:1px solid var(--fk-border-default)}
.fk-service__price{font:var(--fk-text-data);color:var(--fk-text-primary);font-variant-numeric:tabular-nums}
.fk-service__price span{color:var(--fk-text-muted);font-size:12px}
.fk-service__more{font:var(--fk-text-label);text-transform:uppercase;letter-spacing:var(--fk-tracking-upper);color:var(--fk-accent-primary)}
.fk-service--wide{grid-column:span 2}
@media (max-width:767px){.fk-service--wide{grid-column:span 1}}

.fk-case{display:flex;flex-direction:column;gap:var(--fk-space-12);padding:0;overflow:hidden;text-decoration:none;color:inherit;height:100%}
.fk-case:hover{border-color:var(--fk-border-strong)}
.fk-case__body{display:flex;flex-direction:column;gap:var(--fk-space-8);padding:var(--fk-pad-card-s)}
.fk-case__title{font:var(--fk-text-h3);font-size:20px;color:var(--fk-text-primary)}
.fk-case__solution{font:var(--fk-text-caption);color:var(--fk-accent-primary);text-transform:uppercase;letter-spacing:var(--fk-tracking-upper);font-family:var(--fk-font-mono);font-size:12px}
.fk-case__params{display:grid;grid-template-columns:auto 1fr;gap:4px var(--fk-space-12);font:var(--fk-text-data-s);color:var(--fk-text-secondary);margin-top:var(--fk-space-4)}
.fk-case__params dt{color:var(--fk-text-muted)}
.fk-case__params dd{margin:0;color:var(--fk-text-primary);font-variant-numeric:tabular-nums}
.fk-case__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-space-8);padding:var(--fk-space-12) var(--fk-pad-card-s);border-top:1px solid var(--fk-border-default)}
.fk-case__media{display:block;position:relative}
.fk-case__badges{position:absolute;top:var(--fk-space-12);left:var(--fk-space-12);display:flex;gap:var(--fk-space-8)}

.fk-product{display:flex;flex-direction:column;gap:var(--fk-space-12);padding:0;overflow:hidden;text-decoration:none;color:inherit;height:100%}
.fk-product:hover{border-color:var(--fk-border-strong);background:var(--fk-bg-elevated);text-decoration:none}
.fk-product__media{display:block;position:relative}
.fk-product__badges{position:absolute;top:var(--fk-space-12);left:var(--fk-space-12);display:flex;gap:var(--fk-space-8)}
.fk-product__body{display:flex;flex-direction:column;gap:6px;padding:0 var(--fk-pad-card-s)}
.fk-product__title{font:var(--fk-text-h3);color:var(--fk-text-primary)}
.fk-product__sku{font:var(--fk-text-micro);font-family:var(--fk-font-mono);text-transform:uppercase;letter-spacing:var(--fk-tracking-upper);color:var(--fk-text-muted)}
.fk-product__sku[data-todo]{color:var(--fk-accent-warn)}
.fk-product__text{font:var(--fk-text-caption);color:var(--fk-text-secondary)}
.fk-product__foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fk-space-8);flex-wrap:wrap;margin-top:auto;padding:var(--fk-space-12) var(--fk-pad-card-s);border-top:1px solid var(--fk-border-default)}
.fk-product__prices{display:flex;align-items:baseline;gap:var(--fk-space-8)}
.fk-product__price{font:var(--fk-text-h3);font-family:var(--fk-font-mono);font-variant-numeric:tabular-nums;color:var(--fk-text-primary);white-space:nowrap}
.fk-product__price span{font-size:12px;color:var(--fk-text-muted)}
.fk-product__old{font:var(--fk-text-caption);font-family:var(--fk-font-mono);font-variant-numeric:tabular-nums;color:var(--fk-text-muted);white-space:nowrap}
.fk-product__foot .fk-service__more{font:var(--fk-text-micro);font-weight:700;text-transform:uppercase;letter-spacing:var(--fk-tracking-upper);white-space:nowrap}

.fk-module{position:relative;overflow:hidden;padding:0;cursor:pointer;text-align:left;width:100%;background:var(--fk-bg-surface);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-card);color:inherit}
.fk-module:hover{border-color:var(--fk-accent-primary)}
.fk-module__stage{display:block;position:relative;aspect-ratio:4/3;background:var(--fk-bg-sunken);overflow:hidden}
.fk-module__layer{display:block;position:absolute;inset:0;transition:opacity var(--fk-dur-base) var(--fk-ease-out)}
.fk-module__layer--photo{opacity:0}
.fk-module[data-revealed="true"] .fk-module__layer--photo{opacity:1}
.fk-module[data-revealed="true"] .fk-module__layer--blueprint{opacity:0}
.fk-module__hintbar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--fk-space-8);padding:var(--fk-space-8) var(--fk-space-12);background:var(--fk-scrim-bottom);font:var(--fk-text-micro);color:var(--fk-text-secondary)}
.fk-module__body{display:flex;flex-direction:column;gap:var(--fk-space-8);padding:var(--fk-pad-card-s)}
.fk-module__title{font:var(--fk-text-h3);font-size:20px}
.fk-module__text{font:var(--fk-text-caption);color:var(--fk-text-secondary)}

.fk-trust{display:flex;align-items:center;gap:var(--fk-space-12);padding:var(--fk-space-12) var(--fk-space-16);background:var(--fk-glass-panel);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-4);backdrop-filter:blur(6px)}
.fk-trust__mark{color:var(--fk-accent-warn);flex:0 0 auto;display:grid;place-items:center}
.fk-trust__label{font:var(--fk-text-micro);color:var(--fk-text-secondary);text-transform:uppercase;letter-spacing:var(--fk-tracking-upper)}
.fk-trust__value{font:var(--fk-text-body-strong);color:var(--fk-text-primary)}

.fk-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding-inline:var(--fk-space-8);border:1px solid;border-radius:var(--fk-radius-badge);font:var(--fk-text-kicker);font-size:11px;letter-spacing:var(--fk-tracking-wide);text-transform:uppercase;white-space:nowrap}
.fk-badge--l{height:28px;font-size:12px;padding-inline:var(--fk-space-12)}
.fk-badge--neutral{color:var(--fk-text-secondary);border-color:var(--fk-border-strong);background:var(--fk-bg-elevated)}
.fk-badge--accent{color:var(--fk-text-on-accent);border-color:var(--fk-accent-primary);background:var(--fk-accent-primary)}
.fk-badge--warn{color:var(--fk-accent-warn);border-color:var(--fk-line-warn);background:var(--fk-tint-warn)}
.fk-badge--info{color:var(--fk-accent-info);border-color:var(--fk-line-info);background:var(--fk-tint-info)}
.fk-badge--success{color:var(--fk-state-success);border-color:var(--fk-line-success);background:var(--fk-tint-success)}

.fk-price{border:1px solid var(--fk-border-strong);border-radius:var(--fk-radius-card);overflow:hidden;background:var(--fk-bg-surface)}
.fk-price table{font:var(--fk-text-body)}
.fk-price th,.fk-price td{padding:var(--fk-space-12) var(--fk-space-16);text-align:left;border-bottom:1px solid var(--fk-border-default)}
.fk-price thead th{font:var(--fk-text-label);text-transform:uppercase;letter-spacing:var(--fk-tracking-upper);color:var(--fk-text-secondary);background:var(--fk-bg-elevated);border-bottom:1px solid var(--fk-border-strong)}
.fk-price tbody tr:last-child td{border-bottom:0}
.fk-price tbody tr:hover{background:var(--fk-bg-elevated)}
.fk-price__num{font:var(--fk-text-data);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fk-text-primary)}
.fk-price__from{color:var(--fk-text-muted);font-size:12px}
.fk-price__note{padding:var(--fk-space-12) var(--fk-space-16);font:var(--fk-text-micro);color:var(--fk-text-secondary);background:var(--fk-bg-elevated);border-top:1px solid var(--fk-border-default)}
.fk-price__cards{display:none;flex-direction:column;gap:var(--fk-space-12)}
.fk-price__card{border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-4);padding:var(--fk-pad-card-s);display:flex;flex-direction:column;gap:var(--fk-space-8);background:var(--fk-bg-surface)}
.fk-price__row{display:flex;justify-content:space-between;gap:var(--fk-space-12);font:var(--fk-text-caption)}
.fk-price__row dt{color:var(--fk-text-muted)}
.fk-price__row dd{margin:0;font:var(--fk-text-data-s);color:var(--fk-text-primary);font-variant-numeric:tabular-nums}
@media (max-width:767px){.fk-price{border:0;background:transparent}.fk-price table{display:none}.fk-price__cards{display:flex}.fk-price__note{border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-4);margin-top:var(--fk-space-12)}}

.fk-metric{display:flex;flex-direction:column;gap:var(--fk-space-4)}
.fk-metric__value{font:var(--fk-text-metric);color:var(--fk-text-primary);font-variant-numeric:tabular-nums;letter-spacing:var(--fk-tracking-tight)}
.fk-metric__unit{color:var(--fk-accent-primary)}
.fk-metric__label{font:var(--fk-text-caption);color:var(--fk-text-secondary);max-width:22ch}

.fk-ph{position:relative;background:var(--fk-bg-sunken);border:1px dashed var(--fk-border-strong);border-radius:var(--fk-radius-4);display:grid;place-items:center;overflow:hidden;color:var(--fk-text-muted);container-type:size}
@container (max-height:220px){.fk-ph__body .fk-micro{display:none}}
@container (max-height:130px){.fk-ph__shot{font:var(--fk-text-micro)}.fk-ph__dim{display:none}}
.fk-ph--bare{border-radius:0;border:0}
.fk-ph--real{border-style:solid;border-color:var(--fk-border-default);background:var(--fk-bg-elevated)}
.fk-ph--real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.fk-ph__grid{display:block;position:absolute;inset:0;background-image:var(--fk-pattern-graph);opacity:.16}
.fk-ph__body{position:relative;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:var(--fk-space-16);max-width:90%}
.fk-ph__tag{font:var(--fk-text-kicker);letter-spacing:var(--fk-tracking-wide);color:var(--fk-accent-warn);text-transform:uppercase}
.fk-ph__shot{font:var(--fk-text-caption);color:var(--fk-text-secondary)}
.fk-ph__dim{position:absolute;bottom:6px;right:8px;font:var(--fk-text-micro);font-family:var(--fk-font-mono);color:var(--fk-text-faint)}

/* ===== components/content.css ===== */
/* ==========================================================================
   farkop-krasnodar · components/content.css
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Источник: _ds/css/content.css
   Руками не правим — правки затрутся при следующем импорте.
   Дизайн-система: claude.ai/design → «Farkop Krasnodar Design System»
   ========================================================================== */

.fk-faq{border-top:1px solid var(--fk-border-default)}
.fk-faq__item{border-bottom:1px solid var(--fk-border-default)}
.fk-faq__btn{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fk-space-16);width:100%;min-height:var(--fk-tap-cta);padding:var(--fk-space-16) 0;background:transparent;border:0;color:var(--fk-text-primary);font:var(--fk-text-h3);font-size:20px;text-align:left;cursor:pointer;transition:var(--fk-transition-color)}
.fk-faq__btn:hover{color:var(--fk-accent-primary)}
.fk-faq__sign{flex:0 0 auto;width:24px;height:24px;position:relative;margin-top:4px}
.fk-faq__sign::before,.fk-faq__sign::after{content:"";position:absolute;background:var(--fk-accent-primary);transition:transform var(--fk-dur-fast) var(--fk-ease-out)}
.fk-faq__sign::before{top:11px;left:2px;width:20px;height:2px}
.fk-faq__sign::after{left:11px;top:2px;width:2px;height:20px}
.fk-faq__item[data-open="true"] .fk-faq__sign::after{transform:scaleY(0)}
.fk-faq__panel{padding:0 var(--fk-space-48) var(--fk-space-24) 0;font:var(--fk-text-body-l);color:var(--fk-text-secondary);max-width:var(--fk-measure)}
.fk-faq__item[data-open="false"] .fk-faq__panel{display:none}
@media (max-width:767px){.fk-faq__panel{padding-right:0}}

.fk-callout{display:flex;gap:var(--fk-space-12);padding:var(--fk-space-16);border:1px solid;border-radius:var(--fk-radius-4);background:var(--fk-bg-surface)}
.fk-callout--info{border-color:var(--fk-line-info);background:var(--fk-tint-info)}
.fk-callout--warn{border-color:var(--fk-line-warn);background:var(--fk-tint-warn)}
.fk-callout__mark{flex:0 0 auto;color:var(--fk-accent-info)}
.fk-callout--warn .fk-callout__mark{color:var(--fk-accent-warn)}
.fk-callout__title{font:var(--fk-text-body-strong);color:var(--fk-text-primary);margin-bottom:4px}
.fk-callout__text{font:var(--fk-text-caption);color:var(--fk-text-secondary)}

.fk-footnote{display:flex;gap:var(--fk-space-8);font:var(--fk-text-micro);color:var(--fk-text-secondary);max-width:var(--fk-measure);line-height:1.4}
.fk-footnote__mark{color:var(--fk-text-muted);font-family:var(--fk-font-mono);flex:0 0 auto}

.fk-step{display:flex;flex-direction:column;gap:var(--fk-space-12);position:relative}
.fk-step__head{display:flex;align-items:center;gap:var(--fk-space-12)}
.fk-step__num{font-family:var(--fk-font-mono);font-weight:700;font-size:13px;color:var(--fk-accent-primary);border:1px solid var(--fk-accent-primary);border-radius:var(--fk-radius-4);width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto}
.fk-step__dur{margin-left:auto;font:var(--fk-text-data-s);color:var(--fk-text-primary);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-4);padding:4px var(--fk-space-8);white-space:nowrap}
.fk-step__title{font:var(--fk-text-h3);font-size:20px}
.fk-step__text{font:var(--fk-text-caption);color:var(--fk-text-secondary)}
.fk-step--timeline{padding-left:var(--fk-space-32);border-left:1px solid var(--fk-border-default);padding-bottom:var(--fk-space-32)}
.fk-step--timeline .fk-step__num{position:absolute;left:calc(var(--fk-space-32) * -1);transform:translateX(-16px);background:var(--fk-bg-base)}
.fk-step--timeline:last-child{border-left-color:transparent;padding-bottom:0}

.fk-review{display:flex;flex-direction:column;gap:var(--fk-space-12);height:100%}
.fk-review__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fk-space-12)}
.fk-review__author{font:var(--fk-text-body-strong)}
.fk-review__car{font:var(--fk-text-data-s);color:var(--fk-text-muted)}
.fk-review__text{font:var(--fk-text-body);color:var(--fk-text-secondary)}
.fk-review__src{display:flex;align-items:center;gap:6px;font:var(--fk-text-micro);color:var(--fk-text-secondary);margin-top:auto;padding-top:var(--fk-space-12);border-top:1px solid var(--fk-border-default)}
.fk-review__src a{color:var(--fk-text-link)}

.fk-cert{padding:0;overflow:hidden;cursor:pointer;text-align:left;background:var(--fk-bg-surface);border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-card);color:inherit;display:flex;flex-direction:column}
.fk-cert:hover{border-color:var(--fk-border-strong)}
.fk-cert__body{padding:var(--fk-space-12) var(--fk-pad-card-s);display:flex;flex-direction:column;gap:4px}
.fk-cert__title{font:var(--fk-text-body-strong)}
.fk-cert__meta{font:var(--fk-text-data-s);color:var(--fk-text-muted)}

.fk-sectionhead{display:flex;flex-direction:column;gap:var(--fk-space-12);margin-bottom:var(--fk-block-gap)}
.fk-sectionhead__top{display:flex;align-items:center;gap:var(--fk-space-12)}
.fk-sectionhead__rule{flex:1;height:1px;background:var(--fk-border-default)}
.fk-sectionhead__title{font:var(--fk-text-h2);max-width:24ch}
.fk-sectionhead--wide .fk-sectionhead__title{max-width:34ch}
.fk-sectionhead__lead{font:var(--fk-text-body-l);color:var(--fk-text-secondary);max-width:var(--fk-measure)}
.fk-sectionhead--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--fk-space-32)}
@media (max-width:767px){.fk-sectionhead--split{flex-direction:column;align-items:flex-start}}

.fk-tldr{border:1px solid var(--fk-border-strong);border-left:2px solid var(--fk-accent-primary);border-radius:var(--fk-radius-4);padding:var(--fk-space-16);background:var(--fk-bg-surface);display:flex;flex-direction:column;gap:var(--fk-space-8);max-width:var(--fk-measure)}
.fk-tldr__label{font:var(--fk-text-kicker);letter-spacing:var(--fk-tracking-wide);text-transform:uppercase;color:var(--fk-accent-primary)}
.fk-tldr__text{font:var(--fk-text-body);color:var(--fk-text-secondary)}

/* ===== components/navigation.css ===== */
/* ==========================================================================
   farkop-krasnodar · components/navigation.css
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Источник: _ds/css/navigation.css
   Руками не правим — правки затрутся при следующем импорте.
   Дизайн-система: claude.ai/design → «Farkop Krasnodar Design System»
   ========================================================================== */

.fk-header{position:sticky;top:0;z-index:var(--fk-z-header);background:var(--fk-header-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--fk-border-default);transition:height var(--fk-dur-base) var(--fk-ease-out)}
.fk-header__inner{display:flex;align-items:center;gap:var(--fk-space-24);height:var(--fk-header-h);transition:height var(--fk-dur-base) var(--fk-ease-out)}
.fk-header[data-compact="true"] .fk-header__inner{height:var(--fk-header-h-compact)}
.fk-header[data-compact="true"] .fk-logo__desc{display:none}
.fk-logo{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;flex:0 0 auto}
.fk-logo:hover{text-decoration:none}
.fk-logo__mark{font-family:var(--fk-font-display);font-weight:800;font-size:20px;letter-spacing:var(--fk-tracking-upper);text-transform:uppercase;color:var(--fk-text-primary);display:flex;align-items:center;gap:6px}
.fk-logo__mark b{color:var(--fk-accent-primary)}
.fk-logo__desc{font:var(--fk-text-micro);font-family:var(--fk-font-mono);color:var(--fk-text-muted);text-transform:uppercase;letter-spacing:var(--fk-tracking-upper)}
.fk-nav{display:flex;align-items:center;gap:var(--fk-space-24);margin-left:var(--fk-space-16)}
.fk-nav__link{font:var(--fk-text-body-strong);color:var(--fk-text-secondary);text-decoration:none;display:flex;align-items:center;gap:6px;height:var(--fk-tap-min)}
.fk-nav__link:hover{color:var(--fk-text-primary);text-decoration:none}
.fk-nav__link--accent{color:var(--fk-accent-primary)}
.fk-nav__link--accent:hover{color:var(--fk-accent-primary-hover)}
.fk-header__right{display:flex;align-items:center;gap:var(--fk-space-12);margin-left:auto}
.fk-header__phone{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none}
.fk-header__phone:hover{text-decoration:none}
.fk-header__phone b{font:var(--fk-text-data);font-weight:700;color:var(--fk-text-primary);letter-spacing:.02em}
.fk-header__status{display:flex;align-items:center;gap:6px;font:var(--fk-text-micro);color:var(--fk-text-secondary)}
.fk-header__dot{width:6px;height:6px;border-radius:50%;background:var(--fk-state-success)}
.fk-header__burger{display:none}
@media (max-width:1023px){.fk-nav{display:none}.fk-header__burger{display:inline-grid}.fk-header__phone b{font-size:15px}}

.fk-drawer{position:fixed;inset:0;z-index:var(--fk-z-modal);display:flex;flex-direction:column}
.fk-drawer__scrim{position:absolute;inset:0;background:var(--fk-overlay-scrim)}
.fk-drawer__panel{position:relative;margin-top:0;background:var(--fk-bg-base);border-bottom:1px solid var(--fk-border-strong);display:flex;flex-direction:column;max-height:100%;overflow:auto;animation:fk-slide-down var(--fk-dur-base) var(--fk-ease-out)}
@keyframes fk-slide-down{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.fk-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--fk-space-16);padding:var(--fk-space-12) var(--fk-page-x);border-bottom:1px solid var(--fk-border-default);min-height:var(--fk-header-h)}
.fk-drawer__list{display:flex;flex-direction:column;padding:var(--fk-space-8) var(--fk-page-x) var(--fk-space-24)}
.fk-drawer__link{display:flex;align-items:center;justify-content:space-between;min-height:var(--fk-tap-cta);padding-block:var(--fk-space-8);border-bottom:1px solid var(--fk-border-default);font:var(--fk-text-h3);font-size:20px;color:var(--fk-text-primary);text-decoration:none}
.fk-drawer__link:hover{text-decoration:none;color:var(--fk-accent-primary)}
.fk-drawer__link--accent{color:var(--fk-accent-primary)}
.fk-drawer__foot{display:flex;flex-direction:column;gap:var(--fk-space-8);padding:0 var(--fk-page-x) var(--fk-space-24)}

.fk-quickbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--fk-z-quickbar);display:grid;grid-template-columns:repeat(4,1fr);background:var(--fk-bg-elevated);border-top:1px solid var(--fk-border-strong);box-shadow:var(--fk-shadow-sticky);padding-bottom:var(--fk-safe-b);transform:translateY(110%);transition:transform var(--fk-dur-base) var(--fk-ease-out)}
.fk-quickbar[data-visible="true"]{transform:none}
.fk-quickbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:var(--fk-tap-cta);height:var(--fk-quickbar-h);background:transparent;border:0;border-right:1px solid var(--fk-border-default);color:var(--fk-text-secondary);font:var(--fk-text-micro);text-decoration:none;cursor:pointer}
.fk-quickbar__item:last-child{border-right:0}
.fk-quickbar__item--cta{background:var(--fk-accent-cta);color:var(--fk-text-on-cta);font-weight:700}
.fk-quickbar__item:hover{color:var(--fk-text-primary);text-decoration:none}
.fk-quickbar__item--cta:hover{color:var(--fk-text-on-cta);background:var(--fk-accent-cta-hover)}

.fk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fk-space-8);font:var(--fk-text-caption);color:var(--fk-text-muted)}
.fk-crumbs a{color:var(--fk-text-secondary);text-decoration:none}
.fk-crumbs a:hover{color:var(--fk-accent-primary);text-decoration:none}
.fk-crumbs__sep{font-family:var(--fk-font-mono);color:var(--fk-border-strong)}
.fk-crumbs__current{color:var(--fk-text-primary)}

.fk-filters{display:flex;gap:var(--fk-space-8);overflow-x:auto;scrollbar-width:none}
.fk-filters::-webkit-scrollbar{display:none}
.fk-filters__item{flex:0 0 auto;min-height:var(--fk-tap-min);padding:0 var(--fk-space-16);background:transparent;border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-4);color:var(--fk-text-secondary);font:var(--fk-text-body-strong);cursor:pointer;transition:var(--fk-transition-color);display:inline-flex;align-items:center;gap:var(--fk-space-8)}
.fk-filters__item:hover{color:var(--fk-text-primary);border-color:var(--fk-border-strong)}
.fk-filters__item[aria-selected="true"]{background:var(--fk-accent-primary);border-color:var(--fk-accent-primary);color:var(--fk-text-on-accent)}
.fk-filters__count{font-family:var(--fk-font-mono);font-size:12px;opacity:.7}

.fk-loadmore{display:flex;flex-direction:column;align-items:center;gap:var(--fk-space-12)}
.fk-loadmore__meta{font:var(--fk-text-data-s);color:var(--fk-text-muted)}
.fk-loadmore__track{width:120px;height:2px;background:var(--fk-border-default);position:relative}
.fk-loadmore__fill{position:absolute;inset:0 auto 0 0;background:var(--fk-accent-primary)}

/* ===== components/feedback.css ===== */
/* ==========================================================================
   farkop-krasnodar · components/feedback.css
   СГЕНЕРИРОВАНО: php _tools/ds-import.php --commit
   Источник: _ds/css/feedback.css
   Руками не правим — правки затрутся при следующем импорте.
   Дизайн-система: claude.ai/design → «Farkop Krasnodar Design System»
   ========================================================================== */

.fk-modal{position:fixed;inset:0;z-index:var(--fk-z-modal);display:grid;place-items:center;padding:var(--fk-space-24)}
.fk-modal__scrim{position:absolute;inset:0;background:var(--fk-overlay-scrim);backdrop-filter:blur(2px)}
.fk-modal__panel{position:relative;width:100%;max-width:520px;max-height:90vh;overflow:auto;background:var(--fk-bg-elevated);border:1px solid var(--fk-border-strong);border-radius:var(--fk-radius-card);box-shadow:var(--fk-shadow-modal);animation:fk-pop var(--fk-dur-base) var(--fk-ease-out)}
.fk-modal__panel--gallery{max-width:1040px;background:var(--fk-bg-base)}
.fk-modal__panel--video{max-width:420px;background:var(--fk-bg-sunken)}
@keyframes fk-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fk-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fk-space-16);padding:var(--fk-pad-card);border-bottom:1px solid var(--fk-border-default);position:sticky;top:0;background:inherit}
.fk-modal__title{font:var(--fk-text-h3)}
.fk-modal__sub{font:var(--fk-text-caption);color:var(--fk-text-secondary);margin-top:4px}
.fk-modal__body{padding:var(--fk-pad-card);display:flex;flex-direction:column;gap:var(--fk-space-16)}
.fk-modal__foot{padding:var(--fk-pad-card);border-top:1px solid var(--fk-border-default);display:flex;gap:var(--fk-space-12);flex-wrap:wrap}
@media (max-width:767px){.fk-modal{padding:0;place-items:end stretch}.fk-modal__panel{max-width:none;border-radius:var(--fk-radius-8) var(--fk-radius-8) 0 0;max-height:92vh;padding-bottom:var(--fk-safe-b);animation:fk-sheet var(--fk-dur-base) var(--fk-ease-out)}}
@keyframes fk-sheet{from{transform:translateY(24px)}to{transform:none}}

.fk-toast{display:flex;align-items:flex-start;gap:var(--fk-space-12);width:min(420px,calc(100vw - 32px));padding:var(--fk-space-16);background:var(--fk-bg-elevated);border:1px solid var(--fk-border-strong);border-radius:var(--fk-radius-4);box-shadow:var(--fk-shadow-modal)}
.fk-toast--success{border-left:2px solid var(--fk-state-success)}
.fk-toast--error{border-left:2px solid var(--fk-state-error)}
.fk-toast__mark{flex:0 0 auto;font-family:var(--fk-font-mono);font-weight:700}
.fk-toast--success .fk-toast__mark{color:var(--fk-state-success)}
.fk-toast--error .fk-toast__mark{color:var(--fk-state-error)}
.fk-toast__title{font:var(--fk-text-body-strong)}
.fk-toast__text{font:var(--fk-text-caption);color:var(--fk-text-secondary);margin-top:2px}
.fk-toast__close{margin-left:auto}

.fk-skel{background:var(--fk-bg-elevated);border-radius:var(--fk-radius-4);position:relative;overflow:hidden}
.fk-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--fk-shimmer-sheen),transparent);animation:fk-shimmer 1.2s linear infinite}
@keyframes fk-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.fk-skel::after{animation:none}}
.fk-skel--text{height:12px}
.fk-skel--title{height:20px}
.fk-skel--image{aspect-ratio:4/3;border-radius:var(--fk-radius-4)}
.fk-skel-card{border:1px solid var(--fk-border-default);border-radius:var(--fk-radius-card);padding:0;overflow:hidden;background:var(--fk-bg-surface)}
.fk-skel-card__body{padding:var(--fk-pad-card-s);display:flex;flex-direction:column;gap:var(--fk-space-8)}

.fk-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--fk-space-12);padding:var(--fk-space-48) var(--fk-space-24);border:1px dashed var(--fk-border-strong);border-radius:var(--fk-radius-card);background:var(--fk-bg-surface)}
.fk-empty__mark{color:var(--fk-text-muted)}
.fk-empty__title{font:var(--fk-text-h3);font-size:20px}
.fk-empty__text{font:var(--fk-text-caption);color:var(--fk-text-secondary);max-width:44ch}

/* ===== sections/footer.css ===== */
/* ==========================================================================
   sections/footer.css — подвал.
   Соответствует SiteFooter из ui_kits/website/Chrome.jsx, layout вынесен из
   инлайн-стилей в классы на токенах.
   ========================================================================== */

.fk-footer {
  background: var(--fk-bg-surface);
  border-top: var(--fk-border-w) solid var(--fk-border-default);
  padding-block: var(--fk-space-48);
}

.fk-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-32);
}

.fk-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--fk-space-32);
}

.fk-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-16);
  align-items: flex-start;
}

/* Телефон в подвале — крупный и моно: это второй по значимости способ связи. */
.fk-footer__phone {
  font: var(--fk-text-h3);
  font-family: var(--fk-font-mono);
  color: var(--fk-text-primary);
  text-decoration: none;
}

.fk-footer__phone:hover {
  color: var(--fk-accent-primary);
  text-decoration: none;
}

/* Колонка подвала — раскрывающийся список на чекбоксе.

   Зачем не <details>: нужен свёрнутый список на телефоне и раскрытый
   на десктопе, а атрибут open один на все ширины. Закрытый <details>
   браузер прячет через ::details-content с content-visibility, и правилом
   display его не раскрыть — на десктопе оставались пустые колонки.
   Чекбокс управляется медиазапросом целиком. */
.fk-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-8);
}

.fk-footer__coltitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fk-space-12);
}

/* Знак «развернуть»: галочка из двух граней, поворачивается при открытии.
   Отдельного ассета не заводим — та же логика, что у select-каретки. */
.fk-footer__sign {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fk-text-muted);
  border-bottom: 2px solid var(--fk-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--fk-dur-fast) var(--fk-ease-out);
  flex: 0 0 auto;
}

.fk-footer__links {
  display: flex;
  flex-direction: column;
}

.fk-footer__link {
  font: var(--fk-text-caption);
  color: var(--fk-text-secondary);
  text-decoration: none;
  min-height: var(--fk-tap-min);
  display: flex;
  align-items: center;
}

.fk-footer__link:hover {
  color: var(--fk-accent-primary);
  text-decoration: none;
}

/* --- Десктоп: списки всегда раскрыты ------------------------------------ */
@media (min-width: 768px) {
  /* Чекбокс на широком экране не участвует: список показан всегда,
     заголовок перестаёт быть кликабельным, стрелка не нужна. */
  .fk-footer__coltitle {
    pointer-events: none;
    cursor: default;
  }

  .fk-footer__sign {
    display: none;
  }
}

@media (max-width: 1023px) {
  /* Бренд во всю ширину, три колонки ссылок — под ним в ряд.
     Иначе на планшете колонки уезжают по одной в строку. */
  .fk-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fk-footer__brand {
    grid-column: 1 / -1;
  }
}

/* --- Телефон: аккордеон -------------------------------------------------- */
@media (max-width: 767px) {
  /* 14 ссылок в столбик растягивали подвал на 1330px — три с половиной
     экрана. В свёрнутом виде остаются три строки-заголовка. */
  .fk-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fk-space-8);
  }

  .fk-footer {
    padding-block: var(--fk-space-32);
  }

  .fk-footer__inner {
    gap: var(--fk-space-24);
  }

  /* Разделитель между свёрнутыми колонками: без него три заголовка
     сливаются и непонятно, что это раскрывающиеся списки. */
  .fk-footer__col {
    border-top: var(--fk-border-w) solid var(--fk-border-default);
    gap: 0;
  }

  .fk-footer__coltitle {
    min-height: var(--fk-tap-min);
    cursor: pointer;
  }

  .fk-footer__links {
    display: none;
  }

  .fk-footer__toggle:checked ~ .fk-footer__links {
    display: flex;
  }

  .fk-footer__toggle:checked + .fk-footer__coltitle .fk-footer__sign {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  /* Фокус приходит на визуально скрытый чекбокс — кольцо рисуем
     на заголовке, иначе с клавиатуры не видно, где находишься. */
  .fk-footer__toggle:focus-visible + .fk-footer__coltitle {
    outline: var(--fk-focus-ring);
    outline-offset: var(--fk-focus-offset);
  }

  .fk-footer__brand {
    gap: var(--fk-space-12);
  }
}

/* ===== sections/header.css ===== */
/* ==========================================================================
   sections/header.css — поведение шапки на узких экранах.

   В дизайн-системе у шапки один медиазапрос: ≤1023px скрыть nav, показать
   бургер, уменьшить телефон. Про то, что в шапке ещё есть кнопка «Рассчитать»
   и подпись под логотипом, там не сказано — в макете кнопки на мобильном нет,
   её роль играет нижний quick-bar.

   Без этих правил правый блок (телефон + кнопка + бургер) не влезал:
   на 375px шапка требовала 600px и давала горизонтальный скролл на всю
   страницу, на 1024px — 1058px. Именно это и выглядело как «часть мобильного,
   часть десктопа»: страница ехала влево, обрезая макет.
   ========================================================================== */

/* Ничто во flex-строке шапки не должно распирать её шире контейнера. */
.fk-header__inner,
.fk-header__right,
.fk-logo {
  min-width: 0;
}

/* Телефон — самый ценный элемент шапки, он не сжимается и не переносится. */
.fk-header__phone {
  flex: 0 0 auto;
}

.fk-header__phone b {
  white-space: nowrap;
}

/* Пункты меню не переносим: у .fk-nav__link фиксированная высота 44px, и
   перенос («Квадрат / 2″», «По / маркам») выдавливал текст за эту высоту —
   пункты выглядели съехавшими относительно соседей. */
.fk-nav__link {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* --- ≤1279px: навигация сворачивается в бургер ---------------------------
   Дизайн-система сворачивает nav на 1023px, но замер показал, что там она
   не живёт уже раньше: логотип + 5 пунктов + телефон занимают 900px, кнопке
   «Рассчитать» остаётся 60px при нужных 149 — она уезжала за экран.
   Пять русских подписей вместе с телефоном и кнопкой требуют ~1280px.

   Поэтому порог сворачивания поднят до 1280. На 1024–1279 остаются логотип,
   телефон, кнопка и бургер — то есть телефон и призыв никуда не пропадают,
   а полный список уходит в мобильное меню. Замечание отправлено дизайнеру:
   правильное место для порога — его css/navigation.css. */
@media (max-width: 1279px) {
  /* Подпись под логотипом декоративная — уходит первой. */
  .fk-logo__desc {
    display: none;
  }

  .fk-nav {
    display: none;
  }

  .fk-header__burger {
    display: inline-grid;
  }
}

/* --- ≤1023px: мобильная шапка ------------------------------------------- */
@media (max-width: 1023px) {
  /* Кнопку из шапки убираем: на мобильном за призыв отвечает quick-bar
     («Рассчитать» там же, 48px, всегда под рукой). Дублировать её в шапке
     негде — вместе с телефоном и бургером она не умещается в 375px. */
  .fk-header .fk-btn {
    display: none;
  }

  /* Статус-строку под телефоном тоже убираем: две строки в шапке 56px
     не помещаются, а сам текст есть в мобильном меню и в подвале. */
  .fk-header__status {
    display: none;
  }
}

/* --- ≤767px: втискиваем логотип, телефон и бургер ------------------------ */
@media (max-width: 767px) {
  /* Зазор 24px между логотипом, телефоном и бургером на узком экране
     избыточен: ничто из трёх не сжимается. Уменьшаем зазоры. */
  .fk-header__inner {
    gap: var(--fk-space-12);
  }

  .fk-header__right {
    gap: var(--fk-space-8);
  }

  /* Замер на 375px: логотип 155 + телефон 149 + бургер 44 + зазоры + поля
     требуют 400px. Телефон WeKing («+7 901 101 14 16») длиннее прежнего
     на три знака, и строка перестала помещаться.
     Уменьшаем кегль логотипа и номера — вместе освобождается ~50px,
     на 360px остаётся запас. Ни номер, ни знак при этом не режутся:
     обрезанный телефон в шапке хуже мелкого. */
  .fk-logo__mark {
    font-size: 16px;
  }

  .fk-header__phone b {
    font-size: 14px;
  }
}

/* ===== sections/hero.css ===== */
/* ==========================================================================
   sections/hero.css — первый экран.
   Соответствует ui_kits/website/Hero.jsx дизайн-системы, но layout вынесен из
   инлайн-стилей кита в классы на токенах.
   ========================================================================== */

.fk-hero {
  position: relative;
  overflow: hidden;
  background: var(--fk-bg-sunken);
  border-bottom: var(--fk-border-w) solid var(--fk-border-default);
}

/* Медиа-слой: фото или видео. Пока плейсхолдер — место под кадр
   зарезервировано, подмена на боевое фото не даёт сдвига layout. */
.fk-hero__media,
.fk-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fk-hero__ph {
  width: 100%;
  height: 100%;
}

/* Подпись плейсхолдера («нужен кадр» + описание из шот-листа) по умолчанию
   центрируется — и налезала прямо на лид и на селектор. Уводим её в правый
   нижний угол, за пределы текстовой колонки (та ограничена 56ch слева).
   На узких экранах текст занимает всю ширину, разойтись негде — там подпись
   скрываем: сам факт отсутствия съёмки виден по сетчатому фону и по строке
   с требованиями к файлу внизу. */
.fk-hero__ph .fk-ph__body {
  position: absolute;
  inset: auto var(--fk-space-24) var(--fk-space-32) auto;
  align-items: flex-end;
  text-align: right;
  max-width: 44ch;
}

@media (max-width: 1023px) {
  .fk-hero__ph .fk-ph__body {
    display: none;
  }
}

/* Затемнение снизу вверх: гарантирует ≥ 4.5:1 на H1 поверх любого кадра. */
.fk-hero__scrim {
  background: var(--fk-hero-scrim);
}

.fk-hero__inner {
  position: relative;
  padding-block: clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-24);
}

.fk-hero__top {
  display: flex;
  align-items: center;
  gap: var(--fk-space-8);
  flex-wrap: wrap;
}

/* Кикер по умолчанию — акцентный синий. Он лежит в самом верху кадра, где
   скрим ещё прозрачный (0.3), и на светлом участке фотографии давал 3.95:1
   при требуемых 4.5:1 — замерено браузером после того, как на место
   заглушки встало реальное фото. Пока фон был серым слотом, проблемы
   не было видно.
   Перекрашиваем в основной текст (в .fk-invert он светлый) — ровно так же
   делает дизайнер в Hero.jsx, там кикеру явно задан color: var(--text-primary).
   Замер после правки: 11.9:1 на 1440, 15.9:1 на 375. */
.fk-hero__tagline {
  color: var(--fk-text-primary);
}

.fk-hero__title {
  font: var(--fk-text-display);
  letter-spacing: var(--fk-tracking-tight);
  max-width: 18ch;
}

.fk-hero__lead {
  max-width: 56ch;
}

/* Селектор: полупрозрачная карточка поверх кадра. Прозрачность с блюром
   разрешена ТЗ в считанных местах, это одно из них.
   Цвет стекла — токен --fk-glass-panel: внутри .fk-invert он сам становится
   тёмно-синим, снаружи — белым. Раньше здесь был хардкод rgba(22,24,29,.82),
   и после смены палитры он остался бы антрацитовым пятном на светлом сайте. */
.fk-hero__selector {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-16);
  background: var(--fk-glass-panel);
  backdrop-filter: blur(8px);
}

.fk-hero__selector-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--fk-space-12);
  align-items: end;
}

.fk-hero__anchor {
  display: flex;
  align-items: center;
  gap: var(--fk-space-16);
  flex-wrap: wrap;
}

/* Цена-якорь: сумма оранжевая, всё остальное — обычным текстом. */
.fk-hero__anchor b {
  color: var(--fk-accent-primary);
}

.fk-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--fk-space-12);
  flex-wrap: wrap;
}

.fk-hero__trust {
  display: flex;
  gap: var(--fk-space-12);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  /* На мобильном селектор в одну колонку, кнопка на всю ширину:
     таргет CTA ≥ 48px обеспечен .fk-btn--l. */
  .fk-hero__selector-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fk-hero__selector-row .fk-btn {
    width: 100%;
  }

  .fk-hero__title {
    max-width: none;
  }

  .fk-hero__trust > .fk-trust {
    width: 100%;
  }
}

/* ===== sections/home.css ===== */
/* ==========================================================================
   sections/home.css — раскладка блоков главной WeKing Moto.
   В дизайн-ките (ui_kits/website/HomeBlocks.jsx, HomeLower.jsx) она собрана
   инлайн-стилями, поэтому классы написаны здесь. Только var(--fk-*).
   ========================================================================== */

/* --- Категории продукции ------------------------------------------------- */

/* Карточка флагмана занимает две колонки из трёх и в остаток первого ряда
   не влезает — в сетке остаётся дыра. dense разрешает браузеру подтянуть
   на это место следующую одноколоночную карточку. Порядок в разметке
   не меняется, только раскладка. */
.fk-services {
  grid-auto-flow: dense;
}

.fk-service__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fk-space-12);
}

.fk-service__price {
  white-space: nowrap;
}

/* Причина «почему WeKing» — та же карточка, но не ссылка. */
.fk-pillar {
  cursor: default;
}

/* --- Каталог ------------------------------------------------------------- */

.fk-product__ph {
  aspect-ratio: 4 / 3;
  width: 100%;
}

.fk-catalog__note {
  margin-top: var(--fk-block-gap);
}

/* --- Линейки ------------------------------------------------------------- */

.fk-line {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-12);
  height: 100%;
}

.fk-line__name {
  font: var(--fk-text-h3);
  color: var(--fk-text-primary);
}

.fk-line__badge {
  display: flex;
}

.fk-line__dl {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-8);
  margin: 0;
}

.fk-line__dl dd {
  margin: 0;
  font: var(--fk-text-caption);
  color: var(--fk-text-secondary);
}

/* Цена прижата к низу карточки, чтобы у всех четырёх линеек она
   стояла на одной линии независимо от длины описания. */
.fk-line__price {
  margin-top: auto;
  padding-top: var(--fk-space-16);
  border-top: var(--fk-border-w) solid var(--fk-border-default);
  font: var(--fk-text-h3);
  font-family: var(--fk-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fk-text-primary);
  white-space: nowrap;
}

.fk-line__price span {
  font-size: 12px;
  color: var(--fk-text-muted);
}

/* «По расчёту» — не цифра, поэтому не моно и приглушённо: линейка без цены
   не должна выглядеть как линейка с нулевой ценой. */
.fk-line__calc {
  font: var(--fk-text-caption);
  font-family: var(--fk-font-body);
  color: var(--fk-text-muted);
}

/* --- Шаги заказа --------------------------------------------------------- */

.fk-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fk-space-48);
  margin-top: var(--fk-block-gap);
}

/* Четыре цифры ровной сеткой, а не flex-строкой.
   Во flex они не помещались в ряд: «22 500 ₽» при кегле до 72px занимает
   пол-контейнера, и четвёртое число переносилось на вторую строку, где
   висело в одиночестве. Сетка держит колонки одинаковыми при любой длине
   значения: 4 → 2 → 1. */
.fk-metrics--grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fk-space-32);
  align-items: start;
}

/* Кегль ниже, чем у одиночной геройской цифры: в ряду из четырёх и с
   пятизначными ценами 72px не читаются как акцент, а просто ломают ряд.
   Диапазон подобран так, чтобы «22 500 ₽» помещалось в колонку целиком
   на всех ширинах от 360px. */
.fk-metrics--grid .fk-metric__value {
  font-size: clamp(28px, 18px + 1.7vw, 44px);
  line-height: 1.05;
  white-space: nowrap;
}

.fk-metrics--grid .fk-metric__label {
  max-width: none;
}

/* Карточки причин одной высоты — иначе три разных по длине текста
   дают рваный нижний край. */
.fk-pillars > .fk-pillar {
  height: 100%;
}

/* --- О нас --------------------------------------------------------------- */

.fk-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fk-space-48);
  align-items: start;
}

.fk-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-16);
}

.fk-about__list {
  font: var(--fk-text-body);
}

.fk-about__actions {
  display: flex;
  gap: var(--fk-space-12);
  flex-wrap: wrap;
}

.fk-about__media {
  display: grid;
  gap: var(--fk-space-16);
}

.fk-about__media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fk-space-16);
}

.fk-about__ph {
  aspect-ratio: 4 / 3;
  width: 100%;
}

.fk-about__ph--wide {
  aspect-ratio: 16 / 9;
}

/* --- Работы -------------------------------------------------------------- */

.fk-case__ph {
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* Шапка секции с панелью справа. В дизайн-системе .fk-sectionhead--split
   переводит шапку в строку, но обёртки для левой колонки в классовом слое
   нет: React-компонент собирает её инлайновым стилем. Значит, пишем сами —
   без обёртки кикер, заголовок и лид разъезжаются по строке. */
.fk-sectionhead__main {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-12);
  min-width: 0;
}

.fk-sectionhead__aside {
  min-width: 0;
  max-width: 100%;
}

/* Панель фильтров. В дизайн-системе .fk-filters — всегда горизонтальная
   прокрутка (nowrap + overflow-x:auto). Для мобильной ленты это верно,
   а рядом с заголовком на десктопе давало обрезанный справа фильтр:
   шесть категорий не помещались в остаток строки, и «Корзины» просто
   не было видно — прокрутку внутри строки пользователь не ищет.
   Поэтому на широких экранах разрешаем перенос, на узких возвращаем
   ленту с прокруткой. Пороги — как во всей системе, desktop-first. */
.fk-filters--portfolio {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  overflow-x: visible;
  padding-bottom: var(--fk-space-4);
}

.fk-portfolio__empty {
  margin-top: var(--fk-block-gap);
}

.fk-portfolio__note {
  margin-top: var(--fk-block-gap);
}

/* --- Прайс --------------------------------------------------------------- */

.fk-pricegroup {
  display: flex;
  flex-direction: column;
  gap: var(--fk-block-gap);
}

.fk-pricegroup__item {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-12);
}

.fk-pricegroup__title {
  font: var(--fk-text-h3);
}

.fk-pricegroup__note {
  margin-top: var(--fk-space-16);
  border: var(--fk-border-w) solid var(--fk-border-default);
  border-radius: var(--fk-radius-4);
}

.fk-pricegroup__cta {
  display: flex;
  align-items: center;
  gap: var(--fk-space-16);
  flex-wrap: wrap;
  margin-top: var(--fk-block-gap);
}

.fk-price__card-title {
  font: var(--fk-text-body-strong);
  color: var(--fk-text-primary);
}

/* --- Форма заявки -------------------------------------------------------- */

.fk-leadform {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--fk-space-48);
  padding: var(--fk-space-48);
}

.fk-leadform__text,
.fk-leadform__form {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-16);
}

.fk-leadform__badges {
  display: flex;
  gap: var(--fk-space-12);
  flex-wrap: wrap;
}

/* --- Контакты ------------------------------------------------------------ */

.fk-contacts {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--fk-space-32);
}

.fk-contacts__info {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-16);
}

.fk-contacts__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fk-space-8) var(--fk-space-16);
  font: var(--fk-text-body);
  margin: 0;
}

.fk-contacts__dl dd {
  margin: 0;
  color: var(--fk-text-primary);
}

/* Неподтверждённое значение видно как неподтверждённое, а не как факт. */
.fk-contacts__todo {
  color: var(--fk-text-muted);
}

.fk-map {
  position: relative;
  min-height: 320px;
  border: var(--fk-border-w) solid var(--fk-border-default);
  border-radius: var(--fk-radius-8);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.fk-map__ph {
  position: absolute;
  inset: 0;
}

.fk-map__btn {
  position: relative;
}

/* --- SEO-зона и FAQ ------------------------------------------------------ */

.fk-seofaq {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--fk-space-48);
  align-items: start;
}

.fk-seofaq__text,
.fk-seofaq__faq {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-16);
}

/* FAQ на <details>: дизайн-система рассчитана на кнопку с data-open,
   поэтому подгоняем нативную механику под её вид. */
.fk-faq__item > summary {
  list-style: none;
  cursor: pointer;
}

.fk-faq__item > summary::-webkit-details-marker,
.fk-faq__item > summary::marker {
  display: none;
  content: "";
}

.fk-faq__item[open] .fk-faq__sign::after {
  transform: scaleY(0);
}

/* --- Подвал: две почты и неактивные мессенджеры -------------------------- */

.fk-footer__mails {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Кнопка мессенджера без ссылки: заказчик её ещё не дал. Показываем
   приглушённо и без указателя-руки — видно, что кнопка есть, но не работает. */
.fk-msgbtn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* Пометка в мобильном меню (например «флагман»). */
.fk-drawer__meta {
  color: var(--fk-text-muted);
  font-size: 12px;
}

/* --- Адаптив ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .fk-metrics {
    gap: var(--fk-space-32);
  }

  .fk-metrics--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fk-space-24);
  }

  .fk-about,
  .fk-leadform,
  .fk-contacts,
  .fk-seofaq {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fk-space-32);
  }

  .fk-leadform {
    padding: var(--fk-space-24);
  }
}

@media (max-width: 767px) {
  /* Здесь шапка секции уже в столбик, панель занимает всю ширину — и лента
     с прокруткой снова уместна: шесть категорий в две строки съели бы
     первый экран блока. */
  .fk-filters--portfolio {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .fk-metrics {
    gap: var(--fk-space-24);
  }

  /* На телефоне четыре цифры в две колонки читаются лучше, чем в одну:
     подписи короткие, а столбик из четырёх крупных чисел растягивает
     блок на пол-экрана. */
  .fk-metrics--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fk-space-16);
  }

  .fk-about__media-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Длинные подписи кнопок: у .fk-btn в дизайн-системе white-space: nowrap,
     и на узком экране кнопка вылезала за край. На мобильном такие кнопки
     во всю ширину и с переносом, минимальная высота 48px — мобильный CTA. */
  .fk-about__actions .fk-btn,
  .fk-pricegroup__cta .fk-btn,
  .fk-portfolio__more .fk-btn,
  .fk-hero__actions .fk-btn,
  .fk-empty .fk-btn {
    width: 100%;
    white-space: normal;
    height: auto;
    min-height: var(--fk-tap-cta);
    padding-block: var(--fk-space-12);
    text-align: center;
  }

  /* Таймлайн: номер вынесен абсолютом на left: -32px и при page-x 16px
     уезжал за левый край. На мобильном возвращаем его в поток. */
  .fk-step--timeline {
    padding-left: var(--fk-space-24);
    padding-bottom: var(--fk-space-24);
  }

  .fk-step--timeline .fk-step__num {
    position: static;
    transform: none;
  }
}

/* ===== sections/layout.css ===== */
/* ==========================================================================
   sections/layout.css — каркас страницы.
   Пишем руками (дизайн-система задаёт компоненты, но не каркас документа).
   Только var(--fk-*), хардкод значений запрещён.
   ========================================================================== */

.fk-page {
  min-height: 100vh;
}

/* Атрибут hidden обязан выигрывать у компонентных правил.
   Причина: в дизайн-системе компоненты рассчитаны на React, который просто
   не монтирует закрытый элемент, поэтому «закрытого» состояния в CSS у них
   нет. У .fk-drawer стоит безусловный display:flex — он перебивал
   браузерное [hidden]{display:none}, и мобильное меню висело поверх страницы
   на всех ширинах, включая десктоп. Именно это выглядело как «часть
   мобильного, часть десктопа».
   Правило общее, а не только для drawer: та же ловушка ждёт modal, sheet
   и toast, когда до них дойдёт дело. */
[hidden] {
  display: none !important;
}

/* Липкая нижняя панель — только мобильная (ТЗ: «мобильный quick-bar 56px»).
   В дизайн-системе у .fk-quickbar нет правила, скрывающего её на десктопе:
   она объявлена `display:grid` без медиазапроса. На ПК это давало мобильный
   бар на четыре кнопки во всю ширину экрана поверх подвала — сайт выглядел
   так, будто отдалась мобильная вёрстка. Передано дизайнеру.

   Скрываем по умолчанию и включаем на узких экранах, чтобы не заводить
   min-width: вся система написана desktop-first на max-width. */
.fk-quickbar {
  display: none;
}

@media (max-width: 1023px) {
  .fk-quickbar {
    display: grid;
  }

  /* Панель не должна перекрывать контент: резервируем её высоту + safe-area. */
  .fk-page {
    padding-bottom: calc(var(--fk-quickbar-h) + var(--fk-safe-b));
  }
}

/* Ссылка «к содержанию»: первое, что получает фокус с клавиатуры.
   Видима только при фокусе, но всегда в DOM. */
.fk-skip {
  position: absolute;
  top: var(--fk-space-8);
  left: var(--fk-space-8);
  z-index: calc(var(--fk-z-header) + 1);
  padding: var(--fk-space-8) var(--fk-space-16);
  min-height: var(--fk-tap-min);
  display: inline-flex;
  align-items: center;
  background: var(--fk-accent-primary);
  color: var(--fk-text-on-accent);
  font: var(--fk-text-button);
  font-family: var(--fk-font-display);
  letter-spacing: var(--fk-tracking-upper);
  text-transform: uppercase;
  border-radius: var(--fk-radius-button);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--fk-space-16)));
  transition: transform var(--fk-dur-fast) var(--fk-ease-out);
}

.fk-skip:focus-visible {
  transform: none;
  text-decoration: none;
  color: var(--fk-text-on-accent);
}

/* Кольцо фокуса на залитых акцентом поверхностях.
   В дизайн-системе --focus-ring-color = --accent-primary, то есть синий.
   На синей кнопке синее кольцо не видно вообще, на янтарной читается плохо.
   Поэтому: на синих поверхностях кольцо белое, на янтарных — тёмное.
   Замечание передано дизайнеру, правильное место — его tokens/shape.css. */
.fk-btn--primary:focus-visible,
.fk-badge--accent:focus-visible,
.fk-iconbtn--solid:focus-visible,
.fk-tabswitch__item[aria-selected="true"]:focus-visible,
.fk-filters__item[aria-selected="true"]:focus-visible,
.fk-skip:focus-visible {
  outline-color: var(--fk-c-white);
}

.fk-btn--cta:focus-visible,
.fk-quickbar__item--cta:focus-visible {
  outline-color: var(--fk-c-ink-900);
}

/* Контраст статусов на их же подложках.
   В палитре «Сталь и доверие» две пары не дотягивают до 4.5:1, которые требует
   ТЗ (проверено расчётом, не на глаз):
     state-success #0B8A5F на tint-success #E7F6EF → 3.91:1
     state-error   #D42B1F на tint-error   #FDECEA → 4.41:1
   Затемняем ровно настолько, чтобы пройти порог, оттенок сохраняем:
   4.67:1 и 4.55:1. На белом фоне оба остаются 5.21:1.

   Правится это в палитре дизайнера, а не здесь — замечание отправлено.
   Наша правка узкая: только цвет текста внутри цветного бейджа и callout-а,
   поэтому переезд на его значения ничего не сломает. */
.fk-badge--success,
.fk-callout--success .fk-callout__mark,
.fk-callout--success .fk-callout__title {
  color: #0A7C56;
}

.fk-badge--error,
.fk-callout--error .fk-callout__mark,
.fk-callout--error .fk-callout__title {
  color: #D02A1E;
}

/* Кликабельная карточка целиком: базовый a:hover{text-decoration:underline}
   из дизайн-системы иначе подчёркивает весь текст внутри карточки-ссылки. */
a.fk-card:hover,
a.fk-service:hover,
a.fk-case:hover,
a.fk-cert:hover {
  text-decoration: none;
}

/* Горизонтальные скроллеры гасят скроллбар — для клавиатуры оставляем
   доступную прокрутку контейнера. */
.fk-scroller:focus-visible {
  outline: var(--fk-focus-ring);
  outline-offset: var(--fk-focus-offset);
}

/* ===== sections/legal.css ===== */
/* ==========================================================================
   sections/legal.css — правовые страницы: политика и согласие.

   Пишем руками: в дизайн-системе таких страниц нет, они целиком наши.
   Только var(--fk-*), хардкод значений запрещён.
   ========================================================================== */

/* Реквизиты оператора: пары «что — значение». Обычный dl в .fk-prose
   выглядел бы сплошным текстом, а это самая просматриваемая часть
   документа: по ней проверяют, кто оператор и куда писать. */
.fk-legal__facts {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--fk-space-8) var(--fk-space-24);
  margin: 0;
  padding: var(--fk-pad-card-s);
  border: 1px solid var(--fk-border-default);
  border-radius: var(--fk-radius-4);
  background: var(--fk-bg-surface);
}

.fk-legal__facts dt {
  font: var(--fk-text-caption);
  color: var(--fk-text-muted);
}

.fk-legal__facts dd {
  margin: 0;
  font: var(--fk-text-body);
  color: var(--fk-text-primary);
}

@media (max-width: 767px) {
  /* На телефоне две колонки сжимаются до нечитаемых: подпись переносится
     по слогам, значение прижимается к краю. Ставим в столбик. */
  .fk-legal__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fk-space-4);
  }

  .fk-legal__facts dd {
    margin-bottom: var(--fk-space-12);
  }
}

/* Незаполненное место в документе — ИНН и наименование юрлица, которых
   заказчик пока не дал.

   Помечаем видимо, а не прячем: документ без реквизитов оператора неполон,
   и это должно быть заметно и заказчику, и любому, кто откроет страницу.
   Тихая пустота выглядела бы как готовый документ, каковым он не является.
   Цвет — статусный янтарный, тот же, что у «артикул уточняется» в каталоге. */
.fk-todo {
  display: inline-block;
  padding: 0 var(--fk-space-8);
  border: 1px dashed var(--fk-line-warn);
  border-radius: var(--fk-radius-4);
  background: var(--fk-tint-warn);
  color: var(--fk-accent-warn);
  font: var(--fk-text-caption);
  font-family: var(--fk-font-mono);
}

/* Врезка-предупреждение внутри .fk-prose: у .fk-callout в системе свои
   отступы, но внутри колонки текста ей нужен верхний зазор побольше,
   иначе она липнет к абзацу и читается как его продолжение. */
.fk-prose .fk-callout {
  margin-top: var(--fk-space-8);
}

/* Сноска в конце документа — ссылка на парный документ. */
.fk-prose .fk-footnote {
  margin-top: var(--fk-space-24);
  padding-top: var(--fk-space-16);
  border-top: 1px solid var(--fk-border-default);
}

/* ==========================================================================
   Страницы категорий: галерея и шапка.
   Живут здесь же, потому что legal.css — файл «страниц, которых нет
   в дизайн-системе». Разрастётся — вынесем в sections/category.css.
   ========================================================================== */

.fk-category__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fk-space-12);
}

.fk-category__note {
  margin-top: var(--fk-block-gap);
}

/* Кадр с подписью. Подпись — это alt того же изображения: зрячий и незрячий
   читают одно и то же, и вторая формулировка не может разойтись с первой. */
.fk-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-8);
}

.fk-shot__ph {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--fk-radius-4);
  overflow: hidden;
}

.fk-shot__caption {
  font: var(--fk-text-caption);
  color: var(--fk-text-secondary);
}

.fk-gallery__todo {
  margin-top: var(--fk-block-gap);
}

/* Список нужных кадров внутри врезки: маркер у .fk-prose li рисуется
   акцентным цветом, во врезке-предупреждении он выглядит чужеродно. */
.fk-gallery__todo .fk-prose li::before {
  background: var(--fk-accent-warn);
}