/* ==========================================================================
   FRANCUZ.BY — вёрстка лендинга. Только на токенах francuz-tokens.css.
   Хардкод-цветов нет; недостающие токены — здесь, в :root.
   Префикс fl- (francuz landing), чтобы не пересекаться с f- из токенов.
   ========================================================================== */

:root {
  --fl-util-h: 48px;                                   /* служебная полоса, синяя, всегда видна (§1) */
  --fl-bar-h: 76px;                                    /* основная полоса */
  --fl-bar-h-compact: 60px;                            /* основная полоса при скролле */
  --fl-header-h: calc(var(--fl-util-h) + var(--fl-bar-h));           /* полная высота над героем */
  --fl-header-h-compact: calc(var(--fl-util-h) + var(--fl-bar-h-compact)); /* при скролле служебная синяя остаётся (для якорей) */
  --fl-scrim: rgba(23, 35, 46, .55);          /* оверлей на фото героя (из navy-900) */
  --fl-sidebar-w: 300px;
}

/* Атрибут hidden всегда прячет элемент, даже если у класса задан display
   (иначе .f-btn/.fl-cookie/.fl-tabpanel c display:… перебивают [hidden]). */
[hidden] { display: none !important; }

/* --- утилиты --- */
.fl-eyebrow {
  display: inline-block;
  font-size: var(--f-text-xs);
  font-weight: var(--f-w-bold);
  letter-spacing: var(--f-tracking-label);
  text-transform: uppercase;
  color: var(--f-blue);
  margin-bottom: var(--f-space-3);
}
.fl-lead { font-size: var(--f-text-md); color: var(--f-text-muted); line-height: var(--f-leading-body); }
/* льготная цена: звёздочка в опорных местах + сноска в конце секции (ТЗ льгота §2) */
.fl-star { color: var(--f-text-faint); font-weight: var(--f-w-semi); }
.fl-pricenote { font-size: var(--f-text-xs); color: var(--f-text-faint); line-height: var(--f-leading-snug);
  max-width: var(--f-measure); margin-top: var(--f-space-5); }
.fl-pricenote--on-dark { color: rgba(244, 240, 232, .55); }
.fl-section-head { max-width: var(--f-measure); margin-bottom: var(--f-space-6); }
.fl-section-head h2 { margin-bottom: var(--f-space-3); }
.fl-center { text-align: center; margin-inline: auto; }
.fl-cta-row { display: flex; flex-wrap: wrap; gap: var(--f-space-3); margin-top: var(--f-space-5); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fl-skip { position: absolute; left: -999px; top: 0; background: var(--f-navy); color: var(--f-white); padding: 10px 16px; z-index: 300; border-radius: var(--f-radius); }
.fl-skip:focus { left: var(--f-space-4); top: var(--f-space-4); }

/* ==========================================================================
   Шапка: два уровня — служебная (§1.2) + основная (§1.3). Над героем прозрачная,
   при скролле служебная полоса схлопывается, основная становится компактной (§1, §2.5).
   ========================================================================== */
.fl-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--f-z-header);
  background: transparent; color: var(--f-ivory);
  transition: background var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease); }

/* --- служебная полоса: сплошной синий, всегда видна, одно состояние (§1–§3) --- */
.fl-header__util { height: var(--fl-util-h); background: var(--f-blue); border-bottom: 0; }
.fl-header__util-inner { display: flex; align-items: center; justify-content: space-between; height: var(--fl-util-h); gap: var(--f-space-5); }
.fl-header__rates { display: flex; gap: var(--f-space-5); font-size: var(--f-text-xs); color: rgba(255,255,255,.72); white-space: nowrap; }
.fl-header__rate b { font-weight: var(--f-w-bold); color: #FFFFFF; }
/* офисы: три колонки город | номер | мессенджеры, два города строками (§1, §2) */
.fl-header__offices { display: grid; grid-template-columns: auto auto auto; column-gap: var(--f-space-3); row-gap: 2px; align-items: center; justify-items: start; }
.fl-header__office-city { font-size: 11px; font-weight: var(--f-w-semi); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.70); }
.fl-header__office-num { font-size: 15px; font-weight: var(--f-w-semi); color: #FFFFFF; text-decoration: none; white-space: nowrap; }
.fl-header__office-num:hover { color: #FFFFFF; text-decoration: underline; }
.fl-header__office-msgs { display: flex; align-items: center; gap: 8px; }

/* --- основная полоса: СПЛОШНАЯ по умолчанию (подстраховка §1.3); прозрачная только над героем (.is-over) --- */
.fl-header__bar { background: var(--f-ivory); border-bottom: 1px solid var(--f-grey); box-shadow: var(--f-shadow-card);
  transition: background var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease), border-color var(--f-dur) var(--f-ease); }
.fl-header__inner { display: flex; align-items: center; gap: var(--f-space-5); height: var(--fl-bar-h); transition: height var(--f-dur) var(--f-ease); }
.fl-logo { flex: 0 0 auto; display: inline-flex; }
.fl-logo img { height: 44px; width: auto; transition: height var(--f-dur) var(--f-ease); }
/* display держим на вариантах (0,1,0), а не на «.fl-logo img» (0,1,1) — иначе hide не срабатывает и логотип двоится (§1) */
.fl-logo__dark { display: block; }
.fl-logo__white { display: none; }                 /* по умолчанию — цветной логотип */
.fl-nav { display: flex; align-items: center; margin-left: auto; }
.fl-nav__links { display: flex; gap: var(--f-space-5); list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.fl-nav__links a { color: var(--f-text); text-decoration: none; font-size: var(--f-text-sm); font-weight: var(--f-w-semi); }
.fl-nav__links a:hover { color: var(--f-blue); }
.fl-nav__offices { display: none; }   /* показываем только в бургер-меню на мобильных */
.fl-header__aside { display: flex; align-items: center; gap: var(--f-space-4); margin-left: var(--f-space-6); }
.fl-header__msg { display: inline-flex; color: rgba(255,255,255,.78); transition: color var(--f-dur) var(--f-ease); }  /* в синей полосе — всегда белые */
.fl-header__msg:hover { color: #FFFFFF; }
.fl-header__msg svg { width: 18px; height: 18px; display: block; }
.fl-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--f-border); border-radius: var(--f-radius); background: transparent; color: var(--f-navy); cursor: pointer; align-items: center; justify-content: center; }
.fl-burger span, .fl-burger span::before, .fl-burger span::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.fl-burger span::before { position: absolute; top: -6px; } .fl-burger span::after { position: absolute; top: 6px; }

/* --- при скролле основная компактнеет (служебная синяя не трогается, §1, §3) --- */
.fl-header.is-compact .fl-header__inner { height: var(--fl-bar-h-compact); }
.fl-header.is-compact .fl-logo img { height: 38px; }

/* --- НАД ГЕРОЕМ: прозрачная накладка (.is-over) — исключение из сплошного дефолта (§1.3) --- */
.fl-header.is-over .fl-header__bar { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.fl-header.is-over .fl-logo__dark { display: none; }
.fl-header.is-over .fl-logo__white { display: block; }
.fl-header.is-over .fl-nav__links a { color: rgba(244,240,232,.85); }
.fl-header.is-over .fl-nav__links a:hover { color: var(--f-ivory); }
.fl-header.is-over .fl-burger { color: var(--f-ivory); border-color: rgba(244,240,232,.45); }

/* якоря не уезжают под липкую шапку (§1.4) */
[id] { scroll-margin-top: calc(var(--fl-header-h-compact) + var(--f-space-5)); }

/* ==========================================================================
   Герой: фото + тёмный градиент, плотнее слева под текстом (§2.1–2.4)
   ========================================================================== */
.fl-hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden;
  background: url("../img/hero/hero-minsk-lineup.webp") center right / cover no-repeat; }
/* Двухосевой градиент: слева — тёмная колонка под текст; сверху — мягкий скрим под прозрачную шапку
   (белый логотип/меню над светлым небом); снизу — лёгкое заземление. Справа фон чист — машины видны. */
.fl-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(90deg, rgba(18,28,40,.84) 0%, rgba(18,28,40,.56) 38%, rgba(18,28,40,.08) 70%, rgba(18,28,40,0) 100%),
  linear-gradient(180deg, rgba(18,28,40,.52) 0%, rgba(18,28,40,0) 24%, rgba(18,28,40,0) 74%, rgba(18,28,40,.34) 100%),
  rgba(32,48,63,.10); }
.fl-hero__inner { position: relative; z-index: 1; max-width: 620px; margin-left: 0; text-align: left; /* классическая левая колонка внутри контейнера (ТЗ §2–§3) */
  padding-block: calc(var(--fl-header-h) + var(--f-space-6)) var(--f-space-8); color: var(--f-ivory); }
.fl-hero__crumbs { font-size: var(--f-text-sm); color: rgba(244,240,232,.6); margin-bottom: var(--f-space-5); }
.fl-hero__crumbs a { color: rgba(244,240,232,.6); text-decoration: none; }
.fl-hero__crumbs a:hover { color: var(--f-ivory); }
.fl-eyebrow--on-dark { color: rgba(244,240,232,.55); }
.fl-hero__title { font-size: var(--f-text-4xl); margin-bottom: var(--f-space-4); color: var(--f-ivory); }
.fl-hero__title span { display: block; }
.fl-hero__title .fl-hero__blue { color: var(--f-blue-300); }   /* осветлённый синий на тёмном герое (§2) */
.fl-hero__title .fl-accent { color: var(--f-red); }
.fl-hero__sub { font-size: var(--f-text-md); color: rgba(244,240,232,.82); max-width: 46ch; }
/* Плашки + кнопки героя — одна двухколоночная grid, 4 прямых ячейки (ТЗ §1–§3) */
.fl-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--f-space-4); width: 100%; max-width: 620px; margin: var(--f-space-6) 0 0; }
.fl-hero__fact, .fl-hero__btn { width: 100%; margin: 0; }
/* матовое стекло: размытие фона под плашкой, а не рост непрозрачности (ЗАДАЧА 1) */
.fl-hero__fact { background: rgba(18,28,40,.38); backdrop-filter: blur(18px) saturate(110%); -webkit-backdrop-filter: blur(18px) saturate(110%); border: 1px solid rgba(244,240,232,.32); border-radius: var(--f-radius-lg); padding: var(--f-space-4) var(--f-space-5); }
.fl-hero__fact b { font-size: var(--f-text-lg); font-weight: var(--f-w-black); display: block; color: var(--f-ivory); white-space: nowrap; }  /* «3 000 – 9 000 BYN» одной строкой (§3) */
.fl-hero__fact span { font-size: var(--f-text-xs); color: rgba(244,240,232,.65); }
.fl-hero__btn { height: 60px; display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: var(--f-radius-lg); }
.fl-btn--on-dark { background: rgba(18,28,40,.38); backdrop-filter: blur(18px) saturate(110%); -webkit-backdrop-filter: blur(18px) saturate(110%); color: var(--f-ivory); border: 1px solid rgba(244,240,232,.32); }
.fl-btn--on-dark:hover { background: rgba(18,28,40,.52); border-color: var(--f-ivory); color: var(--f-ivory); }
/* если backdrop-filter не поддерживается — компенсируем непрозрачностью (ЗАДАЧА 1) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fl-hero__fact   { background: rgba(18,28,40,.62); }
  .fl-btn--on-dark { background: rgba(18,28,40,.58); }
}
@media (max-width: 600px) { .fl-hero__actions { grid-template-columns: 1fr; } }
.fl-hero__slogan { margin: var(--f-space-6) 0 0; font-weight: var(--f-w-bold); color: var(--f-ivory); font-size: var(--f-text-md); }

/* ==========================================================================
   Текстовые секции (4.4–4.6, 4.8)
   ========================================================================== */
.fl-prose p { max-width: var(--f-measure); }
.fl-prose h2 { margin-bottom: var(--f-space-4); }
.fl-prose { display: grid; gap: var(--f-space-4); }

/* Двухколоночная текстовая секция: заголовок слева, текст справа — те же колонки, что у .fl-two (§3) */
.fl-text-section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--f-space-7); align-items: start; }
.fl-text-section__head h2 { margin: 0; }
.fl-text-section__body { display: grid; gap: var(--f-space-4); }
.fl-text-section__body p { max-width: 64ch; }

/* SEO-секция: заголовок H2 над обеими колонками, слева текст, справа видео (Блок B §3) */
.fl-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--f-space-7); align-items: start; }
.fl-intro__title { grid-column: 1 / -1; font-size: var(--f-text-2xl); margin: 0 0 var(--f-space-6); text-wrap: balance; }
.fl-intro__text { display: grid; gap: var(--f-space-4); }
.fl-intro__text p { max-width: 64ch; }

/* Видео-фасад: превью + красная кнопка play, плеер по клику (§3.3) */
.fl-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--f-radius-lg); overflow: hidden; background: var(--f-navy); cursor: pointer; }
.fl-video img, .fl-video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.fl-video__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: var(--f-red); border: 0; cursor: pointer; display: grid; place-content: center; transition: transform 160ms var(--f-ease), background 160ms var(--f-ease); }
.fl-video__play::before { content: ""; width: 0; height: 0; margin-left: 4px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.fl-video__play:hover { transform: scale(1.06); background: var(--f-red-600); }
.fl-video__list { display: flex; gap: var(--f-space-3); margin-top: var(--f-space-3); }
.fl-video__list[hidden] { display: none; }
@media (max-width: 900px) { .fl-intro, .fl-text-section { grid-template-columns: 1fr; } }

/* Гиды по моделям / формальностям (4.7, 4.9) */
.fl-guides { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--f-space-5); }
.fl-guides__group h4 { margin-bottom: var(--f-space-3); }
.fl-guides__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--f-space-2); }
.fl-guides__group a { font-size: var(--f-text-sm); text-decoration: none; color: var(--f-text); }
.fl-guides__group a:hover { color: var(--f-blue); text-decoration: underline; }

/* Арифметика (4.8) */
.fl-calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--f-space-5); margin-top: var(--f-space-6); }
.fl-calc__step { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); padding: var(--f-space-5); }
.fl-calc__step h4 { margin-bottom: var(--f-space-2); }
.fl-calc__num { font-size: var(--f-text-2xl); font-weight: var(--f-w-black); color: var(--f-blue); letter-spacing: var(--f-tracking-tight); }
.fl-note { font-size: var(--f-text-sm); color: var(--f-text-faint); margin-top: var(--f-space-4); }

/* ==========================================================================
   Четыре преимущества (4.10)
   ========================================================================== */
.fl-adv { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--f-space-5); }
.fl-adv__card { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); padding: var(--f-space-6); display: grid; gap: var(--f-space-3); align-content: start; }
.fl-adv__num { font-size: var(--f-text-sm); font-weight: var(--f-w-bold); color: var(--f-text-faint); }
.fl-adv__icon { width: 40px; height: 40px; color: var(--f-blue); }
.fl-adv__icon svg { width: 100%; height: 100%; }
.fl-adv__card h3 { font-size: var(--f-text-lg); }

/* ==========================================================================
   Каталог (4.11): сайдбар фильтров + сетка
   ========================================================================== */
.fl-catalog { display: grid; grid-template-columns: var(--fl-sidebar-w) 1fr; gap: var(--f-space-6); align-items: start; }
.fl-filters { position: sticky; top: calc(var(--fl-header-h) + var(--f-space-4)); display: grid; gap: var(--f-space-5); }
.fl-filters__group { display: grid; gap: var(--f-space-3); }
.fl-filters__group > h4 { font-size: var(--f-text-sm); }
.fl-chips { display: flex; flex-wrap: wrap; gap: var(--f-space-2); }
.fl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--f-border); border-radius: var(--f-radius-pill); background: var(--f-surface); font-size: var(--f-text-xs); font-weight: var(--f-w-semi); color: var(--f-text); cursor: pointer; transition: all var(--f-dur) var(--f-ease); }
.fl-chip:hover { border-color: var(--f-border-strong); }
.fl-chip.is-active { background: var(--f-navy); color: var(--f-white); border-color: var(--f-navy); }
.fl-chip svg { width: 16px; height: 16px; }
.fl-years { display: flex; align-items: center; gap: var(--f-space-2); }
.fl-years .f-input { padding: 10px 12px; }

/* карточка-подбор внизу сайдбара (на месте «каким котом» у CatCar) */
.fl-picker {
  position: relative; border-radius: var(--f-radius-lg); overflow: hidden;
  min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--f-space-5); color: var(--f-text-invert);
  background: var(--f-navy); background-size: cover; background-position: center;
}
.fl-picker::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--f-navy-900)); z-index: 0; }
.fl-picker > * { position: relative; z-index: 1; }
.fl-picker h4 { color: var(--f-white); font-size: var(--f-text-lg); margin-bottom: var(--f-space-2); }
.fl-picker p { color: color-mix(in srgb, var(--f-white) 82%, transparent); font-size: var(--f-text-sm); margin-bottom: var(--f-space-4); }

.fl-catalog__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--f-space-4); margin-bottom: var(--f-space-5); flex-wrap: wrap; }
.fl-catalog__count { font-size: var(--f-text-sm); color: var(--f-text-muted); }
.fl-cars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--f-space-5); }
.fl-carcard__specs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--f-space-3); margin: 0; padding: 0; font-size: var(--f-text-sm); color: var(--f-text-faint); }
.fl-carcard__mileage { color: var(--f-navy); font-weight: var(--f-w-semi); }   /* пробег подсвечен, остальное приглушено (§3) */
.fl-carcard__specs li { position: relative; padding-left: var(--f-space-3); }
.fl-carcard__specs li::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--f-border-strong); transform: translateY(-50%); }
.fl-carcard__specs li:first-child { padding-left: 0; } .fl-carcard__specs li:first-child::before { display: none; }
/* фото карточки — без тёмной полосы: изображение полностью закрывает бокс (§5.1) */
.fl-carcard__media { position: relative; aspect-ratio: 3 / 2; background: var(--f-grey); overflow: hidden; }
.fl-carcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-carcard__badges { position: absolute; left: var(--f-space-3); top: var(--f-space-3); display: flex; flex-wrap: wrap; gap: 6px; }
.fl-carcard__badge { background: rgba(18,28,40,.82); color: var(--f-ivory); font-size: var(--f-text-xs); font-weight: var(--f-w-semi); padding: 4px 9px; border-radius: var(--f-radius-pill); }
/* строки сравнения: цена и пробег устроены одинаково (§5.3) */
.fl-carcard__cmp { display: flex; align-items: baseline; justify-content: space-between; gap: var(--f-space-3); padding-top: var(--f-space-3); border-top: 1px solid var(--f-border); }
.fl-carcard__ours, .fl-carcard__mkt { display: grid; }
.fl-carcard__mkt { text-align: right; }
.fl-carcard__lbl { font-size: var(--f-text-xs); color: var(--f-text-faint); }
.fl-carcard__big { font-size: var(--f-text-lg); font-weight: var(--f-w-black); letter-spacing: var(--f-tracking-tight); color: var(--f-navy); }
.fl-carcard__eur { font-size: var(--f-text-xs); color: var(--f-text-faint); margin-top: 2px; }
.fl-carcard__strike { text-decoration: line-through; color: var(--f-text-faint); font-weight: var(--f-w-semi); }
.fl-carcard__plate { display: inline-block; margin-top: var(--f-space-2); background: var(--f-red-100); color: var(--f-red-600); font-size: var(--f-text-xs); font-weight: var(--f-w-bold); padding: 4px 10px; border-radius: var(--f-radius-pill); }
.fl-carcard__actions { display: flex; gap: var(--f-space-2); margin-top: var(--f-space-4); }
.fl-carcard__actions .f-btn { flex: 1; justify-content: center; }
.fl-catalog__more { display: flex; flex-direction: column; align-items: center; gap: var(--f-space-3); margin-top: var(--f-space-6); }
.fl-catalog__empty { color: var(--f-text-muted); }
.fl-filters__toggle { display: none; }

/* ==========================================================================
   Блок маршрута (4.12) — четыре шага на фирменной линии
   ========================================================================== */
.fl-route { display: grid; gap: var(--f-space-6); }
.fl-route__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--f-space-5); }
.fl-route__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--f-blue), var(--f-ivory-deep) 50%, var(--f-red)); z-index: 0; }
.fl-route__step { position: relative; z-index: 1; text-align: center; display: grid; gap: var(--f-space-2); justify-items: center; }
.fl-route__dot { width: 40px; height: 40px; border-radius: 50%; background: var(--f-navy); color: var(--f-white); display: grid; place-items: center; font-weight: var(--f-w-black); }

/* ==========================================================================
   Процесс (4.13), Что проверяем (4.15) — аккордеон/табы
   ========================================================================== */
.fl-acc { display: grid; gap: var(--f-space-3); }
/* «Что проверяем»: вертикальный список с соединяющей линией слева (§1.3) */
.fl-checklist { position: relative; }
.fl-checklist::before { content: ""; position: absolute; left: calc(var(--f-space-5) + 17px); top: 28px; bottom: 28px; width: 2px; background: var(--f-border); z-index: 0; }
.fl-checklist .fl-acc__item { position: relative; z-index: 1; }
.fl-checklist .fl-acc__num { background: var(--f-navy); color: var(--f-ivory); }
.fl-acc__item { border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); background: var(--f-surface); overflow: hidden; }
.fl-acc__trigger { width: 100%; display: flex; align-items: center; gap: var(--f-space-4); padding: var(--f-space-5); background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--f-text); }
.fl-acc__num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--f-blue-100); color: var(--f-blue-600); font-weight: var(--f-w-black); display: grid; place-items: center; font-size: var(--f-text-sm); }
.fl-acc__title { font-weight: var(--f-w-bold); font-size: var(--f-text-md); flex: 1; }
.fl-acc__chevron { transition: transform var(--f-dur) var(--f-ease); color: var(--f-text-faint); }
.fl-acc__item.is-open .fl-acc__chevron { transform: rotate(180deg); }
.fl-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--f-dur) var(--f-ease); }
.fl-acc__item.is-open .fl-acc__panel { grid-template-rows: 1fr; }
.fl-acc__panel > div { overflow: hidden; }
.fl-acc__panel p { padding: 0 var(--f-space-5) var(--f-space-5) calc(var(--f-space-5) + 34px + var(--f-space-4)); margin: 0; color: var(--f-text-muted); }

.fl-tabs__nav { display: flex; flex-wrap: wrap; gap: var(--f-space-2); margin-bottom: var(--f-space-5); }
.fl-tab { padding: 10px 18px; border: 1px solid var(--f-border); border-radius: var(--f-radius-pill); background: var(--f-surface); font: inherit; font-size: var(--f-text-sm); font-weight: var(--f-w-semi); cursor: pointer; color: var(--f-text); }
.fl-tab.is-active { background: var(--f-navy); color: var(--f-white); border-color: var(--f-navy); }
.fl-tabpanel { display: grid; gap: var(--f-space-3); }
.fl-tabpanel h3 { font-size: var(--f-text-lg); }
.fl-tabpanel__status { font-size: var(--f-text-xs); font-weight: var(--f-w-semi); color: var(--f-blue); letter-spacing: var(--f-tracking-label); text-transform: uppercase; }

/* Подход (4.14) */
.fl-approach { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f-space-7); align-items: center; }
.fl-approach__media { border-radius: var(--f-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--f-navy); }
.fl-approach__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Отзывы (4.16) — слайдер scroll-snap
   ========================================================================== */
.fl-reviews__facts { display: flex; gap: var(--f-space-6); flex-wrap: wrap; margin-bottom: var(--f-space-5); font-size: var(--f-text-sm); color: var(--f-text-muted); }
.fl-slider { position: relative; }
.fl-slider__track { display: flex; gap: var(--f-space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--f-space-3); scrollbar-width: none; }
.fl-slider__track::-webkit-scrollbar { display: none; }
.fl-review { scroll-snap-align: start; flex: 0 0 clamp(280px, 32%, 380px); background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); padding: var(--f-space-5); display: grid; gap: var(--f-space-3); }
.fl-review__head { display: flex; align-items: center; gap: var(--f-space-3); }
.fl-review__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--f-grey); object-fit: cover; }
.fl-review__name { font-weight: var(--f-w-bold); }
.fl-review__car { font-size: var(--f-text-xs); color: var(--f-text-faint); }
.fl-slider__nav { display: flex; gap: var(--f-space-2); margin-top: var(--f-space-4); }
.fl-slider__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--f-border); background: var(--f-surface); cursor: pointer; color: var(--f-navy); display: grid; place-items: center; }
.fl-slider__btn:hover { border-color: var(--f-navy); }

/* ==========================================================================
   Тарифы (4.17)
   ========================================================================== */
.fl-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--f-space-5); align-items: start; }
.fl-plan { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); padding: var(--f-space-6); display: grid; gap: var(--f-space-4); }
.fl-plan.is-popular { border-color: var(--f-blue); box-shadow: var(--f-shadow-card); position: relative; }
.fl-plan.is-popular::before { content: "Популярный"; position: absolute; top: calc(-1 * var(--f-space-3)); left: var(--f-space-5); background: var(--f-blue); color: var(--f-white); font-size: var(--f-text-xs); font-weight: var(--f-w-bold); padding: 4px 12px; border-radius: var(--f-radius-pill); }
.fl-plan__name { font-size: var(--f-text-lg); font-weight: var(--f-w-bold); }
.fl-plan__price-main { font-size: var(--f-text-2xl); font-weight: var(--f-w-black); letter-spacing: var(--f-tracking-tight); }
.fl-plan__for { font-size: var(--f-text-sm); color: var(--f-text-muted); }
.fl-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--f-space-2); }
.fl-plan__list li { position: relative; padding-left: var(--f-space-5); font-size: var(--f-text-sm); }
.fl-plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--f-blue); font-weight: var(--f-w-bold); }
/* опция-доплата в карточке (§2): без галочки, пунктирная граница сверху */
.fl-plan__option { margin-top: var(--f-space-3); padding-top: var(--f-space-3); padding-left: 0; border-top: 1px dashed var(--f-border); font-size: var(--f-text-sm); color: var(--f-text-muted); list-style: none; }
.fl-plan__option::before { content: none; }
.fl-plan__price { color: var(--f-blue); font-weight: var(--f-w-bold); }

/* ==========================================================================
   Блог (4.18)
   ========================================================================== */
.fl-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--f-space-5); }
.fl-post { display: grid; gap: var(--f-space-3); background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); overflow: hidden; }
.fl-post__media { aspect-ratio: 16 / 10; background: var(--f-navy); }
.fl-post__media img { width: 100%; height: 100%; object-fit: cover; }
.fl-post__body { padding: var(--f-space-5); display: grid; gap: var(--f-space-2); }
.fl-post__meta { font-size: var(--f-text-xs); color: var(--f-text-faint); display: flex; gap: var(--f-space-2); }
.fl-post__title { font-size: var(--f-text-md); font-weight: var(--f-w-bold); }

/* ==========================================================================
   FAQ (4.19) — переиспользуем аккордеон
   ========================================================================== */

/* ==========================================================================
   Контакты (4.20)
   ========================================================================== */
.fl-contacts__common { margin-bottom: var(--f-space-6); color: var(--f-text-muted); }
.fl-offices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f-space-5); }
.fl-office { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); overflow: hidden; display: grid; }
.fl-office__media { position: relative; aspect-ratio: 16 / 9; background: var(--f-navy); }
.fl-office__media img { width: 100%; height: 100%; object-fit: cover; }
.fl-office__map { width: 100%; height: 100%; border: 0; display: block; }   /* фрагмент карты вместо фото офиса */
.fl-office__maplink { position: absolute; right: var(--f-space-3); top: var(--f-space-3); background: var(--f-surface); box-shadow: var(--f-shadow-card); }   /* top-right — не перекрывает зум карты */
.fl-office__legal { margin: var(--f-space-2) 0 0; font-size: var(--f-text-xs); color: var(--f-text-faint); }
.fl-offices__note { grid-column: 1 / -1; margin: var(--f-space-2) 0 0; font-size: var(--f-text-xs); color: var(--f-text-faint); font-style: italic; }
.fl-office__body { padding: var(--f-space-6); display: grid; gap: var(--f-space-2); align-content: start; }
.fl-office__city { font-size: var(--f-text-xl); }
.fl-office__row { margin: 0; color: var(--f-text-muted); font-size: var(--f-text-sm); }
.fl-office__phone { font-size: var(--f-text-lg); font-weight: var(--f-w-bold); color: var(--f-text); text-decoration: none; margin: var(--f-space-2) 0; }
.fl-office__msgs { display: flex; gap: var(--f-space-2); margin-bottom: var(--f-space-3); }
.fl-legal { font-size: var(--f-text-xs); color: var(--f-text-faint); margin-top: var(--f-space-6); }

/* ==========================================================================
   Подвал (4.21)
   ========================================================================== */
.fl-footer { background: var(--f-navy-900); color: var(--f-text-invert); padding-block: var(--f-space-8) var(--f-space-6); }
.fl-footer a { color: color-mix(in srgb, var(--f-white) 78%, transparent); text-decoration: none; }
.fl-footer a:hover { color: var(--f-white); }
.fl-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--f-space-6); }
.fl-footer__desc { color: color-mix(in srgb, var(--f-white) 70%, transparent); font-size: var(--f-text-sm); max-width: 32ch; }
.fl-footer__logo { height: 32px; margin-bottom: var(--f-space-4); }
.fl-footer h4 { color: var(--f-white); font-size: var(--f-text-sm); letter-spacing: var(--f-tracking-label); text-transform: uppercase; margin-bottom: var(--f-space-4); }
.fl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--f-space-2); font-size: var(--f-text-sm); }
.fl-foot__office b { color: var(--f-white); display: inline-block; margin-right: 6px; }
.fl-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--f-space-4); margin-top: var(--f-space-7); padding-top: var(--f-space-5); border-top: 1px solid color-mix(in srgb, var(--f-white) 14%, transparent); font-size: var(--f-text-xs); color: color-mix(in srgb, var(--f-white) 60%, transparent); flex-wrap: wrap; }

/* ==========================================================================
   Модалка (4.22)
   ========================================================================== */
.fl-modal { position: fixed; inset: 0; z-index: var(--f-z-pop); display: grid; place-items: center; padding: var(--f-space-4); background: var(--fl-scrim); }
.fl-modal[hidden] { display: none; }
.fl-modal__dialog { background: var(--f-surface); border-radius: var(--f-radius-lg); width: min(520px, 100%); max-height: 92vh; overflow: auto; padding: var(--f-space-7); box-shadow: var(--f-shadow-pop); position: relative; }
.fl-modal__close { position: absolute; top: var(--f-space-4); right: var(--f-space-4); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--f-border); background: var(--f-surface); cursor: pointer; font-size: 20px; line-height: 1; color: var(--f-text); }
.fl-modal__title { margin-bottom: var(--f-space-5); }
.fl-form { display: grid; gap: var(--f-space-4); }
.fl-form__row { display: grid; gap: var(--f-space-4); }
@media (min-width: 480px) { .fl-form__row--2 { grid-template-columns: 1fr 1fr; } }
.fl-radio-group { display: flex; flex-wrap: wrap; gap: var(--f-space-3); }
.fl-radio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-text-sm); }
.fl-consent { display: flex; gap: var(--f-space-2); font-size: var(--f-text-xs); color: var(--f-text-muted); align-items: flex-start; }
.fl-consent input { margin-top: 2px; flex: none; }
.fl-form__status { font-size: var(--f-text-sm); min-height: 1.2em; }
.fl-form__status.is-success { color: var(--f-blue-600); }
.fl-form__status.is-error { color: var(--f-red-600); }

/* Cookie + наверх */
/* узкая полоса внизу, светлая, контурная кнопка (§1.5) */
.fl-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--f-z-pop); background: var(--f-ivory); color: var(--f-text); border-top: 1px solid var(--f-border); padding: var(--f-space-3) var(--f-space-5); display: flex; align-items: center; gap: var(--f-space-5); box-shadow: 0 -4px 20px -12px rgba(32,48,63,.35); }
.fl-cookie[hidden] { display: none; }
.fl-cookie p { margin: 0 auto 0 0; font-size: var(--f-text-sm); color: var(--f-text-muted); max-width: 70ch; }
.fl-cookie a { color: var(--f-blue); }
.fl-totop { position: fixed; right: var(--f-space-5); bottom: var(--f-space-6); z-index: var(--f-z-header); width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--f-navy); color: var(--f-white); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity var(--f-dur) var(--f-ease), transform var(--f-dur) var(--f-ease); pointer-events: none; display: grid; place-items: center; }
.fl-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1024px) {
  .fl-guides, .fl-adv { grid-template-columns: repeat(2, 1fr); }
  .fl-footer__top { grid-template-columns: 1fr 1fr; row-gap: var(--f-space-7); }
}
@media (max-width: 900px) {
  .fl-nav__links { display: none; }
  .fl-burger { display: inline-flex; }
  .fl-nav { position: fixed; inset: var(--fl-bar-h) 0 0 auto; width: min(320px, 86vw); background: var(--f-navy); flex-direction: column; align-items: stretch; padding: var(--f-space-6); transform: translateX(100%); transition: transform var(--f-dur) var(--f-ease); box-shadow: var(--f-shadow-pop); z-index: var(--f-z-header); }
  .fl-nav.is-open { transform: none; }
  .fl-nav.is-open .fl-nav__links { display: flex; }
  .fl-nav__links { flex-direction: column; gap: var(--f-space-4); }
  .fl-nav__links a { color: var(--f-ivory); }
  /* телефоны уезжают в бургер-меню (§1.3) */
  .fl-header__util { display: none; }   /* служебная полоса скрыта целиком (§4) */
  .fl-nav__offices { display: grid; grid-template-columns: auto auto auto; column-gap: var(--f-space-3); row-gap: var(--f-space-3); align-items: center; margin-top: var(--f-space-5); padding-top: var(--f-space-5); border-top: 1px solid rgba(244,240,232,.16); }
  .fl-hero { min-height: 92vh; background-position: 62% center; }
  .fl-hero::before { background: linear-gradient(180deg, rgba(18,28,40,.60) 0%, rgba(18,28,40,.82) 55%, rgba(18,28,40,.92) 100%), rgba(32,48,63,.18); }
  .fl-calc { grid-template-columns: 1fr; }
  .fl-route__steps { grid-template-columns: repeat(2, 1fr); gap: var(--f-space-6); }
  .fl-route__steps::before { display: none; }
  .fl-approach { grid-template-columns: 1fr; }
  .fl-pricing, .fl-blog { grid-template-columns: 1fr; }
  .fl-offices { grid-template-columns: 1fr; }
  /* каталог: сайдбар в выезжающую панель */
  .fl-catalog { grid-template-columns: 1fr; }
  .fl-filters__toggle { display: inline-flex; }
  .fl-filters { position: fixed; inset: auto 0 0 0; z-index: var(--f-z-pop); background: var(--f-surface); border-top-left-radius: var(--f-radius-lg); border-top-right-radius: var(--f-radius-lg); padding: var(--f-space-6); box-shadow: var(--f-shadow-pop); transform: translateY(110%); transition: transform var(--f-dur) var(--f-ease); max-height: 80vh; overflow: auto; }
  .fl-filters.is-open { transform: none; }
}
@media (max-width: 600px) {
  .fl-guides, .fl-adv, .fl-cars-grid { grid-template-columns: 1fr; }
  .fl-footer__top { grid-template-columns: 1fr; }
  .fl-modal__dialog { padding: var(--f-space-6); }
  .fl-hero__facts { flex-direction: column; }
}

/* ==========================================================================
   Ритм: фоны секций (§3.1) + отступы по объёму (§3.2)
   ========================================================================== */
.fl-bg-deep  { background: var(--f-bg-alt); }              /* светлый плотный */
.fl-bg-white { background: var(--f-white); }               /* чистый белый */
.fl-bg-dark  { background: var(--f-navy); color: var(--f-ivory); }
.fl-pad-lg   { padding-block: var(--f-space-9); }          /* сетка/графика — 96px */
.fl-pad-sm   { padding-block: var(--f-space-7); }          /* текстовая секция — 48px */
/* на тёмной секции: заголовки/лид/сноски светлые, карточки стеклянные (§3.1) */
.fl-bg-dark h2, .fl-bg-dark h3, .fl-bg-dark h4 { color: var(--f-ivory); }
.fl-on-dark h2, .fl-on-dark h3 { color: var(--f-ivory); }
.fl-on-dark .fl-lead, .fl-bg-dark .fl-lead { color: rgba(244,240,232,.78); }
.fl-note--on-dark, .fl-bg-dark .fl-note { color: rgba(244,240,232,.55); }

/* ==========================================================================
   Диаграмма расчёта (§4.1) — рисованная, не карточки
   ========================================================================== */
/* Верх секции: слева интро, справа фото продукта (grid 5fr/7fr) */
.fl-savings__top { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: var(--f-space-7); align-items: center; margin-bottom: var(--f-space-8); }
.fl-savings__intro { margin: 0; }
.fl-savings__photo { margin: 0; border-radius: var(--f-radius-lg); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--f-shadow-pop); }
.fl-savings__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Горизонтальная диаграмма (§3 итерации 3): две полосы, общая шкала 58000=100%. --w/--p из данных (JS) */
.fl-chart { max-width: 820px; }
.fl-chart__row + .fl-chart__row { margin-top: var(--f-space-5); }
.fl-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--f-space-2); }
.fl-chart__head span { font-size: var(--f-text-sm); color: rgba(244,240,232,.65); }
.fl-chart__head b { font-size: var(--f-text-lg); font-weight: var(--f-w-black); color: var(--f-ivory); }
.fl-chart__bar { width: var(--w); height: 48px; display: flex; border-radius: var(--f-radius); overflow: hidden; }
.fl-chart__bar i { width: var(--p); display: flex; align-items: center; padding-inline: 10px; font-size: var(--f-text-xs); color: rgba(244,240,232,.9); white-space: nowrap; overflow: hidden; }
.fl-chart__bar i + i { box-shadow: inset 1px 0 0 rgba(244,240,232,.14); }
.fl-chart__bar i span { display: none; }                      /* подпись только там, где влезает */
.s-lot span, .s-ship span { display: inline; }
.fl-chart__bar--market { background: rgba(244,240,232,.16); }
.s-lot  { background: #33465C; }
.s-ship { background: #3D5470; }
.s-duty { background: #4A6384; }
.s-fee  { background: #5A7397; }
.s-com  { background: var(--f-red); }
.fl-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: var(--f-space-2) 0 0; padding: 0; font-size: var(--f-text-xs); color: rgba(244,240,232,.65); }
.fl-chart__legend li { background: none; }
.fl-chart__legend li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: currentColor; }
.fl-chart__legend .s-lot::before  { background: #33465C; }
.fl-chart__legend .s-ship::before { background: #3D5470; }
.fl-chart__legend .s-duty::before { background: #4A6384; }
.fl-chart__legend .s-fee::before  { background: #5A7397; }
.fl-chart__legend .s-com::before  { background: var(--f-red); }
.fl-chart__legend b { color: var(--f-ivory); font-weight: var(--f-w-semi); }
.fl-chart__diff { margin-top: var(--f-space-5); font-size: var(--f-text-xl); font-weight: var(--f-w-black); color: var(--f-red); }
.fl-chart__diff span { display: block; font-size: var(--f-text-xs); font-weight: var(--f-w-regular); color: rgba(244,240,232,.55); }
@media (max-width: 900px) { .fl-savings__top { grid-template-columns: 1fr; } }   /* фото уходит под заголовок (§1) */
@media (max-width: 600px) {
  .fl-chart__bar { height: 40px; }
  .s-ship span { display: none; }
  .fl-chart__legend { gap: 6px 14px; }
}

/* маршрут на тёмной секции: точки светлые, текст ivory */
.fl-bg-dark .fl-route__dot { background: var(--f-ivory); color: var(--f-navy); }
.fl-bg-dark .fl-route__step p { color: rgba(244,240,232,.72); }
.fl-bg-dark .fl-route__steps::before { background: linear-gradient(90deg, var(--f-blue), rgba(244,240,232,.5) 50%, var(--f-red)); }

/* счётчик в чипе марки + CTA-заглушка контактов (нет данных офисов) */
.fl-chip__n { color: var(--f-text-faint); font-weight: var(--f-w-semi); }
.fl-chip.is-active .fl-chip__n { color: rgba(255,255,255,.7); }
.fl-contacts__cta { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); padding: var(--f-space-7); display: grid; gap: var(--f-space-4); justify-items: start; max-width: 640px; }

/* ==========================================================================
   Батч 2: двухколоночные текстовые секции (§3.3), инфографика §4.2–4.5, §7
   ========================================================================== */
/* §3.3 текстовая секция: заголовок слева, содержимое справа */
.fl-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--f-space-7); align-items: start; }
.fl-two__head h2 { position: sticky; top: calc(var(--fl-header-h-compact) + var(--f-space-4)); }
.fl-two__body > * + * { margin-top: var(--f-space-5); }
.fl-two__body p { max-width: var(--f-measure); }

/* §4.4 бары пробега (ровесники) */
.fl-milebars { display: grid; gap: var(--f-space-4); }
.fl-milebar { display: grid; grid-template-columns: 1fr; gap: 6px; }
.fl-milebar__label { font-size: var(--f-text-sm); color: var(--f-text-muted); }
.fl-milebar__track { height: 22px; background: color-mix(in srgb, var(--f-grey) 60%, transparent); border-radius: var(--f-radius-pill); overflow: hidden; }
.fl-milebar__fill { display: block; height: 100%; border-radius: var(--f-radius-pill); }
.fl-milebar__fill--ours { background: var(--f-blue); }
.fl-milebar__fill--market { background: var(--f-grey); }
.fl-milebar__val { font-weight: var(--f-w-black); letter-spacing: var(--f-tracking-tight); }
.fl-milebar__val { color: var(--f-navy); }
.fl-milebars__note { font-size: var(--f-text-xs); color: var(--f-text-faint); margin: 0; }

/* §7.2 таблица год→пробег */
.fl-mtable { width: 100%; border-collapse: collapse; font-size: var(--f-text-sm); max-width: 420px; }
.fl-mtable th, .fl-mtable td { text-align: left; padding: var(--f-space-3) var(--f-space-4); border-bottom: 1px solid var(--f-border); }
.fl-mtable th { color: var(--f-text-muted); font-weight: var(--f-w-semi); }
.fl-mtable td:last-child { font-weight: var(--f-w-bold); color: var(--f-navy); }

/* §7.3 три довода */
.fl-args { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--f-space-5); margin-top: var(--f-space-7); }
.fl-arg { border-top: 3px solid var(--f-blue); padding-top: var(--f-space-4); }
.fl-arg h4 { margin-bottom: var(--f-space-2); }
.fl-arg p { color: var(--f-text-muted); font-size: var(--f-text-sm); margin: 0; }

/* §7.4 выноска */
.fl-callout { margin-top: var(--f-space-7); padding: var(--f-space-6); background: var(--f-navy); color: var(--f-ivory);
  border-radius: var(--f-radius-lg); font-size: var(--f-text-md); font-weight: var(--f-w-semi); line-height: var(--f-leading-snug); max-width: none; }

/* §4.3 полоса крупных чисел (тонкая тёмная) */
.fl-bignum { background: var(--f-navy-900); color: var(--f-ivory); }
.fl-bignum__row { display: flex; justify-content: space-around; gap: var(--f-space-5); padding-block: var(--f-space-6); flex-wrap: wrap; text-align: center; }
.fl-bignum__item b { display: block; font-size: var(--f-text-3xl); font-weight: var(--f-w-black); letter-spacing: var(--f-tracking-tight); }
.fl-bignum__item span { font-size: var(--f-text-xs); color: rgba(244,240,232,.6); }

/* §4 маршрут: панорамное фото автовоза на всю ширину окна + слоган (§4.2) */
.fl-route { display: grid; gap: var(--f-space-7); }
.fl-route__media { position: relative; width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 21 / 9;
  margin-top: calc(-1 * var(--f-space-9));   /* убираем тёмную полосу: фото вплотную к верху секции (гасим padding-top .fl-pad-lg) */
  background: url("../img/misc/route-truck.webp") center / cover no-repeat; }
.fl-route__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(18,28,40,.72) 0%, rgba(18,28,40,.25) 38%, rgba(18,28,40,0) 70%); }
.fl-route__media-inner { position: absolute; inset: auto 0 0 0; padding-bottom: var(--f-space-6); }
/* слоган-баннера теперь <h2> (§1) — гасим tracking/line-height базового h2, вид не меняется */
.fl-process__slogan { position: relative; z-index: 1; margin: 0; font-size: var(--f-text-2xl); font-weight: var(--f-w-black); letter-spacing: normal; color: var(--f-ivory); }
@media (max-width: 700px) { .fl-route__media { aspect-ratio: 16 / 11; } .fl-process__slogan { font-size: var(--f-text-xl); } }

/* «Как это происходит» — лента из 5 этапов (баннер + 3 ряда в одной сетке) */
.fl-process { background: var(--f-navy); color: var(--f-ivory); padding-block: var(--f-space-9); }
.fl-process__lead { color: rgba(244,240,232,.70); max-width: 52ch; margin-bottom: var(--f-space-7); }
.fl-process__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 var(--f-space-4); }
.fl-process__grid figure { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--f-radius); overflow: hidden; }
.fl-process__grid figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* рельс маршрута */
.fl-process__rail { position: relative; height: 14px; margin-block: var(--f-space-4) var(--f-space-3); }
.fl-process__rail::before { content: ""; position: absolute; top: 50%; height: 3px; transform: translateY(-50%);
  left: calc(var(--f-space-4) / -2); right: calc(var(--f-space-4) / -2); background: var(--f-blue); }
.fl-process__rail:first-of-type::before { left: 50%; }
.fl-process__rail--last::before { right: 50%; }
.fl-process__rail i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--f-ivory); box-shadow: 0 0 0 4px var(--f-navy); }
.fl-process__rail--last i { background: var(--f-red); }
.fl-process__days { display: block; font-size: var(--f-text-xs); color: rgba(244,240,232,.68); margin-bottom: 4px; }
.fl-process__step h3 { font-size: var(--f-text-lg); margin: 0 0 var(--f-space-2); letter-spacing: 0; }
.fl-process__step p { font-size: var(--f-text-sm); color: rgba(244,240,232,.78); margin: 0; }
.fl-process__note { margin-top: var(--f-space-7); font-size: var(--f-text-xs); color: rgba(244,240,232,.55); }
@media (max-width: 900px) {
  .fl-process__grid { grid-template-columns: 96px 1fr; gap: var(--f-space-4); align-items: center; }
  .fl-process__rail { display: none; }
  .fl-process__grid figure { aspect-ratio: 1; grid-column: 1; }
  .fl-process__step { grid-column: 2; }
  .fl-process__grid figure:nth-of-type(1) { grid-row: 1; } .fl-process__step:nth-of-type(1) { grid-row: 1; }
  .fl-process__grid figure:nth-of-type(2) { grid-row: 2; } .fl-process__step:nth-of-type(2) { grid-row: 2; }
  .fl-process__grid figure:nth-of-type(3) { grid-row: 3; } .fl-process__step:nth-of-type(3) { grid-row: 3; }
  .fl-process__grid figure:nth-of-type(4) { grid-row: 4; } .fl-process__step:nth-of-type(4) { grid-row: 4; }
  .fl-process__grid figure:nth-of-type(5) { grid-row: 5; } .fl-process__step:nth-of-type(5) { grid-row: 5; }
}

/* §4.2 таймлайн */
.fl-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--f-space-4); position: relative; }
.fl-timeline::before { content: ""; position: absolute; left: 8%; right: 8%; top: 40px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--f-blue) 0 33%, var(--f-ivory) 33% 66%, var(--f-red) 66% 100%); opacity: .8; }
.fl-timeline__step { display: grid; justify-items: center; gap: var(--f-space-2); text-align: center; position: relative; z-index: 1; }
.fl-timeline__day { font-size: var(--f-text-xs); color: rgba(244,240,232,.6); }
.fl-timeline__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--f-ivory); border: 3px solid var(--f-navy); }
.fl-timeline__name { font-size: var(--f-text-sm); font-weight: var(--f-w-semi); color: var(--f-ivory); }

@media (max-width: 900px) {
  .fl-two { grid-template-columns: 1fr; gap: var(--f-space-5); }
  .fl-two__head h2 { position: static; }
  .fl-args { grid-template-columns: 1fr; }
  .fl-timeline { grid-template-columns: 1fr; gap: var(--f-space-5); }
  .fl-timeline::before { display: none; }
  .fl-timeline__step { grid-template-columns: 70px 16px 1fr; justify-items: start; align-items: center; text-align: left; }
}

.fl-ratenote { font-size: var(--f-text-xs); color: var(--f-text-faint); margin-top: var(--f-space-5); }

/* §6: когда cookie-полоса видна — отступ снизу и поднятая кнопка «наверх», чтобы ничего не перекрывалось */
body.has-cookie { padding-bottom: 76px; }
body.has-cookie .fl-totop { bottom: calc(var(--f-space-6) + 64px); }
.fl-footer { padding-bottom: var(--f-space-7); }

/* §2 «Что проверяем»: две колонки, справа меняющийся визуал (opacity 160ms) */
.fl-check { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 45%); gap: var(--f-space-7); align-items: start; }
.fl-check .fl-checklist { margin: 0; }
.fl-check__stage { position: sticky; top: calc(var(--fl-header-h-compact) + var(--f-space-5)); min-height: 420px; }
.fl-check__vis { position: absolute; inset: 0; opacity: 0; transition: opacity 160ms var(--f-ease); display: grid; place-items: center; }
.fl-check__vis.is-active { position: relative; opacity: 1; }
.fl-check__vis svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .fl-check__vis { transition: none; } }
@media (max-width: 900px) {
  .fl-check { grid-template-columns: 1fr; }
  .fl-check__stage { position: static; margin-top: var(--f-space-5); }
}

/* §3 пакеты: фото-обложка сверху карточки (заменила SVG-иконку и таблицу сравнения) */
.fl-plan__cover { margin: calc(-1 * var(--f-space-6)) calc(-1 * var(--f-space-6)) 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--f-radius-lg) var(--f-radius-lg) 0 0; }
.fl-plan__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FAQ — две независимые колонки, native <details> (компактные плашки) */
.fl-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f-space-7); align-items: start; }
.fl-faq__col { display: grid; gap: var(--f-space-2); align-content: start; }
.fl-faq__group { font-size: var(--f-text-xs); letter-spacing: var(--f-tracking-label); text-transform: uppercase; color: var(--f-text-faint); margin: 0 0 var(--f-space-2); }
.fl-faq__item { background: #fff; border: 1px solid var(--f-border); border-radius: var(--f-radius); }
.fl-faq__q { padding: 15px 44px 15px 18px; font-size: var(--f-text-base); font-weight: var(--f-w-semi); line-height: 1.35; cursor: pointer; position: relative; list-style: none; }
.fl-faq__q::-webkit-details-marker { display: none; }
.fl-faq__q::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--f-text-faint); border-bottom: 2px solid var(--f-text-faint); transform: translateY(-70%) rotate(45deg); transition: transform .18s; }
.fl-faq__item[open] .fl-faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.fl-faq__a { padding: 0 18px 16px; font-size: var(--f-text-sm); color: var(--f-text-muted); }
.fl-faq__a p { margin: 0 0 10px; max-width: none; }
.fl-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .fl-faq__grid { grid-template-columns: 1fr; } }

/* §5 реквизиты юрлиц: каждая строка с новой строки */
.fl-legal__line { display: block; }

/* Правовой документ (privacy.html) */
.fl-doc { padding-top: calc(var(--fl-header-h-compact) + var(--f-space-7)); padding-bottom: var(--f-space-8); background: var(--f-surface); }
.fl-doc__inner { max-width: 780px; }
.fl-doc h1 { font-size: var(--f-text-3xl); margin: var(--f-space-2) 0 var(--f-space-3); }
.fl-doc__meta { color: var(--f-text-faint); font-size: var(--f-text-sm); margin-bottom: var(--f-space-7); }
.fl-doc section { margin-bottom: var(--f-space-6); }
.fl-doc h2 { font-size: var(--f-text-xl); margin-bottom: var(--f-space-3); }
.fl-doc p { max-width: none; color: var(--f-text-muted); line-height: var(--f-leading-body); margin-bottom: var(--f-space-3); }
.fl-doc ul { margin: 0 0 var(--f-space-3) var(--f-space-5); color: var(--f-text-muted); line-height: var(--f-leading-body); }
.fl-doc li { margin-bottom: var(--f-space-2); }
.fl-doc b { color: var(--f-text); }
.fl-doc a { color: var(--f-blue-600); }
.fl-doc__ops li { margin-bottom: var(--f-space-3); }
.fl-doc__note { font-size: var(--f-text-xs); color: var(--f-text-faint); font-style: italic; border-top: 1px solid var(--f-border); padding-top: var(--f-space-4); margin-top: var(--f-space-7); }
.fl-footer__bottom a { color: rgba(244,240,232,.7); }
.fl-footer__bottom a:hover { color: var(--f-ivory); }

/* ==========================================================================
   Калькулятор растаможки (kalkulyator.html)
   ========================================================================== */
.fl-calc-page { padding-top: calc(var(--fl-header-h-compact) + var(--f-space-7)); padding-bottom: var(--f-space-8); }
.fl-kalk { display: grid; gap: var(--f-space-7); }
.fl-calc__form { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-lg); padding: var(--f-space-6); display: grid; gap: var(--f-space-5); }
.fl-calc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--f-space-5); }
.fl-calc__prod { grid-column: 1 / -1; }
.fl-calc__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f-space-3); }
.fl-calc__opt { font-weight: var(--f-w-reg); color: var(--f-text-faint); }
@media (max-width: 640px) { .fl-calc__grid { grid-template-columns: 1fr; } }

.fl-calc__result[hidden] { display: none; }
.fl-calc__result { display: grid; gap: var(--f-space-5); }
.fl-calc__toggle { display: inline-flex; gap: 4px; background: var(--f-blue-100); border-radius: var(--f-radius-pill); padding: 4px; }
.fl-calc__toggle button { border: 0; background: transparent; padding: 8px 18px; border-radius: var(--f-radius-pill); font: inherit; font-weight: var(--f-w-semi); color: var(--f-text-muted); cursor: pointer; }
.fl-calc__toggle button.is-active { background: var(--f-surface); color: var(--f-navy); box-shadow: var(--f-shadow-card); }

.fl-calc__tablewrap { overflow-x: auto; }
.fl-calc__table { width: 100%; border-collapse: collapse; }
.fl-calc__table th, .fl-calc__table td { padding: var(--f-space-3) var(--f-space-4); text-align: right; border-bottom: 1px solid var(--f-border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-calc__table thead th { color: var(--f-navy); font-weight: var(--f-w-bold); border-bottom: 2px solid var(--f-border-strong); }
.fl-calc__table tbody th { text-align: left; font-weight: var(--f-w-semi); color: var(--f-text); white-space: normal; }
.fl-calc__table tr.is-flat td { color: var(--f-text-muted); }
.fl-calc__col-b { background: var(--f-blue-100); }
.fl-calc__same { color: var(--f-text-faint); }
.fl-calc__pending { color: var(--f-red-600); font-weight: var(--f-w-semi); white-space: normal; font-size: var(--f-text-sm); }
.fl-calc__total th, .fl-calc__total td { border-top: 2px solid var(--f-border-strong); border-bottom: 0; font-size: var(--f-text-lg); font-weight: var(--f-w-black); color: var(--f-navy); }
.fl-calc__total td[colspan] { text-align: left; }
/* подсветка активной колонки переключателем */
.fl-calc__table[data-active="a"] th:nth-child(2), .fl-calc__table[data-active="a"] td:nth-child(2) { outline: 2px solid var(--f-blue); outline-offset: -2px; }
.fl-calc__table[data-active="b"] .fl-calc__col-b { outline: 2px solid var(--f-blue); outline-offset: -2px; }

.fl-calc__warn { background: #FBECEC; border: 1px solid var(--f-red); border-radius: var(--f-radius); padding: var(--f-space-4) var(--f-space-5); color: var(--f-text); line-height: var(--f-leading-body); }
.fl-calc__warn b { color: var(--f-red-600); }
.fl-calc__note-inline { font-size: var(--f-text-sm); color: var(--f-text-muted); background: var(--f-blue-100); border-radius: var(--f-radius); padding: var(--f-space-3) var(--f-space-4); }
.fl-calc__disclaimer { font-size: var(--f-text-xs); color: var(--f-text-faint); line-height: var(--f-leading-snug); }
.fl-calc__notice { background: var(--f-blue-100); border-radius: var(--f-radius); padding: var(--f-space-5); color: var(--f-text); line-height: var(--f-leading-body); }
.fl-calc__notice.is-big { font-size: var(--f-text-md); }

.fl-calc-benefit { margin-top: var(--f-space-8); max-width: var(--f-measure); }
.fl-calc-benefit h2 { margin-bottom: var(--f-space-4); }
.fl-calc-benefit p { color: var(--f-text-muted); margin-bottom: var(--f-space-3); }
.fl-calc-benefit ul { margin: 0 0 var(--f-space-4) var(--f-space-5); color: var(--f-text-muted); line-height: var(--f-leading-body); }
.fl-calc-benefit li { margin-bottom: var(--f-space-2); }

/* год по регистрации — пометка в карточке каталога (доп.§3.4) */
.fl-carcard__yr { font-size: 10px; font-weight: var(--f-w-bold); color: var(--f-red-600); text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; }

/* §2 схема дефектов: два ракурса + легенда */
.fl-damage { width: 100%; }
.fl-damage svg { width: 100%; height: auto; display: block; }
.fl-damage__legend { display: flex; align-items: center; gap: 8px; margin: var(--f-space-4) 0 var(--f-space-2); font-size: var(--f-text-sm); color: var(--f-text); }
.fl-damage__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--f-red); flex: none; }
.fl-damage__spec { font-size: var(--f-text-sm); color: var(--f-text-muted); margin: 0; }
.fl-damage__spec b { color: var(--f-text); }

/* §4 диаграмма расходов: подписи слева не обрезаются, сегменты справа */
.fl-cost-chart { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: var(--f-space-3); align-items: center; width: 100%; max-width: 440px; }
.fl-cost-chart__label { text-align: right; font-size: var(--f-text-xs); color: var(--f-text-muted); white-space: nowrap; }
.fl-cost-chart__seg { border-radius: 4px; display: block; }

/* §3 сетка фотоотчёта: 6 одинаковых плиток 4:3 */
.fl-report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--f-space-3); width: 100%; }
.fl-report-grid figure { position: relative; aspect-ratio: 4 / 3; border-radius: var(--f-radius); overflow: hidden; margin: 0; background: var(--f-navy); cursor: pointer; }
.fl-report-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-report__play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(32,48,63,.72); display: grid; place-content: center; pointer-events: none; }
.fl-report__play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.fl-report__cap { position: absolute; left: 8px; bottom: 8px; font-size: var(--f-text-xs); color: #fff; background: rgba(32,48,63,.72); padding: 4px 8px; border-radius: 4px; pointer-events: none; }

/* §3.5 лайтбокс */
.fl-lightbox { position: fixed; inset: 0; z-index: var(--f-z-pop); background: rgba(18,28,40,.9); display: grid; place-items: center; padding: var(--f-space-5); }
.fl-lightbox[hidden] { display: none; }
.fl-lightbox__img { max-width: min(1100px, 92vw); max-height: 88vh; border-radius: var(--f-radius-lg); display: block; }
.fl-lightbox__close { position: absolute; top: var(--f-space-5); right: var(--f-space-5); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.fl-lightbox__close:hover { background: rgba(255,255,255,.28); }
@media (max-width: 600px) { .fl-report-grid { grid-template-columns: repeat(2, 1fr); } }

/* §2 заголовок секции: первая часть navy, вторая — red отдельной строкой */
.fl-section__title { color: var(--f-navy); }
.fl-section__title .fl-accent { display: block; color: var(--f-red); }
.fl-section__title sup { font-size: .6em; }

/* §3.2 три преимущества аукциона — на всю ширину контейнера под колонками */
.fl-auction-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--f-space-6); margin-top: var(--f-space-7); }
.fl-auction-adv__item { display: grid; gap: var(--f-space-3); align-content: start; }
.fl-auction-adv__ico { width: 40px; height: 40px; color: var(--f-blue); }
.fl-auction-adv__ico svg { width: 100%; height: 100%; display: block; }
.fl-auction-adv__item h4 { font-size: var(--f-text-lg); margin: 0; }
.fl-auction-adv__item p { margin: 0; color: var(--f-text-muted); max-width: 42ch; line-height: var(--f-leading-body); }
@media (max-width: 900px) { .fl-auction-adv { grid-template-columns: 1fr; } }