/* FASTFIX — fastfix.net.ru · landing v3 «постгарантийная воронка» (Brand Guide X 7.0 · Graphite)
   Слои: шрифты → токены → база → компоненты → секции → движение.
   Без UI-библиотек, без канвасов, без «живых» индикаторов (решение владельца, итерация 2). */

/* ───────────────────────── 0. Шрифты (self-hosted, сабсеты cyr+lat) ───────────────────────── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/Inter-var-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/Inter-var-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/JetBrainsMono-var-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/JetBrainsMono-var-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Avenir Black'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('fonts/AvenirBlack.woff2') format('woff2');
  /* только латиница, цифры, пунктуация и валюта — кириллицы в шрифте нет */
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20A0-20BF; }
@font-face { font-family: 'Visby CF'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/VisbyCF-DemiBold.woff2') format('woff2'); }
/* Метрически совместимый фолбэк Inter — без прыжка строк при подмене */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* ───────────────────────── 1. Токены ───────────────────────── */
:root {
  color-scheme: light dark;

  --ffx-brand: #8c82fc; --ffx-brand-light: #bab4fd; --ffx-brand-dark: #5e50fb; --ffx-brand-pale: #e8e6fe;
  --ffx-gradient: linear-gradient(135deg, #8c82fc 0%, #5e50fb 100%);
  --ffx-ink-950: #1f2024; --ffx-ink-900: #292a30; --ffx-ink-800: #34363d; --ffx-ink-700: #464853;
  /* Акцент-текст и иконки на графите: violet-400 = brand-fg тёмной темы гайда (6.7:1 на ink-950). Не зависит от темы */
  --ffx-ink-accent: #a49bfd;
  --ffx-success: #52c41a; --ffx-success-fg: #237804;
  --ffx-warning: #faad14; --ffx-warning-fg: #874d00;
  --ffx-error: #f5222d;   --ffx-error-fg: #cf1322;

  --ffx-canvas: #f5f5f5; --ffx-surface: #ffffff; --ffx-surface-2: #f5f5f5;
  --ffx-text: #1a1a1a; --ffx-text-2: #444444; --ffx-text-3: #666666; --ffx-text-4: #999999;
  --ffx-border: #e6e6e6; --ffx-border-2: #d1d1d1;
  --ffx-brand-fg: #5e50fb; --ffx-brand-fg-strong: #483ad1; --ffx-brand-fill: #5e50fb; --ffx-on-brand: #ffffff;
  --ffx-brand-soft: #e8e6fe;
  --ffx-badge-ok-bg: #f6ffed;  --ffx-badge-ok-fg: #237804;
  --ffx-shadow-sm: 0 1px 2px rgba(31,32,36,.06), 0 1px 3px rgba(140,130,252,.10);
  --ffx-shadow-md: 0 4px 12px -2px rgba(31,32,36,.08), 0 2px 6px rgba(140,130,252,.15);
  --ffx-shadow-lg: 0 16px 40px -12px rgba(31,32,36,.14), 0 6px 16px -6px rgba(140,130,252,.20);
  --ffx-hairline: 1px solid var(--ffx-border);
  --ffx-ring: 0 0 0 3px color-mix(in srgb, var(--ffx-brand) 35%, transparent);

  --ffx-font-display: 'Avenir Black', 'Inter', system-ui, sans-serif;
  --ffx-font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ffx-font-accent: 'Visby CF', 'Inter', sans-serif;
  --ffx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ffx-display-2: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
  --ffx-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.375rem);
  --ffx-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --ffx-lead: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);

  --ffx-gutter: clamp(16px, 4vw, 40px);
  --ffx-section: clamp(48px, 7vw, 88px);
  --ffx-container: 1200px; --ffx-container-wide: 1440px;
  --ffx-r-sm: 4px; --ffx-r-md: 8px; --ffx-r-lg: 12px; --ffx-r-xl: 16px; --ffx-r-2xl: 24px; --ffx-r-3xl: 32px; --ffx-r-full: 9999px;

  --ffx-dur-instant: 100ms; --ffx-dur-fast: 150ms; --ffx-dur-normal: 250ms; --ffx-dur-slow: 400ms; --ffx-dur-deliberate: 600ms;
  --ffx-ease-out: cubic-bezier(.2, 0, 0, 1); --ffx-ease-in: cubic-bezier(.4, 0, 1, 1);
  --ffx-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --ffx-spring-snappy: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.06 20.4%, 1.084, 1.09 24.3%, 1.085, 1.06 32.8%, 1.02 39.6%, 1.006 43.1%, 0.998, 0.995 51%, 0.997 57.1%, 1);
  --ffx-z-nav: 50; --ffx-z-toast: 90;
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ffx-canvas: #1f2024; --ffx-surface: #292a30; --ffx-surface-2: #34363d;
    --ffx-text: #e8e8ec; --ffx-text-2: #b9b9c9; --ffx-text-3: #9a9ab0; --ffx-text-4: #7a7a90;
    --ffx-border: #464853; --ffx-border-2: #565866;
    --ffx-brand-fg: #a49bfd; --ffx-brand-fg-strong: #bab4fd; --ffx-brand-fill: #8c82fc; --ffx-on-brand: #1f2024;
    --ffx-brand-soft: color-mix(in srgb, #8c82fc 18%, #292a30);
    --ffx-badge-ok-bg: color-mix(in srgb, #52c41a 16%, #292a30); --ffx-badge-ok-fg: #95de64;
    --ffx-success-fg: #95de64; --ffx-error-fg: #ff7875;
    --ffx-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --ffx-shadow-md: 0 4px 12px -2px rgba(0,0,0,.5);
    --ffx-shadow-lg: 0 16px 40px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --ffx-canvas: #1f2024; --ffx-surface: #292a30; --ffx-surface-2: #34363d;
  --ffx-text: #e8e8ec; --ffx-text-2: #b9b9c9; --ffx-text-3: #9a9ab0; --ffx-text-4: #7a7a90;
  --ffx-border: #464853; --ffx-border-2: #565866;
  --ffx-brand-fg: #a49bfd; --ffx-brand-fg-strong: #bab4fd; --ffx-brand-fill: #8c82fc; --ffx-on-brand: #1f2024;
  --ffx-brand-soft: color-mix(in srgb, #8c82fc 18%, #292a30);
  --ffx-badge-ok-bg: color-mix(in srgb, #52c41a 16%, #292a30); --ffx-badge-ok-fg: #95de64;
  --ffx-success-fg: #95de64; --ffx-error-fg: #ff7875;
  --ffx-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --ffx-shadow-md: 0 4px 12px -2px rgba(0,0,0,.5);
  --ffx-shadow-lg: 0 16px 40px -12px rgba(0,0,0,.6);
}

/* ───────────────────────── 2. База ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip; }
body {
  margin: 0; background: var(--ffx-canvas); color: var(--ffx-text);
  font: 400 16px/1.55 var(--ffx-font-sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ffx-brand-fg); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
strong, b { font-weight: 700; }
p, li { text-wrap: pretty; }
:focus-visible { outline: none; box-shadow: var(--ffx-ring); border-radius: var(--ffx-r-sm); }
::selection { background: color-mix(in srgb, var(--ffx-brand) 30%, transparent); }
/* Любой авторский display отменяет [hidden] из UA-стилей (например .field { display: grid }) — возвращаем. */
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--ffx-font-mono); }
.ico-inline { display: inline; width: 13px; height: 13px; vertical-align: -1px; margin-left: 2px; }

.h1 { font-size: var(--ffx-display-2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.h2 { font-size: var(--ffx-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.h3 { font-size: var(--ffx-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.h1 em, .h2 em, .h3 em { font-style: normal; color: var(--ffx-brand-fg); }
/* Словесный знак в заголовке: Avenir Black, капс, цвет наследуется (v6 §02 wordmark; X §4 — латиница в display) */
.wm { font-family: var(--ffx-font-display); font-weight: 900; font-size: .94em; letter-spacing: -0.015em; white-space: nowrap; }
.ink .h1 em, .ink .h2 em, .ink .h3 em { color: var(--ffx-ink-accent); }
.lead { font-size: var(--ffx-lead); line-height: 1.5; color: var(--ffx-text-2); max-width: 60ch; text-wrap: pretty; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 12px/1 var(--ffx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ffx-brand-fg); }
.eyebrow .n { color: var(--ffx-text-4); }
.ink .eyebrow { color: var(--ffx-ink-accent); }
.ink .eyebrow .n { color: #7a7a90; }
.note { font-size: 13px; color: var(--ffx-text-3); line-height: 1.5; }
.opt { font-weight: 400; color: var(--ffx-text-4); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--ffx-brand-fill); color: var(--ffx-on-brand); font-weight: 600; }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: var(--ffx-container); margin-inline: auto; padding-inline: var(--ffx-gutter); }
.container--wide { max-width: var(--ffx-container-wide); }
.section { padding-block: var(--ffx-section); }
.section--tight { padding-block: clamp(32px, 5vw, 64px); }
.section__head { display: grid; gap: 10px; max-width: 640px; margin-bottom: clamp(20px, 3vw, 36px); }
.section__head .lead { margin-top: 4px; }

/* Ink — графит. Тени на графите чёрные независимо от темы */
.ink { background: var(--ffx-ink-950); color: #fff; color-scheme: dark;
  --ffx-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --ffx-shadow-md: 0 4px 12px -2px rgba(0,0,0,.5); --ffx-shadow-lg: 0 16px 40px -12px rgba(0,0,0,.55); }
.ink .lead { color: #b9b9c9; }
.ink a:not(.btn) { color: var(--ffx-ink-accent); }

/* Paper-карточка внутри Ink */
.paper { background: var(--ffx-surface); color: var(--ffx-text); border: var(--ffx-hairline); color-scheme: light; }
:root[data-theme="dark"] .paper { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paper { color-scheme: dark; } }
.ink .paper a:not(.btn) { color: var(--ffx-brand-fg); }
.ink .paper .eyebrow { color: var(--ffx-brand-fg); }
.ink .paper .eyebrow .n { color: var(--ffx-text-4); }
.ink .paper .field__label, .ink .paper legend.field__label { color: var(--ffx-text-2); }
.ink .paper .field__hint { color: var(--ffx-text-3); }
.ink .paper .field__err { color: var(--ffx-error-fg); }
.ink .paper .input { background-color: var(--ffx-surface); border-color: var(--ffx-border-2); color: var(--ffx-text); }
.ink .paper .input::placeholder { color: var(--ffx-text-4); }

/* Акцент-карточка на графите внутри Paper-секций */
.card--ink { background: var(--ffx-ink-900); border: 1px solid var(--ffx-ink-700); color: #e8e8ec; border-radius: var(--ffx-r-xl); color-scheme: dark;
  --ffx-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --ffx-shadow-md: 0 4px 12px -2px rgba(0,0,0,.5); }
.card--ink p, .card--ink li { color: #b9b9c9; }
.card--ink b, .card--ink h3, .card--ink h4 { color: #fff; }
.card--ink a:not(.btn) { color: var(--ffx-ink-accent); }
.card--ink .eyebrow { color: var(--ffx-ink-accent); }
.card--ink .eyebrow .n { color: #7a7a90; }

/* ───────────────────────── 3. Компоненты ───────────────────────── */
/* Кнопки */
.btn { --_bg: var(--ffx-surface); --_fg: var(--ffx-text); --_bd: var(--ffx-border-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--ffx-r-md);
  font-weight: 600; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; user-select: none;
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); cursor: pointer;
  transition: background var(--ffx-dur-fast) var(--ffx-ease-out), border-color var(--ffx-dur-fast), color var(--ffx-dur-fast), box-shadow var(--ffx-dur-fast), transform var(--ffx-dur-slow) var(--ffx-spring), filter var(--ffx-dur-fast); }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0) scale(.985); transition-duration: var(--ffx-dur-instant); }
.btn:focus-visible { outline: none; box-shadow: var(--ffx-ring); }
.btn svg { width: 18px; height: 18px; flex: none; transition: translate var(--ffx-dur-normal) var(--ffx-spring); }
.btn:hover svg.arrow { translate: 3px 0; }
.btn--primary { --_bg: var(--ffx-brand-fill); --_fg: var(--ffx-on-brand); --_bd: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(94,80,251,.25); }
.btn--primary:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px -6px rgba(94,80,251,.55); }
.btn--brand { --_bg: var(--ffx-brand-fill); --_fg: var(--ffx-on-brand); --_bd: transparent; font-size: 17px; height: 54px; padding: 0 26px; border-radius: var(--ffx-r-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 24px -8px rgba(0,0,0,.35); }
.btn--brand:hover { filter: brightness(1.05); }
/* только на графите: #8c82fc + графитовый текст (5.2:1), не зависит от темы */
.btn--brand-ink { --_bg: #8c82fc; --_fg: #1f2024; --_bd: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px -10px rgba(0,0,0,.5); }
.btn--brand-ink:hover { --_bg: #9c93fd; filter: none; }
.btn--secondary { --_bg: transparent; --_fg: var(--ffx-brand-fg); --_bd: color-mix(in srgb, var(--ffx-brand) 55%, transparent); }
.btn--secondary:hover { --_bg: var(--ffx-brand-soft); }
.btn--ghost { --_bg: transparent; --_fg: var(--ffx-text-2); --_bd: transparent; }
.btn--ghost:hover { --_bg: var(--ffx-surface-2); --_fg: var(--ffx-text); }
.btn--on-ink { --_bg: rgba(255,255,255,.08); --_fg: #fff; --_bd: rgba(255,255,255,.16); }
.btn--on-ink:hover { --_bg: rgba(255,255,255,.14); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn--icon { width: 44px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading svg { opacity: 0; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--_fg) 30%, transparent); border-top-color: var(--_fg); animation: ffx-spin .7s linear infinite; }
@keyframes ffx-spin { to { rotate: 360deg; } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Чипы, бейджи, теги */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px 6px 10px; border-radius: var(--ffx-r-full); border: 1px solid var(--ffx-border-2); background: var(--ffx-surface); color: var(--ffx-text-2); font-size: 13px; font-weight: 500; line-height: 1.25; }
.chip svg { width: 15px; height: 15px; color: var(--ffx-brand-fg); flex: none; }
.ink .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e8e8ec; }
.ink .chip svg { color: var(--ffx-ink-accent); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--ffx-r-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge--demo { background: var(--ffx-surface-2); color: var(--ffx-text-3); border: var(--ffx-hairline); }
.badge--verified { background: var(--ffx-badge-ok-bg); color: var(--ffx-badge-ok-fg); }
.badge svg { width: 12px; height: 12px; }
.tag { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--ffx-surface-2); color: var(--ffx-text-2); border: var(--ffx-hairline); }

/* Маркеры ✕ / ✓ */
.mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mark svg { width: 13px; height: 13px; }
.mark--no { background: color-mix(in srgb, var(--ffx-error) 12%, transparent); color: var(--ffx-error-fg); }
.mark--yes { background: color-mix(in srgb, var(--ffx-success) 14%, transparent); color: var(--ffx-success-fg); }
.ink .mark--no, .card--ink .mark--no { background: rgba(255,120,117,.14); color: #ff7875; }
.ink .mark--yes, .card--ink .mark--yes { background: rgba(149,222,100,.14); color: #95de64; }

/* Поля */
.field { display: grid; gap: 6px; text-align: left; min-width: 0; position: relative; }
.field__label, legend.field__label { font-size: 13px; font-weight: 600; color: var(--ffx-text-2); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ink .field__label { color: #e8e8ec; }
.field__hint { font-size: 12.5px; color: var(--ffx-text-3); line-height: 1.45; }
.field__hint[data-city-hint]:not([hidden]) { margin-top: 2px; }
.ink .field__hint { color: #9a9ab0; }
.field__err { font-size: 12.5px; color: var(--ffx-error-fg); display: none; }
.ink .field__err { color: #ff7875; }
.field.is-invalid .field__err, .field:has(.input:user-invalid) .field__err { display: block; }
.field.is-invalid .input, .input:user-invalid { border-color: var(--ffx-error); }
.input { height: 46px; width: 100%; border: 1px solid var(--ffx-border-2); border-radius: var(--ffx-r-md); padding: 0 14px; background: var(--ffx-surface); color: var(--ffx-text); font: 400 15px/1.3 var(--ffx-font-sans); transition: border-color var(--ffx-dur-fast), box-shadow var(--ffx-dur-fast); }
.input::placeholder { color: var(--ffx-text-4); }
.input:hover { border-color: color-mix(in srgb, var(--ffx-brand) 40%, var(--ffx-border-2)); }
.input:focus { outline: none; border-color: var(--ffx-brand); box-shadow: var(--ffx-ring); }
.input--sm { height: 40px; font-size: 14px; }
.input--code { font-family: var(--ffx-font-mono); letter-spacing: .02em; text-transform: uppercase; }
.input--code::placeholder { text-transform: none; font-family: var(--ffx-font-sans); letter-spacing: 0; }
.input--phone { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
textarea.input { height: auto; min-height: 72px; padding: 10px 14px; resize: vertical; field-sizing: content; max-height: 220px; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; text-overflow: ellipsis; }
.ink .input { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.ink .input::placeholder { color: #7a7a90; }
.ink select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b9b9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.ink select.input option { color: #1a1a1a; background: #fff; }
.input-wrap { position: relative; display: grid; }
.input-wrap > svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ffx-text-4); pointer-events: none; }
.input-wrap > svg + .input { padding-left: 42px; }
.input-wrap .prefix { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-weight: 600; color: var(--ffx-text-3); pointer-events: none; font-variant-numeric: tabular-nums; }
.ink .input-wrap .prefix { color: #b9b9c9; }
.ink .paper .input-wrap .prefix { color: var(--ffx-text-3); }
.input-wrap .prefix + .input { padding-left: 42px; }

/* Радиокарточки техники */
.devs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dev { position: relative; display: grid; gap: 6px; justify-items: center; align-content: start; padding: 12px 6px 10px; border-radius: var(--ffx-r-lg); border: 1px solid var(--ffx-border); background: var(--ffx-surface); font-size: 12.5px; font-weight: 600; color: var(--ffx-text-3); cursor: pointer; text-align: center; line-height: 1.2; transition: border-color var(--ffx-dur-fast), background var(--ffx-dur-fast), color var(--ffx-dur-fast), transform var(--ffx-dur-normal) var(--ffx-spring); }
.dev input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.dev svg { width: 22px; height: 22px; }
.dev:hover { border-color: color-mix(in srgb, var(--ffx-brand) 50%, transparent); transform: translateY(-1px); }
.dev:has(input:checked) { border-color: var(--ffx-brand); background: var(--ffx-brand-soft); color: var(--ffx-brand-fg-strong); }
.dev:has(input:focus-visible) { box-shadow: var(--ffx-ring); }
.devs--calc .dev { padding: 14px 8px 12px; font-size: 13px; }
@media (max-width: 520px) {
  .devs, .devs--calc { grid-template-columns: repeat(2, 1fr); }
  /* на телефоне карточка техники — горизонтальная строка: вдвое ниже, форма помещается на экран */
  .dev, .devs--calc .dev { grid-template-columns: 22px 1fr; justify-items: start; align-items: center; text-align: left; padding: 10px 12px; gap: 10px; }
}

/* Пилюли брендов (и как radio, и как ссылки) */
.bchips { display: flex; flex-wrap: wrap; gap: 8px; }
.bchip { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 6px 13px; border-radius: var(--ffx-r-full); border: 1px solid var(--ffx-border-2); background: var(--ffx-surface); color: var(--ffx-text-2); font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: default; transition: border-color var(--ffx-dur-fast), background var(--ffx-dur-fast), color var(--ffx-dur-fast), transform var(--ffx-dur-normal) var(--ffx-spring); }
.bchip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
label.bchip, .bchip.is-link { cursor: pointer; }
label.bchip:hover, .bchip.is-link:hover { border-color: var(--ffx-brand); color: var(--ffx-brand-fg); transform: translateY(-1px); text-decoration: none; }
.bchip:has(input:checked) { background: var(--ffx-brand-soft); border-color: var(--ffx-brand); color: var(--ffx-brand-fg-strong); }
.bchip:has(input:focus-visible) { box-shadow: var(--ffx-ring); }
.bchip--muted { font-weight: 500; color: var(--ffx-text-3); border-style: dashed; }

/* Сегментированный переключатель (radio) */
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: var(--ffx-surface-2); border: var(--ffx-hairline); gap: 2px; position: relative; max-width: 100%; }
.seg__opt { position: relative; height: 38px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ffx-text-3); display: inline-flex; align-items: center; gap: 8px; transition: color var(--ffx-dur-fast), background var(--ffx-dur-fast); cursor: pointer; white-space: nowrap; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.seg__opt:hover { color: var(--ffx-text); }
.seg__opt:has(input:checked), .seg__opt[aria-selected="true"] { color: var(--ffx-text); background: var(--ffx-surface); box-shadow: var(--ffx-shadow-sm); }
.seg__opt:has(input:focus-visible) { box-shadow: var(--ffx-ring); }

/* Согласие */
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.45; color: var(--ffx-text-3); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ffx-brand-fill); cursor: pointer; }
.consent a { font-weight: 600; }
.consent.is-invalid { color: var(--ffx-error-fg); }
.lf__grp.is-invalid .devs, .lf__grp.is-invalid .bchips { outline: 1px solid var(--ffx-error); outline-offset: 2px; border-radius: 10px; }
.ink .consent { color: #9a9ab0; }
.ink .paper .consent { color: var(--ffx-text-3); }

/* Форма заявки */
.lf { display: grid; gap: 16px; width: 100%; }
.lf__head { display: grid; gap: 6px; }
.lf__head .h3 { font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem); font-weight: 800; letter-spacing: -0.025em; margin-top: 4px; }
.lf__grp { display: grid; gap: 8px; }
.lf__other { margin-top: 2px; }
/* Подсказки под полем: бренды из каталога и адреса DaData (ARIA combobox).
   position: fixed — секции .hero и .cta режут по `overflow: clip`, из absolute всплывашка
   обрезалась бы; координаты и раскрытие вверх/вниз считает JS при открытии и на скролле. */
.sug { position: fixed; z-index: 80; display: grid; padding: 6px; border-radius: var(--ffx-r-lg); border: var(--ffx-hairline); background: var(--ffx-surface); box-shadow: var(--ffx-shadow-lg); text-align: left; }
.sug__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 268px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sug__opt { display: grid; gap: 2px; padding: 9px 10px; border-radius: var(--ffx-r-md); cursor: pointer; font-size: 14px; line-height: 1.3; color: var(--ffx-text); }
.sug__opt b { font-weight: 500; }
.sug__opt small { font-size: 12px; color: var(--ffx-text-3); }
.sug__opt mark { background: none; color: var(--ffx-brand-fg); font-weight: 600; }
.sug__opt:hover, .sug__opt[aria-selected="true"] { background: var(--ffx-brand-soft); }
.sug__hint { margin: 0; padding: 8px 10px; font-size: 12.5px; color: var(--ffx-text-3); }
.sug--ink { background: var(--ffx-ink-900); border-color: rgba(255,255,255,.14); color-scheme: dark; }
.sug--ink .sug__opt { color: #e8e8ec; }
.sug--ink .sug__opt:hover, .sug--ink .sug__opt[aria-selected="true"] { background: rgba(255,255,255,.09); }
.sug--ink .sug__opt small, .sug--ink .sug__hint { color: #9a9ab0; }
.sug--ink .sug__opt mark { color: var(--ffx-ink-accent); }
.lf__row { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.lf__row--2 { grid-template-columns: 1fr 1fr; }
.lf__row--3 { grid-template-columns: 1fr 1fr 1.1fr; }
.lf__more { font-size: 13px; color: var(--ffx-text-3); }
.lf__more summary { list-style: none; cursor: pointer; font-weight: 600; color: var(--ffx-brand-fg); display: inline-flex; gap: 6px; align-items: center; }
.lf__more summary::-webkit-details-marker { display: none; }
.lf__more summary::before { content: "+"; font-family: var(--ffx-font-mono); font-weight: 600; }
.lf__more[open] summary::before { content: "−"; }
.lf__more textarea { margin-top: 8px; }
.lf__actions { display: grid; gap: 10px; }
.lf__actions .btn { width: 100%; }
.lf__done { display: grid; gap: 12px; padding: 18px; border-radius: var(--ffx-r-xl); background: var(--ffx-brand-soft); border: 1px solid color-mix(in srgb, var(--ffx-brand) 35%, transparent); font-size: 14.5px; line-height: 1.5; color: var(--ffx-text-2); }
.lf__done h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ffx-text); }
.lf__done .num { font-family: var(--ffx-font-mono); font-weight: 600; }
.lf__done .btn-row { margin-top: 2px; }
.lf__next { display: grid; gap: 7px; margin: 0; padding-left: 20px; list-style: decimal; }
.lf__next li::marker { font-family: var(--ffx-font-mono); font-weight: 600; color: var(--ffx-text-3); }
.lf__next b { color: var(--ffx-text); }
.lf__note { font-size: 13px; color: var(--ffx-text-3); }
.lf__done--error { background: color-mix(in srgb, var(--ffx-error) 10%, var(--ffx-surface)); border-color: color-mix(in srgb, var(--ffx-error) 40%, transparent); }
.lf.is-done > :not(.lf__done) { display: none; }
.lf--compact { max-width: 720px; }
.lf--compact .lf__actions { grid-template-columns: auto 1fr; align-items: center; }
.lf--compact .lf__actions .btn { width: auto; }
.ink .lf--compact .lf__done { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e8e8ec; }
.ink .lf--compact .lf__done h3 { color: #fff; }
.ink .lf--compact .lf__next b, .ink .lf--compact .lf__next li::marker { color: #fff; }
.ink .lf--compact .lf__note { color: #9a9ab0; }
@media (max-width: 560px) { .lf__row, .lf__row--2, .lf__row--3 { grid-template-columns: 1fr; } .lf--compact .lf__actions { grid-template-columns: 1fr; } .lf--compact .lf__actions .btn { width: 100%; } }

/* Форма трекинга */
.track { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.track__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
@media (max-width: 520px) { .track__row { grid-template-columns: 1fr; } .track__row .btn { width: 100%; } }

/* Карточка, тайлы */
.card { border-radius: var(--ffx-r-xl); border: var(--ffx-hairline); background: var(--ffx-surface); padding: 22px; }
.tile { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--ffx-r-xl); border: var(--ffx-hairline); background: var(--ffx-surface); }
.tile__icn, .icn { width: 40px; height: 40px; border-radius: 12px; background: var(--ffx-brand-soft); color: var(--ffx-brand-fg); display: grid; place-items: center; }
.tile__icn svg, .icn svg { width: 20px; height: 20px; }
.tile h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; margin-top: 4px; }
.tile p { font-size: 14px; color: var(--ffx-text-2); line-height: 1.55; }

/* Карточка мастера (пример) */
.tcard { display: grid; gap: 14px; padding: 20px; border-radius: var(--ffx-r-2xl); border: var(--ffx-hairline); background: var(--ffx-surface); align-content: start; box-shadow: var(--ffx-shadow-md); }
.tcard__head { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.avatar { width: 56px; height: 56px; border-radius: 16px; background: var(--ffx-gradient); display: grid; place-items: center; color: #fff; font-family: var(--ffx-font-display); font-weight: 900; font-size: 20px; letter-spacing: -0.02em; position: relative; flex: none; }
.tcard__name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.rating svg { width: 14px; height: 14px; color: var(--ffx-warning); }
.rating small { font-weight: 500; color: var(--ffx-text-3); font-size: 12px; }
.tcard__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tcard__meta div { padding: 8px 10px; border-radius: 8px; background: var(--ffx-surface-2); }
.tcard__meta b { display: block; font-family: var(--ffx-font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tcard__meta span { font: 500 10.5px/1.3 var(--ffx-font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ffx-text-3); }
.tcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(160px, auto); gap: 12px; width: 100%; }
.bento > * { border-radius: var(--ffx-r-2xl); border: var(--ffx-hairline); background: var(--ffx-surface); padding: 22px; display: grid; align-content: end; gap: 6px; position: relative; overflow: hidden; text-align: left; }
.bento h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.bento p { font-size: 13.5px; color: var(--ffx-text-2); line-height: 1.5; }
.bento .big { font-family: var(--ffx-font-display); font-weight: 900; font-size: 40px; letter-spacing: -0.03em; line-height: 1; color: var(--ffx-text); font-variant-numeric: tabular-nums; }
.bento .big small { font-family: var(--ffx-font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ffx-text-3); margin-left: 4px; }
.bento .icn { background: var(--ffx-surface-2); position: absolute; top: 18px; left: 18px; }
.bento > :has(.icn) { padding-top: 74px; }
.b-a { grid-column: span 4; grid-row: span 2; background: var(--ffx-ink-950); color: #fff; border-color: #3a3c44; color-scheme: dark; min-height: 320px; padding: clamp(24px, 3vw, 36px); gap: 12px; }
.b-a h4 { color: #fff; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.b-a p { color: #b9b9c9; max-width: 58ch; font-size: 15px; }
.b-a .eyebrow { color: var(--ffx-ink-accent); }
.b-a .eyebrow .n { color: #7a7a90; }
.b-a__list { display: grid; gap: 8px; margin-top: 6px; }
.b-a__list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; color: #e8e8ec; line-height: 1.45; }
.b-b, .b-c, .b-d, .b-e, .b-f { grid-column: span 2; }
.b-e { background: var(--ffx-brand-soft); border-color: color-mix(in srgb, var(--ffx-brand) 35%, transparent); }
.b-e .icn { background: color-mix(in srgb, var(--ffx-brand) 14%, var(--ffx-surface)); }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .bento > * { align-content: start; }
  .b-a { grid-column: span 2; grid-row: span 1; min-height: 0; }
  .b-b, .b-c, .b-d, .b-e, .b-f { grid-column: span 1; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { padding: 18px; }
  .bento .big { font-size: 32px; }
  .bento > :has(.icn) { padding-top: 64px; }
  .b-a, .b-b, .b-c, .b-d, .b-e, .b-f { grid-column: 1 / -1; }
}

/* FAQ */
.faq { width: 100%; max-width: 800px; display: grid; gap: 8px; text-align: left; interpolate-size: allow-keywords; }
.faq details { border: var(--ffx-hairline); border-radius: var(--ffx-r-lg); background: var(--ffx-surface); overflow: hidden; transition: border-color var(--ffx-dur-fast); }
.faq details[open] { border-color: color-mix(in srgb, var(--ffx-brand) 45%, transparent); }
.faq summary, .pcat summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 15.5px; display: grid; grid-template-columns: 1fr 24px; gap: 12px; align-items: center; text-wrap: pretty; }
.faq summary::-webkit-details-marker, .pcat summary::-webkit-details-marker { display: none; }
.pm { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ffx-border-2); display: grid; place-items: center; color: var(--ffx-text-3); position: relative; flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; transition: rotate var(--ffx-dur-normal) var(--ffx-ease-out), opacity var(--ffx-dur-normal); width: 10px; height: 1.5px; }
.pm::after { rotate: 90deg; }
details[open] > summary .pm { color: var(--ffx-brand-fg); border-color: var(--ffx-brand); }
details[open] > summary .pm::after { rotate: 0deg; opacity: 0; }
.faq .faq__b { padding: 0 18px 18px; font-size: 14.5px; color: var(--ffx-text-2); line-height: 1.6; }
.faq .faq__b p + p { margin-top: 8px; }
.faq details::details-content, .pcat::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--ffx-dur-slow) var(--ffx-ease-out), content-visibility var(--ffx-dur-slow) allow-discrete, opacity var(--ffx-dur-normal); }
.faq details[open]::details-content, .pcat[open]::details-content { block-size: auto; opacity: 1; }

/* Тост */
.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: var(--ffx-z-toast); display: grid; gap: 10px; width: min(360px, calc(100vw - 40px)); pointer-events: none; }
.toast { pointer-events: auto; display: grid; grid-template-columns: 4px 1fr; gap: 12px; align-items: start; padding: 12px 14px 12px 0; border-radius: var(--ffx-r-lg); background: var(--ffx-surface); border: var(--ffx-hairline); box-shadow: var(--ffx-shadow-lg); font-size: 13.5px; color: var(--ffx-text-2); overflow: hidden; opacity: 1; transform: none; transition: opacity var(--ffx-dur-normal) var(--ffx-ease-out), transform var(--ffx-dur-slow) var(--ffx-spring); }
.toast::before { content: ""; align-self: stretch; border-radius: 0 2px 2px 0; background: var(--ffx-success); }
.toast--error::before { background: var(--ffx-error); }
.toast b { display: block; color: var(--ffx-text); font-size: 14px; margin-bottom: 2px; }
.toast.is-out { opacity: 0; transform: translateX(16px); }
@starting-style { .toast { opacity: 0; transform: translateX(16px); } }

/* ───────────────────────── 4. Секции ───────────────────────── */
/* Навигация — всегда графит, единственное стекло страницы */
.nav { position: sticky; top: 0; z-index: var(--ffx-z-nav); height: 64px; display: flex; align-items: center;
  background: color-mix(in srgb, var(--ffx-ink-950) 84%, transparent); border-bottom: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--ffx-ink-950); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav__in { display: flex; align-items: center; gap: 18px; }
.nav__logo { display: inline-flex; align-items: center; color: #fff; }
.nav__logo svg { height: 36px; width: auto; aspect-ratio: 3162 / 909; } /* v6 §02: веб-шапка мин. 32px, рек. 40px */
.nav__logo:hover { text-decoration: none; }
.nav__links { display: flex; gap: 2px; margin-left: 8px; }
.nav__links a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px; color: #e8e8ec; font-weight: 600; font-size: 14px; }
.nav__links a:hover { text-decoration: none; background: rgba(255,255,255,.08); color: #fff; }
.nav__sp { flex: 1; }
.nav__tel { font-weight: 600; font-size: 14px; color: #e8e8ec; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav__tel:hover { color: #fff; text-decoration: none; }
.nav .btn--ghost { --_fg: #e8e8ec; }
.nav .btn--ghost:hover { --_bg: rgba(255,255,255,.08); --_fg: #fff; }
.nav__menu { display: none; }
.theme { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #e8e8ec; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: background var(--ffx-dur-fast), border-color var(--ffx-dur-fast); }
.theme:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.theme svg { width: 18px; height: 18px; }
.theme .on-dark { display: none; }
:root[data-theme="dark"] .theme .on-dark { display: block; }
:root[data-theme="dark"] .theme .on-light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .on-dark { display: block; } :root:not([data-theme="light"]) .theme .on-light { display: none; } }
@media (max-width: 1080px) { .nav__links, .nav__tel { display: none; } .nav__menu { display: inline-flex; } }
@media (max-width: 480px) { .nav__cta { display: none; } .nav__in { gap: 10px; } }
/* Popover-меню — Paper */
.menu { margin: 0; inset: auto; position: fixed; top: 72px; right: var(--ffx-gutter); width: min(340px, calc(100vw - 2 * var(--ffx-gutter))); padding: 8px; border: var(--ffx-hairline); border-radius: var(--ffx-r-xl); background: var(--ffx-surface); color: var(--ffx-text); box-shadow: var(--ffx-shadow-lg); display: none; }
.menu:popover-open, .menu.is-open { display: grid; gap: 2px; }
.menu::backdrop { background: rgba(31,32,36,.24); }
.menu a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; color: var(--ffx-text); font-weight: 600; font-size: 15px; }
.menu a:hover { background: var(--ffx-surface-2); text-decoration: none; }
.menu a svg { width: 18px; height: 18px; color: var(--ffx-text-3); }
.menu hr { border: 0; border-top: var(--ffx-hairline); margin: 6px 8px; }
.menu .menu__cta { margin: 6px; justify-content: center; }
.menu { opacity: 0; transform: translateY(-6px) scale(.985); transition: opacity var(--ffx-dur-normal) var(--ffx-ease-out), transform var(--ffx-dur-normal) var(--ffx-ease-out), overlay var(--ffx-dur-normal) allow-discrete, display var(--ffx-dur-normal) allow-discrete; }
.menu:popover-open, .menu.is-open { opacity: 1; transform: none; }
@starting-style { .menu:popover-open { opacity: 0; transform: translateY(-6px) scale(.985); } }

/* Hero — графит + белая карточка формы */
.hero { position: relative; overflow: clip; padding-block: clamp(44px, 6vw, 88px) clamp(48px, 6vw, 88px); }
.hero__net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__net path { stroke: rgba(255,255,255,.14); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
/* единственное свечение на странице */
.hero__glow { position: absolute; width: 640px; height: 640px; right: -180px; top: -280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #5e50fb 55%, transparent), transparent 70%); filter: blur(20px); opacity: .55; pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.hero__copy { display: grid; gap: 22px; padding-top: 8px; }
.hero__copy .h1 { max-width: 22ch; font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.3rem); }
.hero__copy .lead { max-width: 54ch; }
.hero__steps { display: grid; gap: 10px; max-width: 58ch; }
.hero__steps li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.5; color: #e8e8ec; }
.hero__steps li b { color: #fff; font-weight: 600; }
.hero__n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ffx-ink-accent) 55%, transparent); color: var(--ffx-ink-accent); font: 600 11px/1 var(--ffx-font-mono); display: grid; place-items: center; margin-top: 1px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__card { border-radius: var(--ffx-r-2xl); padding: clamp(22px, 2.6vw, 30px); display: grid; gap: 16px; align-self: start; box-shadow: 0 40px 80px -20px rgba(0,0,0,.45), var(--ffx-shadow-lg); }
/* ≤960: обещание (eyebrow → H1 → lead) первым, затем форма, затем шаги. display: contents делает детей .hero__copy
   элементами сетки, чтобы карточка встала между lead и шагами без изменения DOM */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 18px; }
  .hero__copy { display: contents; }
  .hero__copy > .eyebrow { order: 1; } .hero__copy > .h1 { order: 2; } .hero__copy > .lead { order: 3; }
  .hero__card { order: 4; margin-top: 6px; }
  .hero__steps { order: 5; margin-top: 10px; } .hero__chips { order: 6; }
  .hero__glow { right: -260px; top: -320px; }
}
@media (max-width: 520px) {
  .hero { padding-block: 24px 36px; }
  .hero__grid { gap: 28px; }
  .hero__copy { gap: 16px; padding-top: 0; }
  .hero__copy .h1 { max-width: none; }
  .hero__card { padding: 18px; }
  .hero__chips { display: none; }
  .hide-narrow { display: none; }
}

/* Бренды — карточки как на join.fastfix.net.ru */
.brands { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 24px; align-items: start; }
.brands__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bcard {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 8px;
  min-height: 112px; padding: 28px 12px 16px; border-radius: var(--ffx-r-xl);
  border: var(--ffx-hairline); background: var(--ffx-surface); color: var(--ffx-text);
  text-align: center; text-decoration: none;
  transition: border-color var(--ffx-dur-fast), transform var(--ffx-dur-normal) var(--ffx-spring), box-shadow var(--ffx-dur-fast);
}
.bcard.is-link { cursor: pointer; }
.bcard.is-link:hover { border-color: var(--ffx-brand); transform: translateY(-2px); box-shadow: var(--ffx-shadow-sm); text-decoration: none; color: var(--ffx-text); }
.bcard:focus-visible { outline: none; box-shadow: var(--ffx-ring); }
.bcard__asc {
  position: absolute; top: 10px; right: 10px; height: 20px; padding: 0 8px; border-radius: var(--ffx-r-full);
  background: var(--ffx-brand-soft); color: var(--ffx-brand-fg-strong);
  font: 600 9.5px/20px var(--ffx-font-mono); letter-spacing: .04em; text-transform: uppercase;
}
.bcard__name { font-family: var(--ffx-font-display); font-size: 18px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
.bcard__g { font: 500 10.5px/1.3 var(--ffx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ffx-text-4); }
.brands__why { display: grid; gap: 12px; }
.bwhy { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--ffx-r-xl); border: var(--ffx-hairline); background: var(--ffx-surface); }
.bwhy b { display: block; font-size: 14.5px; letter-spacing: -0.01em; margin-bottom: 4px; }
.bwhy span { font-size: 13.5px; color: var(--ffx-text-2); line-height: 1.45; }
.brands__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 22px; font-size: 14px; color: var(--ffx-text-2); line-height: 1.5; align-items: start; }
.brands__foot b { color: var(--ffx-text); }
.brands__cta { display: grid; gap: 12px; justify-items: start; }
.brands__legal { margin-top: 16px; font-size: 12.5px; color: var(--ffx-text-4); line-height: 1.5; }
.cta__contacts a.btn { justify-content: flex-start; height: auto; min-height: 48px; white-space: normal; }
.footer__col .btn { margin-top: 4px; }
@media (max-width: 1100px) { .brands { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .brands__foot { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcard { min-height: 96px; padding: 30px 10px 14px; }
  .bcard__name { font-size: 15px; }
}

/* Инсайт (Ink): агрегатор → FASTFIX */
.risk-head { display: grid; grid-template-columns: 1fr 1fr; max-width: 1040px; padding: 0 22px 10px; }
.risk-head span { font: 600 11px/1.3 var(--ffx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #9a9ab0; }
.risk-head span:last-child { color: #95de64; }
.risk-list { display: grid; gap: 10px; max-width: 1040px; }
.risk-row { display: grid; grid-template-columns: 1fr 1fr; background: var(--ffx-ink-900); border: 1px solid rgba(255,255,255,.1); border-radius: var(--ffx-r-xl); overflow: hidden; }
.risk-row > div { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 18px 22px; font-size: 14.5px; line-height: 1.5; color: #e8e8ec; }
.risk-row__no { border-right: 1px solid rgba(255,255,255,.1); }
.risk-row__no b { color: #fff; }
.risk-row__yes { background: rgba(255,255,255,.025); }
.risk-close { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); max-width: 1040px; font-size: 15.5px; line-height: 1.55; color: #b9b9c9; text-wrap: pretty; }
.risk-close b { color: #fff; }
@media (max-width: 720px) {
  .risk-head { display: none; }
  .risk-row { grid-template-columns: 1fr; }
  .risk-row__no { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .risk-row > div { padding: 14px 16px; font-size: 14px; }
  .risk-row__no::before, .risk-row__yes::before { grid-column: 1 / -1; font: 600 10px/1.2 var(--ffx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #9a9ab0; }
  .risk-row__no::before { content: "Агрегатор объявлений"; }
  .risk-row__yes::before { content: "В FASTFIX"; color: #95de64; }
}

/* Калькулятор честной цены */
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); border: var(--ffx-hairline); border-radius: var(--ffx-r-2xl); overflow: hidden; background: var(--ffx-surface); box-shadow: var(--ffx-shadow-md); }
.calc__form { padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 20px; align-content: start; }
.calc__row { display: grid; grid-template-columns: 1.4fr auto; gap: 14px; align-items: end; }
.calc__row--3 { grid-template-columns: 1fr 1fr auto; }
.calc__out { padding: clamp(20px, 2.6vw, 30px); background: var(--ffx-ink-950); color: #fff; display: grid; align-content: start; gap: 20px; color-scheme: dark; }
.calc__k { font: 600 11px/1.3 var(--ffx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #9a9ab0; margin-bottom: 8px; }
.calc__price { font-family: var(--ffx-font-display); font-weight: 900; font-size: clamp(34px, 3.4vw, 46px); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc__price--sm { font-size: clamp(26px, 2.4vw, 32px); color: var(--ffx-ink-accent); }
.calc__lines { display: grid; gap: 6px; margin-top: 12px; font-size: 13.5px; color: #b9b9c9; }
.calc__lines li { display: flex; justify-content: space-between; gap: 12px; }
.calc__lines b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__work { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.calc__note { font-size: 13px; color: #b9b9c9; margin-top: 8px; line-height: 1.5; }
.calc__facts { display: grid; gap: 8px; font-size: 13px; color: #b9b9c9; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.calc__facts li { display: grid; grid-template-columns: 15px 1fr; gap: 8px; align-items: start; line-height: 1.45; }
.calc__facts svg { width: 15px; height: 15px; color: #95de64; margin-top: 2px; }
.calc__out .btn { justify-self: start; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc__out .btn { justify-self: stretch; } }
@media (max-width: 720px) { .calc__row--3 { grid-template-columns: 1fr 1fr; } .calc__row--3 .seg { grid-column: 1 / -1; } }
@media (max-width: 560px) { .calc__row, .calc__row--3 { grid-template-columns: 1fr; } .calc__row .seg { width: 100%; display: flex; } .calc__row .seg__opt { flex: 1; justify-content: center; } }
.pricelist__city { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; margin: 20px 0 8px; }

/* Прейскурант (SEO-таблицы) */
.pricelist { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 12px; }
.pricelist__head { display: grid; gap: 8px; max-width: 800px; margin-bottom: 6px; }
.pricelist__foot { margin-top: 6px; }
.ptable-wrap { border: var(--ffx-hairline); border-radius: var(--ffx-r-lg); background: var(--ffx-surface); overflow: hidden; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable__cap { text-align: left; padding: 12px 16px 8px; font: 600 11px/1.3 var(--ffx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ffx-text-3); }
.ptable th { text-align: left; font: 600 11px/1.3 var(--ffx-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ffx-text-4); padding: 8px 16px; border-bottom: var(--ffx-hairline); background: var(--ffx-surface-2); }
.ptable td { padding: 10px 16px; border-bottom: var(--ffx-hairline); color: var(--ffx-text-2); vertical-align: top; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable .num, .ptable td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ffx-text); font-weight: 600; white-space: nowrap; }
.ptable th.num { color: var(--ffx-text-4); font-weight: 600; }
.pcat { border: var(--ffx-hairline); border-radius: var(--ffx-r-lg); background: var(--ffx-surface); overflow: hidden; }
.pcat[open] { border-color: color-mix(in srgb, var(--ffx-brand) 45%, transparent); }
.pcat summary { grid-template-columns: 1fr auto 24px; }
.pcat__t { font-weight: 700; }
.pcat__m { font: 500 12px/1.3 var(--ffx-font-mono); color: var(--ffx-text-3); text-transform: none; letter-spacing: 0; text-align: right; }
.pcat__b { padding: 0 18px 18px; display: grid; gap: 12px; }
.pcat__b .ptable { border: var(--ffx-hairline); border-radius: var(--ffx-r-md); overflow: hidden; }
.pcat__b .ptable th:first-child, .pcat__b .ptable td:first-child { width: 100%; }
.pcat__brands, .pcat__foot { font-size: 13px; color: var(--ffx-text-3); line-height: 1.5; }
.pcat__brands b { color: var(--ffx-text-2); }
@media (max-width: 640px) { .pcat summary { grid-template-columns: 1fr 24px; } .pcat__m { grid-column: 1; text-align: left; } .ptable { font-size: 13px; } .ptable td, .ptable th { padding: 8px 10px; } }

/* Запчасти: две карточки */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split__card { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 3vw, 32px); border-radius: var(--ffx-r-2xl); border: var(--ffx-hairline); background: var(--ffx-surface); }
.split__card > p { font-size: 15px; color: var(--ffx-text-2); line-height: 1.55; }
.split__card .h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; }
.split__list { display: grid; gap: 8px; margin: 4px 0 8px; }
.split__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--ffx-text-2); line-height: 1.5; }
.split__list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--ffx-success-fg); }
.split__card .btn { justify-self: start; }
.split__card--ink { background: var(--ffx-ink-950); border-color: #3a3c44; color: #fff; color-scheme: dark; }
.split__card--ink > p, .split__card--ink .split__list li { color: #e8e8ec; }
.split__card--ink .split__list svg { color: #95de64; }
.split__card--ink .eyebrow { color: var(--ffx-ink-accent); }
.split__card--ink .icn { background: rgba(255,255,255,.08); color: var(--ffx-ink-accent); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* Кто приедет */
.who { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.who__side { display: grid; gap: 12px; }
.pro-banner { margin-top: clamp(24px, 3vw, 40px); padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px); border-radius: var(--ffx-r-2xl); display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.pro-banner > div { display: grid; gap: 8px; flex: 1 1 380px; }
.pro-banner__t { font-size: 15.5px; line-height: 1.5; color: #e8e8ec; max-width: 64ch; }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; } }

/* Финальный CTA (Ink) */
.cta { position: relative; overflow: clip; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.cta__copy { display: grid; gap: 18px; }
.cta__copy .h2 { max-width: 20ch; }
.cta__side { display: grid; gap: 18px; }
.cta__contacts { display: grid; gap: 10px; }
.cta__contacts a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; font-weight: 600; }
.cta__contacts a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.cta__contacts a svg { width: 20px; height: 20px; color: var(--ffx-ink-accent); flex: none; }
.cta__contacts a small { display: block; font-weight: 500; font-size: 12.5px; color: #9a9ab0; }
.cta .track { padding-top: 6px; }
@media (max-width: 900px) { .cta__grid { grid-template-columns: 1fr; } .cta__copy .h2 { max-width: none; } }

/* Футер */
.footer { border-top: var(--ffx-hairline); background: var(--ffx-surface); padding-block: clamp(36px, 5vw, 64px) 28px; font-size: 14px; color: var(--ffx-text-2); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
.footer__brand { display: grid; gap: 14px; align-content: start; }
.footer__brand svg { height: 36px; width: auto; aspect-ratio: 3162 / 909; color: var(--ffx-text); }
.footer__brand p { max-width: 32ch; color: var(--ffx-text-3); line-height: 1.5; }
.footer__slogan { font-family: var(--ffx-font-accent); font-weight: 600; font-size: 22px; color: var(--ffx-brand-fg) !important; letter-spacing: 0; line-height: 1.1; margin-top: 4px; }
.footer h4 { font: 600 11px/1.3 var(--ffx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ffx-text-4); margin-bottom: 12px; }
.footer__col ul { display: grid; gap: 8px; }
.footer__col a { color: var(--ffx-text-2); }
.footer__col a:hover { color: var(--ffx-text); }
.footer__col a svg { width: 12px; height: 12px; display: inline; vertical-align: -1px; margin-left: 4px; color: var(--ffx-text-4); }
.footer__legal { margin-top: 32px; padding-top: 20px; border-top: var(--ffx-hairline); display: grid; gap: 4px; font-size: 12.5px; color: var(--ffx-text-3); line-height: 1.6; }
.footer__legal .mono { font-size: 12px; }
.footer__legal sup { font-size: .7em; line-height: 0; vertical-align: super; }
.footer__contacts { display: grid; gap: 6px; justify-items: start; font-weight: 600; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: span 2; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } .footer__brand { grid-column: span 1; } }

/* Контакты: до клика человека телефона и почты в разметке нет — кнопка-заглушка
   выглядит ровно как ссылка, которой станет после раскрытия (см. landing.js, «Контакты»). */
:where(button[data-contact]) { font: inherit; line-height: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: pointer; }
.linkish { color: var(--ffx-brand-fg); cursor: pointer; }
.linkish:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ink .linkish:not(.btn) { color: var(--ffx-ink-accent); }
.ink .paper .linkish:not(.btn) { color: var(--ffx-brand-fg); }
.nav__tel { cursor: pointer; }
.menu__contact { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 10px; color: var(--ffx-text); font-weight: 600; font-size: 15px; }
.menu__contact:hover { background: var(--ffx-surface-2); }
.menu__contact svg { width: 18px; height: 18px; color: var(--ffx-text-3); }
/* цвет — как у соседних ссылок в блоке (.ink a:not(.btn)), чтобы при раскрытии он не прыгал */
.cta__contacts button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--ffx-ink-accent); font-weight: 600; }
.cta__contacts button:hover { background: rgba(255,255,255,.08); }
.cta__contacts button svg { width: 20px; height: 20px; color: var(--ffx-ink-accent); flex: none; }
.cta__contacts button small { display: block; font-weight: 500; font-size: 12.5px; color: #9a9ab0; }
.footer__contacts .linkish, .footer__col .linkish { color: var(--ffx-text-2); font-weight: inherit; }
.footer__contacts .linkish:hover, .footer__col .linkish:hover { color: var(--ffx-text); }

/* Липкий CTA на мобильных */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--ffx-z-nav); display: none; gap: 8px; padding: 8px; border-radius: 14px; border: var(--ffx-hairline); background: color-mix(in srgb, var(--ffx-surface) 88%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: var(--ffx-shadow-lg); transform: translateY(120%); transition: transform var(--ffx-dur-slow) var(--ffx-ease-out); }
.sticky-cta .btn { flex: 1; }
.sticky-cta.is-on { transform: none; }
@media (max-width: 768px) { .sticky-cta { display: flex; } body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* Согласие на cookie / Метрику */
.consent-bar { position: fixed; left: 16px; bottom: 16px; z-index: var(--ffx-z-toast); width: min(440px, calc(100vw - 32px)); display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--ffx-r-xl); border: var(--ffx-hairline); background: var(--ffx-surface); color: var(--ffx-text-2); box-shadow: var(--ffx-shadow-lg); font-size: 13.5px; line-height: 1.5; }
.consent-bar a { font-weight: 600; }
.consent-bar__btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@starting-style { .consent-bar { opacity: 0; transform: translateY(12px); } }
.consent-bar { transition: opacity var(--ffx-dur-normal) var(--ffx-ease-out), transform var(--ffx-dur-slow) var(--ffx-ease-out); }
@media (max-width: 768px) { .consent-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .toast-stack { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* ───────────────────────── 5. Узкая ширина ───────────────────────── */
@media (max-width: 720px) {
  :root { --ffx-gutter: 20px; --ffx-section: 48px; }
  .section__head { gap: 10px; margin-bottom: 24px; }
  .nav { height: calc(56px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  .nav__logo svg { height: 28px; } /* v6 §02: мобильная шапка мин. 24px, рек. 28px */
  .menu { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .btn-row { display: grid; grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .bgroup { padding: 16px; }
  .tcard__meta { gap: 6px; }
  .tcard__meta b { font-size: 16px; }
  .tcard__meta span { font-size: 10px; }
  .faq summary, .pcat summary { padding: 14px 14px; font-size: 15px; }
  .faq .faq__b, .pcat__b { padding: 0 14px 14px; }
  .pro-banner { padding: 18px; }
  .pro-banner .btn { width: 100%; }
  .split__card .btn { justify-self: stretch; }
  .sticky-cta { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}
@media (hover: none) { .btn:hover, .dev:hover, .bchip:hover, .bcard:hover { transform: none; } }

/* ───────────────────────── 6. Движение ───────────────────────── */
@keyframes ffx-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .reveal { animation: ffx-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
}
/* content-visibility: auto намеренно не используется: с якорной навигацией (#price, #faq) оценочные высоты секций
   сдвигают цель прокрутки. Страница лёгкая — ленивый рендер не нужен. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .btn:hover, .dev:hover, .bchip:hover, .bcard:hover { transform: none; }
}

@media print {
  .nav, .sticky-cta, .toast-stack, .theme, .menu, .hero__net, .hero__glow, .consent-bar { display: none !important; }
  .ink, .card--ink, .b-a, .split__card--ink, .calc__out { background: #fff !important; color: #1a1a1a !important; }
}